ベジェが大好き！ 寝ても覚めてもベジェ！！
ベジェをわがものにしたいー！！！

という、私のようなおかしな方のためにおおくりしてます。


その前に、ブラウザーでプレビューしながら動かしてます。

いまさらですが・・・ viewBox の指定を。

書き出したそのままだと、viewBox からはみ出ると表示されません。
そして、座標 0,0 がブラウザーの　left 0・top 0 になるから、
left・top にオブジェクトがくっついてしまいますよね。

viewBox はオブジェクトの大きさで書き出されますが、
オブジェクトより大きい数字を指定すると、right・bottom が広がります。
その前の二つの 0 に マイナス数値の指定で、それぞれ left・top が広がります。

見やすい大きさに変えてからはじめましょう！



簡単な図でまずは分析。




この、フリーで描いた形。




＜path class="cls-1" d="M188.44,2.83c92.5,0,198.27,79.5,198.27,150.5,0,109-90.77,149.5-185.27,149.5-130,0-198.61-65.5-198.61-149.5C2.83,28.33,62.48,2.83,188.44,2.83Z”/＞

という数字の羅列・・・ふぅ。

もう、どうでもいい気分になってきちゃいました？

大丈夫！

ベジェがどう描かれているのか知っていれば理解できます。
ベジェは、アンカーとハンドルで操作されているんでしたよね？


だから、こんな！

＜path class="cls-1" d=“M (開始)
188.44,2.83 始点 -1/5

c(ここから相対座標)
92.5,0, 始点ハンドル位置(進行方向) -1/5A

198.27,79.5, 第2点ハンドル位置(始点側) -2A
198.27,150.5, 第2点 -2

0,109 第2点ハンドル位置(進行方向) -2B

-90.77, 149.5 第3点ハンドル位置(第2点側) -3A
-185.27,149.5 第3点 -3

-130,0 第3点ハンドル位置(進行方向) -3B

-198.61-65.5 第4点ハンドル位置(第3点側) -4A
-198.61-149.5 第4点 -4

C(ここから絶対座標)
2.83,28.33, 第4点ハンドル位置(進行方向) -4B

62.48,2.83, 終点ハンドル位置(第4点側) -5/1B
188.44,2.83 終点 -5/1
Z (閉じ)”/＞

説明用に番号を付けてみました。


数字の書かれ方に注意。

正の数はカンマで区切られますが、負の数は区切りがありません。
ここでは出てこないけど、小数点以下の数は 0 が省略されています。

読み間違えないようにしましょう。


ベジェといえばハンドル。
ということで、ハンドルの操作をしてみます。


ベクトルですから、x・y の対角線がハンドルの位置。
力の方向と大きさです。
そこに、ハンドルの頭がくるということです。


さあ！ 動かしましょう！！




このオブジェクトは、
わかりやすいように水平垂直にハンドルをのばしています。


-1/5A（ 92.5,0 ）

ハンドルを 45° 傾けてみます。
正方形にすればいいんだから、y も 92.5 に。




ほらね！


-2A（ 198.27,79.5 ）

ここも 45° 傾けてみます。

このハンドルは、-2 から垂直にのびてます。
-2 と x が同じことで確認できます。
x を動かして正方形を作って 45° 傾けます。

y の数値は、-1/5A からの相対座標。
でも、-2 を支点として傾けなければいけません。

-2 からハンドルがどれくらいの距離かといえば・・・。
-2 の y との差を求めればいいですよね。

150.5 − 79.5 ＝ 71 です。-2 から 71 の正方形ですから。

198.27 ＋ 71 ＝ 269.27 が -1/5A からの x になります。




どう？


このデータでは、ハンドルは独立でしか動きません。


では、相対するハンドルを動かしてなめらかな曲線にしましょう。


-2B（0,109）

アンカーが出現したら、そこが支点に変わります。

だから、-2 からの相対座標。

もう簡単。x に -109 と入力。

反対側だからマイナス。
そして、マイナス前にあるカンマを消します。




どぅお？


