SVGアニメーションとは？

SVG（エスブイジー）とは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略称で、ベクター画像フォーマットの1つです。画像拡大時に粗くなるJPEGやGIF、PNG画像などのビットマップ画像に比べ、SVG画像などのベクター画像は、拡大時も滑らかに表示されるため、レスポンシブWebデザインや、Retinaディスプレイなどの高解像度表示に適しています。そのSVGを、JavaScript（jQueryを含む）やCSSを使ってアニメーションさせたものを、SVGアニメーションと呼びます。

SVGアニメーションの作り方

当サイトでは、アニメーションに使用するオブジェクト作成を『Adobe Illustrator』で、アニメーションソフトは『Adobe After Effects』、アニメーションをJSON形式で書き出す際に、Adobe After Effectsのプラグイン『Bodymovin』を使用しています。作成されたJSONファイルを、Webサイト上でSVGアニメーションとして表示します。

SVGアニメーションの表示

上記で作成したJSONファイルを、JavaScriptとCSSで、HTMLに表示します。（当サイトでは、アニメーションライブラリ『Lottie』を使用しています。）SVGファイルは拡大時も滑らかに表示されるため、レスポンシブWebデザインや、Retinaディスプレイなどの高解像度表示に適しています。

対応ブラウザ：Google Chrome、Safari、Firefox、Microsoft Edge、Internet Explorer（IE）9以上。