SVG vs PNG：ベクターとラスターの根本的な違いと使い分け
SVGとPNGは根本的に異なる問題を解決します。SVGは画像を数学的な形状として保存し、品質を損なわずに無限に拡大縮小できます。PNGは画像をピクセルのグリッドとして保存し、固定解像度を持ちます。間違ったフォーマットを選ぶと、パフォーマンスか視覚品質のどちらかを犠牲にすることになります。
SVGとPNGの根本的な違い
SVGとPNGの違いは、ベクターグラフィックとラスターグラフィックという大きな区別を反映しています。
SVG（Scalable Vector Graphics）はXMLベースのフォーマットで、形状・線・曲線・色の数学的定義によって画像を記述します。SVGを拡大すると、ブラウザは新しいサイズで各形状を再計算して再描画します。16pxのファビコンとして表示されても、16,000pxのビルボードとして表示されても、常にシャープです。
PNG（Portable Network Graphics）はラスターフォーマットで、それぞれ特定の色値を持つピクセルのグリッドとして画像を保存します。画像は固定解像度を持ちます。ネイティブサイズを超えて拡大するとぼやけてピクセル化します。縮小すると、必要以上のデータをダウンロードすることになります。
この違いがすべてを決定します——ファイルサイズ、拡大縮小性、編集ワークフロー、そして各フォーマットが得意とする画像タイプすべてにわたって影響します。
SVGを使うべきとき
SVGはもともとベクターアートワークとして作成されたグラフィックで優れた性能を発揮します。次の用途ではSVGを使いましょう。
- ロゴ——ロゴは32pxのブラウザタブアイコンからフルワイドのヒーローバナーまで、あらゆるサイズでくっきり見える必要があります。SVGなら1つのファイルで対応でき、PNGなら複数の解像度が必要になります。
- アイコン——UIアイコン、ナビゲーションアイコン、SNSアイコン。あるECサイトでは50個のカテゴリアイコンをPNGの合計1.2 MBからSVGの95 KBに切り替え、92%の軽量化を達成しました。
- イラストと図解——技術的な図表、フローチャート、地図、クリーンな線とフラットカラーのインフォグラフィックス。SVGはテキストを選択可能・検索可能なままに保ちます。
- アニメーション——SVG要素はCSSやJavaScriptでアニメーション化でき、動画ファイルを使わずにローディングスピナー、マイクロインタラクション、インタラクティブなチャートを実現できます。
- ファビコン——モダンブラウザはSVGファビコンをサポートしており、あらゆる画面密度でシャープに表示されます。ファビコン作成ツールでどんな画像からでもファビコンを生成できます。
PNGを使うべきとき
PNGはピクセルレベルの詳細が重要な場合、または画像コンテンツが本質的にラスターベースの場合に適しています。
- 透明背景の写真——透明な背景上の商品切り抜き、レイヤードフォトコンポジット。PNGは写真の詳細を保ちながら完全なアルファ透明度をサポートします（透明度不要の写真にはJPEGの方が通常優れています）。
- スクリーンショット——画面キャプチャには、本質的にラスターであるピクセル精度のUI要素、アンチエイリアス処理されたテキスト、微妙なグラデーションが含まれます。PNGはそれらを正確に保存します。
- 多色で複雑なアートワーク——詳細なデジタル絵画、テクスチャ、クリーンなベクター形状に簡略化できないフォトリアリスティックなイラスト。
- テキストオーバーレイのあるラスターグラフィック——写真とテキストコンテンツを組み合わせたものをピクセル正確にレンダリングする必要がある場合、PNGはテキストエッジ周辺の圧縮アーティファクトを防ぎます。
ファイルサイズの比較
SVGが得意とする種類のグラフィック（アイコン、ロゴ、シンプルなイラスト）では、ファイルサイズの節約は劇的です。
| グラフィックの種類 | PNGサイズ | SVGサイズ | 削減率 |
|---|---|---|---|
| シンプルなアイコン（64×64） | 約25 KB | 約2 KB | 92% |
| ロゴ（500×200） | 約45 KB | 約8 KB | 82% |
| カテゴリアイコン50個 | 合計約1.2 MB | 合計約95 KB | 92% |
| シンプルなイラスト | 約150 KB | 約20 KB | 87% |
SVGファイルはGzipやBrotli圧縮（ほとんどのWebサーバーで標準）でも非常によく圧縮され、転送時にさらに50〜70%小さくなることが多いです。20 KBのSVGが通信上は6〜8 KBで転送されることもあります。
パフォーマンス上のメリットはファイルサイズだけではありません。SVGファイルはHTMLに直接インライン化でき、HTTPリクエストを完全に排除できます。srcset属性やレスポンシブ画像マークアップなしにデバイスのネイティブ解像度でレンダリングされます。そしてテキストベースのため、バージョン管理でキャッシュしやすく差分も追いやすいです。
SVG vs PNG 機能比較
| 機能 | SVG | PNG |
|---|---|---|
| 画像タイプ | ベクター（形状とパス） | ラスター（ピクセルグリッド） |
| 拡大縮小性 | 無限（常にシャープ） | 固定解像度（拡大するとぼやける） |
| 透明度 | 対応 | 対応（アルファチャンネル） |
| 写真に最適 | いいえ | はい（透明度あり） |
| アイコン・ロゴに最適 | はい | 可能だがファイルが大きい |
| アニメーション | 対応（CSS/JS） | 非対応（APNGは対応が限定的） |
| コードで編集可能 | はい（XMLベース） | いいえ |
| SEO（テキスト検索可能） | はい | いいえ |
| ブラウザサポート | すべてのモダンブラウザ | すべてのブラウザ |
| 典型的なファイルサイズ（アイコン） | 1〜5 KB | 10〜50 KB |
SVGの制限：できないこと
複雑な画像——写真、詳細なテクスチャ、何千もの固有色を持つ画像——ではSVGに優位性はありません。写真を「SVGに変換」すると、ラスターデータをbase64で埋め込む形になってより大きくなるか、シンプルな形状にトレースされて詳細が失われます。こうした画像にはPNG、JPEG、またはWebPやAVIFといった新世代フォーマットが適切です。
また、SVGはJavaScriptを含む可能性があるという点でセキュリティ上の注意が必要です。ユーザーからのSVGアップロードを受け付けるシステムでは、scriptタグとイベントハンドラーを取り除くサニタイズ処理を必ず実施してください。
フォーマット変換
これらのフォーマット間の変換はブラウザ上で直接行えます。サーバーへのアップロードも、ソフトウェアのインストールも不要です。Vizuaはすべてのファイルをデバイス上でローカル処理します。
- SVGからPNG——SVGファイルを必要な解像度でラスタライズします
- 画像をベクター化——ラスター画像（PNG、JPEG）をSVGベクター形式に変換します
- ファビコン作成——モダンブラウザ向けSVG出力を含むファビコンファイルをどんな画像からでも作成します
サイトのすべての画像に最適なフォーマットを選ぶための全体的なガイドとして、PNG圧縮ツールも合わせてご利用ください。
よくある質問
SVGはPNGを完全に置き換えられますか？
いいえ。SVGはグラフィック、アイコン、イラストには優れていますが、写真を効率的に表現できません。写真をSVGに変換すると、ラスターデータをbase64で埋め込む形になって非常に大きくなるか、シンプルな形状にトレースされて写真の詳細がすべて失われます。ベクター向けコンテンツにはSVGを、写真や複雑なラスター画像にはPNG（またはJPEG・WebP）を使ってください。
SVGファイルをウェブサイトで使っても安全ですか？
SVGファイルにはJavaScriptを含めることができるため、悪意あるSVGがブラウザでコードを実行する可能性があります。ユーザーからのSVGアップロードを受け付ける場合は、scriptタグとイベントハンドラーを取り除くサニタイズ処理を必ず行ってください。自分で作成したSVGや信頼できるデザイナーから入手したSVGには実質的なリスクはありません。
SVGファイルがぼやけて見える原因は何ですか？
SVG自体は拡大縮小しても品質が落ちませんが、ブラウザが小数ピクセルサイズでレンダリングする場合、SVGが真のベクターパスではなく埋め込みラスター画像を使っている場合、またはデザインがピクセルグリッド上で作られていない場合にぼやけて見えることがあります。SVGがクリーンなベクターシェイプを使用し、主要な線が整数ピクセル座標に揃っているかを確認してください。
ウェブサイトのアイコンにSVGとアイコンフォントどちらを使うべきですか？
SVGが現代のベストプラクティスです。アイコンフォントは2010年代に人気を博しましたが、スクリーンリーダーでの読み上げ問題などのアクセシビリティ課題、スタイリングの制限、少数のアイコンのためにフォントファイル全体をロードするオーバーヘッドがあります。インラインSVGアイコンはより速く読み込まれ、CSSで個別にスタイリングでき、適切なARIA属性を追加すればデフォルトでアクセシブルです。