SVG

SVG（Scalable Vector Graphics）は、Webページ上でベクターグラフィックを扱う為のマークアップ言語です。 ベクターなので拡縮してもビットマップデータのように劣化しないのが特徴で、 アイコンやイラスト・アニメーション等で幅広く活躍できます。

<svg width="40" height="40">
    <path d="M16,22.375L7.116,28.83l3.396-10.438l-8.883-6.458l10.979,0.002L16.002,1.5l3.391,10.434h10.981l-8.886,6.457l3.396,10.439L16,22.375L16,22.375z" fill="black"></path>
</svg>

このコードをHTMLに挿入すると、ベクターで描かれた星印が表示されます。 上で使用されている path の他、rect や circle などを使って様々なグラフィックを描く事が出来ます。

IEではSVGをサポートするのがバージョン9以降な為、 旧来より実装されていた VML（Vector Markup Language）で代用されたりします。

Raphael

http://raphaeljs.com/

Raphael は比較的老舗なべクターグラフィックライブラリで、 SVGライブラリの中ではデファクトスタンダードとの呼び声が高い物です。 SVGが使える環境ならばSVGを使い、そうでない場合はVMLで代用してベクターコンテンツを扱う事ができます。

<div id="canvas"></div>
<script>

// #canvas にキャンバスを生成する
var paper = Raphael("canvas");

// キャンバスに円を描く
var circle = paper.circle(24, 24, 16);
circle.attr({
    "fill": "#c00",
    "stroke-width": 0
});

</script>

Raphael() でキャンバスを生成し、 そのキャンバスに対して circle / rect / path などを使用してグラフィックを描きます。

Raphael で描かれた図形要素には、属性を編集する attr() の他、 各種イベントハンドラを設定する為のメソッド等が実装されています。

// マウスオーバーイベントを設定する
circle.hover(
    function(){
        this.animate({
            "fill": "#00c"
        }, 500);
    },
    function(){
        this.animate({
            "fill": "#c00"
        }, 500);
    }
);

// クリックイベントを設定する
button.click(function(){
    console.log("click");
});

さながら jQuery のSVG版といった感覚で使えます。

Snap.svg

http://snapsvg.io/

Snap.svg はRaphaelの作者が開発し、Adobe からリリースされた生まれて間もないプロジェクトです。 （2013/10/23 に初リリースされています。）

最も大きな違いは、snap.svg は SVG をサポートする環境の為だけのもので、 VMLによる古い環境へのサポートは一切しないと宣言している点です。 そうすることで、SVG にあって VML にはないような先進的な機能を利用出来る為です。 また、VML対応を無くす事によりライブラリ自体の軽量化も図れている模様です。

開発者が同じなだけあり、使い方はRaphaelからほぼ変わりません。（これは素晴らしいことです） 試しに Raphael での例と同じ処理をしてみましょう。

<svg id="canvas"></svg>
<script>
    // 対象要素は svg 要素である必要があります
    var paper = Snap("#canvas");
    var circle = paper.circle(24, 24, 16);
    circle.attr({
        "fill": "#c00",
        "stroke-width": 0
    });
    circle.hover(
        function(){
            this.animate({
                "fill": "#00c"
            }, 500);
        },
        function(){
            this.animate({
                "fill": "#c00"
            }, 500);
        }
    );
    circle.click(function(){
        console.log("click");
    });
</script>

Raphael() が Snap() に変わったことと、渡す要素が svg 要素である必要がある事をのぞいて、 間違い探しの問題かと思うほどにほぼ一致しています。

また、Raphael にはなかった機能のひとつとして、「外部SVGリソースのインポート」があります。 外部SVGファイルをAjaxで取得し、その結果をコールバックで展開する事が出来ます。

Snap.load("external.svg", function(f){ ... });

他にもマスキングやパターンのクリッピングなど先鋭的な機能が揃えられています。 公式のチュートリアル ではコードを追いながら使い方を学ぶ事が出来ます。 ここのページャーのアニメーションも気が利いていてかわいいですね。

Raphael がそうであったように、新世代のSVGライブラリのスタンダードになりそうな予感がしますね。

参考資料

• Scalable Vector Graphics – Wikipedia
• SVG | MDN
• W3C SVG Working Group
• Raphaël—JavaScript Library
• Snap.svg – Home

シンプルな例

まずはシンプルな例から。
紙に円を描き、マウスでクリックされた時になんらかの処理を行います。

