いつもはイラレなどで書き出してしまうところを、ちょっと中身をみて編集してみた時に困惑したのでメモ。

line、rect、polygon、circle、ellipseは、なんとなくわかったのですが、
困惑したのは、path。。。
下記の記事を参考にして理解しました。

困惑したところ

ソースをパッとみた感じ（調べる前）では、pathタグにd=でクリッカブルマップ（イメージマップ）みたいに座標みたいな数字を入れているみたいだったので、適当に数字いじってみたのですが、ぐちゃぐちゃになりました。
気になったは、MとかLとか入っていること。。。

パス描画の命令を記述

MとかLとかは命令とのこと。
参考サイトではこう書いてありました。

M (x y)+ : x, y に移動 (Move to)
L (x y)+ : x, y に線を引く (Lineto)
H (x)+ : 水平方向に線を引く (Horizontal lineto)
V (y)+ : 垂直方向に線を引く (Vertical lineto)
S (x1 y1 x y)+ : 制御点(x1, y1)、終点(x, y) とする二次ベジェ曲線 (Shorhand/smooth curveto)
C (x1 y1 x2 y2 x y)+ : 制御点1(x1, y1)、制御点2(x2, y2)、終点(x, y) とする三次ベジェ曲線 (Curveto)
Z : パスを閉じる (Closepath)

ここでなるほど〜と理解。
座標をただ入力するのと違い、描画を命令するということが違いであり、僕の大きな勘違いだったことを理解しました。

参考に書く

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 5 20 L 20 5 L 35 20 L 20 35 Z" stroke="red" fill="transparent" stroke-width="4" />
</svg>

とりあえずこんな感じ

そして、座標を入力するのとは違う点

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 5 20 L 20 5 L 35 20 L 20 35 Z M 20 45 L 45 20 L 70 45 L 45 70 Z" stroke="red" fill="transparent" stroke-width="2" />
</svg>

１つ目のソースの後に、またMで位置を指定すると、pathタグ1つで2つのオブジェクトが描ける。

まとめ

いつもイラレなどのソフトで作成していたので、さらっとやっていましたが、勉強になりました。何かに困ったら、ソースみてみるのが良いですね。