|
|---|
HTML5ではビットマップ画像を手軽に扱える「Canvas」が話題ですが、「SVG」も画像関連で注目したい新技術です。HTML5ではInline SVG（インラインSVG）がサポートされ、HTML内にSVGを直接記述できるようになるのです。
今回のJavaScriptラボは、Firefox 4、Google Chrome 7、Internet Explorer 9を対象に、インラインSVGの使い方とJavaScriptによる制御方法について解説します。全部で3回に分けて、最終的には簡単なシューティングゲームを作成します。
連載ラインナップ
- HTML文書内にSVGを表示
- JavaScriptでSVGを制御
- JavaScriptとSVGでシューティングゲームを作成
SVGとは？
SVG（Scalable Vector Graphics）は、名前のとおりベクター形式の画像フォーマットです。ベクター形式とは、点と点で結ばれた線で図形を表す方法で、アプリケーションでいえばIllustratorがベクター形式を採用しています（Photoshopはピクセル形式）。
ベクター形式では図形を表示する際、座標点を元にどこに描画するかを計算しなければならないので、ピクセル形式（ラスター形式）に比べて描画速度は遅く、やや扱いにくい面もありますが、以下のようなメリットがあります。
・変形に強い
回転や拡大縮小しても図形が最適な状態で描画されます。ピクセル形式の画像を拡大すると、1つの点（ピクセル）のサイズがそのまま大きくなるので、全体がぼやけたり、ジャギーが目立ったりしますが、ベクター形式では描画する点をその都度計算するので、常に滑らかに表示されます。
・描画範囲や解像度に依存しにくい
ベクター形式は基本的に解像度を意識する必要がありません。640×480pxでも1920×1080pxでもきれいな状態で描け、携帯電話のような小さな画面でもハイビジョンサイズでも常に最適な状態で表示できます。たとえばiPhone 3GSとiPhone 4は解像度が違いますが、12ptの文字は同じ大きさで表示されます。
・少ないデータサイズで済む場合がある
描画面積が大きい場合はビットマップに比べて少ないデータで済みます。どんなに巨大な四角形を描画する場合でもベクター形式なら(x1,y1)-(x2,y2)の4つの座標点のデータで済みます。反面、描画面積が小さい場合はベクター形式だとデータサイズが大きくなることがあります。
SVGはXML形式の一種ですので、テキストエディターがあれば作成できます。とはいえ、実際には手作業で図形を描くのは難しいので、SVGをサポートしている以下のようなアプリケーションを使うと便利です。
- ・Adobe Illustrator
- http://www.adobe.com/jp/products/illustrator/
- ・CorelDRAW
- http://www.corel.com/servlet/Satellite/jp/jp/Product/1191272117978#tabview=tab0
- ・Inkscape
- http://inkscape.org/index.php?lang=ja
特にInkscapeは標準フォーマットにSVGを採用している無料のアプリケーションですので、SVGの編集だけであればこれで十分でしょう
IllustratorはCS5とCS4以前とでは生成されるデータが異なり、インラインSVGを扱う場合はCS5の方が適しています。本連載ではIllustrator CS5で生成したSVGデータを使用します。
「まとめてじっくり読みたい！」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。
HTML5+JavaScript アイデア&実践サンプル
本体 2,800＋税、B5変形判312ページ（オール4色刷）
ISBN：978-4-04-870448-9
