previous next contents properties index

# 5 Styling

## Contents

## 5.1 How styling relates to Stylable SVG and Exchange SVG

The SVG language comes in two forms: Stylable SVG and Exchange SVG. Stylable SVG assigns rendering properties through a style sheet language such as CSS or XSL Transformations and provides syntax for embedding style sheets and style declaration blocks within Stylable SVG content. Exchange SVG assigns rendering properties via XML attributes on graphics elements and does not provide syntax for embedding style sheets and style declaration blocks within Exchange SVG content. Since this chapter describes how styling relates to SVG, the language constructs described in this chapter applie only to Stylable SVG. However, since Stylable SVG and Exchange SVG share the same semantics and inheritance models, the semantic model for applying rendering properties as described in this chapter apply to both Stylable SVG and Exchange SVG.

This chapter describes the rules for referencing and embedding style sheets for use with Stylable SVG. It provides a list of the styling properties and details the various cascading and inheritance rules. It also details the features that are specific to Stylable SVG, such as the 'style' element and the 'style' attribute.

## 5.2 Applying style sheets to Stylable SVG content

Stylable 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" [XSLT]).

SVG content 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.3 Referencing external style sheets

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

## 5.4 Features from CSS used by SVG

SVG supports various relevant properties and approaches common to CSS and XSL, plus selected semantics and features defined in CSS2 (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:

- 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'.
- Parameters which impact the way that graphical elements are rendered, such as specifying clipping paths, masks, arrowheads, markers and filter effects.

SVG uses much of the syntax and semantics of CSS in the definition of its properties. Specifically, SVG uses the following facilities from CSS:

- CSS2 syntax rules (references: [CSS2 syntax and basic data types] and [The grammar of CSS2]).
- CSS2 allowable data types. (The normative reference is [CSS2 syntax and basic data types]), with the exception that SVG allows <length> and <angle> values without a unit specifier. See Units.)

In an SVG user agent that supports CSS style sheets, the following facilities from [CSS2] must be supported:

- CSS2 selectors within style sheets (reference: [Selectors]).
- External CSS style sheets [XML-SS], CSS style sheets within 'style' elements and CSS declaration blocks within style attributes attached to specific SVG elements.
- CSS2 rules for assigning property values, cascading and inheritance.
- @font-face, @media, @import and @charset rules within style sheets.
- CSS2's dynamic pseudo-classes :hover, :active and :focus and pseudo-classes :first-child, :visited, :link and :lang. The remaining CSS2 pseudo-classes, including those having to do with generated content, are not part of the SVG language definition. (Note: an SVG element gains focus when it is selected. See Text selection.)
- For the purposes of aural media, SVG represents a CSS-stylable XML grammar. In user agents that support aural style sheets, CSS aural style properties can be applied as defined in [CSS2]. (See Aural style sheets.)

An SVG user agent is required to support the syntax and semantics of the following properties from [CSS2]:

- Font properties:
  - 'font-family'
  - 'font-style'
  - 'font-variant'
  - 'font-weight'
  - 'font-stretch'
  - 'font-size'
  - 'font-size-adjust'
  - 'font'
- Text properties:
  - 'text-decoration'
  - 'letter-spacing'
  - 'word-spacing'
  - 'direction'
  - 'unicode-bidi'
