Illustrator から svg！vol.03 【スタイルを変えてみよう！】

2018/05/27

svg

svgデータをいじって遊びましょう！

前回言い忘れていました。

Illustrator から書き出すとき、
アートボードをオブジェクトより大きくしていると。

polyline・polygon の座標は大丈夫でしたけど、
path の座標は、 transform で位置を調整されていました。

なので、アートボードをオブジェクトに合わせてから書き出した方がわかりやすいです。

最初は、現実的にスタイルの変化。

こちら、厳密にはデータの変更ではありません。
スタイルを変えるだけです。

このバナーを変えていきます。

Illustratorデータはこんな感じ。

ごく一般的な構造。

無意味にグループの入れ子が感心できないですねー。
生徒さんには注意するレベルです。
自分には甘いのです。

スタイルは、上から、ベース・まつ毛・口。

このように、それぞれのパスに class 指定されています。

先の記事で書いたように、レイヤー分け・グループ分け。

html や css と同じで、レイヤーの重なりは、下部が上です。
これで、どのパスがどの部分か理解できます。

M 〜 Z と、クローズドパスなのも確認できます。

まつ毛の部分。

まぶたは、オープンパス。

line が出てきました！

polyline とは違い、line はあくまで「直線」。
両端の x・y 座標を指定した一つの図形としての表現です。

最後のパスは、口ですね。

新しいスタイルを追加して。

指定したら。

変わっちゃう！

私のサイトのように、
バナーの色だけ変えたものを複数用意するときには便利です。

ファイルをコピーして増やせば、
画像ソフトを使うことなく、カラーチェンジし放題！

ここまでは、なんの問題もない。
css が書けるみなさんだったら楽勝です。

では、ちょっとだけベジェ部分をいじってみましょう。

クジラが、潮を上げている部分。

複合パスの抜きになってます。

パスは、3つのクローズドパスです。
クローズドパスは、M 〜 Z で閉じられているんでしたよね。
それを目当てに、データから該当箇所を探してみて。

この部分だろうということがわかります！

でも、なんか変。

m（小文字）だし、− とか付いてるし？

データは、どんなものでもとにかくよーく見ることです！

m の場合、前の座標からの相対位置で書かれているようです。
始点が相対のままでは、オブジェクトを動かしたとき座標が変わってしまいます。

前の座標は、直前 Z の前にあります。

では、そこから計算するの？

もう少しよく見てみましょう。

Z で閉じられる直前、絶対座標になってます！

相対座標から始まって、絶対座標に帰ってきてますね。

なので、この座標をコピペすれば大丈夫。

m を M にすることも忘れずに！

ここから推測されるのは、これから出現する小文字アルファベットの後は、
相対的な数値なのだろうということです。