SVGを扱えるJavaScriptライブラリまとめ

大画面モニタやRatinaディスプレイの普及により、拡大しても画像が劣化しないベクターグラフィックス（SVG）の利用が増えています。そんなSVGをJavaScriptで簡単に利用できるライブラリをまとめて紹介します。

Snap.svg

Snap.svgはベクターグラフィックに特化し、アニメーション機能も備え、より高度にグラフィックスを操作できるライブラリです。Snap.svgは最新のブラウザ用に設計されていますのでマスキング、クリッピング、パターン、フルグラデーション、グループ機能など最新のSVGの機能をサポートしています。Snap.svgを導入することで、より自在にSVGを扱えるようになるのではないでしょうか。

Snap.svg

jQueryライクな操作 svg.js

svg.jsはjQueryライクに操作できるSVGライブラリです。圧縮時は約53kb程度と軽量になっています。このサイズでベクターグラフィックスのすべての機能とイベントによる描画、アニメーションなどを備えています。jQueryに慣れていれば、SVGが簡単に扱えることでしょう。

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

SVGとCANVAS、WEBGLを利用したい時に Two.js

Two.jsはSVGの他、CanvasやWebGLを利用できるライブラリです。ベクターグラフィックをWebで使用する際の描画方法を選択するのですが、記述方法はそれぞれの描画APIをラップしているので、同様のコードで記述できます。これにより、ブラウザによって使い分ける必要がないので、クロスブラウザ対策として非常に有効なライブラリとなるでしょう。

Two.js

SVGでキーフレームアニメーション BonsaiJS

BonsaiJSはSVGレンダラーを搭載した、キーフレームアニメーションをサポートするライブラリです。パスやグループ、フィルター処理、画像描画にも対応し、モーフィングも可能です。Flashのキーフレームアニメーションの代替えを考えている場合は、利用を検討しても良さそうです。

BonsaiJS – A Graphics Library

まとめ

JavaScriptでSVGグラフィックを利用するにはSVG DOMを利用しますが、そのままでは複雑な要素・プロパティ・メソッドなどを操作する必要があるためコードが煩雑または冗長化してしまいます。今回ご紹介したようなライブラリを利用することでコードが簡素になるばかりではなく、メンテナンス性があがります。ぜひ利用を検討して下さい。