Firefox不显示数据URI SVG

Firefox让我很难使用数据URI SVG。 以下是我的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>');

backgroundimage:url（'data:image/svg+xml；utf-8'）；

Chrome和Safari做得很好，但Firefox根本没有表现出来。 这是来自Firefox的错误：

Unclosed token:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 73"><path fill="
------------------------------------------------------------^

未关闭的令牌：
A#是数据URI中片段标识符的开头。如果不这样解释，则必须将其编码为%23

Chrome/Safari是一个长期存在的bug，他们没有正确解析片段标识符。
啊，好吧，我试图通过反斜杠来逃避它<代码>%23

确实有效！如果你回答这个问题，我可以把它标记为解决方案。谢谢