Elements in an SVG document can be styled using CSS.Most visual characteristics and some aspects of elementgeometry are controlled using CSSproperties.For example, thefill property controls the paint used tofill the inside of a shape, and thewidth andheight properties are used to control the sizeof a‘rect’ element.
SVG user agents must support all of the CSS stylingmechanisms described in this chapter.
In SVG 1.1, support for inline style sheetsusing the‘style’ element and‘style’ was not required. In SVG 2,these are required.
| 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 allowsstyle sheets to be embedded directly within SVG content.SVG's‘style’ element has the sameattributes as thecorrespondingelement in HTML.
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 amedia 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 amedia_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 itsattributes must be the same as is defined for theHTML‘style’ element.
The style sheet's text content is never directly rendered;thedisplay value for the‘style’ elementmust always be set tononeby theuser agent style sheet,and this declaration must have importance over any other CSS rule or presentation attribute.
AnHTML‘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 processedas defined in the HTML specification and cause external style sheets to beloaded and applied to the document. Such elements in HTML documents outsideof an inline SVG fragment must also apply to the SVG content.
Because the element is required to be in the HTML namespace, itis not possible for anHTML‘link’ element to be parsed aspart of an inline SVG fragment in a text/html document. However, whenparsing an SVG document using XML syntax, XML namespace declarationscan be used to place the element in the HTML namespace.
Note that an alternative way to reference external style sheets without using theHTML‘link’ element is to use an @import rule in an inline style sheet. For example:
<svg xmlns="http://www.w3.org/2000/svg"> <style> @import url(mystyles.css); </style> <rect .../></svg>
would behave similarly to:
<svg xmlns="http://www.w3.org/2000/svg"> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/> <rect .../></svg>
Or, in XML documents, external CSS style sheets may be included using the<?xml-stylesheet?> processing instruction [xml-stylesheet].
When an SVG‘style’ or an HTML‘style’ element is used in an HTMLdocument, those style sheets must apply to all HTML andinline SVG content in the document. Similarly, any HTML‘style’ element used in an SVGdocument must also apply its style sheet to the document.
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 theSVG DOM (in theclassNameIDL attribute onSVGElement), the semantics and behavior of the‘class’ and‘style’ attributes must be the sameas that forthe correspondingattributes 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 lang="en">Variable declared twice</text><text lang="en">Undeclared variable</text><text lang="en">Bad syntax for variable name</text><!-- French messages --><text lang="fr">Variable déclarée deux fois</text><text lang="fr">Variable indéfinie</text><text 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:
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:
<text lang="en">Variable declared twice</text><text lang="en">Undeclared variable</text><text lang="en">Bad syntax for variable name</text>
Some styling properties can be specified not only in style sheetsand‘style’ attributes, but also inpresentation attributes.These are attributes whose name matches (or is similar to) a given CSS propertyand whose value is parsed as a value of that property. Presentationattributes 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 aninvalid value.SeeAttribute syntaxfor details on how presentation attributes are parsed.
Not all style properties that can affect SVG rendering have a correspondingpresentation attribute.Other attributes (which happen to share the name of a style property) must not be parsed as apresentation 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 namespacewhere there is not a name clash with an existing attribute.However, thegeometry properties only have equivalent presentation attributeson designated elements.Attributes of the same name on other elements must not affect CSS cascading and inheritance.
Except as noted in the table for thetransform presentation attributes,the presentation attribute name is the same as the property name, in lower-case letters.
Since presentation attributes are only availableon elements in the SVG namespace, an HTMLvideo element isclassified as agraphics element, for example, but does not supportany presentation attributes.
Note that‘cx’,‘cy’,‘r’,‘x’,‘y’,‘width’ and‘height’ attributes are notalways presentation attributes.For example, the‘x’ attribute on‘text’ and‘tspan’is not a presentation attribute for thex property,and the‘r’ attribute on a‘radialGradient’is not a presentation attribute for ther property.
In the future, any new properties that applyto SVG content will not gain presentation attributes. Therefore,authors are suggested to use styling properties, either throughinline‘style’ properties or style sheets,rather than presentation attributes, for styling SVG content.
Animation of presentation attributes is equivalent toanimating the corresponding property.
The following properties must be supported by all SVG user agents:
The followinguseragent 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 theoutline 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 fornever-rendered elementsand for‘symbol’ elementscan therefore not be changed.A symbol must only be rendered if it is the direct childof 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 is50% 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 elementsmust 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;}Thecontext-fill andcontext-stroke keywords are as defined in this specification, where thecontext element for a font glyph is the correspondingtext content element. The other keywords are as defined in the OpenType specification, and ensure that the style values from thetext content element are propagated to the font glyphs, with appropriate adjustments for the change in the coordinate system [OPENTYPE].
Besides the features described above, the following CSS features must bealso supported in SVG user agents:
AnSVGStyleElement object represents a‘style’ elementin the DOM.
[Exposed=Window]interfaceSVGStyleElement :SVGElement { attribute DOMStringtype; attribute DOMStringmedia; attribute DOMStringtitle;};SVGStyleElement includesLinkStyle;Thetype,media andtitle IDL attributesreflect the‘type’,‘media’ and‘title’content attributes, respectively.