ラストスパートです！




この部分の書きかえポイント。


クジラの潮の部分。



元に比べて。




大きさもちがうし、形も変わってる。 数もふえてます！


スタイルを変えた時に、複合パスから切り離した二つ。

＜path class="cls-4" d="M194.31,82.9c5.76-6.38,14.56-5,15.06.75.86,9.92-15.39,1.32-25.69,20.17C183.68,103.82,187.51,90.41,194.31,82.9Z”/＞
＜path class="cls-6" d="M162.69,75c2.58-4,7.53-1.65,10.58,1.14,2-6.48,5.37-7.1,8.37-4.45,4.79,4.2-3.61,12-3.14,19.16C174,84.16,157.07,83.73,162.69,75Z”/＞


片方の座標を書きかえて。



＜path class="cls-4" d="M194.31,100c5.76-6.38,14.56-5,15.06.75,4.5,9.92-10,20-25.69,30C170,103.82,187.51,90.41,194.31,100Z”/＞
＜path class="cls-6" d="M162.69,75c2.58-4,7.53-1.65,10.58,1.14,2-6.48,5.37-7.1,8.37-4.45,4.79,4.2-3.61,12-3.14,19.16C174,84.16,157.07,83.73,162.69,75Z”/＞

ハートにしました！ もう簡単ですよね！！


っで、




＜path class="cls-4" d="M194.31,100c5.76-6.38,14.56-5,15.06.75,4.5,9.92-10,20-25.69,30C170,103.82,187.51,90.41,194.31,100Z" transform="scale(2,2) translate(-90,-90)”/＞
＜path class="cls-6" d="M162.69,75c2.58-4,7.53-1.65,10.58,1.14,2-6.48,5.37-7.1,8.37-4.45,4.79,4.2-3.61,12-3.14,19.16C174,84.16,157.07,83.73,162.69,75Z" transform="scale(2,2) translate(-100,-50)”/＞

transform で拡大と移動を！

残念なことに回転は効きませんでした。

拡大は、オブジェクトではなく、座標全体の拡大になります。
その分も、移動で整える必要があります。


複合パスを一つ残しています。


結果から。

反転したオブジェクトを増やしました。



M161.74,102.31c1.89-5.49,10.75-4.66,14.8,2.93,4.77,8.93,5.24,22.87,5.24,22.87C176.35,107.33,158.5,111.72,161.74,102.31Z
M205.74,102.31C210.5,111.72,190.35,107.33,185.7,128.11,185.7,128.11,186.17,114.17,190.94,105.24C194.99,97.95,203.85,96.82,205.74,102.31Z


複合パスは、その母体のパスの最後尾に続けて描かれます。
コピペも続けて大丈夫。

上のデータの下が反転したものです。

練習のため、すべて絶対座標にしてみましたが、
元は相対座標の数値を始点を中心に反転しました。

元が絶対座標のところは、対した大きさではなかったので、
そう見える位置に感覚で書いたものです！


ところで、複合パスはなんで複合パスになるんでしょうか？


続けて書いてあるからだけではないようです。

というのも・・・最初反転したら、オブジェクトが消えてしまったのだ！

でも、外に出すと現れる？


反転したから？？


と思って、逆回転に座標を書き直したら、無事、複合パスになりました！


これ、ベースのパスの方向と関係あるのかな？

ベースは、反時計回り。
複合部分は、時計回り。

基本、単体のパスは反時計回りになるようだけど、
時々、時計回りも現れます。


もしかしたら、ベースと反対回りにするのかも？？


検証しないけど・・・。


抜けなかったら、反対回りにすればいい！


ということですね！！


いよいよ最後の部分、ヒレです。





＜path class="cls-5" d="M98.4,330.77c-3.82-64.35,25.41-85.71,48.35-113.61,3.15,0,8.77,5.62,10.57,8.55-11.47,18.45-12.23,41.17-11.78,54.44C112.48,298.37,106.72,319.74,98.4,330.77Z”/＞

元。




