svg の path 要素を使用すると、直線と曲線を組み合わせて多様な図形を描画できます。
図形の形状は、path 要素の d 属性に一連のコマンドを指定することで定義されます（参考: path 要素のチートシート）。
しかし、ベジェ曲線の制御点をどのように指定すれば、どのような曲線が描かれるのかが直感的に理解しにくいことがあります。 ここではさまざまな曲線の描画例を紹介します。
C / S コマンドによる 3 次ベジェ曲線
C コマンド は、2 つの制御点と終点を指定することで、始点（現在座標）と終点を曲線で繋ぎます。
path の d 属性の内容は、M始点 C制御点1 制御点2 終点 のような形で指定することになります。
始点
制御点1 制御点2 終点 | <path d="M0,0 C5,70 95,70 100,0" stroke="black" stroke-width="2" fill="none" /> |
始点
制御点1 制御点2 終点 | <path d="M0,50 C50,150 50,-50 100,50" stroke="black" stroke-width="2" fill="none"/> |
C コマンドによる 3 次ベジェ曲線に続けて次の曲線を描く場合、S コマンド を使用すると 1 つ目の制御点を省略してなめらかに繋ぐことができます。
この場合、先行する曲線の 2 つ目の制御点の反対側に 1 つ目の制御点を指定したのと同様に振る舞います。
S コマンドの引数としては、2 つの座標値を S制御点2 終点 の形で渡します（C コマンドと異なり、制御点 1 の座標値を省略します）。
始点 Cコマンドの制御点1 Cコマンドの制御点2 Cコマンドの終点 = 2つ目の始点 Sコマンドの（仮想的な）制御点1 Sコマンドの制御点2 Sコマンドの終点 | <path d="M0,50 C20,100 80,100 100,50 S180,0 200,50" stroke="black" stroke-width="2" fill="none"/> |
Q / T による 2 次ベジェ曲線
Q コマンド を使った 2 次ベジェ曲線は、制御点を 1 つだけ指定するので C コマンド（3 次ベジェ曲線）よりも簡単です。
始点
制御点
終点 | <path d="M0,0 Q50,100 100,0" stroke="black" stroke-width="2" fill="none"/> |
Q コマンドの曲線に続けて次の曲線を描画するときは、T コマンド を使うことで制御点の指定を省略できます。
その場合、先行する曲線の制御点の反対側に制御点を指定したのと同様に振る舞います。
始点 Qコマンドの制御点 Qコマンドの終点 = 2つ目の始点 Tコマンドの（仮想的な）制御点 Tコマンドの終点 | <path d="M0,50 Q40,100 80,50 T160,50" stroke="black" stroke-width="2" fill="none"/> |