Illustrator から svg！vol.02 【実際どんなデータなの？】

2018/05/26

svg

Illustratorデータを svg にすると、実際どんふうに書かれるの？

と思っている方むけに。プロの方は無視しちゃってくださいね。

svgデータといっても、円や矩形など「図形」の扱いについてではありません。
【フリーのベジェ曲線】についてです。

役に立つのか立たないのかもわからない！
どっちかといえばわからなくてもいい！！

というお話です。

では、始めましょうね。

こんなデータを用意しました。

レイヤーには、

1・グラデーション
2・直線による図形
3・2と同じ座標の曲線による図形
4・直線ライン
5・不透明度
6・パターン

というオブジェクトが入っています。

svg を開いてみましょう！

ずらりと数字が・・・ひー！！

という、数字大っ嫌いな方でも大丈夫です。

数字だなぁー・・・とぼーっと眺めるくらいで十分。

最初は、svg ですよーと書いてあります。

【 xmlns:xlink="http://www.w3.org/1999/xlink" 】は、
グラデーションやパターンを使うと付いてくるようです。

このあたりは、特に調べたりしてないんでよろしくお願いします。

次は、それぞれのスタイル。

塗りと線の指定だけです。

fill・塗り
stroke・線

あくまで、Illustrator ですからね！
この 2つの要素にスタイルが付けられるだけです！！

.cls-5, .cls-6 {
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 5.67px;
}

これは、ラウンドの線。
線幅もスタイルで。

.cls-7 {
stroke: blue;
stroke-miterlimit: 10;
stroke-width: 14.17px;
}

こっちは、マイター。

.cls-8 {
fill: #fbb03b;
opacity: 0.5;
}

不透明度。

そして、グラデーションとパターンの指定。

.cls-4 {
fill: url(#名称未設定グラデーション_4);
}
.cls-9 {
fill: url(#波_カラー_);
}

url の内容は、スタイルの下にずらーって！

ここいらは、Illustrator におまかせですね。

ちなみに、シャドウなんかは、
ラスタライズされ画像として読み込まれていました。

そして、実際のオブジェクトは、

＜title＞test＜/title＞以下です。

タイトルは、ファイル名。
レイヤーは、g で括られます。
子レイヤーも g 、グループも g！

オブジェクトを見ていきましょう。

作図をする方にはおなじみですが、見慣れない方もいるかしら？

path・曲線による図形（オープン・クローズド）
polyline・直線による図形（オープン）
polygon・直線による図形（クローズド）

と思っていただければ！ざっくりと！！

他にも、

line・直線
circle・円
rect・矩形

等、図形名で指定されたりします。

試したところ、Illustrator では、
図形ツールで描画すると、図形名になります。

っが、数値での描画は図形名だけど、
ドラッグだと、line 以外は path になることもありました。

気まぐれ？

ちょっとまって、パスにオープンとクローズドの区別はないの？

と思った方。するどい！

書き方の例。

＜path class="cls-2" d="M153.58,137.55c2,3,10.44,8.89,19.17,5.14"/＞

オープン。

＜path class="cls-4" d="M185.26,232.09c-43.57-.54-95.56,5.57-110.08-21.06S17.08,110.17,46.13,72.25s96-20.17,131.51,17.75S231.35,232.67,185.26,232.09Z"/＞

クローズド。

どちらも、Mから始まってますが、クローズドは Z で閉じています。

では、数字をのぞいてみましょう！

＜g id="_2" data-name="2"＞
＜polygon class="cls-5" points="80.84 363.18 176.84 31.18 525.84 162.18 80.84 363.18"/＞
＜/g＞

レイヤー2 ・グリーンの三角形。

polygon だから、直線による図形でクローズド。

points は座標で、2つ一組（ x・y ）で位置を表します。

三角形なので 3点だけど、クローズドだから終点として始点の座標が書かれます。

これは、だれでもわかっちゃう！

じゃぁ・・・。

レイヤー3 ・ピンクの曲線。

Illustrator では、先の三角形のアンカーのハンドルをひっぱったもの。
それぞれのアンカーの座標データは一緒だ！！

＜g id="_3" data-name="3"＞
＜path class="cls-6" d="M80.84,363.18c-169,0-29-265,96-332s321-12,349,131S249.84,363.18,80.84,363.18Z"/＞
＜/g＞

じゃん！

ぜんぜんちがうでしょ。いーー！ってなるかな？

でも、よく見ると、M から 2つの数字と Z 前の 2つの数字が始点終点だとわかります。

その間が、ベクトルデータ。

ここは、ベジェなんだな！と思うだけでいいです。

polygon の方は、単純な座標なので、数値をピコピコ動かせますね。

さて、

svgデータの修正やバリエーション作成などなどが発生したとき。
Illustrator で描き直した方が圧倒的に簡単で早く確実。

そっちの方がいいのは絶対で間違いありません！

冒頭でいったように、わからなくていいのです。

それでも、

えー、なんか・・・ベジェをデータでいじってみたいー！

っていう、ちょっとめんどうな思考をお持ちの方（私！）。

続きまーす！！

関連記事