1. SVG で描画できる要素

rect 要素

四角、長方形、角丸を描画

<rect x="10" y="10" rx="10" ry="10" width="40" height="40" />

x,y（始点）、rx,ry（角丸）、width,height（幅、高さ）

circle 要素

円を描画

<circle cx="50" cy="50" r="50" />

cx,cy（円の中心点）、r（円の半径）

ellipse 要素

楕円・円などを描画。circle との違いは円の半径を x,ｙで指定できるので楕円なども作成可能

<ellipse cx="50" cy="50" rx="50" ry="25" />

cx,cy（円の中心点）、rx,ry（円の半径 x,y）

line 要素

直線を描画

<line x1="10" y1="10" x2="50" y2="50" />

polyline 要素

複数の直線を描画

<polyline points="0 0, 50 50, 100 100,  ..." />

x y, x y, ...（x,y の座標を指定）

polygon 要素

polyline 同様に複数の直線を描画。polyline との違いは最後にパスが自動で始点に戻るので多角形を描画するときに使用できる

<polygon points="0 0, 50 50, 100 100,  ..." />

x y, x y, ...（x,y の座標を指定）、最後自動で始点に戻る。

2. path 要素の取り扱い

path 要素は d 属性の中にコマンドを入力していくことでパスを描画していきます

<path d=" ... " />

コマンド	内容
M（m） x y	パスの始点を設定
H（h） x	水平線を描画
V（v） y	垂直線を描画
L（l） x y	直線を描画
Z（z）	始点に戻る
C（c） x1 y1, x2 y2, x y	三次ベジェ曲線
S（s） x2 y2, x y	三次ベジェ曲線の短縮
Q（q） x1 y1, x y	二次ベジェ曲線
T（t） x y	二次ベジェ曲線の短縮
A（a） rx ry x-axis-rotation large-arc-flag sweep-flag x y	円弧を描画

「C」
x1 y1(曲線の始点向けの制御点)、x2 y2（曲線の終点向けの制御点）、x y（終点を設定）。C コマンドは漢字の八の字をイメージして制御点を入力すると曲線になります。

「Q」
Q コマンドは C コマンドの簡易版で、x1 y1（制御点）、x y（終点）を設定します。Q コマンドは三角形をイメージして制御点を入力すると曲線になります。

「A」
rx ry(円の半径 x,y)、x-axis-rotation（円の角度を設定）、large-arc-flag（円が 180 度より大きいか小さいか、1 か 0 で設定）、sweep-flag（正の角度で動き始めるか負の角度で動き始めるか、1 か 0 で設定）、x y（終点）

パスコマンドの大文字（絶対）、小文字（相対）

コマンドは大文字と小文字で設定が変わります。大文字だと絶対座標、小文字だと相対座標になります。 例えば、viewBox="0 0 100 100"の場合、座標は、左上端が（x:0, y:0）、中心が(x:50, y:50)、右下端が(x:100, y:100)になります。

絶対座標の場合、中心から右下に 10px の線を引きたい場合下記のように記述します。（始点の座標（50 50）に設定して座標（60 60）に直線を描画）

<path d="M50 50 L60 60" fill="transparent" stroke="#000" />

相対座標の場合、中心から右下に 10px の線を引きたい場合下記のように記述します。（始点の座標（50 50）に設定して、その始点から x10、y10 移動した位置まで直線を描画）

<path d="m50 50 l10 10" fill="transparent" stroke="#000" />

3. SVG のパスから図形を作成する

path 要素から図形を作成する場合、下記のように stroke 属性を設定しておくと線が描画されるので分かりやすいと思います。

<path d=" ... " fill="transparent" stroke="#000" />

fill - 塗りつぶす色

stroke - 線の色（枠線の色）

共通

ここでは svg タグの設定は共通で下記のようにしています。「...」の部分に path 要素などを入れます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">...</svg>

四角

<path d="M0 0 H 100 V 100 H 0 Z" />

<rect x="0" y="0" width="100" height="100" />

四角（角丸）

<rect x="0" y="0" rx="20" ry="20" width="100" height="100" />

四角（二等分）

<path d="M0 0 L100 100 0 100 Z" fill="#000" />
<path d="M100 0 L100 100 0 0 Z" fill="#666" />

四角（四等分）

<path d="M0 0 L50 50 0 100 Z" fill="#000" />
<path d="M0 0 L50 50 100 0 Z" fill="#333" />
<path d="M100 100 L50 50 0 100 Z" fill="#666" />
<path d="M100 100 L50 50 100 0 Z" fill="#999" />

円

<circle cx="50" cy="50" r="50" />

円（二等分）

<path
  d="
  M 0 50
  A 50 50 0 0 1 100 50
"
  fill="#000"
/>
<path
  d="
  M 100 50
  A 50 50 0 0 1 0 50
"
  fill="#666"
/>

円（四等分）

<path
  d="
  M 0 50
  A 50 50 0 0 0 50 100
  L 50 50 Z
"
  fill="#000"
/>
<path
  d="
  M 100 50
  A 50 50 0 0 1 50 100
  L 50 50 Z
"
  fill="#333"
/>
<path
  d="
  M 50 0
  A 50 50 0 0 1 100 50
  L 50 50 Z
"
  fill="#666"
/>
<path
  d="
  M 50 0
  A 50 50 0 0 0 0 50
  L 50 50 Z
"
  fill="#999"
/>

三角

<path d="M50 0 L 100 100 0 100 Z" />

<polygon points="50 0, 100 100, 0 100, 50 0" />

楕円

<ellipse cx="50" cy="50" rx="50" ry="25" />

目型

<path
  d="
  M 0 50
  C 20 10 80 10 100 50
  C 80 90 20 90 0 50
"
/>

波型 1

<path
  d="
  M 0 50
  Q 25 25 50 50
  T 100 50
  L 100 100 0 100 Z
"
/>

波型 2

<path
  d="
  M 0 50
  Q 10 60 20 50
  T 40 50 60 50 80 50 100 50
  L 100 100 0 100 Z
"
/>

三本線

<path d="M 20 25 H 80" stroke="#000" stroke-width="8" stroke-linecap="round" />
<path d="M 20 50 H 80" stroke="#000" stroke-width="8" stroke-linecap="round" />
<path d="M 20 75 H 80" stroke="#000" stroke-width="8" stroke-linecap="round" />

stroke-width - 線の太さ（枠線の太さ）
stroke-linecap - 線の端の形（butt / square / round）
butt - 線がパスの長さになる
square - stroke-width の値が反映されるので実際のパスより長くなる
round - 実際のパスより長くなり、角丸になる

バツ印

<line
  x1="25"
  y1="25"
  x2="75"
  y2="75"
  stroke="#000"
  stroke-width="8"
  stroke-linecap="butt"
/>
<line
  x1="25"
  y1="75"
  x2="75"
  y2="25"
  stroke="#000"
  stroke-width="8"
  stroke-linecap="butt"
/>

波線（破線）

<path
  d="
  M 0 50
  Q 25 25 50 50
  T 100 50
"
  fill="none"
  stroke="#000"
  stroke-width="8"
  stroke-dasharray="6"
/>

stroke-dasharray - 破線（数値を「,」で区切ることで破線の幅が調整できる（例：6,12,6)

矢印

<path
  d="
  M 20 60
  L 50 30 80 60
"
  fill="none"
  stroke="#000"
  stroke-width="8"
  stroke-linejoin="bevel"
/>

stroke-linejoin - ２つの線が交わる角の形（miter / bevel / round）
miter - 普通の角
bevel - 角の先端がなくなる
round - 角丸になる