SVG vs PNG：ベクターとラスターの根本的な違いと使い分け
SVGとPNGは異なる問題を解きます。SVGはベクター形状を記述しラスターも埋め込めます。PNGは固定ピクセル格子を保存します。選択は原画、安全境界、アクセシビリティ、編集経路、描画、測定容量に依存します。
SVGとPNGの本質的な違い
SVGとPNGの区別はベクターとラスターの違いに対応します。
SVGはXMLベースで、形、パス、文字、フィルター、スタイル、埋め込み資源を記述します。ベクター部分は描画寸法で再描画されますが、鮮明さは形状、線、効果、ピクセル位置、ラスターに依存します。
PNGは固定ピクセル格子を保存します。拡大には再サンプリングが必要で、ぼけやピクセル化が起こります。表示枠より大きすぎる原本は、レスポンシブ候補が選択を助けない限り転送と復号の負荷を増やします。
この違いが容量、拡大縮小、編集、各形式に向く画像の種類を左右します。
SVGを使う場合
SVGは安全性、アクセシビリティ、描画、埋め込み要件を理解したうえで確認済みベクター原画に使う候補です。
- ロゴ — きれいなSVG一つでラスター拡大なしに多くの寸法を覆えます。非常に小さい印は光学的単純化、線の調整、専用版が必要な場合があります。
- アイコン — UI、ナビゲーション、SNSで形とスタイルを共有できます。SVGは複数ラスター解像度より小さい場合がありますが、複雑なパスやインライン反復で逆転します。
- イラストと図 — 明確な線と平坦な色。文字として表現されたSVGテキストは選択可能ですが、アクセシビリティと索引には正しいマークアップと埋め込みが必要です。
- アニメーション — CSS、JavaScript、SVG機構で動かせます。動きの設定、CPU、CSP、アクセシビリティ、操作性を確認します。
- ファビコン — 現在の主要ブラウザーはSVGを使えますが、完全なセットはラスターやICOも必要な場合があります。ファビコン生成で一般的な出力を作れます。
SVGは現在のブラウザーとデザインツールで広く対応します。普及していても個別素材がベクター向きとは限りません。複雑さ、安全、キャッシュ、アクセシビリティ、描画を比べます。
PNGを使う場合
PNGは可逆ラスターまたはアルファ透過が重要で、出力容量が予算に収まる場合の候補です。
- 透過写真 — PNGはアルファと可逆ピクセルを提供しますが、細かな写真は大きくなります。対応先ではアルファ付きWebP/AVIFを比較し、透過不要ならJPEGと現代写真形式を試します。
- 画面画像 — PNGは符号化ピクセルを保持できます。プロファイル、メタデータ、拡縮、パレット変換は別の問題です。
- 多色の複雑な作品 — きれいなベクター形状へ単純化できない絵画、質感、写実的イラスト。
- 文字入りラスター — ピクセル単位の文字輪郭が必要ならPNGは非可逆欠点を避けます。
ファイルサイズとパフォーマンスの比較
アイコン、ロゴ、単純な図では、形状、寸法、反復、圧縮、キャッシュによって最適化SVGとラスターのどちらも小さくなり得ます。
| グラフィックの種類 | PNGサイズ | SVGサイズ | 削減率 |
|---|---|---|---|
| 単純なアイコン | 候補ごとに一つのラスター寸法 | 多くの場合小さなベクター形状 | 両方測定 |
| ロゴ | 複数解像度が必要な場合 | ベクター原本があれば有力 | 両方測定 |
| アイコン集 | 別ファイルはリクエストとバイトを追加 | スプライト、外部、インラインでキャッシュ費用が異なる | ページ全体を測定 |
| 単純なイラスト | ピクセル寸法と細部で増加 | パス、スタイル、フィルターで増加 | 内容依存 |
Brotliやgzipなどのテキスト圧縮はマークアップとサーバー設定に応じてSVG転送量を減らします。ディスク上の原本だけでなく圧縮転送バイトを比べます。
インラインSVGは別リクエストを避けますがHTMLを増やし、独立キャッシュできません。外部SVGはキャッシュできます。ベクターは通常密度別候補を不要にしますが、複雑またはラスター埋め込みSVGにはレスポンシブ対応が必要な場合があります。ページ全体を測ります。
写真や細かな質感はトレースで形が過剰になるか細部を失います。SVGへのラスター埋め込みはコンテナーと多くの場合base64を追加するだけで、ベクターにはなりません。PNG、JPEG、WebP、AVIFを使います。
SVG vs PNG：比較早見表
| 特徴 | SVG | PNG |
|---|---|---|
| 画像種類 | ベクター（形とパス） | ラスター（ピクセル格子） |
| 拡大縮小 | ベクター部分は再描画・描画詳細も重要 | 固定格子・拡大で柔らかくなる場合 |
| 透過 | はい | はい（アルファ） |
| 写真内容 | 埋め込みラスター以外は通常不向き | 可逆アルファ候補・容量を比較 |
| アイコン／ロゴ | きれいで確認済みベクター原本なら有力 | 準備したピクセル寸法で利用可能 |
| アニメーション | はい（SVG/CSS/JS） | APNG拡張 |
| コード編集 | はい（XML） | いいえ |
| 文字とアクセシビリティ | 正しいマークアップと埋め込みで可能 | 周辺テキストまたは同等altが必要 |
| ブラウザー | 現在の主要ブラウザー・埋め込み規則は異なる | 非常に広い |
| 容量 | 形状とマークアップに依存 | 寸法と内容に依存 |
実例：企業サイトの再設計
ロゴ、ナビゲーションと機能用アイコン30個、メイン写真、商品画面画像を持つ企業サイトを想定し、次のように割り当てます。
- ロゴ → きれいなベクター原本があればSVG。線と小寸法の可読性を試します。
- アイコン集 → SVGスプライトや部品で形を再利用。アクセシビリティ、キャッシュ、CSP、転送マークアップを検証します。
- メイン写真 → 同じ寸法と見た目でJPEG、WebP、AVIFを試し、必要な代替を残します。最適化ガイドも参照してください。
- 商品画面 → ピクセル保持が必要ならPNGから始め、他の可逆候補と許容できる非可逆版を比較します。
SVGとPNGを変換する方法
対応ファイルはソフトを入れずブラウザーで変換できます。Vizuaは選択ファイルをブラウザーで処理し画像サーバーへ送りませんが、ページサービスは通信を使う場合があります。
- SVGからPNG — 対応SVGを利用可能な倍率でラスター化し確認
- 画像をベクター化 — ラスターを近似パスへトレース。元のベクター形状は復元しません
- ファビコン生成 — 対応原本から一般的な出力を作成
ページ別の寸法とバイト予算は画像ファイル容量ガイドをご覧ください。
よくある質問
SVGはPNGを完全に置き換えられますか？
いいえ。SVGは図、アイコン、イラストに適しますが、写真を効率よく表現できません。写真をラスターとして埋め込むと巨大になり、形へトレースすると細部を失います。ベクター向きの内容にはSVG、複雑なラスターにはPNG、JPEG、WebPを使います。
SVGはWebで安全ですか？
SVGは能動的なXMLで、スクリプト、イベント、外部参照、リンク、CSS、フィルターなどを含めます。信頼できないSVGはコードとして扱い、許可リストで検証し、保守されたツールで無害化し、適切な種類と分離で配信してCSPを適用します。信頼できる出所も確認の代わりにはなりません。
SVGがぼけるのはなぜですか？
ベクター形状はラスター拡大なしで再描画されますが、小数位置、線、フィルター、変換、アンチエイリアス、埋め込みラスター、画面で柔らかく見える場合があります。viewBox、描画寸法、線の動作、ラスター内容を確認します。
SVGとアイコンフォントのどちらですか？
SVGは各アイコンへアクセシブル名を付けたり装飾なら隠したりでき、スタイルも限定できるため有力です。ただし自動的に高速・アクセシブルではありません。インラインはHTMLを増やし、外部スプライトはキャッシュでき、ARIAは正しく実装する必要があります。
PNGをSVGへ変換できますか？
はい。Vizuaのベクター化はPNGやJPEGを近似SVGパスへトレースします。色数が少なく輪郭の明確なロゴ、アイコン、単純なイラストに向き、複雑な写真には向きません。