Illustrator から svg!vol.01 【どんなデータでもいけるのか?】

サイトのリニューアルにともない画像を svg へ。

どんな構造の Illustratorデータ でもいけるのでしょうか?

今回のデータは、こんなでした。



まずは、ホームに使っているコンテンツアイコン。
コラムの区切りのイラストも。


SC2018_43

これが問題ないのはわかります。

アイコンはすべて、複合パスで抜きになってるけど大丈夫!


少しづつ複雑に。


同じクジラでも、メインのこのこ。

SC2018_44

カラーベタで描かれてます。
そして、輪郭線にカリグラフィーブラシを使用。


実は、ブラシは疑ってました。
太さとかストロークが違っちゃうんじゃないかと。

データでは、内包しているアウトラインをとっているようです。

試しに、ブラシを拡張して書き出しをしたら・・・。

すっごい膨大なデータ!

なので、大丈夫ならそのままでいいんじゃない?


次、いきましょう!


くらげ。

SC2018_45

足の部分。 ブラシはいいとして。

笠には、グラデーションに「落書き」のエフェクト。 分割なし。
グラデーションは、一方に アルファ 0 。

問題ありませんでした!


パターンなこたち。

SC2018_46

この円はとても複雑。

SC2018_47

もともと塗りを「落書き」でラフな線に分割したものに、
ワープをかけてぐるぐるに。

その線に(塗りではない)パターンを指定してるのです。

パターンは、ちょっと注意です。

ものによっては書き出しで色が変わってしまうものがありました。

おそらく、元が CMYK だからだと思います。


にしても、線にパターンもいけるとは!


エフェクトが大丈夫なことがわかれば、

SC2018_48

こっちの 円に「ジグザグ」もなんなく!


どんどんいきましょう!


メッシュバッグ。

SC2018_49

クリッピングマスクで魚を入れてます。
レイヤー二重のグラデーション。

ちゃんと再現できてます!


ここで、引っかかりがありました。


それは、ブレンドによる透過。

いや・・・モダンブラウザーなら大丈夫。

そう、IE ・・・ そして、iPad2 の Chrome 。

効きません! iPad2 でも Safari は効きます。

私は、ブレンドの透過をよく使うので、
この部分は修正しました。

たとえば、マスク。

目は上に出して、ブレンドを思わせる色に変えました。
分割してもいいけど、無駄にパスが増えるだけだし、
この程度は妥協していいでしょう。


SC2018_50

スノーケルはそのままにしてます。

SC2018_51

ほらね! 透過してない。



さあ! では、いよいよお人形です。


このこは着せかえ人形です。
各パーツはばらばら。

ダイビング器材をフル装備させたこは、
子レイヤーもあわせて 20以上になったものもありました。

オブジェクトは、グループ・単独が混在。
アピアランスも混在。

ブラシ・グラデーション・アルファ・透過 と盛りだくさんです!


SC2018_52

なんてことはない、書き出せました。

データを開いてみると、ちゃんと 子レイヤー もそれごとに書き出しています。


あたりまえかも!


だって、svg はレイヤーを持てることも特徴ですから!!


私の MacBookPro は、もう 10年まえのもの。
OS は El Capitan 。
そして、昨年購入の iMac。

Win は 7・8 。( 10 は手元にないけど、たぶん大丈夫?)

Android は、2年前と現行の機種。

iPad2 と iPhone8 で検証しました。


絶対じゃないとダメ!


っていうサイト以外では、
割り切ってもいいんじゃないかと思います。

これ以前って、もうサポート外だったりしますよね?


複雑な構造の Illustratorデータ でもいけることがわかれば。


ガンガン描いて、svg にしちゃう!




関連記事

コメント

非公開コメント

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 - - - -

月別アーカイブ