My svgs are specified in css like this:
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15"><g fill="none" fill-rule="evenodd" stroke="#00174a"><path d="M11 1l7 6.533L11.07 14M17.5 7.5H.5"/></g></svg>')
This works in all browsers but since chrome 72 this feature no longer works in chrome. I can't find any solid docs about data:image
prefix in a background
property. Or an update from google about this change.
I recognize that I could specify a path to an svg but I'm using this technique to reproduce svgs with different colors and this is the method i need to accomplish that.
It is not valid for data URIs to contain # characters like yours has, you must escape them as %23.
Chrome 71 and earlier version are supporting # in URIs but not after 72 they don't.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With