サイト演出系のオプション紹介向陽デジタルワークス

SVGで画像を表示

  • Chrome
  • Firefox
  • IE11
  • iPhone(iOS8)
  • Android4.2

SVGで画像を表示した場合と通常の画像を表示した場合の違い

SVG

SVGとは、ベクター形式で画像を表示する方式です。
ベクター形式のため、拡大縮小しても画質が劣化しません。レスポンシブのサイト等におすすめです。

アイコン アイコン

通常の画像(gif)

画像サイズのまま表示すれば問題ありませんが、拡大するとぼやけます。

アイコン アイコン

SVGの活用

cssで色を変えることもできます。

懸念点

SVGの使用には懸念点もあります。以下、他サイトからの引用です。

SVGファイルのほうが若干ファイルサイズは大きくなってしまいました。
SVGを表示する際にはレンダリングが必要なので、CPUなどの性能が劣るモバイルデバイスでは、表示が遅くなってしまう可能性があるそうです。最近登場しているモバイルデバイスは高性能ですし、単純なイラストならそれほど心配する必要はないかもしれませんが、そういったデバイスを対象に入れる場合は、しっかりテストする必要がありそうです。

参考サイト:http://parashuto.com/rriver/responsive-web/is-svg-good-for-high-res-screen-solutions#performance

ページの先頭へ