ここからは、個人的なお試しです。


web画像といえば、昔は jpg、近年復活してきた gif 。
主流は、png なわけです。

以前のサイトデザインは、ほぼ画像。
Photoshop でデザインして、スライスして配置していました。

今はしないですよね？

画像の扱いってずいぶんかわりました。

そして、svg 。

やっぱり、使わなければ！

svg は、ベクトルデータ を、テキストで現したもの。
とりたてて新しい形式ではありません。

昔、Illustrator のデータをどうしても、
測量CAD にもっていきたいことがありました。
当時も今も、Illustrator に dxf 読み書き機能はあります。
でも、おまけの機能なので、読み込むのはともかく、
書き出しの精度は不安定なものでした。

考えたあげく、svg で書き出して、画面上の座標を取り出し、
csv に組みなおしたあと、測量座標に変換するっっていう、
とんでもないことをやってしまったことがあります。
（もっとやり方あったろうに！）

考えただけで頭いたくなっちゃうでしょ！

でも、ちゃんと展開できたんですね（あたりまえ）！！

という、ベクトルの座標データなのが svg です。


お話をもどして。

レスポンシブの時代になって、ロゴやマークを svg で！
というサイトは増えてきました。

ぢゃぁさ、複雑なイラストデータは、どこまでいける？
ちゃんとブラウザーで再現されるの？

って思うよね？？

svg の web への読み込みに関しては、すでにたくさんの情報があります。

同じことを書いてもみなさんには追いつけないので、
ちょっと斜めから、イラストデータへのアプローチをします！


やってみました！

複雑っていっても、ラインが複雑というのではありません。
構造が複雑ってやつです。

今回の、お人形で検証してみましょう。

このお人形さんは、ものによって、
かなりいじわるなデータ。

それは、のちほどくわしく！

まずは、結果です。


使うソフトは、もちろん、Illustrator 。



書き出しで、svg にすればいいのです。 ちょー簡単！


ブラウザーにデータを投げると・・・。



ほら！
レスポンシブ指定にしたから、びよーんと！！

ちゃんと再現されています。


サイトに組むには。
普通に img で設置。 css で整えます。


問題ないっすね！


いや・・・問題。

それは、IE 。 事前に調べていました。
情報提供者の方々、ありがとうございます！

いくら css でサイズをつけても効かないんです。

IE だけ。

svg に元サイズの width・height を書けば大丈夫！
そうすれば、css が効くようになります。

いちいち書くんですか？ ということではありません。


Illustrator で書き出すとき、



レスポンシブのチェックを外せば自動で書かれます。




上がレスポンシブ。 下が非レスポンシブ。

ちゃんと書いたから大丈夫！ ではなかった！！

background に読み込んだものはよかったんだけど、
img タグに直接書いたやつ。

一見問題ない。 ブラウザーを縮めても問題ない。

縮めたのを、伸ばしてみたら・・・。

縦がついてこないじゃん！


IE だけ！！


ページを再読み込みすると直ります。

これは、多分、私のデータの作り方にも問題がある。

イラストは、大きめに描いてるんですね。

っで、css でサイズ指定をしてます。

width だけ 数値指定して、height は auto にしていました。

height にも数値を指定することで回避できました！


気になるデータサイズは、どれも png より svg の方が小さくなりました。

読み込み速度も、問題ないです。


いや・・・ここでは私のかわいい iPad2 。

静止画は問題ないけど、
メニューのアニメーションといっしょに出てくるお魚。


3〜5回に1回くらい、出てきません！


多分、描画が追いつかないんじゃないかな？
iOS の問題だと・・・iOS9 以前、使ってる方どれくらいいるでしょうか？

もうこれは、ご愛嬌。

だって、Facebook なんて、
毎度毎度 最初はまっしろけだったりしますからね！
いつも、問題が起きたから再読み込みです。


どうせ、どうせ、過去機です。
いろいろ対応してませんとも！


iPad2 と iOS9 周辺のみなさま。

ときどき出現しませんが、
そのときはお魚のご機嫌が悪いのだと思ってください！


ということで、コンテンツ以外の画像を svg にしました！


本音は全部変えてみたいけど。

古いブラウザーでのレイアウト崩れはしょうがないとしても、
万が一、コンテンツが見られない方ができちゃうと、
サイトの役目がはたせません！ ・・・おこられちゃう。

それ以外のイラストは装飾なので、
最悪表示されなくても大丈夫なデザインになってます。

いくら私でも、そのくらいの冷静さはもってますとも！


拡大してもこのとおり！



違いはあきらか！


すっごく、楽しい！！



続きます。

関連記事

• SSL ですね！
• リニューアルしなければ！vol.09 【 svg だ！】
• リニューアルしなければ！vol.08 【無駄を描いちゃう！】