HTML5が正式勧告になり、SVGの利用も今後ますます広がっていくものと思われます。ベクターベースのドローができるので拡大表示したとしても綺麗に描けるのが特徴です。さらにもう一つ、アニメーションが書けるというのも特徴です。 とはいえSVGアニメーションを作るというのはそうそう簡単ではありません。もうちょっとシンプルなアニメーションでよければ、Walkway.jsを使ってみるのはいかがでしょう。

Walkway.jsの使い方

Walkway.jsを使ったサンプルです。できあがったSVGから、アニメーションを自動生成しています。

Walkway.jsの場合、すでにあるSVGファイル(が入ったHTML)からアニメーションを生成しています。それだけに作るのは簡単と言えそうです。あまり複雑なドローを描くのは難しそうですが、グラフや簡単なオブジェクトであればアニメーションしながら綺麗に描いてくれるのではないでしょうか。

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

Walkway.js Example ConnorAtherton/walkway