The only browser in which it seems to work nicely is Safari (5.1.4). In Opera 11.62 the gradient is black, in IE 9 and Firefox 12 it's white. In Chrome 19, it works UNLESS you specify the width/height of the SVG in % units. I'd say it's more of an oddity than a real feature. It's a cool find though.
–
toniedzwiedzMay 26 '12 at 18:40

1

Right... still I'm anxious to see the looks on my coworkers' faces when I show them a cute little monster like this so thanks again for showing it's possible. I just went to the standard specification and stated it was virtually impossible, which turned out to be a mistake (sort of)
–
toniedzwiedzMay 26 '12 at 19:05

The "browser incompatibility" here is mostly just a lack of proper URL escaping, everything inside url() should be url-escaped. See jsfiddle.net/6WAtQ for an example that works just fine in Opera, Firefox and Safari.
–
Erik DahlströmMay 27 '12 at 19:46

Is there any compatibility difference between base64 encoded svg to non-base64? Base64 bloats my css file, I'm thinking in just use inline svgs..
–
enapupeApr 15 '13 at 13:39

A little late, but if any of you have been going crazy trying to use inline SVG as a background, the escaping suggestions above do not quite work. For one, it does not work in IE, and depending on the content of your SVG the technique will cause trouble in other browsers, like FF.

If you base64 encode the svg (not the entire url, just the svg tag and its contents! ) it works in all browsers. Here is the same jsfiddle example in base64: http://jsfiddle.net/vPA9z/3/