PNG を SVG に変換

PNG は可逆形式なので、トレースの前に何かがにじんでいることはありません。ファイルにあるエッジは、デザインツールが描いたエッジそのもので、意図された程度のアンチエイリアスがかかっているだけです。

塗り分けられた領域の境界を見つけて輪郭を描く、というのがトレースの仕組みです。デザインツールから書き出された素直な図形は、この処理が一番きれいに働く入力になります。

ここに来る PNG のほとんどは、何かから書き出されたものです。Figma のファイル、Sketch のドキュメント、Illustrator のアートボード、Canva のデザインは、それ自体が本物の SVG の元になり、たいていメニューから直接書き出せます。

その差は決定的です。トレースしたロゴは文字があった場所が単なる輪郭になり、ブランドの書体で打ち直すことは二度とできません。アカウントが閉じられた、担当していた代理店が連絡不能になった、PNG しか残っていない、という状況になって初めて、トレースは次善の策として意味を持ちます。

トレースは四つのチャンネルすべてを読むので、透明な背景を持つ切り抜きロゴが白い四角になって戻ってくることはありません。透明だった領域は不透明度ゼロのパスとして書き出され、見える絵柄がその上に重なります。

これはアルファチャンネルではなく、あくまで不透明度を持つ図形として表現されています。半透明のピクセル、たとえば影のやわらかい縁は、なめらかな階調ではなく少ない段階の不透明度に量子化されます。透明だった背景を表す図形もファイルの中に残るので、それを削除するのが最初の整理になることがよくあります。

スクリーンショットは世の中で最も多く存在する PNG であり、同時にトレースに最も向かない入力です。アンチエイリアスのかかった文字は、線の周りにわずかに違う灰色の集まりを作り、その一つひとつが小さな図形になってしまいます。段落一つが、微妙にずれた文字もどきの図形の集まりに化けます。

目的が文字を読み取ることなら、PNG から TXT への変換のほうが向いています。目的がインターフェースをくっきりした画像として残すことなら、PNG のままのほうが、どんなトレース結果よりずっと小さく済みます。

単色のマークや二色のロゴなら 4 色、フラットなイラストなら 8 色、実際に陰影があるなら 16 色、それでも足りない場合だけ 32 色を試します。8 色が既定値で、デザインツールから書き出されたフラットな絵にはまず適しています。

この設定は画質のスライダーのようには働きません。量子化のたびに新しい配色を選び直すため、色数を増やしても必ずしもファイルが小さくなるとは限りません。二つの設定を試して見比べるほうが、理屈で考えるよりずっと早く答えが出ます。

長辺が 1,600 ピクセルを超える画像は、トレースの前に縮小されます。これは処理コストの上限であって、品質の上限ではありません。トレースの計算量はエッジの数に応じて増えるためで、1,600 ピクセルでトレースしたロゴも 4,000 ピクセルでトレースした同じロゴも、どの表示サイズでも同じように見えます。

逆方向は注意が必要です。200 ピクセル程度のファビコンから書き出すと、曲線に沿うピクセル数が少なすぎて角が丸まってしまい、どの設定でも直せません。まだ書き出せるものがあるなら、1,600 ピクセル前後の幅で書き出し直すのが確実です。

戻ってくるのは塗りつぶされたパスの積み重ねで、グループもレイヤー名もテキスト要素もグラデーションもありません。文字は輪郭になった図形であって文字そのものではなく、円は円ではなく曲線を近似したセグメントの並びです。

カッターや彫刻機、大判印刷向けの用途にはこれで十分ですが、ブランドの原本として使うには向きません。マークをブランド資産として使い続けるなら、トレース結果は描き直すための参考図として扱い、実際には作り直すほうが早いことがほとんどです。

ファイルが写真であれば、トレースはどんな設定でも助けになりません。PNG から JPG、あるいは AVIF への変換のほうが実際の状況に合っています。スクリーンショットでファイルサイズを小さくしたいだけなら、PNG のままでもすでにかなり効率的です。

ファビコンが目的なら PNG から ICO への変換が、ブラウザーが求める形式をそのまま作ります。印刷用の決まったサイズのファイルが目的なら、PNG から PDF や PNG から TIFF のほうが、描き直しなしで印刷所に受け取ってもらえます。

デコード、リサイズ、トレースのすべてがブラウザーの中で行われます。アップロードは発生せず、アカウント登録も一日あたりの上限もありません。ここに持ち込まれるアートワークの多くは、誰かが権利を持つロゴであり、見知らぬサーバーに送りたくないものです。

ネットワークタブを開いたまま試せば、通信が発生していないことを確認できます。フラットな書き出し向けに設計されたこの範囲の作業であれば、トレースの結果は十分に実用的です。