SVG vs PNG：ロゴ、アイコン、UIにはどちらを使うべき？
ウェブに欠かせない2つの画像フォーマット。それぞれ異なる用途に最適化されています。間違った選択はロゴのぼやけやダウンロードの肥大化につながります。
PNG を SVG に変換SVG と PNG はウェブで最も広く使われている画像フォーマットですが、根本的に異なる問題を解決します。SVG はグラフィックスを数学的な図形として保存し、品質を損なうことなく任意のサイズにスケーリングできます。PNG はグラフィックスをピクセルの固定グリッドとして保存し、写真やスクリーンショットのあらゆるディテールをキャプチャしますが、ネイティブ解像度を超えて拡大するとぼやけてしまいます。
適切なフォーマットを選ぶことは、多くのデベロッパーが考える以上に重要です。PNG で保存したロゴは 4K ディスプレイでピクセル化します。複雑な写真を SVG で保存すると、巨大で読み込みの遅いファイルになります。このガイドでは SVG と PNG を並べて比較し、毎回正しい判断ができるようにします。まず基本を知りたい場合は、ラスター vs ベクターの解説をお読みください。
SVG とは？
SVG（Scalable Vector Graphics）は、XML ベースのベクター画像フォーマットです。各ピクセルのカラー値を保存する代わりに、SVG は数学的な座標を使って図形、パス、テキストを記述します。円は中心点と半径で定義され、線は2つの端点で定義されます。ブラウザはこれらの命令を読み取り、必要なサイズでグラフィックをレンダリングします。
引き伸ばすピクセルが存在しないため、SVG 画像は 320 ピクセルのスマートフォン画面でも 5K Retina モニターでも完璧にシャープに表示されます。ファイルはプレーンテキストなので、コードエディタで開いたり、CSS でカラーを変更したり、JavaScript でアニメーションを付けたり、gzip で圧縮したりできます。検索エンジンは SVG 内に埋め込まれたテキストを読み取ることもでき、ラスターフォーマットに対するアクセシビリティ上の優位性があります。
SVG は幾何学的な図形、クリーンなエッジ、フラットなカラー領域で構成されたグラフィックスに最適です：ロゴ、アイコン、イラスト、チャート、UI 要素など。写真コンテンツには向いていません。詳しくは SVG とは？をお読みください。
PNG とは？
PNG（Portable Network Graphics）は、ロスレス圧縮でピクセルのグリッドとしてグラフィックスを保存するラスター画像フォーマットです。各ピクセルが正確なカラー値を保持するため、JPEG のような圧縮アーティファクトが発生しません。PNG はフルアルファチャンネルの透明度もサポートしており、透明背景の写真や詳細なグラフィックが必要な場合に最適なフォーマットです。
PNG は解像度に依存するため、画像はネイティブサイズで最も美しく表示されます。拡大するとピクセル化が見え、縮小するとディスプレイが必要とする以上のデータを送信して帯域幅を浪費します。写真の場合、ファイルサイズは JPEG より大きくなりますが、ロスレスの品質により、スクリーンショット、ソフトウェア UI のモックアップ、ダウンロード速度よりもシャープさとカラーの正確性が重要な画像には PNG が最適です。
PNG はベクターフォーマットでは効率的に再現できない複雑なビジュアルディテールのキャプチャに優れています：透明度のある写真、アンチエイリアステキストを含むスクリーンショット、数千のユニークなカラーと繊細なグラデーションを持つアートワークなどです。
徹底比較
以下の表は、ウェブグラフィックスにとって最も重要な機能について SVG と PNG を比較したものです。
| 機能 | SVG | PNG |
|---|---|---|
| スケーラビリティ | 無限 — どんなサイズでもシャープ | 固定解像度 — 拡大するとピクセル化 |
| ファイルサイズ（シンプルなグラフィック） | 非常に小さい（アイコンは5 KB未満のことが多い） | 大きい（シンプルな図形でもピクセルデータが必要） |
| ファイルサイズ（複雑な画像） | 非常に大きくなることがある（数千のパス） | 中〜大だが予測可能 |
| 透明度 | 完全サポート（ベクターモデルに固有） | フルアルファチャンネルの透明度 |
| アニメーション | 対応 — CSS と SMIL アニメーション | 非対応（APNG は限定的にサポート） |
| 編集性 | テキストベースの XML — コードで編集可能 | バイナリピクセルデータ — 画像エディタが必要 |
| ブラウザサポート | すべてのモダンブラウザ | すべてのブラウザ |
| アクセシビリティ | title、desc、ARIA 属性をサポート | alt テキストのみに依存 |
| 最適な用途 | ロゴ、アイコン、UI、イラスト、チャート | 透明度のある写真、スクリーンショット |
ロゴ、アイコン、レスポンシブ UI コンポーネントには、SVG が明確な勝者です：より小さなファイル、無限のスケーラビリティ、アニメーションとアクセシビリティのビルトインサポート。写真や複雑なラスターアートワークのピクセルパーフェクトな再現（特に透明度が必要な場合）では PNG がリードします。JPEG を含めた3者比較は、SVG vs PNG vs JPG 比較をご覧ください。
SVG を選ぶべき場面
グラフィックが写真的なディテールではなく、図形、線、ソリッドカラーで構成されている場合は SVG を選びましょう。最も一般的なユースケースは以下の通りです：
- ロゴとブランドマーク — 1つの SVG ロゴファイルで、名刺、看板、Retina スクリーンのすべてで完璧に表示でき、複数の解像度バリアントを生成する必要がありません。ロゴを SVG で作成する方法をご覧ください。
- アイコンと UI 要素 — SVG アイコンは軽量で、CSS でスタイリング可能、解像度に依存しません。1つのファイルで PNG スプライトシート全体を置き換えられます。
- イラストとインフォグラフィック — フラットイラストやデータビジュアライゼーションはベクターパスに自然に変換でき、ファイルサイズを小さく、品質を高く保てます。
- チャートとダイアグラム — SVG チャートはあらゆるズームレベルで判読可能で、JavaScript でインタラクティブ要素を追加できます。
- レスポンシブウェブグラフィック — SVG はメディアクエリや srcset の複雑な設定なしに、任意のコンテナサイズに適応します。
ベクターの方が適しているシンプルな PNG グラフィックがある場合、Any2SVG を使って数秒で PNG を SVG に変換できます。ブラウザベースのトレーサーが、お使いのデバイス上で完全に変換を処理します。
PNG を選ぶべき場面
画像に写真的なディテールや、ベクターパスでは効率的に表現できない数千のユニークなカラーが含まれている場合は PNG を選びましょう：
- 透明背景の写真 — 商品写真、ヘッドショット、合成画像など、写真品質と透明度の両方が必要な場合。
- スクリーンショットとソフトウェアモックアップ — スクリーンショットにはアンチエイリアステキスト、インターフェース要素、グラデーションが含まれ、SVG へのトレーシングでは精度が低下します。
- 複雑なデジタルアートワーク — ペインティング、テクスチャ、重いグラデーションを持つ画像は、SVG よりも PNG の方が小さく正確になります。
- ピクセルアート — ピクセル単位でデザインされたアートは、意図的なグリッド構造を保持するためにラスターのままにすべきです。
これらの場合でも、PNG が常に最終的な答えとは限りません。ロスレス品質よりもダウンロード速度が重要な場合は、より効率的なラスター代替手段として WebP や AVIF を検討してください。
まとめ
SVG と PNG は競合関係ではなく、補完関係にあります。SVG は図形と線で構成されるあらゆるものに最適です：ロゴ、アイコン、UI 要素、イラスト、チャート。PNG はピクセルで構成されるあらゆるものに最適です：透明度のある写真、スクリーンショット、複雑なラスターアートワーク。
最もシンプルなルール：画像をスケーリングする必要があるなら SVG を使いましょう。写真的なディテールをキャプチャする必要があるなら PNG を使いましょう。そして、本来ベクターであるべきだったラスターグラフィックがあるなら、変換は数クリックで完了します。