ここまで、ブラウザーで確認しながらの作成でした。

Illustrator で開いてみます。
途中チェックしたい誘惑にたえてきました。




おー！ ちゃんとできてる！！


では、データチェックしましょう！！


レイヤーは、この通り。





ちゃんと書いたようにできてますね。


ドキドキのハンドル。



我ながら、きれいに引けてるではないですか！
とても目分量で引いたとは思えません！！




【 C 】で個別に引いたハンドル。



【 S 】で連結して引いたハンドル。


自分をほめたいとはこのことです！！！



って、実は・・・最初開いたとき。
スタイルが全部外れていてまっ黒だったんです。

？？？

正体は、スタイルの名前。

アンダーバーがダメなんですよ。

これはもしかしたら、Illustrator が読まないのかも？
だって、ブラウザーだと問題ないですから。


次です。

Illustrator から書き出したサンプルを再度開こうとしたとき。
開けないデータがありました。

なんで？ 自分が書き出したデータなのに？？

なーんで！？？？

いろいろ方法を試してみました。

結果、書き出しで【 内部 css 】だと再度開けないみたいよ？
プレゼンテーションとインラインでは開けました。

でも・・・。

エディターで別名（同じ名前じゃダメ）保存すると、
【 内部 css 】でも開けるのです。

だから、自分で書いた svg は開けるのだ！


謎！


ついでに、形式を svg で保存もしてみた。

オプションがつけられて、データの記述の違いはあるけど大丈夫。
ただ、どのスタイル形式を選んでも、ブレンドモードは書かれません。


書き出しなら書かれるのにね？


謎！！


そうそう。

ブレンドモード のついたデータ。

Illustrator で開いてしまうと、クリアされちゃいますよー！
Illustrator で書き出したデータでもです！！

気をつけてね！ つけようがないけどね！！


例です。



こんなのを Illustrator で描きました。




【 内部 css 】で書き出したデータ。


開こうとすると。



なんかいわれて。




ダメだって！


エディターで開いて別名保存。



まったく同じデータのはずなのに。




開きます！

見ての通り、ブレンドモードが外されました。
なんだよ自分で書き出したくせにー！

このまま保存せずに閉じれば元のまま。




編集したり、ブレンドをつけ直したりしても、




書き出しすれば問題ないです。


うっかり上書き保存すると・・・記述が変わってしまいます！

内容は同じなので、それに関してはいいんだけど。



もちろん、ブレンドは外されますとも！！

元の木阿弥なので、ほんと、気をつけましょう。


下手をすると。

手直しをしたくて Illustrator で開く〜ブレンドが消える〜直して書き出しをする〜Illustrator で開けなくてもいいか！
やっぱり直しが入った〜別名保存して開くとブレンドが消える〜ブレンドつけて上書き保存しちゃった〜ブレンド消える！

というなんだかよくわからないループになりかねません。


とりあえずフォルムの直しは決定。
消えたブレンドのために Illustrator を開くのか！？

もう、書いちゃった方が早いです。


スタイルに、



mix-blend-mode:screen;

と、ブレンドの指定。


isolation は、ブレンドモードを有効にする範囲を決めています。

こんな感じで、ブレンドの範囲。
ブレンド指定のオブジェクトは、一番上位にあります。






直下の線のみにブレンド。






すべてのオブジェクトにブレンド。






isolation を書かないと、ブラウザーまでブレンド。


んー・・・。


どこからか入手した svg データがあって、
それを Illustrator でさくさく編集できるかというと、
そう簡単ではないですね。

データは、オリジナルは開かず、コピーを開くのが安全。

編集は、オリジナルをブラウザーで確認しながらでないとダメです。
開いた時点で、オリジナルと違っちゃってる可能性がかなりあるから。


そして、形の編集はやむをえないとして、

スタイルだったら、svg を直接書き直した方が絶対いい。


いや！ ベジェも書けるけどな！！



って、こんなときに自慢できるかも？！



後日気がつきました。

ブラーなんかは画像になっちゃうよーって言っちゃったけど、
これも、svgフィルターを書き足せばいいんんだ！

なんで忘れていたんだろう？

もちろんちゃんとできました！！


フィルターは奥深そうですね。
また時間のあるときにあそぼう！


本文が長くなって記事がとっちらかってしまったので、
後日、ベジェの書き方をまとめるつもりでいます。

でないと、自分が忘れそう。


あの・・・ Illustrator で svgフィルターを指定すればいいんだけど。

こちら今度は、保存の svg では書き出されて、
「書き出し」では、書き出されないぞ！


謎！！！

関連記事

• svg で自由に描こう！vol.06 【 お魚を書く！反省会後編 viewBox をととのえる！ 】
• svg で自由に描こう！vol.05 【 お魚を書く！反省会前編 Illustrator で開く！ 】
• svg で自由に描こう！vol.04 【 お魚を書く！クリッピングマスクで飾ろう！ 】