SVG 2 – 15 September 2015 TopContentsPreviousNextElementsAttributesProperties

Chapter 5: Styling


5.1. Styling SVG content using CSS

Elements in an SVG document can be styled using CSS. Most visual characteristics and some aspects of element geometry are controlled using CSS properties. For example, the ‘fill’ property controls the paint used to fill the inside of a shape, and the ‘width’ and ‘height’ properties are used to control the size of a rect element.

SVG user agents must support all of the CSS styling mechanisms described in this chapter.

In SVG 1.1, support for inline style sheets using the style element and style was not required. In SVG 2, these are required.

5.2. Inline style sheets: the ‘style’ element

SVG 2 Requirement: Add HTML5 ‘style’ element attributes to SVG's style element.
Resolution: SVG 2 ‘style’ element shall be aligned with the HTML5 ‘style’ element.
Purpose: To not surprise authors with different behavior for the ‘style’ element in HTML and SVG content.
Owner: Cameron (ACTION-3277)

The style element allows style sheets to be embedded directly within SVG content. SVG's style element has the same attributes as the corresponding element in HTML.

Content model:
Any elements or character data.
DOM Interfaces:

Attribute definitions:

Name Value Initial value Animatable
type (see below) text/css no

This attribute specifies the style sheet language of the element's contents, as a media type. [RFC2046]. If the attribute is not specified, then the style sheet language is assumed to be CSS.

Name Value Initial value Animatable
media (see below) all no

This attribute specifies a media query that must be matched for the style sheet to apply. Its value is parsed as a media_query_list. If not specified, the style sheet applies unconditionally.

Name Value Initial value Animatable
title (see below) (none) no

This attribute specifies a title for the style sheet, which is used when exposing and selecting between alternate style sheets. The attribute takes any value.

The semantics and processing of a style and its attributes must be the same as is defined for the HTML ‘style’ element.

5.3. External style sheets: the effect of the HTML ‘link’ element

An HTML ‘link’ element in an SVG document (that is, an element in the HTML namespace with local name "link") with its ‘rel’ attribute set to 'stylesheet' must be processed as defined in the HTML specification and cause external style sheets to be loaded and applied to the document. Such elements in HTML documents outside of an inline SVG fragment must also apply to the SVG content.

Because the element is required to be in the HTML namespace, it is not possible for an HTML ‘link’ element to be parsed as part of an inline SVG fragment in a text/html document. However, when parsing an SVG document using XML syntax, XML namespace declarations can be used to place the element in the HTML namespace.

Note that an alternative way to reference external style sheets without using the HTML ‘link’ element is to use an @import rule in an inline style sheet. For example:

<svg xmlns="">
    @import url(mystyles.css);
  <rect .../>

would behave similarly to:

<svg xmlns="">
  <link xmlns="" rel="stylesheet" href="mystyles.css" type="text/css"/>
  <rect .../>

5.4. Element-specific styling: the ‘class’ and ‘style’ attributes

As with HTML, SVG supports the class and style attributes on all elements to support element-specific styling.

Attribute definitions:

Name Value Initial value Animatable
class set of space-separated tokens [HTML] (none) yes

The class attribute assigns one or more class names to an element, which can then be used for addressing by the styling language.

Name Value Initial value Animatable
style (see below) (none) no

The style attribute is used to supply a CSS declaration of an element. The attribute is parsed as a declaration-list.

Aside from the way that the class attribute is reflected in the SVG DOM (in the className IDL attribute on SVGElement), the semantics and behavior of the class and style attributes must be the same as that for the corresponding attributes in HTML.

In the following example, the text element is used in conjunction with the class attribute 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:    { fill: green; }
text.warning { fill: yellow; }
text.error   { fill: red; }

This example shows how the style attribute can be used to style text elements similarly to the previous example:

<text style="fill: green;" lang="en">Variable declared twice</text>
<text style="fill: yellow;" lang="en">Undeclared variable</text>
<text style="fill: red;" lang="en">Bad syntax for variable name</text>

5.5. Presentation attributes

Some styling properties can be specified not only in style sheets and style attributes, but also in presentation attributes. These are attributes whose name matches (or is similar to) a given CSS property and whose value is parsed as a value of that property. Presentation attributes contribute to the author level of the cascade, following all other author-level style sheets, and have specificity 0.

Since presentation attributes are parsed as CSS values, an !important declaration within a presentation attribute will cause it to have an invalid value. See Attribute syntax for details on how presentation attributes are parsed.

