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

svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。

SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。


デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。


クローンして重ね合わせ。重心の判定、傾けるのも手軽です。


X軸、Y軸のずらし。塗りつぶし。


枠だけを描く、グラデーション(線形、円形)。


クリック、マウスオーバー、画像マスクもできます。


クリックしたオブジェクトだけ色を変更します。


さらにアニメーションも自在に。


プラグインによる拡張もサポート。

svg.jsを使えばアニメーションはもちろんのこと、画像を重ねて表示したり、マウスイベントによって形状や色を変更したりすることもできます。SVGをより活用していく上で欠かせないライブラリになるのではないでしょうか。

svg.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

SVGの普及を後押しするのがRetinaディスプレイに代表される画面の高画質化です。従来のアイコンはPNGでしたが、より鮮明に表示されるようになると解像度をどんどん上げていかないといけません。画像では作成するごとにサイズが大きくなり、リソースの肥大化を招きます。

SVGであれば一つのファイルから全ての解像度に対応した表示ができるようになります。Web Fontもそうですが、データがベクター化していくのは必然的な流れと言えそうです。SVGを活用するライブラリ、サービスは今後需要があるのではないでしょうか。

svg.js - A lightweight JavaScript library for manipulating and animating svg

wout/svg.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2