2013-12-02

SVGでローディング・アイコン

アニメーションSVGでローディング・アイコン、画像の読み込みの時とかにグルグルする奴を作った。回るスピードやサイズの変更が簡単なのが売り。8個の丸いパスを丸く並べ、g要素でグルーピングし、その子のanimateTransform要素でcalcMode="discrete"を使えば結構簡単に出来た。

<animateTransform
  attributeName="transform"
  attributeType="XML"
  dur="1s"
  repeatCount="indefinite"
  calcMode="discrete"
  values="0 256 256;
    45 256 256;
    90 256 256;
    135 256 256;
    180 256 256;
    225 256 256;
    270 256 256;
    315 256 256"
  type="rotate"/>

type属性でrotateを指定することで回る。values属性ではdeg x yという組み合わせで回る角度と回す基準点を指定していく。角度は8個の円なので360度を8で割った45度ずつ進めていくようにするだけ。基準点は元画像のサイズに依存するので適当に真ん中を指定する(512x512で作ったのでその真ん中の256 256を指定している)。最後にcalcMode属性でdiscreteを使い、よく見るローディング・アイコンのようにジャンプするようにして、repeatCount属性でindefiniteを指定し無限ループするようにする。

素の状態で2888バイト、URLエンコードでData URI化して使うとして2492バイトになった。パスの最適化はしてないのでもっと縮みそうだし、そもそもcircle要素使えばもっと縮みそう。非円ではないのが回るやつを作るとしても同じくらいのサイズになるので、大きくても4KB前後で大体収まるという計算が成り立つと思う。

ローディング・アイコンのようなものをマークアップを消費して実装するくらいなら画像の方が良い。現状ではアニメーションGIFが最適解。将来的には特殊なローディング、例えば既に表示されている画像を点滅させながらフェードアウトさせるみたいな読み込み待ちをさせるようなケースではCSSアニメーションを使い、スタティックなスピナーならSVGアニメーションを使うようになるのじゃないかなーと思う。使い分け。