画像をSVGに変換する

はじめに

画像からSVGへの変換は、PNG、JPG、WebPなどのラスター画像をベクターマークアップへ置き換える処理です。出力は元画像の完全な複製ではありません。見えている内容を図形、パス、色、座標として解釈し直した結果です。

ラスター画像はピクセルを保存し、SVGは描画手順を保存します。入力が単純なら、その手順も整理された使いやすいものになります。入力が複雑なら、生成されるSVGは大きく壊れやすくなり、元画像より不正確になることがあります。

このガイドでは、SVG変換が適切な画像、避けるべき画像、公開前に確認すべき項目を説明します。

SVGを使うとよい場合

多数の異なるピクセルではなく、明確な形として表現できる画像にSVGを使用します。

• -単色に近く輪郭が明確なロゴ
• -UIアイコン、バッジ、記号、ブランドマーク
• -線画、図、署名、スケッチ
• -色数の少ない単純なイラスト
• -複数の画面サイズで拡大・縮小する素材
• -CSSでの色変更やコード上の制御が必要なグラフィック

同じ素材をさまざまな場所で使う場合、整ったSVGは小さなボタンから大きな表示まで一つのファイルで対応できます。

SVGを使わない方がよい場合

SVGが新しい形式に見えるという理由だけで選ばないでください。SVGは自動的に小さく、鮮明で、優れた結果になるわけではありません。

次の要素に依存する画像は、ラスター形式のままにする方が適切です。

• -細部の多い写真
• -柔らかな影や自然な光
• -複雑なグラデーションや質感
• -小さな要素が多いスクリーンショット
• -ノイズの多い背景
• -非常に多くの色

写真をトレースすると、多数のパスと色が生成され、元のWebPやJPGより大きく描画も重いSVGになることがあります。

どの画像がSVGに適していますか？

重要なのは「SVGに変換できるか」ではなく、「変換後のSVGが元のラスター画像より扱いやすいか」です。

実際の変換例: 単純なロゴ

この結果は2026年7月26日に、SVGKITの標準Colorモードと元の背景を保持する設定で計測しました。白い背景に黒いマークと文字があるため、限られた色と明確な輪郭を比較的管理しやすいパスで表現できました。

元のPNG

SVGKITの出力

入力

792,538バイト

出力

30,311バイト

パス

254個

処理時間

約0.9秒

このような形中心のロゴはSVG変換の利点を得やすい素材です。ただし元のベクターデザインがある場合は、ラスターをトレースするより元データを使う方が正確です。

よくある失敗

トレース結果が元画像と完全に同じだと考える

トレースは見た目を近似する処理です。元のデザインファイルのレイヤー、編集可能なオブジェクト、正確な曲線を復元するものではありません。

パフォーマンス目的で写真をSVGにする

写真に近いSVGは圧縮されたラスター画像より大きく遅くなることがあります。写真にはまずWebPやJPGを検討してください。

出力サイズとパス数を確認しない

見た目が正しくても構造が重い場合があります。ファイルサイズ、パス数、視覚的な複雑さを公開前に確認します。

視覚確認を省く

小さい表示と大きい表示で元画像と比較し、欠けた形、変わった色、壊れた透明部分、不要なノイズがないか確認します。

ベストプラクティス

• -利用できる中で最もきれいな入力画像を使用します。
• -高コントラストで輪郭が明確な画像を選びます。
• -不要な余白と背景ノイズを変換前に除去します。
• -写真と複雑なスクリーンショットはラスター形式のままにします。
• -小さい表示と大きい表示の両方で確認します。
• -公開前に出力サイズとパス数を確認し、生成SVGを最適化します。
• -将来の編集に備えて元画像やデザインデータを保管します。

実務での手順

1. 1
   SVGが適切な最終形式か判断します。
2. 2
   余白を切り取り、ノイズを減らして入力を整理します。
3. 3
   入力の特徴に合うトレースモードを選びます。
4. 4
   小さい表示と大きい表示で出力を確認します。
5. 5
   生成されたSVGを公開前に最適化します。
6. 6
   SVGと元のラスター画像を比較し、最終形式を決めます。

FAQ

SVGは常にPNGより小さくなりますか？

いいえ。単純な形では小さくなることがありますが、写真や複雑な画像をトレースするとSVGの方が大きくなる場合があります。

JPG写真をSVGに変換できますか？

技術的には可能ですが、通常は推奨しません。多数の色とパスが必要になり、写真らしい細部を保ちにくいためです。

生成されたSVGは編集できますか？

XMLやベクター編集ソフトで編集できます。ただしトレース結果は元のデザインレイヤーを復元したものではありません。

変換後もSVGの最適化は必要ですか？

はい。生成SVGには不要なメタデータ、精度、重複構造が含まれることがあります。見た目を確認しながら最適化してください。