WEBについてのいろいろ

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

トップ > WEB・デザイン > SVG画像を活用して、どんなデバイスでも綺麗に画像を表示！ベクター画像でレスポンシブ対応

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

WEB・デザイン

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


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


f:id:misallychan:20180514154627j:plain





SVG画像を活用する

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


それを解決してくれるのが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でもうまく表示されました。

SVGが古いサーバーで表示されない

「.htaccess」に以下を追記してあげましょう。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz






以上で大体のブラウザでもSVG画像が見れるようになります。
本当にどんな端末でもどんな大きさでも、画像が綺麗に表示されますので、イラレなどで作れるベクター画像の場合はぜひお試しくださいね！！