CODEWITHSUNDEEP
htmlcsssvginternet-explorer-11
Liamóg
Liamóg

Reputation: 11

IE11 won't display inline SVG background-image

span {
   background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='12px' height='8px' viewBox='0 -0.297 12 8' style='enable-background:new 0 -0.297 12 8;' xml:space='preserve'><path d='M1.406,0L6,4.594L10.594,0L12,1.406l-6,6l-6-6L1.406,0z'/></svg>");
   display:block;
   height:8px;
   width: 12px;
}

https://jsfiddle.net/d9uu778k/

Works fine in all other browsers except IE. I can view the SVG file on its own in IE11, it just refuses to display it inline. Bug?

Upvotes: 1

Views: 3451

Answers (2)

djibe
djibe

Reputation: 3038

You need to url-encode (you cannot keep < and > symbols).

Here is a working IE example:

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/%3E%3C/svg%3E")

You can use this awesome tool: https://yoksel.github.io/url-encoder/

Upvotes: 0

Paul Brgmr
Paul Brgmr

Reputation: 29

IE(11) and Edge are not able to display inline svg. You need to convert to base64. https://stackoverflow.com/a/27322138/4143239
https://css-tricks.com/probably-dont-base64-svg/

Upvotes: 2

Related Questions