SVGのアニメーション - 基礎

SVGの基礎

そもそもSVGとは、と言われた時にベクター形式で拡大しても劣化しない画像のタイプでXML形式で描画できる、という程度の知識なので、基礎からやっていきます。

コードで生成する画像

SVG要素はDOM要素の一種として、HTML要素のシンタックスに似た形式でシェイプを定義できます。SVG要素は独自のタグ、属性、振る舞いを定義することができます。ということは、DOM APIを通したJavaScriptからの操作や、CSSでのスタイル定義ができます。

マークアップ

SVG要素は<svg>タグを親としてマークアップします。<svg>がSVGを描画するためのコンテナとなります。

HTML5のようにSVGにもバージョンがあり、現在はSVG 1.1(Second Edition)がW3Cによって勧告されています。

http://www.w3.org/Graphics/SVG/

仕様

仕様(日本語)

まず、SVGグラフィックのコンテナとなる<svg>から記述しましょう。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>  

versionには準拠するSVGのバージョン、xmlnsには名前空間を記述します。コンテナに名前空間を記述することで、<svg>の子、子孫要素はSVGが持つ要素であることを認識することができます。例えば、HTMLの<a>要素がありますが、SVGにも<a>要素があります。親で名前空間をSVGに指定しておくことで、子以下の要素がSVGの<a>であることを示すことができます。

<svg>はコンテナでしかないので、特に何かが描画されるわけではありません。試しに単純な図形を書いてみます。

<rect>で矩形を描くことができます。xyはそれぞれ図形の右上の座標位置、widthheightは幅、高さを定義します。

基本図形は、他にも円、楕円、線なども描けます。

http://www.hcn.zaq.ne.jp/_/SVG11-2nd/shapes.html

スタイル

基本的なスタイルのプロパティはCSSと共有していますが、HTML要素に対するものと若干異なるプロパティがあります。例えば、塗りやボーダーの定義です。

スタイルはインラインで<rect style="" />のように書くこともできます。

具体的なプロパティについてはhttp://www.hcn.zaq.ne.jp/_/SVG11-2nd/styling.html で確認できます。

アニメーション

本題です。SVG要素をアニメートさせるには3つの方法があるようですが、現時点ではJavaScriptで行うのが現実的なようです。

  • SMIL
  • CSS
  • JavaScript

参考) SVGアニメーションの現状

今回はSVGのアニメーションをサポートし、jQueryの$.animate()ライクなAPIを持つVelocity.jsを利用することにします。

VelocityでのSVGアニメーションは、通常のHTML要素のアニメーションとほぼ同じ様に定義できます。