この記事の要点

SVG（Scalable Vector Graphics）はベクター形式で、無限に拡大しても画質が劣化しない XML ベースのテキスト形式なのでテキストエディタでも編集でき、Git で差分管理が可能 CSS や JavaScript で色・サイズ・アニメーションを動的に制御できる <path> 要素の d 属性に座標とコマンドを記述してパスを描く Inkscape（無料）、Adobe Illustrator が代表的な編集ツール、SVGO で最適化 SVG ベースのアイコンフォントは廃れ、現代は SVG スプライト/インライン SVG が主流 外部から取り込んだ SVG は <script> や onload による XSS リスクがある

概要

SVG（Scalable Vector Graphics、エスブイジー）は、W3C が策定したベクター画像のための XML ベースのフォーマットです。1999 年に最初の仕様（SVG 1.0）の作業が始まり、2001 年に勧告されました。現在は SVG 2 が策定中で、すべてのモダンブラウザがネイティブで SVG 1.1 をサポートしています。

ベクター形式の最大の特徴は「拡大しても劣化しない」ことです。ピクセル（画素）の集まりとして画像を保存するラスター形式（JPEG、PNG、GIF など）と異なり、SVG は「点 A から点 B まで太さ 2px の黒線を引く」「半径 50 の円を描く」といった図形の指示書を XML で保存します。レンダリング時にブラウザが指示書を読み取り、表示解像度に合わせて再計算するため、Retina/4K ディスプレイでも常にシャープに表示されます。

主な用途は、ロゴ、アイコン、UI 部品、図表、データ可視化（D3.js など）、地図、インフォグラフィック、印刷物との互換素材などです。Web フロントエンドにおいては、Font Awesome のようなアイコンフォントから SVG スプライト/インライン SVG への移行が進み、現代の Web デザインの基盤となっています。

内部構造とマジックナンバー

SVG はバイナリではなくテキスト（XML）形式なので、いわゆるマジックナンバーはありません。代わりに XML 宣言と <svg> ルート要素が識別子の役割を果たします。

判定箇所	内容
先頭バイト	<?xml version="1.0"...?>（任意）または <svg ...>
名前空間	xmlns="http://www.w3.org/2000/svg"
必須属性	viewBox（座標系）、width / height（任意）
拡張子	.svg（通常）、.svgz（gzip 圧縮版）
MIME	image/svg+xml

典型的な最小 SVG はこのような形になります。<path> 要素の d 属性は「M (移動) → L (直線) → C (ベジェ曲線) → Z (閉じる)」といったコマンドの羅列で、これがベクター描画の心臓部です。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="#3498db"/>
  <path d="M 20 50 L 80 50" stroke="black" stroke-width="2"/>
</svg>

主な用途

• ロゴ・ブランドマーク：あらゆる解像度で破綻しない
• アイコン（インライン SVG / SVG スプライト）：Font Awesome 6 や Heroicons など、現代のアイコンライブラリはほぼすべて SVG ベース
• データ可視化：D3.js、Chart.js（一部）、ECharts などが SVG を生成
• UI コンポーネント：チェックボックス、トグル、進捗バーなどのカスタムデザイン
• アニメーション：SMIL、CSS、JavaScript（GSAP、anime.js）で動かす
• 印刷・DTP：Illustrator のネイティブ AI と高い互換性
• favicon：モダンブラウザは <link rel="icon" type="image/svg+xml" href="/favicon.svg"> をサポート

関連形式との比較

項目	SVG	PNG	WebP	AI / EPS
方式	ベクター	ラスター	ラスター	ベクター
拡大耐性	無限	×	×	無限
編集容易性	テキスト/Inkscape	Photoshop	Photoshop	Illustrator
Web 表示	ネイティブ	ネイティブ	モダンブラウザ	不可（要書き出し）
CSS 制御	可（fill/stroke）	不可	不可	不可
JS アニメ	得意	不可	不可	不可
写真	不向き	可	得意	不向き

編集・閲覧ツール

• Inkscape：オープンソースの SVG エディタ。Windows / macOS / Linux 対応で無料、機能は商用版に肉薄
• Adobe Illustrator：商用ベクターの王者。SVG 書き出しに対応、Web 用書き出しオプションが充実
• Figma / Sketch / Affinity Designer：UI デザイナー御用達。SVG エクスポートが標準機能
• SVGO（Node.js）：SVG を最適化する CLI ツール。不要な属性・コメント・空白を削減し、ファイルサイズを 30〜70% 縮められる
• SVGOMG：SVGO の Web 版 GUI
• テキストエディタ：VSCode、Sublime Text などで直接編集も可能
• ブラウザ：すべてのモダンブラウザがネイティブ表示。view-source: で構造も読める

注意点・落とし穴

• XSS リスク：SVG は XML なので <script> や onload 属性を埋め込める。ユーザーアップロード SVG をそのまま <img> や <object> で展開すると XSS の温床になる。DOMPurify などでサニタイズすること
• 写真には不向き：複雑なグラデーションや写真をベクター化するとパスが膨大になり、PNG/JPEG/WebP より重くなる
• アイコンフォント時代の終焉：かつて Font Awesome 4 のようにフォントとして配信する方式が主流だったが、レンダリングの曖昧さ・アクセシビリティ問題から、現在は SVG スプライトやインライン SVG に移行している
• 外部 SVG の CSS 制御不可：<img src="icon.svg"> ではドキュメント側 CSS で fill を変更できない。CSS で色を変えたいならインライン SVG にする
• viewBox を忘れない：viewBox がないと拡大縮小が効かなくなる。常に設定する
• 圧縮配信：SVG はテキストなので gzip / brotli が極めて効く。サーバー側で必ず圧縮を有効化する（Content-Encoding: gzip）

関連リンク

• 画像形式（親カテゴリ）
• ファイル拡張子とは
• JPEG（.jpg / .jpeg）
• PNG（.png）
• GIF（.gif）
• WebP（.webp）
• AVIF（.avif）
• 次世代フォーマットでの画像の配信