[Raphaël]SVG描画の基本のキ[JavaScript]

夏です！海に行って泳いで、潜りたいです。須藤です。

今回はベクター形式描画ライブラリRaphaël.jsを紹介いたします。
読み方は、ラファエルだと思います。名前かっこいい！
このライブラリは、
Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+
とそこそこ古いブラウザにも対応しているようです。
SVGが表示できないブラウザでは、別のベクター形式に変換して表示させているようです。

まず、ベクター(ベクタ)形式とは？
ベクター形式とは拡大縮小をしても、画像が劣化しない、線をきれいに保つことが出来るものです。
代表的なものとしてSVGがあります。
ベクター形式の対比としてはラスタ形式(ビットマップ画像)と言います。
ラスタ形式は、普段使っている、jpg/png/gifなどがあります。いわゆるピクセルの画像です。
ベクター形式のファイルの中身は、線の曲がり方、太さ、色などを数値で表すことが出来ます。
具体的には、イラストレーターで作ったものや、建築などの図面(CAD)などがあります。

では実際にベクター形式画像(SVG)、webではどこで使われているのか？
と言いますと、あまり使われてません。
アップルのホームページのロゴや、ちょっとしたアイコンや
グラフなどを表示する際に使われたりします。

では、実際にどんなことができるのか、今回は基本的なことを紹介します。

[html]
<script type=”text/javascript” src=”./js/raphael-min.js”></script>
<script type=”text/javascript”>
$(function(){
var paper, test_circle;
/* paper_01 はdivのid 400は描画の範囲の横幅200は高さ */
paper = new Raphael( “paper_01”, 400, 200 );
/* 円の描画 円の中心点(200, 100)を50は半径 */
test_circle = paper.circle( 200, 100, 50 )
/* 色や線の指定 */
.attr( { fill : “#459fff”, stroke : “none” } );
});
</script>
<div id=”paper_01″></div>
[/html]

円を描くだけなら、簡単です。他にも四角形などの図形も描けます。

このライブラリにはイベントやアニメーションが用意されています。
例えば上の図形はマウスを図形の上に乗せるとアニメーションします。
ちなみに図形はイラストレーターで作ったsvgのパスを使っています。

今は、モダンブラウザ向け「Snap.svg」という、JavaScriptライブラリをAdobeが作っています。
このライブラリはRaphaël.jsと同じ作者が開発を行っているようです。
まだまだ、スマホの動作など、不安な所はありますが、今後の行く末をチラチラ見ていきたいです。

今回は簡単な概要ですが、次回からは中身の詳しい説明をしたいと思います。

伊豆七島？下田？真鶴？