Vivus.jsを使ってsvg画像にアニメーションをつける
↓ここに画像あるはず
↑クリックすると動くよ（たぶん）
自分のwebページを作る時に，友人のHPを参考にして，僕もsvg形式の画像を動かしてみようと思いました．
今回使ったライブラリは
というやつ
たぶんアニメーションに関してはVelocity.jsの方が有名だし機能も多いと思うのだけど，僕がJSにあまり詳しくないのでなるべくシンプルなライブラリを選んだ．
じゃぁ，やってみよう
手順1:svg画像の用意(線のやつ)
このライブラリの注意書きにもあるんだけど，線を使った画像じゃないとダメっぽい．
とりあえず，Adobe Illustratorとかincscapeとかでsvgの画像を作ろう！
例としてこんな感じの画像を作った
これをsvg形式で書き出すとこんな感じになる
たぶん画像として出ちゃう気がするので，view Rawで中身を見てみてください
Illustratorで書き出すと<g>とかでグループ化されてたり<title>とかついたりするけど，その辺は削除しても大丈夫！です！
手順2:Vivus.jsを読み込めるようにしておく
JavaScriptを使う時によくある感じで，スクリプトを落としてきて読み込める感じにしておきます．
ソースはここから落とせます．https://github.com/maxwellito/vivus
手順3:インラインsvgとしてhtmlの中に組み込む
普通にhtmlの中の要素としてsvgを埋め込みます
この時にsvgの中にidとか動作させるスクリプトを埋め込みましょう
こんな感じ
そうすると！動く！！
以上です．
