7 CSS Properties, XML Attributes, Cascading, and Inheritance
7.1 Introduction: CSS Properties vs. XML Attributes
Any language which is an application of XML and supports
Style Sheets (CSS) will necessarily have some of its element
parameters as XML attributes and others as CSS properties. SVG is no exception.
In designing SVG, the following criteria were used to decide which parts of SVG
were expressed as XML attributes and which as CSS properties. In general,
CSS properties were used for the following:
- Parameters which are clearly visual in nature and thus lend themselves to
styling. Examples include all attributes that define how an object is
"painted" such as fill and stroke colors, linewidths and dash styles.
- Parameters having to do with text styling such as font-family
and font-size. (In fact, SVG supports all of the
and font properties from CSS2.)
- Parameters which arguably fit in with CSS and which might have future use
in multiple other XML grammars. By defining these attributes as CSS
properties, we are making progress toward commonality across multiple
languages. (Transformations are an example of this. ??? add link here)
- Parameters which arguably fit in with CSS and which could allow for
smaller file sizes if they were defined as CSS properties rather than
All remaining parameters are XML attributes. The result is that the majority of
parameters in SVG are expressed as CSS properties.
7.2 Cascading and Inheritance of XML Attributes and CSS Properties
SVG conforms fully to the cascading style rules of CSS (i.e.,
the rules by which the SVG processor decides which property setting
applies to a given element).
See the CSS2 specification for a discussion of these rules.
In this document, the definition of each XML attribute and CSS property
indicates whether that attribute/property can inherit the value of
7.3 The Scope/Range of CSS Styles
The following define the scope/range of CSS styles:
- Any CSS styles defined anywhere within a SVG document apply
at least across the entire SVG document.
- It is possible that CSS styles defined outside the current SVG document
(e.g., the styles defined in a parent HTML or XML document, styles
defined in another SVG fragment sharing the same parent document, or
styles defined by the end user) might also be available and apply
to the current document