SVGはドロー系描画機能として今後、ますます高画素化の進むディスプレイに対するリソースの肥大化問題の解決策として注目が集まっていくでしょう。PNGやJPEG画像ではキャンバスサイズが大きくなるにつれてファイルサイズが肥大化しますが、SVGはベクターデータなのでファイルサイズは変わりません。
しかしSVGの魅力は静的な表示を行うだけに限りません。JavaScriptで内容を変えたり、動かしたりできます。今回はそうしたSVGアニメーションを助ける各種ライブラリを紹介します。
flubber
特定の形から別な形へ自然にモーフィングできるライブラリです。一つから一つの場合、一つから複数（またはその逆）とアニメーションが可能です。
veltman/flubber: Tools for smoother shape animations.
Shape Shifter
二つのSVGファイルを指定して、アニメーションを生成してくれるライブラリです。Web上でファイルを指定できるので、プレビューを見ながら細かく調整ができます。
zPath.js
一つのSVGファイルを描画するアニメーションを生成します。描画の方法についても数パターン用意されています。
ZetCoby/zPath.js: A jquery plugin that will animate/draw SVG
mo · js
SVGベースのモーションアニメーションを生成するライブラリです。派手なアニメーションもできますが、クリック時に光らせたり跳ねるような、ちょっとしたアニメーションも可能です。
mo · js – Motion Graphics For The Web
Primitive
指定した写真を幾何学模様で描くソフトウェアです。その描画されていく過程をSVGファイルで保存できます。
fogleman/primitive: Reproducing images with geometric primitives.
Yarrow
矢印をアニメーションで表示したり、ツールチップを表示したりします。グラフなどと連携することによって見た目にインパクトのあるプレゼンテーションが実現できます。
Yarrow — svg animated arrow pointer and tooltip
jQuery DrawSVG
jQueryのプラグインとして提供されています。SVGの内容をアニメーションしながら描画するライブラリです。
Animate Plus
CSS3またはSVGでアニメーションを実現します。イージングが用意されているので、細かい動きを実装することなくアニメーションが実現できます。
bendc/animateplus: CSS and SVG animation library
SVG Morpheus
指定したアイコンが別なアイコンに変化するアニメーションを生成します。アイコンとイージング、遅延、回転などの設定だけなのですぐに使いこなせるでしょう。
vivus
SVGファイルを解析し、その描画をアニメーションしながら順番に行っていきます。
maxwellito/vivus: JavaScript library to make drawing animation on SVG
Walkway
基本的に一筆書きの容量で既存のSVGファイルからアニメーションを生成します。
ConnorAtherton/walkway: An easy way to animate SVG elements.
Letterbolt
SVGで文字を描くライブラリです。スクロールなどのイベントに合わせてスムーズに文字が描かれます。
Loading…
SVGでローディング表示を行います。ドットやラジオなど、8種類のアニメーションが用意されています。
jxnblk/loading: This could take a while
Animated SVG Icons
20種類を超えるアニメーションするSVGアイコンを提供しています。Snap.svgというライブラリを用いています。
Lazy Line Painter
一筆書きでアニメーションするライブラリです。SVGファイルは先頭と終端がなければならず、後はファイルを指定するだけでアニメーションしながら描画していきます。jQuery/Raphaëlが必要です。
camoconnell/lazy-line-painter: A jQuery plugin for path animation using the CSS –
SVGはマウスイベントなどが利用でき、形や色を変えたりできます。ユーザイベントに反応することでユーザビリティを高めたり、注目して欲しい情報を目立たせる効果が期待できるでしょう。