JavaScriptを使って簡単にSVG(とVML)を描画するためのライブラリとしてRaphael.jsというものがあります。このライブラリを使うと簡単にSVGを描画してブラウザに表示することができます。jQueryなど他のライブラリに依存しておらず、単体だとファイルサイズが大きい(82kb)のが難点ですが、ベクターグラフィックを描きたいときは使いやすいライブラリだと思います。IE6でも描画できます。

このサイトのWorkページにSVGを使ったドローツールというのがありますが、こちらはRaphael.jsではなくjQuery SVGを使っています。どちらのライブラリも深く使ったわけではありませんが、Raphael.jsの方がコードがすっきりして分かりやすい印象です。

以下簡単なコードでRaphael.jsの記述方法を紹介します。

//svgStageというIDの要素に300×300のSVG描画領域を作成
var paper = Raphael(document.getElementById('svgStage'), 300, 300);

//円描きます
var circle = paper.circle(50, 70, 50);

//円を#0000aaで塗りつぶします
circle.attr('fill', '#0000aa');

//矩形描きます
var rect = paper.rect(100, 100, 50, 50)
				.attr({ //メソッドチェーンできます
					'fill' : '#ffcccc',
					'stroke' : '#aa0000'
				}) 
				.click(function() { //イベントも簡単
					this.animate({ //もちろんアニメーションも
						'width' : 100
					}, 200);
				});

Raphael.jsは円や矩形を描くだけでなく、イベントやアニメーションも簡単に作れます。jQueryの記述方法にも似ているので、特にjQueryユーザーにはより分かりやすいのではないでしょうか。 図形描画にはHTML5のCnavasもありますが、作るものによってはSVGの方が適している場合もあると思います。特にドラッグ処理なんかはSVGのが楽です。

というわけでRaphael.jsを試してみるついでに図形を描画できるサンプルを作ってみました。 SVG女子ぐらいインパクトのあるものが作れればいいのですが、とりあえずのサンプルです。

Raphael.jsを使った図形を描画できるサンプル