SVGとは、「Scalable Vector Graphics（スケーラブル ベクター グラフィックス）」。
W3Cによりオープン標準として勧告された、XMLによって記述されたベクターグラフィック言語です。
HTML5以前から、SVGは利用することが出来ました。
但し、その際はFlash同様、HTMLから利用する場合は組み込み要素として使用していました。
(Adobe Illustratorなどのドロー系描画ソフトにて、作成・利用されています。)
<svg>要素は、HTML5にてはじめて追加された仕様です。

まず最初に行うことは、<canvas>要素同様に、<svg>要素を配置することで表示領域を配置します。
<svg>～</svg>の中には、XML形式のSVG言語で書かれた図形の定義を記述します。
<canvas>要素と違い、<svg>要素は対応しないブラウザでは非表示となります。
※<svg>要素に非対応のブラウザでは、Adobe SVGViewerなどをオブジェクトとして組み込み、別途svgファイルを用意する必要があります。

大きさを含めいくつか表現に係わる属性がありますのでご紹介します。

width属性

描画する要素の幅

height属性

描画する要素の高さ

viewBox属性

覗き窓(viewBox)を定義します。
<svg>要素は、描画領域と表示領域を必ずしも一致させる必要はありません。
viewBoxを定義することで、描画領域に対して表示する範囲を指定できます。
これにより、要素内で定義されている図形を変更することなく、拡大/縮小や表示範囲の移動ができます。

<svg>要素の大きさは、省略することも出来ますがwidth属性やheight属性、CSSなどで指定することが出来ます。
指定がない場合は、ブラウザの既定値が使われます。

※以降、座標で指定する部分がありますが、左上が原点となります。

<!-- 表示領域のみを指定した場合 -->
<svg id="svg0101" width="220" height="200">
	<circle cx="110" cy="100" r="50" fill="none" stroke="red" />
</svg>
<!--viewBoxを指定した場合 -->
<svg id="svg0102" width="220" height="200" viewbox="80 0 300 200">
	<circle cx="110" cy="100" r="50" fill="none" stroke="red" />
</svg>

なお、この先 <svg>要素の領域がわかりやすいよう背景(銀)色をつけます。

まずは、三角形を描きます。
直線の引き方には2種類あります。

<line>要素 : 直線を一本ずつ引く

<line>要素を用いることで、直線を引くことができます。
但し、単線ですので<line>要素だけで塗りつぶし図形は作れません。

x1属性,y1属性

座標(x1,y1)を始点とします。
必須属性です。

x2属性,y2属性

座標(x1,y1)を終点とします。
必須属性です。

stroke-width

線の太さを指定します。
必須属性ですが、style(CSS)でも指定可能です。

<polyline>要素 : 連続線を引く

<polyline>要素を用いることで、連続した直線を引くことができます。
<line>要素と異なり、塗りつぶし図形が作れます。

points属性

各頂点の座標をスペース区切りでプロットします。
書き方)「x0,y0 x1,y1 x2,y2 ... xn,yn」
必須属性です。

図形を描くには、<line>要素より<polyline>要素の方が理解しやすいです。

<!-- 直線(line) 塗りつぶし可 -->
<line x1="20" y1="20" x2="120" y2="120" stroke-width="3"/>
<line x1="120" y1="120" x2="20" y2="120" stroke-width="3"/>
<line x1="20" y1="120" x2="20" y2="20" stroke-width="3"/>

<!-- 連続直線(ployline) 塗りつぶし可 -->
<polyline points="220,20 320,120 220,120 220,20"/>

四角形を描きます。
「図形を配置する」でも、四角形はかけますが「<rect>」を使えば簡単に描けます。

<rect>要素 : 四角を描く

x属性,y属性

左上の座標(x,y)を指定します。

width属性

四角形の幅を指定します。
必須属性です。

height属性

四角形の高さを指定します。
必須属性です。

rx属性

角丸みの半径(x方向)を指定します。
省略した場合、0(角丸み無し)となります。

rx属性

角丸みの半径(y方向)を指定します。
省略した場合、rx属性値を用います。

<!-- 標準的な(角張った) 四角形 -->
<rect id="rect01" x="25" y="25" width="100" height="100" />
<!-- 角の丸い 四角形 -->
<rect id="rect02" x="225" y="25" width="100" height="100" rx="20" rx="10" />

円を描きます。
正円(<circle>要素)と楕円(<ellipse>要素)が存在します。

