Webサイトにロゴを使おうとしたとき、「SVGとPNGどちらで書き出せばいいですか？」と聞かれて迷った経験はないでしょうか。 デザイナーから受け取ったファイルがSVGで「どう使えばいいの？」と困った方もいるかもしれません。 この記事では、SVGとはどんな形式か、PNG・JPEG・WebPとどう違うのか、 そしてどんな場面でSVGを選ぶべきかをわかりやすく解説します。
SVGとは（Scalable Vector Graphicsの定義）
SVGはScalable Vector Graphics（スケーラブル ベクター グラフィクス）の略で、 1999年にW3Cが策定したXMLベースの画像フォーマットです。 ファイルをテキストエディタで開くと、タグとパラメータが並んだXMLコードが書かれています。
「スケーラブル」という名前が示す通り、どんなサイズに拡大・縮小しても画質が劣化しないのが最大の特徴です。 スマートフォンの小さな画面でも、4Kモニターの大きな画面でも、常にシャープに表示されます。
ラスター形式 vs ベクター形式の違い
画像フォーマットには大きく分けてラスター形式とベクター形式の2種類があります。
ラスター形式（PNG・JPEG・WebP・GIF）は、画像を細かいドット（ピクセル）の集合として記録します。 1000×1000pxの画像なら、100万個のピクセルそれぞれの色情報を保持しています。 このため、拡大するとドットが見えてぼやけてしまう「ジャギー（ギザギザ）」が発生します。
ベクター形式（SVG）は、画像を「この座標から、この曲線で、この色で塗った図形」という数学的な定義として記録します。 画面のサイズに合わせて毎回計算し直して描画するため、拡大・縮小しても常に同じ滑らかさを保ちます。
たとえば丸いアイコンを考えてみましょう。ラスター形式では「1000×1000個の点の集合」として保存しますが、 ベクター形式では「半径500の円、中心座標(500,500)、塗り色は青」と記録します。 拡大しても「数式」を計算し直して描くだけなのでにじみが起きません。
SVGとPNG・JPEG・WebPの比較
| SVG | PNG | JPEG | WebP | |
|---|---|---|---|---|
| 形式 | ベクター | ラスター | ラスター | ラスター |
| 拡大縮小 | 画質劣化なし | 劣化あり | 劣化あり | 劣化あり |
| 透過（透明） | ◯ | ◯ | ✕ | ◯ |
| 写真の表現 | 不向き | ◯ | 最適 | 最適 |
| アニメーション | ◯（CSS/JS） | ✕ | ✕ | ◯ |
| CSSで編集 | ◯ | ✕ | ✕ | ✕ |
| 主な用途 | ロゴ・アイコン・図 | スクリーンショット・透過画像 | 写真・複雑な画像 | Web全般 |
SVGが向いている用途
ロゴ・ブランドマーク
企業ロゴやサービスロゴはSVGが最も適した場面です。ファビコン（16px）からヘッダーロゴ（200px）、 プレゼン資料（1000px以上）まで、1ファイルですべてのサイズに対応できます。 PNG/JPEG では解像度ごとに複数ファイルを用意する必要がありますが、SVGなら1ファイルで解決します。
UIアイコン
ボタンやナビゲーションに使うアイコンもSVGが最適です。 ファイルサイズが軽量で、CSSで色を自由に変更できるため、ダークモード切り替えやホバーエフェクトも容易に実装できます。 多くのデザインシステムやアイコンライブラリがSVGを採用している理由がここにあります。
グラフ・チャート・図解
折れ線グラフや棒グラフ、組織図などの図解はSVGで作ると拡大しても鮮明に表示されます。 D3.jsなどのライブラリはSVGを直接生成・操作するため、インタラクティブなチャートとの相性も抜群です。
アニメーション
SVGはCSSアニメーションやJavaScriptで動かすことができます。 ローディングスピナーやホバー時のエフェクトなど、軽量なアニメーションをコードだけで実装できるのもSVGならではの強みです。
SVGをPNGに変換すべき場面
SVGは万能ではなく、PNG・JPEGに変換した方がよい場面もあります。
- メール添付・古いソフトで使用する場合 — OutlookなどのメールクライアントはSVGのインライン表示に対応していないことがあります。 Office 2016以前もSVGインポート非対応です。
- SNSへの投稿 — X（旧Twitter）・Instagram・FacebookなどはSVGのアップロードをサポートしていません。 PNGやJPEGに変換してから投稿します。
- スクリーンショットや写真と組み合わせる場合 — 写真素材に重ねてロゴを合成したい場合など、ピクセル操作が必要な場面ではPNGとして書き出してから加工します。
- 外部サービスへのアイコン登録 — SaaSのロゴ登録・App Store / Google Playのアイコンなど、指定サイズのPNG/JPEG形式を要求されるケースがあります。
SVGをPNGに変換する際は、SVG→PNG/JPG変換ツールを使えばブラウザ内で完結し、ファイルはサーバーに送信されません。 変換サイズ（ピクセル数）も指定できるので、Retina対応の2倍サイズなど高解像度でのエクスポートも可能です。
SVGをWebで使う方法
HTMLでSVGを使う方法は主に3つあります。それぞれ特徴が異なるため、用途に合わせて選びましょう。
① imgタグで埋め込む
最も簡単な方法です。PNG/JPEGと同じように扱えます。
ただし、この方法ではCSSからSVG内部の色を変更できません。外部ファイルとして読み込まれるため、 ダークモード対応などでCSSで色を変えたい場合は次の方法を使います。
② CSSのbackground-imageとして使う
背景として表示したい場合に使います。
imgタグと同様に、CSSからSVG内部の要素は直接操作できません。
③ インラインSVGとして直接書く
SVGのXMLコードをHTMLに直接書き込む方法です。
fill="currentColor" を指定することで、 CSS の color プロパティと連動して色を変更できます。 ダークモード対応やホバーエフェクトを実装したい場合は、この方法が最も柔軟です。 ただしHTMLが長くなるため、頻繁に使うアイコンはコンポーネント化してキャッシュを活かす設計が重要です。
まとめ
- SVG（Scalable Vector Graphics）はXMLベースのベクター形式で、拡大・縮小しても画質が劣化しない
- ラスター形式（PNG・JPEG）は「ドットの集合」、ベクター形式（SVG）は「数学的な図形の定義」という構造の違いがある
- ロゴ・アイコン・図解・グラフなど「線や図形で描けるもの」にはSVGが最適
- 写真や複雑なグラデーション画像にはJPEG・WebPの方が向いている
- メール添付・SNS投稿・古いソフトとのやり取りではPNGに変換してから使う
- WebでSVGを使う方法は imgタグ・CSS background・インラインSVGの3種類があり、CSSで色を変えたい場合はインラインが最も柔軟