2026-07-28·4 min read
PNG vs SVG: ロゴ、アイコン、グラフィックにどちらの形式？
PNGとSVG形式の実用的な比較 — ロゴ、アイコン、イラスト、ウェブグラフィックにそれぞれをいつ使うか。
PNGとSVGはどちらもロゴとグラフィックの人気形式です — しかし非常に異なって機能します。間違ったものを選ぶと、ぼやけたロゴかどこでも開けないファイルになります。決める方法を紹介します。
PNG vs SVG: 核心的な違い
- PNG（Portable Network Graphics）はラスター形式です — 画像をピクセルのグリッドとして保存します。200×200のPNGは正確に40,000ピクセルあります。拡大するとぼやけます。
- SVG（Scalable Vector Graphics）はベクター形式です — 形を数学的指示として保存します。SVGロゴはファビコン（16×16）から看板まで、あらゆるサイズで完璧に鮮明に見えます。
PNGを使うとき
- 複雑な画像や写真: SVGは複雑な形を記述できますが写真には非実用的
- クロスプラットフォーム互換性: PNGはどこでも開く — ブラウザ、ワープロ、メール、メッセージングアプリ
- 固定出力サイズが必要なとき: ソーシャルメディア投稿、既知のDPIでの印刷、ピクセル完璧なUIアセット
- スクリーンショットとUIモックアップ: 本質的にラスター、PNGが正しい形式
- SVGが利用できないとき: 高解像度PNG（幅2000+ピクセル）がほとんどの目的に良く機能
SVGを使うとき
- ロゴとブランドマーク: SVGロゴはあらゆるサイズで鮮明なまま — ウェブサイトヘッダー、モバイルアプリアイコン、印刷パンフレット
- アイコン: SVGのUIアイコンがレティナ/高DPI画面で完璧に拡大
- 形で作られたイラスト: チャート、図、インフォグラフィック、イラスト
- アニメーション: SVGはCSSとJavaScriptアニメーションをサポート
- レスポンシブウェブデザイン: SVGがブラウザウィンドウとともに自動的に拡大
PNG vs SVG比較
| 機能 | PNG | SVG |
|---|---|---|
| 拡張性 | 固定サイズ（ピクセル） | 無限（ベクター） |
| ファイルサイズ（ロゴ） | 20〜200KB | 5〜50KB |
| 写真サポート | はい | いいえ |
| 透明度 | はい | はい |
| アニメーション | いいえ | はい (CSS/JS) |
| ブラウザサポート | 普遍的 | すべての最新ブラウザ |
| メールサポート | 普遍的 | 限定（メールでは避ける） |
| 編集可能性 | ラスターエディター必要 | あらゆるテキストエディターまたはIllustrator |
両方を一緒に使う
- 多くのワークフローが両方の形式を使用します:
- 編集と拡大のためSVGをマスターロゴファイルとして維持
- ソーシャルメディア、プレゼン、メール用に特定サイズのPNGバージョンをエクスポート
- レティナディスプレイ用に2× PNG（例: 200×200ロゴには400×400）を使用
- PNGロゴしかない場合、画像リサイズツールで高解像度バージョンを作成し、ウェブ使用にはPNG → WebPを使用してください。