6 Styling

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:

• 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, line widths and dash styles.
• Parameters having to do with text styling such as 'font-family' and 'font-size'.
• Parameters for interactivity and multimedia, such as 'pointer-events' and 'audio-level'.

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 CSS2 specification [CSS2].

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

• Font properties:
  • 'font-family'
  • 'font-size'
  • 'font-style'
  • 'font-weight'
• Other properties for visual media:
  • 'color' is used to provide a potential indirect value (currentColor) for the 'fill', 'stroke', 'stop-color' properties.
  • 'display'
  • 'visibility'

The following SVG properties are not defined in [CSS2]. The complete normative definitions for these properties are found in this specification:

• Gradient properties:
  • 'stop-color'
  • 'stop-opacity'
• Interactivity properties:
  • 'pointer-events'
• Multimedia properties:
  • 'audio-level'
• Color and Painting properties:
  • 'color-rendering'
  • 'fill'
  • 'fill-opacity'
  • 'fill-rule'
  • 'image-rendering'
  • 'shape-rendering'
  • 'solid-color'
  • 'solid-opacity'
  • 'stroke'
  • 'stroke-dasharray'
  • 'stroke-dashoffset'
  • 'stroke-linecap'
  • 'stroke-linejoin'
  • 'stroke-miterlimit'
  • 'stroke-opacity'
  • 'stroke-width'
  • 'text-rendering'
  • 'vector-effect'
  • 'viewport-fill'
  • 'viewport-fill-opacity'
• Text properties:
  • 'display-align'
  • 'line-increment'
  • 'text-anchor'

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:

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

The presentation attributes offer the following advantages:

• Broad support. All versions of Conforming SVG Interpreters and Conforming SVG Viewers are required to support the presentation attributes.
• Simplicity. Styling properties can be attached to elements by simply providing a value for the presentation attribute on the proper elements.
• Restyling. SVG content that uses the presentation attributes is highly compatible with downstream processing using XSLT [XSLT] or supplemental styling by adding CSS style rules to override some of the presentation attributes.
• Convenient generation using XSLT [XSLT]. In some cases, XSLT can be used to generate fully styled SVG content. The presentation attributes are compatible with convenient generation of SVG from XSLT.

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.

• Styling attached to content. The presentation attributes are attached directly to particular elements, thereby diminishing potential advantages that comes from abstracting styling from content, such as the ability to restyle documents for different uses and environments.
• Flattened data model. In and of themselves, the presentation attributes do not offer the higher level abstractions that you get with a styling system, such as the ability to define named collections of properties which are applied to particular categories of elements. The result is that, in many cases, important higher level semantic information can be lost, potentially making document reuse and restyling more difficult.
• Potential increase in file size. Many types of graphics use similar styling properties across multiple elements. For example, a company organization chart might assign one collection of styling properties to the boxes around temporary workers (e.g., dashed outlines, red fill), and a different collection of styling properties to permanent workers (e.g., solid outlines, blue fill). Styling systems such as CSS allow collections of properties to be defined once in a file. With the styling attributes, it might be necessary to specify presentation attributes on each different element.

Note: An !important declaration 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, 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 (see [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

<?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

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

SVG content after applying mystyle.xsl

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="10cm" height="5cm" 
     viewBox="0 0 100 50" version="1.2" baseProfile="tiny">
  <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 [XML11], 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 CSS2, XSL and SVG. (See list of shared properties).

6.7 Property inheritance and computation

SVG supports property inheritance to child elements. Each property states whether it is inherited or not. Inheritable 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.