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

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 containers look like so:

<div id="header">
	<div id="logo"></div>
</div>

With the styles:

#header{
	width: 100%;
	max-width: 1200px; 
	height: 100%;}

#logo{
	background: url(../images/ss_logo.svg);
	background-position: left center;
	width: 100%;
	height: 100%;
	float: left;}

You can see that the <div> should span 100% of its parent but display the logo to the left of the element. This works fine in Chrome and Safari, but the logo is always centered inside the <div id="logo"> in IE.

Information seems to be really hard to find on this, has anyone else had the same problem?

Here's a link to an example version of the problem, the green box is the SVG.

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.

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

The accepted answer works, but here's another solution.

Including the dimensions in the SVG so they are identical to the viewbox dimensions also does the trick.

width="496px" height="146px" viewBox="0 0 496 146" 

If you're like me and you edit/save your SVG's in Illustrator, untick the "responsive" checkbox in Advanced Options in the save dialog. Then the dimensions will be included.

(Since it's scalable, it's 'responsive' by definition. So this setting seems a bit redundant.)

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;
}

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.

In my case the attribute below worked

preserveAspectRatio="xMinYMin"

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">

It turns out the following line can turn your svg into a non-centered element:

display: inline-block;

Still not the most ideal solution but it works.