スケーラブル・ベクター・グラフィックス（SVG）の概要と実用ガイド

構造と機能

SVG文書は基本的に、circle、rect、ellipse、line、polyline、および汎用性の高いpathなどのプリミティブを定義します。これに加え、グループ化、変形、viewBoxで制御される座標系を備えます。テキスト、グラデーション、パターン、クリッピング、複雑な合成をサポートし、CSSによるスタイル設定も可能です。SVGはブラウザのDOMの一部であるため、要素にスクリプトでアクセスして変更したり、イベントに応答させたりできます。これにより、インタラクティブ性とアニメーションを実現できます。

• ベクタープリミティブ：幾何学的な図形とパス。
• スタイル設定：CSSと表示用属性。
• インタラクティブ性：DOMスクリプトとイベント処理。
• アニメーション：宣言的な手法とスクリプト駆動の手法。
• アクセシビリティ：検索可能なテキストとARIAのサポート。

歴史と標準

SVGは、ウェブおよび他の媒体のための、オープンで相互運用可能なベクター画像形式を提供する目的で、World Wide Web Consortiumによって開発・標準化されました。その仕様は、テキストベースでプラットフォームに依存しない手法を維持しつつ、より豊かな表現、スクリプト、国際化の要件に対応するよう発展してきました。公式情報および規範的な文書については、W3Cのコンソーシアム資料を参照してください。

主な用途と例

SVGは、ロゴやアイコン、インタラクティブなグラフや地図、データ可視化、技術図、印刷用グラフィックスに広く用いられています。ピクセル化せずに拡大・縮小できるため、レスポンシブデザインや高密度ディスプレイに適しています。開発者は、アニメーションによる遷移、ベクターアートを使うゲーム、精度や単純な図形における小さなファイルサイズが重要となるプログラム生成画像にもSVGを利用します。

利点と制限

利点には、解像度非依存性、編集可能なソース、検索可能でアクセシブルなコンテンツ、そして多くの単純なイラストでのコンパクトさがあります。一方、写真のように非常に細密なコンテンツではラスター形式のほうが適しており、非常に大きなDOMツリーは描画性能に影響することがあります。SVGへスクリプトを埋め込む場合は、セキュリティおよびクロスオリジンに関する考慮を慎重に扱う必要があります。

作成、埋め込み、ツール

SVGは、グラフィックエディターやベクターデザインツールで作成できるほか、コードとデータから生成することもできます。HTMLへのインライン埋め込み、外部ファイルとしての参照、img、object、CSS背景による組み込みが可能であり、各方法にはスタイル設定、スクリプト、アクセシビリティに関する利点と制約があります。SVGはXMLに基づくため、標準的なXMLツールで検証・変換でき、ウェブ開発のワークフローやビルドパイプラインに統合できます。

重要な違いとして、SVGはベクター形式であるのに対し、ラスター画像（PNG、JPEG）はピクセルベースです。canvasのようなビットマップ描画APIは描画時にピクセルを生成し、図形を保持するDOMを公開しません。SVGを選ぶ際には、視覚上の要件、インタラクティブ性、性能、ワークフローの間でバランスを取ることが一般的です。