SVG/Scalable Vector Graphics
SVG/Scalable Vector Graphics
SVG/Scalable Vector Graphicsとは
SVG対応ブラウザ(iframeタグにも対応のブラウザ)では上に円弧上を動く矢印のアニメーションと文字がフェードインする特殊効果が表示されます。
SVGとは『Scalable Vector Graphics』の略で座標表現による線と面から構成される2D(2次元)図形、画像形式として策定されたW3C仕様であり、3D(3次元)拡張も模索されています。
IT/ICT用語としては、"Scalable"とは、「コンピュータ性能の範囲内で容易かつ柔軟に【縮小拡大できる】」、Vectorとは、「ベクトル(座標)」、Graphicsとは、「視覚表現」、よってScalable Vector Graphicsとは「座標によって表現される柔軟に拡大縮小可能な視覚表現」といったニュアンスとなります。
SVG仕様は、視覚情報が座標表現により線と面で構成され、拡大縮小時にはアウトラインフォントを使用する為、点から成るビットマップに比し、拡大時にもジャギーが(少)なく、環境に合わせてより滑らかに表示されるようになっています。
SVG対応ブラウザ及び対応ビューワ
IE9(IE8はプラグイン等で対応可の場合もあり)、Firefox、Google Chrome、Safari、Opera...etc.の比較的最新のブラウザであれば表示可能です。
ただ、現行は2011/08/16勧告のSVG 1.1(Second Edition)ですが、そもそもSVG 1.0(初版)は2001/09/04に勧告となっており、部分的だったとしてもブラウザによっては最新でなくとも表示できる場合もあるでしょう。
また、SVGではECMAScript(JavaScript)などのscriptを埋め込む(併用する)ことが可能な為、JavaScriptを無効にしている場合などにおいてはAjax同様、対応ブラウザでもスクリプトを利用した一部のSVGアプリケーションを表示できない場合があります。
ビューワとしては、サーバサイドによる実装ではApacheのBatlk、クライアントビューワとしてはAdobe Systems社のFlashプラグイン、また各種ブラウザのプラグイン、また当然のことながらSVGエディタなら表示も可能です。
SVGの多岐に渡る利用範囲
SVG仕様自体がベクターとラスタ(ビットマップ)から成る視覚情報であっても1つのレイヤー(層)として表現でき、透過もできることからビットマップや後述の線形グラデーションサンプルのように単なるテキストを図形の一部として重ねる事も可能ですし、文字のフェードイン／フェードアウト等、PowerPointやImpressなどのプレゼンテーションソフトに見られるような特殊効果や冒頭のようなSVGタグによるアニメを実現することができます。
更には、グラフや表、CADデータやMicrosoft Visioなどで描くような図形の描画、他にもハイパーリンクさせたり、ECMAScript(JavaScript)などによるスクリプト操作やXSL/XSLTによる画像操作や変換も可能となっており、HTML5/CSS3と併用すればより一層インタラクティブな環境を演出することもできるでしょう。
尤も画像形式という概念に縛られる必要はなく、SVGは単なるプレーンテキストを容易に含めることができるXMLアプリケーションであることから、むしろテキスト文書に時折、画像を挿入するといった使用方法も考えられますし、SVGではHTML5でも仕様として取り込まれるMathMLも利用できるので数学や科学技術計算など理系の文書作成など多岐にわたる利用が想定されます。
SVGをHTML/XHTMLに埋め込む方法
SVGはXMLファイルに座標を記述することによって対応ブラウザやビューワがベクター画像として認識し表示することになっており、装飾にはCSSとXSLを利用可能です。
XMLはSGML/Standard Generalized Markup Languageのサブセットであり、同じくSGMLのサブセットであるHTML、XMLとHTML4によるXHTMLなら尚更、それらファイル内において部分的に埋め込むことで描画、表示させることもできるようになっています。
SVG画像やアニメーションを対応ブラウザや対応ビューワで表示するには、大きく4通りの方法があります。
- 【1.スタンドアローン／SVG専用ファイルを表示】
- ・SVG仕様から成る専用ページとしてのSVGファイル(拡張子".svg"、gzip圧縮svgファイル拡張子".svgz")を表示
- 【2.インライン組み込み／HTML/XHTMLファイルにsvgタグを埋め込んで表示】
- ・<svg></svg>をはじめとするSVGタグやECMAScriptを埋め込んで表示
- 【3.参照による組み込み／HTML/XHTMLタグ＋SVG専用ファイルによる表示】
- ・aタグのhref属性にSVGファイルパスを指定して表示
- ・imgタグのsrc属性にSVGファイルを指定し画像として表示
- ・appletタグ(HTML4非推奨)のcode属性
- ・objectタグとparamタグ
- ・embedタグ(HTML5で定義・以前はブラウザ独自拡張)のcode属性
- ・iframeタグのsrc属性
- ...etc.でSVGファイルを読み込んで表示
- 【4.参照による組み込み／CSS/XSLのURI参照による表示】
- ・[background-image][list-style-image]等々のURI参照
尚、scriptから参照という発想があるとすれば、それは、逆でSVGでは下記のアナログ時計サンプルのように、その内部にEcmascript等を埋め込み拡張することは半ば標準仕様です。
SVGエディタ
SVGはイメージマップのようにベクトル／座標記述による画像描画ですが、1つ1つ座標を設定していくというスタイルは非現実的なので当然エディタの必要性が出てきます。
SVGエディタには、Inkscape、google製svg-edit、W3C製のAmaya、openoffice.orgのDrawといったオープンソースの他、商用ではCorelDRAWやAdobe Illustratorといったエディタもあります。
svg-editは、HTML/CSS/Javascriptだけで実装されていて全てブラウザ上で実行できるなかなか面白いエディタです。
SVGサンプル
SVG対応ブラウザであれば説明下にそれぞれサンプル図形が表示されます。
これらの図形はこのHTMLファイルに座標やサイズ等の情報を記述しているだけでimgタグによるgifやjpg形式などの画像ではありません。
左：テキスト文字部分の線形グラデーション／右：ピンク塗りの楕円形
*文字部分はソースコード上は、単なるテキストです。
左：凸凹図形／右：赤い形星とライムの六角形(アウトライン＋枠付き)
左：青塗りの矩形／右：同一レイヤー上の緑塗りの矩形と紫縁の傾いた矩形
同一レイヤー上の茶縁オレンジ塗りの円形と赤縁の楕円
次のアナログ時計は、SVG対応ブラウザで且つJavaScriptを有効にした場合にのみ時計として機能します。
SVG＋ECMAScript(JavaScript)
Scalable Vector Graphics (SVG) 1.0 Specification (2001/09/04勧告)
Scalable Vector Graphics (SVG) 1.1 Specification (2003/01/14勧告2009/04/30編集)
Scalable Vector Graphics (SVG) 1.1 (Second Edition) (2011/08/16勧告)
