SVG Path完全ガイド：基礎から応用まで、パスデータの書き方と実践例を徹底解説

SVG（Scalable Vector Graphics）において、<path>要素は最も強力で柔軟な要素です。直線、曲線、複雑な形状まで、あらゆるグラフィックを単一の要素で定義できます。本記事では、SVG pathの核心であるd属性のコマンドを基礎から詳細に解説し、実践的なコード例を通じて、その完全な活用方法を習得することを目指します。

SVG Pathの基礎：d属性とコマンド

SVG pathの動作は、すべてd（データ）属性内の一連のコマンドによって定義されます。各コマンドは一文字のアルファベットと、その後に続く数値パラメータで構成されます。コマンドは大文字（絶対座標）と小文字（相対座標）で区別されます。

主要なパスコマンド一覧

M (moveto): ペンを指定した座標に移動（パスの開始点）。
L (lineto): 現在点から指定座標まで直線を引く。
H / V: 水平/垂直方向のみの直線を引く。
Z (closepath): 現在点から開始点まで直線を引き、パスを閉じる。
C (curveto): 3次ベジェ曲線を描画（2つの制御点を使用）。
Q (quadratic curveto): 2次ベジェ曲線を描画（1つの制御点を使用）。
A (elliptical arc): 楕円弧を描画（半径、回転、フラグ等のパラメータ）。

実践：様々な環境でのSVG Pathの使い方

SVG pathは、静的なSVGファイルだけでなく、CSSやJavaScriptを用いて動的に操作・生成することが可能です。

1. 静的なSVGファイル内での定義

これが最も基本的な使用方法です。<svg>要素内に<path>を直接記述します。

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 単純な三角形 -->
  <path d="M 50 150 L 150 150 L 100 50 Z"
        fill="lightblue" stroke="navy" stroke-width="3"/>
  
  <!-- 曲線を用いたハート形 -->
  <path d="M 100,30 C 120,10 160,10 180,30 C 200,50 200,90 180,110 L 100,190 L 20,110 C 0,90 0,50 20,30 C 40,10 80,10 100,30 Z"
        fill="pink" stroke="red" stroke-width="2"/>
</svg>

2. CSSによるスタイリングとアニメーション

SVG pathはCSSのプロパティで装飾でき、stroke-dasharrayとstroke-dashoffsetを組み合わせることで、描画アニメーションを実現できます。

.my-path {
    stroke: #3498db;
    stroke-width: 4;
    fill: none;
    stroke-dasharray: 1000; /* パスの全長に合わせて調整 */
    stroke-dashoffset: 1000;
    animation: draw 3s ease-in-out forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

<svg viewBox="0 0 100 100">
  <path class="my-path" d="M 10,50 Q 50,10 90,50 T 150,50"/>
</svg>

3. JavaScriptによる動的生成と操作

JavaScriptを使用すると、ユーザー操作に応じてSVG pathを動的に作成したり、その形状を変更したりできます。SVG DOM API を直接操作するか、D3.jsのような強力なライブラリを利用する方法があります。

// 純粋なJavaScriptでpath要素を作成する例
const svgNS = "http://www.w3.org/2000/svg";
const path = document.createElementNS(svgNS, 'path');

// 複雑なパスデータを動的に構築
let pathData = `M ${startX} ${startY}`;
points.forEach(point => {
    pathData += ` L ${point.x} ${point.y}`;
});
pathData += ' Z';

path.setAttribute('d', pathData);
path.setAttribute('fill', 'lightgreen');
document.getElementById('my-svg').appendChild(path);

解決策とよくある間違いの比較

SVG pathを扱う上で、特に初心者が陥りやすい落とし穴を比較します。

状況／目的	推奨される方法／正しい理解	よくある間違い／非効率な方法
パスを閉じる	終点から始点へ直線を引き形状を閉じるには `Z` コマンドを使用。	始点の座標を再度 `L` で指定する（`Z`より冗長）。
相対座標の利用	繰り返しパターンや、パスの一部を相対的に調整したい場合、小文字コマンド（`l`, `c`など）を使うと保守性が向上。	すべて絶対座標（大文字コマンド）で記述し、変更が困難。
複雑な曲線	滑らかで対称的な曲線には `S`（スムーズ3次ベジェ）や `T`（スムーズ2次ベジェ）コマンドが便利。	すべての曲線を `C` や `Q` で無理やり記述し、データが冗長。
弧（A）コマンド	`A` コマンドのパラメータ（`large-arc-flag`, `sweep-flag`）を理解し、2つの可能な弧から意図した方を選択する。	パラメータを試行錯誤せず、期待しない弧が描画される。
パスの最適化	SVGエディタや SVGO のような最適化ツールを使用して、不要なコマンドや精度を削減。	手書きやソフトウェア出力の冗長なパスデータをそのまま使用。

よくある質問（FAQ）

Q1: SVG Pathの `d` 属性の中で、MやLなどのコマンドの後に続く数字の意味は？

A1: 数字は座標を表します。M 10 20 は「(10, 20)の座標に移動せよ」という意味です。コマンドによって必要な数字の数は異なります（Lはx,yの2つ、Cはx1,y1,x2,y2,x,yの6つ）。カンマやスペースで区切られていれば、パーサーは解釈できますが、スペース区切りが一般的です。

Q2: 既存のSVGアイコンのパスデータを取得・編集するにはどうすればいいですか？

A2: 多くの方法があります。1) ブラウザの開発者ツールでSVG要素をインスペクトし、<path>のd属性を直接コピーする。2) Adobe IllustratorやInkscape、Figmaなどのベクターグラフィックツールでファイルを開き、パス情報を確認・編集する。3. オンラインのSVGエディタを利用する。

Q3: JavaScriptでパスにアニメーションを付ける最も簡単な方法は？

A3: CSSによるstroke-dashoffsetアニメーション（上記「CSSによる...」セクション参照）が、ライブラリ不要で比較的簡単です。より高度な制御（モーフィング等）には、GreenSock (GSAP) の DrawSVGPlugin や MorphSVGPlugin の利用が強力です。

まとめ

SVG pathは、そのd属性に秘められたコマンド体系を理解することで、Web上で表現できるグラフィックの可能性が大きく広がります。静的なアイコンから、インタラクティブなデータビジュアライゼーション、滑らかなUIアニメーションまで、その応用範囲は極めて広いです。本ガイドで紹介した基礎コマンド、実践例、注意点を参考に、まずは簡単な形状から<path>を書き始め、徐々に複雑な図形や動的な操作に挑戦してみてください。W3CのSVG Paths公式仕様も、より深く学ぶための最高のリソースです。