PNG を SVG に変換する方法（トレースが必要な理由）

「PNG を SVG に変換」で検索する人が欲しいものは、たいてい次のどちらかです。ひとつは、どの大きさでもぼやけないベクター図です。もうひとつは、PNG を表示するだけの SVG ファイルです。前者は本当にトレースという画像解析が必要です。後者は3行のテキストで足ります。

PNG 単体では本物の SVG にならない理由

PNG は色を並べた画素の格子です。SVG は「ここに円を描く」「この図形を塗りつぶす」という指示の並びで、描画する側が指定された大きさで画素に落とし込みます。

PNG の中に「この画素の塊は一本のなめらかな曲線だ」という情報は書かれていません。図形を推測するこの処理をトレースと呼びます。ベクトル化、自動トレースとも呼ばれます。ファイル名の書き換えではなく、立派な画像解析です。

このサイトのツールは逆向きに働きます。お使いのブラウザに組み込まれた画像デコード機能でファイルを読み込み、結果を端末内で書き直すだけです。ブラウザにトレーサーは組み込まれていません。このサイトはファイルをサーバーへ送らない設計なので、サーバー側のトレーサーもありません。

そのため「PNG を SVG に変換」というボタンは用意していません。押しても、実体は元の画素を埋め込んだだけの SVG を渡して「変換しました」と表示するだけです。

方法1：無料で自分の端末でオフラインにトレースする

Inkscape は無料で、Windows・Mac・Linux でオフライン動作します。もっとも一般的な答えです。PNG を開いてパス → 画像をトレースを選びます。プリセットを選んでOKすると、編集できるパスが作られます。あとはファイル → 名前を付けて保存で SVG が書き出されます。

ローカルで動くので画像は端末の外に出ません。このサイトのツールと同じ性質です。文字やバッジ、アイコンのようなシンプルなマークは、トレースより描き直した方が扱いやすくなります。図形ソフトで線を引き直せば、ファイルはずっと小さく、どの解像度でも鮮明です。

写真はもともとベクター形式の入力に向いていません。トレースしたファイルは、元の PNG より大きくなることがあります。

方法2：PNG を SVG の中に埋め込む（トレース不要）

本当に必要なのが「イラストツールやスライド、SVG しか受け付けない印刷ジョブにロゴを入れたい」というだけなら、トレースは不要です。PNG を指す SVG を作れば足ります。次の内容を logo.png と同じフォルダに logo.svg として保存してください。幅と高さは画像の実際のピクセル数に書き換えてください。

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
  <image href="logo.png" width="512" height="512"/>
</svg>

これは本物の SVG ファイルで、どのプログラムでも開けます。ただし画像のベクター版ではありません。元の画素を表示したままで、サイズは1つに固定されます。拡大するとぼやけます。PNG が隣にないと同じ場所では開きません。

方法3：まずは元のベクターデータを探す

何かを変換する前に、本物の SVG が既にないか確認してください。ロゴが載っているウェブサイトであれば、そのサイトの /favicon.svg やページ内の <svg> ブロックが元データかもしれません。デザインを外注して作ったロゴなら、ベクターデータのファイルを依頼してください。自分で描いた図形なら、書き出すときから SVG にしてください。

このサイトでできること

トレースそのものはここではできませんが、その前処理はほとんどできます。トリミング・回転で正方形に切って余白を詰めます。EXIF・位置情報の削除で、他のプログラムに渡す前に撮影場所やカメラ情報を消します。ピクセル指定リサイズで必要な大きさにし、画像圧縮で容量を小さくできます。

Webサイトのアイコン一式が必要ならファビコン作成を使ってください。トレースではなく本物のPNGとして、必要なサイズをすべて作れます。

よくある質問