|分類|CSS|SMIL|JavaScript|
|---|---|---|---|---|
|ストロークアニメーション(書き順)|〇|〇|〇|
|モーフィングアニメーション|×|〇|〇|
|単純なアニメーション(プロパティ変更)|〇|〇|〇|
|パスアニメーション|×|〇|〇|

CSSで動かす

CSSプロパティの変更で対応できるシンプルなアニメーションで、IE 11に対応不要な場合に有効です。

SMILで動かす

アニメーションの種類	使うタグ
属性値の変化	animateタグ
CSSのTransforms系の変形(回転・移動・拡縮など)	animatetransformタグ
パスに沿った移動	animatemotionタグ

スマホサイト用サイトでSVGアニメーションを実装する場合に有効です。

JavaScriptからDOMを操作することでアニメーションできます。

メリット	内容
表現力が高い	あらゆるアニメーションが可能(塗りと線の変化、拡縮・回転・移動、パスの変形、パスに沿ったアニメーション等) CSSプロパティやSMILで実現できたものは、すべて実現できる
対象ブラウザが多い	IE 11、Microsoft Edgeを含む主要ブラウザーで動作する

ライブラリを使用することで、デメリットである実装の難易度を下げることができます。

JavaScriptによるSVGアニメーションの記事書きました。