SVGパスの d 属性とは？コマンドの読み方と使い方
SVGの <path> 要素の d 属性は、複雑な図形をコマンド列で定義します。M・L・C・Q・Aなどのコマンドを組み合わせることで、直線・曲線・円弧を自在に描けます。SVG Path Visualizerを使えば、各コマンドの動作をステップ実行で視覚的に確認できます。
基本コマンド：M・L・Z
Mはペンを持ち上げて移動（Move To）、Lは直線を引く（Line To）、Zはパスを閉じる（Close Path）です。大文字が絶対座標、小文字が相対座標を意味します。例えばM 10 10 L 90 90 Zは(10,10)から(90,90)へ線を引き、元の位置に戻して閉じます。
曲線コマンド：C・Q・A
Cはキュービックベジェ曲線（制御点2つ）、Qは二次ベジェ曲線（制御点1つ）、Aは楕円弧です。CSSのcubic-bezierと同じ原理で、制御点の位置によって曲線の形状が変わります。Aコマンドは半径・回転角・フラグ・終点座標の7パラメータを持ちます。
H・V・S・T の省略コマンド
Hは水平線（Horizontal Line To）、Vは垂直線（Vertical Line To）の省略形で座標を1つだけ指定します。SはCの滑らかな続き（Smooth Cubic）、TはQの滑らかな続き（Smooth Quadratic）で、直前コマンドの終点を基準に制御点を自動計算します。
デバッグ・学習での活用
FigmaやIllustratorが出力したSVGのパスは複雑なコマンド列になりがちです。SVG Path Visualizerで各コマンドをクリックしてステップ実行すると、どのコマンドがどの部分を描いているか一目でわかります。パスを最適化・手修正する際のデバッグにも活用できます。