Originally Posted by VIPStephan
When I open the SVG directly in the browser the fill is applied accordingly but embedded as background image it isnít. Why is that and how can I make it work?
Apparently, SVG-based external CSS isn't implemented in Blink- or Gecko-based browsers for SVG images displayed via
elements or CSS. There doesn't appear to be a bug filed on the issue, open or closed, in Bugzilla@Mozilla.
SVG-based external CSS is implemented in Trident. However, IE10's implementation is buggy: the images load fine initially, but as soon as you hit the refresh button, the external style sheets are unloaded.
You could opt to use embedded CSS or markup attributes to fix the problem in Blink and Gecko. However, another IE10 bug makes SVG-based CSS backgrounds unusable. IE10's implementation of the
property is bugged when applied to SVG-based background images: the images scale based on the size of their container element when you specify a fixed background size. That causes the image to initially appear the wrong size and to change sizes when you resize the window, for example.