CODEWITHSUNDEEP
cssinternet-explorersvg
Raptor
Raptor

Reputation: 442

SVG as background image in IE with zoom

I have SVG used as background image:

<div class="buble"></div>

and CSS:

.buble
{
  background-image: url(https://beta.creasoft.cz/Images/buble-small.svg);
  background-repeat: no-repeat;

  width: 48px;
  height: 48px;
}

When displayed in IE 11 and zoomed (set zoom to 105% or more), it looks broken:

enter image description here

Works fine in Chrome. Is there any way how to fix it?

https://codepen.io/raptor/pen/WZoYBB

Upvotes: 0

Views: 894

Answers (1)

Matthew Beckman
Matthew Beckman

Reputation: 1722

IE11 doesn't support the scaling of SVG images when the viewBox, width and height attributes are explicitly specified. In your case, you're giving the image and width and height of 48px, which IE11 won't want to scale properly.

To fix it, you can just use a container. The first thing you'll need to do is build the container to house your SVG.

<div id="container">
  <div class="buble"></div>
</div>

Now you'll want to define your container, and add width: 100% to the .buble div, or SVG.

#container {
  width: 48px;
  height: 48px;
}
.buble {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('https://beta.creasoft.cz/Images/buble-small-test.svg');
}

You may need to also make sure the height and width are removed from the actual SVG file itself, if it contains it. You can checkout this GitHub repo for more info about SVG's + IE.

Upvotes: 1

Related Questions