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

You can use the encodeURIComponent(uri) function of JS.

This function encodes special characters and can encodes also the following characters: , / ? : @ & = + $ #

Reference: https://www.w3schools.com/jsref/jsref_encodeuricomponent.asp