(function(){
    var paper, myCircle, onClick ;

    /**
     * 紙に円を描きます。
     * myCircleには、Elementオブジェクトが格納されます。
     */
    paper = new Raphael( "paper", 640, 480 );
    myCircle = paper.circle( 100, 100, 32 )
        .attr( { fill : "#345", stroke : "none" } );

    /**
     * Element.click() で
     * マウスクリックイベントのハンドラを設定できます。
     * ハンドラ内のthisはElementオブジェクトです。
     */
    myCircle.click( function(){
        console.log( this.type ); // => "circle"
        alert( "さわんな！" );
    });

})();

Element.click() メソッドの引数に関数を渡すだけなので、とても簡単。

円に限らず、ほとんどのシェイプ描画メソッドはElementオブジェクトを返します。
イベントやアニメーションをいじりたい場合は、
この例での変数「myCircle」のように返り値を格納しておくと良いですね。
勿論、メソッドチェーンで一気に書いてしまう事もできます。

paper.circle( 100, 100, 32 )
    .attr( { fill : "#345", stroke : "none" } )
    .click( function(){
        alert( "さわんな！" );
    });

イベントハンドラの登録解除

設定したイベントハンドラを解除するのは、
そのメソッドに接頭辞「un」をつけたメソッドを使います。
例えばclick() で登録したハンドラの登録解除は、unclick() を使用します。

/**
 * click() で登録
 */
var onClick = function(){ alert("さわんな！"); };
myCircle.click( onClick );

/**
 * unclick() で登録解除
 */
myCircle.unclick( onClick ); // もうさわっても怒られません。

イベントの色々

clickの他にも様々なマウスイベント用のメソッドが用意されています。

おなじみのイベント

まず、これらのおなじみの方々。
恐らく名前を見るだけで、どんな役割なのかすぐに分かることでしょう。

• click （クリック）
• dblclick （ダブルクリック）
• mousedown （マウスダウン）
• mousemove （マウスムーブ）
• mosueout （マウスアウト）
• mouseover （マウスオーバー）
• mouseup （マウスアップ）

タッチ関係のイベント

スマートフォン向けの、タッチイベントも実装されています。

• touchcancel （タッチキャンセル）
• touchend （タッチエンド）
• touchmove （タッチムーブ）
• touchstart （タッチスタート）

jQueryのような、hover()

jQuery.hover() は、マウスが入ってきた時と離れていく時のハンドラを
同時に設定する事が出来る便利なメソッドですが、
それとほぼ同じ役割をし、名前も同じ hover() メソッドが用意されています。

Element.hover( f_in, f_out );

f_in (Function) マウスが入ってきた時の処理
f_out (Function) マウスが離れていく時の処理

/**
 * マウスオーバーで塗り色を変えるサンプル。
 */
myCircle.hover(
    function(){
        console.log( "くんな！" );
        this.attr( "fill", "#c00" );
    },
    function(){
        console.log( "にげんな！" );
        this.attr( "fill", "#345" );
    }
);

drag() で要素のドラッグを実装する

Element.drag() を使う事で、要素のドラッグに必要な
マウスダウン時、マウスムーブ時、マウスアップ時のイベントをまとめて設定できます。
ただし、ActionScriptのstartDrag()のように要素の移動まで面倒みてくれるわけではないので、
各イベントハンドラにそれらを実装してあげる必要があります。

Element.drag()

Element.drag( onmove, onstart, onend );

onmove (Function) マウスムーブ時の処理
onstart (Function) ドラッグ開始時の処理（マウスダウン）
onend (Function) ドラッグ終了時の処理（マウスアップ）

これらのコールバックは全て渡される引数が違うので注意が必要です。
特におさえておくべきは、第一引数のonmoveです。

onmove

onmove : function( dx, dy, x, y, event )

dx : ドラッグ開始位置からの相対的座標（x）
dy : ドラッグ開始位置からの相対的座標（y）
x : 現在のx座標
y : 現在のy座標
event : イベントオブジェクト

わざわざ相対的座標を渡しているのは、
マウス座標をそのまま要素のx,y座標に代入してしまうと
予想と違う位置に要素が移動してしまう為。
どの部分をクリックしてドラッグしても、
要素はマウスの右下にぶらさがる形になってしまいますね。

つまり、こんなかんじになるでしょう。