なお、<canvas>要素と異なり、<circle>要素及び楕円(<ellipse>要素では、円弧や扇型を作ることはできません。
円弧や扇型を作る場合は次項「軌跡(パス)を描く」を用いる必要があります。

<circle>要素 : 正円を描く

cx属性,cy属性

円の中心座標(cx,cy)を指定します。

r属性

円の半径を指定します。
必須属性です。

<ellipse>要素 : 楕円を描く

cx属性,cy属性

円の中心座標(cx,cy)を指定します。

rx属性,ry属性

円の長半径/短半径を指定します。
必須属性です。

<!-- 正円 -->
<circle cx="100" cy="100" r="80" />
<!-- 楕円 -->
<ellipse cx="350" cy="100" rx="120" ry="80" />

軌跡(パス)を描きます。
直線、曲線が混在した図形が描けます。

<path>要素 : 軌跡(パス)を描く

d属性

描画コマンドとなる英文字と数値の連続で、軌跡(パス)を指定します。
コマンドはスペース区切りとなります。
必須属性です。

描画コマンドの英文字の大文字小文字には意味があります。
大文字は絶対座標、小文字は相対座標となります。

M : 移動

Mに続き、x座標、y座標を指定し、書き出し位置を移動します。
書き方)「M x y」

L : 直線

Lに続き、x座標、y座標を指定し、直前の位置から線を引きます。
書き方)「L x y」

H : 水平線

Hに続き、x座標を指定し、直前の位置から線を引きます。
書き方)「H x」

A : 楕円

直前の位置からの楕円を描きます。
Aに続き、
楕円の長短辺方向の半径(rx,ry)、
楕円のX軸回転 x-axis-rotation (ラジアン)、
長楕円か短楕円 large-arc-flag (1:長楕円/0:短楕円)、
楕円の書き出し方向 sweep-flag (1:反時計回り/0:時計回り)、
書き終わり点 x,y
の順で指定し、直前の位置から円弧を引きます。
書き方)「A rx ry x-axis-rotation large-arc-flag sweep-flag x y」

Q : 二次ベジェ曲線

直前の位置からの二次ベジェ曲線を描きます。
Qに続き、
制御点 (x1, y1)、
座標 (x, y)
の順で指定し、直前の位置から曲線を引きます。
書き方)「Q x1 y1 x y」

T : 二次ベジェ曲線(簡易型)

直前の位置からの二次ベジェ曲線を描きます。
Tに続き、
座標 (x, y)
の順で指定し、直前の位置から曲線を引きます。
書き方)「T x y」
制御点は自動で計算されます。
(前の制御点と点対称に発生します。)

C : 三次ベジェ曲線

直前の位置からの三次ベジェ曲線を描きます。
Cに続き、
制御点1 (x1, y1)、
制御点2 (x2, y2)、
座標 (x, y)
の順で指定し、直前の位置から曲線を引きます。
書き方)「C x1 y1 x2 y2 x y」

S : 三次ベジェ曲線(簡易型)

直前の位置からの三次ベジェ曲線を描きます。
Sに続き、
制御点2 (x2, y2)、
座標 (x, y)
の順で指定し、直前の位置から曲線を引きます。
書き方)「S x2 y2 x y」
制御点1は自動で計算されます。
(前の制御点と点対称に発生します。)

Z : パスを閉じる

パスを閉じます。
Zにはパラメータはありません。
大文字小文字の差異もありません。
書き方)「Z」

<!-- 連続直線(ploylineと同様) 塗りつぶし可 -->
<path d="M 20 20 L 120 120 L 20 120 L 20 20 Z" />

<!-- 角丸の四角形(rectと同様) -->
<path d="M 225 25
		 m 20 0
		 h 60
		 a 20 10 0 0 1 20 10
		 v 80
		 a 20 10 0 0 1 -20 10
		 h -60
		 a 20 10 0 0 1 -20 -10
		 v -80
		 a 20 10 0 0 1 20 -10
		 Z" />

上記の全ての図形要素や「svg要素(2)　色とスタイル」などの長さや幅、距離を表す場合、単位を指定することができます。
CSS2で定義されている単位が利用可能で、以下は指定可能な単位系です。
CSS2では単位の省略不可ですが、SVGでは許されています。
省略された場合、長さ値は現在の利用座標系における距離を表します。
※省略された時の単位は大体において「px」です。

px

[相対単位] ピクセル数（pixels）で示し、ユーザーのディスプレイの画像解像度（画素濃度）に依存します。

em

[相対単位] 適用要素のfont-size（フォントサイズ）を「1」としたその倍率とします。

ex

[相対単位] 適用要素の英小文字「x」１文字の高さ（x-height）を「1」としたその倍率とします。

cm

[絶対単位] センチメートル（centimeters）。
1cm = 10mm

mm

[絶対単位] ミリメートル（millimeters）。
10mm = 1cm

in

[絶対単位] インチ（inches）。
1in = 2.54cm

pt

[絶対単位] ポイント（points）。
1pt = 1/72in = 0.3528mm

pc

[絶対単位] パイカ（picas）。
1pc = 12pt

 

%

[パーセンテージ] パーセントによる長さ値の意味はそのパーセント値が指定された属性に依存します。
パーセント値はビューポート(描画領域)の大きさに対し相対的なものとして定義されます。