Firefox is giving me a hard time with data URI SVGs. Here is a snippet from my Sass:
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 73"><path fill="#{$text-color}" d="M16.1 32.848l-2.38 2.066v-13.97l-5.67-4.918-2.38 2.066V4.132l2.38-2.066L5.67 0 0 4.916v27.932l5.67 4.92V22.23l2.38-2.066v19.67l-1.19 1.032v4.148l1.19-1.033v24.58l-2.38 2.065 2.38 2.066 5.67-4.918v-28.71l2.38-2.065V52.52l-2.38 2.067 2.38 2.066v.002l5.67-4.918v-13.97l-5.67-4.92"/></svg>');
Chrome and Safari are doing fine, but Firefox does not show it at all. This is the error from Firefox:
Unclosed token:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 73"><path fill="
------------------------------------------------------------^
I found this mention of a firefox bug in which # breaks the image. It should be fixed, but I tried to escape the hash anyway. Sadly that did not help.
Any other ideas what could be wrong?
A # is the beginning of a fragment identifier in a data URI. It must be encoded as %23 if it's not to be interpreted that way.
It's a longstanding Chrome/Safari bug that they don't get fragment identifier parsing right.