The background position of the svg image is always concentrated in Internet Explorer, despite the background position: the left center;

Question

I use the SVG logo as a background image, and I cannot get it to align left correctly in Internet Explorer (edit: and Safari).

The containers look like this:

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

With 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 cover 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 inside <div id="logo"> in IE.

It seems really hard to find information about this, does anyone else have the same problem?

Here is a link to an example version of the problem , the green field is SVG.

Answer 1

The problem is not with your CSS, but with your SVG. SVG will grow to fill the entire background of item boxes (as expected). How your SVG scale becomes the governing factor:

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

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

Learn more about preserveAspectRatio and viewBox attributes. Source, "Getting Started with SVG" on IEblog .

Answer 2

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

Answer 3

The accepted answer works, but here is another solution.

Including dimensions in an SVG so that they are identical to the dimensions of the viewport also helps.

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

If you are like me and edit / save SVG in Illustrator, uncheck the "responsive" checkbox in the "Advanced Options" section of the save dialog. Then sizes will be included.

(Since it is scalable, it is “responsive” by definition. Therefore, this option seems a bit redundant.)

Answer 4

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

below is sample code

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

Answer 5

IE 8-11 when placing SVG in the background without repeating automatically aligns the left and right sides to scale it to fit. This creates a centering effect of the image at the image level. Meaning: To fill the container, a space widens on both sides of the image.

The new image will be 100% the width of its element. Therefore, the position: on the left is not valid, it is already left with the addition included.

The background element container must be limited to prevent expansion (by cropping). For example: 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 140 pixels, but it will no longer go beyond this point.

Answer 6

Solution: try another .svg, here are some examples:

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

It turns out the following line can turn your svg into an off-center element:

 display: inline-block; 

Still not the perfect solution, but it works.