html - 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 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.

Answer 1

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.