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

For anyone having this encoding issue when trying to use url with sass variables (for fills, for instance), the following is quite useful: https://gist.github.com/JacobDB/0ffffaf8e772c12acf7102edb8a302be

Note, you may need to edit the output url from inline-svg depending on your needs (in my case, I was using data:image/svg+xml;utf8 instead)