SVG SMIL アニメは意外とすごい

９VAアニメのSVG変換がだいぶすすんできたが、複雑なアニメがちゃんとSVGで再生できるようになってきた。

SVGは静止画のベクトルアニメ、もしくはJavaScriptへの素材提供用フォーマットというイメージがあるが、もともとは、Flashに対抗したベクトルアニメーションの仕様でもあったはず。JavaScriptでプログラムを組まなくてもストーリーアニメが表現できる。

SVGの中で fill="freeze"は重要

変換の品位があがってきたのは、fill="freeze"を<animate>の中にいれる必要性を発見したこと。 複雑なアニメにするとブラウザの再生が追いつかなくなってくるが、そのとき、fill="freeze"を入れていないと処理がとばされることがあるようだ。

<animate>が終了すると値がリセットされるという仕様もあるため、部品のアニメを表示するための<use>や<transform>が処理されないと悲惨な表示になる。

普通のSVGサンプルだと、<animate>ひとつで処理する例が多いので、移動させたあと図形を残しておきたいときは、fill="freeze"を入れると説明されることが多いが、複雑なアニメを表現すると、複数の<animate>を時間指定でつないでいくことになる。これが小さなサンプルだとちゃんと再生されるが、重たいアニメになると、<animate>と<animate>の間のすきまがどうなっているかも記述しておかないといけないという理屈か。