Did Chrome 72 break 'data:image/svg+xml;utf8&#

Question

This question already has an answer here:

• SVG data image not working on Firefox or Chrome 72+ 3 answers

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.

Answer 1

It is not valid for data URIs to contain # characters like yours has, you must escape them as %23

Chrome 71 and later are supporting # in URIs but after 72 they don't