Is it possible to use CSS3 gradients for styling fill property?
I know that SVG provides their own gradients. But the ideal solution for me would be:
No it's not yet possible to use CSS3 gradients for the fill property. The good news though is that it's being discussed by the CSS and SVG workgroups, and SVG.next will depend on CSS3 Image Values (which defines the CSS gradient syntax). See http://www.w3.org/2011/07/29-svg-minutes.html#item08.
Note that the base url for the fill:url(...)
by default is the file that contains this rule. So if you want to move fill:url(#linearGradientXYZ)
to an external stylesheet remember to add the full path to the file containing that gradient definition, eg. fill:url(../images/gradients.svg#linearGradientXYZ)
.