画像SVG変換：PNGやJPGをベクター化

写真やWeb上のほとんどの画像はラスター画像、つまり色の付いた画素の格子です。拡大すると画素も大きくなり、輪郭がギザギザやぼやけになります。SVGのようなベクター画像は、代わりに数学的なパスと塗りで形を表すので、ファビコンから看板まで、どんなサイズでも完璧にくっきりしたままです。

ラスター画像をベクターに変換することをトレースといいます。ソフトが似た色の範囲を見つけ、その輪郭をたどって、なめらかな曲線に置き換えます。平らな色とはっきりした輪郭でできた画像で最もうまくいきます。

どちらをいつ使う？

ラスターとベクターを一言で比べると、ラスターは無数の繊細な細部がある写真に、ベクターははっきりした形のあるロゴ、アイコン、文字、イラストに最適です。トレースした写真はアートのように見えることはあっても、元の画素ほど忠実にはなりません。

画像をボックスにドラッグする、参照する、またはクリップボードから貼り付けて追加します。プリセットを選び、必要なら色数を調整して「SVGに変換」を押します。トレーサーが画像を選んだ色数に減らし、各色の範囲の輪郭を見つけてSVGのパスとして書き出します。その後、スライダーで元の画像とベクターを並べて比べられます。

比較の下には、パスの数、SVGのファイルサイズ、トレースにかかった時間が表示されます。ファイルをダウンロードするか、コードをコピーしてHTMLやデザインツールにそのまま貼り付けてください。

ロゴ

ロゴはPNGファイルしかないことが多いので、PNGからSVGへの変換がいちばんよくある作業です。「ロゴ」プリセットで、ロゴに実際に使われている色数（たいてい2〜8色）を選びましょう。ロゴが無地の背景の上にあり、透過したベクターにしたいなら「背景色を削除」にチェックを入れてください。

スケッチと線画

スケッチ、署名、スタンプ、スキャンした絵など、線画をベクターに変換するなら「白黒」を選びます。細い線が途切れず、紙の質感が消えるまでしきい値を動かしましょう。カッティングマシンや彫刻に最適な、すっきりした2色のSVGになります。

詳細となめらか

「詳細」は小さな形や細かな曲線を残すので、イラストや複雑なエンブレムに向いていますが、ファイルは大きくなります。「なめらか」はトレース前にノイズを和らげて流れるような形にするので、手描きのイラストや粒状感のあるスキャンに向いています。

ポスター調とグレースケール

「ポスター調」は画像を少数の大胆な色の範囲に減らし、シルクスクリーンのようなグラフィックな見た目にします。「グレースケール」は先に色を取り除くので、単色印刷や、写真をアートなモノクロのベクターにトレースするのに便利です。

手持ちの画像のうち、いちばん大きくくっきりしたものから始めましょう。圧縮のノイズやぼやけは、トレースで余分な図形になります。元画像が小さかったりぼやけていたりするなら、先にAI高画質化ツールで拡大・鮮明化すると、きれいな入力からずっと良いベクターができます。

見た目が保てる範囲で、色数はできるだけ少なくしましょう。色が1つ増えるごとにパスとファイルサイズが増えます。2色のロゴなら2〜3色、平面的なイラストならたいてい8〜16色で十分です。「ディテール」の設定は作業サイズを決めます。1000ピクセルがバランスがよく、2000ピクセルは速度と引き換えにより細部を捉えます。

圧縮された写真

JPGからSVGへの変換も同じですが、JPEGの圧縮は輪郭の周りにノイズを加えます。「なめらか」プリセットか、少し少なめの色数にすればノイズが隠れ、すっきりした形になります。

SVGファイルは、Illustrator、Inkscape、Figma、Affinity Designer、Canva、ほとんどのカッティングマシン用ソフトで開けます。Webサイトでは、imgタグでファイルを使うか、コードをHTMLに直接貼り付ければCSSでスタイルを変えられます。ファビコンやアプリのアイコンなら、ファビコン作成ツールがSVGの入力を受け付け、必要なサイズをすべて作ります。

