HTML5の時代になってSVGにも注目が集まっていますが、個人的に思うのはAdobeはその何年も前からSVGに取り組んでいたなということです。IEで使えるSVGプラグインビューワーも早い段階から出していましたし、IllustratorもSVG書き出しを相当前のバージョンからサポートしています。 そんな中、AdobeがさらなるSVG関連ソフトウェアをリリースしました。それがSnap.svgです。 Snap.svgはSVGとJavaScriptを結びつけるライブラリになります。クリックやマウスオーバーなどのイベントを使ってアニメーションを実行したりできるようになります。 一例のコーヒーメーカー。選択したコーヒーの種類によってその配分が表示されます。 こちらはすごろく風。実際にゲームを遊べる訳ではありませんが、マウスオーバーで蛇のような生き物が顔をのぞかせたりします。 こちらは飛行機。スタートはオーストラリアです。clickと書かれた部分をクリックします。 ブーンと飛行機が飛んでいって、カリフォルニアに到着します。 その他のアニメーション。マウスオーバーやクリックによるアニメーションが行われます。 デスクトップは当然としてスマートフォンではどうなのか、iOS 7で試してみました。 コーヒーメーカ。ちゃんとアニメーションします。 マウスオーバーはありませんがタップするとアニメーションが行われます。 残念ながら地図のデモは動きませんでした。しかしほぼほぼ問題はないようです。アニメーションもスムーズですし、タップアクションであれば適切に認識されます。 ちなみに既にRaphaëlというSVGライブラリが存在する中でAdobe社がなぜSnap.svgをリリースしたかなのですが、Adobe社によるとRaphaëlはIE6からサポートしているため広範囲で使える一方、機能制限も多くなってしまっているようです。そこでSnap.svgでは先進のブラウザしかサポートしない一方で、より優れた機能を実現できるようにしています。 例えば以下のような機能です。

  • マスキング
  • クリッピング
  • パターン
  • 完全なグラデーション
  • グループ化

もう一つの特徴として挙げているのはSVGファイルと連携させることで、プログラムで生成するタイプではないと言うことです。生成しないのであればIllustratorやInkscape、Sketchといったソフトウェアと組み合わせて使う形になります。 最後にSnap.svgはアニメーションをサポートしています。JavaScriptと組み合わせたインタラクティブなアニメーションを実現するのにSnap.svgは最適な選択と言えるのではないでしょうか。 Snap.svgはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 Snap.svg - Home http://snapsvg.io/ adobe-webplatform/Snap.svg https://github.com/adobe-webplatform/Snap.svg