SVGs as background images don't display properly in IE9

Question

I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:

enter image description here

The element above is a close link of a modal. Structure and styles of the close link:

HTML

<a href="#" class="aq-modal-close"></a>

CSS

.aq-modal-close {
        display: block;
        width: 12px;
        height: 12px;
        background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
        background-size: 12px 12px;
        float: right;
        margin-top: 5px;
    }

The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.

How did you create your SVG? Did you use the `Responsive` option when exporting from Adobe Illustrator ? — Mike Vranckx, Mar 03 '15 at 09:09
check this might help you [link for previous question](http://stackoverflow.com/questions/21840551/background-size-with-svg-squished-in-ie9-10) — zeidanbm, Mar 03 '15 at 09:11
Thanks for the comments so far. I know about the SVG-creation issue, however I have no influence on that, as the images are provided by a designer. I was kind of hoping this is a styling problem but I guess I will have to contact the guy. — lesssugar, Mar 03 '15 at 09:17

score 0 · Answer 1 · answered Mar 03 '15 at 10:40

0

You can add a background-position with negative values: DEMO

.close {
    display: block;
    width: 52px;
    height: 52px;
    background: url('image.svg') no-repeat 0 0 scroll;
    background-size: 52px;
    background-position: -10px 0px;
    border: 1px solid black;
}

answered Mar 03 '15 at 10:40

Persijn

14,624
3
43
72

Sure, I could do that, but it would mean having specific CSS only for IE9. If there is a way to avoid such hacks, I will go for it. Actually, I have an answer to the problem. Posting it in a minute. – lesssugar Mar 03 '15 at 11:31
"however I have no influence on that, as the images are provided by a designer." You said you couldn't change the images? My solution was IE9 specific because your question was as well. – Persijn Mar 03 '15 at 12:04

score 0 · Answer 2 · edited May 23 '17 at 10:09

0

As @zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.

Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.

edited May 23 '17 at 10:09

Community

1
1

answered Mar 03 '15 at 11:33

lesssugar

15,486
18
65
115

SVGs as background images don't display properly in IE9

2 Answers2