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 Cascading 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 text 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 XML attributes.

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 user agent 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 its parent.

7.3 The Scope/Range of CSS Styles

The following define the scope/range of CSS styles:

Stand-alone SVG graphic

There is one parse tree, and all elements are in the SVG namespace. CSS styles defined anywhere within the SVG graphic (in style elements or style attributes, or in external style sheets linked with the stylesheet PI) apply across the entire SVG graphic.

Stand-alone SVG graphic embedded in an HTML document with the <img> or <object> elements

There are two completely separate parse trees; one for the HTML document, and one for the SVG graphic. CSS styles defined anywhere within the HTML document (in style elements or style attributes, or in external style sheets linked with the stylesheet PI) apply across the entire HTML document. Since inheritance is down a parse tree, these styles do not affect the SVG graphic. CSS styles defined anywhere within the SVG document (in style elements or style attributes, or in external style sheets linked with the stylesheet PI) apply across the entire SVG document. These styles do not affect the containing HTML document. To get the same styling across both HTML document and SVG graphic, link them both to the same stylesheet.

Stand-alone SVG graphic textually included in an XML document

There is a single parse tree, using multiple namespaces; one or more subtrees are in the SVG namespace. CSS styles defined anywhere within the XML document (in style elements or style attributes, or in external style sheets linked with the stylesheet PI) apply across the entire document including those parts of it in the SVG namespace. To get different styling for the SVG part, use the style attribute or <style> element on the <svg> element. Alternatively, put an ID on the <svg> element and use contextual CSS selectors.