ハンドルによる力加減は、x・y からできる矩形。
ここを計算して作ればいいと理解できます。


最後。

-5/1B（62.48,2.83）

ここも滑らかにしておきます。

もう、わかりますね！

C だから絶対座標だということを頭において計算してみてね。

＜path class="cls-1" d="M188.44,2.83c92.5,92.5,269.27,79.5,198.27,150.5-109,109-90.77,149.5-185.27,149.5-130,0-198.61-65.5-198.61-149.5C2.83,28.33,62.48-123.13,188.44,2.83Z”/＞

書き直したデータです。




できたかな？！


ここでもう一つのデータ。




＜path class="cls-1" d="M122.41,113.38c-23.32,3.6-70.54,20.52-84.88,1.1S-11.56,64.16,3.87,41C23.2,12,44.45,0,78.67,0S154,10.06,166.51,19.31s82.15,52.9,65,69.08S143.85,110.07,122.41,113.38Z”/＞

この場合は、ハンドルを連動して動かせるアンカーがあります。
左右の角度と長さが同じハンドル。




Illustrator でベジェを描いたとき、
ハンドルを引き出したまま動かしていないハンドルです。


データの書き方は、先のものと違います。

＜path class="cls-1" d="M
122.41,113.38 始点

c
-23.32,3.6 始点ハンドル

-70.54,20.52 第2点ハンドル
-84.88,1.1 第2点

S
-11.56,64.16, 第3点ハンドル
3.87,41 第3点

C
23.2,12, 第3点ハンドル

44.45,0, 第4点ハンドル
78.67,0 第4点

S
154,10.06, 第5点ハンドル
166.51,19.31 第5点

s
82.15,52.9, 第6点ハンドル
65,69.08 第6点

S
143.85,110.07, 終点ハンドル
122.41,113.38 終点
Z”/＞

S・s というアルファベットがでてきました。

C・c では、ハンドルは独立してるから、
2つのハンドルと 1つのアンカーの 3つの座標が一組。

S・s では、最初のハンドルは前のハンドルと連動しているので、
書かれていません。2つ一組です。




わかりやすい 第4点のハンドルを動かしてみます。


44.45,0, を 44.45,-44.45,




ね！


応用です。

C
23.2,12, 第3点ハンドル

44.45,0, 第4点ハンドル
78.67,0 第4点

S
154,10.06, 第5点ハンドル
166.51,19.31 第5点

を書き直して。


C
23.2,12, 第3点ハンドル

44.45,0, 第4点ハンドル
78.67,0 第4点

123.12,44.45, 第4点ハンドル

154,10.06, 第5点ハンドル
166.51,19.31 第5点




ハンドルの切り離し。


C
23.2,12, 第3点ハンドル

44.45,0, 第4点ハンドル
78.67,0 第4点

50,70, 第4点ハンドル

154,10.06, 第5点ハンドル
166.51,19.31 第5点




動く！


もう、自由自在！！



私は、他のsvg用ソフトも svg 自体の知識もつたないので、
あくまで Illustrator でのことだけど。

なんで、絶対座標と相対座標が混在するのかは調べてません！

クローズドパスの場合、最後の 2つのハンドルと終点は必ず絶対座標のようです。
試しに、2つのハンドルを相対座標にしても問題ありませんでした。

そのときは、C を終点前に移動します。

前記事のように、始点の相対座標を絶対座標にしても問題なしです。
もちろん、すべてを絶対座標にしても大丈夫でした。


こんな感じで、ぜんぜん単純な数列だった！

と、思えるか思えないかが分かれ目。
思えなくて普通です。


なんだ、簡単かも？

って、やっぱりちょっとな思考をお持ちの方のみ・・・。

さらに！！

ただ、動かすことができるだけでは、面白くないよね？
自分の意図した自由なベジェは描けるのでしょうか？



やってみましょう！！！

関連記事

• Illustrator から svg！vol.05 【自由なベジェ曲線は描けるの？】
• Illustrator から svg！vol.04 【ベジェの座標を読んでみる！】
• Illustrator から svg！vol.03 【スタイルを変えてみよう！】