Embedded background svg doesn't display on Firefox if it has a “fill” attribute

Question

I\'m trying to use .svg embedded in .css as the background of a link. Here is the css rule:

background-image: url(\'data:image/svg+xml;utf8,

Answer 1

You should escape "#" character to "%23" because "#" is hash character in URL string.

http://jsfiddle.net/dmen16me/

url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="7px"><g><g><polygon points="8.433,-0.06 4.985,3.325 1.539,-0.06 -0.066,1.546 4.985,6.566 10.037,1.546" fill="%2361B23B"/></g></g></svg>');

But I think using base64 is better too.