【SVGタグ】pathタグのd属性のコマンドの大文字と小文字の違いを実例で解説（lとLの違い）

SVGタグの中のpathタグは複雑なイラストが作成できる非常に強力な描画ツールです。

その分、コマンド（命令）がたくさんあり複雑です。ここではコマンドの中の大文字と小文字の違いを解説しています。（例「L」と「l」の違い）

d属性のコマンドの大文字と小文字の違い

d属性のコマンドには「大文字」と「小文字」があります。（例えば「L 10 0」と「l 10 0」は違います！ ）

なお、コマンドには開始点を表すM（Move to）がありますが、Mコマンドは常に絶対座標です。

（実例）Lとlの違い

簡単な例として、L（Line to）コマンドとl（line to）コマンドを使って、同じ直線を描いたコードを紹介します。

L（絶対座標）で記述する場合

大文字のLで記述する場合、指定する座標は絶対座標でビューポート左上の（0,0）を基準とした場所が開始点になります。

<svg width="200" height="200" style="border: 1px solid #ccc;">
  <path d="M 0 0 L 50 50 L 100 50 L 100 100" 
        stroke="red" stroke-width="2" fill="none" />
</svg>

• 「M 0 0」で(0,0)を開始点としてセットします。
• 「L 50 50」で(50, 50)の位置に次の点をプロットします。（ (0,0)→(50,50)をつなぐ斜め線となります）
• 「L 100 50」で(100, 50)の位置に次の点をプロットします。（ y座標の位置が50pxで前の点と同じなので、水平方向の線になります ）
• 「L 100 100」で(100, 100)の位置にの位置に次の点をプロットします。（ x座標の位置が100pxで前の点と同じなので、垂直方向の線になります ）

l（相対座標）で記述する場合

小文字の l で記述する場合、指定する座標は相対座標で前の点の座標が開始点で、そこからどれだけ動くかの指定になります。

<svg width="200" height="200" style="border: 1px solid #ccc;">
  <path d="M 0 0 l 50 50 l 50 0 l 0 50" 
        stroke="blue" stroke-width="2" fill="none" />
</svg>

• M 0 0: 描画の開始点を(0, 0)に移動します。（Mは常に絶対座標です）
• l 50 50: 現在の位置(0, 0)から、相対的にx軸方向に50、y軸方向に50移動した点へ直線を引きます。到達点は (0+50, 0+50) = (50, 50) です。
• l 50 0: 現在の位置(50, 50)から、相対的にx軸方向に50、y軸方向に0移動した点へ直線を引きます。到達点は (50+50, 50+0) = (100, 50) です。
• l 0 50: 現在の位置(100, 50)から、相対的にx軸方向に0、y軸方向に50移動した点へ直線を引きます。到達点は (100+0, 50+50) = (100, 100) です。

感覚的に描く場合は小文字の相対座標の方がわかりやすいです。

小文字の方が自由度が高い

ロゴなどのようにパターン化した図形や、動的に動く図形を描く場合、小文字の相対座標の方が便利です。

なぜなら、対象の図形を別の場所に動かしたい場合、小文字（相対座標）であれば開始点のMの座標を動かすだけで済みます。

一方、大文字（絶対座標）で指定している場合、開始点Mが変われば、それに合わせて他の座標も全て変更する必要があります。

小文字で描いた図形の移動

例えば、以下のようにビューポートの中に赤い30pxの正方形があるとします。

<svg width="200" height="200" style="border: 1px solid #ccc;">
  <path d="M 10 10 l 30 0 l 0 30 l -30 0 Z"
        stroke="red" stroke-width="2" fill="none" />
</svg>

この図形を他の場所に移動させたい場合、開始点のMコマンドの座標のみを変更すれば移動が完了します。

　↓　「M 10 10」を「M 100 100」に変更

<svg width="200" height="200" style="border: 1px solid #ccc;">
  <path d="M 100 100 l 30 0 l 0 30 l -30 0 Z"
        stroke="red" stroke-width="2" fill="none" />
</svg>

移動が簡単に完了しました。

大文字で描いた図形の移動

上記と同じように、ビューポートの中に赤い30pxの正方形があるとします。

<svg width="200" height="200" style="border: 1px solid #ccc;">
  <path d="M 10 10 L 10 40 L 40 40 L 40 10 Z"
        stroke="red" stroke-width="2" fill="none" />
</svg>

この図形を他の場所に移動させたい場合、開始点のMコマンドの座標に伴い、他の座標も全て変更する必要があります。

　↓　「M 10 10」を「M 100 100」に変更した場合

<svg width="200" height="200" style="border: 1px solid #ccc;">
  <path d="M 100 100 L 100 140 L 140 140 L 140 100 Z"
        stroke="red" stroke-width="2" fill="none" />
</svg>

まとめ

SVGのpathタグの基本的な解説では大文字を使うことが多いですが、実用的には小文字の相対座標を使うことで、パスの定義がより簡潔になり、再利用性が高まります。

パスの開始点は絶対座標（M）で決め、そこから図形を形作るためにどれくらい移動するかを小文字コマンドで指定することをお勧めします。