基礎

svg は html内で直接コードを入力して利用できますので、webブラウザがあれば動作を確認できます。 次のような感じで svg タグを用いて利用します。 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="100">
    ここに描きたい線や円などの要素を記述.
</svg>

svgタグの xmlns="..."　は SVG のいろいろなタグを認識するために必要なものです。widthは横、heightは縦の幅になります。 単位は cm や mm などいろいろ使用できますが、省略した場合、pxになるようです。

属性 意味
width 横の長さ
height 縦の長さ

直線(line)

線を引く場合、line を用います。 lineは (x1,y1)を始点 (x2,y2)を終点の座標として次のように指定します。 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="100">
    <line x1="10" y1="10" x2="250" y2="80" stroke="black" />
</svg>

stroke は線の色を意味します。

属性 意味
(x1,y1) 始点
(x2,y2) 終点
stroke 線の色
stroke-width 線の太さ

lineの「(x1,y1)は始点」「(x2,y2)は終点」の座標ですが、この座標の取り方は次のようになります。

X Y O

yの座標の取り方は、下方向が正になっているので注意が必要です。

長方形(rect)

属性 意味
(x,y) 左上の座標
width 横幅
height 縦幅
stroke 線の色
fill 塗りつぶしの色 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="110">
    <rect x="5" y="5" width="120" height="100" fill="none" stroke="black" />
</svg>

円(circle)

属性 意味
(cx,cy) 中心座標
r 半径
stroke 線の色
fill 塗りつぶしの色 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="50">
    <circle cx="50" cy="25" r="20" fill="none" stroke="black" />
</svg>

楕円(ellipse)

属性 意味
(cx,cy) 中心座標
rx 横の半径
ry 縦の半径
stroke 線の色
fill 塗りつぶしの色 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="70">
    <ellipse cx="50" cy="35" rx="30" ry="25" fill="none" stroke="black" />
</svg>