--- a/master/styling.html Thu May 10 12:20:48 2012 +0200
+++ b/master/styling.html Thu May 10 12:30:22 2012 +0200
@@ -14,378 +14,416 @@
<h1>Styling</h1>
- <h2 id='SVGStylingProperties'>SVG's styling properties</h2>
- <p>SVG uses <dfn id='styling-properties'>styling properties</dfn> to
- describe many of its document parameters. Styling properties
- define how the graphics elements in the SVG content are to be
- rendered. SVG uses styling properties for the following:</p>
- <ul>
- <li>Parameters which are clearly visual in nature and thus
- lend themselves to styling. Examples include all attributes
- that define how an object is "painted," such as fill and
- stroke colors, linewidths and dash styles.</li>
- <li>Parameters having to do with text styling such as font
- family and size.</li>
- <li>Parameters which impact the way that graphical elements
- are rendered, such as specifying clipping paths, masks,
- arrowheads, markers and filter effects.</li>
- </ul>
- <p>SVG shares many of its styling properties with CSS
- [<a href="refs.html#ref-CSS2">CSS2</a>] and XSL
- [<a href="refs.html#ref-XSL">XSL</a>]. Except for any
- additional SVG-specific rules explicitly mentioned in this
- specification, the normative definition of properties that are
- shared with CSS and XSL is the definition of the property from
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">the CSS2 specification</a>
- [<a href="refs.html#ref-CSS2">CSS2</a>].</p>
+<h2 id='SVGStylingProperties'>SVG's styling properties</h2>
- <p id='PropertiesFromCSS2'>The following properties are shared between CSS2 and SVG.
- Most of these properties are also defined in XSL:</p>
- <ul>
- <li>
- <a href="text.html#FontPropertiesUsedBySVG">Font
- properties</a>:
- <ul>
- <li><a>'font property'</a></li>
- <li><a>'font-family'</a></li>
- <li><a>'font-size'</a></li>
- <li><a>'font-size-adjust'</a></li>
- <li><a>'font-stretch'</a></li>
- <li><a>'font-style'</a></li>
- <li><a>'font-variant'</a></li>
- <li><a>'font-weight'</a></li>
- </ul>
- </li>
- <li>
- Text properties:
- <ul>
- <li><a>'direction'</a></li>
- <li><a>'letter-spacing'</a></li>
- <li><a>'text-decoration'</a></li>
- <li><a>'unicode-bidi'</a></li>
- <li><a>'word-spacing'</a></li>
- </ul>
- </li>
- <li>
- Other properties for visual media:
- <ul>
- <li><a>'clip'</a>, only applicable to <a>outermost svg element</a>.</li>
- <li><a>'color'</a>, used to provide a potential indirect value
- (<span class="prop-value">currentColor</span>) for the
- <a>'fill'</a>,
- <a>'stroke'</a>,
- <a>'stop-color'</a>,
- <a>'flood-color'</a> and
- <a>'lighting-color'</a>
- properties.
- (The SVG properties which support color allow a color
- specification which is extended from CSS2 to accommodate
- color definitions in arbitrary color spaces. See <a
- href="color.html#ColorProfileDescriptions">Color profile
- descriptions</a>.)</li>
- <li><a>'cursor property'</a></li>
- <li><a>'display'</a></li>
- <li><a>'overflow'</a>, only applicable to
- <a href="coords.html#ElementsThatEstablishViewports">elements which establish a new viewport</a>.</li>
- <li><a>'visibility'</a></li>
- </ul>
- </li>
- </ul>
- <p>The following SVG properties are not defined in CSS2. The
- complete normative definitions for these properties are found in
- this specification:</p>
+<p>SVG uses <dfn id='styling-properties'>styling properties</dfn> to
+describe many of its document parameters. Styling properties
+define how the graphics elements in the SVG content are to be
+rendered. SVG uses styling properties for the following:</p>
+
+<ul>
+ <li>Parameters which are clearly visual in nature and thus
+ lend themselves to styling. Examples include all attributes
+ that define how an object is "painted," such as fill and
+ stroke colors, linewidths and dash styles.</li>
+
+ <li>Parameters having to do with text styling such as font
+ family and size.</li>
+
+ <li>Parameters which impact the way that graphical elements
+ are rendered, such as specifying clipping paths, masks,
+ arrowheads, markers and filter effects.</li>
+</ul>
+
+<p>SVG shares many of its styling properties with CSS
+[<a href="refs.html#ref-CSS2">CSS2</a>] and XSL
+[<a href="refs.html#ref-XSL">XSL</a>]. Except for any
+additional SVG-specific rules explicitly mentioned in this
+specification, the normative definition of properties that are
+shared with CSS and XSL is the definition of the property from
+<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">the CSS2 specification</a>
+[<a href="refs.html#ref-CSS2">CSS2</a>].</p>
+
+<p id='PropertiesFromCSS2'>The following properties are shared between CSS2 and SVG.
+Most of these properties are also defined in XSL:</p>
+
+<ul>
+ <li>
+ <a href="text.html#FontPropertiesUsedBySVG">Font
+ properties</a>:
<ul>
- <li>
- <a href="masking.html">Clipping, Masking and
- Compositing</a> properties:
- <ul>
- <li><a>'clip-path'</a></li>
- <li><a>'clip-rule'</a></li>
- <li><a>'mask property'</a></li>
- <li><a>'opacity'</a></li>
- </ul>
- </li>
- <li>
- <a href="filters.html">Filter Effects</a> properties:
- <ul>
- <li><a>'enable-background'</a></li>
- <li><a>'filter property'</a></li>
- <li><a>'flood-color'</a></li>
- <li><a>'flood-opacity'</a></li>
- <li><a>'lighting-color'</a></li>
- </ul>
- </li>
- <li>
- <a href="pservers.html#Gradients">Gradient</a> properties:
- <ul>
- <li><a>'stop-color'</a></li>
- <li><a>'stop-opacity'</a></li>
- </ul>
- </li>
- <li>
- <a href="interact.html">Interactivity</a> properties:
- <ul>
- <li><a>'pointer-events'</a></li>
- </ul>
- </li>
- <li>
- <a href="color.html">Color</a> and <a
- href="painting.html">Painting</a> properties:
- <ul>
- <li><a>'color-interpolation'</a></li>
- <li><a>'color-interpolation-filters'</a></li>
- <li><a>'color-profile property'</a></li>
- <li><a>'color-rendering'</a></li>
- <li><a>'fill'</a></li>
- <li><a>'fill-opacity'</a></li>
- <li><a>'fill-rule'</a></li>
- <li><a>'image-rendering'</a></li>
- <li><a>'marker property'</a></li>
- <li><a>'marker-end'</a></li>
- <li><a>'marker-mid'</a></li>
- <li><a>'marker-start'</a></li>
- <li><a>'shape-rendering'</a></li>
- <li><a>'stroke'</a></li>
- <li><a>'stroke-dasharray'</a></li>
- <li><a>'stroke-dashoffset'</a></li>
- <li><a>'stroke-linecap'</a></li>
- <li><a>'stroke-linejoin'</a></li>
- <li><a>'stroke-miterlimit'</a></li>
- <li><a>'stroke-opacity'</a></li>
- <li><a>'stroke-width'</a></li>
- <li><a>'text-rendering'</a></li>
- </ul>
- </li>
- <li>
- <a href="text.html">Text</a> properties:
- <ul>
- <li><a>'alignment-baseline'</a></li>
- <li><a>'baseline-shift'</a></li>
- <li><a>'dominant-baseline'</a></li>
- <li><a>'glyph-orientation-horizontal'</a></li>
- <li><a>'glyph-orientation-vertical'</a></li>
- <li><a>'kerning'</a></li>
- <li><a>'text-anchor'</a></li>
- <li><a>'writing-mode'</a></li>
- </ul>
- </li>
+ <li><a>'font property'</a></li>
+ <li><a>'font-family'</a></li>
+ <li><a>'font-size'</a></li>
+ <li><a>'font-size-adjust'</a></li>
+ <li><a>'font-stretch'</a></li>
+ <li><a>'font-style'</a></li>
+ <li><a>'font-variant'</a></li>
+ <li><a>'font-weight'</a></li>
</ul>
- <p>A table that lists and summarizes the styling properties can
- be found in the <a href="propidx.html">Property Index</a>.</p>
+ </li>
+ <li>
+ Text properties:
+ <ul>
+ <li><a>'direction'</a></li>
+ <li><a>'letter-spacing'</a></li>
+ <li><a>'text-decoration'</a></li>
+ <li><a>'unicode-bidi'</a></li>
+ <li><a>'word-spacing'</a></li>
+ </ul>
+ </li>
+ <li>
+ Other properties for visual media:
+ <ul>
+ <li><a>'clip'</a>, only applicable to <a>outermost svg element</a>.</li>
+ <li><a>'color'</a>, used to provide a potential indirect value
+ (<span class="prop-value">currentColor</span>) for the
+ <a>'fill'</a>,
+ <a>'stroke'</a>,
+ <a>'stop-color'</a>,
+ <a>'flood-color'</a> and
+ <a>'lighting-color'</a>
+ properties.
+ (The SVG properties which support color allow a color
+ specification which is extended from CSS2 to accommodate
+ color definitions in arbitrary color spaces. See <a
+ href="color.html#ColorProfileDescriptions">Color profile
+ descriptions</a>.)</li>
+ <li><a>'cursor property'</a></li>
+ <li><a>'display'</a></li>
+ <li><a>'overflow'</a>, only applicable to
+ <a href="coords.html#ElementsThatEstablishViewports">elements which establish a new viewport</a>.</li>
+ <li><a>'visibility'</a></li>
+ </ul>
+ </li>
+</ul>
- <h2 id='StylingScenarios'>Usage scenarios for styling</h2>
- <p>SVG has many usage scenarios, each with different needs.
- Here are three common usage scenarios:</p>
- <ol>
- <li>
- <p><strong>SVG content used as an exchange format (style
- sheet language-independent)</strong>:</p>
- <p>In some usage scenarios, reliable interoperability of
- SVG content across software tools is the main goal. Since
- support for a particular style sheet language is not
- guaranteed across all implementations, it is a requirement
- that SVG content can be fully specified without the use of
- a style sheet language.</p>
- </li>
- <li>
- <p><strong>SVG content generated as the output from XSLT</strong>:</p>
- <p>XSLT offers the ability to take a stream of arbitrary
- XML content as input, apply potentially complex
- transformations, and then generate SVG content as output
- [<a href="refs.html#ref-XSLT">XSLT</a>].
- XSLT can be used to transform XML data extracted from
- databases into an SVG graphical representation of that
- data. It is a requirement that fully specified SVG content
- can be generated from XSLT.</p>
- </li>
- <li>
- <p><strong>SVG content styled with CSS</strong>:</p>
- <p>CSS is a widely implemented declarative language for
- assigning styling properties to XML content, including SVG
- [<a href="refs.html#ref-CSS2">CSS2</a>].
- It represents a combination of features, simplicity and
- compactness that makes it very suitable for many
- applications of SVG. It is a requirement that CSS styling
- can be applied to SVG content.</p>
- </li>
- </ol>
+<p>The following SVG properties are not defined in CSS2. The
+complete normative definitions for these properties are found in
+this specification:</p>
- <h2 id='AlternativesForStyling'>Alternative ways to specify styling properties</h2>
- <p>Styling properties can be assigned to SVG elements in the
- following two ways:</p>
+<ul>
+ <li>
+ <a href="masking.html">Clipping, Masking and
+ Compositing</a> properties:
<ul>
- <li id="StylingUsingPresentationAttributes">
- <p><strong>Presentation attributes</strong></p>
- <p>Styling properties can be assigned using SVG's
- <a>presentation attributes</a>. For each
- styling property defined in this specification, there is a
- corresponding XML presentation attribute available on all
- relevant SVG elements. Detailed information on the
- presentation attributes can be found in <a
- href="styling.html#UsingPresentationAttributes">Specifying
- properties using the presentation attributes</a>.</p>
- <p>The presentation attributes are style sheet language
- independent and thus are applicable to usage scenario 1
- above (i.e., tool interoperability). Because it is
- straightforward to assign values to XML attributes from
- XSLT, the presentation attributes are well-suited to usage
- scenario 2 above (i.e., SVG generation from XSLT). (See <a
- href="styling.html#StylingWithXSL">Styling with XSL</a>
- below.)</p>
- <p><a
- href="conform.html#ConformingSVGInterpreters">Conforming
- SVG Interpreters</a> and <a
- href="conform.html#ConformingSVGViewers">Conforming SVG
- Viewers</a> are required to support SVG's presentation
- attributes.</p>
- </li>
- <li id="StylingUsingCSSStylesheets">
- <p><strong>CSS Stylesheets</strong></p>
- <p>To support usage scenario 3 above, SVG content can be
- styled with CSS. For more information, see <a
- href="styling.html#StylingWithCSS">Styling with
- CSS</a>.</p>
- <p><a
- href="conform.html#ConformingSVGInterpreters">Conforming
- SVG Interpreters</a> and <a
- href="conform.html#ConformingSVGViewers">Conforming SVG
- Viewers</a> that support CSS styling of generic (i.e.,
- text-based) XML content are required to also support CSS styling
- of SVG content.</p>
- </li>
+ <li><a>'clip-path'</a></li>
+ <li><a>'clip-rule'</a></li>
+ <li><a>'mask property'</a></li>
+ <li><a>'opacity'</a></li>
</ul>
+ </li>
+ <li>
+ <a href="filters.html">Filter Effects</a> properties:
+ <ul>
+ <li><a>'enable-background'</a></li>
+ <li><a>'filter property'</a></li>
+ <li><a>'flood-color'</a></li>
+ <li><a>'flood-opacity'</a></li>
+ <li><a>'lighting-color'</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="pservers.html#Gradients">Gradient</a> properties:
+ <ul>
+ <li><a>'stop-color'</a></li>
+ <li><a>'stop-opacity'</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="interact.html">Interactivity</a> properties:
+ <ul>
+ <li><a>'pointer-events'</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="color.html">Color</a> and <a
+ href="painting.html">Painting</a> properties:
+ <ul>
+ <li><a>'color-interpolation'</a></li>
+ <li><a>'color-interpolation-filters'</a></li>
+ <li><a>'color-profile property'</a></li>
+ <li><a>'color-rendering'</a></li>
+ <li><a>'fill'</a></li>
+ <li><a>'fill-opacity'</a></li>
+ <li><a>'fill-rule'</a></li>
+ <li><a>'image-rendering'</a></li>
+ <li><a>'marker property'</a></li>
+ <li><a>'marker-end'</a></li>
+ <li><a>'marker-mid'</a></li>
+ <li><a>'marker-start'</a></li>
+ <li><a>'shape-rendering'</a></li>
+ <li><a>'stroke'</a></li>
+ <li><a>'stroke-dasharray'</a></li>
+ <li><a>'stroke-dashoffset'</a></li>
+ <li><a>'stroke-linecap'</a></li>
+ <li><a>'stroke-linejoin'</a></li>
+ <li><a>'stroke-miterlimit'</a></li>
+ <li><a>'stroke-opacity'</a></li>
+ <li><a>'stroke-width'</a></li>
+ <li><a>'text-rendering'</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="text.html">Text</a> properties:
+ <ul>
+ <li><a>'alignment-baseline'</a></li>
+ <li><a>'baseline-shift'</a></li>
+ <li><a>'dominant-baseline'</a></li>
+ <li><a>'glyph-orientation-horizontal'</a></li>
+ <li><a>'glyph-orientation-vertical'</a></li>
+ <li><a>'kerning'</a></li>
+ <li><a>'text-anchor'</a></li>
+ <li><a>'writing-mode'</a></li>
+ </ul>
+ </li>
+</ul>
- <h2 id="UsingPresentationAttributes">Specifying properties using the presentation
- attributes</h2>
- <p>For each styling property defined in this specification (see
- <a href="propidx.html">Property Index</a>), there is a
- corresponding XML attribute (the <a>presentation attribute</a>) with the same
- name that is available on all relevant SVG elements. For
- example, SVG has a <a>'fill'</a> property that defines how
- to paint the interior of a shape. There is a corresponding
- presentation attribute with the same name (i.e., <span
- class="attr-name">'fill'</span>) that can be used to specify a
- value for the <a>'fill'</a> property on a given
- element.</p>
- <p>The following example shows how the <a>'fill'</a> and
- <a>'stroke'</a> properties can be specified on a <a>'rect'</a> using the
- <span class="attr-name">'fill'</span> and
- <span class="attr-name">'stroke'</span> presentation attributes. The
- rectangle will be filled with red and outlined with blue:</p>
+<p>A table that lists and summarizes the styling properties can
+be found in the <a href="propidx.html">Property Index</a>.</p>
+
+<h2 id='StylingScenarios'>Usage scenarios for styling</h2>
+
+<p>SVG has many usage scenarios, each with different needs.
+Here are three common usage scenarios:</p>
+
+<ol>
+ <li>
+ <p><strong>SVG content used as an exchange format (style
+ sheet language-independent)</strong>:</p>
+
+ <p>In some usage scenarios, reliable interoperability of
+ SVG content across software tools is the main goal. Since
+ support for a particular style sheet language is not
+ guaranteed across all implementations, it is a requirement
+ that SVG content can be fully specified without the use of
+ a style sheet language.</p>
+ </li>
+
+ <li>
+ <p><strong>SVG content generated as the output from XSLT</strong>:</p>
+
+ <p>XSLT offers the ability to take a stream of arbitrary
+ XML content as input, apply potentially complex
+ transformations, and then generate SVG content as output
+ [<a href="refs.html#ref-XSLT">XSLT</a>].
+ XSLT can be used to transform XML data extracted from
+ databases into an SVG graphical representation of that
+ data. It is a requirement that fully specified SVG content
+ can be generated from XSLT.</p>
+ </li>
+
+ <li>
+ <p><strong>SVG content styled with CSS</strong>:</p>
+
+ <p>CSS is a widely implemented declarative language for
+ assigning styling properties to XML content, including SVG
+ [<a href="refs.html#ref-CSS2">CSS2</a>].
+ It represents a combination of features, simplicity and
+ compactness that makes it very suitable for many
+ applications of SVG. It is a requirement that CSS styling
+ can be applied to SVG content.</p>
+ </li>
+</ol>
+
+<h2 id='AlternativesForStyling'>Alternative ways to specify styling properties</h2>
+
+<p>Styling properties can be assigned to SVG elements in the
+following two ways:</p>
+
+<ul>
+ <li id="StylingUsingPresentationAttributes">
+ <p><strong>Presentation attributes</strong></p>
+
+ <p>Styling properties can be assigned using SVG's
+ <a>presentation attributes</a>. For each
+ styling property defined in this specification, there is a
+ corresponding XML presentation attribute available on all
+ relevant SVG elements. Detailed information on the
+ presentation attributes can be found in <a
+ href="styling.html#UsingPresentationAttributes">Specifying
+ properties using the presentation attributes</a>.</p>
+
+ <p>The presentation attributes are style sheet language
+ independent and thus are applicable to usage scenario 1
+ above (i.e., tool interoperability). Because it is
+ straightforward to assign values to XML attributes from
+ XSLT, the presentation attributes are well-suited to usage
+ scenario 2 above (i.e., SVG generation from XSLT). (See <a
+ href="styling.html#StylingWithXSL">Styling with XSL</a>
+ below.)</p>
+
+ <p><a
+ href="conform.html#ConformingSVGInterpreters">Conforming
+ SVG Interpreters</a> and <a
+ href="conform.html#ConformingSVGViewers">Conforming SVG
+ Viewers</a> are required to support SVG's presentation
+ attributes.</p>
+ </li>
+
+ <li id="StylingUsingCSSStylesheets">
+ <p><strong>CSS Stylesheets</strong></p>
+
+ <p>To support usage scenario 3 above, SVG content can be
+ styled with CSS. For more information, see <a
+ href="styling.html#StylingWithCSS">Styling with
+ CSS</a>.</p>
+
+ <p><a
+ href="conform.html#ConformingSVGInterpreters">Conforming
+ SVG Interpreters</a> and <a
+ href="conform.html#ConformingSVGViewers">Conforming SVG
+ Viewers</a> that support CSS styling of generic (i.e.,
+ text-based) XML content are required to also support CSS styling
+ of SVG content.</p>
+ </li>
+</ul>
+
+<h2 id="UsingPresentationAttributes">Specifying properties using the presentation attributes</h2>
+
+<p>For each styling property defined in this specification (see
+<a href="propidx.html">Property Index</a>), there is a
+corresponding XML attribute (the <a>presentation attribute</a>) with the same
+name that is available on all relevant SVG elements. For
+example, SVG has a <a>'fill'</a> property that defines how
+to paint the interior of a shape. There is a corresponding
+presentation attribute with the same name (i.e., <span
+class="attr-name">'fill'</span>) that can be used to specify a
+value for the <a>'fill'</a> property on a given
+element.</p>
+
+<p>The following example shows how the <a>'fill'</a> and
+<a>'stroke'</a> properties can be specified on a <a>'rect'</a> using the
+<span class="attr-name">'fill'</span> and
+<span class="attr-name">'stroke'</span> presentation attributes. The
+rectangle will be filled with red and outlined with blue:</p>
<edit:example href='images/styling/PresentationAttributes.svg' image='no' link='yes'/>
- <p>The presentation attributes offer the following
- advantages:</p>
- <ul>
- <li><strong>Broad support</strong>. All versions of <a
- href="conform.html#ConformingSVGInterpreters">Conforming SVG
- Interpreters</a> and <a
- href="conform.html#ConformingSVGViewers">Conforming SVG
- Viewers</a> are required to support the presentation
- attributes.</li>
- <li><strong>Simplicity</strong>. Styling properties can be
- attached to elements by simply providing a value for the
- presentation attribute on the proper elements.</li>
- <li><strong>Restyling</strong>. SVG content that uses the
- presentation attributes is highly compatible with downstream
- processing using XSLT [<a
- href="refs.html#ref-XSLT">XSLT</a>] [<a href="refs.html#ref-XSLT2">XSLT2</a>] or supplemental
- styling by adding CSS style rules to override some of the
- presentation attributes.</li>
- <li><strong>Convenient generation using XSLT</strong>. In some
- cases, XSLT can be used to generate fully styled SVG content.
- The presentation attributes are compatible with convenient
- generation of SVG from XSLT.</li>
- </ul>
- <p>In some situations, SVG content that uses the presentation
- attributes has potential limitations versus SVG content that is
- styled with a style sheet language such as CSS (see <a
- href="styling.html#StylingWithCSS">Styling with CSS</a>). In
- other situations, such as when an XSLT style sheet generates
- SVG content from semantically rich XML source files, the
- limitations below may not apply. Depending on the situation,
- some of the following potential limitations may or may not
- apply to the presentation attributes:</p>
- <ul>
- <li><strong>Styling attached to content</strong>. The
- presentation attributes are attached directly to particular
- elements, thereby diminishing potential advantages that comes
- from abstracting styling from content, such as the ability to
- restyle documents for different uses and environments.</li>
- <li><strong>Flattened data model</strong>. In and of
- themselves, the presentation attributes do not offer the
- higher level abstractions that you get with a styling system,
- such as the ability to define named collections of properties
- which are applied to particular categories of elements. The
- result is that, in many cases, important higher level
- semantic information can be lost, potentially making document
- reuse and restyling more difficult.</li>
- <li><strong>Potential increase in file size</strong>. Many
- types of graphics use similar styling properties across
- multiple elements. For example, a company organization chart
- might assign one collection of styling properties to the
- boxes around temporary workers (e.g., dashed outlines, red
- fill), and a different collection of styling properties to
- permanent workers (e.g., solid outlines, blue fill). Styling
- systems such as CSS allow collections of properties to be
- defined once in a file. With the styling attributes, it might
- be necessary to specify presentation attributes on each
- different element.</li>
- <li><strong>Potential difficulty when embedded into a
- CSS-styled parent document</strong>. When SVG content is
- embedded in other XML, and the desire is to style all aspects
- of the compound document with CSS, use of the presentation
- attributes might introduce complexity and difficulty. In this
- case, it is sometimes easier if the SVG content does not use
- the presentation attributes and instead is styled using CSS
- facilities.</li>
- </ul>
- <p>For user agents that support CSS, the presentation
- attributes must be translated to corresponding CSS style rules
- according to rules described in
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#q12">Precedence of non-CSS presentational hints</a>
- ([<a href="refs.html#ref-CSS2">CSS2</a>], section 6.4.4),
- with the additional
- clarification that the presentation attributes are conceptually
- inserted into a new author style sheet which is the first in
- the author style sheet collection. The presentation attributes
- thus will participate in the CSS2 cascade
- as if they were replaced by corresponding CSS style
- rules placed at the start of the author style sheet with a
- specificity of zero. In general, this means that the
- presentation attributes have lower priority than other CSS
- style rules specified in author style sheets or <a>'style attribute'</a>
- attributes.</p>
- <p>User agents that do not support CSS must ignore any CSS
- style rules defined in CSS style sheets and <a>'style attribute'</a>
- attributes. In this case,
- the CSS cascade does not apply. (Inheritance of properties,
- however, does apply. See <a
- href="styling.html#Inheritance">Property inheritance</a>.)</p>
- <p>An <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#important-rules"><span class="prop-value">!important</span> declaration</a>
- ([<a href="refs.html#ref-CSS2">CSS2</a>], section 6.4.2) within a presentation attribute definition is an invalid value.</p>
- <p>Animation of presentation attributes is equivalent to
- animating the corresponding property. Thus, the same effect
- occurs from animating the presentation attribute with
- <span class='attr-value'>attributeType="XML"</span>
- as occurs with animating the corresponding property with
- <span class='attr-value'>attributeType="CSS"</span> (see
- <a>'set/attributeType'</a>).</p>
+<p>The presentation attributes offer the following advantages:</p>
+
+<ul>
+ <li><strong>Broad support</strong>. All versions of <a
+ href="conform.html#ConformingSVGInterpreters">Conforming SVG
+ Interpreters</a> and <a
+ href="conform.html#ConformingSVGViewers">Conforming SVG
+ Viewers</a> are required to support the presentation
+ attributes.</li>
+
+ <li><strong>Simplicity</strong>. Styling properties can be
+ attached to elements by simply providing a value for the
+ presentation attribute on the proper elements.</li>
+
+ <li><strong>Restyling</strong>. SVG content that uses the
+ presentation attributes is highly compatible with downstream
+ processing using XSLT [<a
+ href="refs.html#ref-XSLT">XSLT</a>] [<a href="refs.html#ref-XSLT2">XSLT2</a>] or supplemental
+ styling by adding CSS style rules to override some of the
+ presentation attributes.</li>
+
+ <li><strong>Convenient generation using XSLT</strong>. In some
+ cases, XSLT can be used to generate fully styled SVG content.
+ The presentation attributes are compatible with convenient
+ generation of SVG from XSLT.</li>
+</ul>
+
+<p>In some situations, SVG content that uses the presentation
+attributes has potential limitations versus SVG content that is
+styled with a style sheet language such as CSS (see <a
+href="styling.html#StylingWithCSS">Styling with CSS</a>). In
+other situations, such as when an XSLT style sheet generates
+SVG content from semantically rich XML source files, the
+limitations below may not apply. Depending on the situation,
+some of the following potential limitations may or may not
+apply to the presentation attributes:</p>
+
+<ul>
+ <li><strong>Styling attached to content</strong>. The
+ presentation attributes are attached directly to particular
+ elements, thereby diminishing potential advantages that comes
+ from abstracting styling from content, such as the ability to
+ restyle documents for different uses and environments.</li>
+
+ <li><strong>Flattened data model</strong>. In and of
+ themselves, the presentation attributes do not offer the
+ higher level abstractions that you get with a styling system,
+ such as the ability to define named collections of properties
+ which are applied to particular categories of elements. The
+ result is that, in many cases, important higher level
+ semantic information can be lost, potentially making document
+ reuse and restyling more difficult.</li>
+
+ <li><strong>Potential increase in file size</strong>. Many
+ types of graphics use similar styling properties across
+ multiple elements. For example, a company organization chart
+ might assign one collection of styling properties to the
+ boxes around temporary workers (e.g., dashed outlines, red
+ fill), and a different collection of styling properties to
+ permanent workers (e.g., solid outlines, blue fill). Styling
+ systems such as CSS allow collections of properties to be
+ defined once in a file. With the styling attributes, it might
+ be necessary to specify presentation attributes on each
+ different element.</li>
+
+ <li><strong>Potential difficulty when embedded into a
+ CSS-styled parent document</strong>. When SVG content is
+ embedded in other XML, and the desire is to style all aspects
+ of the compound document with CSS, use of the presentation
+ attributes might introduce complexity and difficulty. In this
+ case, it is sometimes easier if the SVG content does not use
+ the presentation attributes and instead is styled using CSS
+ facilities.</li>
+</ul>
+
+<p>For user agents that support CSS, the presentation
+attributes must be translated to corresponding CSS style rules
+according to rules described in
+<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#q12">Precedence of non-CSS presentational hints</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], section 6.4.4),
+with the additional
+clarification that the presentation attributes are conceptually
+inserted into a new author style sheet which is the first in
+the author style sheet collection. The presentation attributes
+thus will participate in the CSS2 cascade
+as if they were replaced by corresponding CSS style
+rules placed at the start of the author style sheet with a
+specificity of zero. In general, this means that the
+presentation attributes have lower priority than other CSS
+style rules specified in author style sheets or <a>'style attribute'</a>
+attributes.</p>
+
+<p>User agents that do not support CSS must ignore any CSS
+style rules defined in CSS style sheets and <a>'style attribute'</a>
+ attributes. In this case,
+the CSS cascade does not apply. (Inheritance of properties,
+however, does apply. See <a
+href="styling.html#Inheritance">Property inheritance</a>.)</p>
+<p>An <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#important-rules"><span class="prop-value">!important</span> declaration</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], section 6.4.2) within a presentation attribute definition is an invalid value.</p>
+<p>Animation of presentation attributes is equivalent to
+animating the corresponding property. Thus, the same effect
+occurs from animating the presentation attribute with
+<span class='attr-value'>attributeType="XML"</span>
+as occurs with animating the corresponding property with
+<span class='attr-value'>attributeType="CSS"</span> (see
+<a>'set/attributeType'</a>).</p>
- <h2 id='StylingWithXSL'>Styling with XSL</h2>
- <p>XSL style sheets [<a href="refs.html#ref-XSLT">XSLT</a>] [<a href="refs.html#ref-XSLT2">XSLT2</a>] define how to
- transform XML content into something else, usually other XML.
- When XSLT is used in conjunction with SVG, sometimes SVG
- content will serve as both input and output for XSL style
- sheets. Other times, XSL style sheets will take non-SVG content
- as input and generate SVG content as output.</p>
- <p>The following example uses an external XSL style sheet to
- transform SVG content into modified SVG content (see <a
- href="styling.html#ReferencingExternalStyleSheets">Referencing
- external style sheets</a>). The style sheet sets the
- <a>'fill'</a> and <a>'stroke'</a> properties on all
- rectangles to red and blue, respectively:</p>
+<h2 id='StylingWithXSL'>Styling with XSL</h2>
+
+<p>XSL style sheets [<a href="refs.html#ref-XSLT">XSLT</a>] [<a href="refs.html#ref-XSLT2">XSLT2</a>] define how to
+transform XML content into something else, usually other XML.
+When XSLT is used in conjunction with SVG, sometimes SVG
+content will serve as both input and output for XSL style
+sheets. Other times, XSL style sheets will take non-SVG content
+as input and generate SVG content as output.</p>
+
+<p>The following example uses an external XSL style sheet to
+transform SVG content into modified SVG content (see <a
+href="styling.html#ReferencingExternalStyleSheets">Referencing
+external style sheets</a>). The style sheet sets the
+<a>'fill'</a> and <a>'stroke'</a> properties on all
+rectangles to red and blue, respectively:</p>
+
<pre>
<strong>mystyle.xsl</strong>
<?xml version="1.0" standalone="no"?>
@@ -434,22 +472,28 @@
</svg>
</pre>
- <h2 id='StylingWithCSS'>Styling with CSS</h2>
- <p>SVG implementations that support CSS are required to support
- the following:</p>
- <ul>
- <li>External CSS style sheets referenced from the current
- document (see <a
- href="styling.html#ReferencingExternalStyleSheets">Referencing
- external style sheets</a>)</li>
- <li>Internal CSS style sheets (i.e., style sheets embedded
- within the current document, such as within an SVG <a>'style element'</a> element)</li>
- <li>Inline style (i.e., CSS property declarations within a <a>'style attribute'</a> attribute on a particular
- SVG element)</li>
- </ul>
- <p>The following example shows the use of an external CSS style
- sheet to set the <a>'fill'</a> and <a>'stroke'</a> properties on all
- rectangles to red and blue, respectively:</p>
+<h2 id='StylingWithCSS'>Styling with CSS</h2>
+
+<p>SVG implementations that support CSS are required to support
+the following:</p>
+
+<ul>
+ <li>External CSS style sheets referenced from the current
+ document (see <a
+ href="styling.html#ReferencingExternalStyleSheets">Referencing
+ external style sheets</a>)</li>
+
+ <li>Internal CSS style sheets (i.e., style sheets embedded
+ within the current document, such as within an SVG <a>'style element'</a> element)</li>
+
+ <li>Inline style (i.e., CSS property declarations within a <a>'style attribute'</a> attribute on a particular
+ SVG element)</li>
+</ul>
+
+<p>The following example shows the use of an external CSS style
+sheet to set the <a>'fill'</a> and <a>'stroke'</a> properties on all
+rectangles to red and blue, respectively:</p>
+
<pre>
<strong>mystyle.css</strong>
rect {
@@ -468,226 +512,227 @@
<rect x="200" y="100" width="600" height="300"/>
</svg>
</pre>
- <p class="view-as-svg"><a
- href="images/styling/ExternalCSSStyleSheet.svg">View this
- example as SVG (SVG-enabled browsers only)</a><br />
- </p>
- <p id='StyleElementExample'>CSS style sheets can be embedded within SVG content inside
- of a <a>'style element'</a> element. The following
- example uses an internal CSS style sheet to achieve the same
- result as the previous example:</p>
+<p class="view-as-svg"><a
+href="images/styling/ExternalCSSStyleSheet.svg">View this
+example as SVG (SVG-enabled browsers only)</a><br />
+ </p>
+
+<p id='StyleElementExample'>CSS style sheets can be embedded within SVG content inside
+of a <a>'style element'</a> element. The following
+example uses an internal CSS style sheet to achieve the same
+result as the previous example:</p>
<edit:example href='images/styling/InternalCSSStyleSheet.svg' image='no' link='yes'/>
- <p>Note how the CSS style sheet is placed within a <a
- href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-cdata-sect"><code>CDATA</code></a>
- construct (i.e., <code><![CDATA[ ... ]]></code>). Placing
- internal CSS style sheets within <code>CDATA</code> blocks is
- sometimes necessary since CSS style sheets can include
- characters, such as ">", which conflict with XML parsers.
- Even if a given style sheet does not use characters that
- conflict with XML parsing, it is highly recommended that
- internal style sheets be placed inside <code>CDATA</code>
- blocks.</p>
- <p>Implementations that support CSS are also required to
- support CSS inline style. Similar to the <a
- href="http://www.w3.org/TR/1999/REC-html401-19991224/present/styles.html#h-14.2.2"><span class="attr-name">'style'</span></a> attribute in HTML, CSS
- inline style can be declared within a <a href="styling.html#StyleAttribute"><span class="attr-name">'style'</span></a> attribute in SVG by
- specifying a semicolon-separated list of property declarations,
- where each property declaration has the form "name: value".
- Note that property declarations inside the <a>'style attribute'</a>
- attribute must follow CSS style rules, see
- <a href="styling.html#StyleAttribute">The 'style' attribute</a>.</p>
+<p>Note how the CSS style sheet is placed within a <a
+href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-cdata-sect"><code>CDATA</code></a>
+construct (i.e., <code><![CDATA[ ... ]]></code>). Placing
+internal CSS style sheets within <code>CDATA</code> blocks is
+sometimes necessary since CSS style sheets can include
+characters, such as ">", which conflict with XML parsers.
+Even if a given style sheet does not use characters that
+conflict with XML parsing, it is highly recommended that
+internal style sheets be placed inside <code>CDATA</code>
+blocks.</p>
-
- <p id='StyleAttributeExample'>The following example shows how the
- <a>'fill'</a> and <a>'stroke'</a> properties can be specified
- on a <a>'rect'</a> using the <a>'style attribute'</a> attribute. Just like the
- previous example, the rectangle will be filled with red and
- outlined with blue:</p>
+<p>Implementations that support CSS are also required to
+support CSS inline style. Similar to the <a
+href="http://www.w3.org/TR/1999/REC-html401-19991224/present/styles.html#h-14.2.2"><span class="attr-name">'style'</span></a> attribute in HTML, CSS
+inline style can be declared within a <a href="styling.html#StyleAttribute"><span class="attr-name">'style'</span></a> attribute in SVG by
+specifying a semicolon-separated list of property declarations,
+where each property declaration has the form "name: value".
+Note that property declarations inside the <a>'style attribute'</a>
+attribute must follow CSS style rules, see
+<a href="styling.html#StyleAttribute">The 'style' attribute</a>.</p>
+
+<p id='StyleAttributeExample'>The following example shows how the
+<a>'fill'</a> and <a>'stroke'</a> properties can be specified
+on a <a>'rect'</a> using the <a>'style attribute'</a> attribute. Just like the
+previous example, the rectangle will be filled with red and
+outlined with blue:</p>
<edit:example href='images/styling/StyleAttribute.svg' image='no' link='yes'/>
- <p>In an SVG user agent that supports CSS style sheets, the
- following facilities from CSS2 must be supported:</p>
- <ul>
- <li>CSS2 <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html">selectors</a>
- within style sheets ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 5).
- Because SVG is intended to be used as one component in a
- multiple namespace XML application and CSS2 is not namespace
- aware, type selectors will only match against the local part
- of the element's qualified name.</li>
- <li><a href="http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/">External CSS style sheets</a>
- [<a href="refs.html#ref-XML-SS">XML-SS</a>], CSS
- style sheets within <a>'style element'</a> elements and CSS
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#q8">declaration
- blocks</a> ([<a href="refs.html#ref-CSS2">CSS2</a>], section 4.1.7)
- within <a>'style attribute'</a> attributes attached to
- specific SVG elements.</li>
- <li>CSS2 rules for <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html">assigning
- property values, cascading and inheritance</a>
- ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 6).</li>
- <li><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">@font-face</a>,
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#at-media-rule">@media</a>,
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#at-import">@import</a>
- and <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#x66">@charset</a>
- rules within style sheets
- ([<a href="refs.html#ref-CSS2">CSS2</a>], sections 15.3.1, 7.2.1, 6.3 and 4.4).</li>
- <li>CSS2's <a
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#dynamic-pseudo-classes">dynamic pseudo-classes</a>
- :hover, :active and :focus and <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15">pseudo-classes</a>
- :first-child, :visited, :link and :lang
- ([<a href="refs.html#ref-CSS2">CSS2</a>], section 5.11).
- The remaining CSS2 pseudo-classes, including those having to do with
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/generate.html">generated content</a>
- ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 12),
- are not part of the SVG language definition.
- An SVG element gains focus when it is selected. See <a
- href="text.html#TextSelection">Text selection</a>.</li>
- <li>For the purposes of aural media, SVG represents a
- CSS-stylable XML grammar. In user agents that support aural
- style sheets,
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html">CSS aural style properties</a> can be applied
- as defined in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 19). (See
- <a href="styling.html#AuralStyleSheets">Aural style sheets</a>.)</li>
- <li>CSS style sheets defined within a <a>'style element'</a>
- element can be immediate character data content of the <a>'style element'</a>
- element or can be embedded within a
- <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-cdata-sect">CDATA section</a>
- ([<a href="refs.html#ref-XML10">XML10</a>], section 2.7).</li>
- </ul>
- <p>SVG defines an <a href="color.html#ColorProfileAtRule">@color-profile</a>
- <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#at-rules'>at-rule</a>
- ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 4.1.6)
- for defining color profiles so that ICC color profiles can be
- applied to CSS-styled SVG content.</p>
- <p>Note the following about relative URIs and external CSS
- style sheets: The CSS2 specification
- <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#uri'>says</a>
- ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 4.3.4)
- that relative URIs (as defined in <a href="http://www.ietf.org/rfc/rfc2396.txt"><cite>Uniform Resource Identifiers (URI): Generic Syntax</cite></a>
- [<a href="refs.html#ref-RFC3986">RFC3986</a>]) within
- style sheets are resolved such that the base URI is that of the
- style sheet, not that of the referencing document.</p>
+<p>In an SVG user agent that supports CSS style sheets, the
+following facilities from CSS2 must be supported:</p>
+
+<ul>
+ <li>CSS2 <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html">selectors</a>
+ within style sheets ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 5).
+ Because SVG is intended to be used as one component in a
+ multiple namespace XML application and CSS2 is not namespace
+ aware, type selectors will only match against the local part
+ of the element's qualified name.</li>
+
+ <li><a href="http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/">External CSS style sheets</a>
+ [<a href="refs.html#ref-XML-SS">XML-SS</a>], CSS
+ style sheets within <a>'style element'</a> elements and CSS
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#q8">declaration
+ blocks</a> ([<a href="refs.html#ref-CSS2">CSS2</a>], section 4.1.7)
+ within <a>'style attribute'</a> attributes attached to
+ specific SVG elements.</li>
+
+ <li>CSS2 rules for <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html">assigning
+ property values, cascading and inheritance</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 6).</li>
+
+ <li><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">@font-face</a>,
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#at-media-rule">@media</a>,
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#at-import">@import</a>
+ and <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#x66">@charset</a>
+ rules within style sheets
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], sections 15.3.1, 7.2.1, 6.3 and 4.4).</li>
+
+ <li>CSS2's <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#dynamic-pseudo-classes">dynamic pseudo-classes</a>
+ :hover, :active and :focus and <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15">pseudo-classes</a>
+ :first-child, :visited, :link and :lang
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 5.11).
+ The remaining CSS2 pseudo-classes, including those having to do with
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/generate.html">generated content</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 12),
+ are not part of the SVG language definition.
+ An SVG element gains focus when it is selected. See <a
+ href="text.html#TextSelection">Text selection</a>.</li>
+
+ <li>For the purposes of aural media, SVG represents a
+ CSS-stylable XML grammar. In user agents that support aural
+ style sheets,
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html">CSS aural style properties</a> can be applied
+ as defined in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 19). (See
+ <a href="styling.html#AuralStyleSheets">Aural style sheets</a>.)</li>
+
+ <li>CSS style sheets defined within a <a>'style element'</a>
+ element can be immediate character data content of the <a>'style element'</a>
+ element or can be embedded within a
+ <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-cdata-sect">CDATA section</a>
+ ([<a href="refs.html#ref-XML10">XML10</a>], section 2.7).</li>
+</ul>
+
+<p>SVG defines an <a href="color.html#ColorProfileAtRule">@color-profile</a>
+<a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#at-rules'>at-rule</a>
+([<a href='refs.html#ref-CSS2'>CSS2</a>], section 4.1.6)
+for defining color profiles so that ICC color profiles can be
+applied to CSS-styled SVG content.</p>
+
+<p>Note the following about relative URIs and external CSS
+style sheets: The CSS2 specification
+<a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#uri'>says</a>
+([<a href='refs.html#ref-CSS2'>CSS2</a>], section 4.3.4)
+that relative URIs (as defined in <a href="http://www.ietf.org/rfc/rfc2396.txt"><cite>Uniform Resource Identifiers (URI): Generic Syntax</cite></a>
+[<a href="refs.html#ref-RFC3986">RFC3986</a>]) within
+style sheets are resolved such that the base URI is that of the
+style sheet, not that of the referencing document.</p>
- <h2 id='CaseSensitivity'>Case sensitivity of property names and values</h2>
- <p>Property declarations via <a>presentation attributes</a> are expressed in XML [<a
- href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>], which is
- case-sensitive. CSS property declarations specified either in
- CSS style sheets or in a <a>'style attribute'</a> attribute, on the other
- hand, are <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#q4">generally case-insensitive with some exceptions</a>
- ([<a href="refs.html#ref-CSS2">CSS2</a>], section 4.1.3).</p>
- <p>Because presentation attributes are expressed as XML
- attributes, presentation attributes are case-sensitive and must
- match the exact name as specified in the <a href='svgdtd.html'>DTD</a>
- (see the <code>SVG.Presentation.attrib</code> entity in the DTD,
- which expands to all of the presentation attributes).
- When using a presentation attribute to specify a value for the
- <a>'fill'</a> property, the presentation attribute must be
- be specified as <span class='attr-value'>fill="…"</span> and not
- <span class='attr-value'>fill="…"</span> or <span class='attr-value'>Fill="…"</span>. Keyword
- values, such as <span class='attr-value'>italic</span> in
- <span class='attr-value'>font-style="italic"</span>,
- are also case-sensitive and must be specified using the exact
- case used in the specification which defines the given keyword.
- For example, the keyword <span class='attr-value'>sRGB</span>
- must have lowercase "s" and uppercase "RGB".</p>
- <p>Property declarations within CSS style sheets or in a
- <a>'style attribute'</a> attribute must only conform to CSS rules, which are generally
- more lenient with regard to case sensitivity. However, to
- promote consistency across the different ways for expressing
- styling properties, it is strongly recommended that authors use
- the exact property names (usually, lowercase letters and
- hyphens) as defined in the relevant specification and express
- all keywords using the same case as is required by presentation
- attributes and not take advantage of CSS's ability to ignore
- case.</p>
-
- <div class="annotation">
- <p>
- SVG2 Requirement: Consider relaxing case sensitivity of presentation attribute values
- </p>
- <p>
- Resolution: We will make property values case insensitive
- </p>
- <p>
- <a href="http://www.w3.org/2011/10/28-svg-irc#T16-40-11">Pre-TPAC F2F Day 2</a>.
- </p>
- <p>
- Purpose: To make presentation attribute syntax parsing be the same as parsing for the corresponding CSS property
- </p>
- <p>
- Owner: Cameron (ACTION-3276)
- </p>
- </div>
+<h2 id='CaseSensitivity'>Case sensitivity of property names and values</h2>
- <h2 id='SVGUseOfCSS'>Facilities from CSS and XSL used by SVG</h2>
- <p>SVG shares various relevant properties and approaches common
- to CSS and XSL, plus the semantics of many of the processing
- rules.</p>
- <p>SVG shares the following facilities with CSS and XSL:</p>
- <ul>
- <li>Shared properties. Many of SVG's properties are shared
- between CSS2, XSL and SVG. (See <a
- href="styling.html#PropertiesFromCSS2">list of shared
- properties</a>).</li>
- <li>Syntax rules. (The normative references are
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html">CSS2 syntax and basic data types</a>
- and <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/grammar.html">The grammar of CSS2</a>;
- in [<a href='refs.html#ref-CSS2'>CSS2</a>], chapter 4 and appendix D.)</li>
- <li>Allowable data types. (The normative reference is <a
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html">CSS2 syntax
- and basic data types</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>], chapter 4), with the exception that SVG
- length and angle values without a unit identifier. See <a
- href="coords.html#Units">Units</a>.)</li>
- <li><a href="styling.html#Inheritance">Inheritance
- rules</a>.</li>
- <li>The color keywords from CSS2 that correspond to the
- colors used by objects in the user's environment. (The
- normative reference is
- <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors">CSS2
- system colors</a>; in [<a href='refs.html#ref-CSS2'>CSS2</a>], section 18.2.)</li>
- <li>For implementations that support CSS styling of SVG
- content, then that styling must be compatible with various
- other rules in CSS. (See <a
- href="styling.html#StylingWithCSS">Styling with
- CSS</a>.)</li>
- </ul>
+<p>Property declarations via <a>presentation attributes</a> are expressed in XML [<a
+href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>], which is
+case-sensitive. CSS property declarations specified either in
+CSS style sheets or in a <a>'style attribute'</a> attribute, on the other
+hand, are <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#q4">generally case-insensitive with some exceptions</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], section 4.1.3).</p>
- <h2 id='ReferencingExternalStyleSheets'>Referencing external style sheets</h2>
- <p>External style sheets are referenced using the mechanism
- documented in <a href="http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/"><cite>Associating Style Sheets with XML documents Version 1.0</cite></a>
- [<a href="refs.html#ref-XML-SS">XML-SS</a>].</p>
-
- <h2 id='StyleElement'>The <span class="element-name">'style'</span>
- element</h2>
+<p>Because presentation attributes are expressed as XML
+attributes, presentation attributes are case-sensitive and must
+match the exact name as specified in the <a href='svgdtd.html'>DTD</a>
+(see the <code>SVG.Presentation.attrib</code> entity in the DTD,
+which expands to all of the presentation attributes).
+When using a presentation attribute to specify a value for the
+<a>'fill'</a> property, the presentation attribute must be
+be specified as <span class='attr-value'>fill="…"</span> and not
+<span class='attr-value'>fill="…"</span> or <span class='attr-value'>Fill="…"</span>. Keyword
+values, such as <span class='attr-value'>italic</span> in
+<span class='attr-value'>font-style="italic"</span>,
+are also case-sensitive and must be specified using the exact
+case used in the specification which defines the given keyword.
+For example, the keyword <span class='attr-value'>sRGB</span>
+must have lowercase "s" and uppercase "RGB".</p>
- <div class="annotation">
- <p>
- SVG2 Requirement: Add HTML5 style-element attributes to SVG's style element
- </p>
- <p>
- Resolution: SVG 2 style element shall be aligned with the HTML5 style element
- </p>
- <p>
- <a href="http://www.w3.org/2011/10/28-svg-irc#T18-45-45">Pre-TPAC F2F Day 2</a>.
- </p>
- <p>
- Purpose: To not surprise authors with different behaviour for the style element in HTML and SVG content.
- </p>
- <p>
- Owner: Cameron (ACTION-3277)
- </p>
- </div>
+<p>Property declarations within CSS style sheets or in a
+<a>'style attribute'</a> attribute must only conform to CSS rules, which are generally
+more lenient with regard to case sensitivity. However, to
+promote consistency across the different ways for expressing
+styling properties, it is strongly recommended that authors use
+the exact property names (usually, lowercase letters and
+hyphens) as defined in the relevant specification and express
+all keywords using the same case as is required by presentation
+attributes and not take advantage of CSS's ability to ignore
+case.</p>
- <p>The <a>'style element'</a> element allows
- style sheets to be embedded directly within SVG content. SVG's <a>'style element'</a> element has the same
- attributes as the corresponding element in HTML (see <a
- href="http://www.w3.org/TR/1999/REC-html401-19991224/present/styles.html#h-14.2.3">
- HTML's <span class="attr-name">'style'</span> element</a>).</p>
+<div class="annotation">
+ <p>SVG2 Requirement: Consider relaxing case sensitivity of presentation attribute values</p>
+ <p>Resolution: We will make property values case insensitive</p>
+ <p><a href="http://www.w3.org/2011/10/28-svg-irc#T16-40-11">Pre-TPAC F2F Day 2</a>.</p>
+ <p>Purpose: To make presentation attribute syntax parsing be the same as parsing for the corresponding CSS property</p>
+ <p>Owner: Cameron (ACTION-3276)</p>
+</div>
- <edit:elementsummary name='style'/>
+<h2 id='SVGUseOfCSS'>Facilities from CSS and XSL used by SVG</h2>
+
+<p>SVG shares various relevant properties and approaches common
+to CSS and XSL, plus the semantics of many of the processing
+rules.</p>
+
+<p>SVG shares the following facilities with CSS and XSL:</p>
+
+<ul>
+ <li>Shared properties. Many of SVG's properties are shared
+ between CSS2, XSL and SVG. (See <a
+ href="styling.html#PropertiesFromCSS2">list of shared
+ properties</a>).</li>
+
+ <li>Syntax rules. (The normative references are
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html">CSS2 syntax and basic data types</a>
+ and <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/grammar.html">The grammar of CSS2</a>;
+ in [<a href='refs.html#ref-CSS2'>CSS2</a>], chapter 4 and appendix D.)</li>
+
+ <li>Allowable data types. (The normative reference is <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html">CSS2 syntax
+ and basic data types</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>], chapter 4), with the exception that SVG
+ length and angle values without a unit identifier. See <a
+ href="coords.html#Units">Units</a>.)</li>
+
+ <li><a href="styling.html#Inheritance">Inheritance
+ rules</a>.</li>
+
+ <li>The color keywords from CSS2 that correspond to the
+ colors used by objects in the user's environment. (The
+ normative reference is
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors">CSS2
+ system colors</a>; in [<a href='refs.html#ref-CSS2'>CSS2</a>], section 18.2.)</li>
+
+ <li>For implementations that support CSS styling of SVG
+ content, then that styling must be compatible with various
+ other rules in CSS. (See <a
+ href="styling.html#StylingWithCSS">Styling with
+ CSS</a>.)</li>
+</ul>
+
+<h2 id='ReferencingExternalStyleSheets'>Referencing external style sheets</h2>
+
+<p>External style sheets are referenced using the mechanism
+documented in <a href="http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/"><cite>Associating Style Sheets with XML documents Version 1.0</cite></a>
+[<a href="refs.html#ref-XML-SS">XML-SS</a>].</p>
+
+<h2 id='StyleElement'>The <span class="element-name">'style'</span> element</h2>
+
+<div class="annotation">
+ <p>SVG2 Requirement: Add HTML5 style-element attributes to SVG's style element</p>
+ <p>Resolution: SVG 2 style element shall be aligned with the HTML5 style element</p>
+ <p><a href="http://www.w3.org/2011/10/28-svg-irc#T18-45-45">Pre-TPAC F2F Day 2</a>.</p>
+ <p>Purpose: To not surprise authors with different behaviour for the style element in HTML and SVG content.</p>
+ <p>Owner: Cameron (ACTION-3277)</p>
+</div>
+
+<p>The <a>'style element'</a> element allows
+style sheets to be embedded directly within SVG content. SVG's <a>'style element'</a> element has the same
+attributes as the corresponding element in HTML (see <a
+href="http://www.w3.org/TR/1999/REC-html401-19991224/present/styles.html#h-14.2.3">
+HTML's <span class="attr-name">'style'</span> element</a>).</p>
+
+<edit:elementsummary name='style'/>
<div class="adef-list">
<p>Attribute definitions:</p>
@@ -729,20 +774,21 @@
no.</span></dd>
</dl>
</div>
- <p>The syntax of style data depends on the style sheet
- language.</p>
- <p>Some style sheet languages might allow a wider variety of
- rules in the <a>'style element'</a> element
- than in the <a>'style attribute'</a>. For example, with
- CSS, rules can be declared within a <a>'style element'</a> element that cannot be
- declared within a <a>'style attribute'</a>
- attribute.</p>
- <p>An example showing the <a>'style element'</a> element is provided above
- (see <a
- href="styling.html#StyleElementExample">example</a>).</p>
- <h2 id='ClassAttribute'>The <span class="attr-name">'class'</span>
- attribute</h2>
+<p>The syntax of style data depends on the style sheet language.</p>
+
+<p>Some style sheet languages might allow a wider variety of
+rules in the <a>'style element'</a> element
+than in the <a>'style attribute'</a>. For example, with
+CSS, rules can be declared within a <a>'style element'</a> element that cannot be
+declared within a <a>'style attribute'</a>
+attribute.</p>
+<p>An example showing the <a>'style element'</a> element is provided above
+(see <a
+href="styling.html#StyleElementExample">example</a>).</p>
+
+<h2 id='ClassAttribute'>The <span class="attr-name">'class'</span> attribute</h2>
+
<div class="adef-list">
<p>Attribute definitions:</p>
<dl>
@@ -756,20 +802,25 @@
yes.</span></dd>
</dl>
</div>
- <p>The <a>'class'</a> 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 <a>'class'</a> attribute has several
- roles:</p>
- <ul>
- <li>As a style sheet selector (when an author wishes to
- assign style information to a set of elements).</li>
- <li>For general purpose processing by user agents.</li>
- </ul>
- <p>In the following example, the <a>'text'</a> element is used in
- conjunction with the <a>'class'</a>
- attribute to markup document messages. Messages appear in both
- English and French versions.</p>
+
+<p>The <a>'class'</a> 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 <a>'class'</a> attribute has several
+roles:</p>
+
+<ul>
+ <li>As a style sheet selector (when an author wishes to
+ assign style information to a set of elements).</li>
+
+ <li>For general purpose processing by user agents.</li>
+</ul>
+
+<p>In the following example, the <a>'text'</a> element is used in
+conjunction with the <a>'class'</a>
+attribute to markup document messages. Messages appear in both
+English and French versions.</p>
+
<pre>
<!-- English messages -->
<text class="info" lang="en">Variable declared twice</text>
@@ -780,29 +831,31 @@
<text class="warning" lang="fr">Variable indéfinie</text>
<text class="error" lang="fr">Erreur de syntaxe pour variable</text>
</pre>
- <p>In an SVG user agent that supports <a
- href="styling.html">CSS styling</a>, 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:</p>
+
+<p>In an SVG user agent that supports <a
+href="styling.html">CSS styling</a>, 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:</p>
+
<pre>
text.info { color: green }
text.warning { color: yellow }
text.error { color: red }
</pre>
- <h2 id='StyleAttribute'>The <span class="attr-name">'style'</span>
- attribute</h2>
- <p>The <a>'style attribute'</a> attribute allows
- per-element style rules to be specified directly on a given
- element. When CSS styling is used, CSS inline style is
- specified by including semicolon-separated property
- declarations of the form "name : value" within the <a>'style attribute'</a> attribute.
- Property declarations must follow CSS style rules thus CSS defined
- <a>properties</a> (e.g. 'font-size') when having a
- <length> value must include a unit (for non-zero
- values). See <a href="styling.html#SVGStylingProperties">SVG's
- styling properties</a> for a list of CSS defined properties.</p>
+<h2 id='StyleAttribute'>The <span class="attr-name">'style'</span> attribute</h2>
+
+<p>The <a>'style attribute'</a> attribute allows
+per-element style rules to be specified directly on a given
+element. When CSS styling is used, CSS inline style is
+specified by including semicolon-separated property
+declarations of the form "name : value" within the <a>'style attribute'</a> attribute.
+Property declarations must follow CSS style rules thus CSS defined
+<a>properties</a> (e.g. 'font-size') when having a
+<length> value must include a unit (for non-zero
+values). See <a href="styling.html#SVGStylingProperties">SVG's
+styling properties</a> for a list of CSS defined properties.</p>
<div class="adef-list">
<p>Attribute definitions:</p>
@@ -819,19 +872,22 @@
no.</span></dd>
</dl>
</div>
- <p>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 <a>'style element'</a> element to regroup that
- information. For optimal flexibility, authors should define
- styles in external style sheets.</p>
- <p>An example showing the <a>'style attribute'</a>
- attribute is provided above (see <a
- href="styling.html#StyleAttributeExample">example</a>).</p>
- <h2 id='DefaultStyleSheetLanguage'>Specifying the default style sheet language</h2>
- <p>The <a>'contentStyleType'</a> attribute on the <a>'svg'</a> element
- specifies the default style sheet language for the given document
- fragment.</p>
+<p>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 <a>'style element'</a> element to regroup that
+information. For optimal flexibility, authors should define
+styles in external style sheets.</p>
+<p>An example showing the <a>'style attribute'</a>
+attribute is provided above (see <a
+href="styling.html#StyleAttributeExample">example</a>).</p>
+
+<h2 id='DefaultStyleSheetLanguage'>Specifying the default style sheet language</h2>
+
+<p>The <a>'contentStyleType'</a> attribute on the <a>'svg'</a> element
+specifies the default style sheet language for the given document
+fragment.</p>
+
<div class="adef-list">
<dl>
<dt id="ContentStyleTypeAttribute"><span
@@ -850,149 +906,176 @@
href="animate.html#Animatable">Animatable</a>:
no.</span></dd>
</dl>
- <p>Since the only widely deployed language used for inline styling (in style elements and style attributes) is CSS, and since that is already the default language if contentStyleType is omitted, in practice contentStyleType is not well supported in user agents. XSL style sheets are typically external. If a new style sheet language becomes popular, it might not use style attributes and could easily declare which language is in use with the type attribute on the style element. </p>
- <p>The use of contentStyleType is therefore deprecated; new content should not use it. Future versions of the SVG specification may remove contentStyleType. </p>
-
</div>
- <h2 id='Inheritance'>Property inheritance</h2>
- <p>Whether or not the user agent supports CSS, property
- inheritance in SVG follows the property inheritance rules
- defined in the CSS2 specification. The normative definition for
- property inheritance is the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#inheritance">Inheritance</a> section
- of the CSS2 specification ([<a href="refs.html#ref-CSS2">CSS2</a>], section 6.2).</p>
- <p>The definition of each property indicates whether the
- property can inherit the value of its parent.</p>
- <p>In SVG, as in CSS2, most elements inherit
- <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#computed-value'>computed values</a>
- ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 6.1.2).
- For cases where something other than
- computed values are inherited, the property definition will
- describe the inheritance rules. For <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#specified-value'>specified values</a>
- ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 6.1.1)
- which are expressed in user units, in
- pixels (e.g., <span class='attr-value'>20px</span>) or in absolute values,
- the computed value equals the specified
- value. For specified values which use certain relative units
- (i.e., <em>em</em>, <em>ex</em> 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 <a>'font-size'</a> of
- <span class='attr-value'>10pt</span> and the current
- element has a <a>'font-size'</a> of <span class='attr-value'>120%</span>,
- then the computed value for <a>'font-size'</a> on the current element
- will be <span class='attr-value'>12pt</span>. 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.</p>
- <p>Note that SVG has some facilities wherein a property which
- is specified on an ancestor element might effect its descendant
- element, even if the descendant element has a different
- assigned value for that property. For example, if a <a>'clip-path property'</a>
- property is specified on an ancestor element, and the current element has a
- <a>'clip-path property'</a> of <span class="prop-value">none</span>, the
- ancestor's clipping path
- still applies to the current element because the semantics of
- SVG state that the clipping path used on a given element is the
- intersection of all clipping paths specified on itself and all
- ancestor elements. The key concept is that property assignment
- (with possible property inheritance) happens first. After
- properties values have been assigned to the various elements,
- then the user agent applies the semantics of each assigned
- property, which might result in the property assignment of an
- ancestor element affecting the rendering of its
- descendants.</p>
- <h2 id='Scope'>The scope/range of styles</h2>
- <p>The following define the scope/range of style sheets:</p>
- <dl>
- <dt>Stand-alone SVG document</dt>
- <dd>There is one parse tree. Style sheets defined anywhere
- within the SVG document (in style elements or style
- attributes, or in external style sheets linked with the style
- sheet processing instruction) apply across the entire SVG
- document.</dd>
- <dt>Stand-alone SVG document embedded in an HTML or
- XML document with the <span class='element-name'>'img'</span>,
- <span class='element-name'>'object'</span> (HTML) or
- <a>'image'</a> (SVG) elements</dt>
- <dd>There are two completely separate parse trees; one for
- the referencing document (perhaps HTML or XHTML), and one for
- the SVG document. Style sheets defined anywhere within the
- referencing document (in style elements or style attributes,
- or in external style sheets linked with the style sheet
- processing instruction) apply across the entire referencing
- document but have no effect on the referenced SVG document.
- Style sheets defined anywhere within the referenced SVG
- document (in style elements or style attributes, or in
- external style sheets linked with the style sheet processing
- instruction) apply across the entire SVG document, but do not
- affect the referencing document (perhaps HTML or XHTML). To
- get the same styling across both the [X]HTML document and the
- SVG document, link them both to the same style sheet.</dd>
- <dt>Stand-alone SVG content textually included in an
- XML document</dt>
- <dd>There is a single parse tree, using multiple namespaces;
- one or more subtrees are in the SVG namespace. Style sheets
- defined anywhere within the XML document (in style elements
- or style attributes, or in external style sheets linked with
- the style sheet processing instruction) apply across the
- entire document, including those parts of it in the SVG
- namespace. To get different styling for the SVG part, use the
- <a>'style attribute'</a> attribute, or put an <a>'id'</a> on the <a>'svg'</a> element and use
- contextual CSS selectors, or use XSL selectors.</dd>
- </dl>
+<p>Since the only widely deployed language used for inline styling (in style
+elements and style attributes) is CSS, and since that is already the default
+language if <a>'contentStyleType'</a> is omitted, in practice <a>'contentStyleType'</a> is not well
+supported in user agents. XSL style sheets are typically external. If a new
+style sheet language becomes popular, it might not use style attributes and could
+easily declare which language is in use with the type attribute on the style element.</p>
- <h2 id='UAStyleSheet'>User agent style sheet</h2>
- <p>The user agent shall maintain a
- <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#cascade'>user agent style sheet</a>
- ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 6.4)
- for elements in the SVG namespace for
- <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group'>visual media</a>
- ([<a href="refs.html#ref-CSS2">CSS2</a>], section 7.3.1).
- The user agent 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:</p>
+<p>The use of <a>'contentStyleType'</a> is therefore deprecated; new content
+should not use it. Future versions of the SVG specification may remove
+<a>'contentStyleType'</a>.</p>
+
+<p class='issue'>We should probably do that.</p>
+
+<h2 id='Inheritance'>Property inheritance</h2>
+
+<p>Whether or not the user agent supports CSS, property
+inheritance in SVG follows the property inheritance rules
+defined in the CSS2 specification. The normative definition for
+property inheritance is the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#inheritance">Inheritance</a> section
+of the CSS2 specification ([<a href="refs.html#ref-CSS2">CSS2</a>], section 6.2).</p>
+
+<p>The definition of each property indicates whether the
+property can inherit the value of its parent.</p>
+
+<p>In SVG, as in CSS2, most elements inherit
+<a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#computed-value'>computed values</a>
+([<a href='refs.html#ref-CSS2'>CSS2</a>], section 6.1.2).
+For cases where something other than
+computed values are inherited, the property definition will
+describe the inheritance rules. For <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#specified-value'>specified values</a>
+([<a href='refs.html#ref-CSS2'>CSS2</a>], section 6.1.1)
+which are expressed in user units, in
+pixels (e.g., <span class='attr-value'>20px</span>) or in absolute values,
+the computed value equals the specified
+value. For specified values which use certain relative units
+(i.e., <em>em</em>, <em>ex</em> 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 <a>'font-size'</a> of
+<span class='attr-value'>10pt</span> and the current
+element has a <a>'font-size'</a> of <span class='attr-value'>120%</span>,
+then the computed value for <a>'font-size'</a> on the current element
+will be <span class='attr-value'>12pt</span>. 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.</p>
+
+<p>Note that SVG has some facilities wherein a property which
+is specified on an ancestor element might effect its descendant
+element, even if the descendant element has a different
+assigned value for that property. For example, if a <a>'clip-path property'</a>
+property is specified on an ancestor element, and the current element has a
+<a>'clip-path property'</a> of <span class="prop-value">none</span>, the
+ancestor's clipping path
+still applies to the current element because the semantics of
+SVG state that the clipping path used on a given element is the
+intersection of all clipping paths specified on itself and all
+ancestor elements. The key concept is that property assignment
+(with possible property inheritance) happens first. After
+properties values have been assigned to the various elements,
+then the user agent applies the semantics of each assigned
+property, which might result in the property assignment of an
+ancestor element affecting the rendering of its
+descendants.</p>
+
+<h2 id='Scope'>The scope/range of styles</h2>
+
+<p>The following define the scope/range of style sheets:</p>
+
+<dl>
+ <dt>Stand-alone SVG document</dt>
+ <dd>There is one parse tree. Style sheets defined anywhere
+ within the SVG document (in style elements or style
+ attributes, or in external style sheets linked with the style
+ sheet processing instruction) apply across the entire SVG
+ document.</dd>
+
+ <dt>Stand-alone SVG document embedded in an HTML or
+ XML document with the <span class='element-name'>'img'</span>,
+ <span class='element-name'>'object'</span> (HTML) or
+ <a>'image'</a> (SVG) elements</dt>
+ <dd>There are two completely separate parse trees; one for
+ the referencing document (perhaps HTML or XHTML), and one for
+ the SVG document. Style sheets defined anywhere within the
+ referencing document (in style elements or style attributes,
+ or in external style sheets linked with the style sheet
+ processing instruction) apply across the entire referencing
+ document but have no effect on the referenced SVG document.
+ Style sheets defined anywhere within the referenced SVG
+ document (in style elements or style attributes, or in
+ external style sheets linked with the style sheet processing
+ instruction) apply across the entire SVG document, but do not
+ affect the referencing document (perhaps HTML or XHTML). To
+ get the same styling across both the [X]HTML document and the
+ SVG document, link them both to the same style sheet.</dd>
+
+ <dt>Stand-alone SVG content textually included in an
+ XML document</dt>
+ <dd>There is a single parse tree, using multiple namespaces;
+ one or more subtrees are in the SVG namespace. Style sheets
+ defined anywhere within the XML document (in style elements
+ or style attributes, or in external style sheets linked with
+ the style sheet processing instruction) apply across the
+ entire document, including those parts of it in the SVG
+ namespace. To get different styling for the SVG part, use the
+ <a>'style attribute'</a> attribute, or put an <a>'id'</a> on the <a>'svg'</a> element and use
+ contextual CSS selectors, or use XSL selectors.</dd>
+</dl>
+
+<h2 id='UAStyleSheet'>User agent style sheet</h2>
+
+<p>The user agent shall maintain a
+<a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#cascade'>user agent style sheet</a>
+([<a href='refs.html#ref-CSS2'>CSS2</a>], section 6.4)
+for elements in the SVG namespace for
+<a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group'>visual media</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], section 7.3.1).
+The user agent 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:</p>
+
<pre>
svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }
</pre>
- <p>The first line of the above user agent style sheet will
- cause the <a href="masking.html#InitialClippingPath">initial
- clipping path</a> to be established at the bounds of the <a
- href="coords.html#SVGViewport">initial viewport</a>.
- Furthermore, it will cause new clipping paths to be established
- at the bounds of the listed elements, all of which are <a
- href="coords.html#ElementsThatEstablishViewports">elements that
- establish a new viewport</a>. (Refer to the description of
- SVG's use of the <a>'overflow'</a> property for more
- information.)</p>
- <p>The second line of the above user agent style sheet will
- cause the <a>'svg/width'</a> and <a>'svg/height'</a>
- attributes on the <a>'svg'</a> element to be used as the
- default values for the <span class="property"><a
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#propdef-width">
- 'width'</a></span> and <span class="property"><a
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#propdef-height">
- 'height'</a></span> properties during <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html'>layout</a>
- ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 9).</p>
- <h2 id='AuralStyleSheets'>Aural style sheets</h2>
- <p>For the purposes of aural media, SVG represents a stylable
- XML grammar. In user agents that support CSS aural style
- sheets, <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html'>aural style properties</a>
- ([<a href='refs.html#ref-CSS2'>CSS2</a>], chapter 19)
- can be applied as defined in CSS2.</p>
- <p>Aural style properties can be applied to any SVG element
- that can contain character data content, including
- <a>'desc'</a>
- <a>'title'</a>
- <a>'tspan'</a>,
- <a>'tref'</a>,
- <a>'altGlyph'</a> and
- <a>'textPath'</a>.
- On user agents that support aural style sheets, the following CSS2
- properties can be applied:</p>
+
+<p>The first line of the above user agent style sheet will
+cause the <a href="masking.html#InitialClippingPath">initial
+clipping path</a> to be established at the bounds of the <a
+href="coords.html#SVGViewport">initial viewport</a>.
+Furthermore, it will cause new clipping paths to be established
+at the bounds of the listed elements, all of which are <a
+href="coords.html#ElementsThatEstablishViewports">elements that
+establish a new viewport</a>. (Refer to the description of
+SVG's use of the <a>'overflow'</a> property for more
+information.)</p>
+
+<p>The second line of the above user agent style sheet will
+cause the <a>'svg/width'</a> and <a>'svg/height'</a>
+attributes on the <a>'svg'</a> element to be used as the
+default values for the <span class="property"><a
+href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#propdef-width">
+'width'</a></span> and <span class="property"><a
+href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#propdef-height">
+'height'</a></span> properties during <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html'>layout</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 9).</p>
+
+<h2 id='AuralStyleSheets'>Aural style sheets</h2>
+
+<p>For the purposes of aural media, SVG represents a stylable
+XML grammar. In user agents that support CSS aural style
+sheets, <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html'>aural style properties</a>
+([<a href='refs.html#ref-CSS2'>CSS2</a>], chapter 19)
+can be applied as defined in CSS2.</p>
+
+<p>Aural style properties can be applied to any SVG element
+that can contain character data content, including
+<a>'desc'</a>
+<a>'title'</a>
+<a>'tspan'</a>,
+<a>'tref'</a>,
+<a>'altGlyph'</a> and
+<a>'textPath'</a>.
+On user agents that support aural style sheets, the following CSS2
+properties can be applied:</p>
+
<table class='vert' summary="aural styling properties">
<tr>
<th>Aural property</th>
@@ -1079,15 +1162,16 @@
<td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-volume">Section 19.2</a></td>
</tr>
</table>
- <p>For user agents that support aural style sheets and also
- support <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/'>DOM Level 2 Core</a>
- [<a href="refs.html#ref-DOM2">DOM2</a>], the user agent is required to
- support the DOM interfaces defined in
- <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html'>Document Object Model CSS</a>
- ([<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>], chapter 2)
- that correspond to aural properties.
- (See <a href="svgdom.html#RelationshipWithCSSOM">Relationship
- with DOM2 CSS object model</a>.)</p>
+
+<p>For user agents that support aural style sheets and also
+support <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/'>DOM Level 2 Core</a>
+[<a href="refs.html#ref-DOM2">DOM2</a>], the user agent is required to
+support the DOM interfaces defined in
+<a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html'>Document Object Model CSS</a>
+([<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>], chapter 2)
+that correspond to aural properties.
+(See <a href="svgdom.html#RelationshipWithCSSOM">Relationship
+with DOM2 CSS object model</a>.)</p>
<h2 id="DOMInterfaces">DOM interfaces</h2>