SVGは比較的古くからある仕様の1つですが，2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と，将来の展望を全4回の集中連載で解説します。

SVGとは

SVG（Scalable Vector Graphics）は，XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており，画像フォーマットとして用いる場合は拡張子.svgが使用され，MIME形式はimage/svg+xmlが用いられます。

SVGの現状

Firefox，Safari，Google Chrome，Operaなどのブラウザが既にサポートしており，Internet Explorerもそのバージョン9，具体的にはInternet Explorer 9: Platform Demosで公開されているPlatform Preview版でSVGをサポートします。

SVGはHTML5関連のAPIとして挙げられる仕様の中ではかなり古くからある仕様で，現在主要であるSVG 1.1は2003年1月14日にW3Cによって勧告されています。しかし，マイクロソフトはVML，アドビはPGMLなど，対立する仕様を提案していました。そのため，Internet ExplorerのSVGサポートは進みませんでした。また，SVGは多数のモジュールで構成された巨大な仕様であるため，Internet Explorer以外のブラウザのサポートも順調ではありませんでした。そのため，長らくSVGは陽の目を見ることがなかったというのが実情です。

しかし，2010年3月にマイクロソフトがInternet Explorer 9にてSVGをサポートすることを明らかにし，かつほかのブラウザのSVGのサポート状況もようやく足並みが揃ってきたため，一気に注目が集まりました。もちろん依然として無条件で使える技術というわけではありませんが，近い将来には広く使われるようになるかもしれません。

なお，Internet Explorer 9はSVGの仕様のうち，フィルタ，アニメーション（SMIL⁠）⁠，フォント（SVG Fonts）をサポートしません。これらCSS3などで定義される範囲との重複があるため，サポートを見送ることにしたとされています。

XMLとしてのSVG

SVGはXMLで記述します。つまり，SVGファイルはテキストエディタで編集することが可能で，差分が取れるなど，テキストファイルのメリットを享受できます。

その一方で，複雑な描画をするとファイルが巨大になってしまう問題があります。そのため，gzipで圧縮して利用する場合もあり，その場合は拡張子.svgzが用いられます。

SVGを描く

SVGは画像フォーマットでもあるので，いくつかのグラフィックソフトウェアがSVG形式での入出力に対応しています。メジャーなところではAdobe社のIllustrator，Microsoft社のOffice Visioなど，オープンソースのソフトウェアではInkscapeなどが対応しています。特にInkscapeはSVGを標準の形式として開発されており，SVGの多くの機能をサポートしています。

SVGの様々な機能を学びたい場合，Inkscapeで描画して保存したsvgファイルをテキストエディタ等で開くことで手軽に描画結果と整合した記述を知ることができます。

SVGとCanvas 2D

SVGとCanvas 2D（ここではHTML Canvas 2D Contextを指しています。以降，特に注記がない限りCanvas 2D Contextのことを指します）はどちらもW3Cによって定義されている，図を描いて表示するための仕様です。両者はどう違うのか，確認しておきましょう。

まず1つ目の大きな違いは，SVGがベクター形式で，Canvas 2Dはビットマップ形式という点です。SVGで描かれた線はどんなに拡大しても綺麗な線を描きます。一方，Canvas 2Dで描かれた線は拡大したときにどうしてもぼやけてしますし，拡大ではなくCanvas自体を大きく描画した場合は処理も重くなりますしメモリも多く消費してしまします。一方，ビットマップ形式のCanvas 2Dではピクセルに対する操作が可能ですが，SVGではそういったことはできず，ピクセル単位のような細かい描画には不向きです。

もうひとつの大きな違いは，SVGは単体で画像フォーマットとして保存し，対応ビューアで表示することができますが，Canvasはブラウザとその上で動くJavaScriptが存在して初めて描画が可能となります。CanvasもPNGなどの形式で画像ファイルとして出力することはできますが，Canvas自体は画像フォーマットではありません。

SVGとCanvasの違いは，Adobe社製のIllustratorとPhotoshopの関係と似たところがあります。SVGはIllustratorに，CanvasがPhotoshopに対応します。

Flashとの比較

もうひとつ，Flashとの違いですが，そもそもFlashは全部入りの巨大なアプリケーションプラットフォームです。SVGのようなベクター形式も扱えますし，CanvasのようなBitmapも扱えます。それどころか，外部ファイルとの通信や，ストレージもありますし，動画や音声なども再生できます。（⁠2010年6月時点において）単純に機能で比較すれば，Flashのほうが高機能かつ高速です（ただしこれらは開発者からみたメリットでしかなく，利用者の視点はまた別の問題です⁠）⁠。

ブラウザとSVG

SVGはXMLであり，すなわちマークアップによって記述されます。XHTMLではHTMLとSVGを混在させることが可能ですし，HTML5ではSVGをHTML中に直接記述（インラインSVG）できるように定義されました。インラインSVGをサポートしているのは2010年6月時点ではInternet Explorer 9（Platform Preview版）とFirefox4.0b2pre（minefield）だけですが，近いうちにほかのブラウザもサポートすると思われます。

また，SVGはDOMの延長としてJavaScriptから各要素を操作することが可能です。そのため，一度描画した図を動かすことが容易にできます。

SVGをブラウザで表示する方法

SVGをブラウザで表示する方法にはいくつか種類があります。

objectタグでの埋め込み

最も手軽にsvgを表示する方法です。次のように，objectタグにtype="image/svg+xml"を指定し，data属性にsvgファイルのパスを指定します。

<object data="sample.svg" type="image/svg+xml"></object>

svg対応ブラウザはすべて対応している上に，svg非対応のブラウザ向けのコンテンツを提供しやすいところはメリットですが，object内のsvgはインラインフレームと同様に，別のウィンドウとして扱われるため外側のコンテンツから（主にJavaScriptから）扱いにくいというデメリットもあります。

dataスキームでの埋め込み

こちらも比較的手軽な方法です。img要素のsrc属性，CSSのbackground-imageなど，データスキームで画像を表示できる場合，そのデータとしてSVGを流しこむことができます。特にCSSのbackground-imageとして表示すれば，その名の通り背景としてSVGを利用することができます。

しかし，残念なことにこの方法はFirefoxがサポートしていません。