JPG を SVG に変換

ここで JPG を SVG に変換できます。無料、アカウント不要です。ファイルを上の枠に落とせば、数秒で結果がダウンロードできる状態になります。変換はお使いのブラウザーの中で行われるので、ファイルはアップロードされません。Windows でも macOS でも Linux でも、iPhone でも Android でも同じように動き、通信を切っても動き続けます。

処理される場所 ブラウザーの中です。ファイルがアップロードされることはありません。
作り直し SVGはJPGとは仕組みが違います。非可逆コーデックのような段階的な劣化ではありません。SVGが表現できるものは忠実に再現され、対応するものがないものはまったく残りません。
ファイルサイズの上限 1ファイルあたり100MBまで。無料、アカウント不要です。
知っておきたいこと トレースは、絵を平らな図形として描き直します。どんな大きさに拡大してもぼやけないのはそのためです。似た色の領域どうしの境目を見つけて、その一つひとつを輪郭線で囲っていく仕組みなので、そうした領域が本当に存在するもの——ロゴ、アイコン、平塗りのイラスト、スキャンした線画——でいちばんうまくいきます。写真には平らな領域がないので、トレースはそれを作り出してしまいます。結果はポスター調になり、元より大きくなります。トレース後のファイルはお手元のファイルと比べて計測され、どちらが起きたのかをダウンロード前にページが伝えます。

一度に100ファイルまで。フォーマットが混ざっていても構いません。

JPG から SVG

これは輪郭の復元ではなく、色の面へのなぞり直し

この変換は imagetracerjs というライブラリーを使い、画像を色ごとのフラットな面として描き直します。ベクター化と聞くと元の図形が「復元」される印象を持ちがちですが、実際にはそうした形の認識は行われません。

色の境目を輪郭として拾い、その内側を単色で塗りつぶす、という処理の繰り返しです。写真の中に本来なかった境界線が生まれることもあります。

ロゴは得意、写真は苦手

事前の検証では、色数の少ないロゴは 6 KB の PNG が 16 KB の SVG になる程度で収まり、忠実に再現されました。グラデーションのある画像では色が帯状に分かれます。

文字が入ったスクリーンショットでは、SVG が元の PNG の 40 倍もの大きさになった例が記録されています。写真では 4 倍ほど大きくなり、色が単純化されたポスタライズのような見た目になります。JPG が写真であることを考えると、この変換の相性はあまり良くありません。

色数は既定 8 色

既定のプリセットは「バランス」で、使う色の数は 8 色です。色数を増やせば元の見た目に近づきますが、その分ファイルは大きくなり、パスの数も増えます。

ロゴや単純なイラストであれば、8 色でも十分に元の形を保てることが多いです。細かいグラデーションを持つ画像では、色数を増やしても限界があります。

出力される SVG の実装上の注意点

viewBox 属性は常に付与されます。これがないと、見た目はベクターでも実質的にサイズ固定の画像と変わらなくなるためです。名前空間の宣言も自動で補われ、Inkscape や Illustrator で開いたときに拒否されることを防いでいます。

これらはこの変換機が後から補っている処理で、imagetracerjs 自体の出力にはどちらも含まれていません。

変換前と変換後、どちらが大きいか分かる

書き出しの前に、元のファイルとトレース後のファイルのどちらが大きいかが表示されます。写真をベクター化すると元より大きくなることが多いため、この比較を見てから使うかどうかを判断できます。

容量を減らす目的で JPG を SVG に変換するのは、多くの場合逆効果です。この変換が向いているのは、あくまで拡大縮小してもぼやけない図形が必要な場面に限られます。

変換はブラウザーの中で完結する

デコードとトレース処理はブラウザーの中で行われ、JPG ファイルがサーバーへ送られることはありません。開発者ツールのネットワークタブを開いたまま試せば確認できます。

この処理にサーバー側の代替はなく、対応していない端末ではこの変換自体が動きません。

無料枠とまとめての変換

ブラウザーの中で完結する変換なので、無料枠は 1 ファイルあたり 100 MB です。トレース処理は画素数が多いほど時間がかかるので、大きな画像は変換に時間がかかることがあります。

複数の JPG をまとめて置くこともでき、一度に処理できるのは 100 ファイルまでです。登録は不要で、1 日あたりの回数制限もありません。

JPG を SVG に変換する手順

