SVGパスのd属性を視覚化して理解する【コマンド一覧と書き方ガイド】

SVGファイルを開いたとき、d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" のような謎の文字列を見て困ったことはありませんか？これがSVGパスのd属性です。慣れると読めるようになりますが、最初は何が描かれているか全くわかりません。このガイドでは、各コマンドの意味を解説し、ブラウザ上でリアルタイムに視覚確認しながら学ぶ方法を紹介します。

SVGパスのd属性とは

SVGの <path> 要素は、d属性にパスデータを文字列として受け取ります。この文字列はコマンドと座標の組み合わせで、「ここから始めて、ここまで直線を引いて、この曲線を描いて、閉じる」という手順書のようなものです。

IllustratorやFigmaでアイコンを書き出すと、裏ではこの形式が自動生成されています。手書きするケースは少ないですが、アニメーションの morphing（形の変形）やSVGの最適化・手動修正では読み書きできると非常に役立ちます。

コマンド一覧

SVGパスコマンドには 大文字（絶対座標） と 小文字（相対座標） の2種類があります。たとえば M は「指定した絶対座標に移動」、m は「現在位置から相対移動」です。

コマンド	名前	パラメータ	説明
M / m	Move to	x y	ペンを持ち上げて移動（線は引かない）
L / l	Line to	x y	指定座標まで直線を引く
H / h	Horizontal line	x	水平線を引く（Y座標は変わらない）
V / v	Vertical line	y	垂直線を引く（X座標は変わらない）
C / c	Cubic Bézier	x1 y1, x2 y2, x y	3次ベジェ曲線。制御点2つ＋終点
S / s	Smooth cubic	x2 y2, x y	前のC/Sの続きを滑らかに結ぶ（制御点1つ省略可）
Q / q	Quadratic Bézier	x1 y1, x y	2次ベジェ曲線。制御点1つ＋終点
T / t	Smooth quadratic	x y	前のQ/Tの続きを滑らかに結ぶ
A / a	Arc	rx ry x-rot large-arc sweep x y	楕円弧。最も複雑なコマンド
Z / z	Close path	（なし）	現在位置からパスの始点に直線を引いて閉じる

実例で読み解く

たとえばこのパスを見てみましょう：

M 100 20 L 117 70 L 170 70 L 128 100 L 144 150
L 100 122 L 56 150 L 72 100 L 30 70 L 83 70 Z

読み解くと：

• M 100 20 → 座標(100, 20)にペンを移動
• L 117 70 → (117, 70)まで直線
• …10点を直線でつないで
• Z → パスを閉じる

これは5角形の星形です。直線コマンド（L）だけで構成された比較的シンプルなパスです。

ベジェ曲線の直感的な理解

直線系のコマンド（M、L、H、V、Z）はすぐ理解できますが、曲線系のC・Q・Aは少し難しいです。

Qコマンド（2次ベジェ） はゴム紐を1本の棒で引っ張るイメージです。制御点(x1,y1)が「引っ張る位置」で、終点(x,y)がゴム紐の先端です。

Cコマンド（3次ベジェ） は棒が2本になります。始点側と終点側それぞれに制御点があるため、より自由度の高い曲線が描けます。Figma・Illustratorのパス編集でハンドルを動かすのがこの操作に対応しています。

/* 3次ベジェの例：S字カーブ */
M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80

このパスをビジュアライザーに貼り付けると、S字型の滑らかな曲線が描かれるのを確認できます。

Aコマンド（楕円弧）の読み方

AコマンドはSVGで最も読みにくいコマンドです。パラメータが7つあります：

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

• rx ry：楕円の半径（X方向・Y方向）
• x-axis-rotation：楕円の傾き（度数）
• large-arc-flag：0=短い弧、1=長い弧
• sweep-flag：0=反時計回り、1=時計回り
• x y：終点座標

円を描くには同じ半径で2つのAコマンドをつなぎます（1つのAコマンドでは完全な円を描けないため）：

M 100 50 A 50 50 0 0 1 100 150 A 50 50 0 0 1 100 50 Z

絶対座標 vs 相対座標

大文字コマンド（M、L、C…）は絶対座標、小文字（m、l、c…）は相対座標（現在位置からの差分）です。

/* 絶対座標：(0,0)から(50,50)まで、次に(100,0)まで */
M 0 0 L 50 50 L 100 0

/* 相対座標：同じ形 */
M 0 0 l 50 50 l 50 -50

ツールが生成するSVGはたいてい絶対座標を使いますが、アニメーション用に手書きするときは相対座標の方がコンパクトになることがあります。

SVGパスの最適化

IllustratorやFigmaが出力するSVGパスは、不要な小数点や冗長なコマンドが含まれていることがあります。SVG Optimizerを使うと、パスの精度を保ちながらファイルサイズを削減できます。

まとめ

SVGパスのd属性は最初は暗号のように見えますが、コマンドの種類を覚えればすぐ読めるようになります。ビジュアライザーを使えば「このコマンドがこの形を描く」という対応関係を目で確認しながら学べるので、習得スピードが格段に上がります。アイコンのカスタマイズ、モーフィングアニメーション、SVG手動編集など、パスを読み書きする場面で役立ててください。