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

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

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

03-02

前編からの続き。

パス

SVGでは直線や曲線を描画することができる。言うなればIllustratorでいうところのペンツールにあたる。

パス要素のd属性に命令コマンドと数値を指定（区切り文字にはスペース、カンマが利用できるが、Lなどの命令コマンドの前の区切り文字は省略できる）。直線、多角形は【3-6】のように記述する。M はMove to の略で「M50 50」でx:50、y:50に移動するという意味だ。LはLine toの意味で「L100 50」x:100、y:50まで線を引くという命令になる。また小文字のmやlで指定すると相対座標になる。z（Close to）は図形を閉じるという意味だ【3-7】。

2次ベジェ曲線は【3-8】のようにQ（Quaristic BezierCurve）コマンド使って記述する。Tコマンドは現在の点から指定された座標にベジェ曲線を描くが、その際の制御点は前の命令の制御点を元に点対称な座標として自動的に計算される【3-9】。

なお、3次ベジェ曲線を書くコマンドもある。

【3-6】直線と多角形。

【3-7】直線と多角形の例。

【3-8】path要素でベジェ曲線を記述。

【3-9】制御点が自動的に生成される。

テキスト

表示したいテキストをtext要素で囲むことでテキストを表示することができる【3-10】。font-family属性でフォントの種類を指定し、font-size属性でフォントのサイズを指定する。x、y属性で位置を指定するが、y座標は文字のベースラインに対しての座標になるので注意が必要となる【3-11】。

【3-11】の2つ目の例のようにtspan要素を使うことで個々の文字に対して別途スタイルを定義することも可能だ。

またパスに沿ってテキストを表示することもできる。textPath要素のxlink:href属性にパスのidを指定する【3-12】【3-13】。

【3-10】テキストをtext要素で囲む。

【3-11】y座標はテキストのベースラインになる。

【3-12】textPath要素で沿わせたいpathのidを指定する。

【3-13】パスに沿ってテキストを表示させることもできる。

グラデーション

SVGではIllustratorのように塗り、線に対してグラデーションをかけることができる。

【3-14】は線形グラデーションの例だ。まずdefs要素内にlinearGradientという要素を使ってグラデーションを定義する。この定義したグラデーションにidを振り、fill属性から参照する。色を設定するには、stop要素を色の数だけ作成し、位置と色を指定する【3-15】。

linearGradientの他にradialGradientという放射状のグラデーション要素もある。まずcx、cy、r属性で放射型グラデーションの最大の円を定義し、それに向かってグラデーションが描画される。fx、fyは焦点ポイントで必須属性ではないが、グラデーション開始ポイントをcx、cyからずらすことができる。

stop要素はlinearGradientと同じで、色の数と位置を指定する【3-16】【3-17】。

【3-14】線形グラデーションはlinearGradientで定義する。

【3-15】線形グラデーションの例。

【3-16】放射状グラデーションはradialGradientで定義する。

【3-17】グラデーション開始ポイントがずれている。

マーカー

マーカーを使うとpath、line、polyline、polygon要素の頂点に対して、別の図形を付与することができる。

主な利用例としては矢印がある。marker要素のorient属性にautoを指定することで自動的に線の方向に向く。逆に固定したい場合は角度の数値を入れる。またrefX、refYで位置の調整を行う。

この図形はpolygonとpolylineの組み合わせでも作ることはできるが、マーカーだと線の角度や長さが変わっても自動的に追従してくれるのでこちらのほうが便利だ【3-18】【3-19】。

【3-18】marker要素を使ってマーカーを定義する。

【3-19】角度が変わっても矢印は線の方向に追従する。

SVGは実はIllustratorを使ったことがある人には概念的にわかりやすい構造になっている。ここで紹介した以外にもアニメーションなど多くの機能があるので興味のある方はぜひトライしてSVGの使い勝手を楽しんでほしい。

[目次に戻る]

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

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