PNGとSVGの違い：どちらを使うべき？

1. 核心的な違い：画素の格子と数学的なパス

PNGはラスターです。画像を1ピクセルずつに区切って、その色を記録します。PNGを拡大するとその画素がそのまま引き伸ばされるので、ジャギーとぼけが出ます。SVGはベクター画像で、座標やベジェ曲線といった数学的な指示で図形を描き、ブラウザが新しいサイズで描き直すため、どの倍率でも鮮明です。この1点が、両形式で生じるほぼすべての違いの根源にあります。

透明性については、PNGはアルファチャンネルに対応し、透明な背景を保存できます。SVGはもともと透明な形式です。背景の長方形を描かない限り、図形の外側はすべて透明のまま残ります。なお、JPGには透明性がまったくありません。白い背景は画像に塗り込まれた実在する色です。

2. ファイルサイズと読み込みの速さ

アイコンやロゴのようなシンプルな図形なら、SVGは数KBにとどまることが多く、1つのファイルでどの画面密度にも対応できます。一方PNGはRetinaディスプレイでも鮮明に保つために@2x版と@3x版が必要になり、ファイル数もサイズも倍増します。写真では逆です。豊かな色の変化をベクター化するとパスの数が膨大になるため、SVGはJPGやWEBPより遥かに大きくなり、割に合いません。

その理由は圧縮方法の違いにあります。PNGは画素を可逆圧縮で記録するので、複雑な画像ほどファイルが大きくなります。SVGはプレーンテキストで、同じパスコマンドと座標が繰り返されるため、圧縮が非常にうまく働きます。このため、どちらも可逆圧縮という同じ枠組みのはずなのに、ファイルサイズが大きく違うのです。

用途	おすすめ形式	理由
Webサイトのアイコン / ロゴ	SVG	1ファイルで全解像度に対応し、CSSで色も変えられる
写真	JPG / WEBP	小さく、写真の質感を保てる
スクリーンショット	PNG	画素単位で正確で、可逆圧縮される
データグラフ	SVG	拡大しても鮮明で、操作も加えやすい
SNSのアイコン	PNG / JPG	多くのプラットフォームはラスターしか受け付けない

3. PNGを使う場面

• 写真、複雑なライティング、繊細なグラデーション；
• 画素単位で正確である必要があるスクリーンショットやUIキャプチャ；
• 一部のダッシュボードのアバターアップロードのように、ラスターしか受け付けないプラットフォーム；
• SVGに対応していない非常に古い環境向けの互換性の代替として。

4. SVGを使う場面

• Webサイトのアイコンとロゴ：1ファイルで全解像度に対応し、Retinaディスプレイでも鮮明；
• CSSやJavaScriptで配色を変えたり、線を描くアニメーションを動かしたい図形；
• データグラフ：EChartsなどの可視化ライブラリは標準でSVGを出力します；
• 印刷、レーザー彫刻、ビニルカットのように、機器がベクターのパスを読み取る用途。

5. PNGとSVGは相互変換できますか？

はい。PNG→SVGはPolySVG PNG→SVGツールまたは画像→SVGツールでファイルをアップロードして生成をクリックするだけでベクター化できます。アイコンやロゴならとても良い結果になり、写真ならイラスト調になります。変換は無料で、透明PNGは透明背景のまま保たれます。変換後のSVGはエディタで配色変更や背景除去ができるので、作業の流れが完結します。SVG→PNGはオンラインSVGエディタでファイルを開き、必要な解像度でPNGを書き出します。ドキュメントやプレビュー画像に最適です。

ひとつ覚えておきたいのは、PNG→SVGは単なる「名前を付けて保存」ではない、ということです。画素の輪郭をパスとして描き直すベクター化です。グラフィック素材はきれいなパスになり、写真の場合は色面にまとめられてしまいます。ダウンロード前にツールで結果を確認し、想定と合っているかチェックしてください。

ひとことまとめ：アイコン・ロゴ・グラフはSVG、写真・スクリーンショットはPNG/JPG/WEBP。迷ったらグラフィックものはSVGを選んでください。より詳しく知りたい場合はSVGとはと画像をSVGに変換する3つの方法をご覧ください。