ライブラリのダウンロード

下記公式サイトからダウンロードしてください。

Raphael_JavaScript Library

解凍したフォルダの中にある「raphael-min.js」を読み込みます。

簡単な図形を描いてみる

最初に簡単な丸を描いてみます。
SVGを描画するための「div」を用意します。

html

	<div id="svg"></div>
	

cssで適当な大きさに設定します。

css

	#svg {
		width: 590px;
		height: 300px;
		background: #eee;
	}
	

最後にjsです。

JavaScript

	<script type="text/javascript" src="raphael-min.js"></script>
	<script type="text/javascript">
	window.onload = function () {
		//ステージの設定
		var stageW = 590, stageH = 300;
		var paper = Raphael("svg", stageW, stageH);
		//円を描画（x:150, y:100の位置にサイズ50）
		var circle = paper.circle(150, 100, 50);
	};
	</script>
	

できました。
でも、黒い線で描かれているだけなのでものたりないですね。
線の色を変えたり、円の中を塗りつぶしたりしてみましょう。

先ほどの「var circle … 」の部分を下記のようにします。

JavaScript

	var circle = paper
		.circle(150, 100, 50)
		.attr({
			//塗りつぶし
			'fill' : '#4697D0',
			//線の色
			'stroke' : '#B1D2EB',
			//線の太さ
			'stroke-width' : 6
		});
	

四角も簡単に描けます。

	// x:200, y:200, 幅:60, 高さ:60, 角丸:10
	var rect = paper.rect(200, 200, 60, 60, 10);
	

線を引いてみる

線は「path」メソッドで描けます。
四角、丸以外の図形もこのメソッドで作成することになります。

	// x:30, y:30 を始点として x150, y150 まで線を描画
	var line = paper.path('M100,250 L250,50');
	

Mが開始地点でLで指定した地点まで線が描画されます。
続けて線を引きたい場合は空欄を空け、同じようにx,yを指定します。

	// さらに x400, y250 まで線を描画
	var line = paper.path('M100,250 L250,50 400,250');
	

この時点で良い感じに三角形ぽくなってきたので最後にこの線を閉じてみましょう。
線を閉じたい場合は最後に「z」を追加します。
また、ラインも円と同じように「attr」を設定することで色などを付けることができます。

	var line = paper
		.path('M100,250 L250,50 400,250 z')
		.attr({
			'fill' : '#FF9999',
			'stroke' : '#FFD2D2',
			'stroke-width' : 6
		});
	

動かしてみる

Raphael.jsはアニメーションも簡単にできます。
最初に作成した丸を動かしてみましょう。

	// x:400, y200 に速度:600 で移動
	circle.animate({
		'cx' : 400,
		'cy' : 200
	}, 600);
	

四角だったら「x,y」で動かすんですね。

	rect.animate({
		'x' : 400,
		'y' : 100,
		'width' : 150,
		'height' : 150
	}, 600);
	

アニメーションが終わったら処理を実行する

アニメーションが終わった後、何か処理をしたい場合「animate」の第3引数に記述します。
x400まできたら、x150に戻るアニメーションは次のようにすればできます。

	circle.animate({
		'cx' : 400
	}, 600, function(){
		this.animate({ 'cx' : 150 }, 600);
	});
	

クリックしたらアニメーションする

最後にイベント処理です。
丸をクリックしたらアニメーションして大きくしてみます。

	circle.click(function() {
		this.animate({
			'r' : 100
		}, 200);
	});
	

基本的な部分の紹介しかできませんでしたが、これだけでも色々とできそうな気がしますね。
Raphael.jsには他にもたくさん機能がありますので、リファレンスなどを参考にしてみてください。