KOYO DIGITAL WORKSパーツギャラリー

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

SVGスプライト(2016.05.30追加)

phpでsvgスプライトファイルを読み込みます。

参考サイト:IllustratorとIcoMoonでSVGスプライトのラクラク設定!

おすすめコンテンツ

WEBデザイナー/フロントエンドエンジニア 正社員募集中 リッチな動きをWebサイトに パーツギャラリー デザインギャラリー 様々な角度からWebサイトをサポート!Webサイト制作
ページの先頭へ
arrow01 arrow02 arrow03 arrow04 arrow05 pc sp tablet window