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

Question

I\'m using a SVG logo as a background image and I can\'t seem to get it to align correctly to the left in Internet Explorer (edit: and Safari).

The containe

Answer 1

In my case adding "width" & "height"-values solved the problems on ie9-11.

Answer 2

IE 8-11, when placing an SVG in a background with no-repeat, automatically even-shims the left and right side to scale it to fit. That creates a centering effect of the image, at the image level. Meaning: It expands white space on both sides of the image to fill up the container.

The new image is then 100% the width of its element. This is why position:left has no effect, it is already left with padding included.

The container of the background element must be constrained to prevent over expanding (via shimming). For instance: max-width

div#logo{
    background-image: url(/img/logo.svg) no-repeat;
    max-width: 140px;
    margin: 0 auto auto 0;
}

The image will still be centered within the 140px, but it will no longer float out beyond that point.

Answer 3

In my case the attribute below worked

preserveAspectRatio="xMinYMin"

Answer 4

Solution: try another .svg, here some sample head:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="500px" height="82px" viewBox="0.5 1000.5 500 82" enable-background="new 0.5 1000.5 500 82" xml:space="preserve">

Answer 5

The problem is not with your CSS but with your SVG. The SVG will grow to fill the entire element box’s background (as expected). How your SVG scale then becomes the controlling factor:

Set a viewBox="0 0 width height" (in pixels) attribute on your <svg> element and remove its width and height attributes. You also need to set preserveAspectRatio="xMinYMid" (x/vertically left-aligned, y/horizontally middle-aligned) on the svg element. This works with Internet Explorer 10 and 11, at least.

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>

Learn more about the preserveAspectRatio and viewBox attributes. Source, “Getting started with SVG” in the IEblog.

Answer 6

If we give the background size, it will work in IE

below is the sample code

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}