PNG・JPG を編集可能な SVG に変換するには？トレースと確認手順

PNG や JPG を編集可能な SVG にするには、画像内の形状をトレースするか、ベクターとして描き直します。SVG の中に元画像を埋め込むだけでは、ベクター化したことにはなりません。 確認すべきなのは拡張子ではなく、元のビットマップを取り除いた後でも、部品ごとの塗りや輪郭を変更できるかどうかです。

トレースは、平面的なアイコン、輪郭の明瞭なシルエット、簡単なイラストに向いています。写真、柔らかな影、質感のある絵では、ラスター画像のまま残す、簡略化したベクター表現を受け入れる、一部を手作業で作り直す、といった判断が必要です。AI による描き直しも可能ですが、元画像の再解釈になるため、忠実度を別途確認します。

この記事では、独自に作成した幾何学的なマグカップ画像、実際のローカルトレース結果、ベクター化したように見えるビットマップ埋め込みファイル、色を変えたベクターを配布します。入力画像はコードで作成しており、AI モデルの出力ではありません。変換には 2026 年 11 月 11 日に VTracer 0.6.15 を使用しました。有料の Illustrator や AI 変換サービスは今回試していません。

サンプルをダウンロードして違いを確かめる

PNG→SVG サンプル一式には、mug.png、mug-wrapped.svg、mug-traced.svg、mug-recolored.svg、グラデーションのテスト画像、変換スクリプト、検査レポートを収録しています。顧客のロゴや機密デザインを扱う前に、まずこのサンプルで手順を確認してください。

パス数はこれらのファイルで測定した値であり、目標値ではありません。4 本のパスで実用的なイラストを表せる一方、数百本あっても編集しにくい場合があります。また、パスを使わず、長方形・円・文字だけで構成された正当なベクター画像もあります。中身と、必要な編集操作を確認することが重要です。

ローカルの検証用ビューアをブラウザーで表示した、英語画面の実際のスクリーンショットです。入力はコードで作成した画像で、表示内容は実際のトレース結果です。AI 製品の操作画面ではありません。

トレース、描き直し、混在ファイルを使い分ける

元の輪郭が重要ならトレースを選びます。 シルエットが明確で、解像度が十分にあり、色の領域が少ない入力が適しています。プレゼンからコピーしたサムネイルではなく、最良の原本から始めましょう。JPEG の圧縮ノイズは小さな色の領域となり、不要な図形としてトレースされることがあります。

ピクセル単位の一致より、意味のある部品として編集したいなら描き直しを選びます。 例えば、後で動かしたり配置を変えたりするなら「カップ、取っ手、受け皿を名前付きグループに分ける」と指定します。自動トレースが捉えるのは通常、意味を持つ物体ではなく連続した色です。AI は分かりやすくグループ化できるかもしれませんが、比率の変更、細部の削除、文字の創作も起こり得ます。描き直しは、承認を要するデザイン修正として扱ってください。

ピクセル表現が適切な部分は、混在ファイルとして残せます。 写真背景にベクターのラベルを重ねた SVG は正当な使い方です。ただし、写真全体をベクター化したと説明してはいけません。ラスターのまま残る範囲を明記し、高解像度の元画像を保管します。コンテナーが拡大縮小できても、写真の細部まで無限に拡大できるわけではありません。

既存画像の変換ではなく、新しいベクター作品を生成する場合は Image 2.6 の SVG ガイドをご覧ください。出発点が異なるため、合格基準も異なります。同モデルで SVG/GIF リクエストが拒否されたら、拡張子を変えるのではなく、Image 2.6 の出力形式・パラメーターエラー対処法（英語）を確認してください。

グラフィックエディターでトレースする

Inkscape のトレースガイドでは、画像を読み込み、Path → Trace Bitmap を使う操作を説明しています。単純な単色シルエットには単一スキャン、色分けを残したい場合にはカラートレースを使います。すべての画像に同じプリセットを適用せず、プレビューを見ながら入力に合わせて調整します。

トレース後は結果を横へ移動してください。多くのエディターは結果を元画像の上に置くため、トレースの欠点が見えにくくなります。文書のコピーで元のビットマップを非表示にするか削除し、輪郭、穴、小さな細部を確認します。部品を 1 つ色変更して保存し、SVG を開き直します。「トレースが生成された」と「使えるトレースができた」を分けて確認できます。

Illustrator の公式 Image Trace 手順は、画像を配置・選択し、Image Trace パネルを開くところから始まります。適切なプリセットを選び、プレビューを確認し、通常の編集可能なパスが必要なら結果を拡張します。これは公式文書に基づく代替手段の紹介です。今回配布する出力は Illustrator ではなく VTracer で作成しました。

文字は別に扱います。文字をトレースすると、通常は編集可能なテキストではなく輪郭になります。文言を変更する必要があるなら、利用可能なフォントで文字を作り直し、改行と字間を確認します。テキストを編集できる作業用コピーを残し、相手が求める場合はアウトライン化した納品用コピーも作ります。アウトライン化すると形状は保てますが、通常の文字編集はできなくなります。

