SVGをwebサイトで使うメモ | SANOGRAPHIX

SANOGRAPHIX.NETで使っているアイコンなどをSVGにしてみました。

SVGのメリット

ベクターデータなのでいくら拡大しても画像が粗くなりません。試しにロゴを思い切り拡大して、gif画像と比べてみます。

はっきり違いが出ますね。
スマートフォンやタブレットでは、サイトを拡大する動作はごく一般的に行われているし、今後PCディスプレイでもRetina化が進むと思われます。そういった環境でも綺麗な画像を提供できるという意味で、導入するメリットは十分にあります。

SVGの導入

SVG画像をウェブサイトで使うには、IllustratorなどでSVG形式で保存したファイルをobjectタグで埋め込めばよいわけですが、ロゴなど、画像の外側にアンカータグを使いたい時があると思います。また、IEは9以外はSVGをサポートしていません。ですので、以下のようにしてみました。

SVGをobjectで表示してリンクにするサンプル

html

<a href="/" class="inline-block">
  <object data="images/toplogo.svg" width="260px" height="28px" type="image/svg+xml">
  </object>
  <img src="images/toplogo.gif" alt="" />
</a>
<!--[if IE]>
object[type="image/svg+xml"] {
    display: none;
}

object[type="image/svg+xml"] + img {
    display: inline !important;
}
<![endif]-->

CSS

.inline-block {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

object[type="image/svg+xml"] {
    pointer-events: none;
}

object[type="image/svg+xml"] + img {
    display: none;
}

aタグの中にobjectとimgを入れて、IEのときだけojectを非表示にしてimg代わりに表示する、というようなことをしました。

IE9ではSVG使えるのになぜ使っていないのかというと、IEだけSVGでカーソルが指マークにならなくて、これを修正するにはonloadイベントでcursor: pointer;みたいにしなければならず面倒だからです。

SVG、ちょっとファイルサイズが大きいですがなかなか良いですね。