FORMAT COMPARISON
PNG vs SVG
PNGとSVGはどちらもWebの図版や透過素材に使えますが、PNGはピクセルで表現するラスター画像、SVGは図形を記述するベクター画像です。ロゴ・アイコンを拡大するか、スクリーンショットや描画済みの画像をそのまま配信するかで選びます。
PNGとSVG、どちらを選ぶ？
スクリーンショット、ピクセル単位で完成した図版、透過を含むラスター素材はPNGを、ロゴ・アイコン・図形を解像度に依存せず配信するならSVGを選びます。外部から受け取ったSVGは、スクリプトなどを含む可能性を確認して扱います。
PNG向き
透過画像・スクリーンショット
- ロゴ
- 図版
- 透過が必要な画像
SVG向き
ロゴ・図形・アイコン
- 拡大縮小が必要な図版
- UIアイコン
基本情報を比較
PNGとSVGの主な違いを確認できます。
| 項目 | PNG | SVG |
|---|---|---|
| 拡張子 | .png | .svg |
| MIME Type | image/png | image/svg+xml |
| 主な用途 | 透過画像・スクリーンショット | ロゴ・図形・アイコン |
| 圧縮 | 可逆圧縮 | 該当なし |
| ベクター | 非対応 | 対応 |
| 開く方法 | 標準ビューア、ブラウザ、画像編集ソフトで開けます。 | ブラウザ、ベクター編集ソフト、対応ビューアで開けます。 |
| 書き出し・変換 | PNGをJPEGへ変換すると透過を保持できず、背景色や合成結果を決める必要があります。JPEGとして書き出す場合は非可逆圧縮になります。WebPへ変換する場合も、透過を保つ必要と可逆・非可逆の設定を先に決めます。 | PNGなどのラスター画像へ書き出せます。 |
用途別の選び方
作りたいものや使う場面から選べます。
ロゴ
透過画像・スクリーンショット
PNG向き図版
透過画像・スクリーンショット
PNG向き拡大縮小が必要な図版
ロゴ・図形・アイコン
SVG向きUIアイコン
ロゴ・図形・アイコン
SVG向き確認ポイント 1
PNGはラスター画像で、ピクセルごとに完成した図版や透過素材に向く
使い分け確認ポイント 2
SVGはW3C標準のベクター画像で、ロゴやアイコンを拡大して表示しやすい
使い分け選ぶ理由を詳しく
- PNGとSVGの変換では、写真・複雑な効果・図形の編集可能性を同じように保てない場合がある