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.

Getting this problem in IE 10, but also just noticed its the same in safari. — bluefantail, Jul 30 '13 at 10:41
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`. — Ben Hutchison, Aug 12 '17 at 02:38

score 158 · Accepted Answer · answered Sep 14 '14 at 21:02

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.

answered Sep 14 '14 at 21:02

Daniel

4,525
3
38
52

1

What I'm getting out of this [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio] 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? – Crystal Miller Jun 26 '15 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:http://tutorials.jenkov.com/svg/svg-viewport-view-box.html – Colin James Firth Aug 21 '15 at 10:32
1

Good catch with preserveAspectRatio! Just changed this to the best answer, cheers. – bluefantail Sep 06 '15 at 09:04
1

Great and very complete answer, thank you! Would never have guessed the problem was _inside_ the SVG. – Rijk Nov 05 '15 at 17:08
If it helps someone: I only needed to change preserveAspectRatio to xMidYMax and leave other stuff (existing viewbox) alone .. – trainoasis Dec 08 '15 at 10:51
6

Thanks for this! In my case, I needed xMinYMin. But spot-on! – Jeremy Carlson Feb 12 '16 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. – Dennis Best Mar 20 '16 at 22:23
2

Fabulous answer really appreciate it! For me the viewbox was already set but the preserveAspectRatio fixed it. – Ukuser32 May 18 '16 at 09:10
1

Thank you for the tip. It took me a long time to find out the issue was not my stylesheets, but the image file itself. In my case 'xMinYMin' was also needed. – Bruno Toffolo Jun 01 '16 at 20:19
Thank you for sharing this. It was driving me crazy haha – Joshua Russell Sep 18 '17 at 05:14
For me, `xMinYMin meet` fixed the problem :D – Cerbrus Oct 09 '18 at 10:48

score 18 · Answer 2 · answered Apr 24 '15 at 10:17

18

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

answered Apr 24 '15 at 10:17

Marcus Mori Morba

341
2
6

1

For me, both width and height had to be set as pixel values (not using "auto"). – David Jones Nov 13 '15 at 19:59
same fixed my problem – Eric Cicero Feb 04 '17 at 23:15

Dennis Best · Answer 3 · 2019-06-12T22:11:31.423

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

edited Jun 12 '19 at 22:11

answered Mar 20 '16 at 23:46

Dennis Best

3,614
3
20
31

1

I have came up with same solution. Also chrome starts to shows exact size. – Roman Losev Sep 14 '16 at 12:45

score 16 · Answer 4 · answered May 09 '18 at 06:34

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

answered May 09 '18 at 06:34

Thomas Mathew

235
2
9

That worked for me. In my case adding the fixed background size (not using auto). – Vasilii Burlacu Sep 19 '18 at 13:25

score 6 · Answer 5 · edited Oct 30 '15 at 14:29

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.

score 3 · Answer 6 · edited Mar 20 '20 at 20:26

3

In my case the attribute below worked

preserveAspectRatio="xMinYMin"

edited Mar 20 '20 at 20:26

Brandon Hill

1,782
14
12

answered Oct 29 '19 at 03:53

Tal

1,091
12
25

score -2 · Answer 7 · answered Nov 21 '14 at 12:45

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

score -4 · Answer 8 · answered Oct 24 '14 at 16:02

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

answered Oct 24 '14 at 16:02

Habib Khan

1

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. – Crystal Miller Jun 26 '15 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. – Adam Pearlman Aug 29 '17 at 19:23

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

8 Answers8

Linked