T
svg bezier-curve vector-graphics css-animations web-design frontend

SVG パスとベジェ曲線可視化ガイド：ベクターグラフィックスをマスターする

SVG パスコマンドとベジェ曲線を完全に理解するための可視化ガイド。M、L、H、V、Z コマンドや CSS アニメーション用の cubic-bezier について学びます。

2026-04-11

SVG パスとベジェ曲線可視化ガイド：ベクターグラフィックスをマスターする

スケーラブル・ベクター・グラフィックス (SVG) は現代のウェブデザインのバックボーンです。JPEG や PNG のようなラスター画像とは異なり、SVG は数学的なパスで定義されているため、品質を損なうことなく無限にスケールできます。複雑な SVG 形状の中心にあるのは、<path> 要素と、エレガントな数学であるベジェ曲線です。

このガイドでは、SVG パスの仕組みを分解し、さまざまな種類のベジェ曲線を探索し、可視化ツールを使用して素晴らしいグラフィックや CSS アニメーションを作成する方法を紹介します。

1. SVG パスとは何ですか？

SVG パスは、<path> 要素とその d (data) 属性によって定義されます。この属性には、ブラウザのレンダラーに形状の描き方を伝える一連のコマンドと座標が含まれています。

キャンバス上のペンを想像してください。ペンをどこに移動させ、いつ描き始め、どのような線（直線、曲線、または円弧）を作成するかを伝えます。

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M 10 10 L 190 10 L 190 190 Z" fill="orange" />
</svg>

上記の例では、パスは (10, 10) に移動し、(190, 10) に線を引き、次に (190, 190) に線を引き、最後にパスを閉じて開始点に戻ります。

2. 主要な SVG パスコマンド

SVG パスコマンドは大文字と小文字を区別します。大文字コマンド (例: M) は絶対座標を使用し、小文字コマンド (例: m) は現在の位置からの相対座標を使用します。

基本的な描画コマンド:

  • M / m (Move To): 移動。描画せずにパスの新しい開始点を設定します。
  • L / l (Line To): 線。現在の位置から指定された (x, y) 座標まで直線を引きます。
  • H / h (Horizontal Line To): 水平線。指定された x 座標まで水平線を引きます。
  • V / v (Vertical Line To): 垂直線。指定された y 座標まで垂直線を引きます。
  • Z / z (Close Path): パスを閉じる。現在のサブパスの開始点まで直線を引いて形状を閉じます。

3. SVG 曲線のマスター

曲線こそが SVG のパワーの源です。SVG パスには主に 3 種類の曲線があります：三次ベジェ曲線、二次ベジェ曲線、および楕円円弧。

三次ベジェ曲線 (C, S)

三次ベジェ曲線には、始点（現在位置）、終点、および曲線の「引っ張り」を決定する 2 つの制御点の計 4 つの点が必要です。

  • C x1 y1, x2 y2, x y: 現在の点から (x, y) まで、(x1, y1) を開始制御点、(x2, y2) を終了制御点として使用して曲線を引きます。
  • S x2 y2, x y: 滑らかな三次ベジェ曲線。最初の制御点が前の制御点の鏡面反射であると仮定します。

二次ベジェ曲線 (Q, T)

二次ベジェ曲線はよりシンプルで、制御点を 1 つだけ使用します。

  • Q x1 y1, x y: (x, y) まで、(x1, y1) を制御点として使用して曲線を引きます。
  • T x y: 滑らかな二次ベジェ曲線。前の制御点を鏡面反射させます。

楕円円弧 (A)

  • A rx ry x-axis-rotation large-arc-flag sweep-flag x y: 楕円の半径に基づいて、現在の点と (x, y) の間に円弧を引きます。

4. ベジェ曲線とは何ですか？

