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)は用途が異なります。画像を何に使うかによって適した形式が決まります。
| 項目 | SVG | PNG / JPG | ICO / 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
ファイルをドロップするか「ファイルを選択」を押してキューに追加します。一度に最大 40 件です。
- 2
出力設定(サイズ、DPI、背景、品質、トレースの細かさ)を指定すると、プレビューがその場で更新されます。
- 3
「すべて保存」を押すと結果をダウンロードできます。キューに複数ある場合は 1 つの ZIP になります。
プライバシー:ファイルはブラウザから出ません
変換は、JavaScript および WebAssembly を使用してブラウザーでローカルに実行されます。ファイルのアップロードやサーバー側の変換がないため、追加したファイルはデバイス上に残ります。
ローカル処理は、機密ロゴ、内部文書、未公開のクライアント アートワークを保護するのに役立ちます。ページと変換コードは使用中にキャッシュされるため、すでに開いているツールはネットワーク接続がなくても引き続き動作できます。
よくある質問
SVG は元の JPG とまったく同じ見た目になりますか?
トレースはパスと塗りつぶしを使用してオリジナルに近似するため、写真の細かいディテール (グラデーション、ソフト シャドウ、テクスチャ) が簡素化されます。ロゴやグラフィックの場合、多くの場合、結果が認識可能になり、拡大縮小が容易になります。写真の場合、SVG は全体的な構成を維持しますが、微妙な色調の変化が失われます。色の精度を上げ、ノイズリダクションを下げて、ソースに近づけます。
トレースした JPG に妙なノイズが出るのはなぜですか?
JPEG の圧縮はブロック状のノイズを生み、輪郭の近くや品質設定が低いときに特に目立ちます。そのブロックが小さなパスとしてトレースされ、SVG が肥大します。ノイズ除去のスライダーを上げて取り除くか、「軽量」プリセットから始めてください。
JPG から透過の SVG を作れますか?
JPG には透明度がなく、ベタの背景が別の形状としてトレースされる可能性があります。 SVG は、トレーサーがパスを作成しない場所ではどこでも鮮明であるため、白黒のしきい値、色の精度、またはノイズ低減を調整すると、単純な被写体を背景から分離するのに役立つ場合があります。