HTML5で手軽に扱えるようになったSVG(Scalable Vector Graphics)。前回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御する方法を紹介しました。今回はJavaScriptとSVGを使ってシューティングゲームを作成します。 SVGアニメーション ゲームの作成に入る前に、SVG図形をアニメーションさせる方法を説明します。SVGには図形の位置やサイズをアニメーションさせる<anime>タグが用意されています。<anime>を使うとアニメーションが簡単に実現できます。 SVGアニメーションはアニメーションさせたい図形の子ノードに<anime>タグを記述し、変化させる属性値を指定します。指定できる主な属性名を以下の表に示します。
![HTML5 SVGで作るシューティングゲーム (1/6)](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf52b82e2d1e16bc37dc55686df3fb677135e784/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F08%2F25%2F243904%2Fl%2F82d689884c50b702.jpg)