SVG data image not working on Firefox or Chrome 72+

Question

I\'m setting a SVG as background-image for a pseudo element:

content: \'\';
position: absolute;
 right: 0;
bottom: 0;
  left: 0;
width: 100%;
he         


        

Answer 1

The # character in a URL is reserved to indicate the start of a fragment identifier.

You must URL encode the data URL contents, which means converting any hash characters in the data URL to %23