SVG 【Scalable Vector Graphics】

概要

SVG（Scalable Vector Graphics）とは、XMLの記法を用いて画像を図形の集合として表現する記述言語の一つ。ベクター形式の画像ファイル形式の一つでもあり、ファイルに保存する場合の標準の拡張子は「.svg」。

画像を画素（ピクセル）の集まりとして表現するビットマップ形式（ラスター形式）に対し、ベクター形式は画像を線や面などの図形の集合として表現する。ビットマップ画像のように写実的で細密な表現には向かないが、変形や合成が容易、拡大・縮小しても輪郭などが荒くならない（スケーラブルである）といった特徴がある。

主な仕様

SVGは汎用のマークアップ言語であるXML（Extensible Markup Language）を応用した言語の一つで、テキストデータとして図形を記述する。HTMLなどと同じように山括弧「<」「>」（正確には半角の大なり記号と小なり記号）で囲まれた「タグ」（tag）と呼ばれる表記法を用いてデータを記述していく。

図形描画のための要素として、直線（line）、矩形（rect）、円（circle）、楕円（ecllipse）、多角形（polygon）、折れ線（polyline）などが用意されているほか、パス（path）要素を用いて任意の曲線（ベジェ曲線）を描くこともできる。位置やサイズの指定は平面座標系で行われるため、3次元コンピュータグラフィックス（3DCG）の記述・描画を行うには座標変換などの処理を別に行う必要がある。

色やグラデーションの指定、文字の配置、光源の設定、様々な画像効果を加えるフィルタ、要素の拡大・縮小・回転・変形、アニメーションなどに関する要素も利用できる。画像の一部として外部のSVGデータを呼び出して合成したり、ビットマップ画像と重ね合わせを行うためのレイヤー機能も盛り込まれている。

SVGの利用

SVGは単体の画像ファイルとして用いる場合の他に、XML文書やHTML文書の一部として記述する場合もある。Webブラウザなど閲覧するソフトウェアが対応していれば、文書内の要素の一つとして他の要素と同じように埋め込まれて表示される。

HTMLファイルからは、JPEGやPNGのようなビットマップ画像と同じようにimg要素で外部のSVGファイルを呼び出して埋め込み表示するか、svg要素で直にHTML中に記述することもできる。近年ではWebページ上でグラフやイラスト、アイコン、ロゴ、図形などを表示したい場合によく用いられる。

SVGの歴史

1990年代末、Webが一般に広く普及すると、Webページ上で図形描画を行いたいというニーズが高まり、米アドビ（Adobe）社などの企業連合が「PGML」（Precision Graphics Markup Language）を、米マイクロソフト（Microsoft）社などの企業連合が「VML」（Vector Markup Language）をそれぞれ提唱した。

標準化団体のW3Cでは両案を含む6件のベクター画像仕様を検討の上、新たな記述言語としてSVGを開発した。初版の草案（ドラフト）は1999年に公表され、2001年に正式に勧告されたが、当時最大シェアのInternet Explorerが標準で対応せず表示にプラグインなどを必要としたこともあり、当初はあまり普及しなかった。

2010年代になるとGoogle ChromeやMozilla Firefox、Apple Safariなどが標準対応するようになり、SVG活用の機運が高まった。2008年にはSVG Tiny 1.2、2011年にはSVG 1.1第2版（初版の誤記修正版）、2018年にはSVG 2がそれぞれ公表されている。2012年にはW3CのSVG Tiny 1.2を邦訳した「JIS X 4197:2012 変倍ベクタグラフィックス SVG Tiny 1.2」がJIS規格となった。

(2023.8.23更新)