5 Styling



5.1 Styling SVG content

SVG content can be styled by either CSS (see "Cascading Style Sheets (CSS) level 2" specification [CSS2]) or XSL (see "XSL Transformations (XSLT) Version 1.0" [XSLT1]).

SVG content using CSS or XSL for styling can reference external style sheets (see Referencing external style sheets) or embed style sheets within an SVG 'style' element or both.

CSS style declarations can also be specified within style attributes on particular elements. For many applications, element-specific styling is convenient and advantageous, but in situations where multiple elements have common styling, it is usually better to express styling through through the 'style' element or, even better, through external style sheets which may be shared by several related SVG graphics.

Styling the same document using both CSS and XSL style sheets is not recommended at this time as the processing model for this is not well-defined.

5.2 Referencing external style sheets

External style sheets are referenced using the mechanism documented in "Associating Style Sheets with XML documents Version 1.0" [ESS].

5.3 SVG's use of Cascading Style Sheets

SVG supports various relevant properties and approaches common to CSS and XSL, plus selected semantics and features of CSS (see the "Cascading Style Sheets (CSS) level 2" Recommendation [CSS2].

SVG uses styling properties to describe many of its document parameters. In particular, SVG uses styling properties for the following:

The following properties from CSS2 [CSS2] are used by SVG:

The following facilities from CSS2 are supported in SVG:

One variation SVG offers to CSS is that unit-less lengths and sizes are allowed in SVG properties. (Refer to the discussion of Units.)

Additionally, SVG defines a new @color-profile at-rule [CSS2-ATRULES] for defining color profiles to use within SVG content.

5.4 The 'style' element

<!ELEMENT style (#PCDATA)* >
<!ATTLIST style type CDATA "text/css" >

Attribute definitions:

type = content-type
This attribute specifies the style sheet language of the element's contents and overrides the default style sheet language. The style sheet language is specified as a content type (e.g., "text/css"). Authors must supply a value for this attribute; there is no default value for this attribute.
Animatable: no.

The 'style' element allows authors to put style sheet rules embedded within SVG content. 'style' elements are only allowed as children of 'defs' elements.

The syntax of style data depends on the style sheet language.

Some style sheet implementations might allow a wider variety of rules in the 'style' element than in the style attribute that is available to container elements and graphics elements. For example, with CSS [CSS2], rules can be declared within a 'style' element that cannot be declared within a style attribute.

The following is an example of defining and using a text style using a CSS internal style sheet:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN" 
<svg width="4in" height="3in">
      .TitleText { font-size: 16; font-family: Helvetica } ]]>
  <text class="TitleText">Here is my title</text>

Download this example

Note how the CSS style sheet is placed within a CDATA construct (i.e., <![CDATA[ ... ]]>), which is necessary since CSS style sheets are not expressed in XML.

An XSL style sheet ([XSLT1]) can also be embedded within a 'style' element, in which case it is not necessary to enclose the style sheet within a CDATA construct, since XSL style sheets are expressed in XML.

5.5 The class attribute

Attribute definitions:

class = list
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
Animatable: yes.

The class attribute assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles:

In the following example, the 'text' element is used in conjunction with the class attributes to markup document messages. Messages appear in both English and French versions.

<!-- English messages -->
<text class="info" lang="en">Variable declared twice</text>
<text class="warning" lang="en">Undeclared variable</text>
<text class="error" lang="en">Bad syntax for variable name</text>

<!-- French messages -->
<text class="info" lang="fr">Variable déclarée deux fois</text>
<text class="warning" lang="fr">Variable indéfinie</text>
<text class="error" lang="fr">Erreur de syntaxe pour variable</text>

The following CSS style rules would tell visual user agents to display informational messages in green, warning messages in yellow, and error messages in red:

text.info    { color: green }
text.warning { color: yellow }
text.error   { color: red }

5.6 The style attribute

Attribute definitions:

style = style
This attribute specifies style information for the current element. The style attribute specifies style information for a single element. The style sheet language of inline style rules is given by the default style sheet language. The syntax of style data depends on the style sheet language.
Animatable: yes.

The default style sheet language for the style attribute is "text/css" unless any HTTP headers specify the "Content-Style-Type", in which case the last one in the character stream determines the default style sheet language.

This example sets fill and font size information for the text in a specific 'text' element:

<text style="font-size: 12pt; fill: fuchsia">Isn't styling wonderful?</text>

In CSS, property declarations have the form "name : value" and are separated by a semi-colon.

The style attribute may be used to apply a particular style to an individual SVG element. If the style will be reused for several elements, authors should use the 'style' element to regroup that information. For optimal flexibility, authors should define styles in external style sheets.

5.7 Cascading and inheritance of 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.

The definition of each CSS property indicates whether the property can inherit the value of its parent.

5.8 The scope/range of styles

The following define the scope/range of style sheets:

Stand-alone SVG document
There is one parse tree. Style sheets 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.
Stand-alone SVG document embedded in an HTML or XML document with the 'img', 'object' (HTML) or 'image' (SVG) elements
There are two completely separate parse trees; one for the HTML/XHTML document, and one for the SVG document. Style sheets defined anywhere within the HTML/XHTML document (in style elements or style attributes, or in external style sheets linked with the stylesheet PI) apply across the entire HTML/XHTML document. Since inheritance is down a parse tree, these styles do not affect the SVG document. Style sheets 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/XHTML document. To get the same styling across both HTML/XHTML document and SVG document, link them both to the same stylesheet.
Stand-alone SVG content textually included in an XML document
There is a single parse tree, using multiple namespaces; one or more subtrees are in the SVG namespace. Style sheets 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 put an ID on the 'svg' element and use contextual CSS selectors, or use XSL selectors.

5.9 The 'display' property

Value:  inline | block | list-item |
run-in | compact | marker |
table | inline-table | table-row-group | table-header-group |
table-footer-group | table-row | table-column-group | table-column |
table-cell | table-caption | none | inherit
Initial:  inline
Applies to:  all elements
Inherited:  no
Percentages:  N/A
Media:  all
Animatable:  yes

A value other than display: none indicates that the given element shall be rendered by the SVG user agent.

5.10 Default style sheet for SVG

The user agent's default style sheet for elements in the SVG namespace for visual media [CSS2-VISUAL] must include the following entries:

svg, symbol, marker, pattern, view { overflow: hidden }

Refer the description of SVG's use of the 'overflow' property for more information.

Also, refer to the "Cascading Style Sheets (CSS) level 2" specification [CSS2].

5.11 DOM interfaces

5.11.1 Interface SVGStyleElement

The SVGStyleElement interface corresponds to the 'style' element.

interface SVGStyleElement : SVGElement {
  attribute DOMString type;