Snap.svg : ファイルの画像も扱える SVG 用 JavaScript ライブラリー

Adobe が SVG 用 の JavaScript ライブラリー である Snap.svg を公開しました。 これは SVG のファイルも扱えて、とてもよさげだったので、 今回はこの Snap.svg について紹介したいと思います。

Snap.svg とは

Snap.svg は SVG(Scalable Vector Graphics) を扱うための JavaScript ライブラリーです。 jQuery で DOM を扱うような感覚で、 SVG を使えるようにするというスタイルらしいです。
これは Apache 2 License のオープンソースで開発されています。 ただ、 JavaScript で SVG を扱うライブラリーには Raphaël というメジャーなライブラリーが既にあります。 Why Snap のページによるとRaphaël との違いは次の 2 点です。
  1. モダンブラウザーがターゲット
    • Raphaël がなるべく古いブラウザーでも動作させるというスタンスに対し、 Snap.svg はターゲットをモダンブラウザーにすることで、高度な機能を使えるようになる。
  2. SVG ファイルも扱える
    • Snap.svg の API で書いた SVG だけでなく、 ファイルに書かれた SVG も同様に扱える。
私が特にいいなと感じたのは 2 番目の SVG ファイルも扱える点です。
SVG 画像を 0 から JavaScript のコードで書こうとするとしんどいです。 SVG ファイルをロードして、それを操作できると非常に便利だと思います。
Snap.svg では、描画ツールで書いた SVG 画像を使うことが可能になります。 これで Illustrator を使う人が増えれば、 Adobe も嬉しいのでしょう。

使い方

まず、 Snap.svg のホームページ の [Download] のボタンを選択して、 Snap.svg-X.X.X.zip のファイルをダウンロードします。

この圧縮ファイルの dist フォルダー以下にある snap.svg.js または snap.svg-min.js を使います。 厳密にどちらを使えばいいかはよくわかりませんでしたが、 簡単な処理であれば、 min の方で良さそうです。


API の使い方は Getting Started のページがわかりやすいので、そちらをみて下さい。 また、 圧縮ファイルのなかの demos フォルダーの中にも豊富なサンプルがあります。


ここでは簡単なサンプルを 1 つ挙げてみたいと思います。
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <!-- 次の meta タグによって最新のレンダリングモードを指定 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- Snap.svg のファイルをロード -->
        <script src="snap.svg-min.js"></script>
    </head>
    <body>
        <script>
            // サイズを指定して Snap のオブジェクトを作成
            // svg の html 要素を指定することもできる。
            var s = Snap(400, 250);

            // 円の要素を作成。 デフォルトは黒の塗りつぶし
            var smallCircle = s.circle(70, 100, 40);

            // 要素を作成した後、属性で色などを変えている
            var bigCircle = s.circle(140, 100, 50);
            bigCircle.attr({
                fill: "#bada55",
                stroke: "#000",
                strokeWidth: 5
            });

            // SVG ファイルのロード
            Snap.load("mascot.svg", function (f) {
                // ファイルの画像の中から g の要素を取り出して、
                // 色を変えて追加
                var g = f.select("g");
                f.selectAll("polygon[fill='#09B39C']").attr({
                    fill: "#fc0"
                })
                s.append(g);
                g.drag();
            });
        </script>
    </body>
</html>
因みに IE が SVG にちゃんと対応したのは IE9 からですが、 IE9 以上でも実際のバージョンより古いバージョンとして動作することがあります。 そうならないための記述もヘッダー部に追加しています。

関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
33位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
3位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

04月 | 2017年05月 | 06月
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。