SVGデータを有効に使おう！！

お盆の休暇も明けて今日からお仕事スタート！

皆様は、どのような休暇をお過ごしになられましたか？

私は、日頃できない（サボっていた）片付けをして、

のんびりお笑いビデオ見てたら終わってしまいました。

我が家では、今お笑い芸人、兵動大樹にはまってまして、

皆で腹を抱えて笑って、何回もDVD見てます。

 

で、のんびりばかりしていたのではなく、

レスポンシブサイトの構築で

日頃気になっていることをいろいろ調べて実験してみました。

 

＜SVGデータの表示について＞

これは、お盆前には解決していたのですが・・・・

最近の解析度の良い画面に対応すべく、

どうも、レスポンシブサイトだと拡大縮小で画像解析度がその都度違うので

一貫性があってきれいなSVGを主要なものに使うことにしました。

（たとえばロゴ・電話番号など）でも・・・

いろんな不具合があり・・

 

イラストレーターやJqueryをごちゃごちゃして、結局結論に至ったのは・・・

 

①イラストレーターのSVG保存でレスポンシブ対応にすると

アンドロイドブラウザでは余計な隙間ができる（ちなみにAndroid OS 4.2)ので、

イラストレーターのSVGはレスポンシブ対応なしで保存する。

で、CSS側で拡大縮小を行う。

何ででしょうね・・・アンドロイドブラウザだけおかしいんですよ（ちなみに古いiOSもだそうです） 😥

参考：http://slyvestris.tumblr.com/post/85112693920/img-svg-3

 

②SVGデータをHTML内で記述するときは、IMGタグを使う。

さて、SVGをHTML内に記述する場合、いろんな方法がありますが、

私は、IMGタグを使い普通の画像感覚で記述することを選択しました。

理由は、

１）ソースが複雑にならない（何も複雑なことなく、画像のjpgやpngの拡張子がsvgになるだけ）

２）ALTが使えて、SEO効果もある

の２点です。簡単に使えるのが一番！！ただ困ったことが発生！

SVG画像はIEの場合IE９から対応   😯 なんですと！！

弊社はIE８のブラウザ対応を保障しているので、これでは使えない！！、で

googleった結論は、

 

③SVGデータが使えない場合は、他の画像データで代用するJqueryを使う。

です。改めて、パスデータを作るという私にはチンプンカンプンなJqueryもありましたが、

とにかく、一番簡単なの一番簡単なやり方で探しまくって、これに至りました。

modernizr.js　というjqueryを使うことにしました。公式サイト：http://modernizr.com/

色々カスタムしてダウンロードしますが、

私は、SVGのみ対応させてダウンロードし、使ってます。

svgが使えないときは、同じフォルダ内にある同じ名前のpngを表示させると

 

$(document).ready(function () {
if (!Modernizr.svg) {
$(‘img[src$=”.svg”]’).each(function() {
var $img = $(this);
$img.attr(‘src’, $img.attr(‘src’).replace(/svg$/, ‘png’));
});
}
});

 

とこのような記述をしてます。

ただ、一つ難点は、このJquery、圧縮svgデータ(.svgz)に対応していません。

ちょっと複雑なsvgなど圧縮かけてサーバーの負担を減らしたいと思ったのですが、

(できるのであればごめんなさい！私の調査不足です！）

まあ、今のところ、svgは、ほどほどの大きさになる程度のパスでデザインしていただくしかないですね。

きっと、IE8の需要が減って弊社もそろそろIE8対応いいかな・・・

って頃に、SVGに圧縮かけてバンバン使おうと思います（これもほどほどですが・・）。

 

で、次回私がブログを記述する際、お盆に実験した結果を

お知らせいたします。

（全然大したことではありませんが・・・ 😉 ）