SVGのpath（d）コマンド解説
例つきリファレンス
<path> はSVGで最も強力な図形です。d 属性が一連のコマンドで線を記述します。大文字は絶対、小文字は現在地からの相対です。
移動と直線
- M x y - 「ペン」を移動（描画なし）。
- L x y - x,yまで直線。
- H x - xまで水平線。
- V y - yまで垂直線。
- Z - パスを閉じる（始点へ戻る）。
ベジェ曲線
- C x1 y1 x2 y2 x y - 2つの制御点を持つ3次曲線。
- S x2 y2 x y - 滑らかな3次（直前の制御点を反映）。
- Q x1 y1 x y - 2次曲線（制御点1つ）。
- T x y - 滑らかな2次（直前の制御点を反映）。
円弧
- A rx ry rot large-arc sweep x y - x,yまでの楕円弧。
例：三角形
<path d="M 50 10 L 90 90 L 10 90 Z" fill="#6c8cff"/>
(50,10)へ移動、(90,90)へ直線、(10,90)へ直線、閉じる。
例：曲線
<path d="M 10 80 C 40 10 65 10 95 80" fill="none" stroke="#ff6c9c" stroke-width="4"/>
手で書かない
曲線を手計算するのは大変です。svgdeskではペンや鉛筆で描き、ノードを視覚的に編集すると d が自動生成されます。コードパネルで確認できます。