SVGマスターへの道

<path> 要素と d 属性

パスは、<path> タグを使い、その形状を d (dataの略) 属性に一連のコマンドと座標値で記述します。

<svg width="200" height="200" viewBox="0 0 100 100">
  <path d="M10 10 L90 10 L50 90 Z" fill="orange" stroke="black" />
  <!-- この d="..." の部分がパスの形状を定義します -->
</svg>

上の例では、M10 10 で (10,10) の点にペンを移動し、L90 10 で (90,10) へ直線を、L50 90 で (50,90) へ直線を、そして Z でパスを閉じて三角形を描いています。

パスコマンドには、大文字と小文字の2種類があります。

• 大文字コマンド (例: M, L, C): 絶対座標を指定します。つまり、SVGキャンバスの原点 (通常は左上) からの座標です。
• 小文字コマンド (例: m, l, c): 相対座標を指定します。つまり、直前の点の位置からの相対的な移動量や距離です。

それでは、主要なパスコマンドを一つずつ見ていきましょう！

移動と直線コマンド

まずは基本の移動と直線です。

• M x y (moveto): ペンを指定した (x,y) 座標へ持ち上げて移動します（線は描かれません）。パスは通常このコマンドから始まります。小文字 m dx dy は現在の位置から (dx,dy) だけ移動します。
• L x y (lineto): 現在位置から指定した (x,y) 座標へ直線を引きます。小文字 l dx dy は現在の位置から (dx,dy) だけ先の点へ直線を引きます。
• H x (horizontal lineto): 現在位置から水平線（Y座標は同じまま）をX座標 x まで引きます。小文字 h dx は現在のX座標から dx だけ水平線を引きます。
• V y (vertical lineto): 現在位置から垂直線（X座標は同じまま）をY座標 y まで引きます。小文字 v dy は現在のY座標から dy だけ垂直線を引きます。
• Z または z (closepath): 現在位置からパスの始点（一番最初の M または m コマンドで指定した点）へ直線を引いて、パスを閉じます。大文字小文字の区別はありません。

3次ベジェ曲線コマンド

滑らかな曲線を描くための代表的なコマンドがベジェ曲線です。3次ベジェ曲線は、始点、終点、そして2つの制御点で定義されます。制御点は、曲線の曲がり具合をコントロールします。下のデモでは、黒い点が始点と終点、灰色の点が制御点です。これらの点をドラッグできます。

• C x1 y1, x2 y2, x y (curveto): 現在位置から点 (x,y) へ3次ベジェ曲線を引きます。(x1,y1) は始点側の制御点、(x2,y2) は終点側の制御点です。小文字 c dx1 dy1, dx2 dy2, dx dy は相対座標。
• S x2 y2, x y (shorthand/smooth curveto): 前の C または S コマンドの制御点を自動的に計算し、滑らかに繋がる3次ベジェ曲線を引きます。(x2,y2) は新しい終点側の制御点、(x,y) は新しい終点です。もし前のコマンドが C や S でなければ、始点側の制御点は現在の点と同じとみなされます。小文字 s dx2 dy2, dx dy は相対座標。

2次ベジェ曲線コマンド

2次ベジェ曲線は、始点、終点、そして1つの制御点で定義されます。3次ベジェ曲線よりシンプルですが、表現力は少し劣ります。下のデモでは、黒い点が始点と終点、灰色の点が制御点です。これらの点をドラッグできます。

• Q x1 y1, x y (quadratic Bézier curveto): 現在位置から点 (x,y) へ2次ベジェ曲線を引きます。(x1,y1) が制御点です。小文字 q dx1 dy1, dx dy は相対座標。
• T x y (shorthand/smooth quadratic Bézier curveto): 前の Q または T コマンドの制御点を自動的に計算し、滑らかに繋がる2次ベジェ曲線を引きます。(x,y) は新しい終点です。もし前のコマンドが Q や T でなければ、制御点は現在の点と同じとみなされます。小文字 t dx dy は相対座標。

円弧コマンド

A コマンドは楕円の弧を描きます。これは最も複雑なコマンドで、多くのパラメータを持ちます。

• A rx ry x-axis-rotation large-arc-flag sweep-flag x y (elliptical arc)
  • rx, ry: 楕円のX半径とY半径。
  • x-axis-rotation: 楕円のX軸の回転角度（度単位）。
  • large-arc-flag: 0 (小さい方の弧) か 1 (大きい方の弧) を指定。
  • sweep-flag: 0 (反時計回りの弧) か 1 (時計回りの弧) を指定。
  • x, y: 弧の終点。
  小文字 a は相対座標。

始点と終点が同じでも、large-arc-flag と sweep-flag の組み合わせで4種類の異なる弧が描けます（rx, ry が十分大きい場合）。

d属性の書き方のコツ

• コマンドと数値の間は、カンマ(,)やスペース( )で区切ります。カンマは多くの場合省略可能で、スペースだけでも解釈されます。M10,20L30,40 も M 10 20 L 30 40 も同じです。
• 数値が連続する場合もスペースで区切ります。例えば、L 10 20 30 40 は L 10 20 L 30 40 と同じ意味になります。
• 小数点やマイナス符号も使えます。L 10.5 -20.75
• 可読性を上げるために、コマンドごとに改行を入れることもできます（文字列データとしては連続しています）。

まとめ

<path> 要素は、SVGで最も表現力豊かな描画ツールです。移動、直線、ベジェ曲線、円弧といったコマンドを組み合わせることで、想像できるほぼすべての形を描き出すことができます。各コマンドの動作と、特にベジェ曲線の制御点の役割を理解することが、パスを自在に操るための鍵となります。

インタラクティブデモで制御点をドラッグしたり、スライダーを操作したりして、パスの挙動を身体で覚えてみてください。最初は複雑に感じるかもしれませんが、慣れれば非常に強力な武器になります。

次は、「色とスタイル - 見た目を飾ろう」で、これらのパスや図形に美しい見た目を与える方法を探求しましょう！