Webデザイン 1-05
SVGでの図形描画の基礎（前編）

SVGはScalable Vector Graphicsの略で、ベクターで定義された画像フォーマットのことだ。IEも9から正式に対応し、現実的に使えるテクノロジーになってきた。

制作・文／林俊之（NTTレゾナント株式会社）
Browser IE 9over　Firefox 4over　Safari 5over　Chrome 7over

01

HTML5ではcanvasという画像を扱う別の仕様があるが、ビットマップとして扱われるためSVGとは異なる。SVGとcanvasの違いはPhotoshopとIlluatratorにたとえるとわかりやすいだろう。またSVG は一つのファイルフォーマットである（単独のファイルとして存在できる）点がcanvasと大きく異なる。canvasはHTML上は一つのHTMLのエレメントでしかなく、描画するにはJavaScriptを使う必要がある【1-1】。しかしSVGは【1-2】のようにXMLで記述するため、JavaScriptがなくとも描画でき、セマンティックな情報を持つことが可能だ【1-3】。図に意味を持たせることができるというのはSVGの大きな優位性である。Googleは2010年よりSVGのクロールを開始したとアナウンスしており、今後HTML上の図としてSVGを利用するケースは増えていくと思われる。

【1-1】canvasの例。

【1-2】SVGの例。

【1-3】どちらも見え方は一緒だがSVGはセマンティックな情報を持つ。

02

スマートフォンは端末ごとに異なるPPI（pixel per inch）を持つ【2-1】。iPhone4はiPhone3GSと比べ解像度が2倍になっているので、同じスクリーンサイズでもpixel数は倍となる。pngなどの画像ではiPhone4などの高PPI端末向けに最適化するために高解像度の画像を用意する必要があるが、SVGを使えば単一のファイルでマルチ解像度への対応ができる【2-2】。

残念ながら最近までAndroid端末のブラウザはSVGのサポートがなかったが、最近発表されたAndroid4.0ではSVGがサポートされたので（正確にはAndroid3.xからサポート）今後スマートフォンでもSVGの利用は広がっていくだろう。

【2-1】端末ごとのPPIの違い。

【2-2】Phone4では左のpng画像は引き伸ばされている。

03-01

SVGは【3-1】のようなタグで基本図形を描画する。いくつか描画してみよう。HTML内でSVGを描画するにはsvg要素を使う。その中に図形情報を記述していく。

四角形・円

x、y座標の指定はrect要素はx、y属性で指定するが、circle要素はcx、cyとなり、円の中心が指定座標になる。

rect要素はwidth、height属性でサイズを指定するがcircle要素はr属性で半径を指定する。

楕円を描画するellipse要素はcircleとほぼ同じ属性で指定するが、rx、ry属性を用いて横方向の半径、縦方向の半径を指定しサイズを決定する。fill（塗り）属性、stroke（線）属性、stroke-width（線の太さ）属性はどれも同じだ【3-2】。

また、rect要素では、rx、ry属性を使って角丸の指定ができる。x方向とy方向で独立した角丸のサイズを指定もできるが、同じであればどちらか一方を指定すればOKだ【3-3】。

【3-1】これらのタグで基本図形を描画する。

【3-2】rect、circle、ellipse要素。

【3-3】rgbaを使って色指定すれば半透明も可能だ。

直線・連続直線・多角形

line要素は始点にx1、y1、終点にx2、y2の座標を指定して直線を引く。line要素にはfill 属性はない。stroke属性で線の色を指定し、stroke-width属性で線の太さを指定する。

polyline 要素とpolygon要素は属性は一緒だが、polygonの場合は始点と終点のパスを閉じるところが異なるポイントだ。そしてpoints属性にx,yを1組としての数値をセットしていく。

区切り文字にはスペース、カンマが利用できる。polyline要素の場合、fill属性にnoneを指定しないとデフォルトで黒の塗りが指定されるので注意が必要だ【3-4】【3-5】。

【3-4】line、polyline、polygon 要素。

【3-5】直線、連続直線、多角形の例。

（後編に続く）

[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。