PNGをSVGに変換する方法：ロゴ・アイコン・線画のトレース

PNGはラスター画像です。色と、場合によっては不透明度を持つピクセルが固定の格子状に並んでいます。500 × 500 pxのロゴには250,000個のマス目しかなく、ポスターサイズに拡大しても、マス目が大きくなるか、マス目の間がぼやけるだけです。SVGはベクター画像で、<path>、<circle>、<rect>などの図形を座標と塗りつぶし色で記述したテキストファイルです。ブラウザやカッティングマシンは必要なサイズでその図形を描き直すので、ベクターのロゴはスマートフォンの画面でも展示会のバナーでも鮮明なままです。

ベクターからラスターへの変換は簡単です。図形をピクセルに描画するだけなので、SVGをPNGに変換なら一瞬で終わります。逆方向には可逆的な近道がありません。ピクセルの格子には元の図形の情報が残っていないためです。ピクセルを見て、各図形がどこで始まりどこで終わるかを推測する必要があります。この推測の工程がトレース(ベクター化)で、IllustratorからコマンドラインのプログラムまでPNGをSVGに変換するツールは、本物であればどれも中身はトレーサーです。

難しい部分を省略する変換ツールもあります。元のPNGをbase64テキストとして埋め込んだ<image>要素を1つだけ含む、形式上は正しいSVGファイルを書き出します。この場合、ファイルサイズもPNGより約3分の1大きくなります。SVGとして開け、ファイル形式のチェックも通りますが、中身はベクターの包みに入ったピクセル画像のままです。拡大すれば同じギザギザが見え、カッティングマシンはたどるパスを見つけられません。SVGをテキストエディタで開いてdata:image/pngを検索し、その文字列があればベクター化されていません。

トレースに向くのは、もともと図形として描かれた画像です。デザインアプリから書き出したロゴ、フラットなアイコン、黒い輪郭線のイラスト、スキャンした署名、ステンシルなどは、はっきりした境界で区切られた少数の単色でできています。トレーサーは色ごとに領域をまとめ、境界をたどり、滑らかな曲線を当てはめるので、SVGはデザイナーが最初に描いた図形に近い仕上がりになります。ワードマークの太い文字もよくトレースできます。大きな文字も塗りつぶし図形の1つにすぎず、各文字は色やサイズを変えられるアウトラインになりますが、文字として打ち直すことはできません。

写真はその逆のケースです。人物写真や商品写真には微妙に異なる何千もの色調が混ざり合っていて、ベクター形式で効率よく表す方法がありません。トレーサーに16色を指定すると、色の帯が見えるポスタリゼーション風のイラストになります。64色にすると、PNGよりずっと大きなファイルに何万もの小さな図形ができ、それでも写真のようには見えません。なだらかなグラデーション、ドロップシャドウ、光彩も、同じように細い帯の重なりになります。小さな文字も苦手です。10–12 pxではアンチエイリアスで各文字が背景に溶け込み、トレーサーは「e」と「o」を区別できません。

どの設定よりも解像度が重要です。トレーサーは、縁に沿って階段状に並ぶピクセルに曲線を当てはめるため、階段が細かいほど曲線は正確になります。Figma、Canva、Photoshop、スライドなどから自分でPNGを書き出したなら、表示サイズの2〜3倍で書き出し直してください。幅1500–2000 pxのロゴなら、トレーサーに十分な情報を与えられます。小さなPNGをAI拡大ツールで先に拡大するのは、100 %表示できれいに見える場合だけにしましょう。作り出された縁のテクスチャも、本物の縁と同じように忠実にトレースされてしまうためです。

次に、背景を単純にします。PNGは完全な透明に対応しており、透明背景が最も扱いやすいケースです。完全に透明なピクセルはすべて空白として扱われるので、SVGの図柄の後ろに白い箱ができません。PNGに単色の背景がある場合は、先に図柄のすぐ近くでトリミングしてください。正確なフレーミングは画像を比率指定でトリミングする方法のガイドで解説しています。Tシャツに写ったロゴのように背景が複雑な場合は、トレース前に背景を取り除くか、単色で塗りつぶします。

最後に、トレーサーに任せる前に色数を減らしておきます。元ファイルで影、光彩、グラデーションのオーバーレイを非表示にし、ベクター版でグラデーションが不要なら、塗りを中間色に置き換えます。輪郭線の色を含めて残った単色を数え、その数をメモしてください。次の手順で入力する数値として最も役立ちます。同じロゴのJPEGとPNGで迷うならPNGを選んでください。JPG・JPEG・PNGの違いで説明しているとおり、JPEG圧縮はすべての縁の周りにノイズを加えるからです。

ラベルは違っても、どのトレーサーも同じ3つの質問をします。1つ目は、いくつの色を残すかです。PNGをSVGに変換では、カラーモードでカラー、グレースケール、白黒から選び、色数でピクセルを何グループに分けるかを2〜64で設定します。メモした数に合わせてください。大きくしすぎると、アンチエイリアスされた縁のピクセルが独自の細い色として分けられ、各図形の周りにうっすらハロー(縁取り)が出ます。小さくしすぎると、2つのブランドカラーが1色にまとまってしまいます。

