All geek questions in one place

Is SVG CSS “standard” CSS?

I would like to create some SVG sprites using the external stylesheet described in detail in this @ and W3C Styling SVG tutorial .

However, CSS is not very er, standard:

rect { fill: red; stroke: blue; stroke-width: 3 }

since it is not validated using the W3C CSS Validator .

What gives?

+6
source share
3 answers

Is SVG CSS “standard” CSS?

No, it is not. It uses CSS, but it is not specified in the CSS property specification. This is only part of the SVG specification. This is very similar to using non-standard vendor extensions, while prefixes are defined in CSS grammar, prefix properties are not actually checked as CSS solely because they are non-standard.

You must select an SVG validation profile when validating your code, but it does not work; he spits as many bugs as checking according to the CSS specification. In this case, it is probably a validation error.

+8
source

To test SVG using the W3C CSS Validator, in the Advanced Options section, change the profile to SVG

+9
source

Some properties are standard CSS, for example. display, and some not; they apply only to SVG content, for example. fill. They are all listed here .

I don’t think that there is a simple list to iterate over, which is, but if you click on an individual property, such as display, in the list of properties of the SVG specification (display is usually a standard CSS property), then you will get this text in the SVG standard at the end of the definition

With the exception of any additional information provided in this specification, the normative definition of "display property" is the definition of CSS2 ([CSS2], section 9.2.6).

+3
source

Source: https://habr.com/ru/post/952607/

More articles:


All Articles