Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Did Chrome 72 break 'data:image/svg+xml;utf8' for css background svgs? [duplicate]

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.

like image 846
Brandon Morrison Avatar asked Jan 31 '19 05:01

Brandon Morrison


1 Answers

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.

like image 174
Mahdi Ahmadi Avatar answered Oct 11 '22 01:10

Mahdi Ahmadi