Blog

SVGのアニメーションはCSS3で実装するのがよさそう

2015.05.28Cat:css3 html5 SVG デザイナー

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

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

1つ問題点があります。

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

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

DEMO

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

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

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

 

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

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