お手元の JPG ファイルをこのページに落とすか、押してファイルを選んでください。
変換先に SVG を選びます。変換はブラウザーの中で行われ、ファイルはアップロードされません。
できあがった SVG ファイルをダウンロードします。

JPG と SVG——何が変わるか

JPGとSVGの比較
	JPG	SVG
正式名称	JPEG 画像	Scalable Vector Graphics
拡張子	.jpg, .jpeg, .jpe	.svg
メディアタイプ	image/jpeg	image/svg+xml
圧縮方式	非可逆 — サイズを画質で買う	無圧縮
最初の公開	1992	2001
発行元	Joint Photographic Experts Group	W3C
仕様	ITU-T T.81	SVG 1.1
ライセンス	オープン標準	オープン標準
現在の位置づけ	現行	現行
ビット深度	8	—
扱える色	RGB, グレースケール, YCbCr	RGB
最大の画像	1辺 65,535 px	—
ブラウザで開けるか	すべてのブラウザ	すべてのブラウザ
代わりに検討される形式	WebP, AVIF, HEIC	PNG, PDF

変換先の形式が追加で扱えるもの

SVG は透明を扱えますが、JPG は扱えません。これは結果の側にあって、元のファイルが一度も使わなかった余地です。変換によって透明な背景ができるわけではなく、あとから作れるようになるだけです。

SVG は作業のための形式で、JPG は完成したものを渡すための形式です。戻ってくるのはページの絵ではなく、編集できる文字です。たいていはそれがこの変換の理由であり、同時にこの変換の限界でもあります。

SVG はアニメーションを持てますが、JPG ファイルは 1 フレームしかありません。出てくるのは絵 1 枚のファイルで、それがもっと多くを扱えたはずの形式に入っている、という状態です。

SVG はレイヤーを扱えます。JPG ファイルはすでに統合された状態で入ってくるので、結果もレイヤー 1 枚のままです。構造を取り戻すには、手で組み直すことになります。

結果を開く

開くプログラムが重なりません。JPG はAdobe Photoshop、GIMP、Previewで、SVG はInkscape、Adobe Illustrator、Figmaで開きます。結果を渡す相手には後者のどれかが要ります。

ファイルサイズと品質

結果は元より大きくなり、そして良くはなりません。JPG はすでに細部を捨てており、SVG は残っているものをそれ以上捨てずに保持します。これは今後の劣化を止めますが、すでに起きた劣化を戻しはしません。

どちらの形式が何のためのものか

JPG は Joint Photographic Experts Group の形式です（1992 年に登場）。記録は 1 チャンネルあたり 8 ビットです。

SVG は W3C の形式で、2001 年から使われています。規定は SVG 1.1 です。Inkscape、Adobe Illustrator、Figmaがこの形式を読めます。

JPG から SVG：よくある質問

JPG ファイルはどこかにアップロードされますか。

いいえ。この変換は完全にブラウザーの中で行われるので、ファイルが端末から出ることはありません。ご自分で確かめられます。開発者ツールのネットワークタブを開いて、何か変換してみてください。ページそのものと、このサービスの費用をまかなっている分析・広告のリクエストは見えますが、あなたのファイルを運んでいるリクエストはひとつもありません。

JPG から SVG への変換は無料ですか。

はい。アカウントも透かしもなく、消費される 1 日の割り当てもありません。お使いの機械の上で動くので、何度でも戻ってきていただけます。ブラウザーが扱えるのは 100 MB までのファイルで、一度に 100 本です。

JPG を SVG に変換すると品質は落ちますか。

JPG と SVG は、内容の表し方が根本から違います。ですからこの変換は複製ではなく再構築です。誠実ではありますが、1 バイトも同じというわけではありません。トレースは、絵を平らな図形として描き直します。どんな大きさに拡大してもぼやけないのはそのためです。似た色の領域どうしの境目を見つけて、その一つひとつを輪郭線で囲っていく仕組みなので、そうした領域が本当に存在するもの——ロゴ、アイコン、平塗りのイラスト、スキャンした線画——でいちばんうまくいきます。写真には平らな領域がないので、トレースはそれを作り出してしまいます。結果はポスター調になり、元より大きくなります。トレース後のファイルはお手元のファイルと比べて計測され、どちらが起きたのかをダウンロード前にページが伝えます。

SVG に変換すると品質は良くなりますか。