PNGのロゴは、ロゴを写した写真のようなもので、ピクセルの並びが固定されています。一方SVGのロゴは、描き方の指示書です。「ここからここへ線を引き、この色で塗り、この角を丸める」といった命令が書かれています。ブラウザやソフトはその指示をその場で計算し直し、どんな解像度にも合わせて描き直します。だからSVGは、大きさに関係なく常にくっきり見えるのです。
SVGとPNGの比較
| 項目 | SVG | PNG |
|---|---|---|
| 形式の種類 | ベクター（XMLによる描画命令） | ラスター（ピクセル） |
| 拡大しても劣化しない | ✅ どこまでも拡大可能 | ❌ 拡大するとギザギザになる |
| 透過 | ✅ 完全に対応 | ✅ アルファチャンネルに対応 |
| 写真向き | ❌ 不向き | ❌ 不向き（JPGやWebPを使う） |
| シンプルなロゴ向き | ✅ 最適 | ✅ 使えるがサイズは固定 |
| CSSやJavaScriptで操作できる | ✅ 色・アニメーション・動きを制御可能 | ❌ 不向き |
| ファイルサイズ（シンプルなロゴ） | 非常に軽い（1〜10 KB） | やや重い（20〜200 KB） |
| SNSで使える | ❌ 多くのSNSはSVG非対応 | ✅ どこでも使える |
| メールで使える | ❌ 不向き | ✅ 使える |
| 印刷会社で使える | ✅ 使える（むしろ推奨） | ✅ 高解像度であれば可 |
| Googleに認識される | ✅ テキストとして読み取れる | ❌ alt属性からのみ |
ウェブサイトのロゴにSVGが向く理由
幅200pxのPNGロゴは、フルHDのモニターならくっきり見えますが、4KモニターやiPhoneのRetinaディスプレイではぼやけます。画面が、画像の持つピクセル数を超える細かさで表示しようとするためです。PNGでRetina画面に対応するには、表示サイズの2倍や4倍で書き出す必要があり、その分ファイルが重くなります。
SVGならこの問題は起きません。ブラウザが画面の解像度に合わせてそのつど描画するため、サイズ違いの画像を用意しなくても常にきれいに表示されます。シンプルなロゴなら5 KBのSVG一つで、460 PPIのスマホでも、4Kモニターでも、10メートルの屋外看板でもくっきり出ます。
さらにSVGは、CSSやJavaScriptから操作できます。ダークモード用に色を変える、ホバー時にアニメーションさせる、場面に応じて一部の要素を差し替える——こうした調整がCSSの一行で済みます。
それでもPNGが必要な場面
SVGはあらゆる場所で使えるわけではありません。次のような場面ではPNGが欠かせません。
- SNS： Instagram、Facebook、LinkedIn、LINEなど、ほとんどのサービスはプロフィール写真や投稿画像にJPGかPNGを求めます。
- メールマガジン：メールソフトはSVGをそのまま表示できません。メール内のロゴはPNGにします。
- 資料やドキュメント： PowerPoint、Word、Googleスライドはいずれもきちんと表示します。SVGは対応が限定的だったり、環境によって挙動が変わったりします。
- スタンプやアプリ： LINEスタンプのように、PNGでの入稿が指定されている形式があります。
- グラデーションや影の多い複雑なロゴ：写真的な効果を含むロゴ（推奨はされませんが実在します）は、SVGではうまく再現できません。
ロゴを正しく用意する流れ
実務では、ロゴを両方の形式でそろえておくのが基本です。
- SVG：ウェブサイト、ウェブアプリ、印刷会社への入稿など、拡大縮小が前提の用途に
- 背景を透過した高解像度のPNG： SNS、メール、資料など、SVGが使えない場面に
ImageToolsのロゴ作成ツールは、両方の形式を同時に書き出せます。すでにPNGのロゴがあってSVGが必要な場合は、デザイナーにPNGからベクター化してもらうとよいでしょう。逆にSVGからPNGへの変換は簡単で、変換ツールで対応できます。