As much as possible, SVG conforms to and leverages the "Cascading Style Sheets (CSS) level 2" Recommendation [CSS2].
SVG uses CSS properties to describe many of its document parameters. In particular, SVG uses CSS 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.)
External style sheets are referenced using the mechanism documented
in "Associating Style Sheets with XML documents Version 1.0"
[ESS].
<!ELEMENT style (#PCDATA)* > <!ATTLIST style type CDATA #FIXED "text/css"> |
Attribute definitions:
The <style> element allows authors to put style sheet rules embedded within an SVG document. <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 may 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 may 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:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.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>
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.
(??? Add discusion of properties that don't inherit syntactically but by
usage, such as opacity, filters and clip-path.)
The following define the scope/range of CSS styles:
To support SVG, the CSS2 [CSS2] 'display' property is enhanced to include an svg value as follows:
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 | svg | inherit |
Initial: | inline |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
A value of display: svg indicates that the given element
should be rendered by the SVG user agent into the viewport defined by
the CSS box supplied as the principal container
element for the SVG document.
When an <svg> element is encountered by a CSS user agent, the CSS user agent needs to establish an initial clipping path for the SVG document. Two properties from CSS2 determine the initial clipping path which the CSS user agent establishes for the SVG document:
Value: | visible | hidden | scroll | auto | inherit |
Initial: | visible |
Applies to: | block-level and replaced elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Value: | <shape> | auto | inherit |
Initial: | auto |
Applies to: | block-level and replaced elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
For descriptions of these properties, consult
the "Cascading Style Sheets (CSS) level 2" specification
[CSS2].
The user agent's default style sheet for SVG should include the following entries:
svg { display: block; overflow: hidden } svg * { display: svg }
Refer to the "Cascading Style Sheets (CSS) level 2" specification [CSS2] for more information.