SNSのプロフィール用などでまたピクセル版が必要なら、SVGからPNGへの変換ツールで、透過あり・なしを選んで好きなサイズで書き出せます。

カッティングマシン

Cricutなどのカッティングマシン用のSVGなら、「白黒」か少ない色数の「ロゴ」を使い、背景を削除してください。細かい図形がたくさんあるより、大きな図形が少ないほうがきれいにカットできるので、トレースに細かな点が多ければディテールのサイズを下げましょう。

トレースはすべてブラウザ内で行われるので、未公開のロゴやクライアントの作品が端末の外に出ることはありません。大きく細かな写真は数秒かかり、ファイルも大きくなることがあります。SVGが1 MBを超えると警告が出ます。

自動トレースは、手作業のベクター制作と同じではありません。完璧な形が必要なブランドロゴなら、トレース結果を出発点にしてベクター編集ソフトで仕上げてください。このツールは無料・回数無制限で、透かしも入らず、EnhancerPro のクレジットも使いません。

SVGに図形がこんなに多いのはなぜ？

ノイズ、グラデーション、陰影は、少しずつ色の違う小さな範囲をたくさん作ります。色数を減らすか、「なめらか」か「ポスター調」のプリセットを選ぶか、ディテールのサイズを下げてください。背景を削除してもパスの数がはっきり減ります。

文字もトレースできますか？

はい。ロゴの文字は図形としてトレースされますが、編集できる文字ではなくなります。フォントがわかるなら、ベクター編集ソフトで文字を打ち直すのがいちばんきれいです。

色は正確に一致しますか？

トレーサーは画像から代表的な色を選ぶので、ブランドのカラーコードとごくわずかに違うことがあります。精度が大事なら、カラーピッカーで元の画像から正確なコードを読み取り、ベクター編集ソフトで塗りを調整してください。

古いWebサイトのロゴ

小さな会社の多くは、古いWebサイトからダウンロードした小さな画像でしかロゴを持っていません。とても小さければ先に高画質化し、「ロゴ」プリセットと実際の色数でトレースしましょう。できたSVGは看板、Tシャツ、車にどんなサイズでも印刷でき、元の画素では不可能だったことができます。

手描きのスケッチ

白い紙に濃いペンで描き、昼間の光で撮影してぴったりトリミングします。しきい値を丁寧に設定した「白黒」モードなら、絵がすっきりした図形になり、ベクター編集ソフトで色を塗ったり、ステッカーにしたり、カッティングプロッターでカットしたりできます。

アプリやWebサイトのアイコン

シンプルなアイコンはとてもうまくトレースできます。色数を少なくし、背景を削除して、コードをページに直接貼り付けましょう。SVGはぼやけずに拡大縮小できるので、同じファイルがどの画面密度でもくっきり見えます。

署名とスタンプ

スキャンした署名やゴム印は、「白黒」モードで小さく透過したSVGになります。書類にどんなサイズでも配置でき、撮影した元画像のような灰色のぼやけた縁なしで印刷できます。

写真からポスターを

アートな効果を出すなら、「ポスター調」プリセットで4〜6色にして写真をトレースしましょう。ポスターやSNS用の画像に合う、大胆でフラットな色のイラストになり、大きな印刷にもきれいに拡大できます。被写体がわかりつつ形がシンプルなままになるまで、色数を変えて試してください。数階調のグレースケールなら、紙や布に単色インクできれいに刷れる、定番のステンシル風になります。

トレースしたファイルに満足したら、元のラスター画像も横に保管しておきましょう。後でクライアントから少し違うトリミングや色を頼まれても、何百もの小さなパスの点を手で直す代わりに、数秒でトレースし直せます。logo-source.png と logo-traced.svg のように両方に分かりやすい名前を付ければ、小さなデザインフォルダも管理しやすくなります。