Lesson 17 新機能の使用方法(9) SVG - HTML5＋CSS3 次世代Webコーディングの超・最新動向・HTML5編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

HTML5編

	Lesson 17			新機能の使用方法(9) SVG
	制作・文			菅沼辰弥（株式会社ロクナナ）

SVGとはScalable Vector Graphicsのこと。HTML5ではSVGをHTMLの中に組み込んで表示させることができる。一見canvasと似ているが、SVGとcanvasはベクターグラフィックとビットマップイメージという大きな違いがある。

長方形を
描画する

HTML内でSVGを扱うにはsvg要素を使う。canvas（Lesson10）のようにwidthやheight属性を付加することで描画領域を決めることができる【1】。

SVGで図形を作成する際はすべてこのsvg要素内に記述していく。まずは簡単な図形から描いてみよう。

【2】のrect要素は矩形を描画するタグで、図の左上の座標x、yと図の幅width、高さheightなどの属性を設定すると矩形を描画できる。XMLの形なのでJavaScriptのようなスクリプト言語を苦手としている人でも理解しやすい。fillは塗りつぶしの属性で、値にはRGB 表記のほかにもRGBAや16進数表記など、CSSで使われている形式が利用できる。

rxもしくはryに数値を入力すると角丸の矩形ができる（どちらか一方でよい）。角丸はcanvasよりもかなり簡単に描画できるのでぜひ覚えておきたい【3】。


【1】



【2】



【3】ry属性に半径を設定するだけで、簡単に角丸を作成することができる

円を
描画する

circle 要素は真円を描画する【4】。cx、cyが中心点、rが半径を意味している。fillは矩形と同様に塗りの色を指定できる。ellipse要素は楕円形で、rxは横方向の半径、ryは縦方向の半径だ【5】。






【4】



【5】半透明もきれいに表示される

直線を
描画する

line要素はx1、y1を始点としてx2、y2までの直線を引くことができる【6】。lineには塗りは存在しないので、stroke属性を指定しないとなにも描画されないので注意が必要だ。線の幅はstroke-width属性で数値設定できる【7】。



【6】



【7】fill では何も描画されないので注意が必要だ

グラデーションで
塗りつぶす

SVGはグラデーションを使った複雑な色の指定やパターンの塗りつぶしなども表現することができる【8】。

線形グラデーションはlineargradient要素でグラデーションを作ってid を設定し、適用したい要素の塗りをid で指定するといった方法で実装する。x1、y1は色の始点、x2、y2は終点の位置である。これらの位置はパーセントで指定する必要がある。始点と終点が効果を適用する図形の相対的な位置であることがcanvasとは違うので注意しよう。

色を設定するには、lineargradient の中にstop要素を色の数だけ作成して、位置と色を指定する。offset属性はその色の位置、stop-colorは色だ。

ここまでの記述ができたら、あとはグラデーションを適用したい図形のfillもしくはstroke属性にurl(#ID名)を挿入する【9】。

円形グラデーションは、内側の点から外側の円に向かって色が変化していくイメージで色を指定するとよい【10】。cx、cy、rで外側の円の中心点と半径を指定し、fx、fyには内側の点の位置を設定する。stop要素の色のつけ方は線形グラデーションと同じだ【11】。



【8】



【9】stop要素をうまく使えばより複雑なグラデーションも可能となる



【10】



【11】円形グラデーションは頭で考えるよりも実際にコードを触ってみると理解しやすい

パターンで
塗りつぶす

パターンで塗りつぶす場合は、pattern要素でパターンにする図形の要素を囲む【12】。widthとheightで繰り返す最小単位の大きさを決める。小さくすれば図形をぎっしり敷き詰めることになる。

patternUnitsはwidthとheightの座標系を定義する属性だ。あとはグラデーションと同じように塗りつぶしたい要素のfill属性にidを指定して参照すればパターンで塗りつぶされる【13】。



【12】



【13】図形と最小単位の大きさのバランスで印象が大きく変わる

テキスト

SVGはテキストを描画することもできる。テキストをstroke で縁取りしたり、グラデーションで塗りつぶすなど、CSSではできない表現も可能になるので、覚えておくと便利だろう。

テキストを描画する場合は、描画したい文字列をtext要素で囲む【14】。文字の大きさはfont-sizeで変更することができる。font-weightは文字の太さを設定する属性で、normal で標準、bold で太字になる。font-familyはフォントの設定だ。text-anchor は文字を揃える位置を変更する属性で、startで左揃え、middleで中央揃え、endで右揃えになる。これらに加えてfillで塗りつぶしの色、strokeで縁取りなどができるようになる。

tspan 要素はtext の子として使うことができる要素で、textと同じ属性を使うことができる。HTMLのspan要素と同じような位置づけで、text要素内の特定の単語だけ色を変えたい場合などに使うとよいだろう【15】。

textPathはpathと組み合わせることで、テキストをパスに沿わせて表示させることができる【17】。path要素はここでは解説を割愛するが、例では山型の折れ線を描いている。textPathはtextの子要素として記述し、xlink:href 属性にpathのidを指定することでパスに沿わせることが可能になる【17】。



【14】



【15】



【16】



【17】