比較6 分読み
SVG と PNG の違いと選び方
2026年6月公開 · Svggramチーム
SVG と PNG のどちらを選ぶかは、ニーズによって異なります。どちらも明確な強みがあります。このガイドでは、SVG と PNG の比較を詳しく解説します。
SVG とは？
SVG (Scalable Vector Graphics) は XML ベースのベクター形式で、無限に拡大縮小できます。 無料 SVG エディターを使えば、SVG ファイルを作成・編集できます。
PNG とは？
PNG (Portable Network Graphics) はラスター形式で、画像を画素として保存します。透明度をサポートし、可逆圧縮を提供します。
主な違い
| 機能 | SVG | PNG |
|---|---|---|
| スケーラビリティ | 無限 — 品質劣化なし | 拡大すると品質が劣化 |
| ファイルサイズ | シンプルなグラフィックは小さい | 大きく、サイズに依存 |
| 透明度 | 対応 | 対応 |
| アニメーション | CSS/JS アニメーションに対応 | 非対応 |
| 編集性 | 完全に編集可能 | 編集は限定的 |
| 最適な用途 | アイコン、ロゴ、イラスト | 写真、スクリーンショット |
SVG を使う場面
- アイコンとロゴ — SVG は完璧にスケールします
- イラスト — Retina ディスプレイでもベクターは鮮明
- アニメーション — SVG 要素はアニメーション可能
PNG を使う場面
- 写真 — PNG は品質を保ちます
- スクリーンショット — ラスターは画面内容を正確にキャプチャ
よくある質問
Web サイトにはどちらが適していますか？
アイコンとロゴには SVG、写真には PNG。
PNG は透明度をサポートしていますか？
はい、サポートしています。
ソフトウェアなしで SVG を編集できますか？
はい。Svggram の無料オンライン SVG エディターをお使いください。