SVGは画像と違いXMLがベースになっている。対応しているブラウザならそのままHTMLに埋め込んだり、CSSを加えたりJavaScriptでIDを指定して操作することができる。

See the Pen SVGでアニメーション by sato4yoshida (@sato4yoshida) on CodePen. 1

これはIllustratorで書きだしたSVGをHTMLに埋め込んで、処理をちょっと変えるJavaScriptを加えたもの。
アートボードが1枚、レイヤーに1コマずつ割り振られている状態
SVG構成
n秒間ごとに各レイヤーのCSSを書き換え、display:none;したりblockにしたりと、GIFアニメと同じ要領でアニメーションしている。 25コマでカバが1周するが、パス自体は13コマ分しかない。 半分は反転させることで再現している。この反転の処理も、CSSのtransformで scaleX(-1); を加えて左右を反転している。 ユーザーの指定やその時の状態でアニメーションを変化させられるなら、すごく面白いことができそうだ。

ポイントをソース解説

SVGの読み込み

HTMLにSVGタグで直接記述している。
SVGの埋め込み
SVGをHTMLへ埋め込む
さすがにソースは長くなる。それにエディターやPCスペックなど編集する環境によってはシンタックスハイライトの処理で死ぬ。

一定間隔で実行する

定番のアレ。setTimeoutで一定間隔で関数実行。
var clockwise = false; // 回る方向
var speed = 120; // 回るスピード
$(function(){
  var guruguru = function() {
    // タイマーをリセット
    clearTimeout(timer);
    // 一定間隔で実行する
    timer = setTimeout(guruguru, speed);
  };
  // 最初は実行する
  guruguru();
});

フレームを入れ替えてアニメーション

タグのstyleを変更して表示非表示を繰り返す。
// 表示させるフレームが何枚目かを計算し、ソレ以外はdisplay:none;で非表示にする
var count = 1;
for(var i = 0;i < svg_child.length;i++) {
  if(svg_child[i].nodeName.toLowerCase() !== 'g'){
    continue;
  }
  if(count === frame_number) {
    svg_child[i].style.display = 'block';
  } else {
    svg_child[i].style.display = 'none';
  }
  count++;
}

色を変える

操作する部分はこの記事を書く直前に作ったからjQueryでやってたり。(ややこしい) 色が指定はSVGの中のpathタグに属性値で。線はstroke、塗りはfillを変更するだけ。
$('path').attr('stroke', '#000000');
$('path').attr('fill', '#FFFFFF');

まとめ

と、タグのCSSを書き換えてGIFアニメと同じような処理をしているだけ。計算が複雑になるけどパスの数値を直接いじったりすればもっと面白い動きができそう。