Ie11 Using Svg as Background-Image Fails

Inline SVG background not working in Internet Explorer 11

You have to full URL encode your svg.

If you're using VSCode, there is a extension called "URL Encode" that'll do this for you... OR you can easily find one online: https://meyerweb.com/eric/tools/dencoder/

Note that I've also removed the "version" attribute and the ";charset=utf8" part, not sure if needed, but to clear things up...

div {  border: 1px solid black;  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2010%2010'%3E%3Cpath%20d%3D'M2%2010%20L8%200%20L10%200%20L10%2010'%20fill%3D'%238A92DF'%3E%3C%2Fpath%3E%3C%2Fsvg%3E");  background-repeat: no-repeat;  background-position: center center;  background-size: 100%;  width: 500px;  height: 500px;}

<div></div>

HTML5 - SVG issue with rendering an image in IE 11

You only forgot to set svg's height and width, IE doesn't like it...

I didn't found the specs about it yet, but without a height nor width set, browser should consider it as 100%, where IE seems to have some issues...

So either set absolute height and width attributes on the svg tag, or set it through css, either absolutely on the svg, or absolutely on its container (the <div> here), or relatively on every of its containers (html,body,div{width: 100%; height:100%} here).

SVG issues in ie11

What you can do is add the height="320" attribute to your SVG tag. So IE can render correctly. I believe IE11 is thrown off by using width 200% in your CSS. But since xml:space="preserve" is the default, setting only the height will keep the proportions of your SVG jacket.

Test codepen example in IE11:

http://codepen.io/jonathan/pen/MarvEm

<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">

Also remove the XML namespace tag since it is not needed inside an HTML page. And you can also remove some of the SVG attributes like version, xmlns, xmlns:xlink, x, and y, since those are not needed as well.

---

Related Topics