こちらの記事の内容を自分も試してみたので忘備録。
準備
- イラレでsvg画像を作成(変形後と変形前の2種類)
- 作成した画像のsvgパスを取得(イラレで別名保存時に、「パスを表示する」的なボタンがあるのでそこから取得できる)
- 使うのは、取得したパスのみ。
DEMO
CODEPENをご覧ください 
See the Pen svg animation with Snap.svg.js by takuchan (@takuchan) on CodePen.
はまったとこ
- 変形後と変形前でアンカーの数が異なると、アニメーションがぐちゃぐちゃになる。
- jsでpathをappendしようと考え、
document.createElement('path');
としていたが、pathを作るときは、
document.createElementNS("http://www.w3.org/2000/svg","path");
としないと、正しいSVGElementのpathとして生成されない。
感想
- Snap.svgを使うと今回のようなアニメーションは簡単に実装できる。
- 「svg画像の調整→パスの取得→コードにパスの埋め込み→svg画像の調整」という作業をデザイナー、コーダー間でやり取りすると、かなり手間が増える気がする。
- コーダーもイラレ(ベジェ曲線)が使いこなせないと、きれいなアニメーションは難しい。
- 逆に、調整はパスを変更するだけなので、コーダーじゃなくてもできる？
追記
- IE11(VirtualBox)で確認したところ、svgのサイズが幅いっぱいにならずに、常に固定サイズで表示されてしまうという問題があった。
- これは、バグというよりも、
単にSVG1.1の仕様をIEがまだ実装していないだけであり、実は、IEはCSS2.1の仕様に沿ってフォールバックを適切に（？）働かせている
ということらしい。(参考：http://asamuzak.jp/html/483)
結論
- svgに対してheightを100%で当てていたが、これだとうまく高さが効かない。
- svgの親要素のpadding-topに表示したいsvgのアスペクト比を当ててあげる(imgでよくやるやつ)とうまく高さが当たったように見える。(IE11, IE10, IE9, Safari, Firefox, Chrome, ios Safari(9.2), ios Chrome)