1. onstartでドラッグ前の要素の座標を記録しておく
2. onmoveで、1.で記録した座標と相対的座標をあわせて計算

(function(){
    var paper, myRect;

    paper = new Raphael( "paper", 640, 480 );
    myRect = paper.rect( 100, 100, 32, 32 )
        .attr( { fill : "#345", stroke : "none" } );

    myRect.drag(
        /**
         * マウスムーブ時の処理
         */
        function( dx, dy, x, y, e ){
            /**
             * Element.data() で初期の座標を取り出して
             * dx, dyを加算して移動
             */
            this.attr({
                x : this.data("x") + dx,
                y : this.data("y") + dy
            });
        },
        /**
         * ドラッグ開始時の処理
         */
        function( x, y, e ){
            /**
             * 要素の座標をElement.data()で記録
             */
            this.data( "x", this.attr("x") );
            this.data( "y", this.attr("y") );
            this.attr( "fill", "#c00" );
        },
        /**
         * ドラッグ終了時の処理
         */
        function( e ){
            this.attr( "fill", "#345" );
        }
    );
})();

jQueryのようなdata()が便利

RaphaelのElementオブジェクトには
jQuery.data() と似たような機能が同名のメソッドで実装されていて、
上記のコールバック内で使われているように
情報を保持しておくのに便利です。

// 値の設定
myElement.data( "foo", "bar" );
// 値の取得
console.log( my.Element.data( "foo" ) ); // => bar

デモ

デモをこちらにまとめました。

» はじめてのRaphael(2) : イベント編 via jsFiddle

まとめ

Raphaelは、意外とjQueryのメソッドと共通点があり、
導入にあまり苦労しなさそうで助かります。
描画とイベントが操れれば、簡単なRUIを実現できてしまいますね。

Raphaelとは

RaphaelはSVGで図を描画するためのフレームワークです。
正しくは「Raphaël」と書きますが、
毎度めんどくさいのでRaphaelでいきます。

なにをしてくれるのか

• SVGが動かないクラシックなIE環境の為に、VMLでも出力してくれます。
• イベントやアニメーションまわりも簡単に実装できるようになっています。

特に助かるのがVML対応。
旧ブラウザをサポートしなければならないケースには、
ぜひとも導入したいライブラリですね。

極めてシンプルな例

Rraphaelで図を描画する手順は、ざっくりとこんな感じ。

1. まず紙（paper）を用意する
2. その紙に図を描く。
   
   矩形（rect）や円形（circle）等、基本となるシンプルな図形はステンシルが用意されています。
   
   そうでない物は、フリーハンド（path）で描く事ができます。
3. 描かれた図に、色や線種等のスタイルを設定します。

HTML

<div id="my-paper-0"></div>

JavaScript

(function(){
    /**
    * [1] Raphael()でキャンバス（paper）をつくる
    */
    var paper = Raphael( "my-paper-0", 64, 64 );
    /**
    * [2] circle()で円を描画し、
    * [3] attr()で属性を設定する
    */
    paper.circle( 32, 32, 24 )
       .attr( { fill : "#345", stroke : "none" } );
})();

Raphael() は、Paperというオブジェクトを返します。
図の描画は、そのPaperオブジェクトが持つメソッドを通して行う事になります。

基本図形を描いてみる

矩形（rect）、円形（circle）、楕円形（ellipse）等の基本図形は、
Paperのメソッドを使って簡単に描画する事ができます。

円形

/**
 * Paper.circle( x, y, radius );
 */
paper.circle( 32, 32, 24 );

矩形

/**
 * Paper.rect( x, y, width, height, radius );
 */
paper.rect( 8, 8, 48, 48 ); // 普通の矩形
paper.rect( 8, 8, 48, 48, 8 ); // 半径8の角丸矩形

楕円形

/**
 * Paper.ellipse( x, y, horizontalRadius, virticalRadius );
 */
paper.ellipse( 32, 32, 16, 24 );

Pathで自由に描いてみる

イラレ等の「ペンツール」のような感じで自由に図を描く事ができるのが、
Paper.path()メソッドです。 まずはシンプルな三角形で例を示してみましょう。

/**
 * Paper.path( pathString );
 */
paper.path( "M32,8L56,56H8L32,8Z" );

path() の引数には、SVGで定義されているPath要素のコマンドを渡します。
文法は非常にシンプルで、アルファベット一文字で表されるコマンド毎に切り分けられます。
上記コードのコマンドを分解してみると…

