SVG Tiny 1.2 – 20081222

6 Styling

Contents

6.1 SVG's styling properties

SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered. SVG uses styling properties for the following:

SVG shares many of its styling properties with CSS [CSS2] and XSL [XSL]. Except for any additional SVG-specific rules explicitly mentioned in this specification, the normative definition of properties that are shared with CSS and XSL is the definition of the property from the CSS 2 specification [CSS2]. Note: The CSS 2 specification is no longer maintained, and implementors may wish to refer instead to its future replacement, CSS 2.1 [CSS21], for more precise details. SVG 1.2 Tiny refers to CSS 2 due to the maturity of that specification on the W3C Recommendation track.

The following properties are shared between CSS 2 and SVG. Apart from 'display', these properties are also defined in XSL:

The following SVG properties are not defined in CSS 2. The complete normative definitions for these properties are found in this specification:

A table that lists and summarizes the styling properties can be found in the Property Index.

6.2 Usage scenarios for styling

SVG has many usage scenarios, each with different needs. Here are three common usage scenarios:

  1. SVG content used as an exchange format (style sheet language-independent):

    In some usage scenarios, reliable interoperability of SVG content across software tools is the main goal. Since support for a particular style sheet language is not guaranteed across all implementations, it is a requirement that SVG content can be fully specified without the use of a style sheet language.

  2. SVG content generated as the output from XSLT [XSLT]:

    XSLT offers the ability to take a stream of arbitrary XML content as input, apply potentially complex transformations, and then generate SVG content as output. XSLT can be used to transform XML data extracted for instance from databases into an SVG graphical representation of that data. It is a requirement that fully specified SVG content can be generated from XSLT.

  3. SVG content styled with CSS [CSS2]:

    CSS is a widely implemented declarative language for assigning styling properties to XML content, including SVG. It represents a combination of features, simplicity and compactness that makes it very suitable for many applications of SVG. SVG Tiny 1.2 does not require support for CSS selectors applied to SVG content. Authors must not rely on external, author stylesheets to style documents that are intended to be used with SVG Tiny 1.2 user agents.

6.3 Specifying properties using the presentation attributes

For each styling property defined in this specification (see Property Index), there is a corresponding XML attribute (the presentation attribute) with the same name that is available on all relevant SVG elements. For example, SVG has a 'fill' property that defines how to paint the interior of a shape. There is a corresponding presentation attribute with the same name (i.e., 'fill') that can be used to specify a value for the 'fill' property on a given element.

The following example shows how the 'fill' and 'stroke' properties can be assigned to a rectangle using the 'fill' and 'stroke' presentation attributes. The rectangle will be filled with red and outlined with blue:

Example: 06_01.svg
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300" 
        fill="red" stroke="blue" stroke-width="3"/>
</svg>

The presentation attributes offer the following advantages:

In some situations, SVG content that uses the presentation attributes has potential limitations versus SVG content that is styled with a style sheet language such as CSS. In other situations, such as when an XSLT style sheet generates SVG content from semantically rich XML source files, the limitations below may not apply.

Note: An !important declaration ([CSS2], section 6.4.2) within a presentation attribute definition is unsupported and causes that attribute to have an unsupported value.

Note: there are no presentation attributes for shorthand properties ([CSS2], section 1.3.3), only for the individual properties that make up the shorthand. (In XML, attribute order is not significant.)

Note: Animation of presentation attributes and animation of properties are related, see the 'attributeType' attribute definition for more information.

6.4 Styling with XSL

XSL style sheets [XSLT] define how to transform XML content into something else, usually other XML. When XSLT is used in conjunction with SVG, sometimes SVG content will serve as both input and output for XSL style sheets. Other times, XSL style sheets will take non-SVG content as input and generate SVG content as output.

The following example uses an external XSL style sheet to transform SVG content into modified SVG content. The style sheet sets the 'fill' and 'stroke' properties on all rectangles to red and blue, respectively:

mystyle.xsl

Example: 06_02.xsl
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:svg="http://www.w3.org/2000/svg">
  <xsl:output
    method="xml"
    encoding="utf-8"/>
  <!-- Add version to topmost 'svg' element -->
  <xsl:template match="/svg:svg">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="version">1.2</xsl:attribute>
      <xsl:apply-templates/>
    </xsl:copy>
  </xsl:template>
  <!-- Add styling to all 'rect' elements -->
  <xsl:template match="svg:rect">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">red</xsl:attribute>
      <xsl:attribute name="stroke">blue</xsl:attribute>
      <xsl:attribute name="stroke-width">3</xsl:attribute>
    </xsl:copy>
  </xsl:template>
</xsl:stylesheet>

SVG file to be transformed by mystyle.xsl

Example: 06_03.svg
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="10cm" height="5cm" viewBox="0 0 100 50">
  <rect x="20" y="10" width="60" height="30"/>
</svg>

SVG content after applying mystyle.xsl

Example: 06_04.svg
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="10cm" height="5cm" viewBox="0 0 100 50">
  <rect x="20" y="10" width="60" height="30" fill="red" stroke="blue" stroke-width="3"/>
</svg>

6.5 Case sensitivity of property names and values

Property declarations via presentation attributes are expressed in XML, which is case-sensitive and must match the exact property name. When using a presentation attribute to specify a value for the 'fill' property, the presentation attribute must be specified as 'fill' and not 'FILL' or 'Fill'. Keyword values, such as "italic" in font-style="italic", are also case-sensitive and must be specified using the exact case used in the specification which defines the given keyword. For example, the keyword "sRGB" must have lowercase "s" and uppercase "RGB".

6.6 Facilities from CSS and XSL used by SVG

SVG shares various relevant properties and approaches common to CSS and XSL, plus the semantics of many of the processing rules. Many of SVG's properties are shared between CSS 2, XSL and SVG. (See list of shared properties).

6.7 Property inheritance and computation

SVG supports property inheritance to child elements. In the definition of each property it is stated whether it is inherited or not. Inherited properties inherit the computed value, and not the specified value. For the calculation of computed values, see the definition of each property. Note that the keyword inherit may be used to force the property value of the parent to be used, even for non-inherited properties.