I'd like to style some SVG sprites using an external stylesheet, as detailed in this Sitepoint tutorial and W3C's Styling with SVG.
However, the CSS isn't very, er, standard:
rect {
fill: red;
stroke: blue;
stroke-width: 3
}
as it doesn't validate with the W3C CSS Validator.
What gives?
To validate SVG using the W3C CSS Validator, under "More Options" change the profile to SVG
Is CSS for SVG “standard” CSS?
No, it is not. It makes use of the CSS language, but it is not in the CSS property specification. It's only part of the SVG specification. It's quite similar to using non-standard vendor extensions, in that while prefixes are defined in the CSS grammar, prefixed properties don't actually validate as CSS solely because they're non-standard.
You're supposed to choose the SVG validation profile when validating your code, but it doesn't appear to work; it spits just as many errors as validating according to the CSS spec would. In that case, then it's probably a validator bug.
Some properties are standard CSS e.g. display, and some aren't; they apply only to SVG content e.g. fill. They're all listed here.
I don't think there's an easy to digest list of which is which but if you click on an individual property such as display in the SVG specification property list (display happens to be a standard CSS property) then you get this text in the SVG standard at the end of the definition:
Except for any additional information provided in this specification, the normative definition of the ‘display’ property is the CSS2 definition ([CSS2], section 9.2.6).
