いろいろなSVG

SVGはXMLで様々な描写ができます。
今回は主だった描写について記したいと思います。

直線

直線を描写する書式は次の通りです。

<line x1= y1= x2= y2=/>

x1y1からx2y2までの間に直線を描写します。

矩形

矩形を描写する書式は次の通りです。

<rect x= y= width= height=/>

xyの位置からwidthの幅とheightの高さの矩形を描写します。

多角形

多角形を描写する書式は次の通りです。

<polygon points="x1 y1, x2 y2, x3 y3,"/>

x1y1からx2y2、x3y3に直線の描写を行い、最後にx1y1に向けて描写を閉じます。

折れ線

折れ線を描写する書式は次の通りです。

<polyline points="x1 y1, x2 y2, x3 y3,"/>

多角形と同じくx1y1からx2y2、x3y3へと直線の描写を続けますが、最後に描写は閉じません。
描写の内側を塗りつぶすためスタイルでfill="none"を指定すると折れ線になります。

円

円を描写する書式は次の通りです。

<circle cx= cy= r=/>

cxcyは円の中心で、rは半径になります。

楕円

楕円を描写する書式は次の通りです。

<ellipse cx= cy= rx= ry=/>

cxcyは円の中心で、rxはx方向の半径、ryはy方向の半径となります。

軌跡

パスを指定して様々な軌跡の描写を行うこともできます。
書式は次の通りです。

<path d=/>

d属性の中にパス制御の命令を記述します。
主な命令は
M x y:xyの位置に移動
L x y:xyに線を引く
H x:xに水平方向に線を引く
V y:yに垂直方向に線を引く
Q x1 y1 x y:x1y1を制御点とした二次ベジェ曲線をxyまで引く
C x1 y1 x2 y2 x y:x1y1、x2y2を制御点とした三次ベジェ曲線をxyまで引く
Z:パスを閉じる

他にも楕円の軌跡を描写するAという命令もあります。
命令は大文字だと絶対位置を参照にしますが小文字だと現在位置からの相対位置を参照します。