SVG background clipped in IE11 when scaling

Question

We are trying to display the SVG background in Internet Explorer. Our images are always cropped when using zoom other than 100%. This can be reproduced using the following code:

with this svg

<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" /> </svg> 

 div { width: 14px; height: 14px; background-size: 14px 14px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' stroke='black' stroke-width='3' fill='red'%3E%3C/circle%3E%3C/svg%3E"); } 

 <div></div> 

The result is as follows:

In all other browsers, it looks great. Has anyone else ever experienced this error? Is there a workaround?

Answer 1

I found one workaround that requires very little work:

Make the SVG image 2X in size of the actual content (this will make the circle the same:

 <svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 200 200"> <circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" /> </svg> 

Then use: after the pseudo-element to create an internal element with 2x the desired size. So html will be

 <div class="circle"></div> 

And css will be

 .circle { width: 14px; height: 14px; position:relative; } .circle:after { position: absolute; top: 0; left: 0; content: ' '; width: 28px; height: 28px; background-size: 28px 28px; background-repeat: no-repeat; background-image: url('circle.svg'); } 

Extra space in: after pseoudoelement gives IE a spare canvas for drawing, but both the visible icon and the space occupied by the original container remain unchanged.