- Other properties for visual media:
  - 'visibility'
  - 'display'
  - 'overflow' (Only applicable to elements which establish a new viewport)
  - 'clip' (Only applicable to outermost 'svg')
  - 'color' is used to provide a potential indirect value (currentColor) for the 'fill' and 'stroke' properties. (The SVG properties which support color allow a color specification which is extended from CSS2 to accommodate color definitions in arbitrary color spaces. See Color profile descriptions and @color-profile.
  - 'cursor'

Additionally, SVG defines an @color-profile at-rule [CSS2-ATRULES] for defining color profiles so that ICC color profiles can be applied to SVG content.

## 5.5 The 'style' element

The 'style' element is only present in Stylable SVG. It is not included in the definition of Exchange SVG.

    <!ELEMENT style (#PCDATA) >
    <!ATTLIST style
      %stdAttrs;
      type %ContentType; #REQUIRED >

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.

Attributes defined elsewhere:
  %stdAttrs;.

The 'style' element allows authors to embed style sheets within SVG content.

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 20000303 Stylable//EN"
      "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
    <svg width="4in" height="3in">
      <defs>
        <style type="text/css"><![CDATA[
          .TitleText { font-size: 16; font-family: Helvetica } ]]>
        </style>
      </defs>
      <text class="TitleText">Here is my title</text>
    </svg>

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.

## 5.6 The style attribute

The style attribute is only present in Stylable SVG. It is not included in the definition of Exchange SVG.

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 value of attribute contentStyleType on the 'svg' element. The syntax of style data depends on the style sheet language.
  Animatable: no.

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 Specifying the default style sheet language

The contentStyleType attribute on the 'svg' element specifies the default style sheet language for the given document fragment.

contentStyleType = "%ContentType;"
  Identifies the default style sheet language for the given document. This attribute sets the style sheet language for the style attributes that are available on many elements. The value %ContentType; specifies a media type, per [RFC2045]. The default value is "text/css".
  Animatable: no.

## 5.8 Cascading and inheritance of properties

When styled with CSS, SVG conforms fully to the cascading rules defined in the CSS2 specification [CSS2-CASCADE]. Property inheritance in SVG follows the inheritance rules for properties defined in the CSS2 specification [CSS2-INHERIT].

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

In SVG, as in CSS2, most elements inherit computed values [CSS2-COMPUTED]. For cases where something other than computed values are inherited, the property definition will describe the inheritance rules. For specified values [CSS2-SPECIFIED] which are expressed in user units, in pixels (e.g., "20px") or in absolute values [CSS2-COMPUTED], the computed value equals the specified value. For specified values which use certain relative units (i.e., em, ex and percentages), the computed value will have the same units as the value to which it is relative. Thus, if the parent element has a 'font-size' of "10pt" and the current element has a 'font-size' of "120%", then the computed value for 'font-size' on the current element will be "12pt". In cases where the referenced value for relative units is not expressed in any of the standard SVG units (i.e., CSS units or user units), such as when a percentage is used relative to the current viewport or an object bounding box, then the computed value will be in user units.

## 5.9 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 processing instruction) 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 referencing document (perhaps HTML/XHTML), and one for the SVG document. Style sheets defined anywhere within the referencing document (in style elements or style attributes, or in external style sheets linked with the stylesheet processing instruction) apply across the entire referencing document but have no effect on the referenced SVG document. Style sheets defined anywhere within the referenced SVG document (in style elements or style attributes, or in external style sheets linked with the stylesheet processing instruction) apply across the entire SVG document, but do not affect the referencing document (perhaps HTML/XHTML). 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 processing instruction) 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.10 The 'display' property

'display'

  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.11 Default style sheet for SVG

The user agent shall maintain a default style sheet [CSS2-CASCADE-RULES] for elements in the SVG namespace for visual media [CSS2-VISUAL]. The default style sheet below is expressed using CSS syntax; however, user agents are required to support the behavior that corresponds to this default style sheet even if CSS style sheets are not supported in the user agent:

    svg, symbol, marker, pattern, view, use, image, mask { overflow: hidden }
    svg { width:attr(width); height:attr(height) }

The first line of the above default style sheet will cause the initial clipping path to be established at the bounds of the initial viewport. Furthermose, it will cause new clipping paths to be established at the bounds of the elements listed below, all of which areb elements that establish a new viewport. (Refer the description of SVG's use of the 'overflow' property for more information.)

The second line of the above default style sheet will cause the width and height attributes on the 'svg' element to be used as the default values for the 'width' and 'height' properties during [CSS2-LAYOUT].

## 5.12 Aural style sheets

For the purposes of aural media, SVG represents a stylable XML grammar. In user agents that support aural style sheets, aural style properties [CSS2-AURAL] can be applied as defined in [CSS2].

Aural style properties can be applied to any SVG element that can contain character data content, including 'desc', 'title, 'tspan'. 'tref' and 'textPath'. On user agents that support aural style sheets, the following [CSS2] properties can be applied:

| 'azimuth' |  | [CSS2-azimuth]
| 'cue' |  | [CSS2-cue]
| 'cue-after' |  | [CSS2-cue-after]
| 'cue-before' |  | [CSS2-cue-before]
| 'elevation' |  | [CSS2-elevation]
| 'pause' |  | [CSS2-pause]
| 'pause-after' |  | [CSS2-pause-after]
| 'pause-before' |  | [CSS2-pause-before]
| 'pitch' |  | [CSS2-pitch]
| 'pitch-range' |  | [CSS2-pitch-range]
| 'play-during' |  | [CSS2-play-during]
| 'richness' |  | [CSS2-richness]
| 'speak' |  | [CSS2-speak]
| 'speak-header' |  | [CSS2-speak-header]
| 'speak-numeral' |  | [CSS2-speak-numeral]
| 'speak-punctuation' |  | [CSS2-speak-punctuation]
| 'speech-rate' |  | [CSS2-speech-rate]
| 'stress' |  | [CSS2-stress]
| 'voice-family' |  | [CSS2-voice-family]
| 'volume' |  | [CSS2-volume]

For user agents that support aural style sheets and also support [DOM2], the user agent is required to support the DOM interfaces defined in [DOM2-CSS] that correspond to aural properties [CSS2-AURAL]. (See Relationship with DOM2 CSS object model.)

## 5.13 DOM interfaces

The following IDL definitions are defined for the various Stylable SVG-specific attribute definitions in the SVG DOM.

    // For access to CSSStyleDeclaration type.
    #ifdef STYLABLESVG
    #include "css.idl"
    #endif STYLABLESVG

    #ifdef STYLABLESVG
      // The definitions only apply to
      // the DOM for Stylable SVG.
      typedef css::dom::CSSStyleDeclaration CSSStyleDeclaration;

    #define STYLABLESVGStyleAttribute \
      readonly attribute CSSStyleDeclaration style

    #endif STYLABLESVG

The following interfaces are defined below: SVGStyleElement, SVGCSSRule, CSSColorProfileRule.

### Interface SVGStyleElement

The SVGStyleElement interface corresponds to the 'style' element.

IDL Definition

      interface SVGStyleElement : SVGElement, SVGLangSpace, SVGTests {
                 attribute DOMString type;
      };

Attributes
  DOMString type
    Corresponds to attribute type on the given 'style' element.

### Interface SVGCSSRule

SVG extends interface CSSRule with interface SVGCSSRule by adding an CSSColorProfileRule rule to allow for specification of ICC-based color.

It is likely that this extension will become part of a future version of CSS and DOM.

IDL Definition

      interface SVGCSSRule : CSSRule {
        // Additional CSS RuleType to support ICC color specifications
        constant unsigned short COLOR_PROFILE_RULE = 7;
      };

Definition group Additional CSS RuleType to support ICC color specifications
  Defined constants

    COLOR_PROFILE_RULE |  | The rule is an @color-profile.

### Interface CSSColorProfileRule

The CSSColorProfileRule interface represents an @color-profile rule in a CSS style sheet. An @color-profile rule identifies a ICC profile which can be referenced within a given document.

IDL Definition

      interface CSSColorProfileRule : SVGCSSRule {
        // Rendering Intent Types
        constant unsigned short RENDERING_INTENT_UNKNOWN               = 0;
        constant unsigned short RENDERING_INTENT_AUTO                  = 1;
        constant unsigned short RENDERING_INTENT_PERCEPTUAL            = 2;
        constant unsigned short RENDERING_INTENT_RELATIVE_COLORIMETRIC = 3;
        constant unsigned short RENDERING_INTENT_SATURATION            = 4;
        constant unsigned short RENDERING_INTENT_ABSOLUTE_COLORIMETRIC = 5;

                 attribute DOMString      src;
                 attribute DOMString      name;
                 attribute unsigned short renderingIntent;
      };

Definition group Rendering Intent Types
  Defined constants

    RENDERING_INTENT_UNKNOWN |  | The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
    RENDERING_INTENT_AUTO |  | Corresponds to a value of auto.
    RENDERING_INTENT_PERCEPTUAL |  | Corresponds to a value of perceptual.
    RENDERING_INTENT_RELATIVE_COLORIMETRIC |  | Corresponds to a value of relative-colorimetric.
    RENDERING_INTENT_SATURATION |  | Corresponds to a value of saturation.
    RENDERING_INTENT_ABSOLUTE_COLORIMETRIC |  | Corresponds to a value of absolute-colorimetric.

Attributes
  DOMString src
    Corresponds to property src within an @color-profile rule.
  DOMString name
    Corresponds to property name within an @color-profile rule.
  unsigned short renderingIntent
    The type of rendering intent, identified by one of the constants above.

previous next contents properties index