【実験】GIFアニメーション(GIF89a)をSVGで実現してみた
実験意図 つい先日、TwitterがGIFアニメーション(以下GIF)に対応した。 ショック! Twitterがサポートを始めたGIFアニメはGIFではなかった―しかしうまい考え – Techcrunch Google+もすでに対応済みで、あと主要なSNSとしてはFacebookだが、おそらく時間の問題だろう。 GIF対応の理由は分かる。それは動画はクリックしないと再生されないからだ。特にごく短い動画を再生させるためにいちいちユーザーに対してクリックを強要するのか?ということだろう。実際、おもしろいGIF動画があることも事実だ。 しかし、GIFは25年も前に作られた「インターネットの化石」とでも言うべき画像フォーマットだ。 Graphics Interchange Format - Wikipedia しかも最大で256色しか使えないので基本的に画質が悪い。それでも… 「WEBの世界はこれからも永遠にGIFを使い続けるのか?本当にこれがWEBの未来なのか?」 と強い疑問を感じて色々と考えていたら、GIFと同じことをSVGで実現できるのではないか?と思いついた。 SVGにはGIFと比べて様々なメリットがある。 基本的にベクター形式の画像ファイルフォーマットだが、ビットマップ形式の画像を埋め込むとができる(ベクターも使える) フルカラーの画像を使える(256色に制限されない) スクリプトにより複雑なアニメーションをさせることができる 強力な画像フィルターを使うことができる GIFはバイナリーファイルだが、SVGは基本的にテキストファイルなので画像作成ツールがより作りやすい などなど。そして、いわゆるモダンなブラウザは皆SVGに対応していて環境も揃ってきている。 しかし、本当にできるのか?実験してみることにした。 デモ(実験結果) 実験は成功。 GIFとSVGを両方表示して比較できるようにした。ページが重いのでモバイルでは注意が必要だ。 GIF vs SVG (別タブで表示します。約1.3MB。) アニメーション速度的にも画質的にもオリジナルと見分けがつかないと思うが、どうだろうか?GIFとSVGのアニメーションが少しずれるのは、SVGのアニメーションの開始が少し遅れて始ま...