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

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

[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.47.42.1363145587.png)
デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。

[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.47.48.1363145591.png)
クローンして重ね合わせ。重心の判定、傾けるのも手軽です。

[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.47.55.1363145595.png)
X軸、Y軸のずらし。塗りつぶし。

[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.48.01.1363145600.png)
枠だけを描く、グラデーション（線形、円形）。

[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.48.09.1363145603.png)
クリック、マウスオーバー、画像マスクもできます。

[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.48.14.1363145607.png)
クリックしたオブジェクトだけ色を変更します。

[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.48.20.1363145611.png)
さらにアニメーションも自在に。

[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.48.29.1363145614.png)
プラグインによる拡張もサポート。

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