ローカル変換を再現する

VTracerはラスター画像をベクターに変換するプロジェクトです。ここでは実際に使用したバージョンに固定します。新しい版では API が異なる場合があります。ZIP を新しいフォルダーへ展開し、そこでターミナルを開いて実行してください。

python3 -m venv .venv
source .venv/bin/activate
python -m pip install vtracer==0.6.15 Pillow==11.3.0
python convert.py mug.png my-mug.svg

Windows では source の代わりに .venv\Scripts\activate で環境を有効化します。スクリプトは既存の出力を上書きしません。変換はローカルで行い、AI API の呼び出しや画像のアップロードはありません。互換性のある wheel パッケージがない環境では、ビルド用ツールが必要になることがあります。インストールの解決に時間をかける代わりに、デスクトップエディターを使う方法もあります。

今回の設定はカラートレース、領域の重ね合わせ、スプライン曲線を使用します。重なった領域では、前面の部品を削除すると下にある大きな背景形状が現れる場合があります。デザイナーが手作業で作る構造と同じとは限りません。切断や加工に使う独立した形状が必要なら、ウェブのプレビューだけで判断せず、使用先のアプリで重なりや穴を確認してください。

付属の検査スクリプトは、ラスター画像要素、ベクターの図形、キャンバス属性を表示します。

python inspect_svg.py my-mug.svg

これは構造の確認を助けるもので、安全性監査や見た目の忠実度の証明ではありません。<image> 要素がなくても、描画が間違っていたり、未導入のフォントに依存したり、不要に複雑な図形を含んだりします。信頼できる SVG だけを開き、ウェブサイトに埋め込む前に生成されたマークアップを確認してください。

色とサイズを変更して、保存後の結果を確認する

今回のサンプルでは、オレンジの塗りを 1 か所紫に変えると、輪郭を保ったままカップの色が変わりました。mug-recolored.svg と mug-traced.svg を並べ、取っ手の穴と受け皿が維持されていることを確認します。色変更にはオブジェクト選択を使い、輪郭を変えたいときだけノード編集を使います。

ZIP にはキャンバスを調整した mug-responsive.svg も含まれます。トレーサーの元出力には幅と高さがありますが、viewBox はありません。固定サイズの文書としては有効でも、レスポンシブな埋め込みには不便です。今回の 512 × 384 という既知の座標系では、変換スクリプトが viewBox="0 0 512 384" を追加します。別のファイルでは実際の座標系から viewBox を決め、この数値をそのまま貼り付けないでください。縦横比を保ちながら、小さく表示した場合と大きく表示した場合を確認します。

納品前にコピー上で、塗りを 1 か所変える、オブジェクトを 1 つ動かす、イラスト全体のサイズを変える、という 3 つの操作を試します。保存して開き直し、すべての変更が残っているか確認してください。サムネイルや変換成功のメッセージよりも、受け取る人が実際に必要とする編集操作を確認できます。

AI に描き直してもらうときは条件を具体化する

参考画像を受け付け、SVG コードやダウンロード可能な SVG を返せる AI ツールでは、範囲を絞った依頼から始めます。以下は再利用できるプロンプトのひな型であり、すべてのツールで実行したという意味ではありません。

添付イラストを、単独で使える編集可能な SVG として描き直してください。
シルエット、比率、重要な余白や穴を保ってください。
ベクターのパスまたは図形を使い、元のラスター画像を埋め込まないでください。
意味のある部品を、名前付きグループに分けてください。
想定する縦横比に合った viewBox を指定してください。
文字、物体、外部画像、スクリプト、外部フォントを追加しないでください。
正確に再現できない細部は、勝手に置き換えずに明示してください。
SVG と、簡略化した箇所の短い一覧を返してください。
元画像は変更しないでください。

次に、図形は変えずにカップの色だけ変えるなど、限定した修正を 1 つ依頼します。「それ以外は変えていない」という Agent の説明だけを信じず、出力を比較してください。ブランドマーク、厳密な輪郭、法務承認済みの文字では、元のベクターデータを使うかデザイナーに確認してもらいます。見栄えのよい描き直しでも、要件を満たすとは限りません。

利用が認められた参考画像と上記の出力条件を用意し、Ofox Chat で作業を始めることもできます。ただし、この記事のローカルトレース結果は、すべての Chat モードが SVG を生成できることや、特定のデザインを維持できることを証明するものではありません。返されたファイルを使用前に確認してください。

よくある失敗と対処法

今回のグラデーション画像では、選んだ設定からパスが 2 本だけ生成され、色の変化が大きく簡略化されました。これは SVG でグラデーションを表せないという証拠ではありません。同じ自動設定でも、平面アイコンには適していて、連続階調の画像には不向きな場合があることを示しています。

納品物には元の入力、編集可能な SVG、プレビューを含め、簡略化した点を伝えます。作業用ファイルも残し、次回の修正で再び情報の失われる変換から始めなくて済むようにしましょう。