79

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.

5
  • 1
    Can you link a live example of this behaviour? Jul 30, 2013 at 10:23
  • Getting this problem in IE 10, but also just noticed its the same in safari. Jul 30, 2013 at 10:41
  • magma.acidic.co.nz/sites/example Jul 30, 2013 at 10:45
  • 1
    Adding background-size: worked for me.
    – Davey
    Jan 5, 2017 at 16:14
  • 5
    CSS background-size worked for me as well, but unlike Chrome/FF/Safari, IE can't handle a single value to imply auto-height preserving aspect ratio. For example, to render a square SVG at 13x13 px, use background-size: 13px 13px instead of background-size: 13px. Aug 12, 2017 at 2:38

8 Answers 8

158

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.

11
  • 1
    What I'm getting out of this [developer.mozilla.org/en-US/docs/Web/SVG/Attribute/… is that one can not set the background position with css & that must be done in the SVG itself. Is this correct? If so, that is just bloody inconvenient. Is there anyway around this? Jun 26, 2015 at 18:26
  • 1
    It is a bit of a pain to have to edit the svg to get proper positioning, but that's not a major problem once you know wheat to do. I found this superb tutorial on it:tutorials.jenkov.com/svg/svg-viewport-view-box.html Aug 21, 2015 at 10:32
  • 6
    Thanks for this! In my case, I needed xMinYMin. But spot-on! Feb 12, 2016 at 22:39
  • 2
    If you're like me and you edit and save your SVG's from Illustrator, untick the "responsive" checkbox in Advanced Options in the save dialog. Mar 20, 2016 at 22:23
  • 2
    Fabulous answer really appreciate it! For me the viewbox was already set but the preserveAspectRatio fixed it.
    – Ukuser32
    May 18, 2016 at 9:10
18

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

2
  • 1
    For me, both width and height had to be set as pixel values (not using "auto"). Nov 13, 2015 at 19:59
  • same fixed my problem Feb 4, 2017 at 23:15
16

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;
}
1
  • That worked for me. In my case adding the fixed background size (not using auto). Sep 19, 2018 at 13:25
16

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

1
  • 1
    I have came up with same solution. Also chrome starts to shows exact size. Sep 14, 2016 at 12:45
6

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.

3

In my case the attribute below worked

preserveAspectRatio="xMinYMin"

-2

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

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.

2
  • An element's display property has nothing to do with it's background property. I would like see the sources that made you believe otherwise. Jun 26, 2015 at 17:47
  • What is happening in Habib's case is that when he changes the display property of the container to inline-block, the width changes from 100% to the width of the content. So if the container was very wide, and now has become narrow, the image may look as if it is no longer centered. However, as @CrystalMiller points out, this isn't actually the case. Aug 29, 2017 at 19:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.