SVG data image not working on Firefox or Chrome 72+

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

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

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)