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 July 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990730.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 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 | svg-g | svg-path | svg-rect | svg-circle | svg-ellipse | svg-line | svg-polyline | svg-polygon | svg-text | svg-tspan | svg-textpath | svg-use | svg-image | svg-switch | svg-foreignObject | svg-a | inherit |
| Initial: | inline |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | all |
The additional value types for the 'display' property are: svg, svg-g, svg-path, svg-rect, svg-circle, svg-ellipse, svg-line, svg-polyline, svg-polygon, svg-text, svg-tspan, svg-textpath, svg-use, svg-image, svg-switch, svg-foreignObject, svg-a.
A value of display: svg indicates that a principal container element should be created into which the SVG user agent will format and draw the given SVG document.
The remaining additional value types (e.g., display: svg-rect) indicate that the given element should be formatted and drawn by the SVG user agent according to the processing rules for the corresponding SVG element type (e.g., a <rect>).
The additional value types such as display: svg-rect are not allowed outside of a properly constructed SVG document. Thus, the following is an error because the element with display:svg-rect directly descends from an element with display:block, which does not correspond to a properly structured SVG document:
<abc width="10px" height="10px" style='display:block'> <xyz style='display:svg-rect' x="10" y="10" width="20" height="20" /> </abc>On the other hand, the following is usage is correct because the element with display:svg-rect directly descends from an element with display:svg, which corresponds (i.e., one-for-one mapping) to a correctly structured SVG document as defined by the SVG DTD:
<abc width="10px" height="10px" style='display:svg'> <xyz style='display:svg-rect' x="10" y="10" width="20" height="20" /> </abc>since the above SVG code fragment is equivalent to the following:
<?xml version="1.0" standalone="yes"?>
<svg width="10px" height="10px"
xmlns="http://www.w3.org/Graphics/SVG/svg-19990730.dtd">
<rect x="10" y="10" width="20" height="20" />
</svg>
The user agent's default style sheet should include the following entries:
svg { display: svg }
g { display: svg-g }
path { display: svg-path }
rect { display: svg-rect }
circle { display: svg-circle }
ellipse { display: svg-ellipse }
line { display: svg-line }
polyline { display: svg-polyline }
polygon { display: svg-polygon }
text { display: svg-text }
tspan { display: svg-tspan }
textpath { display: svg-textpath }
use { display: svg-use }
image { display: svg-image }
switch { display: svg-switch }
foreignObject { display: svg-foreignObject }
a { display: svg-a }
Refer to the "Cascading Style Sheets (CSS) level 2" specification [CSS2] for more information.