SVGというのは「Scalable Vector Graphics」の略。ビットマップではなく、図形の形状データとしてグラフィック情報を保持し描画する方式（いわゆるドロー方式）で、図形を拡大したりしてもドットが荒くなったりせず、常に美しい図形が描かれます。

Webブラウザでグラフィックを描画させる技術としては、このSVGと、HTML5でサポートされている<Canvas>タグの２つがあります。Canvasは、ビットマップグラフィックを高速描画することを考えて作られているのに対し、SVGはベクターグラフィックのための技術という違いがあります。

このSVG、CanvasのようにHTML5からサポートというようなわけではなく、既に普通に使えるものなのです。が、意外とWebの世界では知られていません。その最大の理由は……、例によって例のごとく、「IEが未対応」だからです。まぁ、SVGを利用可能にするプラグインなどは既にあるのですが、やはり「プラグインで対応」となると、どうしても普通に使う、とまではいきません。

また、SVGはXMLで記述された文書であるため、「なんか知らないけど面倒くさそう」と思われている感はあるかも知れません。更には、当初はこの種のフォーマットとして、VMLを推進するマイクロソフト、PGMLを推進するAdobeなど競合するフォーマットがあり、SVGはこれらに押されてしまった……といった事情もあるでしょう。

が、非常に簡単にベクターグラフィクを扱える技術として、SVGはもっと使われていいものだと思います。そこで登場するのが、「Raphaël」です。Raphaëlは、SVGによるグラフィック描画を行うJavaScriptライブラリです。XMLファイルを定義することなく、スクリプトによってグラフィックを自由に作成できます。

なにより、Raphaëlを利用すると、SVG未対応でありSVGファイルを開けないIE(ver.8以降)でも、ちゃんとグラフィックが表示できます。すばらしい！

（※――なお、Webの上のたんこぶであったIEも、次期ver.9から、やっとSVGに対応するということです。ようやくSVGは長かった雌伏の時代から本格的な普及へと一歩踏み出しつつあるのかも知れません）

さて、Raphaëlです。これは、以下のサイトにて配布されています。

http://raphaeljs.com/

ここから、「Download ver.1.3.2(57Kb)」というボタン（バージョンは随時変わります）をクリックすると、ずらーっとJavaScriptのソースコードが表示される（か、ブラウザによってはファイルがダウンロードされます）ので、それをそのまま保存してください。あるいは、「Download」のリンクを右クリックし「リンク先をファイルに保存」メニューで保存してもOKです。

こうして保存したファイルを、使用するWebページのHTMLファイルと同じ場所に配置します。ここでは「raphael-min.js」というファイル名で配置しておくことにします。そしてHTML内に、ファイルを読み込む<script>タグを用意すれば、Raphaëlが使えるようになります。

※ライブラリ読み込みのタグ

<script type="text/javascript"
	src="raphael-min.js"></script>