IE11で背景画像に使用しているSVG画像が中心揃えになってしまうのを防ぐ

IEのバグで背景画像に指定しているSVG画像(SBGアイコンなど)がbackground-positionの挙動に反して中心揃えになってしまうのを回避する方法。

svg画像内の<svg>タグ内に、以下のコードを追記。

preserveAspectRatio=”xMinYMid”

例:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

     viewBox="0 0 20.8 41.6" style="enable-background:new 0 0 20.8 41.6;" xml:space="preserve" preserveAspectRatio="xMinYMid">

というような感じになる。

詳しくは下記を参照。

svg background image position is always centered in internet explorer, despite background-position: left center

Best Practices for Getting Started with SVG