本文へスキップ

JPG を SVG に

JPG を SVG に変換:写真やグラフィックをベクター化

JPEG の写真、スキャン、グラフィックを、拡大、色替え、アニメーションができる SVG パスに変換します。ノイズ除去を強めると JPEG のブロックノイズを抑え、トレースがきれいになります。

ここにファイルをドロップ

新規ファイルの既定値を編集しています

カラーモード

プレビュー

プレビューはありません。ファイルを追加して選択すると結果が表示されます。
ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。

JPG とは

JPG(JPEG)は非可逆圧縮のラスター画像形式で、写真やグラデーションの多い画像を小さなファイルにまとめます。JPG は透過に対応していないため、透明な部分は指定した背景色で塗りつぶされます。

SVG とは

SVG(Scalable Vector Graphics)は XML をもとにしたベクター画像形式です。ピクセルではなく、図形、パス、塗り、線を数式で表すため、どんなサイズで描画しても品質が落ちません。

SVG は Web における標準のベクター形式です。最新のブラウザはすべて標準で対応し、CSS でスタイルを指定でき、JavaScript や SMIL でアニメーションもできます。同等のラスター画像に比べてファイルサイズも大幅に小さくなります。

SVG とラスター形式の比較

ベクター画像(SVG)とラスター画像(PNG、JPG)は用途が異なります。画像を何に使うかによって適した形式が決まります。

項目SVGPNG / JPGICO / ICNS
拡大縮小解像度に依存しない拡大するとぼやける固定サイズで事前に描画
ファイルサイズ図形やアイコンは小さい解像度とともに増える各サイズの画像の集合
編集テキストやベクターツールで編集可ピクセル単位の編集のみ各サイズを編集して再度まとめる
アニメーションCSS、SMIL、JavaScript限定的(APNG / GIF)非対応
透過対応PNG は対応、JPG は非対応対応(PNG ベース)

JPG を SVG に変換するのはどんなとき

写真、スキャン、Web 画像の拡大自在な版が必要なときは、JPG を SVG に変換してください。JPEG のブロック状の圧縮ノイズはトレース時に余分なパスとして現れることがあるため、色の精度を下げてノイズ除去を強めるときれいな SVG になります。JPG で保存されたロゴ、イラスト、コントラストの高いグラフィックに向いています。写真本来の細部が必要なら JPG のまま使ってください。

JPG から SVG:ファイルサイズと品質のバランス

ファイルサイズ

品質 0.85 の JPG 商品写真(幅 2000〜4000 px で 200〜800 KB が一般的)は 100〜500 KB の SVG になります。グラフィック調の JPG(JPG で保存されたロゴやイラスト、多くは 30〜150 KB)は 10〜80 KB の SVG に収まるのが普通です。元画像に写真的な細部より平坦な色が多いほど効果は大きくなります。

SVG が元の JPG に勝るとき

JPG がロゴ、グラフィック、スキャンした線画など、拡大、色替え、編集をしたいものなら SVG に変換してください。ベクター形式にすると、書き出しのたびに焼き込まれてしまう JPG の圧縮ノイズがなくなり、どんな解像度にも劣化なく拡大できます。

元の JPG を使い続けるべきとき

本物の写真は JPG のままにしてください。トレーサーは全体の構図は再現しますが、グラデーションをとびとびの色領域にまとめます。ポスター調の効果を狙うならよいのですが、人物、風景、細かな商品画像には向きません。

品質とのバランス

JPG の圧縮は 8×8 のブロックノイズを生み、輪郭の近くや品質設定が低いときに特に目立ちます。ノイズ除去を上げないかぎり、トレーサーはそのブロックをなぞってしまいます。手元でいちばん品質の高い JPG から始めてください。元の品質が低いと、SVG のパスは減るどころか増えます。

JPG を SVG にオンラインで変換する方法

  1. ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
  2. 出力設定(サイズ、DPI、背景、品質、トレースの細かさ)を指定すると、プレビューがその場で更新されます。
  3. 「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。

プライバシー:ファイルはブラウザから出ません

ファイルが端末の外に出ることはありません。変換は JavaScript と WebAssembly を使ってすべてブラウザ内で実行されます。アップロードもサーバー処理もないため、ファイルに関する情報がどこかへ送られることはありません。

何もアップロードされないため、社外秘のロゴ、社内文書、未公開の顧客作品にも安心して使えます。使用中に端末へキャッシュされるので、初回訪問のあとはネットワーク接続がなくても動作します。

よくある質問

SVG は元の JPG とまったく同じ見た目になりますか?

トレースはパスと塗りで元画像を近似するため、写真の細かな部分(グラデーション、やわらかい影、質感)は簡略化されます。ロゴやグラフィックなら見分けがつかないのが普通ですが、写真では全体の構図は保たれるものの微妙な階調は失われます。元に近づけるには、色の精度を上げ、ノイズ除去を弱めてください。

トレースした JPG に妙なノイズが出るのはなぜですか?

JPEG の圧縮はブロック状のノイズを生み、輪郭の近くや品質設定が低いときに特に目立ちます。そのブロックが小さなパスとしてトレースされ、SVG が肥大します。ノイズ除去のスライダーを上げて取り除くか、「軽量」プリセットから始めてください。

JPG から透過の SVG を作れますか?

JPG 自体に透過はありませんが、トレースはアルゴリズムが検出した図形だけを出力します。そのため、パスが置かれなかった場所は自然に透明になります。不要な背景を消すには、白黒のしきい値を高くするか、色数を減らしてください。