ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5の時代になってSVGにも注目が集まっていますが、個人的に思うのはAdobeはその何年も前からSVGに取り組んでいたなということです。IEで使えるSVGプラグインビューワーも早い段階から出していましたし、IllustratorもSVG書き出しを相当前のバージョンからサポートしています。

そんな中、AdobeがさらなるSVG関連ソフトウェアをリリースしました。それがSnap.svgです。

Snap.svgはSVGとJavaScriptを結びつけるライブラリになります。クリックやマウスオーバーなどのイベントを使ってアニメーションを実行したりできるようになります。

一例のコーヒーメーカー。選択したコーヒーの種類によってその配分が表示されます。
一例のコーヒーメーカー。選択したコーヒーの種類によってその配分が表示されます。

こちらはすごろく風。実際にゲームを遊べる訳ではありませんが、マウスオーバーで蛇のような生き物が顔をのぞかせたりします。
こちらはすごろく風。実際にゲームを遊べる訳ではありませんが、マウスオーバーで蛇のような生き物が顔をのぞかせたりします。

こちらは飛行機。スタートはオーストラリアです。clickと書かれた部分をクリックします。
こちらは飛行機。スタートはオーストラリアです。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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2