Not all properties supported by an implementation have a corresponding presentation attribute, and not all presentation attributes are supported on all SVG elements. Also, only elements in the SVG namespace support presentation attributes. The availability of a presentation attribute for a given property is described in the following table:

Properties with a presentation attribute Elements that support the presentation attribute
alignment-baseline’, ‘baseline-shift’, ‘clip’, ‘clip-path’, ‘clip-rule’, ‘color’, ‘color-interpolation’, ‘color-interpolation-filters’, ‘color-rendering’, ‘cursor’, ‘direction’, ‘display’, ‘dominant-baseline’, ‘fill’, ‘fill-opacity’, ‘fill-rule’, ‘filter’, ‘flood-color’, ‘flood-opacity’, ‘font-family’, ‘font-size’, ‘font-size-adjust’, ‘font-stretch’, ‘font-style’, ‘font-variant’, ‘font-weight’, ‘glyph-orientation-horizontal’, ‘glyph-orientation-vertical’, ‘image-rendering’, ‘inline-size’, ‘letter-spacing’, ‘lighting-color’, ‘marker-end’, ‘marker-mid’, ‘marker-start’, ‘mask’, ‘opacity’, ‘overflow’, ‘paint-order’, ‘pointer-events’, ‘shape-rendering’, ‘solid-color’, ‘solid-opacity’, ‘stop-color’, ‘stop-opacity’, ‘stroke’, ‘stroke-dasharray’, ‘stroke-dashoffset’, ‘stroke-linecap’, ‘stroke-linejoin’, ‘stroke-miterlimit’, ‘stroke-opacity’, ‘stroke-width’, ‘text-anchor’, ‘text-decoration’, ‘text-overflow’, ‘text-rendering’, ‘transform’, ‘unicode-bidi’, ‘vector-effect’, ‘visibility’, ‘white-space’, ‘word-spacing’, ‘writing-mode descriptive elements, graphics elements, text content elements, container elements, paint server elements, clipPath, cursor, feFlood, filter and stop
cx’, ‘cy circle and ellipse
height’, ‘width’, ‘x’, ‘y foreignObject, image, mask, rect and svg
r circle
rx’, ‘ry ellipse and rect

Since presentation attributes are only available on elements in the SVG namespace, an HTML video element is classified as a graphics element, for example, but does not support any presentation attributes.

Note that ‘x’, ‘y’, ‘width’ and ‘height’ attributes are not always presentation attributes. For example, the x attribute on text and tspan is not a presentation attribute for the ‘x’ property.

The following table lists the presentation attributes whose names are different from their corresponding property. All other presentation attributes have names that do match their property.

PropertyElementPresentation attribute name
transformlinearGradient and radialGradient‘gradientTransform’

Animation of presentation attributes is equivalent to animating the corresponding property.

5.6. Required properties

The following properties must be supported by all SVG user agents:

For ‘white-space’ we should point to css-text-4 since that is where the keyword value that allows us to map ‘xml:space’ is in that spec.

5.7. User agent style sheet

The following user agent style sheet must be applied in all SVG user agents.

@namespace url(;
@namespace xml url(;

svg:not(:root), hatch, image, marker, pattern, symbol { overflow: hidden; }

*:not(foreignObject) > svg {
  transform-origin: 0 0;

*[xml|space=preserve] {
  white-space: preserve-spaces;

Need to confirm that preserve-spaces is the final valuee that gets added to the ‘white-space’ shorthand in css-text-4.

CSS Transforms defines that the initial value for ‘transform-origin’ is 50% 50%. Since elements in SVG must, by default, transform around their origin at (0, 0), ‘transform-origin’ is overridden and set to a default value of 0 0 for all SVG elements (except for root svg elements and svg elements that are the child of a foreignObject element, as these elements must transform around their center). [CSS3TRANSFORMS]

5.8. Required CSS features

Besides the features described above, the following CSS features must be also supported in SVG user agents:

5.9. Style sheets in HTML documents

When an SVG style or an HTML ‘style’ element is used in an HTML document, those style sheets must apply to all HTML and inline SVG content in the document. Similarly, any HTML ‘style’ element used in an SVG document must also apply its style sheet to the document.

5.10. DOM interfaces

5.10.1. Interface SVGStyleElement

An SVGStyleElement object represents a style element in the DOM.

interface SVGStyleElement : SVGElement {
  attribute DOMString type;
  attribute DOMString media;
  attribute DOMString title;

SVGStyleElement implements LinkStyle;

The type, media and title IDL attributes reflect the type, media and title content attributes, respectively.

SVG 2 – 15 September 2015 TopContentsPreviousNextElementsAttributesProperties