PNG はピクセルの集まりなので、拡大するとぼやけます。SVG は数式のパスでできているので、どんなサイズでも鮮明なままです。PNG を SVG に変換すること——ベクター化またはトレース——は、ロゴやアイコンには最高の手法ですが、写真には向きません。その見分け方を紹介します。
ラスター vs ベクター(一言で)
- ラスター(PNG・JPG・WebP):色付きピクセルの格子。写真に最適だが、拡大すると粗くなる。
- ベクター(SVG):数式で表された図形。無限に拡大でき、ファイルも通常とても小さく、ロゴや印刷に最適。
「トレース」が実際にしていること
変換ツールは画像の中の形を魔法のように知ることはできません。近似しているのです。近い色の領域をまとめ、ベクターパスとして描き直します。つまり結果は元画像のきれいな「解釈」であり、ピクセル単位の複製ではありません。色数が少なくエッジが鮮明なほどよくトレースでき、なめらかなグラデーションや細部が多いほど苦手です。
PNG → SVG がうまくいく場面
- 平面的な色とはっきりした輪郭のロゴ・アイコン
- 線画やシンプルなイラスト
- どの画面でも印刷でも鮮明にしたい白黒のマーク
これらは PNG を SVG に変換 で、小さく拡大自在なファイルになり、サイトにも大きなバナーにもぼやけずに使えます。
ラスターのまま残すべきとき
- 写真——写真をトレースすると、大量の乱雑なパスになり、ファイルはかえって大きく、仕上がりも悪くなります。
- 複雑なグラデーションや質感——同じ問題です。
写真はラスター形式のままにし、サイズは画像圧縮で調整しましょう。
変換方法(プライバシーも安心)
以下のツールはすべてブラウザ内でトレースし、画像はアップロードされません。
- PNG を SVG に変換——PNG のロゴやアイコンをベクター化。
- JPG を SVG に変換——JPG から始めても同じ。
詳細度を選び、プレビューを確認してダウンロード。トレース結果がきれいなら、二度とぼやけないロゴが手に入ります。ノイズが多ければ、その画像は PNG のままがふさわしい、ということです。