"SVG" – Alphabetical Advent Calendar 2013

mach3 — Wed, 18 Dec 2013 01:19:02 +0000

“S” は SVG の “S”。

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ライブラリのスタンダードになりそうな予感がしますね。

Snap.svg – Mach3.laBlog

"SVG" – Alphabetical Advent Calendar 2013

SVG

Raphael

Snap.svg

参考資料