12

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.

Brandon Morrison
  • 133
  • 1
  • 7
  • 1
    Please read this: [Optimizing SVGs in data URIs](https://codepen.io/tigt/post/optimizing-svgs-in-data-uris) – enxaneta Jan 31 '19 at 06:49
  • It does not work in all browsers. Its never worked in Firefox because its invalid. Looks like Chrome is doing proper parsing too now so maybe more invalid data will get fixed. – Robert Longson Jan 31 '19 at 08:03
  • 1
    I refactored it out but I am under the impression that @RobertLongson is correct. possibly the svg needs to be encoded to avoid using `#` and other special chars. – Brandon Morrison Jan 31 '19 at 20:39

1 Answers1

20

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.

Arvin Sanaei
  • 103
  • 1
  • 12
Mahdi Ahmadi
  • 441
  • 4
  • 12
  • BINGO... encoding hex colors like `'#acb'` as `'%23abc'` fixes this for Chrome. Was frustrating as it works for Safari without the encoding. Thank you, am trying to resurrect some content from years ago, this helped. – Myndex Dec 03 '20 at 03:07