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.