＜path class="cls-6" d="M60,330.77c30-20,40-20,23.4-50,50-15,15-30,63.34-63.6,3.15,0,8.77,5.62,12,8.55-20,18.45-2,55-30,70C80,300,130,320,60,330.77Z”/＞

書きかえ後。 ひらひら！



元データ

＜path class="cls-5" d="M
98.4,330.77 始点

c
-3.82-64.35, -1B

25.41-85.71, -2A
48.35-113.61, 第2点

3.15,0,

8.77,5.62,
10.57,8.55 第3点

-11.47,18.45

-12.23,41.17
-11.78,54.44 第4点

C
112.48,298.37,

106.72,319.74,
98.4,330.77 終点
Z”/＞


書きかえデータ

始点

c
30-20, -1B

40-20, -1/2A
23.4-50, 第1/2点

50-15, -1/2B

15-30, -2A
63.34-63.6, 第2点

3.15,0,

8.77,5.62,
12,8.55 第3点

-20,18.45

-2,55
-30,70 第4点

C
80,300,

130,320,
60,330.77 終点
Z"/>

始点 と 第2点 の間に、アンカーを追加しちゃいました！


この場合、第2点 は動かしたくありません。


どうやって 第2点 を動かさずにアンカーを追加するのか？

は、二つ方法があります。


わかりやすいのは、絶対座標に直してしまうことです。

えー、 終点 まで全部計算するのかー・・・。

でないことは、もうおわかりのはず！

第2点 まででいいんでしたよね！！

そして、C・c を適所に挿入。

「このあたりにアンカー」
と思う座標にハンドルと点を書き足します。


もう一つ、私のとったのはこっちの方法。

相対座標のまま挿入してみましょう！


まず、始点から 第2点 の x・y の半分を計算。


第2点の座標をその数値に。
-1B・-2A のハンドルも短めにしておきます。
あとから調整するのでここも半分くらいに。


始点 と 第2点 の間に 第2点 と同じ数値の 第1/2点 を挿入。

前後のハンドルは、はじめ、 第1/2点 と同じ数値にして、
あとから引き出せばいいです。


98.4,330.77 始点

c
-1.91-32.17, -1B


24.17-56.80, -1/2A

24.17-56.80, 第1/2点

0,0, -1/2B

12.7-42.85, -2A
24.18-56.81, 第2点




ね？ 半分の位置にアンカーが打てた！


ということは・・・。

始点〜第1/2点 ＋ 第1/2点〜第2点 ＝ 始点〜元第2点

に設定すれば、どこにでもアンカーが挿入できるんですね！

距離でアンカーの場所がイメージできるから、
こっちの方が思った位置にアンカーが打てる気がします。


アンカーを減らしたいとき、次点が相対座標だったら、
一つ前のアンカーから削除するアンカーまでの距離を加算すれば大丈夫です。
ハンドルも消し忘れないようにね！


あとは、ちょこちょことバランスをみながら微調整。





完成しました！


みなさん（いるのかな？）、おつかれさまでした！

ここまでできれば、Illustrator の svg なんてへっちゃらなはず！！


えっ？ なんの役に立つのかぁ？


それは、もう。

たとえば、

夏休みの海外旅行中、スマホだけしかないのに、
クライアントから、
「サイトのイラストの修正を即やれ（怒）」
とのメッセージが届いたとき！

とか？

というくらい、実務向きではないけど、
ベジェがどういうものなのかということがよくわかります。

一度、データを開いて動かしてみることはムダではありません。



ここまで読んでくださったみなさまに。

サンプルを用意しました。

svg_sample.zip

おひまがあるときにいじってみると、ひまつぶしになりますよ！




・・・。

なんだか簡単なイラストだったら、
フリーで描けるような気がしてこない？



もう引けません！


数値だけで描いてみようじゃないか！！（数日まってて）

関連記事

• svg で自由に描こう！vol.01 【 お魚を書く！できるかな？ 】
• Illustrator から svg！vol.06 【アンカーポイントを追加しよう！】
• Illustrator から svg！vol.05 【自由なベジェ曲線は描けるの？】