The SVG language comes in two forms: Stylable SVG and Exchange SVG. Stylable SVG assigns rendering properties through a style sheet language such as CSS or XSL Transformations and provides syntax for embedding style sheets and style declaration blocks within Stylable SVG content. Exchange SVG assigns rendering properties via XML attributes on graphics elements and does not provide syntax for embedding style sheets and style declaration blocks within Exchange SVG content. Since this chapter describes how styling relates to SVG, the language constructs described in this chapter applie only to Stylable SVG. However, since Stylable SVG and Exchange SVG share the same semantics and inheritance models, the semantic model for applying rendering properties as described in this chapter apply to both Stylable SVG and Exchange SVG.
This chapter describes the rules for referencing and embedding style sheets for use with Stylable SVG. It provides a list of the styling properties and details the various cascading and inheritance rules. It also details the features that are specific to Stylable SVG, such as the 'style' element and the 'style' attribute.
Stylable 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" [XSLT]).
SVG content 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" [XML-SS].
SVG supports various relevant properties and approaches common to CSS and XSL, plus selected semantics and features defined in CSS2 (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:
SVG uses much of the syntax and semantics of CSS in the definition of its properties. Specifically, SVG uses the following facilities from CSS:
In an SVG user agent that supports CSS style sheets, the following facilities from [CSS2] must be supported:
An SVG user agent is required to support the syntax and semantics of the following properties from [CSS2]:
Additionally, SVG defines an @color-profile
at-rule [CSS2-ATRULES]
for defining color profiles so that ICC color profiles can be applied to SVG content.
The 'style' element is only present in Stylable SVG. It is not included in the definition of Exchange SVG.
<!ELEMENT style (#PCDATA) > <!ATTLIST style %stdAttrs; type %ContentType; #REQUIRED > |
Attribute definitions:
The 'style' element allows authors to embed style sheets within SVG content.
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 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="4in" height="3in">
<defs>
<style type="text/css"><![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.
The style attribute is only present in Stylable SVG. It is not included in the definition of Exchange SVG.
Attribute definitions:
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.
The contentStyleType attribute on the 'svg' element specifies the default style sheet language for the given document fragment.
When styled with CSS, SVG conforms fully to the cascading rules defined in the CSS2 specification [CSS2-CASCADE]. Property inheritance in SVG follows the inheritance rules for properties defined in the CSS2 specification [CSS2-INHERIT].
The definition of each property indicates whether the property can inherit the value of its parent.
In SVG, as in CSS2, most elements inherit computed values [CSS2-COMPUTED]. For cases where something other than computed values are inherited, the property definition will describe the inheritance rules. For specified values [CSS2-SPECIFIED] which are expressed in user units, in pixels (e.g., "20px") or in absolute values [CSS2-COMPUTED], the computed value equals the specified value. For specified values which use certain relative units (i.e., em, ex and percentages), the computed value will have the same units as the value to which it is relative. Thus, if the parent element has a 'font-size' of "10pt" and the current element has a 'font-size' of "120%", then the computed value for 'font-size' on the current element will be "12pt". In cases where the referenced value for relative units is not expressed in any of the standard SVG units (i.e., CSS units or user units), such as when a percentage is used relative to the current viewport or an object bounding box, then the computed value will be in user units.
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 shall maintain a default style sheet [CSS2-CASCADE-RULES] for elements in the SVG namespace for visual media [CSS2-VISUAL]. The default style sheet below is expressed using CSS syntax; however, user agents are required to support the behavior that corresponds to this default style sheet even if CSS style sheets are not supported in the user agent:
svg, symbol, marker, pattern, view, use, image, mask { overflow: hidden }
svg { width:attr(width); height:attr(height) }
The first line of the above default style sheet will cause the initial clipping path to be established at the bounds of the initial viewport. Furthermose, it will cause new clipping paths to be established at the bounds of the elements listed below, all of which areb elements that establish a new viewport. (Refer the description of SVG's use of the 'overflow' property for more information.)
The second line of the above default style sheet will cause the width and height attributes on the 'svg' element to be used as the default values for the 'width' and 'height' properties during [CSS2-LAYOUT].
For the purposes of aural media, SVG represents a stylable XML grammar. In user agents that support aural style sheets, aural style properties [CSS2-AURAL] can be applied as defined in [CSS2].
Aural style properties can be applied to any SVG element that can contain character data content, including 'desc', 'title, 'tspan'. 'tref' and 'textPath'. On user agents that support aural style sheets, the following [CSS2] properties can be applied:
For user agents that support aural style sheets and also support
[DOM2], the user agent is required
to support the DOM interfaces defined in [DOM2-CSS]
that correspond to aural properties [CSS2-AURAL].
(See Relationship with DOM2 CSS object model.)
The following IDL definitions are defined for the various Stylable SVG-specific attribute definitions in the SVG DOM.
// For access to CSSStyleDeclaration type. #ifdef STYLABLESVG #include "css.idl" #endif STYLABLESVG #ifdef STYLABLESVG // The definitions only apply to // the DOM for Stylable SVG. typedef css::dom::CSSStyleDeclaration CSSStyleDeclaration; #define STYLABLESVGStyleAttribute \ readonly attribute CSSStyleDeclaration style #endif STYLABLESVG
The following interfaces are defined below: SVGStyleElement, SVGCSSRule, CSSColorProfileRule.
The SVGStyleElement interface corresponds to the 'style' element.
interface SVGStyleElement : SVGElement, SVGLangSpace, SVGTests {
attribute DOMString type;
};
SVG extends interface CSSRule with interface SVGCSSRule by adding an CSSColorProfileRule rule to allow for specification of ICC-based color.
It is likely that this extension will become part of a future version of CSS and DOM.
interface SVGCSSRule : CSSRule {
// Additional CSS RuleType to support ICC color specifications
constant unsigned short COLOR_PROFILE_RULE = 7;
};
| COLOR_PROFILE_RULE | The rule is an @color-profile. |
The CSSColorProfileRule interface represents an @color-profile rule in a CSS style sheet. An @color-profile rule identifies a ICC profile which can be referenced within a given document.
interface CSSColorProfileRule : SVGCSSRule {
// Rendering Intent Types
constant unsigned short RENDERING_INTENT_UNKNOWN = 0;
constant unsigned short RENDERING_INTENT_AUTO = 1;
constant unsigned short RENDERING_INTENT_PERCEPTUAL = 2;
constant unsigned short RENDERING_INTENT_RELATIVE_COLORIMETRIC = 3;
constant unsigned short RENDERING_INTENT_SATURATION = 4;
constant unsigned short RENDERING_INTENT_ABSOLUTE_COLORIMETRIC = 5;
attribute DOMString src;
attribute DOMString name;
attribute unsigned short renderingIntent;
};
| RENDERING_INTENT_UNKNOWN | The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. | |
| RENDERING_INTENT_AUTO | Corresponds to a value of auto. | |
| RENDERING_INTENT_PERCEPTUAL | Corresponds to a value of perceptual. | |
| RENDERING_INTENT_RELATIVE_COLORIMETRIC | Corresponds to a value of relative-colorimetric. | |
| RENDERING_INTENT_SATURATION | Corresponds to a value of saturation. | |
| RENDERING_INTENT_ABSOLUTE_COLORIMETRIC | Corresponds to a value of absolute-colorimetric. |