SVGによるベクターグラフィック(1) (3/6)

では、<svg>タグ内に用意できるグラフィックタグについて説明していきましょう。SVGに用意されているグラフィックタグは、基本的な形状の図形に関するものが中心です。以下にそれぞれの使い方を整理しておきます。

◯四角形
位置と大きさを属性で指定して表示します。また、角の部分を丸くするための属性も用意されており、これを使って一定の丸みをつけることもできます。

<rect x="横位置" y="縦位置" width="横幅" height="高さ" 
        rx="角の丸みの横幅" ry="角の丸みの縦幅" />

◯正円
中心点の位置と半径を指定して描きます。

<circle cx="中心の横位置" cy="中心の縦位置" r="半径" />

◯楕円
<circle />は半径を指定しましたが、こちらは縦横の半径をそれぞれ指定します。これにより横長・縦長の楕円が描けます。

<ellipse cx="中心の横位置" cy="中心の縦位置" 
        rx="横方向の半径" ry="縦方向の半径" />

◯直線
開始位置と終了位置の２つの位置を指定して描画します。

<line x1="開始横位置" y1="開始縦位置" x2="終了横位置" y2="終了縦位置"/>

◯多角形
いくつかの点を結ぶんだ図形を描くためのものです。<polyline>は開いた図形（開始点と終了点がつながっていない）を描くもので、<polygon>は閉じた図形（開始点と終了点がつながっていて内部が塗りつぶせる）を描くものです。いずれもpointsという属性で、"横1 縦1 横2 縦2 ……"という具合に、各点の横位置・縦位置をスペースで区切って記述していきます。

<polyline points="位置情報" />
<polygon points="位置情報" />

◯テキスト
テキストは、縦横の位置を指定すするだけで表示できます。

<text x="横位置" y="縦位置" />

――ざっと、このぐらいのものが頭に入っていれば、基本図形は描けるようになるでしょう。「曲線がないぞ？　円弧は描けないの？」とか疑問に思う人もいるかもしれませんが、これらは「パス」と呼ばれる、ちょっとややこしい図形として描かないといけません。これは基本図形のようなシンプルなものではなく、複雑なパラメータを用意する必要があるので今回は割愛します。

下のリスト欄に簡単な利用例をあげておきます。それぞれの基本図形をひと通り描いただけですが、どんな感じで属性を用意するのか参考になるでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="300px"
	xmlns="http://www.w3.org/2000/svg">
	<text x="10" y="20">テキストの描画例</text>
	<rect x="20px" y="50px" width="100px" height="100px" 
		fill="red" stroke="blue" stroke-width="2px" />
	<circle cx="150px" cy="125px" r="50px" 
		fill="green" stroke="black" stroke-width="5px" />
	<line x1="150px" y1="150px" x2="250px" y2="200px"  
		stroke="blue" stroke-width="10px" />
	<polygon points="100 100 20 200 100 200 20 100" 
		fill="cyan" stroke="magenta" stroke-width="5px" />
</svg>