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

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

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



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




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

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


少しづつ複雑に。


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



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


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

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

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

すっごい膨大なデータ！

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


次、いきましょう！


くらげ。



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

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

問題ありませんでした！


パターンなこたち。



この円はとても複雑。



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

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

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

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

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


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


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



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


どんどんいきましょう！


メッシュバッグ。



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

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


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


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

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

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

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

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

たとえば、マスク。

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




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



ほらね！ 透過してない。



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


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

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

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

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




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

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


あたりまえかも！


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


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

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

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

iPad2 と iPhone8 で検証しました。


絶対じゃないとダメ！


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

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


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


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

関連記事

• Illustrator から svg！vol.03 【スタイルを変えてみよう！】
• Illustrator から svg！vol.02 【実際どんなデータなの？】
• Illustrator から svg！vol.01 【どんなデータでもいけるのか？】