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)へ線を引き、最初の点（10,10）に戻して閉じます。相対座標の小文字コマンド（m・l・z）は直前の終点からの距離で指定するため、パスを移動しても形状が崩れません。アイコンやUIコンポーネントのSVGでは相対座標の方が汎用性が高く、多くのエクスポートツールが相対座標形式を出力します。
曲線コマンド：C・Q・A
Cはキュービックベジェ曲線（制御点2つ）、Qは二次ベジェ曲線（制御点1つ）、Aは楕円弧です。Cコマンドは「C x1 y1, x2 y2, x y」で制御点2点と終点を指定します。CSSのcubic-bezierと同じ原理で、制御点の位置によって曲線の形状が変わります。Aコマンドは「A rx ry x-rotation large-arc-flag sweep-flag x y」という7パラメータを持ちます。rx・ryは楕円の半径、フラグ値の組み合わせで同じ2点を結ぶ4通りの弧から目的の弧を選択できます。ロゴやアイコンの複雑な輪郭を描く際に頻繁に登場します。
H・V・S・T の省略コマンド
Hは水平線（Horizontal Line To）、Vは垂直線（Vertical Line To）の省略形で、座標を1つだけ指定します。矩形や格子状のパスを書くときに記述が短くなります。SはCの滑らかな続き（Smooth Cubic）で、直前のCコマンドの第2制御点の対称点を第1制御点として自動計算するため、パスのつなぎ目が滑らかになります。TはQの滑らかな続き（Smooth Quadratic）で同様の仕組みです。これらの省略コマンドはFigmaやIllustratorが出力するSVGに多用されており、SVG Path Visualizerでステップ実行すると直感的に理解できます。
デバッグ・学習での活用
FigmaやIllustratorが出力したSVGのパスは複雑なコマンド列になりがちで、手修正が難しいです。SVG Path Visualizerで各コマンドをクリックしてステップ実行すると、どのコマンドがどの部分を描いているか一目でわかります。パスを最適化・手修正する際のデバッグにも活用できます。また学習用途としても有効で、「このコマンドを追加するとパスがどう変わるか」をリアルタイムで確認しながら、d属性の記法を体感的に習得できます。SVGOなどの最適化ツールが変換したパスを検証する用途にも使えます。