グラフィックスの要素をPNGやJPGなどより軽量サイズで作成でき、

色を変えたり、ある程度自在に扱うことができるSVGですが、

１つ問題点があります。

それは、アニメーションの実装です。

 

SVGではSVGの規格としてアニメーションが存在しますが、

こちらはIEでは最新バージョンの11で対応がされていないなど、対応ブラウザが限られており、

実際に公開するサイトとしては現時点では利用ができません。

 

また、JavaScriptで実装しようとすると、とてもブラウザに負荷をかけてしまい、

動きももっさりとしたものになってしまいます。

 

これらの問題を解決するのが、CSS3のアニメーションです。

CSS3のアニメーションもIE10以上という制約はあるものの、

最新のブラウザは網羅しているので、実用としての可能性はより高いものとなります。

 

SVGとCSS3アニメーションの効果的な使い方を検討してみましたが、

複数のグラフィックを別々に動かす場合、

１つのSVGの要素の中でそれぞれの要素をアニメーションさせるよりも、

DEMO

↑こちらのDEMOのように、HTMLの各要素の中に部品としてSVGを読み込んで、

SVGを読み込んでいるそれぞれのHTMLの要素に対して、CSS3でアニメーションさせるのが、

いいのではないかと思います。

 

もちろん、IE9はまだそれなりにシェアがありますので、IE9用にjQueryの振り分けはまだ必要かもしれません。