img要素内のSVGパラパラアニメーションをIEでも動かす

最近話題になった「ついにGIFに代わる新しいアニメーション画像フォーマットが誕生か」として公開されたxng形式でしたが，実際には単なるSVGの仕組みを応用したパラパラアニメーション(パラパラマンガ)でした．

SVGではCSSやスクリプト無しにアニメーションが動作するため，驚かれた方も多かったと思われますが，このやり方でのパラパラアニメーションの実現には次のような問題が存在します．

• 最適化されていないことでファイルサイズが増大する
  データURIスキーム形式で静止画をSVGファイルに埋め込む際に，画像データが増大します．また，動画形式と異なり，フレーム間での最適化が効きません．
• そもそもIEで動作しない
  IEはSVGアニメーション(SMILアニメーションと呼びます)をサポートしていません．

これらの点で運用には細心の注意が必要です．

では上記の問題を解決するにはどうすればよいのでしょう？
前者は各静止画の品質を落としたり，フレーム数を減らすなどで対処できるかもしれません．
では後者のIEで動作しない問題は？
そこで本記事ではSVGの構造を見直し，javascriptと組み合わせることで無理矢理img要素でのアニメーションを動かしてみました．

なお，SVGを使ったパラパラアニメーションの原理については次の記事を見てください．

• パラパラアニメーションをsvgで作成する

xng形式での内部構成とは大分異なりますが，画像データを埋め込んでいないこと以外やっていることは概ね一緒です．

SVG2のmix-blend-modeを試してみる

SVG2の仕様確定が遠のいてしまいましたが，翻ってWEBブラウザ側では着実に新機能の実装が為されています．今回紹介するmix-blend-modeもその一つで，HTMLとの仕様の統合をはかる上で新たにSVG2で導入されるプロパティです．従って実用には程遠いのですが，非常に魅力的な機能ですからいち早く試してみることとしました．

なお，現状Editor's Draft版を参考としているため，今後仕様の修正に伴い内容が不正確になる可能性があります．
また，本ページの内容はmix-blend-modeをサポートしているブラウザで見てください．

SVGにはどのようにしてスクリプトが混入するのか

SVGが他の画像形式と一線を画している点として，javascript等によるスクリプトを挿入することが出来ることが挙げられます．この特徴により特別なツールを必要とせずにダイナミックに内容を書き換えることが出来るのがウリの一つです．しかしスクリプトが全て善意から成り立っているとは限らず，ウィルス等の良からぬ内容が含まれている可能性を否定できません．

ではSVGに対するスクリプトの混入有無を確認するにはどうすればよいのでしょうか?
※少し追記
※10/10追記 補足はアンチパターンとして紹介していますから，そのようなものだと勘違いしないでくださいね．

インラインSVGの見た目がボケてしまう事に対する処方箋

インラインSVGを使っていて困ること，それは「いつ何時ボケボケになるかわからん」ということです．そこでどうやったらこの「ボケ」を取り除けるかをまとめました．

ブログにまとめようとも思ったけれど面倒なのでリンクを貼っておきます．

要はSVGの枠をスクリーンのピクセルに合わせるにはCSS transformが最も手っ取り早いんだけれど，ブラウザ毎の動作の違いもあって，実現に少し細工が必要ってこと．ScreenCTMとtransformとベンダプレフィクスを組み合わせて, 下のようなスクリプトを発行するんだ.

svg = document.querySelector("[selector]");
m = svg.getScreenCTM();
svg.style.transform = "translate(0,0)";
svg.style.msTransform = "translate(" + (Math.floor(m.e)-m.e) + "px," + (Math.floor(m.f)-m.f) + "px)";