SVG as data URI not rendering

Question

It's probably just a syntax error but I can't find any thorough references on this kind of usage. Chrome is overstriking my background property, so I've obviously offended something.

http://jsfiddle.net/YbA39/2/

I want what's in the red box (an svg css background) to render just like the inline svg in the html. Simple, right?

Don't say it can't be done! My inspiration is this: http://jsfiddle.net/estelle/SJjJb/

Answer 1

You haven't escaped the '#' characters in the url() syntax. And it's 'viewBox' not 'viewbox'.

Here's something that works: http://jsfiddle.net/YbA39/3/ (just a quick urlescaped string).

Answer 2

The newlines in the declaration were breaking it. Removing all the newlines fixes it in all but IE, which requires base64 or URI encoding:

http://jsfiddle.net/YbA39/4/