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

A related question " svg fill color not working with hex colors"
svg fill color not working with hex colors
was referred here. The example given was:

OK:

I encountered a similar problem trying to export an svg using XMLSerializer. The exported svg was truncated following the # character. In my case, the %23 substitution for # did not work.

I was able to work around the problem by replacing the hex constant with the rgb() function and decimal values. For example, fill ="#FF0000" becomes fill = "rgb(255,0,0)"