SVG vs PNG：正しいフォーマットを選ぶための完全ガイド

画像フォーマットの選択が本当に重要な理由

SVGかPNGか？間違えると、ヒーローセクションがRetinaディスプレイでぼやける2MBのラスターファイルをロードします。あるいは、14MBのXMLに膨れ上がるベクターパスに写真を変換するのに何時間も費やすことになります。

SVGとPNGは競合ではありません — 根本的に異なる用途のための補完的なツールです。この違いを理解することが、サイトのパフォーマンス、アクセシビリティ、ビジュアル品質のために最も効果的なことです。

SVGの仕組み

SVG（Scalable Vector Graphics）はXMLベースのマークアップ言語です。各ピクセルの色値を保存する代わりに、命令を保存します：「(50, 50)に半径40の円を描き、青で塗りつぶせ。」ブラウザはレンダリング時にこれらの命令を実行するため、出力は設計上解像度に依存しません。

<!-- シンプルなSVGアイコン — 247バイト -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#4F46E5" />
  <path d="M35 50 L45 60 L65 40" stroke="#fff" stroke-width="6"
        fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

SVGはDOMに存在するため、CSSでスタイリング、JavaScriptでアニメーション、ユーザーイベントへの応答が可能です — インタラクティブな可視化やダイナミックUIに独自の力を発揮します。

• 数学的レンダリング — 16pxのファビコンから3メートルの看板まで鮮明。
• テキストはテキストのまま — 検索エンジンがインデックス、スクリーンリーダーが読み上げ。
• スタイル可能でスクリプト可能 — 色を動的に変更、ホバーエフェクト追加、アニメーション作成。
• 優れた圧縮性 — gzipがSVGを60〜80%削減（XMLは繰り返しが多いため）。

PNGの仕組み

PNG（Portable Network Graphics）は、各ピクセルの正確な色を保存するロスレスラスターフォーマットです。1000×1000のPNGを表示すると、ブラウザはそのミリオンの値を画面ピクセルにマッピングします。表示領域が大きい場合、ブラウザは補間します — ぼやけはそこから来ます。

• ピクセルパーフェクトな忠実度 — すべての色値が正確に保持。
• 完全なアルファ透過 — あらゆる背景で滑らかなエッジ。
• ユニバーサルサポート — すべてのブラウザ、メールクライアント、OSがPNGを処理。
• 予測可能なレンダリング — 複雑なパス解析なし。

決定版比較表

特性	SVG	PNG	勝者
スケーラビリティ	無限 — あらゆる解像度で鮮明	固定 — 拡大するとぼやける	SVG
サイズ（シンプル）	極小（アイコンで1KB未満が多い）	大きめ（5〜50KBが多い）	SVG
サイズ（複雑）	巨大（数百万パス）	圧縮で妥当	PNG
アニメーション	CSS, SMIL, JS, Lottie, GreenSock	ネイティブ不可（APNGが必要）	SVG
アクセシビリティ	マークアップにtitle/desc/aria-labels	alt属性のみ	SVG
セキュリティ	インラインSVGでXSSリスク	スクリプト実行リスクなし	PNG

パフォーマンスベンチマーク

24個のUIアイコン（64×64表示）のロード・レンダリング時間：

指標	SVGスプライト	個別SVG	PNGスプライト	個別PNG
合計サイズ	12 KB	18 KB（24リクエスト）	48 KB	96 KB（24リクエスト）
gzip転送	4 KB	6 KB	44 KB	88 KB
パース時間	2.1 ms	3.8 ms	0.4 ms	0.6 ms
初回描画（3G）	120 ms	340 ms	180 ms	890 ms

ユースケースマトリックス

SVGが勝つ場合

• ロゴとブランドマーク — 1ファイル、あらゆるサイズ、永遠に。
• アイコンとUI要素 — CSS Custom Propertiesでテーマに合わせてスタイリング。
• データ可視化 — D3.js、Chart.js、RechartsはすべてSVGを出力。
• アニメーション付きイラスト — Lottie、GreenSock、または純粋CSS。
• 地図とダイアグラム — ズーム可能、インタラクティブ、アクセシブル。

PNGが勝つ場合

• 写真 — 滑らかなグラデーションを持つ数百万色。
• スクリーンショット — ピクセルレベルの正確さが重要。
• 複雑なテクスチャ — 有機的なディテールはベクターに変換できない。
• メールキャンペーン — 多くのメールクライアントがSVGをサポートしない。

クイック判断ルール：「Figmaでシェイプツールだけで再現できるか？」はい→SVG。写真をインポートする必要がある→PNG。ラスターをベクターに変換する必要がある？VectoSolveのAIベクタライザーが数秒で処理します。

SVGセキュリティ：知っておくべきXSSベクター

インラインSVGはJavaScriptを実行できます。<script>タグやonloadハンドラを含むファイルは、ユーザーのブラウザで任意のコードを実行します。ユーザーがアップロードしたSVGをサニタイズせずにインラインでレンダリングしないでください。

モダンベストプラクティス

• SVG：VectoSolveのオプティマイザーまたはSVGOで処理。
• PNG：pngquantやoxipngでlossy/lossless圧縮。

SVGであるべきPNGロゴがありますか？VectoSolveはAIでラスター画像をクリーンなベクターパスにトレースします — 多くの場合90%小さくなります。

結論：「より良い」フォーマットは存在しない

SVGとPNGが存在するのは、画像が2つのカテゴリに分かれるためです：構築されたもの（形状、テキスト、幾何学）とキャプチャされたもの（写真、スキャン、スクリーンショット）。フォーマットをコンテンツに合わせ、積極的に最適化すれば、あらゆるデバイスで高速、鮮明、アクセシブルなページを提供できます。

属性	SVG	PNG
タイプ	ベクター（数学ベース）	ラスター（ピクセルベース）
スケーラビリティ	無限 — 品質劣化なし	固定 — 拡大するとぼやける
最適な用途	ロゴ、アイコン、UI要素	写真、スクリーンショット、複雑な画像
一般的なサイズ（アイコン）	1〜5 KB	10〜50 KB
アニメーションサポート	CSS + JSアニメーション	APNGのみ（サポート限定）