SVG content can be styled by either CSS (see "Cascading Style Sheets (CSS) level 2" specification [CSS2]) or XSL (see "XSL Transformations (XSLT) Version 1.0" [XSLT1]).
SVG content using CSS or XSL for styling can reference external style sheets (see Referencing external style sheets) or embed style sheets within an SVG 'style' element or both.
CSS style declarations can also be specified within style attributes on particular elements. For many applications, element-specific styling is convenient and advantageous, but in situations where multiple elements have common styling, it is usually better to express styling through through the 'style' element or, even better, through external style sheets which may be shared by several related SVG graphics.
Styling the same document using both CSS and XSL style sheets is not
recommended at this time as the processing model for this is not well-defined.
External style sheets are referenced using the mechanism documented
in "Associating Style Sheets with XML documents Version 1.0"
[ESS].
SVG supports various relevant properties and approaches common to CSS and XSL, plus selected semantics and features of CSS (see the "Cascading Style Sheets (CSS) level 2" Recommendation [CSS2].
SVG uses styling properties to describe many of its document parameters. In particular, SVG uses styling properties for the following:
The following properties from CSS2 [CSS2] are used by SVG:
The following facilities from CSS2 are supported in SVG:
One variation SVG offers to CSS is that unit-less lengths and sizes are allowed in SVG properties. (Refer to the discussion of Units.)
Additionally, SVG defines a new
@color-profile
at-rule [CSS2-ATRULES]
for defining color profiles to use within SVG content.
<!ELEMENT style (#PCDATA)* > <!ATTLIST style type CDATA "text/css" > |
Attribute definitions:
The 'style' element allows authors to put style sheet rules embedded within SVG content. 'style' elements are only allowed as children of 'defs' elements.
The syntax of style data depends on the style sheet language.
Some style sheet implementations might allow a wider variety of rules in the 'style' element than in the style attribute that is available to container elements and graphics elements. For example, with CSS [CSS2], rules can be declared within a 'style' element that cannot be declared within a style attribute.
The following is an example of defining and using a text style using a CSS internal style sheet:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
<defs>
<style><![CDATA[
.TitleText { font-size: 16; font-family: Helvetica } ]]>
</style>
</defs>
<text class="TitleText">Here is my title</text>
</svg>
Note how the CSS style sheet is placed within a CDATA construct
(i.e., <![CDATA[ ... ]]>), which is necessary since
CSS style sheets are not expressed in XML.
An XSL style sheet ([XSLT1]) can also
be embedded within a 'style' element,
in which case it is not necessary to enclose the style sheet within
a CDATA construct, since XSL style sheets are expressed in XML.
Attribute definitions:
The class attribute assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles:
In the following example, the 'text' element is used in conjunction with the class attributes 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:
text.info { color: green }
text.warning { color: yellow }
text.error { color: red }
Attribute definitions:
The default style sheet language for the style attribute is "text/css" unless any HTTP headers specify the "Content-Style-Type", in which case the last one in the character stream determines the default style sheet language.
This example sets fill and font size information for the text in a specific 'text' element:
<text style="font-size: 12pt; fill: fuchsia">Isn't styling wonderful?</text>
In CSS, property declarations have the form "name : value" and are separated by a semi-colon.
The style attribute may be used to apply a particular style to an individual SVG element. If the style will be reused for several elements, authors should use the 'style' element to regroup that information. For optimal flexibility, authors should define styles in external style sheets.
SVG conforms fully to the cascading style rules of CSS (i.e., the rules by which the SVG user agent decides which property setting applies to a given element). See the CSS2 specification for a discussion of these rules.
The definition of each CSS property indicates whether the property can inherit the value of its parent.
The following define the scope/range of style sheets:
| Value: | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
| Initial: | inline |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | all |
| Animatable: | yes |
A value other than display: none indicates that the given element
shall
be rendered by the SVG user agent.
The user agent's default style sheet for elements in the SVG namespace for visual media [CSS2-VISUAL] must include the following entries:
svg, symbol, marker, pattern, view { overflow: hidden }
Refer the description of SVG's use of the 'overflow' property for more information.
Also, refer to the "Cascading Style Sheets (CSS) level 2" specification [CSS2].
The SVGStyleElement interface corresponds to the 'style' element.
interface SVGStyleElement : SVGElement {
attribute DOMString type;
};
|