比較的簡単な図形を描いてみよう。
矩形（rect）、円（circle）、楕円（ellipse）、直線（line）、多角形（polygon, polyline）を解説する。
矩形（rect）
単純な矩形は、xy座標（x,y）、大きさ（width,height）を指定する。
塗りつぶしの色は、fill属性で指定する。
枠の色と幅は、stroke, stroke-width属性で指定する。
<rect x="40" y="40" width="200" height="100" fill="lightgray"
stroke="gray" stroke-width="2" />
角がまるくなった矩形の場合は、角の半径（rx, ry）を指定する。
ちょうど楕円の形に角がまるくなる。
<rect x="40" y="40" width="200" height="100" fill="lightgray"
rx="60" ry="40"
stroke="gray" stroke-width="2" />
円（circle）
円を描くときは、中心座標（rx,ry）と半径（r）を指定する。
塗りつぶし（fill）と枠線（stroke, stroke-width）は矩形（rect）の場合と同じ。
<circle cx="140" cy="80" r="60"
fill="lightgray" stroke="gray" stroke-width="2" />
楕円（ellipse)
楕円を描くときは、中心座標（rx,ry）と半径（rx,ry）を指定する。
塗りつぶし（fill）と枠線（stroke, stroke-width）は矩形（rect）の場合と同じ。
<ellipse cx="140" cy="80" rx="120" ry="60"
fill="lightgray" stroke="gray" stroke-width="2" />
直線（line）
直線を描くときは、開始点（x1,y1）と終了点（x2,y2）を指定する。
直線の場合、塗りつぶし（fill）は、開始点と終了点の間の１ドットの線になるので、
"none"（塗りつぶさない）を指定しておくと無難。
<line x1="40" y1="40" x2="200" y2="140"
fill="none" stroke="gray" stroke-width="2" />
点線
点線を描くときは、配列（stroke-dasharray）とオフセット（stroke-dashoffset）を使う。
配列（stroke-dasharray）は、数値で、書く→書かない→書くの順番に幅を指定していく。
オフセット（stroke-dashoffset）は、破線のスタート位置を指定する。
<line x1="40" y1="40" x2="260" y2="40"
fill="none" stroke="gray" stroke-width="2"
stroke-dasharray="20 20" />
<line x1="40" y1="80" x2="260" y2="80"
fill="none" stroke="gray" stroke-width="2"
stroke-dasharray="20 20" stroke-dashoffset="20" />
<line x1="40" y1="120" x2="260" y2="120"
fill="none" stroke="gray" stroke-width="2"
stroke-dasharray="20 10 10 10" />
この例では、
１番上の点線は、stroke-dasharray="20 20" となり、「20 ドット書いて、20 ドット書かない」
の繰り返しになる。
真ん中の点線は、オフセット（stroke-dashoffset）を指定して、「20ドット分ずらして開始する」という
意味になる。
１番下の点線は、stroke-dasharray="20 10 10 10" と指定して１点鎖線になるように描画している。
配列（stroke-dasharray）は、奇数分でもかまわないが、描画するしないが逆転するので偶数分指定するほうが無難である。
点線は、直線（line）だけでなく、様々な図形で指定できる。
たとえば、次のように矩形（rect）の枠に対して点線を指定することもできる。
また、オフセット（stroke-dashoffset）を調節することによって、交互に色の付いている
点線を描画することも可能である。
また、線の太さ（stroke-width）を太くすることによって、扇風機のような形を描くこともできる。
<rect x="40" y="40" width="100" height="100" rx="20" ry="20"
fill="lightgray" stroke="gray" stroke-width="5"
stroke-dasharray="10 10" />
<rect x="30" y="30" width="120" height="120" rx="20" ry="20"
fill="none" stroke="blue" stroke-width="5"
stroke-dasharray="10 10" />
<rect x="30" y="30" width="120" height="120" rx="20" ry="20"
fill="none" stroke="red" stroke-width="5"
stroke-dasharray="10 10" stroke-dashoffset="10" />
<circle cx="220" cy="90" r="40" fill="none"
stroke="gray" stroke-width="40"
stroke-dasharray="30" />
next