PNG を SVG に変換

この変換は単に PNG を SVG のコンテナに包むわけではありません。画像を解析し、似た色の領域を見つけ、その輪郭を数学的なパスとして記述します。鮮明な 2 色のアイコンなら 10 数個のきれいな形にトレースされるかもしれませんが、グラデーションの多いイラストは数百個になることもあります。各色帯がそれぞれ独自のパスになるためです。

だからこそ、元画像はほとんどの変換よりもここで重要になります。512×512 で書き出された、3〜4 色の平坦な色で構成されたロゴなら、たいてい 10 KB を下回るきれいな SVG にトレースされ、どんなサイズに拡大しても縁がぼやけることはありません。同じ処理を 300 KB の写真に適用すると、数百 KB のパスデータに達しうる SVG になり、それでも元画像のピクセル化・ブロック化された近似のように見えます。

ベクタートレースは、ロゴ・アイコン・線画の世界のために作られています。そこでの画像は実質的に、境界のはっきりした少数の平坦な色であり、まさにパスベースの形式が効率よく記述できるものです。写真はその逆で、トレースできる硬い縁のない、何百万色もの連続したグラデーションです。そのためアルゴリズムは限られた形のパレットで近似せざるを得ず、これがベクター化後の写真に見られる、ピクセル化されアニメ調になる見た目を生みます。

元の PNG がすでにアンチエイリアスで柔らかくされた縁を持つ場合——スクリーンショットやレンダリングされたグラフィックによくあります——その縁はよりきれいだが正確さの劣る輪郭に簡略化されます。ロゴであればたいていこれは良く見えるか、むしろより鮮明になりますが、詳細なイラストでは細かい部分の形が目に見えて変わることがあります。

SVG に向いている種類のグラフィックでは、容量の削減は本物で大きなものです。15 KB の平坦な色の PNG アイコンは、2〜3 KB の SVG までトレースできることがあります。わずかなパス命令がピクセル格子全体を置き換えるためです。これは、あらゆるページで読み込まれる Web サイトのアイコンセットにとって意味があり、数十個の小さな画像でそれぞれ数 KB ずつ節約すれば積み重なります。

写真的な内容に対しては、ベクター化はファイル容量の面で間違った手段です。形で近似しようとする SVG よりも、PNG や JPG の方が常に小さく正確です。

トレースはすべてあなたのブラウザ内で実行されるため、ロゴやデザイン素材は、結果が使うに足るかどうかをあなたが判断するまで端末を離れません。出来上がるのが本物の SVG であるため、PNG では決して得られないものも手に入ります。各トレースされた形が独立した選択可能なパスとなり、ピクセル単位ではなく色ごとに調整できる編集可能なファイルです。