misallychan.com

雑記。はてブ、口コミ、WEBデザイン、アニメ・漫画についてとか。


SVG画像を活用して、どんなデバイスでも綺麗に画像を表示!ベクター画像でレスポンシブ対応

前回ご紹介した記事では、アイコン作るならpng画像よりWEBアイコンフォントだ!というご紹介をしました。
www.misallychan.com


ただ、png画像の代わりにもう一つ、レスポンシブでも活用できる画像があります。
それが、SVG画像です。


f:id:misallychan:20180514154627j:plain





SVG画像を活用する

前回も少しお伝えしていたので重複しますが、近年スマホや高解像度ディスプレイの普及、レスポンシブデザインの定着により、一種類の大きさの画像だけでは足らず、画像がぼやけることが多くなってしまいました。
画像を2倍のサイズで作らなくちゃいけなくなったり。拡大するにも縮めるにも画像がぼやけてしまったり。


それを解決してくれるのがSVGフォーマットの画像です。



SVG画像とは?

こちらの記事で詳しく解説しております。
www.misallychan.com


端的に言うとベクター画像になりますので、イラレなどで作ることができます。
ピクセルの概念がないので劣化することがないのです。


ロゴをはじめとしたイラレで作成できる素材はぜひSVG形式で保存しましょう。
普通の画像同様にimgタグで表示できますよ。



SVGがうまく表示されない場合は?

基本的に、imgタグで表示できますが・・うまく表示されない場合は以下をご参照ください。

非対応ブラウザへのフォールバック

こちらの記事にAndroid2.3以下・IE8以下など、SVGが表示されないブラウザへの対応方法をご紹介しております!!
www.misallychan.com

IE、SVGの画像がうまく表示されない

どうやらCSSで横幅を%指定するだけではダメ!?
私は必ず「height:auto」と追記しています。
横幅もしくは縦幅のどちらも指定しておくと良さそうですね。


また、親要素で幅を指定するのにプラスして、CSSに

img[src$=".svg"] { width: 100%; }

と追加すると、IEでもうまく表示されました。