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

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

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



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

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

というお話です。


では、始めましょうね。


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

SC2018_53


レイヤーには、

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

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


svg を開いてみましょう!


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

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

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


SC2018_54

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

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

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


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

SC2018_55

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

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 の内容は、スタイルの下にずらーって!

SC2018_56

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

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


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

SC2018_57

<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 で描き直した方が圧倒的に簡単で早く確実。

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

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


それでも、

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


っていう、ちょっとめんどうな思考をお持ちの方(私!)。



続きまーす!!




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

03 | 2024/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -

月別アーカイブ