SVGパスの2次ベジェ（Q）コマンドを理解する
SVGの2次ベジェ曲線コマンド（Q）と、その単一コントロールポイントがスムーズな曲線を作成する方法を学びます。3次ベジェや滑らかな2次（T）と比較します。
Path Commands
詳細な説明
2次ベジェコマンド（Q）
Qコマンドは単一のコントロールポイントを使用して曲線を描画します。3次ベジェ（C）よりシンプルですが、スムーズでエレガントな曲線を生成します。
構文
Q x1,y1 x,y
- (x1, y1) — コントロールポイント
- (x, y) — エンドポイント
パスの例
M 10,80 Q 52,10 95,80
(10, 80)から始まり、(52, 10)に向かって引かれ、(95, 80)で終わります。結果は対称的な放物線アーチです。
2次 vs. 3次
| 特徴 | 2次（Q） | 3次（C） |
|---|---|---|
| コントロールポイント | 1 | 2 |
| 柔軟性 | 対称的な曲線 | 非対称的な曲線 |
| パラメータ | 4つの数値 | 6つの数値 |
| 用途 | シンプルなアーチ、UI曲線 | 複雑なイラスト |
2次ベジェは常に3次ベジェに変換できます（両方の3次コントロールポイントを端点から2次コントロールポイントへの線の2/3の位置に配置）が、その逆はできません。
滑らかな2次（T）
Tコマンドは、前のコントロールポイントを現在の点を中心に反転して2次曲線を続けます。コントロールポイントを指定せずにスムーズな続きが得られます：
M 10,80 Q 52,10 95,80 T 180,80
反転されたコントロールポイントが鏡像の曲線を作成します。
よくあるパターン
2次ベジェは以下に最適です：
- ツールチップの矢印：2つの要素を接続するシンプルなアーチ
- 下線装飾：テキストの下の微妙な曲線
- 接続線：グラフのノード間のスムーズなリンク
ユースケース
2次ベジェ曲線は、シンプルなUI装飾、ツールチップコネクター、グラフのエッジ、最小限の複雑さでスムーズな曲線が必要なあらゆる状況に最適です。TrueTypeフォントのアウトラインでも使用されています。