Raphael.jsって？ - RAPHAELIST

Raphael.jsとは

まずは簡単な説明から。Raphael.js(らふぁえるどっとじぇいえす)は超強力なSVG描画フレームワークです。これを上回るものには今までお会いしたことがありません。IE系でも動作するのがめっちゃいい感じです。

SVGとは

普段ブラウザ上で見る画像を想像してください。これは1ピクセル単位で着色し、その集合体を画像として扱っているのです。あくまで点の集合なので、拡大させていくと点が「コンニチワ！」してしまい、画質が荒くなってしまいます。一方のSVGは、点ではなく図形の集合体を持っています。ここが最大の違いです。Adobe製品で例えるなら画像はPhotoshop、SVGはさしずめIllustratorと考えると分かりやすいかも？

SVGで何ができる？

代表例がグラフや図などの描画でしょう。いくら拡大しても画質が一定なので、万が一、100インチのディスプレイが当たり前の世の中になってもSVGなら安心。縮尺さえ調整すればいいのです。印刷も綺麗なのでまさにうってつけ。グラデーションやパーティクルな表現は画像の方が優位ではあるものの、SVGではアニメーションができるなどの特性もありますので、そこは使い分けになります。

Raphael.jsの準備

まずはRaphael.jsをRaphaël—JavaScript Libraryからダウンロードする必要があります。これを参照すれば、あなたも今日からRaphaelist！ちなみにここにいろんなサンプルがありますので、実際に動かしてフムフムしてください。

あとはこんな感じで普通に参照。

準備完了

さて、これでRaphael.jsを使った描画の準備が完了しました！簡単ですよね。しばらくは簡単なことばかりですので、退屈かもしれません！