2つ目の質問は、縁をどう扱うかです。スムージングはピクセルによる階段状のギザギザを丸め、精細さはどこまで小さな点を図形として残すかを決めます。PNGのページでは精細さ70、スムージング40から始まり、きれいに書き出したデータの小さな角も保てます。ほこりや余計な点が出るなら精細さを下げ、曲線がふらつくならスムージングを上げます。直線で作られた幾何学的なロゴは曲線を直線に、ドット絵のようにブロックのまま残したい場合はピクセルの縁に設定します。

3つ目の質問は白黒トレースだけに当てはまり、インクと紙の境目をどこに引くかです。しきい値は1〜254で、初期値は128です。しきい値より暗いピクセルは黒に、明るいピクセルは空白になります。細い青のボールペンで書いた署名は、薄い線が残るように160–180に上げます。少し灰色がかった紙に太いマーカーで描いた絵は、紙のざらつきが点にならないよう100付近まで下げます。設定同士が影響し合うので、1つずつ変更して比べてください。

サムネイルだけで判断しないでください。SVGをブラウザで開き、文字の丸みや先端など、最も細かい曲線を400–800 %に拡大します。良いトレースは、滑らかな弧と、デザイン上角になる部分の鋭い角が見えます。出来の悪いものは、ふらつき、へこみ、丸まった先端が見えます。次に、Inkscape、Illustrator、Figmaなどのベクターエディターでファイルを開き、アウトライン表示またはノード表示にします。単純な2色のロゴなら通常は数百ノードで足ります。数千ノードあるなら、トレーサーがノイズまでたどっており、編集やカットが大変なパスになります。

ファイルサイズは手早い確認になります。フラットなロゴを最適化したSVGは通常、数KBから数十KBで、元のPNGより小さいことも多いです。元のPNGの数倍になる場合は、色数が多すぎる、精細さが高すぎる、あるいはトレースすべきでない写真だったことが多いです。SVGを最適化はオンのままにしてください。見た目を変えずに座標を丸め、パスを統合します。最後に図柄をポスターサイズとファビコンサイズまで拡大縮小して、どちらでもきちんと見えるか確認しましょう。

無料のデスクトップ版ならInkscapeがあります。PNGを読み込んで選択し、パス > ビットマップのトレース(Shift+Alt+B)を開きます。輝度のカットオフなどの単一スキャンモードは黒のパスを1つ作るので線画向きです。複数スキャンモードは、指定した数の色やグレーを重なったレイヤーとしてトレースします。Inkscapeの白黒トレースは、Peter Selingerが2001年に公開したトレースライブラリPotraceをもとにしています。Potrace自体はコマンドラインのプログラムで、PNGではなくPBM、PGM、PPM、BMPを読み込み、2階調の画像だけを扱い、SVG、PDF、EPS、DXFを出力するため、大量のスキャンをスクリプトで処理するのに向いています。

Adobe Illustratorでは、Illustrator CS6で旧来のライブトレースに代わってイメージトレースが導入されました。PNGを配置し、ウィンドウ > イメージトレースを開いて、白黒ロゴ、3色、16色などのプリセットから始め、詳細設定でパス、コーナー、ノイズを調整します。拡張をクリックするまでトレースはライブのままで、拡張すると通常の編集可能なパスになります。どちらのプログラムもない場合は、ブラウザ上の変換ツールでも、色の削減、輪郭の検出、曲線の当てはめという同じ処理が行われます。画像をSVGに変換はJPG、WebP、HEICにも対応し、SVGの代わりにEPS、PDF、DXFも出力できます。

Web では、SVG は 2001 年から W3C 勧告となっており、現行のすべてのブラウザーが <img> タグ、CSS の背景、HTML へのインライン埋め込みのいずれでも表示できます。インラインなら、ホバー時に色を変えることもできます。トレースしたロゴは、Retina 画面向けに用意していた複数サイズの PNG を、1 つの小さなファイルに置き換えられることが多いです。カッティングマシンでは、Cricut Design Space や Silhouette Studio が SVG を想定しています。トレースした各図形はカットパスになり、複数色でトレースした場合は色ごとのレイヤーに分かれるため、色の違うビニールシートでそれぞれカットできます。レーザーカッターや CNC ソフトでは DXF が好まれることが多く、同じトレース設定から PNG から DXF で作成できます。

印刷会社がベクターデータを求めるのは、印刷機、刺繍のデジタイザー、サインカッターに必要なのがピクセルではなく輪郭線だからです。ステッカー、Tシャツ、バナーなら、トレースした SVG で足りることも多くあります。ただし、あくまで近似です。曲線は推定で当てはめたもので、色はピクセルから平均した値、文字はアウトライン化されます。そのため、会社のロゴをトレースする前に、制作者へ確認してください。デザイナーや代理店なら、正確な曲線、色名、フォントを含む元の AI、EPS、PDF、SVG をほぼ必ず持っており、送るのに 1 分もかかりません。トレースが適しているのは、元データを紛失した場合、スキャンしたレターヘッドにしかロゴが残っていない場合、自分で描いた絵の場合です。