PNG はピクセルの集まりなので、拡大するとぼやけます。SVG は数式のパスでできているので、どんなサイズでも鮮明なままです。PNG を SVG に変換すること——ベクター化またはトレース——は、ロゴやアイコンには最高の手法ですが、写真には向きません。その見分け方を紹介します。
これは自分たちで計測しました。 トレースが得になるのは、元の絵がべた塗りの図形でできているときだけです。透明ロゴは 28.8 KB から 1.7 KB になり、94% の削減で、しかも無段階に拡大できるようになりました。写真はまったく逆で、1.88 MB の PNG が 7.74 MB の SVG パスになり、元の 4 倍でした。 計測データ全体を見る
ラスター vs ベクター(一言で)
- ラスター(PNG・JPG・WebP):色付きピクセルの格子。写真に最適だが、拡大すると粗くなる。
- ベクター(SVG):数式で表された図形。無限に拡大でき、ファイルも通常とても小さく、ロゴや印刷に最適。
「トレース」が実際にしていること
変換ツールは画像の中の形を魔法のように知ることはできません。近似しているのです。近い色の領域をまとめ、ベクターパスとして描き直します。つまり結果は元画像のきれいな「解釈」であり、ピクセル単位の複製ではありません。色数が少なくエッジが鮮明なほどよくトレースでき、なめらかなグラデーションや細部が多いほど苦手です。
PNG → SVG がうまくいく場面
- 平面的な色とはっきりした輪郭のロゴ・アイコン
- 線画やシンプルなイラスト
- どの画面でも印刷でも鮮明にしたい白黒のマーク
これらは PNG を SVG に変換 で、小さく拡大自在なファイルになり、サイトにも大きなバナーにもぼやけずに使えます。
トレースを支持する実測の根拠は狭いが決定的です。透明ロゴは 28.8 KB → 1.7 KB(-94%)になり、しかも無限に拡大できます。私たちのデータ全体で単発として最大の勝ちです。「色数が少なく輪郭が鋭い」が買ってくれるのはこれです。
ラスターのまま残すべきとき
- 写真——写真をトレースすると、大量の乱雑なパスになり、ファイルはかえって大きく、仕上がりも悪くなります。
- 複雑なグラデーションや質感——同じ問題です。
写真はラスター形式のままにし、サイズは画像圧縮で調整しましょう。
反対の根拠も同じくらい明確です。同じツールでフラットイラストは 34.7 KB → 117.0 KB(+238%)、UI スクリーンショットは 18.0 KB → 27.3 KB(+52%)、写真は 1.88 MB → 7.74 MB(+312%)。JPG の写真をトレースするとさらに悪く 330.2 KB → 7.49 MB(+2224%)。色の領域ごとにパスが生まれ、写真にはそれが何万個もあります。
変換方法(プライバシーも安心)
以下のツールはすべてブラウザ内でトレースし、画像はアップロードされません。
- PNG を SVG に変換——PNG のロゴやアイコンをベクター化。
- JPG を SVG に変換——JPG から始めても同じ。
詳細度を選び、プレビューを確認してダウンロード。トレース結果がきれいなら、二度とぼやけないロゴが手に入ります。ノイズが多ければ、その画像は PNG のままがふさわしい、ということです。
かんたん判断表
| あなたの画像 | SVG にトレースすべき? | 理由 |
|---|---|---|
| 平面的な 2〜4 色のロゴ | 向く | エッジがきれいでファイルも極小 |
| アイコン・線画 | 向く | どのサイズでもパスが鮮明 |
| 文字入りのスクショ | たいてい不向き | アンチエイリアスの縁が乱雑なパスに |
| 写真 | 不向き | 数千のパス、ファイル増大、仕上がりも悪化 |
| グラデ・質感のある絵 | 不向き | なめらかな階調は単色の形に還元できない |
具体的な例
白黒のクラブロゴを 512 px の PNG で保存したとします。ポスター用に拡大すると、縁が階段状のピクセルに崩れます。これを SVG にトレースすれば、同じマークがどんなサイズでも鮮明に印刷でき、しかも多くの場合10 KB 未満です。同じことを家族写真でやると正反対になります。トレーサーは追うべき単一の形を持たないため、絵を数千の色の塊に切り刻みます。ファイルは膨れ上がり、肌も空も「数字で塗り絵」のポスターのようになります。同じツールでも結果は真逆——一方は形で、もう一方は連続した階調でできているからです。
2 つのまったく異なる入力に対して、トレースが実際に出した結果です:
| テスト画像 | 入力 | 出力 | 変化 |
|---|---|---|---|
| 透過付きロゴ | 28.8 KB | 1.7 KB | -94% |
| スクリーンショット | 18.0 KB | 27.3 KB | +52% |
平面的なロゴは 1.7 KB(-94%)にトレースされました。本当に得です。わずかな図形で完全に記述できるからです。スクリーンショットは 18.0 KB → 27.3 KB(+52%):トレーサーは色が近い領域ごとにパスを出さねばならず、文字だらけのスクリーンショットにはそれが何千もあります。この差が判断の規則です。トレースでファイルが大きくなるなら、その画像はもともとベクターの材料ではありませんでした。
よくある誤解
- 「SVG は必ず小さい」 単純な図だけの話です。トレースした写真はたいてい元の PNG より大きくなります。
- 「トレースは失われた細部を復元できる」 できません。すでにある情報を解釈し直すだけで、解像度が増えることはありません。
- 「どんな PNG でもきれいなロゴになる」 元がぼやけていたりノイズが多ければ、トレースはその乱れをそのまま引き継ぎます。
よくある質問
あとから SVG を編集できますか?
できます。SVG はパスでできているので、ベクターエディタで開いて特定の部分だけ色や形を変えられます——平面の PNG ではできないことです。
トレース結果が「ポスタリゼーション」風になるのはなぜ?
トレーサーが画像をわずかな単色に還元したためです。色や詳細度を上げるか、写真なのだと割り切ってラスターのまま残しましょう。
逆方向はどうすれば?
ベクターからピクセルに戻すのは簡単で、選んだサイズでも鮮明なままです——SVG を PNG に変換を参照。