SVGアニメーションライブラリVivusのWEBツールを使うととても簡単にアニメーションが作れる。

cssを意識しなくてアニメーションが作れるのはすごく便利ですね。

DEMO

作り方

1.Illustratorでベクタデータをペンで描いて、アートボードのサイズをSVGのサイズに設定して書き出しを行う

2.Vivusを開いて先ほど作成したsvgファイルをドラッグ＆ドロップで放り込む
https://maxwellito.github.io/vivus-instant/

なめらかなアニメーションはこんな感じで設定。

3.設定したらUpdateボタンを押してSVGアニメーションを確認してDownloadボタンでアニメーション化したSVGを落とす。

※アニメーションしない場合はリロード

対応ブラウザはChrome/Firefox/Safari/Edge。
IE11以下で対応が必要な場合はアニメーションSVGとは別にアニメーションが無い通常のSVGに差し替えて表示するようにjsで振り分ければよいかな。