IE not displaying SVG as content in a pseudo element :before or :after

Question

This problem is a extension of below thread. Is there a way to use SVG as content in a pseudo element :before or :after.

I am trying to attach a svg triangle after a div using pseudo class.

div{
background-color: black;
width: 48px;
height: 45px;
}

div::before{
content: 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" preserveAspectRatio="xMidYMid meet" viewBox="266.53926701570674 152.66492146596858 44 44"><defs><path d="M267.54 153.66L307.54 193.66L267.54 193.66L267.54 153.66Z" id="d6AN4MEUYO"></path></defs><g><g><use xlink:href="#d6AN4MEUYO" opacity="1" fill="red" fill-opacity="1"></use></g></g></svg>');
right: -47px;
position: relative;

}

<div></div>

The above code is working good in chrome but when it comes to IE it is not loading the svg content.

I also tried with background-image property but it seems to not work in IE(version > 10).

What is the right way to append this svg as a content with pseudo classes?

Which version of IE? Also, it's not working in your snippet in Chrome either. — Paulie_D, Jul 16 '19 at 11:09
Note `IE9-Edge12, Safari 5.1-6, and UCWeb 11 do not support referencing external files via `... just use regular svg and it will work, also specify height, width... check [caniuse](https://caniuse.com/#feat=svg). — skobaljic, Jul 16 '19 at 11:14
Unrelated to the answer, but pseudo elements should be marked with a double colon `.class::after` instead of single colon `.class:after`. Pseudo classes are marked with single colons. Source https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#Syntax — Phlame, Dec 12 '20 at 03:16

Zhi Lv · Accepted Answer · 2019-07-22T08:04:27.287

I have tested it with IE 11 and I am able to produce the issue. It seems that the pseudo-elements content attribute do not currently work on SVG elements. It can be possible that it is some kind of bug or it is IE browser default behavior. I will try to submit the feedback regarding this issue.

As a workaround, I suggest you display the svg content using background-image attribute, like this:

<style>
    .div1:after {
        content: '';
        display: block;
        height: 80px;
        width: 80px;
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
    }
</style>
<div class="div1" style="background-color:green; width:80px;height:80px"></div>

The result in IE 11 browser as below:

Edit:

I am not able to use my svg with background-image property whereas your svg is loading with the property. Is there any problem with my svg?

When we use SVG with background-image property, we should ensure that reserved URL characters are encoded (e.g. < === %3C and > === %3E) and also replace the space with '%20'.

So, please encode your svg element as below:

background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%22266.53926701570674%20152.66492146596858%2044%2044%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M267.54%20153.66L307.54%20193.66L267.54%20193.66L267.54%20153.66Z%22%20id%3D%22d6AN4MEUYO%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23d6AN4MEUYO%22%20opacity%3D%221%22%20fill%3D%22red%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);

Then, the result like this:

I am not able to use my svg with background-image property whereas your svg is loading with the property. Is there any problem with my svg? — Onera, Jul 16 '19 at 13:12
I used https://yoksel.github.io/url-encoder/ link to encode svg. Thanks — Onera, Jul 17 '19 at 10:38

IE not displaying SVG as content in a pseudo element :before or :after

1 Answers1