HTML5に実装されているグラフィック関連機能はCanvasだけではありません。もう１つ、重要なグラフィック機能が用意されています。それが「SVG（Scalable Vector Graphics）」です。

SVGは、ベクターグラフィックを扱うための技術です。ベクターグラフィックというのは、「図形を形状情報として管理し表示する方式」のものです。――普通のイメージのようなもの（デジカメの写真など）は、ビットマップグラフィックです。１つ１つの点が何色かという情報としてグラフィックを管理します。ですから、例えば拡大したりするとドットが大きくなり、全体として粗いイメージになってしまいます。

ベクターグラフィックは、例えば「◯◯の位置から△△の大きさで◇◇の図形を表示する」というように、図形の位置や大きさ、色、線の太さなどといった情報を保管し、表示する際にはそれに基づいて描画をします。要するに、表示をするたびに毎回すべてのグラフィックを描き直しているわけですね。このため、図形を拡大してもイメージは粗くならず、常になめらかに表示されます。

SVGは、XMLをベースとした記述言語です。あらかじめ定義されたタグを使い、グラフィックの情報を定義していき、描画の際にはそれに基づいて図形を描きます。つまり、基本的には「HTMLを拡張した機能」ではないのです（あくまで「基本的」には）。HTMLとは本来関係ない技術で、XMLファイルを用意してそこにSVGのコードを書き、SVGを表示する専用のプログラムで開けば図形が表示される、そういうものです。（現在の最新WebブラウザでSVGに対応しているものは、SVGのXMLファイルを開いてそのままグラフィックを表示させることができます）

本来、HTMLとは直接関係がなかった感のあるSVGが、最近になって再注目されるようになったのは、Internet ExplorerがSVGに対応したことが大きいでしょう。最近になるまで、ベクターグラフィックの技術はいくつかのものがあり、それぞれの陣営に分かれて縄張り争いをしていたのですね。それが、反SVG陣営だったマイクロソフトが、IE9からSVGをサポートすることにしたことで、一挙に「ベクターグラフィックはSVG」にまとまったのです。

このSVGそのものはHTMLとは異なる技術ですが、これをHTMLから利用する場合、現時点では２通りのやり方があります。以下に整理しておくと――。

1. あらかじめ用意しておいたSVGファイルをHTML内に埋め込み表示させる方式。これは、HTML5の技術というより、それ以前からあった「外部のプログラムを埋め込むための機能」の応用です。例えば、FlashやJavaアプレット、Active Xのコントロールなどを埋めこんで表示させるための機能がHTMLには備わっていました。それを更に応用してSVGを埋め込みます。

2. もう１つのやり方は、「インラインSVG」と呼ばれるものです。これがHTML5から新たに導入された機能です。インラインSVGは、HTMLのタグの中に、直接、SVGのグラフィックタグを書いて表示させる技術です。

１のやり方は、SVGの基本とも言えるものですが、「HTMLはHTML、SVGはSVG」ときっちり分かれているため、使い勝手などの面でいまいちな感があります。現在、SVGが注目されつつあるのは、２の「インラインSVG」技術による部分が大きいでしょう。HTMLに埋め込むため、HTMLの要素と混在させることができ、またJavaScript内からSVGのオブジェクトとHTMLのDOMオブジェクトの両方を使って処理を記述できます。

ただし、あまりに複雑なグラフィックになると、HTMLのファイル自体が巨大になり、あまり実用的ではなくなります。SVG単体でファイルを用意する場合、ファイルをgzip圧縮して利用することも可能なため、込み入ったグラフィックの場合はインラインSVGを使わず別ファイルにする、というような使いわけをするとよいでしょう。