[SVG] SVGをimg要素で表示させる

[manabuyasuda]

pngで表示していたような画像の代わりとしてSVGを使うのがいちばん手軽な方法です。通常の画像と同じように<img>要素で指定します。

<img src="image.svg" alt="">

使用するSVGファイル内にはviewBox属性、width属性とheight属性を必ず指定します（IEとAndroid対応）。

SVGファイル内でwidthとheight属性が指定されていない場合にIEとAndroidでアスペクト比がおかしくなることがあります。widthとheight属性を指定し直します。

preserveAspectRatio="none"をSVGファイルに指定して直す方法もあります。仕様上、viewBoxのアスペクト比とwidthとheight属性でのアスペクト比が異なる場合、アスペクト比と維持しながらスケーリングし、中央寄せで表示されます。preserveAspectRatio属性はこの挙動を変更するもので、noneと指定することでHTML側で指定したサイズでviewBoxがフィットするようになります。

フォールバック

フォールバックは処理が冗長になるので、IE8に対応するのであればSVGは使わないようにするのがベターです。

SVG非対応ブラウザ向けのフォールバックにはHTMLでの対応とJavaScriptでの対応の2パターンがあります。

HTML側で対応する場合は<img>要素ではなく、<object>要素を使います。<object>要素は下記のようにフォールバックを含めた記述ができます。

<object data="image.svg" type="image/svg+xml" width="100" height="100">
　<object data="fallback.png" type="image/png" width="100" height="100">
　</object>
</object>

JavaScript側で対応する場合は、SVG非対応ブラウザのときには.svgを.pngに置換します。

if(!window.SVGSVGElement){ //SVG非対応ブラウザの判別
  $('img[src*="svg"]').attr('src', function() {
    return $(this).attr('src').replace('.svg','.png'); //拡張子を置換
  });
}

フォールバック画像の作成はsvg2pngなどで自動的に生成することができます。

<a>要素を<object>要素でラップする場合、リンクがクリックできなくなります（<img>要素は問題ありません）。

<a href="#">
  <object data="image.svg" type="image/svg+xml" width="100" height="100">
　  <object data="fallback.png" type="image/png" width="100" height="100">
　  </object>
  </object>
</a>

CSSでは以下のように指定するとリンクをクリックできるようになります。

a {
　　display: inline-block; /* もしくは`display:block;` */
}

object {
　　pointer-events: none; /* IE10以下未対応 */
}

フルードイメージ

<img>要素と<object>要素をフルードイメージにする場合はCSSで以下のように指定します。

img[src$=".svg"],
object[src$=".svg"] {
  max-width: 100%;
  width: 100%; /* IE対応 */
  height: auto;
}