1. “M32,8” : 32,8に移動する（MoveTo）
2. “L56,56” : 現在地から56,56まで線を描画する（LineTo）
3. “H8” : x座標8まで水平線を描画する（HorizontalLineTo）
4. “L32,8” : 32,8まで線を描画する（LineTo）
5. “Z” : パスを閉じる

これらを一気に書いて表した感じですね。

コマンド（抜粋）

M (MoveTo)

座標（x,y）に移動します

L (LineTo)

座標（x,y）まで線を描画します

H (HorizontalLineTo)

座標（x）まで水平線を描画します

V（VirticalLineTo)

座標（y）まで垂直線を描画します

C (CurveTo)

複数の座標をコントロールポイントとして引数に受け取り、ベジェ曲線を描画します。

コマンドを大文字で表記すると、座標を絶対位置として扱い、
小文字で表記すると現在地からの相対位置とします。

それぞれのコマンドについては公式ドキュメントか、SVGの仕様書を参考にしましょう。

• Paths – SVG 1.1 (Second Edition)
• Raphaël Reference

もう少し複雑な例

三角形よりももうすこし複雑な例として、
Pathを使って矢印を描画してみます。

paper.path( "M32,8L56,32L48,40L40,32V56H24V32L16,40L8,32L32,8Z" )
    .attr( { fill : "#345", stroke : "none" } );

デモ

デモをこちらにまとめました。
ご参考までに。

• はじめてのRaphael (1) : お絵かき編 via jsFiddle

まとめ

図形を描くのに色々メソッドやコマンドを覚えたりしなければいけませんが、
恐らくSVGを直に書く際にも役に立つ知識なので、無駄にはならないと思います。

さらに複雑なものを描かなければならない時は、
他の楽な方法がありますが、それはまた別の記事で。

デモ

デモページ

円グラフ上をマウスオーバーするとグラフと凡例がアニメーションし、
連動してツールチップが表示されます。
普通に描いたら相当に面倒そうですが、
Raphaelのお陰でかなり短いスクリプトで済んでいます。素晴らしい！

デモのソースを見て頂くのが一番手っ取り早いですが、
要点だけ簡単に掻い摘んでみます。

ライブラリのロード

<script type="text/javascript" src="raphael.js" charset="utf-8"></script>
<script type="text/javascript" src="g.raphael.js" charset="utf-8"></script>
<script type="text/javascript" src="g.pie.js" charset="utf-8"></script>

使用するライブラリは、まずはraphael.js本体。
それからグラフ描画プラグインの、g.raphael.jsと、
描きたいグラフのJSファイル（この場合は円グラフ用のg.pie.js）を読み込みます。
それぞれ、公式からダウンロードします。

• Raphael公式 : Raphaël—JavaScript Library
• gRaphael公式 : gRaphaël—Charting JavaScript Library

Raphaelオブジェクトを生成する

var r = Raphael("holder",640,480);

Raphaelを使用するにあたって必ず必要になる処理です。
第一引数の”holder”は、描画されるベクターオブジェクトを格納するエレメントのIDを入れましょう。
第二・第三引数はお察しの通り、width/heightです。
勿論、格納する為のエレメントは先に用意されている必要があります。

<div id="holder"></div>

Raphaelオブジェクトに円グラフを追加する

var pie = r.g.piechart( 320, 240, 150, values, { legend:legends });

第一・第二引数は中心点の座標、第三引数は半径です。
valuesにはグラフの元になる値を配列にして渡します。
legendsには凡例に使うテキストを、これまた配列にして渡してあげましょう。

マウスオーバー/アウト時のエフェクトを追加する

pie.hover( function(){
    // マウスオーバー時のエフェクト
}, function(){
    // マウスアウト時のエフェクト
} );

第一・第二引数は共にfunctionを受け取り、それぞれがマウスオーバー時/アウト時に呼ばれます。

尚、gRaphaelについては2010年7月13日現在、ドキュメントがまだ整備されていません。
ですので、実際にどのように書けば良いのかは公式のデモのソースを読んで
使ってみたい効果を拾って試行錯誤するしかありません。
「遅くなってごめんね！がんばってるからね！」と書いてあるので期待しましょう。

書き方次第で様々な効果が得られそうなので、なかなか面白いライブラリです。
統計画面等をgRaphaelで綺麗に作ったら喜んでもらえるかもしれませんね。