ピエール・ベジェにちなんで名付けられたこれらの曲線は、コンピュータグラフィックスや関連分野で使用されるパラメトリック曲線です。これらは一連の制御点によって定義されます。

  • 線形ベジェ: 2 点間の単純な直線。
  • 二次ベジェ: 1 つの制御点を使用して 1 つの曲がりを作成します。
  • 三次ベジェ: 2 つの制御点を使用して、複雑で多方向の曲線（'S' 字型など）を作成します。

制御点の「引っ張り」が、曲線がどれだけその方向にそれるかを決定します。制御点がパスから離れるほど、曲線は鋭くなります。

5. 二次 vs 三次ベジェ：どちらを使うべきか？

特徴 二次ベジェ (Q) 三次ベジェ (C)
制御点数 1 2
複雑さ 低い（単純な曲線） 高い（複雑な形状）
ユースケース 角丸、単純な円弧 キャラクターデザイン、ロゴ、複雑なパス
パフォーマンス 計算がわずかに速い プロフェッショナルなベクター作業の標準

現代のほとんどのベクターツール（Adobe Illustrator や Figma など）は、その柔軟性から主に三次ベジェ曲線を使用しています。

6. SVG パスを可視化する方法

座標系が抽象的なことが多いため、SVG パスを手動で視覚化するのは困難です。SVG パス可視化ツールを使用すると、次のことが可能になります。

  1. 生のパスデータを貼り付ける: 即座に形状を確認できます。
  2. ポイントの切り替え: グリッド上の各ポイント (M, L, C など) の位置を特定できます。
  3. リアルタイム編集: 座標を調整して曲線の変化を即座に確認できます。
  4. パスのデバッグ: 形状が「壊れて」見える原因や不要なポイントを見つけます。

開発者にとって、可視化ツールは複雑なアイコンやイラストがどのように構成されているかを理解するために不可欠です。

7. Cubic-Bezier と CSS アニメーション

CSS では、cubic-bezier() 関数がトランジションとアニメーションのタイミング関数に使用されます。これはアニメーションの「速度曲線」を定義します。

.box {
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

CSS 用 Cubic-Bezier 可視化ツールは以下のことに役立ちます。

  • イージングの定義: 標準のデフォルト設定よりも自然に感じられるカスタムの「イーズイン・アウト」効果を作成します。
  • 「弾む」効果の作成: 制御点を 0-1 の範囲外に引き出すことで、オーバーシュートや「弾む」アニメーションを作成できます。
  • プリセットの比較: カスタム曲線を ease、linear、ease-in、ease-out と比較します。

8. よくある質問 (FAQ)

Q: SVG パスポイントとは何ですか？

A: ポイントは、コマンドに関連付けられた (x, y) 座標のペアです。例えば、L 100 200 では、ポイントは (100, 200) で、コマンドは 「Line To（～へ線を引く）」です。

Q: なぜ曲線が歪んで見えることがあるのですか？

A: これは通常、制御点が離れすぎているか、競合する方向に配置されている場合に発生します。可視化ツールを使用すると、制御点が曲線を不適切に「引っ張っている」場所を確認できます。

Q: SVG パスのパフォーマンスに制限はありますか？

A: ブラウザは何千ものパスポイントを処理できますが、多くの制御点を持つ非常に複雑なパスは、特にモバイルデバイスやアニメーションにおいてレンダリングパフォーマンスに影響を与える可能性があります。ベクターソフトウェアの「簡略化」ツールを使用してパスを簡略化するのが最善です。

Q: 二次曲線を三次曲線に変換できますか？

A: はい、どんな二次曲線も数学的に三次曲線として表現できますが、その逆は不可能です。ほとんどのツールはこの変換を自動的に処理します。

Tool3M でベクターをマスターする

SVG パスを理解することは、高性能でレスポンシブなウェブグラフィックを作成するための第一歩です。可視化ツールの拡充を進める一方で、既存のユーティリティもぜひ活用してください。

その他の開発者向けユーティリティについては、**Tool3M ホーム**をご覧ください。

ブログに戻る