SVG徹底解説：概要・特徴・実務活用・最適化とアクセシビリティ
エバープレイ編集部SVG とは — 概要
SVG（Scalable Vector Graphics）は、XML ベースのベクター画像フォーマットで、図形やテキスト、パス、グラデーション、フィルター、アニメーションなどを記述できます。ピクセルベースのラスター画像（PNG/JPEG）と異なり、数学的な座標・命令で描画するため、解像度に依存せず拡大縮小しても劣化しません。主にアイコン、ロゴ、インフォグラフィック、インタラクティブな図表などに広く使われます。
歴史と標準化
SVG は W3C によって標準化されており、SVG 1.0（2001）や SVG 1.1（2003）がリリースされました。後続の仕様（SVG 2）は機能の統合や改善を目指して継続的に策定されており、多くの機能がブラウザで実装されています。実務上は「SVG ファイルは標準化された XML 文書である」という前提で利用されます。
主な特徴と利点
- 解像度独立性：どのサイズでもシャープに描画される（Retina/4K 対応）。
- テキスト検索・選択可能：テキスト要素は DOM として扱えるため SEO やアクセシビリティに有利な場合がある。
- 小さいファイルサイズ：単純な図形やアイコンは非常に小さく、gzip 圧縮でさらに縮小可能。
- スタイル制御：CSS で色や表示を操作でき、レスポンシブデザインと相性が良い。
- インタラクティブ性：JavaScript から DOM を操作してアニメーションやイベントを付与可能。
基本的な構造と主要要素
SVG は XML なので、ルート要素は <svg> です。代表的な要素には次のようなものがあります。
- <svg>：ビューポートと座標系を定義（width/height, viewBox 等）。
- <g>：グループ化（変換やスタイルの適用をまとめる）。
- <path>：任意のパスを描く（M, L, C などのコマンドを使用）。
- <rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>：基本図形。
- <text>：テキスト要素（フォントや位置指定が可能）。
- <defs>、<use>：再利用可能な定義と呼び出し。
- <linearGradient>、<radialGradient>：グラデーション定義。
- <filter>：ぼかしや影などのフィルター効果。
重要な属性：viewBox と座標系
viewBox="minX minY width height" は SVG の最も重要な属性の一つで、内部の描画座標系を定義します。width/height と併用すると、ビューポートに合わせてスケーリングされます。preserveAspectRatio 属性でアスペクト比の扱いを制御できます。これらを正しく理解するとレスポンシブな SVG を作れます。
埋め込み方法と利点・欠点
- <img src="...">：最も簡単。キャッシュが効き、セキュリティ上安全だが内部 DOM にアクセスできない。
- background-image：CSS で用いる場合、インタラクティブ性は期待できないがスタイリングが容易。
- inline <svg>：HTML 内に直接埋め込む方式。CSS/JS からフルに操作でき、アクセシビリティ制御が可能。
- <object> / <embed>：外部ドキュメントとして読み込まれる。独立した CSS/スクリプトを適用できるが、DOM のやりとりは制限される。
- <use> による外部参照：再利用効率が良いが、ブラウザや CORS ポリシーで挙動が異なる場合がある。
アニメーションとインタラクション
SVG には SMIL に基づく <animate> 系要素が存在しますが、ブラウザ実装のばらつきがあり、近年は CSS アニメーションや Web Animations API、JavaScript を使った操作が主流です。SVG 要素は DOM として扱われるため、addEventListener によるクリックやマウスイベントで高度なインタラクションを実装できます。
アクセシビリティ（A11y）対策
SVG を使う際はアクセシビリティにも配慮します。代表的な手法：
- <title> と <desc> を使って図の意味を記述する。
- role="img" や aria-labelledby を併用してスクリーンリーダーに情報を伝える。
- インタラクティブ要素にはキーボードフォーカス（tabindex）や適切な aria 属性を付与する。
パフォーマンス最適化
- 不要なメタデータやコメント、空の属性を削る。（ツール例：SVGO、svgcleaner）
- 複雑なパスは簡略化し、頂点数を減らす。
- 共通パーツは <symbol> や <use> で再利用して冗長性を減らす。
- 重いフィルターや大量の DOM 要素は描画コストが高いので注意。必要ならビットマップにラスタライズする方が速い場合もある。
- gzip/Brotli 圧縮で転送サイズを削減する。
セキュリティ上の注意点
SVG は XML でスクリプトを埋め込めるため、ユーザー生成コンテンツをそのままインライン表示すると XSS のリスクがあります。外部 SVG を取り扱う場合は Content Security Policy（CSP）やサニタイズ、信頼できるソースのみ許可することが重要です。また、外部参照（<image href="..."> など）は CORS の影響を受けます。
互換性とブラウザサポート
主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）ではコアな SVG 機能は広くサポートされています。古い Internet Explorer（IE8 以下）は未対応、IE9 以降で基本機能をサポートしますが、実装差に注意が必要です。特定の高度なフィルターや一部のアニメーション機能はブラウザ間で差があるため、実装前に検証してください（can i use などで確認を推奨）。
制作ワークフローとツール
- 作成ツール：Adobe Illustrator、Inkscape、Sketch、Figma など。エクスポート時に不要データが付与されることがあるので最適化が必要。
- 最適化ツール：SVGO、SVGOMG（GUI 版の SVGO）で余分な属性を削除。
- 動的生成：D3.js や Snap.svg、GreenSock (GSAP) などのライブラリでデータ駆動のグラフやアニメーションを作成。
実務上の注意点まとめ
- UI アイコンやロゴは可能なら SVG で用意する（解像度対応が容易）。
- ユーザーからアップロードされる SVG は必ずサニタイズする。
- 複雑なエフェクトはパフォーマンスを悪化させるため、必要に応じてラスタ画像に差し替える選択肢を検討する。
- アクセシビリティ要件を満たすために <title> / <desc> と aria 属性を活用する。
まとめ
SVG は解像度に依存しないベクター形式で、ウェブ UI、アイコン、インタラクティブな図表に非常に適しています。CSS や JavaScript と密接に連携できるため表現力が高い一方、最適化やセキュリティ対策が不可欠です。制作ツールと最適化ツールを組み合わせ、ブラウザ互換性とアクセシビリティに配慮することで、SVG の利点を最大限に活かせます。
参考文献
- W3C — Scalable Vector Graphics (SVG) Overview
- MDN Web Docs — SVG（日本語）
- Can I use — SVG サポート状況
- SVGO — SVG 最適化ツール（GitHub）
- SVGOMG — SVGO Online GUI
投稿者プロフィール
