11

I have the following inline SVG defined as a background-image in my css.

div {
  border: 1px solid black;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M2 10 L8 0 L10 0 L10 10' fill='%238A92DF'></path></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

It works fine in Chrome, Firefox and Edge, but fails in Internet Explorer 11. Why?

JSfiddle here.

aanders77
  • 620
  • 8
  • 22

1 Answers1

15

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>
Vinicius Cenci
  • 186
  • 2
  • 5
  • You come late to the party, but still it's very appreciated. Now I'll be one step closer to full IE11 support in my webapp. – aanders77 Nov 10 '17 at 08:05
  • 2
    I know :) I was searching on google and this was the first link, so I answered, for anyone that may end here.... – Vinicius Cenci Nov 10 '17 at 12:18
  • 4
    The combination of URL encoding and removing ;charset=utf8 worked for me. – Ryan Oct 13 '19 at 22:16
  • The removal of `utf8` is essential to make this work. The answer should be updated to make that clear. I already had the URL encoding so it was that only thing left for me to try. But I can imagine others dismissing it as inconsequential. – moefinley Jan 22 '21 at 11:53