PICK UP

Snap.svgを使ってjsでSVGを制御する

LAB

蔵下 雅之

みなさんは画像の拡張子の中で何が好きですか?
写真ならJPEG、イラストならGIF・PNG8、透過したドロップシャドウなども表現できるPNG24
私はPNG8が好きです。

そんな画像の拡張子でSVGというものがあります。
今回はそのSVGをjsで制御できるSnap.svgというライブラリのご紹介です。

そもそもSVGってなんだ?

SVGは画像と言いつつも、実はXMLで記述された文字列なのです。
ですので、SVGがサポートされた環境でないと表示することができません。(IE9以上~)

画像は大きく分けて2種類ある

ベクター画像

画像のパーツごとの頂点や曲がり具合を文字列として持っているので、拡大してもぼけることはありません。
SVGはベクター画像です。

ラスター画像

ベクター画像とは違い、ピクセル単位で色情報をもっていて拡大するとモザイクのようになってぼけてしまいます。
JPEG・GIF・PNGなどがラスター画像です。

Snap.svg

Snap.svg

Adobeがオープンソースとして提供しています。
ワニのサンプルの動きが気持ちよくてワクワクします。

チュートリアルもありますよ。

ソースの中に

M10-5-10,15M15,0,0,15M0-5-20,15

と、SVGのパスコマンドが指定されていたりするので
SVGの知識はあったほうがいいかもしれません。。
私は下記のページを見ながら勉強しました。

10分でわかるSVG 基礎編 (1/5)

Snap.svgのリファレンスが和訳されていたので、こちらを見ながら進めるとわかりやすいです。
ありがたや~
Snap.svgの使い方まとめ

ちょっと触ってみました

実際に何ができるの?
ということで、いくつかサンプル作ってみました。

動作の確認ができた環境

  • IE10以上
    (SVGはIE9からサポートされていますが、微妙に解釈が違う?ようで
    3つ目のサンプルが動きませんでした、、、)
  • firefox・safari・chrome 最新
  • Android4.2.2以上のchorme(端末はXperiaZ)

動きを加える

サンプル

Snap.svgが配布しているサンプルをちょっと改造して、
マウスオーバーでワニたたきのようにガブっとする動きを加えました。

SVGは、あたま・顎・首のようにパーツで分けられるので、それぞれに動きを加えることができます。
回転させるときはパーツの基準点を一つずつ調整して回転させないといけないので、少々調整が難しいです。

各パーツの色を変えてみる

snap-img_04

サンプル

普通のJPEGなどのラスター画像だと、画像の全体にしかクリック領域を設定できないですが、
(mapタグを使えばできますが座標調整が大変ですし、パーツが動いたらアウトでよね。。。)
SVGだと各パーツ・シェイプにクリック領域を指定できるので、こまかく制御できます。

クリッピングマスク

snap-img_05

サンプル

これもSVGのうまみの一つですね。
SVGのみでもちゃんと記述できていればマスクできるのですが、
Snap.svgを使うとjQueryのようにさくっとできちゃいます。
背景の処理などで使えそうですね。

使ってみて思ったこと

よかったところ

パーツごとに制御できるのは楽しい

今までのラスター画像だと、各パーツごとに書き出して、CSSで位置調整して制御する。
という流れでしたが、
そこが1つのファイルでまとめられるのはいいですね。

うーん。。なところ

canvasでいいかも

今回はSVGを操作するとどうなるんだろう?という興味から触ってみましたが、
HTML5・jsでの実装を考えているのであればcanvas(HTML5の機能。jsで図形を描画することなどができ、リッチな表現ができる)の方がいいかもしれません。

学習コストが高い?

SVGを制御するためにSVGのパスコマンドを理解しないといけないし、SVGの挙動にも癖があるような気がします。
直観的ではない呪文のような文字列(パスコマンド)は、なるべくソース内に記述したくないな。。。

動作が重い

これは私個人の実装方法にも問題あると思いますが、少々動作が重いかなと感じました。
スマートフォン(XperiaZ)では表示はされるのですが、、、激重でした。。。

まとめ

いいところも、うーん。。なところもありましたが、
手段の一つとして触っておくぶんにはいいかなと!
SVGの拡大してもぼけないという特性を生かして、appleのサイトのロゴなどに使われていますが、
そういう静的な部分に使うのが一番向いているのかなと思いました。