Styling — SVG 2 (original) (raw)

Chapter 6: Styling

Contents

    1. 6.1. Styling SVG content using CSS
    2. 6.2. Inline style sheets: the ‘style’ element
    3. 6.3. External style sheets: the effect of the HTML ‘link’ element
    4. 6.4. Style sheets in HTML documents
    5. 6.5. Element-specific styling: the ‘class’ and ‘style’ attributes
    6. 6.6. Presentation attributes
    7. 6.7. Required properties
    8. 6.8. User agent style sheet
    9. 6.9. Required CSS features
    10. 6.10. DOM interfaces
      1. 6.10.1. Interface SVGStyleElement

6.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 andheight 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.

6.2. Inline style sheets: the ‘style’ element

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

‘style’

Categories:

Never-rendered element

Content model:

Character data.

Attributes:

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 theHTML‘style’ element.

The style sheet's text content is never directly rendered; the display value for the ‘style’ element must always be set to noneby the user agent style sheet, and this declaration must have importance over any other CSS rule or presentation attribute.

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:

would behave similarly to:

Or, in XML documents, external CSS style sheets may be included using the processing instruction [xml-stylesheet].

6.4. 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.

6.5. 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 isparsed as a declaration-list.

Aside from the way that the ‘class’ attribute is reflected in the SVG DOM (in the classNameIDL 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.

Variable declared twice Undeclared variable Bad syntax for variable name

Variable déclarée deux fois Variable indéfinie Erreur de syntaxe pour variable

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 { 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:

Variable declared twice Undeclared variable Bad syntax for variable name

6.6. Presentation attributes

Some styling properties can be specified not only in style sheets and ‘style’ attributes, but also inpresentation 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 theauthor levelof the cascade, following all other author-level style sheets, and have specificity 0.

Since presentation attributes are parsed as CSS values, not declarations, an!important declarationwithin a presentation attribute will cause it to have an invalid value. See Attribute syntaxfor details on how presentation attributes are parsed.

Not all style properties that can affect SVG rendering have a corresponding presentation attribute. Other attributes (which happen to share the name of a style property) must not be parsed as a presentation attribute and must not affect CSS cascading and inheritance. Also, only elements in the SVG namespace support presentation attributes. Most SVG presentation attributes may be specified on any element in the SVG namespace where there is not a name clash with an existing attribute. However, the geometry properties only have equivalent presentation attributes on designated elements. Attributes of the same name on other elements must not affect CSS cascading and inheritance.

Except as noted in the table for the transform presentation attributes, the presentation attribute name is the same as the property name, in lower-case letters.

Properties with a presentation attribute Elements that support the presentation attribute
cx,cy ‘circle’ and ‘ellipse’
height, width, x, y ‘foreignObject’,‘image’,‘rect’,‘svg’,‘symbol’, and‘use’
r ‘circle’
rx, ry ‘ellipse’ and ‘rect’
d ‘path’
fill Any element in the SVG namespace except for animation elements, which have a different ‘fill’ attribute.
transform For historical reasons, the transform property gets represented by different presentation attributes depending on the SVG element it applies to: transform Any element in the SVG namespace with the exception of the ‘pattern’,‘linearGradient’ and ‘radialGradient’ elements. ‘patternTransform’ ‘pattern’. ‘patternTransform’ gets mapped to thetransform CSS property [css-transforms-1]. ‘gradientTransform’ ‘linearGradient’ and ‘radialGradient’ elements.‘gradientTransform’ gets mapped to the transform CSS property [css-transforms-1].
alignment-baseline,baseline-shift,clip-path,clip-rule,color,color-interpolation,color-interpolation-filters,color-rendering,cursor,direction,display,dominant-baseline,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,letter-spacing,lighting-color,marker-end,marker-mid,marker-start,mask,opacity,overflow,paint-order,pointer-events,shape-rendering,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,unicode-bidi,vector-effect,visibility,white-space,word-spacing,writing-mode Any element in the SVG namespace.

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‘cx’,‘cy’,‘r’,‘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, and the ‘r’ attribute on a ‘radialGradient’is not a presentation attribute for the r property.

In the future, any new properties that apply to SVG content will not gain presentation attributes. Therefore, authors are suggested to use styling properties, either through inline ‘style’ properties or style sheets, rather than presentation attributes, for styling SVG content.

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

6.7. Required properties

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

6.8. User agent style sheet

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

@namespace url(http://www.w3.org/2000/svg); @namespace xml url(http://www.w3.org/XML/1998/namespace);

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

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

*[xml|space=preserve] { text-space-collapse: preserve-spaces; }

defs, clipPath, mask, marker, desc, title, metadata, pattern, linearGradient, radialGradient, script, style, symbol { display: none !important; } :host(use) > symbol { display: inline !important; } :link, :visited { cursor: pointer; }

In addition, all interactive user agents are required to apply distinctive styles to the :focus pseudo-class (normally using the outline property) and the ::selection pseudo-element (using an appropriate highlighting technique, such as redrawing the selected glyphs with inverse colors).

An !important rule in a user agent stylesheetover-rides all user and author styles[css-cascade-4]. The display value for never-rendered elementsand for ‘symbol’ elements can therefore not be changed. A symbol must only be rendered if it is the direct child of a shadow root whose host is a ‘use’ element (and must always be rendered if the host ‘use’ element is rendered). The other elements, and their child content, are never rendered directly.

CSS Transforms defines that the initial value fortransform-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 of0 0 for all SVG elements (except for root ‘svg’ elements and ‘svg’ elements that are the child of a‘foreignObject’ element or an element in a non-SVG namespace; these elements must transform around their center). [css-transforms-1]

The OpenType specificationrequires an additional user agent style sheet to be applied when processing [OPENTYPE]. It is as follows:

@namespace svg url(http://www.w3.org/2000/svg);

svg|text, svg|foreignObject { display: none !important; }

:root { fill: context-fill; fill-opacity: context-fill-opacity; stroke: context-stroke; stroke-opacity: context-stroke-opacity; stroke-width: context-value; stroke-dasharray: context-value; stroke-dashoffset: context-value; }

The context-fill and context-stroke keywords are as defined in this specification, where the context element for a font glyph is the corresponding text content element. The other keywords are as defined in the OpenType specification, and ensure that the style values from the text content element are propagated to the font glyphs, with appropriate adjustments for the change in the coordinate system [OPENTYPE].

6.9. Required CSS features

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

6.10. DOM interfaces

6.10.1. Interface SVGStyleElement

An SVGStyleElement object represents a ‘style’ element in the DOM.

[Exposed=Window] interface SVGStyleElement : SVGElement { attribute DOMString type; attribute DOMString media; attribute DOMString title; };

SVGStyleElement includes LinkStyle;

The type,media andtitle IDL attributesreflect the ‘type’, ‘media’ and ‘title’content attributes, respectively.