画像をベクター化：PNG・JPG・WebPをベクターに変換

画像をベクター化するとは

PNG、JPG、WebPのようなラスター画像は、ピクセルの格子でできていて、各ピクセルが1つの色を持っています。拡大するとピクセルも大きくなるので、輪郭がぼやけたりギザギザになったりします。一方ベクター画像は、絵をパスと塗りで表します。線と曲線でできた輪郭と、その内側の色です。描画するときは指定したサイズで輪郭を描くので、輪郭はくっきりしたままです。

ベクター化とは、前者の画像を後者の画像にする作業です。「ラスターをベクターに」「画像をベクターに」「PNGをベクターに」はどれも同じ作業を指していて、それがトレースです。ピクセルの中から色の領域を見つけ、それぞれをパスとして輪郭化します。

元のPNGを<image>要素で包んだだけのSVGは、ベクター化されていません。SVGとして開けますが、中の絵はピクセルのままなので、拡大するとぼやけます。SVGはベクターファイル？パスとピクセルの違いもご覧ください。

png2svg.artが画像をベクター化する仕組み

設定した数までの少数の平坦な色を、図形の柔らかい縁ではなく、塗りつぶされた内側から選びます。
すべてのピクセルを、そのいずれかの色に割り当てます。PNGやWebPでは、不透明度が半分未満のピクセルはどの色にも属さず、透明のまま残ります。
色をまとめてトレースするので、2つの色が接する場所では、直線とベジェ曲線でできた1本の境界線を共有します。
結果をオブジェクトごと（最初に背景、次に独立した各オブジェクト）にグループ化し、図形をそれぞれその色で塗りつぶした独立した<path>として書き出します。図形はどれがどれを囲むかに従って入れ子になります（顔の中の目など）。「O」の内側のような穴は開いたままです。
お届けする前に、すべての結果がベクターパスだけでできていて、ビットマップやスクリプトが埋め込まれていないことを確認します。

トレースはAIではありません。細部を作り出したり、絵を新しいスタイルで描き直したりはせず、すでにある色を輪郭化するだけです。

うまくいく画像、いかない画像

きれいにベクター化できる画像：

ロゴ、アイコン、線画
ステッカー、クリップアート、フラットなイラスト
少数のベタ塗りの色でできた、フラットなスタイルのAIアート（AI画像をSVGに変換：ChatGPT、Midjourney、Gemini）

向かない画像：

写真、グラデーション、柔らかい影。 1回のトレースは最大24色なので、ポスターのような平坦な色の帯になります。写真をトレースするとポスターのようになる理由もご覧ください。
小さな文字。 高さがおよそ10px未満の文字はきれいにトレースできません。ベクター編集ソフトでフォントを使って入力し直し、トレース結果の上に配置してください。
小さい画像やぼやけた画像。 トレースしても解像度は上がらないので、輪郭は思い描いていたデザインより丸く、柔らかくなります。

4ステップで画像をベクター化する

このページのボックスか変換ツールに、最大25MBのPNG、JPG、WebP、HEICをアップロードします。
プリセットを選び、「色数（上限）」のスライダーを目に見える色の数に合わせます。
登録不要・無料の透かし入りプレビューを確認し、形がずれていればトレースし直します。
透かしなしのSVGのロックを解除し（1クレジット、アカウントなら無料3クレジット）、ダウンロードします。

各設定の説明と、InkscapeやIllustratorで同じ作業をする方法は、PNGをSVGに変換する方法で紹介しています。

よくある質問

「画像をベクターに」と「PNGをSVGに」は同じですか？

ほぼ同じです。SVGはWebやカット用ソフトで使われるベクター形式で、png2svg.artのトレースツールが出力する唯一の形式です。そのため、ここで画像をベクター化すると、必ずSVGになります。

写真をベクター化できますか？

できますが、写真のようにリアルなベクターではなく、最大24色の平坦な色の領域になります。ポスター風やステンシル風に仕上げたいなら、むしろ好都合かもしれません。

「ラスターをベクターに」とはどういう意味ですか？

ピクセルの格子をパスに変えることです。ラスター画像の色の領域をトレースしてそれぞれを輪郭化するので、結果はぼやけずに拡大できます。

無料ですか？

透かし入りプレビューは登録不要・無料です（ゲストは1日5回まで）。透かしなしのSVGは1クレジットです（アカウントなら無料3クレジット）。

ベクター化した後に編集できますか？

はい。各オブジェクトが図形をパスとして持つレイヤーになっていて、SVGエディター（アカウントが必要）でどの図形も色を変えたり、移動したり、ポイント単位で形を変えたり、非表示にしたりできます。エディターでは図形の合体、型抜き、交差もできます。輪郭のオフセットには、Inkscapeなどのデスクトップのベクター編集ソフトを使ってください。