本文へスキップ

JPG を SVG に

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

JPG ロゴ、スキャン、線画、グラフィックを編集可能な SVG パスにベクトル化します。カラー、ディテール、ノイズリダクションを調整して、JPEG アーティファクトを和らげます。写真は、単純なアートワークよりも様式化された結果を生み出します。

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

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

カラーモード

プレビュー

プレビューはありません。ファイルを追加して選択すると結果が表示されます。

ファイルがありません。上にドロップするか、「ファイルを選択」を押してください。

JPG とは

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

SVG とは

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

SVGはWeb標準のベクター形式です。すべての最新ブラウザでネイティブに表示でき、CSSでの装飾やJavaScript、SMILによるアニメーションにも対応します。ロゴ、アイコン、イラストでは軽量になりやすい一方、複雑なSVGはファイルサイズが大きくなる場合があります。

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:ファイルサイズと品質のバランス

ファイルサイズ

JPG の圧縮サイズは、トレースされる SVG のサイズを予測しません。単純なロゴや線画は小さなベクター ファイルになる可能性がありますが、写真は多くのパスと大きな結果を作成することができます。色を減らし、細かい部分をフィルタリングすることで、SVG をより扱いやすくします。

SVG が元の JPG に勝るとき

JPG がロゴ、グラフィック、スキャンされた線画、または拡大縮小、色変更、または編集したいものであり、元のベクター ファイルが利用できない場合は、SVG に変換します。トレースでは、JPEG 圧縮で失われた詳細を復元することはできませんが、適切なソースからクリーンで再利用可能なパスを作成できます。

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

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

品質とのバランス

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

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

  1. 1

    ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。

  2. 2

    出力設定(サイズ、DPI、背景、品質、トレースの細かさ)を指定すると、プレビューがその場で更新されます。

  3. 3

    「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。

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

変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。

ローカル処理は、機密ロゴ、内部文書、未公開のクライアント アートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。

よくある質問

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

トレースはパスと塗りつぶしを使用してオリジナルに近似するため、写真の細かいディテール (グラデーション、ソフト シャドウ、テクスチャ) が簡素化されます。ロゴやグラフィックの場合、多くの場合、結果が認識可能になり、拡大縮小が容易になります。写真の場合、SVG は全体的な構成を維持しますが、微妙な色調の変化が失われます。色の精度を上げ、ノイズリダクションを下げて、ソースに近づけます。

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

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

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

JPG には透明度がなく、ベタの背景が別の形状としてトレースされる可能性があります。 SVG は、トレーサーがパスを作成しない場所ではどこでも鮮明であるため、白黒のしきい値、色の精度、またはノイズ低減を調整すると、単純な被写体を背景から分離するのに役立つ場合があります。