Seed the SVG 2 repository with the current SVG 1.1 2nd Edition files. See the following lines for more. r=WG.
The content of this initial commit should be virtually identical to the files in SVG 1.1 2nd Edition except as noted here:
Intentionally completely GONE:
master/.cvsignore <-- now using a .hgignore in the parent directory
master/.placeholder <-- not needed
master/DTD <-- not using DTDs in SVG 2
master/Makefile <-- will move to parent directory in next commit
master/build.pl <-- replaced by build.py in new 'tools' repo
master/images/types <-- was empty in CVS
master/relaxng <-- content is for 2.0/Tiny? (We can always add it later)
master/svgdtd.html <-- not using DTDs in SVG 2
Intentionally GONE because these are generated, and NOT to be committed!!
publish
master/idl.zip
master/images/implnote/arcs/imageXXX.png
master/images/implnote/arcs/imageXXX.svg
master/java-binding.zip
master/xhtml11-flat.dtd
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/Makefile Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,29 @@
+# Makefile for SVG 1.1 Second Edition.
+
+all :
+ $(MAKE) -C images/implnote/arcs/
+ @./build.pl
+
+pdf : all
+ prince --no-author-style -s ../publish/style/svg-style.css -s http://www.w3.org/StyleSheets/TR/W3C-REC -s ../publish/style/svg-style-print.css ../publish/single-page.html -o ../publish/single-page.pdf
+
+ZIPDIR=REC-SVG11-20110802
+
+zip : all
+ rm -rf ../publish/$(ZIPDIR) ../publish/$(ZIPDIR).zip
+ mkdir -p ../publish/$(ZIPDIR)/style
+ cp ../publish/*.html ../publish/$(ZIPDIR)
+ rm ../publish/$(ZIPDIR)/single-page.html
+ cp ../publish/style/svg-style{,-extra}.css ../publish/$(ZIPDIR)/style/
+ wget -O ../publish/$(ZIPDIR)/style/W3C-REC.css http://www.w3.org/StyleSheets/TR/W3C-REC.css
+ wget -O ../publish/$(ZIPDIR)/style/logo-REC.png http://www.w3.org/StyleSheets/TR/logo-REC.png
+ perl -i -pe 's{http://www.w3.org/StyleSheets/TR/logo-REC}{logo-REC.png}' ../publish/$(ZIPDIR)/style/W3C-REC.css
+ perl -i -pe 's{http://www.w3.org/StyleSheets/TR/W3C-REC}{style/W3C-REC.css}' ../publish/$(ZIPDIR)/*.html
+ cp -a ../publish/images ../publish/$(ZIPDIR)/
+ find ../publish/$(ZIPDIR)/images/ -name CVS | xargs rm -rf
+ cd ../publish/ && zip -r $(ZIPDIR).zip $(ZIPDIR)
+ rm -rf ../publish/$(ZIPDIR)
+
+clean :
+ $(MAKE) -C images/implnote/arcs/ clean
+ @./build.pl -c
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/access.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Accessibility Support</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Accessibility Support</h1>
+
+<p class="normativity"><em>This appendix is informative, not normative.</em></p>
+
+<h2 id="AccessibilityAndSVG">WAI Accessibility Guidelines</h2>
+
+ <p>This appendix explains how accessibility guidelines
+ published by W3C's Web Accessibility Initiative (WAI) apply to
+ SVG.</p>
+ <ol>
+ <li>The <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/"><cite>Web Content Accessibility Guidelines (WCAG) 2.0</cite></a>
+ [<a href="refs.html#ref-WCAG2">WCAG2</a>]
+ explains how authors can create Web content that is
+ accessible to people with disabilities.</li>
+ <li>The <a href="http://www.w3.org/TR/2000/REC-ATAG10-20000203/"><cite>Authoring Tool Accessibility Guidelines 1.0</cite></a>
+ [<a href="refs.html#ref-ATAG">ATAG</a>] explains how
+ developers can design accessible authoring tools such as SVG
+ authoring tools. <a
+ href="conform.html#ConformingSVGGenerators">To conform to the
+ SVG specification</a>, an SVG authoring tool must conform to
+ ATAG (priority 1). SVG support for element <a
+ href="struct.html#Groups">grouping</a> and <a
+ href="struct.html#UseElement">reuse</a> is relevant to
+ designing accessible SVG authoring tools.</li>
+ <li>The <a href="http://www.w3.org/TR/2002/REC-UAAG10-20021217/"><cite>User Agent Accessibility Guidelines 1.0</cite></a>
+ [<a href="refs.html#ref-UAAG">UAAG</a>] explains how
+ developers can design accessible user agents such as
+ SVG-enabled browsers. To conform to the SVG specification, an
+ SVG user agent should conform to UAAG. SVG support for
+ scaling, style sheets, the DOM, and metadata are all relevant
+ to designing accessible SVG user agents.</li>
+ </ol>
+ <p>The W3C Note <a href="http://www.w3.org/TR/2000/NOTE-SVG-access-20000807/"><cite>Accessibility Features of SVG</cite></a>
+ [<a href="refs.html#ref-SVG-ACCESS">SVG-ACCESS</a>]
+ explains in detail how the requirements of the three guidelines
+ apply to SVG.</p>
+
+<h2 id="SVGAccessibilityGuidelines">SVG Content Accessibility Guidelines</h2>
+
+ <p>This section explains briefly how authors can create
+ accessible SVG documents; it summarizes <a href="http://www.w3.org/TR/2000/NOTE-SVG-access-20000807/"><cite>Accessibility Features of SVG</cite></a>
+ [<a href="refs.html#ref-SVG-ACCESS">SVG-ACCESS</a>].</p>
+ <dl>
+ <dt><span class="gl">Provide text equivalents for
+ graphics.</span></dt>
+ <dd>
+ <ul>
+ <li>When the text content of a graphic (e.g., in a
+ <a>'text'</a> element) explains its function, no text
+ equivalent is required. Use the <a>'title'</a> child element
+ to explain the function of <a>'text'</a> elements whose meaning
+ is not clear from their text content.</li>
+ <li>When a graphic does not include explanatory text
+ content, it requires a text equivalent. If the equivalent
+ is complex, use the <a>'desc'</a> element, otherwise
+ use the <a>'title'</a> child element.</li>
+ <li>If a graphic is built from meaningful parts, build
+ the description from meaningful parts.</li>
+ </ul>
+ </dd>
+ <dt><span class="gl">Do not rely on color alone.</span></dt>
+ <dd>
+ <ul>
+ <li>Do not use color alone to convey information.</li>
+ <li>Ensure adequate color contrast. Use style sheets so
+ that users who require certain color combinations may
+ apply them through user style sheets.</li>
+ </ul>
+ </dd>
+ <dt><span class="gl">Use markup and style sheets and do so
+ properly.</span></dt>
+ <dd>
+ <ul>
+ <li>Represent text as character data, not as images or
+ curves. Style text with fonts. Authors may describe their
+ own fonts in SVG.</li>
+ <li>Separate structure from presentation.</li>
+ <li>Use the <a>'g'</a> element and rich
+ descriptions to structure SVG documents. Reuse named
+ objects.</li>
+ <li>Publish highly-structured documents, not just
+ graphical representations. Documents that are rich in
+ structure may be rendered graphically, as speech, or as
+ braille. For example, express mathematical relationships
+ in <a href="http://www.w3.org/TR/2001/REC-MathML2-20010221/">MathML</a>
+ [<a href="refs.html#ref-MATHML">MATHML</a>] and use
+ SVG for explanatory graphics.</li>
+ <li>Author documents that validate to the SVG
+ grammar.</li>
+ <li>Use style sheets to specify graphical and aural
+ presentation.</li>
+ <li>Use relative units in style sheets.</li>
+ </ul>
+ </dd>
+ <dt><span class="gl">Clarify natural language
+ usage.</span></dt>
+ <dd>
+ <ul>
+ <li>Use <a>'xml:lang'</a> to identify the
+ natural language of content and changes in natural
+ language.</li>
+ </ul>
+ </dd>
+ <dt><span class="gl">Ensure that dynamic content is
+ accessible.</span></dt>
+ <dd>
+ <ul>
+ <li>Ensure that text equivalents for dynamic content are
+ updated when the dynamic content changes.</li>
+ <li>Ensure that SVG documents are usable when scripts or
+ other programmatic objects are turned off or not
+ supported.</li>
+ </ul>
+ </dd>
+ </dl>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/animate.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,2448 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Animation</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Animation</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+ <p>Because the Web is a dynamic medium, SVG supports the
+ ability to change vector graphics over time. SVG content can be
+ animated in the following ways:</p>
+ <ul>
+ <li>Using SVG's <a href="#AnimationElements">animation elements</a>.
+ SVG document fragments can describe time-based modifications
+ to the document's elements. Using the various animation
+ elements, you can define motion paths, fade-in or fade-out
+ effects, and objects that grow, shrink, spin or change
+ color.</li>
+ <li>Using the <a href="svgdom.html">SVG DOM</a>. The SVG DOM
+ conforms to key aspects of the <a href="http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/"><cite>Document Object Model (DOM)
+ Level 1</cite></a> [<a
+ href="refs.html#ref-DOM1">DOM1</a>] and
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/"><cite>Document Object Model (DOM) Level 2</cite></a>
+ [<a href="refs.html#ref-DOM2">DOM2</a>]
+ specifications. Every attribute and style sheet setting is
+ accessible to scripting, and SVG offers a set of additional
+ DOM interfaces to support efficient animation via scripting.
+ As a result, virtually any kind of animation can be achieved.
+ The timer facilities in scripting languages such as
+ ECMAScript can be used to start up and control the
+ animations [<a href="refs.html#ref-ECMA-262">ECMA-262</a>].
+ (See <a href="#DOMAnimationExample">example</a> below.)</li>
+ <li>SVG has been designed to allow
+ <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">SMIL</a> [<a href="refs.html#ref-SMIL">SMIL</a>] to use
+ animated or static SVG content as media components.</li>
+ </ul>
+
+<h2 id="AnimationElements">Animation elements</h2>
+
+<h3 id="AnimationElementsIntro">Overview</h3>
+
+ <p>SVG's animation elements were developed in collaboration
+ with the W3C Synchronized Multimedia (SYMM) Working Group,
+ developers of the <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/"><cite>Synchronized Multimedia Integration Language
+ (SMIL) 3.0 Specification</cite></a> [<a href="refs.html#ref-SMIL">SMIL</a>].</p>
+ <p>The SYMM Working Group, in collaboration with the SVG
+ Working Group, has authored the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation specification</cite></a>
+ [<a href="refs.html#ref-SMILANIM">SMILANIM</a>],
+ which represents a general-purpose XML animation feature set.
+ SVG incorporates the animation features defined in the SMIL
+ Animation specification and provides some SVG-specific
+ extensions.</p>
+ <p>For an introduction to the approach and features available
+ in any language that supports SMIL Animation, see
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationFramework">SMIL Animation overview</a>
+ and <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationModel">SMIL Animation animation model</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], sections 2 and 3). For the list of animation
+ features which go beyond SMIL Animation, see
+ <a href="animate.html#SVGExtensionsToSMILAnimation">SVG extensions to SMIL Animation</a>.</p>
+
+<h3 id="RelationshipToSMILAnimation">Relationship to SMIL Animation</h3>
+
+ <p>SVG is a host language in terms of SMIL Animation and
+ therefore introduces additional constraints and features as
+ permitted by that specification. Except for any SVG-specific
+ rules explicitly mentioned in this specification, the normative
+ definition for SVG's animation elements and attributes is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>].</p>
+ <p>SVG supports the following four animation elements which are
+ defined in the SMIL Animation specification:</p>
+ <table class='vert offset' summary="animation elements from SMIL Animation">
+ <tr>
+ <td><a>'animate'</a></td>
+ <td>allows scalar attributes and properties to be assigned
+ different values over time</td>
+ </tr>
+ <tr>
+ <td><a>'set'</a></td>
+ <td>a convenient shorthand for <a>'animate'</a>, which is useful for
+ assigning animation values to non-numeric attributes and
+ properties, such as the <a>'visibility'</a> property</td>
+ </tr>
+ <tr>
+ <td><a>'animateMotion'</a></td>
+ <td>moves an element along a motion path</td>
+ </tr>
+ <tr>
+ <td><a>'animateColor'</a></td>
+ <td>modifies the color value of particular attributes or
+ properties over time</td>
+ </tr>
+ </table>
+
+ <p>Although SVG defines <a>'animateColor'</a>, its use is deprecated in
+ favor of simply using the <a>'animate'</a> element to target properties
+ that can take color values.</p>
+
+ <p id="SVGExtensionsToSMILAnimation">Additionally, SVG includes the following compatible
+ extensions to SMIL Animation:</p>
+ <table class='vert offset' summary="extensions to SMIL Animation">
+ <tr>
+ <td><a>'animateTransform'</a></td>
+ <td>modifies one of SVG's transformation attributes over
+ time, such as the <a>'transform'</a> attribute</td>
+ </tr>
+ <tr>
+ <td><a>'animateMotion/path'</a> attribute</td>
+ <td>SVG allows any feature from SVG's <a
+ href="paths.html#PathData">path data</a> syntax to be
+ specified in a <a>'animateMotion/path'</a> attribute to the <a>'animateMotion'</a> element
+ (SMIL Animation only allows a subset of SVG's path data
+ syntax within a <a>'animateMotion/path'</a> attribute)</td>
+ </tr>
+ <tr>
+ <td><a>'mpath'</a> element</td>
+ <td>SVG allows an <a>'animateMotion'</a> element to
+ contain a child <a>'mpath'</a> element which
+ references an SVG <a>'path'</a> element as the
+ definition of the motion path</td>
+ </tr>
+ <tr>
+ <td><a>'animateMotion/keyPoints'</a> attribute</td>
+ <td>SVG adds a <a>'animateMotion/keyPoints'</a> attribute to the <a>'animateMotion'</a> to provide
+ precise control of the velocity of motion path
+ animations</td>
+ </tr>
+ <tr>
+ <td><a>'animateMotion/rotate'</a> attribute</td>
+ <td>SVG adds a <a>'animateMotion/rotate'</a> attribute to the <a>'animateMotion'</a> to control
+ whether an object is automatically rotated so that its
+ x-axis points in the same direction (or opposite direction)
+ as the directional tangent vector of the motion path</td>
+ </tr>
+ </table>
+ <p>For compatibility with other aspects of the language, SVG
+ uses <a href="linking.html#IRIReference">IRI references</a> via
+ an <a>'set/xlink:href'</a> attribute to identify
+ the elements which are to be targets of the animations,
+ as allowed in SMIL 3.0.</p>
+ <p>SMIL Animation requires that the host language define the
+ meaning for <span id='DocumentBegin' class="SVG-Term">document begin</span> and the
+ <span id='DocumentEnd' class="SVG-Term">document end</span>. Since an
+ <a>'svg'</a> is sometimes the root of
+ the XML document tree and other times can be a component of a
+ parent XML grammar, the <em>document begin</em> for a given SVG
+ document fragment is defined to be the exact time at which the
+ <a>'svg'</a> element's <a href="interact.html#LoadEvent">SVGLoad event</a> is
+ triggered. The <em>document end</em> of an SVG document
+ fragment is the point at which the document fragment has been
+ released and is no longer being processed by the user agent.
+ However, nested <a>'svg'</a> elements within an SVG
+ document do not constitute document fragments in this sense,
+ and do not define a separate document begin; all times within
+ the nested SVG fragment are relative to the document time
+ defined for the root <a>'svg'</a> element.</p>
+ <p>For SVG, the term <span id="PresentationTime" class="SVG-Term">presentation time</span>
+ indicates the position in the timeline relative
+ to the <em>document begin</em> of a given document
+ fragment.</p>
+ <p>SVG defines more constrained error processing than is
+ defined in the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>].
+ SMIL Animation defines error processing behavior
+ where the document continues to run in certain error
+ situations, whereas all animations within an SVG document
+ fragment will stop in the event of any error within the
+ document (see <a href="implnote.html#ErrorProcessing">Error
+ processing</a>).</p>
+
+<h3 id="AnimationElementsExample">Animation elements example</h3>
+
+ <p id="ExampleAnim01"><span class="example-ref">Example anim01</span> below
+ demonstrates each of SVG's five animation elements.</p>
+
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="3cm" viewBox="0 0 800 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example anim01 - demonstrate animation elements</desc>
+ <rect x="1" y="1" width="798" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+ <!-- The following illustrates the use of the 'animate' element
+ to animate a rectangles x, y, and width attributes so that
+ the rectangle grows to ultimately fill the viewport. -->
+ <rect id="RectElement" x="300" y="100" width="300" height="100"
+ fill="rgb(255,255,0)" >
+ <animate attributeName="x" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="0" />
+ <animate attributeName="y" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="0" />
+ <animate attributeName="width" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="800" />
+ <animate attributeName="height" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="300" />
+ </rect>
+ <!-- Set up a new user coordinate system so that
+ the text string's origin is at (0,0), allowing
+ rotation and scale relative to the new origin -->
+ <g transform="translate(100,100)" >
+ <!-- The following illustrates the use of the 'set', 'animateMotion',
+ 'animate' and 'animateTransform' elements. The 'text' element
+ below starts off hidden (i.e., invisible). At 3 seconds, it:
+ * becomes visible
+ * continuously moves diagonally across the viewport
+ * changes color from blue to dark red
+ * rotates from -30 to zero degrees
+ * scales by a factor of three. -->
+ <text id="TextElement" x="0" y="0"
+ font-family="Verdana" font-size="35.27" visibility="hidden" >
+ It's alive!
+ <set attributeName="visibility" attributeType="CSS" to="visible"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateMotion path="M 0 0 L 100 100"
+ begin="3s" dur="6s" fill="freeze" />
+ <animate attributeName="fill" attributeType="CSS"
+ from="rgb(0,0,255)" to="rgb(128,0,0)"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" from="-30" to="0"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" from="1" to="3" additive="sum"
+ begin="3s" dur="6s" fill="freeze" />
+ </text>
+ </g>
+</svg>
+</pre>
+ <table summary="Example anim01">
+ <caption align="bottom">
+ Example anim01
+ </caption>
+ <tr>
+ <td width="256"><img width="256" height="91"
+ alt="Example anim01 - at zero seconds"
+ src="images/animate/anim01a.png" /> <span
+ class="table-heading-1">At zero seconds</span></td>
+ <td width="20"> </td>
+ <td width="256"><img width="256" height="91"
+ alt="Example anim01 - at three seconds"
+ src="images/animate/anim01b.png" /> <span
+ class="table-heading-1">At three seconds</span></td>
+ </tr>
+ <tr>
+ <td width="256"><img width="256" height="91"
+ alt="Example anim01 - at six seconds"
+ src="images/animate/anim01c.png" /> <span
+ class="table-heading-1">At six seconds</span></td>
+ <td width="20"> </td>
+ <td width="256"><img width="256" height="91"
+ alt="Example anim01 - at nine seconds"
+ src="images/animate/anim01d.png" /> <span
+ class="table-heading-1">At nine seconds</span></td>
+ </tr>
+ </table>
+ <p class="view-as-svg"><a href="images/animate/anim01.svg">View
+ this example as SVG (SVG-enabled browsers only)</a></p>
+ <p>The sections below describe the various animation attributes
+ and elements.</p>
+
+<edit:with element='animate'>
+
+<h3 id="TargetElement">Attributes to identify the target element for an animation</h3>
+
+ <p>The following attribute is common to all animation
+ elements and identifies the target element for the animation.</p>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="HrefAttribute"><span class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd><p>An <a href="intro.html#TermIRIReference">IRI
+ reference</a> to the element which is the target of this
+ animation and which therefore will be modified over
+ time.</p>
+ <p>The target element must be part of the <a
+ href="intro.html#TermCurrentSVGDocumentFragment">current
+ SVG document fragment</a>.</p>
+ <p><iri> must point to exactly one target element which
+ is capable of being the target of the given animation. If
+ <iri> points to multiple target elements, if the
+ given target element is not capable of being a target of
+ the given animation, or if the given target element is not
+ part of the current SVG document fragment, then the
+ document is in error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).</p>
+ <p>If the <a>'xlink:href'</a> attribute
+ is not provided, then the target element will be the
+ immediate parent element of the current animation
+ element.</p>
+ <p>Refer to the descriptions of the individual animation
+ elements for any restrictions on what types of elements can
+ be targets of particular types of animations.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: Specifying the animation target</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p></dd>
+ </dl>
+ </div>
+
+<h3 id="TargetAttributes">Attributes to identify the target attribute or property for an animation</h3>
+
+<p>The following attributes are the <span class='SVG-TermDefine'>animation attribute target attributes</span>,
+which identify the target attribute or property for the given
+<a href="animate.html#TargetElement">target element</a> whose value changes
+over time.</p>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="AttributeNameAttribute"><span class='adef'>attributeName</span>
+ = "<span class='attr-value'><attributeName></span>"</dt>
+ <dd><p>Specifies the name of the target attribute. An XMLNS
+ prefix may be used to indicate the XML namespace for the
+ attribute. The prefix will be interpreted in the scope of
+ the current (i.e., the referencing) animation
+ element.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: Specifying the animation target</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p></dd>
+ <dt id="AttributeTypeAttribute"><span class='adef'>attributeType</span>
+ = "<span class='attr-value'>CSS | XML | auto</span>"</dt>
+ <dd>
+ <p>Specifies the namespace in which the target attribute and
+ its associated values are defined. The attribute value is
+ one of the following (values are case-sensitive):</p>
+ <dl>
+ <dt><span class='attr-value'>CSS</span></dt>
+ <dd>This specifies that the value of <a>'attributeName'</a> is
+ the name of a CSS property defined as animatable in
+ this specification.</dd>
+ <dt><span class='attr-value'>XML</span></dt>
+ <dd>This specifies that the value of <a>'attributeName'</a> is
+ the name of an XML attribute defined in the default XML
+ namespace for the target element. If the value for
+ <a>'attributeName'</a> has an XMLNS prefix, the
+ implementation must use the associated namespace as
+ defined in the scope of the target element. The
+ attribute must be defined as animatable in this
+ specification.</dd>
+ <dt><span class='attr-value'>auto</span></dt>
+ <dd>The implementation should match the
+ <a>'attributeName'</a> to an attribute for the
+ target element. The implementation must first search
+ through the list of CSS properties for a matching
+ property name, and if none is found, search the default
+ XML namespace for the element.</dd>
+ </dl>
+ <p>The default value is <span class='attr-value'>'auto'</span>.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: Specifying the animation target</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p>
+ </dd>
+ </dl>
+ </div>
+
+
+<h3 id="Animation.nsexample">Animation with namespaces</h3>
+ <p id="ExampleNS01"><span class="example-ref">Example
+ animns01</span> below shows a namespace prefix being resolved
+ to a namespace name in the scope of the referencing element, and
+ that namespace name being used (regardless of the prefix which
+ happens to be used in the target scope) to identify the
+ attribute being animated.</p>
+ <edit:example href="images/animate/animns01.svg" link="yes" image="no"/>
+
+ <h3 id="complexDistances">Paced animation and complex types</h3>
+
+ <p>
+ Paced animations assume a notion of distance between the various
+ animation values defined by the
+ <a>'to'</a>, <a>'from'</a>, <a>'by'</a> and <a>'values'</a>
+ attributes. Distance is defined only for scalar types (such as
+ <a href="types.html#DataTypeLength"><length></a>), colors
+ and the subset of transformation types that are supported by
+ <a>'animateTransform'</a>.
+ In the list of distance functions below, V<sub>a</sub> and V<sub>b</sub>
+ represent the two values the distance between which is being calculated.
+ </p>
+ <p>
+ Since paced animation is intended to produce an animation with an even
+ pace of change, it does not make sense to define distance functions
+ for all data types. Distance can be usefully defined for types whose
+ values are <var>n</var>-dimensional vectors (including scalars, which are
+ 1-dimensional vectors). For example, a
+ <a href="types.html#DataTypeLength"><length></a> value is a scalar
+ value, and a <a href="types.html#DataTypeColor"><color></a> value
+ is a 3-dimensional vector. Thus attributes of these types can have paced
+ animation applied to them. On the other hand, a
+ <a href="types.html#DataTypeLengths"><list-of-length></a>
+ (as used by <a href="painting.html#StrokeDasharrayProperty"><span class="prop-name">'stroke-dasharray'</span></a>)
+ is a list of scalars (1-dimensional vectors), and
+ <a href="shapes.html#PointsBNF"><list-of-points></a> (as used by
+ the <a href="shapes.html#PolygonElementPointsAttribute"><span class="attr-name">'points'</span></a>
+ attribute on a <a href="shapes.html#PolygonElement"><span class="element-name">'polygon'</span></a>)
+ is a list of 2-dimensional vectors. Therefore, these types do not have a
+ distance function defined and cannot have paced animation applied to them.
+ </p>
+ <p>
+ The distance functions for types that support paced animation are as
+ follows:
+ </p>
+ <dl class='indented'>
+ <dt>
+ <a href="types.html#DataTypeCoordinate"><coordinate></a>,
+ <a href="types.html#DataTypeInteger"><integer></a>,
+ <a href="types.html#DataTypeLength"><length></a> and
+ <a href="types.html#DataTypeNumber"><number></a>
+ </dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = |V<sub>a</sub> − V<sub>b</sub>|</p>
+ <p>
+ Examples: animating the
+ <a>'rect/x'</a> attribute on a
+ <a>'rect'</a>, or the
+ <a>'stroke-width'</a>
+ property on a <a>'circle'</a>.
+ </p>
+ </dd>
+ <dt>
+ <a href="types.html#DataTypeColor"><color></a>
+ </dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.red − V<sub>b</sub>.red)<sup>2</sup> + (V<sub>a</sub>.green − V<sub>b</sub>.green)<sup>2</sup> + (V<sub>a</sub>.blue − V<sub>b</sub>.blue)<sup>2</sup>), where:</p>
+ <div class='vardefs'>
+ <div>V<sub><var>i</var></sub>.red is the red component of the V<sub><var>i</var></sub> color value,</div>
+ <div>V<sub><var>i</var></sub>.green is the green component of the V<sub><var>i</var></sub> color value, and</div>
+ <div>V<sub><var>i</var></sub>.blue is the blue component of the V<sub><var>i</var></sub> color value.</div>
+ </div>
+ <p>
+ Each of the color component values is usually in the range [0, 1],
+ where 0 represents none of that color component, and 1 represents
+ the maximum amount of that color component, in the sRGB gamut
+ [<a href='refs.html#ref-SRGB'>SRGB</a>]. Since
+ <a href="types.html#DataTypeColor"><color></a> values
+ may specify colors outside of the sRGB gamut, these component
+ values may lie outside the range [0, 1].
+ </p>
+ <p>
+ Example: animating the <a>'fill property'</a>
+ property on an <a>'ellipse'</a>.
+ </p>
+ </dd>
+ <dt>
+ Transform definitions of type <span class='attr-value'>'translate'</span>
+ </dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.tx − V<sub>b</sub>.tx)<sup>2</sup> + (V<sub>a</sub>.ty − V<sub>b</sub>.ty)<sup>2</sup>), where:</p>
+ <div class='vardefs'>
+ <div>V<sub><var>i</var></sub>.tx is the <var>x</var> component of the V<sub><var>i</var></sub> translation transform value, and</div>
+ <div>V<sub><var>i</var></sub>.ty is the <var>y</var> component of the V<sub><var>i</var></sub> translation transform value.</div>
+ </div>
+ <p>
+ Example (for all transform definition types): animating the <a>'transform'</a>
+ attribute on a <a>'g'</a> using <a>'animateTransform'</a>.
+ </p>
+ </dd>
+ <dt>
+ Transform definitions of type <span class='attr-value'>'scale'</span>
+ </dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.sx − V<sub>b</sub>.sx)<sup>2</sup> + (V<sub>a</sub>.sy − V<sub>b</sub>.sy)<sup>2</sup>), where:</p>
+ <div class='vardefs'>
+ <div>V<sub><var>i</var></sub>.sx is the <var>x</var> component of the V<sub><var>i</var></sub> scale transform value, and</div>
+ <div>V<sub><var>i</var></sub>.sy is the <var>y</var> component of the V<sub><var>i</var></sub> scale transform value.</div>
+ </div>
+ <p>
+ Note that, as when specifying scale transformations in a
+ <a href="types.html#DataTypeTransformList"><transform-list></a>, if the
+ <var>y</var> component of the scale is omitted it is implicitly equal
+ to the <var>x</var> component.
+ </p>
+ </dd>
+ <dt>
+ Transform definitions of type <span class='attr-value'>'rotate'</span>, <span class='attr-value'>'skewX'</span> and <span class='attr-value'>'skewY'</span>
+ </dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.angle − V<sub>b</sub>.angle)<sup>2</sup>), where:</p>
+ <div class='vardefs'>
+ <div>
+ V<sub><var>i</var></sub>.angle is the angle component of the
+ V<sub><var>i</var></sub> rotation or skew transform value.
+ </div>
+ </div>
+ <p>
+ Since the distance function for rotations is not in terms of the
+ rotation center point components, a paced animation that changes
+ the rotation center point may not appear to have a paced
+ movement when the animation is applied.
+ </p>
+ </dd>
+ </dl>
+
+ <p>
+ Distance functions for all other data types are not defined.
+ If <span class='attr-value'>calcMode="paced"</span> is used on an
+ animation of an attribute or property whose type is not one of
+ those listed above, the animation effect is undefined.
+ <a href="intro.html#TermSVGUserAgent"><span class='svg-term'>SVG user agents</span></a> may choose to
+ perform the animation as if <span class='attr-value'>calcMode="linear"</span>,
+ but this is not required. Authors are recommended not to specify
+ paced animation on types not listed above.
+ </p>
+
+
+<h3 id="TimingAttributes">Attributes to control the timing of the animation</h3>
+
+<p>The following attributes are the <span class='SVG-TermDefine'>animation timing attributes</span>.
+They are common to all animation elements and control the timing of the animation,
+including what causes the animation to start and end, whether the
+animation runs repeatedly, and whether to retain the end state
+the animation once the animation ends.</p>
+
+ <p id="optWSP">In the syntax specifications that follow, optional white
+ space is indicated as "S", defined as follows:</p>
+<pre>
+S ::= (#x20 | #x9 | #xD | #xA)*
+</pre>
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="BeginAttribute"><span class='adef'>begin</span> =
+ "<span class='attr-value'><a href="#BeginValueListSyntax">begin-value-list</a></span>"</dt>
+ <dd>
+ <p>Defines when the element should begin (i.e. become
+ active).</p>
+ <p>The attribute value is a semicolon separated list of
+ values.</p>
+
+ <dl>
+ <dt id="BeginValueListSyntax">begin-value-list ::= <a
+ href="#BeginValueSyntax">begin-value</a> (S? ";" S?
+ begin-value-list )?</dt>
+ <dd>A semicolon separated list of begin values. The
+ interpretation of a list of begin times is detailed in
+ SMIL Animation's section on <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists">
+ "Evaluation of begin and end time lists"</a>.</dd>
+ <dt id="BeginValueSyntax">begin-value ::= ( <a
+ href="#OffsetValueSyntax">offset-value</a> | <a
+ href="#SyncbaseValueSyntax">syncbase-value</a> | <a
+ href="#EventValueSyntax">event-value</a> | <a
+ href="#RepeatValueSyntax">repeat-value</a> | <a
+ href="#AccessKeyValueSyntax">accessKey-value</a> | <a
+ href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
+ | <a href="#IndefiniteValue">"indefinite"</a> )</dt>
+ <dd>Describes the element begin.</dd>
+ <dt id="OffsetValueSyntax">offset-value ::= ( S? "+" |
+ "-" S? )? ( <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )</dt>
+ <dd>For SMIL Animation, this describes the element
+ begin as an offset from an implicit syncbase. For SVG,
+ the implicit syncbase begin is defined to be relative
+ to the document begin. Negative begin times are
+ entirely valid and easy to compute, as long as there is
+ a resolved document begin time.</dd>
+ <dt id="SyncbaseValueSyntax">syncbase-value ::= (
+ Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>Describes a <span class="SVG-Term">syncbase</span>
+ and an optional offset from that syncbase. The element
+ begin is defined relative to the begin or active end of
+ another animation. A <span
+ class="SVG-Term">syncbase</span> consists of an ID
+ reference to another animation element followed by
+ either <code>begin</code> or <code>end</code> to
+ identify whether to synchronize with the beginning or
+ active end of the referenced animation element.</dd>
+ <dt id="EventValueSyntax">event-value ::= ( Id-value
+ "." )? ( event-ref ) ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>Describes an event and an optional offset that
+ determine the element begin. The animation begin is
+ defined relative to the time that the event is raised.
+ The list of event-symbols available for a given
+ event-base element is the list of event attributes
+ available for the given element as defined by the <a
+ href="svgdtd.html">SVG DTD</a>, with the one difference
+ that the leading 'on' is removed from the event name
+ (i.e., the animation event name is 'click', not
+ 'onclick'). A list of all events supported by SVG can
+ be found in <a href="interact.html#SVGEvents">Complete
+ list of supported events</a>. Details of event-based
+ timing are described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Unifying">
+ SMIL Animation: Unifying Event-based and Scheduled
+ Timing</a>.</dd>
+ <dt id="RepeatValueSyntax">repeat-value ::= ( Id-value
+ "." )? "repeat(" integer ")" ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>Describes a qualified repeat event. The element
+ begin is defined relative to the time that the repeat
+ event is raised with the specified iteration
+ value.</dd>
+ <dt id="AccessKeyValueSyntax">accessKey-value ::=
+ "accessKey(" character ")" ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>Describes an accessKey that determines the element
+ begin. The element begin is defined relative to the
+ time that the accessKey character is input by the
+ user.</dd>
+ <dt id="WallclockSyncValueSyntax">wallclock-sync-value ::= "wallclock(" wallclock-value
+ ")"</dt>
+ <dd>Describes the element begin as a real-world clock
+ time. The wallclock time syntax is based upon syntax
+ defined in <cite>Representation of dates and times</cite>
+ [<a href="refs.html#ref-ISO8601">ISO8601</a>].</dd>
+ <dt id="IndefiniteValue">"indefinite"</dt>
+ <dd><p>The begin of the animation will be determined by a
+ "beginElement()" method call or a hyperlink targeted to
+ the element.</p>
+ <p>The animation DOM methods are described in <a
+ href="#DOMInterfaces">DOM interfaces</a>.</p>
+ <p>Hyperlink-based timing is described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#HyperlinkSemantics">
+ SMIL Animation: Hyperlinks and timing</a>.</p></dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: 'begin' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
+ </dd>
+
+ <dt id="DurAttribute"><span class='adef'>dur</span> =
+ <span class='attr-value'><a href="#ClockValueSyntax">Clock-value</a> | "media" | "indefinite"</span></dt>
+ <dd>
+ <p>Specifies the simple duration.</p>
+ <p>The attribute value can be one of the following:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd>Specifies the length of the simple duration in <a
+ href="#PresentationTime">presentation time</a>. Value
+ must be greater than 0.</dd>
+ <dt>"media"</dt>
+ <dd>Specifies the simple duration as the intrinsic
+ media duration. This is only valid for elements that
+ define media.<br />
+ (For SVG's <a href="#AnimationElements">animation elements</a>, if <span
+ class="attr-value">'media'</span> is specified, the
+ attribute will be ignored.)</dd>
+ <dt>"indefinite"</dt>
+ <dd>Specifies the simple duration as indefinite.</dd>
+ </dl>
+ <p>If the animation does not have a <a>'dur'</a> attribute, the simple
+ duration is indefinite. Note that interpolation will not
+ work if the simple duration is indefinite (although this
+ may still be useful for <a>'set'</a> elements). Except
+ for any SVG-specific rules explicitly mentioned in this
+ specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#DurAttribute">
+ SMIL Animation: 'dur' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
+ </dd>
+
+ <dt id="EndAttribute"><span class='adef'>end</span> = "<span class='attr-value'><a
+ href="#EndValueListSyntax">end-value-list</a></span>"</dt>
+ <dd>
+ <p>Defines an end value for the animation that can constrain
+ the active duration. The attribute value is a semicolon
+ separated list of values.</p>
+
+ <dl>
+ <dt id="EndValueListSyntax">end-value-list ::= <a
+ href="#EndValueSyntax">end-value</a> (S? ";" S?
+ end-value-list )?</dt>
+ <dd>A semicolon separated list of end values. The
+ interpretation of a list of end times is detailed
+ below.</dd>
+ </dl>
+
+ <dl>
+ <dt id="EndValueSyntax">end-value ::= ( <a
+ href="#OffsetValueSyntax">offset-value</a> | <a
+ href="#SyncbaseValueSyntax">syncbase-value</a> | <a
+ href="#EventValueSyntax">event-value</a> | <a
+ href="#RepeatValueSyntax">repeat-value</a> | <a
+ href="#AccessKeyValueSyntax">accessKey-value</a> | <a
+ href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
+ | "indefinite" )</dt>
+ <dd>Describes the active end of the animation.</dd>
+ </dl>
+ <p>A value of <span class="attr-value">'indefinite'</span>
+ specifies that the end of the animation will be
+ determined by an <a>ElementTimeControl::endElement</a> method call (the animation
+ DOM methods are described in <a href="#DOMInterfaces">DOM
+ interfaces</a>).</p>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#EndActiveAttribute">
+ SMIL Animation: 'end' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.2).</p>
+ </dd>
+ <dt id="MinAttribute"><span class='adef'>min</span> = <span class='attr-value'><a
+ href="#ClockValueSyntax">Clock-value</a> | "media"</span></dt>
+ <dd>
+ <p>Specifies the minimum value of the active duration.</p>
+ <p>The attribute value can be either of the following:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd><p>Specifies the length of the minimum value of the
+ active duration, measured in local time.</p>
+ <p>Value must be greater than 0.</p></dd>
+ <dt>"media"</dt>
+ <dd>Specifies the minimum value of the active duration
+ as the intrinsic media duration. This is only valid for
+ elements that define media. (For SVG's <a href="#AnimationElements">animation elements</a>,
+ if <span class="attr-value">'media'</span> is specified, the
+ attribute will be ignored.)</dd>
+ </dl>
+ <p>The default value for <a>'min'</a>
+ is <span class='attr-value'>'0'</span>. This does not constrain the active duration at
+ all.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MinMax">SMIL Animation: 'min' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.3).</p>
+ </dd>
+ <dt id="MaxAttribute"><span class='adef'>max</span> = <span class='attr-value'><a
+ href="#ClockValueSyntax">Clock-value</a> | "media"</span></dt>
+ <dd>
+ <p>Specifies the maximum value of the active duration.</p>
+ <p>The attribute value can be either of the following:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd><p>Specifies the length of the maximum value of the
+ active duration, measured in local time.</p>
+ <p>Value must be greater than 0.</p></dd>
+ <dt>"media"</dt>
+ <dd>Specifies the maximum value of the active duration
+ as the intrinsic media duration. This is only valid for
+ elements that define media. (For SVG's
+ <a href="#AnimationElements">animation elements</a>, if <span
+ class="attr-value">'media'</span> is specified, the
+ attribute will be ignored.)</dd>
+ </dl>
+ <p>There is no default value for <a>'max'</a>. This does not constrain the
+ active duration at all.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MinMax">SMIL Animation: 'max' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.3).</p>
+ </dd>
+ <dt id="RestartAttribute"><span class='adef'>restart</span> =
+ <span class='attr-value'>"always" | "whenNotActive" | "never"</span></dt>
+ <dd>
+ <dl>
+ <dt><span class='attr-value'>always</span></dt>
+ <dd>The animation can be restarted at any
+ time. <br />
+ This is the default value.</dd>
+ <dt><span class='attr-value'>whenNotActive</span></dt>
+ <dd>The animation can only be restarted when it is not
+ active (i.e. after the active end). Attempts to restart
+ the animation during its active duration are
+ ignored.</dd>
+ <dt><span class='attr-value'>never</span></dt>
+ <dd>The element cannot be restarted for the remainder
+ of the current simple duration of the parent time
+ container. (In the case of SVG, since the parent time
+ container is the SVG document fragment, then the
+ animation cannot be restarted for the remainder of the
+ document duration.)</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RestartAttribute">SMIL Animation: 'restart' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.7).</p>
+ </dd>
+ <dt id="RepeatCountAttribute"><span class='adef'>repeatCount</span> =
+ <span class='attr-value'>numeric value | "indefinite"</span></dt>
+ <dd>
+ <p>Specifies the number of iterations of the animation
+ function. It can have the following attribute values:</p>
+ <dl>
+ <dt>numeric value</dt>
+ <dd>This is a (base 10) "floating point" numeric value
+ that specifies the number of iterations. It can include
+ partial iterations expressed as fraction values. A
+ fractional value describes a portion of the <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationFunction">
+ simple duration</a>. Values must be greater than
+ 0.</dd>
+ <dt>"indefinite"</dt>
+ <dd>The animation is defined to repeat indefinitely
+ (i.e. until the document ends).</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatCountAttribute">SMIL Animation: 'repeatCount' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
+ </dd>
+ <dt id="RepeatDurAttribute"><span class='adef'>repeatDur</span> =
+ <span class='attr-value'><a href="#ClockValueSyntax">Clock-value</a> |
+ "indefinite"</span></dt>
+ <dd>
+ <p>Specifies the total duration for repeat. It can have the
+ following attribute values:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd>Specifies the duration in <a
+ href="#PresentationTime">presentation time</a> to
+ repeat the animation function
+ <code><strong>f(t)</strong></code>.</dd>
+ <dt>"indefinite"</dt>
+ <dd>The animation is defined to repeat indefinitely
+ (i.e. until the document ends).</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatDurAttribute">SMIL Animation: 'repeatDur' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
+ </dd>
+ <dt id="FillAttribute"><span class='adef'>fill</span> =
+ <span class='attr-value'>"freeze" | "remove"</span></dt>
+ <dd>
+ <p>This attribute can have the following values:</p>
+ <dl>
+ <dt><span class='attr-value'>freeze</span></dt>
+ <dd>The animation effect <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationModel">
+ F(t)</a> is defined to freeze the effect value at the
+ last value of the active duration. The animation effect
+ is "frozen" for the remainder of the document duration
+ (or until the animation is restarted - see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
+ SMIL Animation: Restarting animation</a>).</dd>
+ <dt><span class='attr-value'>remove</span></dt>
+ <dd><p>The animation effect is removed (no longer applied)
+ when the active duration of the animation is over.
+ After the active end of the animation, the animation no
+ longer affects the target (unless the animation is
+ restarted - see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
+ SMIL Animation: Restarting animation</a>).</p>
+ <p>This is the default value.</p></dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FillAttribute">SMIL Animation: 'fill' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.5).</p>
+ </dd>
+ </dl>
+
+ <p>The <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>]
+ defines the detailed processing
+ rules associated with the above attributes. Except for any
+ SVG-specific rules explicitly mentioned in this
+ specification, the SMIL Animation specification is the normative definition of
+ the processing rules for the above attributes.</p>
+ </div>
+
+<h4 id="ClockValueSyntax">Clock values</h4>
+
+<p>Clock values have the same syntax as in
+<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>]. The grammar for
+clock values is repeated here:</p>
+
+<pre>
+Clock-val ::= Full-clock-val | Partial-clock-val
+ | Timecount-val
+Full-clock-val ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
+Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
+Timecount-val ::= Timecount ("." Fraction)? (Metric)?
+Metric ::= "h" | "min" | "s" | "ms"
+Hours ::= DIGIT+; any positive number
+Minutes ::= 2DIGIT; range from 00 to 59
+Seconds ::= 2DIGIT; range from 00 to 59
+Fraction ::= DIGIT+
+Timecount ::= DIGIT+
+2DIGIT ::= DIGIT DIGIT
+DIGIT ::= [0-9]
+</pre>
+ <p>For Timecount values, the default metric suffix is "s" (for
+ seconds). No embedded white space is allowed in clock values,
+ although leading and trailing white space characters will be
+ ignored.</p>
+ <p>Clock values describe <a
+ href="#PresentationTime">presentation time</a>.</p>
+ <p>The following are examples of legal clock values:</p>
+ <ul>
+ <li>Full clock values: <code><br />
+ 02:30:03 </code> = 2 hours, 30
+ minutes and 3 seconds<br />
+ <code> 50:00:10.25</code> = 50 hours, 10 seconds and
+ 250 milliseconds</li>
+ <li>Partial clock value: <code><br />
+ 02:33 </code> = 2 minutes and 33
+ seconds<br />
+ <code> 00:10.5</code> = 10.5 seconds = 10 seconds and
+ 500 milliseconds</li>
+ <li>Timecount values:<br />
+ <code> 3.2h </code> = 3.2 hours = 3
+ hours and 12 minutes<br />
+ <code> 45min </code> = 45 minutes<br />
+ <code> 30s </code> = 30
+ seconds<br />
+ <code> 5ms </code> = 5
+ milliseconds<br />
+ <code> 12.467 </code> = 12 seconds and 467
+ milliseconds</li>
+ </ul>
+ <p>Fractional values are just (base 10) floating point
+ definitions of seconds. Thus:</p>
+ <p><code>00.5s = 500 milliseconds<br />
+ 00:00.005 = 5 milliseconds</code></p>
+
+<h3 id="ValueAttributes">Attributes that define animation values over time</h3>
+
+<p>The following attributes are the <span class='SVG-TermDefine'>animation value attributes</span>.
+They are common to elements <edit:elementswithattributecategory name='animation value'/>. These
+attributes define the values that are assigned to the target
+attribute or property over time. The attributes below provide
+control over the relative timing of keyframes and the
+interpolation method between discrete values.</p>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="CalcModeAttribute"><span class='adef'>calcMode</span> =
+ <span class="attr-value">"discrete | linear | paced | spline"</span></dt>
+ <dd>
+ <p>Specifies the interpolation mode for the animation. This
+ can take any of the following values. The default mode is
+ <span class='attr-value'>'linear'</span>, however if the attribute does not support
+ linear interpolation (e.g. for strings), the
+ <a>'calcMode'</a> attribute is ignored and discrete
+ interpolation is used.</p>
+ <dl>
+ <dt><span class='attr-value'>discrete</span></dt>
+ <dd>This specifies that the animation function will
+ jump from one value to the next without any
+ interpolation.</dd>
+ <dt><span class='attr-value'>linear</span></dt>
+ <dd>Simple linear interpolation between values is used
+ to calculate the animation function. Except for <a>'animateMotion'</a>, this
+ is the default <a>'calcMode'</a>.</dd>
+ <dt><span class='attr-value'>paced</span></dt>
+ <dd>
+ Defines interpolation to produce an even pace of
+ change across the animation. This is only supported for the
+ data types for which there is an appropriate distance function
+ defined, which includes only scalar numeric types plus the
+ types listed in <a href="#complexDistances">Paced animation and complex types</a>.
+ If <span class='attr-value'>'paced'</span> is specified, any
+ <a>'keyTimes'</a> or <a>'keySplines'</a> will
+ be ignored. For <a>'animateMotion'</a>, this
+ is the default <a>'calcMode'</a>.
+ Authors are discouraged from using paced animation on types
+ that do not have a distance function defined, due to its
+ unpredictable behavior in some user agents.</dd>
+ <dt><span class='attr-value'>spline</span></dt>
+ <dd>Interpolates from one value in the
+ <a>'values'</a> list to the next according to a
+ time function defined by a cubic Bézier spline.
+ The points of the spline are defined in the
+ <a>'keyTimes'</a> attribute, and the control points
+ for each interval are defined in the
+ <a>'keySplines'</a> attribute.</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#CalcModeAttribute">SMIL Animation: 'calcMode' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
+ </dd>
+ <dt id="ValuesAttribute"><span class='adef'>values</span> =
+ <span class='attr-value'>"<list>"</span></dt>
+ <dd>A semicolon-separated list of one or more values.
+ Vector-valued attributes are supported using the vector
+ syntax of the <a>'attributeType'</a> domain. Per the SMIL
+ specification, leading and trailing white space,
+ and white space before and after semicolon separators,
+ is allowed and will be ignored. Except for
+ any SVG-specific rules explicitly mentioned in this
+ specification, the normative definition for this attribute
+ is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ValuesAttribute">SMIL Animation: 'values' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
+ <dt id="KeyTimesAttribute"><span class='adef'>keyTimes</span> =
+ <span class='attr-value'>"<list>"</span></dt>
+ <dd>
+ <p>A semicolon-separated list of time values used to control
+ the pacing of the animation. Each time in the list
+ corresponds to a value in the <a>'values'</a>
+ attribute list, and defines when the value is used in the
+ animation function. Each time value in the
+ <a>'keyTimes'</a> list is specified as a floating
+ point value between 0 and 1 (inclusive), representing a
+ proportional offset into the simple duration of the
+ animation element.</p>
+
+ <p>For animations specified with a <a>'values'</a> list, the
+ <a>'keyTimes'</a> attribute if specified must have exactly as many
+ values as there are in the <a>'values'</a> attribute. For from/to/by
+ animations, the <a>'keyTimes'</a> attribute if specified must have
+ two values.</p>
+
+ <p>Each successive time value must be greater than or equal
+ to the preceding time value.</p>
+
+ <p>The <a>'keyTimes'</a> list semantics depends upon
+ the interpolation mode:</p>
+ <ul>
+ <li>For linear and spline animation, the first
+ time value in the list must be 0, and the last time
+ value in the list must be 1. The key time
+ associated with each value defines when the value is
+ set; values are interpolated between the key times.</li>
+ <li>For discrete animation, the first time value in the
+ list must be 0. The time associated with each value
+ defines when the value is set; the animation function
+ uses that value until the next time defined in
+ <a>'keyTimes'</a>.</li>
+ </ul>
+ <p>If the interpolation mode is <span class='attr-value'>'paced'</span>, the
+ <a>'keyTimes'</a> attribute is ignored.</p>
+
+ <p>If there are any errors in the <a>'keyTimes'</a>
+ specification (bad values, too many or too few values),
+ the document fragment is in error (see <a
+ href="implnote.html#ErrorProcessing">error
+ processing</a>).</p>
+
+ <p>If the simple duration is indefinite, any
+ <a>'keyTimes'</a> specification will be
+ ignored.</p>
+
+ <p>
+ Because paced animation interpolation is unspecified for some
+ value types, authors are encouraged to use
+ <span class="attr-value">'linear'</span> animation interpolation with
+ calculated <a>'keyTimes'</a>
+ to achieve particular interpolation behavior for these types.
+ </p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeyTimesAttribute">SMIL Animation: 'keyTimes' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
+ </dd>
+ <dt id="KeySplinesAttribute"><span class='adef'>keySplines</span> =
+ <span class='attr-value'>"<list>"</span></dt>
+ <dd><p>A set of Bézier control points associated with
+ the <a>'keyTimes'</a> list, defining a cubic
+ Bézier function that controls interval pacing. The
+ attribute value is a semicolon-separated list of control
+ point descriptions. Each control point description is a set
+ of four values: <code>x1 y1 x2 y2</code>, describing the
+ Bézier control points for one time segment. Note:
+ <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-animation.html#adef-keySplines">SMIL</a>
+ allows these values to be separated either by commas with
+ optional whitespace, or by whitespace alone. The
+ <a>'keyTimes'</a> values that define the associated
+ segment are the Bézier "anchor points", and the
+ <a>'keySplines'</a> values are the control points.
+ Thus, there must be one fewer sets of control points than
+ there are <a>'keyTimes'</a>.</p>
+
+ <p>The values must all be in the range 0 to 1.</p>
+
+ <p>This attribute is ignored unless the <a>'calcMode'</a>
+ is set to <span class='attr-value'>'spline'</span>.</p>
+
+ <p>If there are any errors in the <a>'keySplines'</a>
+ specification (bad values, too many or too few values), the
+ document fragment is in error (see <a
+ href="implnote.html#ErrorProcessing">error
+ processing</a>).</p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeySplinesAttribute">SMIL Animation: 'keySplines' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p></dd>
+
+ <dt id="FromAttribute"><span class='adef'>from</span> =
+ <span class='attr-value'>"<value>"</span></dt>
+ <dd>Specifies the starting value of the animation.<br />
+ Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromAttribute">SMIL Animation: 'from' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
+
+ <dt id="ToAttribute"><span class='adef'>to</span> =
+ <span class='attr-value'>"<value>"</span></dt>
+ <dd>Specifies the ending value of the animation.<br />
+ Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ToAttribute">SMIL Animation: 'to' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
+
+ <dt id="ByAttribute"><span class='adef'>by</span> =
+ <span class='attr-value'>"<value>"</span></dt>
+ <dd>Specifies a relative offset value for the
+ animation.<br />
+ Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ByAttribute">SMIL Animation: 'by' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
+ </dl>
+
+ <p>The <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>]
+ defines the detailed processing
+ rules associated with the above attributes. Except for any
+ SVG-specific rules explicitly mentioned in this
+ specification, the SMIL Animation specification is the normative definition of
+ the processing rules for the above attributes.</p>
+ <p>The animation values specified in the animation element
+ must be legal values for the specified attribute. Leading and
+ trailing white space, and white space before and after
+ semicolon separators, will be ignored.</p>
+ <p>All values specified must be legal values for the
+ specified attribute (as defined in the associated namespace).
+ If any values are not legal, the document fragment is in
+ error (see <a href="implnote.html#ErrorProcessing">error
+ processing</a>).</p>
+ <p>If a list of values is used, the animation will apply the
+ values in order over the course of the animation. If a list
+ of <a>'values'</a> is specified, any <a>'from'</a>,
+ <a>'to'</a> and <a>'by'</a> attribute values are ignored.</p>
+ <p>The processing rules for the variants of
+ <em>from/by/to</em> animations are described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimFuncValues">
+ Animation function values</a> with the following exception.</p>
+ <p>In order to provide behavior that is intuitive and consistent
+ between discrete animations with an explicitly specified
+ <a>'from'</a> attribute (e.g. "from-to animation") and those
+ where the underlying value is used (e.g. "to animation"), the
+ behavior of discrete to-animation in SVG deviates from the
+ definition in SMIL Animation.
+ As with a discrete from-to animation, a discrete to animation
+ will set the underlying value for the first half of the simple
+ duration (or, if a <a>'keyTimes'</a> list is provided, until the
+ simple duration specified by the second value in the <a>'keyTimes'</a>
+ list) and the <a>'to'</a> value for the remainder of the simple
+ duration.</p>
+ <p>The following figure illustrates the interpretation of the
+ <a>'keySplines'</a> attribute. Each diagram illustrates
+ the effect of <a>'keySplines'</a> settings for a single
+ interval (i.e. between the associated pairs of values in the
+ <a>'keyTimes'</a> and <a>'values'</a> lists.). The
+ horizontal axis can be thought of as the input value for the
+ <em>unit progress</em> of interpolation within the interval -
+ i.e. the pace with which interpolation proceeds along the
+ given interval. The vertical axis is the resulting value for
+ the <em>unit progress</em>, yielded by the function that
+ the <a>'keySplines'</a> attribute defines.
+ Another way of describing
+ this is that the horizontal axis is the input <em>unit
+ time</em> for the interval, and the vertical axis is the
+ output <em>unit time</em>. See also the section <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#TimingAndRealWorldClockTime">
+ Timing and real-world clock times</a>.</p>
+ <table summary="examples of keySplines">
+ <caption align="bottom">
+ Examples of <span class="attr-name">keySplines</span>
+ </caption>
+ <tr>
+ <td width="10"> </td>
+ <td width="172"><img width="172" height="174"
+ alt="Example keySplines01 - keySplines of 0 0 1 1 (the default)"
+ src="images/animate/keySplines01.png" /> <span
+ class="table-heading-1">keySplines="0 0 1 1"
+ (the default)</span></td>
+ <td width="20"> </td>
+ <td width="172"><img width="172" height="174"
+ alt="Example keySplines01 - keySplines of .5 0 .5 1"
+ src="images/animate/keySplines02.png" /> <span
+ class="table-heading-1">keySplines=".5 0 .5 1"<br />
+ </span></td>
+ </tr>
+ <tr>
+ <td width="10"> </td>
+ <td width="172"><img width="172" height="174"
+ alt="Example keySplines01 - keySplines of 0 .75 .25 1"
+ src="images/animate/keySplines03.png" /> <span
+ class="table-heading-1">keySplines="0 .75 .25 1"</span></td>
+ <td width="20"> </td>
+ <td width="172"><img width="172" height="174"
+ alt="Example keySplines01 - keySplines of 1 0 .25 .25"
+ src="images/animate/keySplines04.png" /> <span
+ class="table-heading-1">keySplines="1 0 .25 .25"</span></td>
+ </tr>
+ </table>
+ <p>To illustrate the calculations, consider the simple
+ example:</p>
+<pre>
+<animate dur="4s" values="10; 20" keyTimes="0; 1"
+ calcMode="spline" <strong>keySplines</strong>=<em>{as in table}</em> />
+</pre>
+ <p>Using the <a>'keySplines'</a> values for each of the four cases
+ above, the approximate interpolated values as the animation
+ proceeds are:</p>
+ <table class='vert' summary="keySplines values">
+ <tbody>
+ <tr>
+ <th>Value of <span class='attr-name'>'keySplines'</span></th>
+ <th>Initial value</th>
+ <th>After 1s</th>
+ <th>After 2s</th>
+ <th>After 3s</th>
+ <th>Final value</th>
+ </tr>
+ <tr>
+ <td>0 0 1 1</td>
+ <td>10.0</td>
+ <td>12.5</td>
+ <td>15.0</td>
+ <td>17.5</td>
+ <td>20.0</td>
+ </tr>
+ <tr>
+ <td>.5 0 .5 1</td>
+ <td>10.0</td>
+ <td>11.0</td>
+ <td>15.0</td>
+ <td>19.0</td>
+ <td>20.0</td>
+ </tr>
+ <tr>
+ <td>0 .75 .25 1</td>
+ <td>10.0</td>
+ <td>18.0</td>
+ <td>19.3</td>
+ <td>19.8</td>
+ <td>20.0</td>
+ </tr>
+ <tr>
+ <td>1 0 .25 .25</td>
+ <td>10.0</td>
+ <td>10.1</td>
+ <td>10.6</td>
+ <td>16.9</td>
+ <td>20.0</td>
+ </tr>
+ </tbody>
+ </table>
+ <p>For a formal definition of Bézier spline
+ calculation, see [<a
+ href="refs.html#ref-FOLEY-VANDAM">FOLEY-VANDAM</a>], pp. 488-491.</p>
+ </div>
+
+<h3 id="AdditionAttributes">Attributes that control whether animations are additive</h3>
+
+ <p>It is frequently useful to define animation as an offset or
+ delta to an attribute's value, rather than as absolute values.
+ A simple "grow" animation can increase the width of an object
+ by 10 pixels:</p>
+<pre>
+<rect width="20px" ...>
+ <animate attributeName="width" from="0px" to="10px" dur="10s"
+ additive="sum"/>
+</rect>
+</pre>
+ <p>It is frequently useful for repeated animations to build
+ upon the previous results, accumulating with each interation.
+ The following example causes the rectangle to continue to grow
+ with each repeat of the animation:</p>
+<pre>
+<rect width="20px" ...>
+ <animate attributeName="width" from="0px" to="10px" dur="10s"
+ additive="sum" accumulate="sum" repeatCount="5"/>
+</rect>
+</pre>
+ <p>At the end of the first repetition, the rectangle has a
+ width of 30 pixels. At the end of the second repetition, the
+ rectangle has a width of 40 pixels. At the end of the fifth
+ repetition, the rectangle has a width of 70 pixels.</p>
+ <p>For more information about additive animations, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAnim">
+ SMIL Animation: Additive animation</a>. For more information on
+ cumulative animations, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Accumulate">
+ SMIL Animation: Controlling behavior of repeating animation -
+ Cumulative animation</a>.</p>
+ <p>The following attributes are the <span class='SVG-TermDefine'>animation addition attributes</span>,
+ which are common to elements <edit:elementswithattributecategory name='animation addition'/>.</p>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="AdditiveAttribute"><span class='adef'>additive</span> =
+ <span class='attr-value'>"replace | sum"</span></dt>
+ <dd>
+ <p>Controls whether or not the animation is
+ additive.</p>
+
+ <dl>
+ <dt><span class='attr-value'>sum</span></dt>
+ <dd>Specifies that the animation will add to the
+ underlying value of the attribute and other lower
+ priority animations.</dd>
+ <dt><span class='attr-value'>replace</span></dt>
+ <dd>Specifies that the animation will override the
+ underlying value of the attribute and other lower
+ priority animations. This is the default, however the
+ behavior is also affected by the animation value
+ attributes <a>'by'</a> and <a>'to'</a>, as described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive">
+ SMIL Animation: How from, to and by attributes affect
+ additive behavior</a>.</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAttribute">SMIL Animation: 'additive' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.6).</p>
+ </dd>
+ <dt id="AccumulateAttribute"><span class='adef'>accumulate</span> =
+ <span class='attr-value'>"none | sum"</span></dt>
+ <dd>
+ <p>Controls whether or not the animation is
+ cumulative.</p>
+
+ <dl>
+ <dt><span class='attr-value'>sum</span></dt>
+ <dd>Specifies that each repeat iteration after the
+ first builds upon the last value of the previous
+ iteration.</dd>
+ <dt><span class='attr-value'>none</span></dt>
+ <dd>Specifies that repeat iterations are not
+ cumulative. This is the default.</dd>
+ </dl>
+
+ <p>This attribute is ignored if the target attribute value
+ does not support addition, or if the animation element
+ does not repeat.</p>
+
+ <p>Cumulative animation is not defined for "<em>to
+ animation</em>".</p>
+
+ <p>This attribute will be ignored if the animation function
+ is specified with only the <a>'to'</a>
+ attribute.</p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute">SMIL Animation: 'accumulate' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
+ </dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h3 id="Inheritance">Inheritance</h3>
+
+ <p>SVG allows both attributes and properties to be animated. If
+ a given attribute or property is inheritable by descendants,
+ then animations on a parent element such as a <a>'g'</a> element has the effect of
+ propagating the attribute or property animation values to
+ descendant elements as the animation proceeds; thus, descendant
+ elements can inherit animated attributes and properties from
+ their ancestors.</p>
+
+<h3 id="AnimateElement">The <span class="element-name">'animate'</span> element</h3>
+
+<edit:with element='animate'>
+
+ <p>The <a>'animate'</a> element is
+ used to animate a single attribute or property over time. For
+ example, to make a rectangle repeatedly fade away over 5
+ seconds, you can specify:</p>
+
+<pre>
+<rect>
+ <animate attributeType="CSS" attributeName="opacity"
+ from="1" to="0" dur="5s" repeatCount="indefinite" />
+</rect>
+</pre>
+
+<p>Except for any SVG-specific rules explicitly mentioned in this
+specification, the normative definition for this element is the
+<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#animateElement">SMIL Animation: 'animate' element</a>
+([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.1).</p>
+
+<edit:elementsummary name='animate'/>
+
+<p>The <a>'color-interpolation'</a> property applies to color interpolations
+that result from animations using the <a>'animate'</a> element.</p>
+
+ <p>For a list of attributes and properties that can be animated
+ using the <a>'animate'</a> element,
+ see <a
+ href="animate.html#AnimationAttributesAndProperties">Elements,
+ attributes and properties that can be animated</a>.</p>
+
+</edit:with>
+
+<h3 id="SetElement">The <span class="element-name">'set'</span> element</h3>
+
+<edit:with element='set'>
+
+ <p>The <a>'set'</a> element provides
+ a simple means of just setting the value of an attribute for a
+ specified duration. It supports all attribute types, including
+ those that cannot reasonably be interpolated, such as string
+ and boolean values. The <a>'set'</a>
+ element is non-additive. The additive and accumulate attributes
+ are not allowed, and will be ignored if specified.</p>
+
+<p>Except for any SVG-specific rules explicitly mentioned in this
+specification, the normative definition for this element is the
+<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#setElement">SMIL Animation: 'set' element</a>
+([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.2).</p>
+
+<edit:elementsummary name='set'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="SetElementToAttribute"><span
+ class="adef">to</span> = "<span
+ class="attr-value"><value></span>"</dt>
+ <dd>Specifies the value for the attribute during the
+ duration of the <a>'set'</a>
+ element. The argument value must match the attribute
+ type.</dd>
+ </dl>
+ </div>
+ <p>For a list of attributes and properties that can be animated
+ using the <a>'set'</a> element, see
+ <a
+ href="animate.html#AnimationAttributesAndProperties">Elements,
+ attributes and properties that can be animated</a>.</p>
+
+</edit:with>
+
+<h3 id="AnimateMotionElement">The <span class="element-name">'animateMotion'</span> element</h3>
+
+<edit:with element='animateMotion'>
+
+<p>The <a>'animateMotion'</a> element causes a referenced element to
+move along a motion path.</p>
+
+<p>Except for any SVG-specific rules explicitly mentioned in this
+specification, the normative definition for this element is the
+<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#animateMotionElement">SMIL Animation: 'animateMotion' element</a>
+([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.3).</p>
+
+<edit:elementsummary name='animateMotion'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="AnimateMotionElementCalcModeAttribute"><span class='adef'>calcMode</span> =
+ <span class='attr-value'>"discrete | linear | paced | spline"</span></dt>
+ <dd>Specifies the interpolation mode for the animation.
+ Refer to general description of the <a>'animate/calcMode'</a> attribute above. The
+ only difference is that the default value for the <a>'calcMode'</a>
+ for <a>'animateMotion'</a> is <span class="attr-value">'paced'</span>. See <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionCalcModeAttribute">
+ SMIL Animation: 'calcMode' attribute for
+ 'animateMotion'</a>.</dd>
+ <dt id="PathAttribute"><span class="adef">path</span> = "<span
+ class="attr-value"><path-data></span>"</dt>
+ <dd>The motion path, expressed in the same format and
+ interpreted the same way as the <a>'path/d'</a> attribute on the
+ <a>'path element'</a> element. The effect
+ of a motion path animation is to add a supplemental
+ transformation matrix onto the CTM for the referenced
+ object which causes a translation along the x- and y-axes
+ of the current user coordinate system by the computed X and
+ Y values computed over time.</dd>
+ <dt id="KeyPointsAttribute"><span class="adef">keyPoints</span> = "<span
+ class="attr-value"><list-of-numbers></span>"</dt>
+ <dd><p><a>'keyPoints'</a> takes a
+ semicolon-separated list of floating point values between 0
+ and 1 and indicates how far along the motion path the
+ object shall move at the moment in time specified by
+ corresponding <a>'keyTimes'</a>
+ value. Distance calculations use the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm. Each progress value in the list
+ corresponds to a value in the <a>'keyTimes'</a>
+ attribute list.</p>
+ <p>If a list of <a>'keyPoints'</a> is specified, there
+ must be exactly as many values in the
+ <a>'keyPoints'</a> list as in the <a>'keyTimes'</a>
+ list.</p>
+ <p>If there are any errors in the <a>'keyPoints'</a>
+ specification (bad values, too many or too few values),
+ then the document is in error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).</p></dd>
+ <dt id="RotateAttribute"><span class="adef">rotate</span> = "<span
+ class="attr-value"><a><number></a> | auto |
+ auto-reverse</span>"</dt>
+ <dd>
+ <p>The <a>'rotate'</a> attribute post-multiplies a supplemental
+ transformation matrix onto the CTM of the target element to apply a
+ rotation transformation about the origin of the current user
+ coordinate system. The rotation transformation is applied after the
+ supplemental translation transformation that is computed due to the
+ <a>'path attribute'</a> attribute.</p>
+
+ <dl>
+ <dt><span class="attr-value">auto</span></dt>
+ <dd>Indicates that the object is rotated over time by the angle of
+ the direction (i.e., directional tangent vector) of the motion path.</dd>
+
+ <dt><span class="attr-value">auto-reverse</span></dt>
+ <dd>Indicates that the object is rotated over time by the angle of the
+ direction (i.e., directional tangent vector) of the motion path plus
+ 180 degrees.</dd>
+
+ <dt><span class='attr-value'><a><number></a></span></dt>
+ <dd>Indicates that the target element has a constant rotation
+ transformation applied to it, where the rotation angle is the
+ specified number of degrees.</dd>
+ </dl>
+
+ <p>The default value is <span class='attr-value'>'0'</span>.</p>
+ </dd>
+ <dt id="OriginAttribute"><span class="adef">origin</span> = "<span
+ class="attr-value">default</span>"</dt>
+ <dd>The <a>'origin'</a> attribute is <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionOriginAttribute">defined in the SMIL Animation
+ specification</a> ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.3).
+ It has no effect in SVG.</dd>
+ </dl>
+ </div>
+
+<div id='MPathElement'>
+<edit:elementsummary name='mpath'/>
+</div>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="MPathElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="intro.html#TermIRIReference">IRI
+ reference</a> to the <a>'path element'</a> element which
+ defines the motion path.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+
+ <p>For <a>'animateMotion'</a>, the specified values for <a>'from'</a>,
+ <a>'by'</a>, <a>'to'</a> and <a>'values'</a> consists of x, y coordinate
+ pairs, with a single comma and/or white space separating the x coordinate
+ from the y coordinate. For example, <span class="attr-value">from="33,15"</span>
+ specifies an x coordinate value of <span class="attr-value">33</span> and
+ a y coordinate value of <span class="attr-value">15</span>.</p>
+
+ <p>If provided, the <a>'values'</a> attribute must consists of a list of
+ x, y coordinate pairs. Coordinate values are separated by at least one
+ white space character or a comma. Additional white space around the
+ separator is allowed. For example, <span class="attr-value">values="10,20;30,20;30,40"</span>
+ or <span class="attr-value">values="10mm,20mm;30mm,20mm;30mm,40mm"</span>.
+ Each coordinate represents a <a href="types.html#DataTypeLength">length</a>.
+ Attributes <a>'from'</a>, <a>'by'</a>, <a>'to'</a> and <a>'values'</a>
+ specify a shape on the current canvas which represents the motion path.</p>
+
+ <p>Two options are available which allow definition of a motion
+ path using any of SVG's <a href="paths.html#PathData">path
+ data</a> commands:</p>
+ <ul>
+ <li>the <a>'path attribute'</a> attribute defines a motion path directly on
+ <a>'animateMotion'</a> element using any of SVG's
+ <a href="paths.html#PathData">path data</a> commands.</li>
+
+ <li>the <a>'mpath'</a> sub-element provides the ability to reference an
+ external <a>'path element'</a> element as the definition of the motion path.</li>
+ </ul>
+ <p>Note that SVG's <a href="paths.html#PathData">path data</a>
+ commands can only contain values in user space, whereas <a>'from'</a>,
+ <a>'by'</a>, <a>'to'</a> and <a>'values'</a> can specify coordinates in
+ user space or using unit identifiers. See <a href="coords.html#Units">Units</a>.</p>
+
+ <p>The various (x,y) points of the shape provide a supplemental
+ transformation matrix onto the CTM for the referenced object
+ which causes a translation along the x- and y-axes of the current
+ user coordinate system by the (x,y) values of the shape computed
+ over time. Thus, the referenced object is translated over time
+ by the offset of the motion path relative to the origin of the
+ current user coordinate system. The supplemental transformation is
+ applied on top of any transformations due to the target element's
+ <a>'transform'</a> attribute or any animations on that attribute due
+ to <a>'animateTransform'</a> elements on the target element.</p>
+
+ <p>The <a>'additive'</a> and <a>'accumulate'</a> attributes apply
+ to <a>'animateMotion'</a> elements. Multiple <a>'animateMotion'</a>
+ elements all simultaneously referencing the same target element can
+ be additive with respect to each other; however, the transformations
+ which result from the <a>'animateMotion'</a> elements are always
+ supplemental to any transformations due to the target element's
+ <a>'transform'</a> attribute or any <a>'animateTransform'</a>
+ elements.</p>
+
+ <p>The default calculation mode (<a>'calcMode'</a>) for
+ <a>'animateMotion'</a> is "paced". This will produce constant
+ velocity motion along the specified path. Note that while
+ animateMotion elements can be additive, it is important to observe
+ that the addition of two or more "paced" (constant velocity)
+ animations might not result in a combined motion animation with
+ constant velocity.</p>
+
+ <p>When a path is combined with "discrete", "linear"
+ or "spline" <a>'calcMode'</a> settings, and if attribute
+ <a>'keyPoints'</a> is not provided, the number of values is
+ defined to be the number of points defined by the path, unless
+ there are "move to" commands within the path. A "move to" command
+ within the path (i.e. other than at the beginning of
+ the path description) A "move to" command does not
+ count as an additional point when dividing up the duration, or
+ when associating <a>'keyTimes'</a>, <a>'keySplines'</a>
+ and <a>'keyPoints'</a> values. When a path is
+ combined with a "paced" <a>'calcMode'</a> setting, all "move to"
+ commands are considered to have 0 length (i.e. they always happen
+ instantaneously), and is not considered in computing the pacing.</p>
+
+ <p>For more flexibility in controlling the velocity along the
+ motion path, the <a>'keyPoints'</a> attribute provides the
+ ability to specify the progress along the motion path for
+ each of the <a>'keyTimes'</a> specified values. If specified,
+ <a>'keyPoints'</a> causes <a>'keyTimes'</a> to apply to the values
+ in <a>'keyPoints'</a> rather than the points specified in the
+ <a>'values'</a> attribute array or the points on the <a>'path attribute'</a>
+ attribute.</p>
+
+ <p>The override rules for <a>'animateMotion'</a> are as follows.
+ Regarding the definition of the motion path, the <a>'mpath'</a> element
+ overrides the the <a>'path attribute'</a> attribute, which overrides <a>'values'</a>,
+ which overrides <a>'from'</a>, <a>'by'</a> and <a>'to'</a>. Regarding
+ determining the points which correspond to the <a>'keyTimes'</a>
+ attributes, the <a>'keyPoints'</a> attribute overrides <a>'path attribute'</a>,
+ which overrides <a>'values'</a>, which overrides <a>'from'</a>, <a>'by'</a>
+ and <a>'to'</a>.</p>
+
+ <p>At any time <em>t</em> within a motion path animation of
+ duration <em>dur</em>, the computed coordinate (x,y) along the
+ motion path is determined by finding the point (x,y) which is
+ <em>t/dur</em> distance along the motion path using the user
+ agent's <a href="paths.html#DistanceAlongAPath">distance along
+ the path</a> algorithm.</p>
+
+ <p>The following example demonstrates the supplemental
+ transformation matrices that are computed during a motion path
+ animation.</p>
+
+ <a id="ExampleAnimMotion01" name="ExampleAnimMotion01"></a>
+ <p><span class="example-ref">Example animMotion01</span> shows
+ a triangle moving along a motion path.</p>
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="3cm" viewBox="0 0 500 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink" >
+ <desc>Example animMotion01 - demonstrate motion animation computations</desc>
+ <rect x="1" y="1" width="498" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+ <!-- Draw the outline of the motion path in blue, along
+ with three small circles at the start, middle and end. -->
+ <path id="path1" d="M100,250 C 100,50 400,50 400,250"
+ fill="none" stroke="blue" stroke-width="7.06" />
+ <circle cx="100" cy="250" r="17.64" fill="blue" />
+ <circle cx="250" cy="100" r="17.64" fill="blue" />
+ <circle cx="400" cy="250" r="17.64" fill="blue" />
+ <!-- Here is a triangle which will be moved about the motion path.
+ It is defined with an upright orientation with the base of
+ the triangle centered horizontally just above the origin. -->
+ <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+ fill="yellow" stroke="red" stroke-width="7.06" >
+ <!-- Define the motion path animation -->
+ <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
+ <mpath xlink:href="#path1"/>
+ </animateMotion>
+ </path>
+</svg>
+</pre>
+ <table summary="Example animMotion01">
+ <caption align="bottom">
+ Example animMotion01
+ </caption>
+ <tr>
+ <td width="144"><img width="144" height="91"
+ alt="Example animMotion01 - at zero seconds"
+ src="images/animate/animMotion01a.png" /> <span
+ class="table-heading-1">At zero seconds</span></td>
+ <td width="20"> </td>
+ <td width="144"><img width="144" height="91"
+ alt="Example animMotion01 - at three seconds"
+ src="images/animate/animMotion01b.png" /> <span
+ class="table-heading-1">At three seconds</span></td>
+ <td width="20"> </td>
+ <td width="144"><img width="144" height="91"
+ alt="Example animMotion01 - at six seconds"
+ src="images/animate/animMotion01c.png" /> <span
+ class="table-heading-1">At six seconds</span></td>
+ </tr>
+ </table>
+ <p class="view-as-svg"><a
+ href="images/animate/animMotion01.svg">View this example as SVG
+ (SVG-enabled browsers only)</a></p>
+ <p>The following table shows the supplemental transformation
+ matrices that are applied to achieve the effect of the motion
+ path animation.</p>
+ <table class='vert' summary="Example animMotion01 time slices">
+ <tr>
+ <th></th>
+ <th>After 0s</th>
+ <th>After 3s</th>
+ <th>After 6s</th>
+ </tr>
+ <tr>
+ <td>Supplemental transform
+ due to movement
+ along motion path</td>
+ <td>translate(100,250)</td>
+ <td>translate(250,100)</td>
+ <td>translate(400,250)</td>
+ </tr>
+ <tr>
+ <td>Supplemental transform
+ due to
+ <span class="attr-value">rotate="auto"</span></td>
+ <td>rotate(-90)</td>
+ <td>rotate(0)</td>
+ <td>rotate(90)</td>
+ </tr>
+ </table>
+
+<p>For a list of elements that can be animated using the <a>'animateMotion'</a>
+element, see <a href="animate.html#AnimationAttributesAndProperties">Elements,
+attributes and properties that can be animated</a>.</p>
+
+</edit:with>
+
+<h3 id="AnimateColorElement">The <span class="element-name">'animateColor'</span> element</h3>
+
+<edit:with element='animateColor'>
+
+<p>The <a>'animateColor'</a> element specifies a color transformation
+over time.</p>
+
+<p>Except for any SVG-specific rules explicitly mentioned in this
+specification, the normative definition for this element is the
+<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#animateColorElement">SMIL Animation: 'animateColor' element</a>
+([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.4).</p>
+
+<edit:elementsummary name='animateColor'/>
+
+<p>The <a>'from'</a>, <a>'by'</a> and <a>'to'</a> attributes take color
+values, where each color value is expressed using the following syntax (the
+same syntax as used in SVG's properties that can take color values):</p>
+
+<pre><a href="types.html#DataTypeColor"><color></a> <a href="types.html#DataTypeICCColor"><icccolor></a>?</pre>
+
+<p>The <a>'values'</a> attribute for the <a>'animateColor'</a> element
+consists of a semicolon-separated list of color values, with each color
+value expressed in the above syntax.</p>
+
+<p>Out of range color values can be provided, but user agent processing
+will be implementation dependent. User agents should clamp color
+values to allow color range values as late as possible, but note that
+system differences might preclude consistent behavior across different
+systems.</p>
+
+<p>The <a>'color-interpolation'</a> property applies to color interpolations
+that result from <a>'animateColor'</a> animations.</p>
+
+<p>The use of <a>'animateColor'</a> is deprecated, since all of its functionality
+can be achieved simply by using <a>'animate'</a> to target properties that
+can take color values. The <a>'animateColor'</a> element may be dropped from
+a future version of the SVG specification.</p>
+
+<p>For a list of attributes and properties that can be animated using the
+<a>'animateColor'</a> element, see
+<a href="animate.html#AnimationAttributesAndProperties">Elements, attributes and properties that can be animated</a>.</p>
+
+</edit:with>
+
+<h3 id="AnimateTransformElement">The <span class="element-name">'animateTransform'</span> element</h3>
+
+<edit:with element='animateTransform'>
+
+<p>The <a>'animateTransform'</a> element animates a transformation attribute
+on a target element, thereby allowing animations to control translation,
+scaling, rotation and/or skewing.</p>
+
+<edit:elementsummary name='animateTransform'/>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="AnimateTransformElementTypeAttribute"><span class="adef">type</span> =
+ "<span class="attr-value">translate | scale | rotate | skewX | skewY</span>"</dt>
+ <dd>Indicates the type of transformation which is to have its values
+ change over time.
+ If the attribute is not specified, then the effect is as if a value of <span class="attr-value">'translate'</span> were specified.
+ </dd>
+ </dl>
+</div>
+
+<p>The <a>'from'</a>, <a>'by'</a> and <a>'to'</a> attributes take a value
+expressed using the same syntax that is available for the given transformation
+type:</p>
+
+<ul>
+ <li>For a <span class="attr-value">type="translate"</span>, each individual
+ value is expressed as <span class="attr-value"><tx> [,<ty>]</span>.</li>
+
+ <li>For a <span class="attr-value">type="scale"</span>, each individual
+ value is expressed as <span class="attr-value"><sx> [,<sy>]</span>.</li>
+
+ <li>For a <span class="attr-value">type="rotate"</span>, each individual
+ value is expressed as <span class="attr-value"><rotate-angle> [<cx> <cy>]</span>.</li>
+
+ <li>For a <span class="attr-value">type="skewX"</span> and
+ <span class="attr-value">type="skewY"</span>, each individual value is
+ expressed as <span class="attr-value"><skew-angle></span>.</li>
+</ul>
+
+<p>(See <a href="coords.html#TransformAttribute">The <span class="attr-name">'transform'</span> attribute</a>.)</p>
+
+<p>The <a>'values'</a> attribute for the <a>'animateTransform'</a> element
+consists of a semicolon-separated list of values, where each individual value
+is expressed as described above for <a>'from'</a>, <a>'by'</a> and <a>'to'</a>.</p>
+
+<p>The animation effect for <a>'animateTransform'</a> is post-multiplied to the
+underlying value for additive <a>'animateTransform'</a> animations (see below)
+instead of added to the underlying value, due to the specific behavior of
+<a>'animateTransform'</a>.</p>
+
+<p><em>From-to</em>, <em>from-by</em> and <em>by animations</em> are defined
+in SMIL to be equivalent to a corresponding <em>values animation</em>. See
+the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimFuncValues">Animation function values</a>
+section of SMIL Animation ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).
+However, <em>to animations</em> are a mixture of additive and non-additive
+behavior, as described in the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive">How
+from, to and by attributes affect additive behavior</a> section of SMIL
+Animation ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.6).
+<em>To animations</em> provide specific functionality to get a smooth
+change from the underlying value to the <a>'to'</a> attribute value, which
+conflicts mathematically with the requirement for additive transform
+animations to be post-multiplied. As a consequence, in SVG 1.1 the behavior of
+<em>to animations</em> for <a>'animateTransform'</a> is undefined. Authors
+are suggested to use <em>from-to</em>, <em>from-by</em>, <em>by</em> or
+<em>values animations</em> to achieve any desired transform animation.</p>
+
+<p>
+ If
+ <a href="#CalcModeAttribute"><span class="attr-name">'calcMode'</span></a>
+ has the value <span class="attr-value">'paced'</span>, then the "distance" for the transformation is
+ calculated as further described in
+ <a href="#complexDistances">Paced animations and complex types</a>.
+</p>
+<p>When an animation is active, the effect of non-additive
+<a>'animateTransform'</a> (i.e., <span class="attr-value">additive="replace"</span>)
+is to replace the given attribute's value with the transformation defined by
+the <a>'animateTransform'</a>. The effect of additive (i.e.,
+<span class="attr-value">additive="sum"</span>) is to post-multiply the
+transformation matrix corresponding to the transformation defined by this
+<a>'animateTransform'</a>. To illustrate:</p>
+
+<pre>
+<rect transform="skewX(30)"...>
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" from="0" to="90" dur="5s"
+ additive="replace" fill="freeze"/>
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" from="1" to="2" dur="5s"
+ additive="replace" fill="freeze"/>
+</rect>
+</pre>
+
+<p>In the code snippet above, because the both animations have
+<span class="attr-value">additive="replace"</span>, the first
+animation overrides the transformation on the rectangle itself
+and the second animation overrides the transformation from the
+first animation; therefore, at time 5 seconds, the visual
+result of the above two animations would be equivalent to the
+following static rectangle:</p>
+
+<pre>
+<rect transform="scale(2)" ... />
+</pre>
+
+<p>whereas in the following example:</p>
+
+<pre>
+<rect transform="skewX(30)"...>
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" from="0" to="90" dur="5s"
+ additive="sum" fill="freeze"/>
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" from="1" to="2" dur="5s"
+ additive="sum" fill="freeze"/>
+</rect>
+</pre>
+
+<p>In this code snippet, because the both animations have
+<span class="attr-value">additive="sum"</span>, the first animation
+post-multiplies its transformation to any transformations on
+the rectangle itself and the second animation post-multiplies
+its transformation to any transformation from the first
+animation; therefore, at time 5 seconds, the visual result of
+the above two animations would be equivalent to the following
+static rectangle:</p>
+
+<pre>
+<rect transform="skewX(30) rotate(90) scale(2)" ... />
+</pre>
+
+<p>Note that the zero value used when performing a <em>by animation</em>
+with <span class='attr-value'>type="scale"</span> is indeed 0.
+Thus, performing the following animation causes the rectangle to be
+invisible at time 0s (since the animated transform list value is
+<span class='attr-value'>'scale(0)'</span>), and be scaled back
+to its original size at time 5s (since the animated transform list value is
+<span class='attr-value'>'scale(1)'</span>):</p>
+
+<pre><![CDATA[<rect width="100" height="100">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" by="1" dur="5s" fill="freeze"/>
+</rect>]]></pre>
+
+<p>When a transform animation has <span class='attr-value'>accumulate='sum'</span>,
+the accumulation that occurs for each completed repetition of the animation
+is computed on the values specified in the <a>'animateTransform'</a> element's
+<a href="animate.html#ValueAttributes">animation value attributes</a> (i.e.,
+<a>'values'</a>, <a>'from'</a>, <a>'to'</a> and <a>'by'</a>) and not on the
+transformation matrix that these values represent. For example, in the following
+code snippet, 3 is added to the scale value at the start of each repetition:</p>
+
+<pre><![CDATA[<rect width="100" height="100">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" from="2" to="3" repeatCount="3" dur="4s"
+ fill="freeze"/>
+</rect>]]></pre>
+
+<p>The following graph and table shows the animated <a>'transform'</a> value on
+the <a>'rect'</a> over the course of the animation:</p>
+
+<table class="graph indented">
+ <tr>
+ <td><img src="images/cumulative-transform-graph-1.png" width="430" height="320" alt="The scale value animates from 2 to 12 with discontinuities at 4s and 8s."/></td>
+ <td>
+ <table class='vert compact'>
+ <tr><th>Time</th><th>Value</th></tr>
+ <tr><td>0s</td><td>scale(2)</td></tr>
+ <tr><td>1s</td><td>scale(2.25)</td></tr>
+ <tr><td>2s</td><td>scale(2.5)</td></tr>
+ <tr><td>3s</td><td>scale(2.75)</td></tr>
+ <tr><td>4s</td><td>scale(5)</td></tr>
+ <tr><td>5s</td><td>scale(5.25)</td></tr>
+ <tr><td>6s</td><td>scale(5.5)</td></tr>
+ <tr><td>7s</td><td>scale(5.75)</td></tr>
+ <tr><td>8s</td><td>scale(8)</td></tr>
+ <tr><td>9s</td><td>scale(8.25)</td></tr>
+ <tr><td>10s</td><td>scale(8.5)</td></tr>
+ <tr><td>11s</td><td>scale(8.75)</td></tr>
+ <tr><td>12s</td><td>scale(9)</td></tr>
+ </table>
+ </td>
+ </tr>
+</table>
+
+<p>Transform item types that can have multiple values – <span class='attr-value'>'translate'</span>,
+<span class='attr-value'>'scale'</span> and <span class='attr-value'>'rotate'</span> – are
+treated as vectors and accumulation is performed with vector addition. Optional values that
+are omitted are taken to have their usual implied value: <span class='attr-value'>1</span> for
+the <span class='attr-value'><sy></span> component of a <span class='attr-value'>'scale'</span>
+and <span class='attr-value'>0</span> for the <span class='attr-value'><tx></span> component
+of a <span class='attr-value'>'translate'</span> and the <span class='attr-value'><cx cy></span>
+components of a <span class='attr-value'>'rotate'</span>.</p>
+
+<p>For example, consider the following code snippet, which has a cumulative transform
+animation of type <span class='attr-value'>'rotate'</span>:</p>
+
+<pre><![CDATA[<rect width="100" height="100">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" from="0 30 40" to="10 30 40"
+ repeatCount="2" dur="1s" fill="freeze"/>
+</rect>]]></pre>
+
+<p>At time 1 second, the animated value of <a>'transform'</a> on the <a>'rect'</a>
+will jump from <span class='attr-value'>'rotate(10 30 40)'</span> to <span class='attr-value'>'rotate(10 60 80)'</span>,
+because the effect of the accumulation is to take the value at the end of the first repetition,
+<span class='attr-value'>'10 30 40'</span>, and add to it the value at simple duration <var>t</var> = 0s, which
+is <span class='attr-value'>'0 30 40'</span>.</p>
+
+<p>For a list of attributes and properties that can be animated using the
+<a>'animateTransform'</a> element, see
+<a href="animate.html#AnimationAttributesAndProperties">Elements, attributes and properties that can be animated</a>.</p>
+
+</edit:with>
+
+<h3 id="AnimationAttributesAndProperties">Elements, attributes and properties that can be animated</h3>
+
+<p>The following lists all of the elements which can be animated by an
+<a>'animateMotion'</a> element:</p>
+
+<ul>
+ <li><a>'svg'</a></li>
+ <li><a>'g'</a></li>
+ <li><a>'defs'</a></li>
+ <li><a>'use'</a></li>
+ <li><a>'image'</a></li>
+ <li><a>'switch'</a></li>
+ <li><a>'path'</a></li>
+ <li><a>'rect'</a></li>
+ <li><a>'circle'</a></li>
+ <li><a>'ellipse'</a></li>
+ <li><a>'line'</a></li>
+ <li><a>'polyline'</a></li>
+ <li><a>'polygon'</a></li>
+ <li><a>'text'</a></li>
+ <li><a>'clipPath'</a></li>
+ <li><a>'mask element'</a></li>
+ <li><a>'a'</a></li>
+ <li><a>'foreignObject'</a></li>
+</ul>
+
+<p id="Animatable">Each attribute or property within this specification
+indicates whether or not it can be animated by SVG's animation
+elements. Animatable attributes and properties are designated
+as follows:</p>
+
+<p class='indented'><span class="anim-target">Animatable: yes.</span></p>
+
+<p>whereas attributes and properties that cannot be animated are designated:</p>
+
+<p class='indented'><span class="anim-target">Animatable: no.</span></p>
+
+<p>Some properties are defined as being animatable but only for non-additive animations:</p>
+
+<p class='indented'><span class="anim-target">Animatable: yes (non-additive).</span></p>
+
+<p>SVG has a defined set of <a href="types.html#BasicDataTypes">basic data types</a>
+for its various supported attributes and properties. For those
+attributes and properties that can be animated, the following
+table indicates which animation elements can be used to animate
+each of the basic data types. If a given attribute or property
+can take values of keywords (which are not additive) or numeric
+values (which are additive), then additive animations are
+possible if the subsequent animation uses a numeric value even
+if the base animation uses a keyword value; however, if the
+subsequent animation uses a keyword value, additive animation
+is not possible.</p>
+
+ <table class='vert' summary="animatable data types">
+ <tr>
+ <th>Data type</th>
+ <th>Additive?</th>
+ <th><a>'animate'</a></th>
+ <th><a>'set'</a></th>
+ <th><a>'animateColor'</a></th>
+ <th><a>'animateTransform'</a></th>
+ <!--
+ <th><a href="animate.html#AnimateColorElement"><span class="element-name">‘animate<br /> Color’</span></a></th>
+ <th><a href="animate.html#AnimateTransformElement"><span class="element-name">‘animate<br /> Transform’</span></a></th>
+ -->
+ <th>Notes</th>
+ </tr>
+ <tr>
+ <td><a><angle></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeColor"><color></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>Only additive if each value can be converted to an RGB color.</td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeFrequency"><frequency></a></td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeInteger"><integer></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a><length></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a href="types.html#DataTypeList"><list-of-<var>T</var>s></a></td>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a><number></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypePaint"><paint></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>Only additive if each value can be converted to an RGB color.</td>
+ </tr>
+ <tr>
+ <td><a><percentage></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a href="types.html#DataTypeTime"><time></a></td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeTransformList"><transform-list></a></td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>yes</td>
+ <td>Additive means that a transformation is post-multiplied
+ to the base set of transformations.</td>
+ </tr>
+ <tr>
+ <td><a href="types.html#DataTypeIRI"><iri></a></td>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>All other data types used in animatable attributes and
+ properties</td>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ </table>
+
+<p>Any deviation from the above table or other special note
+about the animation capabilities of a particular attribute or
+property is included in the section of the specification where
+the given attribute or property is defined.</p>
+
+<h2 id="DOMAnimationExample">Animation using the SVG DOM</h2>
+
+<p><span class="example-ref">Example dom01</span> shows a simple animation
+using the DOM.</p>
+
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4cm" height="2cm" viewBox="0 0 400 200"
+ xmlns="http://www.w3.org/2000/svg"
+ onload="StartAnimation(evt)" version="1.1">
+ <script type="application/ecmascript"><![CDATA[
+ var timevalue = 0;
+ var timer_increment = 50;
+ var max_time = 5000;
+ var text_element;
+ function StartAnimation(evt) {
+ text_element = evt.target.ownerDocument.getElementById("TextElement");
+ ShowAndGrowElement();
+ }
+ function ShowAndGrowElement() {
+ timevalue = timevalue + timer_increment;
+ if (timevalue > max_time)
+ return;
+ // Scale the text string gradually until it is 20 times larger
+ scalefactor = (timevalue * 20.) / max_time;
+ text_element.setAttribute("transform", "scale(" + scalefactor + ")");
+ // Make the string more opaque
+ opacityfactor = timevalue / max_time;
+ text_element.setAttribute("opacity", opacityfactor);
+ // Call ShowAndGrowElement again <timer_increment> milliseconds later.
+ setTimeout("ShowAndGrowElement()", timer_increment)
+ }
+ window.ShowAndGrowElement = ShowAndGrowElement
+ ]]></script>
+ <rect x="1" y="1" width="398" height="198"
+ fill="none" stroke="blue" stroke-width="2"/>
+ <g transform="translate(50,150)" fill="red" font-size="7">
+ <text id="TextElement">SVG</text>
+ </g>
+</svg>
+</pre>
+ <table summary="Example dom01">
+ <caption align="bottom">
+ Example dom01
+ </caption>
+ <tr>
+ <td width="151"><img width="151" height="76"
+ alt="Example dom01 - at zero seconds"
+ src="images/animate/dom01a.png" /> <span
+ class="table-heading-1">At zero seconds</span></td>
+ <td width="20"> </td>
+ <td width="151"><img width="151" height="76"
+ alt="Example dom01 - at three seconds"
+ src="images/animate/dom01b.png" /> <span
+ class="table-heading-1">At 2.5 seconds</span></td>
+ <td width="20"> </td>
+ <td width="151"><img width="151" height="76"
+ alt="Example dom01 - at six seconds"
+ src="images/animate/dom01c.png" /> <span
+ class="table-heading-1">At five seconds</span></td>
+ </tr>
+ </table>
+ <p class="view-as-svg"><a href="images/animate/dom01.svg">View
+ this example as SVG (SVG-enabled browsers only)</a></p>
+ <p>The above SVG file contains a single graphics element, a
+ text string that says "SVG". The animation loops for 5 seconds.
+ The text string starts out small and transparent and grows to
+ be large and opaque. Here is an explanation of how this example
+ works:</p>
+ <ul>
+ <li>The <span class='attr-value'>onload="StartAnimation(evt)"</span> attribute
+ indicates that, once the document has been fully loaded and
+ processed, invoke ECMAScript function
+ <code>StartAnimation</code>.</li>
+ <li>The <a>'script'</a> element defines the ECMAScript which makes
+ the animation happen. The <code>StartAnimation()</code>
+ function is only called once to give a value to global
+ variable <code>text_element</code> and to make the initial
+ call to <code>ShowAndGrowElement()</code>.
+ <code>ShowAndGrowElement()</code> is called every 50
+ milliseconds and resets the <a>'transform'</a> and
+ <a>'style attribute'</a> attributes on the text element to new
+ values each time it is called. At the end of
+ <code>ShowAndGrowElement</code>, the function tells the
+ ECMAScript engine to call itself again after 50 more
+ milliseconds.</li>
+ <li>The <a>'g'</a> element shifts the coordinate system so that the
+ origin is shifted toward the lower-left of the viewing area.
+ It also defines the fill color and font-size to use when
+ drawing the text string.</li>
+ <li>The <a>'text'</a> element contains the text string and is the
+ element whose attributes get changed during the
+ animation.</li>
+ </ul>
+ <p>If scripts are modifying the same attributes or properties
+ that are being animated by SVG's
+ <a href="#AnimationElements">animation elements</a>,
+ the scripts modify the base value for the animation. If a base
+ value is modified while an animation element is animating the
+ corresponding attribute or property, the animations are
+ required to adjust dynamically to the new base value.</p>
+ <p>If a script is modifying a property on the override style
+ sheet at the same time that an <a>animation element</a> is
+ animating that property, the result is
+ implementation-dependent; thus, it is recommended that this be
+ avoided.</p>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<p>Below are the DOM interfaces for the elements defined in this chapter.
+In addition, <a>ElementTimeControl</a> and <a>TimeEvent</a>, which are
+from <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">SMIL Animation</a>,
+are included here for easy reference.</p>
+
+<h3 id="InterfaceElementTimeControl">Interface ElementTimeControl</h3>
+
+<edit:interface name='::smil::ElementTimeControl'/>
+
+<p>For the corresponding Java binding, see
+<a href='http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SMIL-Java-ElementTimeControl'>section 6.4</a>
+of SMIL Animation [<a href='refs.html#ref-SMILANIM'>SMILANIM</a>].</p>
+
+<h3 id="InterfaceTimeEvent">Interface TimeEvent</h3>
+
+<edit:interface name='::smil::TimeEvent'/>
+
+<p>For the corresponding Java binding, see
+<a href='http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SMIL-Java-TimeEvent'>section 6.4</a>
+of SMIL Animation [<a href='refs.html#ref-SMILANIM'>SMILANIM</a>].</p>
+
+<h3 id="InterfaceSVGAnimationElement">Interface SVGAnimationElement</h3>
+
+<edit:interface name='::svg::SVGAnimationElement'/>
+
+<h3 id="InterfaceSVGAnimateElement">Interface SVGAnimateElement</h3>
+
+<edit:with element='SVGAnimateElement'>
+<edit:interface name='::svg::SVGAnimateElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGSetElement">Interface SVGSetElement</h3>
+
+<edit:with element='SVGSetElement'>
+<edit:interface name='::svg::SVGSetElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGAnimateMotionElement">Interface SVGAnimateMotionElement</h3>
+
+<edit:with element='SVGAnimateMotionElement'>
+<edit:interface name='::svg::SVGAnimateMotionElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGMPathElement">Interface SVGMPathElement</h3>
+
+<edit:with element='SVGMPathElement'>
+<edit:interface name='::svg::SVGMPathElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGAnimateColorElement">Interface SVGAnimateColorElement</h3>
+
+<edit:with element='SVGAnimateColorElement'>
+<edit:interface name='::svg::SVGAnimateColorElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGAnimateTransformElement">Interface SVGAnimateTransformElement</h3>
+
+<edit:with element='SVGAnimateTransformElement'>
+<edit:interface name='::svg::SVGAnimateTransformElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/attindex.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Attribute Index</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Attribute Index</h1>
+
+<p class="normativity"><em>This appendix is informative, not normative.</em></p>
+
+<h2 id="RegularAttributes">Regular attributes</h2>
+
+<p>The following table lists all of the attributes defined in the SVG
+language, except for the <a>presentation attributes</a>, which are treated
+in the <a href="#PresentationAttributes">Presentation attributes</a>
+section below. For each attribute, the elements on which the attribute
+may be specified is also given.</p>
+
+<edit:attributetable/>
+
+<h2 id="PresentationAttributes">Presentation attributes</h2>
+
+<p>As described in the <a href="styling.html">Styling</a> chapter, for each
+<a>property</a> there exists a corresponding <a>presentation attribute</a>.
+The table below lists the presentation attributes and the elements on which
+they may be specified.</p>
+
+<table class='vert property-table' summary='List of presentation attributes and the elements on which they may be specified'>
+ <tr>
+ <th>Presentation attributes</th>
+ <th>Elements on which the attributes may be specified</th>
+ </tr>
+ <tr>
+ <td>
+ <edit:attributecategory name='presentation'/>
+ </td>
+ <td>
+ <edit:elementswithattributecategory name='presentation'/>
+ </td>
+ </tr>
+</table>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/backward.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Backwards Compatibility</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1 id="BackwardsCompatibility">Backwards Compatibility</h1>
+
+<p>A user agent (UA) might not have the ability to process and
+view SVG content. The following list outlines two of the
+backwards compatibility scenarios associated with SVG
+content:</p>
+
+<ul>
+ <li>
+ <p>For XML grammars with the ability to embed SVG content, it
+ is assumed that some sort of alternate representation
+ capability such as the <a>'switch'</a> element and some sort of
+ feature-availability test facility (such as what is
+ described in the <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">SMIL 3.0 specification</a>
+ [<a href="refs.html#ref-SMIL">SMIL</a>]) will be
+ available.</p>
+
+ <p>This <a>'switch'</a> element and feature-availability test
+ facility (or their equivalents) are the recommended way for
+ XML authors to provide an alternate representation to SVG
+ content, such as an image or a text string. The following
+ example shows how to embed an SVG drawing within a SMIL 1.0
+ document such that an alternate image will display in the
+ event the user agent doesn't support SVG. Note that the
+ MIME type in the <span class='attr-name'>'type'</span> attribute
+ is an important means for the user agent to decide if it can decode
+ the referenced media.</p>
+
+ <p>In this example, the SVG content is included via a URL
+ reference. With some parent XML grammars it will also be
+ possible to include an SVG document fragment inline within
+ the same file as its parent grammar.</p>
+
+<pre>
+<?xml version="1.0" standalone="yes"?>
+<smil>
+ <body>
+ <!-- With SMIL 1.0, the first child element of 'switch'
+ which the SMIL 1.0 user agent is able to process
+ and which tests true will get processed and all other
+ child elements will have no visual effect. In this case,
+ if the SMIL 1.0 user agent can process "image/svg+xml",
+ then the SVG will appear; otherwise, the alternate image
+ (the second child element) will appear. -->
+ <switch>
+ <!-- Render the SVG if possible. -->
+ <ref type="image/svg+xml" src="drawing.svg" />
+ <!-- Else, render the alternate image. -->
+ <img src="alternate_image.jpg" />
+ </switch>
+ </body>
+</smil>
+</pre>
+ </li>
+
+ <li>
+ <p>For HTML 4, SVG drawings can be embedded using the
+ <span class='element-name'>'object'</span> element. An alternate
+ representation such as an image can be included as the content
+ of the <span class='element-name'>'object'</span> element. In
+ this case, the SVG content usually will be included via a URL
+ reference. The following example shows how to use the
+ <span class='element-name'>'object'</span> element to include an SVG
+ drawing via a URL reference with an image serving as the alternate
+ representation in the absence of an SVG user agent:</p>
+
+<pre>
+<html>
+ <body>
+ <object type="image/svg+xml" data="drawing.svg">
+ <!-- The contents of the 'object' element (i.e., an alternate
+ image) are drawn in the event the user agent cannot process
+ the SVG drawing. -->
+ <img src="alternate_image.jpg" alt="alternate description">
+ </object>
+ </body>
+</html>
+</pre>
+ </li>
+</ul>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/changes.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Changes</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Changes</h1>
+
+<p class="normativity"><em>This appendix is informative, not normative.</em></p>
+
+<p>The only changes made to the document since the
+ <a href="http://www.w3.org/TR/2011/PR-SVG11-20110609/">SVG 1.1 Second Edition Proposed Recommendation</a> were the following:</p>
+
+<ul>
+ <li>Some additional wording in the CSS 2.0 reference in the <a href='refs.html'>References Appendix</a> to
+ indicate that future versions of the SVG specification will reference CSS 2.1 and CSS Fonts Module Level 3.</li>
+ <li>An update to the informative MathML reference from MathML 2.0 to MathML 3.0.</li>
+</ul>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/color.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,497 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Color</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Color</h1>
+
+<h2 id="ColorIntroduction">Introduction</h2>
+
+<p>All SVG colors are specified in the sRGB color space
+[<a href="refs.html#ref-SRGB">SRGB</a>]. At a minimum, SVG user
+agents shall conform to the color behavior requirements specified in the
+<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#color-units">color units section</a>
+and the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/colors.html#gamma-correction">minimal gamma correction rules</a>
+defined in the CSS2 specification.</p>
+
+<p>Additionally, SVG content can specify an alternate color specification
+using an ICC profile [<a href="refs.html#ref-ICC42">ICC42</a>]
+as described in <a href="painting.html#SpecifyingPaint">Specifying paint</a>.
+If ICC-based colors are provided and the SVG user agent supports ICC color,
+then the ICC-based color takes precedence over the sRGB color specification;
+otherwise, the RGB fallback colors must be used.
+Note that, in this specification, color interpolation occurs in an RGB color space even if an
+ICC-based color specification is provided (see <a>'color-interpolation'</a>).</p>
+
+<h2 id="ColorProperty">The <span class="prop-name">'color'</span> property</h2>
+
+<p>The <a>'color'</a> property is 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.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'color'</span></dt>
+ <dd>
+ <table summary="color property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><a
+ href="types.html#DataTypeColor"><color></a> |
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>depends on user agent</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td>elements to which properties <a>'fill'</a>, <a>'stroke'</a>,
+ <a>'stop-color'</a>, <a>'flood-color'</a> and <a>'lighting-color'</a>
+ apply</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>Except for any additional information provided in this
+specification, the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/colors.html#propdef-color">normative definition of the property</a>
+is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 14.1).</p>
+
+<h2 id="ColorProfileDescriptions">Color profile descriptions</h2>
+
+<h3 id="ColorProfileDescriptionsOverview">Overview of color profile descriptions</h3>
+
+<p>The <a href="http://www.color.org/">International Color
+Consortium</a> has established a standard, the ICC Profile
+[<a href="refs.html#ref-ICC42">ICC42</a>], for
+documenting the color characteristics of input and output
+devices. Using these profiles, it is possible to build a
+transform and correct visual data for viewing on different
+devices.</p>
+
+<p>A <span class="SVG-Term">color profile description</span>
+provides the bridge between an ICC profile and references to
+that ICC profile within SVG content. The color profile
+description is added to the user agent's list of known color
+profiles and then used to select the relevant profile. The
+color profile description contains descriptors for the location
+of the color profile on the Web, a name to reference the
+profile and information about rendering intent.</p>
+
+<h3 id="ColorProfileAlternatives">Alternative ways of defining a color profile description</h3>
+
+<p>Color profile descriptions can be specified in either of the following ways:</p>
+
+<ul>
+ <li>a <a>'color-profile element'</a> element</li>
+
+ <li>an <em>@color-profile</em> rule within a CSS style sheet (only
+ applicable for user agents which support using CSS to style the SVG
+ content [<a href="refs.html#ref-CSS2">CSS2</a>])</li>
+</ul>
+
+<p>If a color profile with the same <em>name</em> value has
+been identified by both a <a>'color-profile element'</a> element and
+<em>@color-profile</em> rules within a CSS style sheet, then
+the user agent shall first attempt to locate the profile by
+using the specifications in the <em>@color-profile</em> rules
+first.</p>
+
+<h3 id="ColorProfileElement">The <span class="element-name">'color-profile'</span> element</h3>
+
+<edit:with element='color-profile'>
+
+<edit:elementsummary name='color-profile'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="ColorProfileElementHrefAttribute"><span class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>The location of an ICC profile resource.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="ColorProfileElementLocalAttribute"><span class="adef">local</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>The unique ID for a locally stored color profile.
+ <string> is the profile's unique ID as specified by
+ <a href="http://www.color.org/">International Color
+ Consortium</a>. If both the <a>'xlink:href'</a> and the <a>'local'</a>
+ attributes are specified,
+ then the user agent shall search the local system for the
+ locally stored color profile first, and, if not available
+ locally, then attempt to use the resource identified by the
+ <a>'xlink:href'</a> attribute. (Note:
+ Profile description fields do <em>not</em> represent a
+ profile's unique ID. With current ICC proposals, the
+ profile's unique ID is an MD5-encoded value within the
+ profile header.)<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="ColorProfileElementNameAttribute"><span class="adef">name</span> = "<span
+ class="attr-value"><name></span>"</dt>
+ <dd>The name which is used as the first parameter for <span
+ class="prop-value">icc-color</span> specifications within
+ <a>'fill'</a>, <a>'stroke'</a>, <a>'stop-color'</a>,
+ <a>'flood-color'</a> and <a>'lighting-color'</a> property
+ values to identify the color profile to use for the ICC
+ color specification and the name which can be the value of
+ the <a>'color-profile element'</a> property. Note
+ that if <name> is not provided, it will be impossible
+ to reference the given color profile description. The name
+ "sRGB" is predefined; any color profile descriptions with
+ <span class="attr-value"><name></span> set to "sRGB"
+ will be ignored. For consistency with <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/grammar.html#q2">CSS
+ lexical scanning and parsing rules</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section D.2), the keyword "sRGB"
+ is case-insensitive; however, it is recommended that the
+ mixed capitalization "sRGB" be used for consistency with
+ common industry practice.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="ColorProfileElementRenderingIntentAttribute"><span class="adef">rendering-intent</span> = "<span
+ class="attr-value">auto | perceptual |
+ relative-colorimetric | saturation |
+ absolute-colorimetric</span>"</dt>
+ <dd>
+ <p><a>'rendering-intent'</a>
+ permits the specification of a color profile rendering
+ intent other than the default. <a>'rendering-intent'</a> is applicable
+ primarily to color profiles corresponding to CMYK color
+ spaces. The different options cause different methods to
+ be used for translating colors to the color gamut of the
+ target rendering device:</p>
+ <dl>
+ <dt><span class='prop-value'>auto</span></dt>
+ <dd>This is the default behavior. The user agent
+ determines the best intent based on the content type.
+ For image content containing an embedded profile, it
+ shall be assumed that the intent specified within the
+ profile is the desired intent. Otherwise, the user
+ agent shall use the current profile and force the
+ intent, overriding any intent that might be stored in
+ the profile itself.</dd>
+ <dt><span class='prop-value'>perceptual</span></dt>
+ <dd>This method, often the preferred choice for images,
+ preserves the relationship between colors. It attempts
+ to maintain relative color values among the pixels as
+ they are mapped to the target device gamut. Sometimes
+ pixel values that were originally within the target
+ device gamut are changed in order to avoid hue shifts
+ and discontinuities and to preserve as much as possible
+ the overall appearance of the scene.</dd>
+ <dt><span class='prop-value'>saturation</span></dt>
+ <dd>Preserves the relative saturation (chroma) values
+ of the original pixels. Out of gamut colors are
+ converted to colors that have the same saturation but
+ fall just inside the gamut.</dd>
+ <dt><span class='prop-value'>relative-colorimetric</span></dt>
+ <dd>Leaves colors that fall inside the gamut unchanged.
+ This method usually converts out of gamut colors to
+ colors that have the same lightness but fall just
+ inside the gamut.</dd>
+ <dt><span class='prop-value'>absolute-colorimetric</span></dt>
+ <dd>Disables white point matching when converting
+ colors. This option is generally not recommended.</dd>
+ </dl>
+ <br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: no.</span>
+ </dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h3 id="ColorProfileAtRule">The CSS <strong>@color-profile</strong> rule</h3>
+
+<p>When the document is styled using CSS, the
+<strong>@color-profile</strong> rule can be used to specify a color
+profile description. The general form is:</p>
+
+<pre>
+@color-profile { <color-profile-description> }
+</pre>
+ where the <color-profile-description> has the form:
+<pre>
+descriptor: value;
+[...]
+descriptor: value;
+</pre>
+
+<p>Each @color-profile rule specifies a value for every color
+profile descriptor, either implicitly or explicitly. Those not
+given explicit values in the rule take the initial value listed
+with each descriptor in this specification. These descriptors
+apply solely within the context of the @color-profile rule in
+which they are defined, and do not apply to document language
+elements. Thus, there is no notion of which elements the
+descriptors apply to, or whether the values are inherited by
+child elements.</p>
+
+<p>The following are the descriptors for a <color-profile-description>:</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="ColorProfileSrcProperty"><span class="descdef-title prop-name">'src'</span></dt>
+ <dd>
+ <table
+ summary="src descriptor definition for @color-profile"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr>
+ <td><em>Values:</em></td>
+ <td>sRGB | <local-profile> | <a
+ href="types.html#DataTypeIRI"><iri></a> |
+ (<local-profile> <a
+ href="types.html#DataTypeIRI"><iri></a>) | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr>
+ <td><em>Initial:</em></td>
+ <td>sRGB</td>
+ </tr>
+ <tr>
+ <td><em>Media:</em></td>
+ <td>visual</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <dl>
+ <dt><span class='prop-value'>sRGB</span></dt>
+ <dd>The source profile is the sRGB color space. For
+ consistency with
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/grammar.html#q2">CSS lexical scanning and parsing rules</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section D.2), the keyword "sRGB" is
+ case-insensitive; however, it is recommended that the mixed
+ capitalization "sRGB" be used for consistency with common
+ industry practice.</dd>
+
+ <dt><span class='prop-value'><local-profile></span></dt>
+ <dd>
+ The source profile is a locally-stored profile. The syntax
+ for <local-profile> is:
+<pre>
+"local(" + <string> + ")"
+</pre>
+ where <string> is the profile's unique ID as
+ specified by <a href="http://www.color.org/">International
+ Color Consortium</a>. (Note: Profile description fields do
+ <em>not</em> represent a profile's unique ID. With current
+ ICC proposals, the profile's unique ID is an MD5-encoded
+ value within the profile header.)
+ </dd>
+
+ <dt><span class='prop-value'><a
+ href="types.html#DataTypeIRI"><iri></a></span></dt>
+ <dd>The source profile is a <a
+ href="linking.html#IRIReference">IRI reference</a>
+ to a color profile.</dd>
+
+ <dt>(<span class='prop-value'><local-profile> <a
+ href="types.html#DataTypeIRI"><iri></a>)</span></dt>
+ <dd>Two profiles are specified. If <local-profile>
+ cannot be found on the local system, then the <a
+ href="types.html#DataTypeIRI"><iri></a> is used.</dd>
+ </dl>
+
+ <div class="propdef">
+ <dl>
+ <dt id="ColorProfileNameProperty"><span class="descdef-title prop-name">'name'</span></dt>
+ <dd>
+ <table
+ summary="name descriptor definition for @color-profile"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr>
+ <td><em>Values:</em></td>
+ <td><name></td>
+ </tr>
+ <tr>
+ <td><em>Initial:</em></td>
+ <td>undefined</td>
+ </tr>
+ <tr>
+ <td><em>Media:</em></td>
+ <td>visual</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <dl>
+ <dt><span class='prop-value'><name></span></dt>
+ <dd>See the description for the <a>'color-profile/name'</a> attribute on the
+ <a>'color-profile element'</a> element. Note that if <name> is not
+ provided, it will be impossible to reference the given @color-profile
+ definition.</dd>
+ </dl>
+
+ <div class="propdef">
+ <dl>
+ <dt id="RenderingIntentProperty"><span class="descdef-title prop-name">'rendering-intent'</span></dt>
+ <dd>
+ <table
+ summary="rendering-intent descriptor definition for @color-profile"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr>
+ <td><em>Values:</em></td>
+ <td>auto | perceptual | relative-colorimetric |<br />
+ saturation | absolute-colorimetric</td>
+ </tr>
+ <tr>
+ <td><em>Initial:</em></td>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <td><em>Media:</em></td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>See the description for the <a>'color-profile/rendering-intent'</a> attribute on the
+<a>'color-profile element'</a> element.</p>
+
+<h3 id="ColorProfileProperty">The <span class="prop-name">'color-profile'</span> property</h3>
+
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'color-profile'</span></dt>
+ <dd>
+ <table summary="color-profile property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | sRGB | <name> | <a
+ href="types.html#DataTypeIRI"><iri></a> | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'image'</a> elements that
+ refer to raster images</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class='prop-value'>auto</span></dt>
+ <dd>This is the default behavior. All colors are presumed to
+ be defined in the sRGB color space unless a more precise
+ embedded profile is specified within content data. For images
+ that do have a profile built into their data, that profile is
+ used. For images that do not have a profile, the sRGB profile
+ is used.</dd>
+ <dt><span class='prop-value'>sRGB</span></dt>
+ <dd>The source profile is assumed to be sRGB. This differs
+ from auto in that it overrides an embedded profile inside an
+ image.<br />
+ <br />
+ For consistency with <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/grammar.html#q2">CSS lexical scanning and parsing rules</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section D.2), the keyword "sRGB" is
+ case-insensitive; however, it is recommended that the mixed
+ capitalization "sRGB" be used for consistency with common
+ industry practice.</dd>
+ <dt><span class='prop-value'><name></span></dt>
+ <dd>A name corresponding to a defined color profile that is
+ in the user agent's color profile description database. The
+ user agent searches the color profile description database
+ for a <a href="color.html#ColorProfileDescriptions">color
+ profile description</a> entry whose name descriptor matches
+ <name> and uses the last matching entry that is found.
+ If a match is found, the corresponding profile overrides an
+ embedded profile inside an image. If no match is found, then
+ the embedded profile inside the image is used.</dd>
+ <dt><span class='prop-value'><a
+ href="types.html#DataTypeIRI"><iri></a></span></dt>
+ <dd>A <a href="linking.html#IRIReference">IRI
+ reference</a> to the source color profile. The referenced
+ color profile overrides an embedded profile inside the
+ image.</dd>
+</dl>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGColorProfileElement">Interface SVGColorProfileElement</h3>
+
+<edit:with element='color-profile'>
+<edit:interface name='::svg::SVGColorProfileElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGColorProfileRule">Interface SVGColorProfileRule</h3>
+
+<edit:interface name='::svg::SVGColorProfileRule'/>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/concepts.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,233 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Concepts</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Concepts</h1>
+
+ <h2 id="Intro">Explaining the name: SVG</h2>
+ <p class="explain">SVG stands for <a
+ href="#Scalable">S</a>calable <a href="#Vector">V</a>ector <a
+ href="#Graphics">G</a>raphics, an <a href="#XML">XML</a>
+ grammar for <a href="#Stylable">stylable</a> graphics, usable
+ as an <a href="#Namespace">XML namespace</a>.</p>
+ <h3 id="Scalable" edit:toc="no">Scalable</h3>
+ <p>To be scalable means to increase or decrease uniformly. In
+ terms of graphics, scalable means not being limited to a
+ single, fixed, pixel size. On the Web, scalable means that a
+ particular technology can grow to a large number of files, a
+ large number of users, a wide variety of applications. SVG,
+ being a graphics technology for the Web, is scalable in both
+ senses of the word.</p>
+ <p>SVG graphics are scalable to different display resolutions,
+ so that for example printed output uses the full resolution of
+ the printer and can be displayed at the same size on screens of
+ different resolutions. The same SVG graphic can be placed at
+ different sizes on the same Web page, and re-used at different
+ sizes on different pages. SVG graphics can be magnified to see
+ fine detail, or to aid those with low vision.</p>
+ <p>SVG graphics are scalable because the same SVG content can
+ be a stand-alone graphic or can be referenced or included
+ inside other SVG graphics, thereby allowing a complex
+ illustration to be built up in parts, perhaps by several
+ people. The <a href="#Symbols">symbol</a>, marker and <a
+ href="#Fonts">font</a> capabilities promote re-use of graphical
+ components, maximize the advantages of HTTP caching and avoid
+ the need for a centralized registry of approved symbols.</p>
+ <h3 id="Vector" edit:toc="no">Vector</h3>
+ <p>Vector graphics contain geometric objects such as lines and
+ curves. This gives greater flexibility compared to raster-only
+ formats (such as PNG and JPEG) which have to store information
+ for every pixel of the graphic. Typically, vector formats can
+ also integrate raster images and can combine them with vector
+ information such as clipping paths to produce a complete
+ illustration; SVG is no exception.</p>
+ <p>Since all modern displays are raster-oriented, the
+ difference between raster-only and vector graphics comes down
+ to where they are rasterized; client side in the case of vector
+ graphics, as opposed to already rasterized on the server. SVG
+ gives control over the rasterization process, for example to
+ allow anti-aliased artwork without the ugly aliasing typical of
+ low quality vector implementations. SVG also provides
+ client-side <a href="#RasterEffects">raster filter effects</a>,
+ so that moving to a vector format does not mean the loss of
+ popular effects such as soft drop shadows.</p>
+ <h3 id="Graphics" edit:toc="no">Graphics</h3>
+ <p>Most existing XML grammars represent either textual
+ information, or represent raw data such as financial
+ information. They typically provide only rudimentary graphical
+ capabilities, often less capable than the HTML 'img' element.
+ SVG fills a gap in the market by providing a rich, structured
+ description of vector and mixed vector/raster graphics; it can
+ be used stand-alone, or as an <a href="#Namespace">XML
+ namespace</a> with other grammars.</p>
+ <h3 id="XML" edit:toc="no">XML</h3>
+ <p>XML, a for
+ structured information exchange, has become extremely popular
+ and is both widely and reliably implemented. By being written
+ in XML, SVG builds on this strong foundation and gains many
+ advantages such as a sound basis for internationalization,
+ powerful structuring capability, an object model, and so on. By
+ building on existing, cleanly-implemented specifications,
+ XML-based grammars are open to implementation without a huge
+ reverse engineering effort.</p>
+ <h3 id="Namespace" edit:toc="no">Namespace</h3>
+ <p>It is certainly useful to have a stand-alone, SVG-only
+ viewer. But SVG is also intended to be used as one component in
+ a multi-namespace XML application. This multiplies the power of
+ each of the namespaces used, to allow innovative new content to
+ be created. For example, SVG graphics may be included in a
+ document which uses any text-oriented XML namespace - including
+ XHTML. A scientific document, for example, might also use <a
+ href="http://www.w3.org/TR/2001/REC-MathML2-20010221/">MathML</a> for mathematics
+ in the document. The combination of SVG and SMIL leads to
+ interesting, time based, graphically rich presentations.</p>
+ <p>SVG is a good, general-purpose component for any
+ multi-namespace grammar that needs to use graphics.</p>
+ <h3 id="Stylable" edit:toc="no">Stylable</h3>
+ <p>The advantages of style sheets in terms of presentational
+ control, flexibility, faster download and improved maintenance
+ are now generally accepted, certainly for use with text. SVG
+ extends this control to the realm of graphics.</p>
+ <p>The combination of scripting, DOM and CSS is often termed
+ "Dynamic HTML" and is widely used for animation, interactivity
+ and presentational effects. SVG allows the same script-based
+ manipulation of the document tree and the style sheet.</p>
+ <h2 id="Concepts">Important SVG concepts</h2>
+ <h3 id="GraphicalObjects" edit:toc="no">Graphical Objects</h3>
+ <p>With any XML grammar, consideration has to be given to what
+ exactly is being modelled. For textual formats, modelling is
+ typically at the level of paragraphs and phrases, rather than
+ individual nouns, adverbs, or phonemes. Similarly, SVG models
+ graphics at the level of graphical objects rather than
+ individual points.</p>
+ <p>SVG provides a general path element, which can be used to
+ create a huge variety of graphical objects, and also provides
+ common <a href="intro.html#TermBasicShape">basic shapes</a>
+ such as rectangles and ellipses. These are convenient for hand
+ coding and may be used in the same ways as the more general
+ path element. SVG provides fine control over the coordinate
+ system in which graphical objects are defined and the
+ transformations that will be applied during rendering.</p>
+ <h3 id="Symbols" edit:toc="no">Symbols</h3>
+ <p>It would have been possible to define some standard symbols
+ that SVG would provide. But which ones? There would always be
+ additional symbols for electronics, cartography, flowcharts,
+ etc., that people would need that were not provided until the
+ "next version". SVG allows users to create, re-use and share
+ their own symbols without requiring a centralized registry.
+ Communities of users can create and refine the symbols that
+ they need, without having to ask a committee. Designers can be
+ sure exactly of the graphical appearance of the symbols they
+ use and not have to worry about unsupported symbols.</p>
+ <p>Symbols may be used at different sizes and orientations, and
+ can be restyled to fit in with the rest of the graphical
+ composition.</p>
+ <h3 id="RasterEffects" edit:toc="no">Raster Effects</h3>
+ <p>Many existing Web graphics use the filtering operations
+ found in paint packages to create blurs, shadows, lighting
+ effects and so on. With the client-side rasterization used with
+ vector formats, such effects might be thought impossible. SVG
+ allows the declarative specification of filters, either singly
+ or in combination, which can be applied on the client side when
+ the SVG is rendered. These are specified in such a way that the
+ graphics are still scalable and displayable at different
+ resolutions.</p>
+ <h3 id="Fonts" edit:toc="no">Fonts</h3>
+ <p>Graphically rich material is often highly dependent on the
+ particular font used and the exact spacing of the glyphs. In
+ many cases, designers convert text to outlines to avoid any
+ font substitution problems. This means that the original text
+ is not present and thus searchability and accessibility suffer.
+ In response to feedback from designers, SVG includes font
+ elements so that both text and graphical appearance are
+ preserved.</p>
+ <h3 id="Animation" edit:toc="no">Animation</h3>
+ <p>Animation can be produced via script-based manipulation of
+ the document, but scripts are difficult to edit and interchange
+ between authoring tools is harder. Again in response to
+ feedback from the design community, SVG includes declarative
+ animation elements which were designed collaboratively by the
+ SVG and SYMM Working Groups. This allows the animated effects
+ common in existing Web graphics to be expressed in SVG.</p>
+ <h2 id="UsageOptions">Options for using SVG in Web pages</h2>
+ <p>There are a variety of ways in which SVG content can be
+ included within a Web page. Here are some of the options:</p>
+ <dl>
+ <dt>A stand-alone SVG Web page</dt>
+ <dd> In this case, an SVG document (i.e., a Web resource whose
+ MIME type is "<tt>image/svg+xml</tt>") is loaded directly
+ into a user agent such as a Web browser. The SVG document is
+ the Web page that is presented to the user.</dd>
+ <dt>Embedding by reference</dt>
+ <dd>In this case, a parent Web page references a separately
+ stored SVG document and specifies that the given SVG
+ document should be embedded as a component of the parent
+ Web page. For HTML or XHTML, here are three options:
+ <ul>
+ <li>The HTML/XHTML <span
+ class="element-name">'img'</span> element is the most
+ common method for using graphics in HTML pages. For
+ faster display, the width and height of the image can be
+ given as attributes. One attribute that is required is
+ <span class="attr-name">'alt'</span>, used to give an
+ alternate textual string for people browsing with images
+ off, or who cannot see the images. The string cannot
+ contain any markup. A <span
+ class="attr-name">'longdesc'</span> attribute lets you
+ point to a longer description - often in HTML - which can
+ have markup and richer formatting.</li>
+ <li>The HTML/XHTML <span
+ class="element-name">'object'</span> element can contain
+ other elements nested within it, unlike <span
+ class="element-name">'img'</span>, which is empty. This
+ means that several different formats can be offered,
+ using nested <span class="element-name">'object'</span>
+ elements, with a final textual alternative (including
+ markup, links, etc). The outermost element which can be
+ displayed will be used.</li>
+ <li>The HTML/XHTML <span
+ class="element-name">'applet'</span> element which can
+ invoke a Java applet to view SVG content within the given
+ Web page. These applets can do many things, but a common
+ task is to use them to display images, particularly ones
+ in unusual formats or which need to be presented under
+ the control of a program for some other reason.</li>
+ </ul>
+ </dd>
+ <dt>Embedding inline</dt>
+ <dd>In this case, SVG content is embedded inline directly within
+ the parent Web page. An example is an XHTML Web page with an
+ SVG document fragment textually included within the
+ XHTML.</dd>
+ <dt>External link, using the HTML <span
+ class="element-name">'a'</span> element</dt>
+ <dd>This allows any stand-alone SVG viewer to be used, which can
+ (but need not) be a different program to that used to display
+ HTML. This option typically is used for unusual image
+ formats.</dd>
+ <dt>Referenced from a CSS or XSL property</dt>
+ <dd>When a user agent supports CSS-styled XML content [<a href="refs.html#ref-CSS2">CSS2</a>]
+ or XSL [<a href="refs.html#ref-XSL">XSL</a>] and the user agent is a <a
+ href="conform.html#ConformingSVGViewers">Conforming SVG
+ Viewer</a>, then that user agent must support the ability to
+ reference SVG resources wherever CSS or XSL properties allow
+ for the referencing of raster images, including the ability
+ to tile SVG graphics wherever necessary and the ability to
+ composite the SVG into the background if it has transparent
+ portions. Examples include the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/colors.html#propdef-background-image">
+ <span class="prop-name">'background-image'</span></a> and <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/generate.html#propdef-list-style-image">
+ <span class="prop-name">'list-style-image'</span></a>
+ properties ([<a href="refs.html#ref-CSS2">CSS2</a>], sections 14.2.1 and 12.6.2)
+ that are included in both CSS and XSL.</dd>
+ </dl>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/conform.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,419 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Conformance Criteria</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Conformance Criteria</h1>
+
+<p class="normativity"><strong>This appendix is normative.</strong></p>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>In order to ensure that SVG-family documents are maximally portable
+among SVG-family user agents, this specification rigidly defines
+conformance requirements for both, as well as for SVG-family document
+types. While the conformance definitions can be found in this appendix,
+they necessarily reference normative text within this document and
+within other related specifications. It is only possible to fully
+comprehend the conformance requirements of SVG through a complete
+reading of all normative references.</p>
+
+<h2 id="ConformingSVGDocuments">Conforming SVG Document Fragments</h2>
+
+<p>An SVG document fragment is a <em>Conforming SVG Document Fragment</em> if
+it adheres to the specification described in this document
+(<a href="index.html">Scalable Vector Graphics (SVG) Specification</a>) and also:</p>
+
+<ul>
+ <li>is <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-well-formed">XML well-formed</a>
+ ([<a href="refs.html#ref-XML10">XML10</a>], section 2.1),</li>
+
+ <li>conforms to the <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a>
+ specification [<a href="refs.html#ref-XML-NS">XML-NS</a>],</li>
+
+ <li>any CSS stylesheets conform to the core grammar of
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/"><cite>Cascading Style Sheets, level 2</cite></a>
+ [<a href="refs.html#ref-CSS2">CSS2</a>],</li>
+
+ <li>any <code><?xml-stylesheet?></code> processing instruction conforms to
+ <a href="http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/"><cite>Associating stylesheets with XML documents</cite></a>
+ [<a href='refs.html#ref-XML-SS'>XML-SS</a>],</li>
+
+ <li>and the document fragment is determined to be valid as follows:
+ <ol>
+ <li>Let <var>E</var> be the encoding of the XML document in which the SVG document fragment resides.</li>
+ <li>Let <var>V</var> be the XML version of the document in which the SVG document fragment resides.</li>
+ <li>Let <var>D</var> be an XML document constructed by concatenating:
+ <ul>
+ <li>an XML declaration identifying version <var>V</var> and encoding <var>E</var> (that is, <code><?xml version="<var>V</var>" encoding="<var>E</var>"?></code>),</li>
+ <li>the DOCTYPE declaration <code><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"></code>, and</li>
+ <li>the SVG document fragment with any entities expanded.</li>
+ </ul>
+ </li>
+ <li>Remove from <var>D</var> any subtree rooted by an element that is not in the SVG namespace.</li>
+ <li>Remove from <var>D</var> any attribute that is in a namespace that is not the XLink namespace or the Namespaces in XML namespace.</li>
+ <li>Remove the prefix from the name of any element in <var>D</var> that uses one.</li>
+ <li>Let <var>A</var> be the set of all attributes in <var>D</var> that are in the XLink namespace.</li>
+ <li>Set the attributes <span class='attr-value'>xmlns="http://www.w3.org/2000/svg"</span> and <span class='attr-value'>xmlns:xlink="http://www.w3.org/1999/xlink"</span> on <var>D</var>'s document element and remove any other attributes in the Namespaces in XML namespace from <var>D</var>.</li>
+ <li>Change the prefix of every attribute <var>A</var> to be <code>xlink</code>.</li>
+ <li>The document fragment is valid if <var>D</var> is a <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#dt-valid">valid XML document</a> ([<a href='refs.html#ref-XML10'>XML10</a>], section 2.8).</li>
+ </ol>
+ </li>
+</ul>
+
+<p>SVG document fragments can be included within parent XML documents using
+the XML namespace facilities described in
+<a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/">Namespaces in XML</a> [<a href='refs.html#ref-XML-NS'>XML-XS</a>].
+Note, however, that since a Conforming SVG Document Fragment must have an
+<a>'svg'</a> element as its root, the use of an individual non-<a>'svg'</a>
+element from the SVG namespace is disallowed. Thus, the SVG part of the
+following document is <em>not</em> conforming:</p>
+
+<pre><?xml version="1.0" standalone="no"?>
+<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
+<ParentXML>
+ <!-- Elements from ParentXML go here -->
+ <!-- The following is <strong>not</strong> conforming -->
+ <z:rect xmlns:z="http://www.w3.org/2000/svg"
+ x="0" y="0" width="10" height="10" />
+ <!-- More elements from ParentXML go here -->
+</ParentXML></pre>
+
+<p>Instead, for the SVG part to become a Conforming SVG Document Fragment,
+the file could be modified as follows:</p>
+
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
+<ParentXML>
+ <!-- Elements from ParentXML go here -->
+ <!-- The following is conforming -->
+ <z:svg xmlns:z="http://www.w3.org/2000/svg"
+ width="100px" height="100px">
+ <z:rect x="0" y="0" width="10" height="10"/>
+ </z:svg>
+ <!-- More elements from ParentXML go here -->
+</ParentXML>
+</pre>
+
+<p>The SVG language or these conformance criteria provide no designated
+size limits on any aspect of SVG content. There are no maximum values on
+the number of elements, the amount of character data, or the number of
+characters in attribute values.</p>
+
+<h2 id="ConformingSVGStandAloneFiles">Conforming SVG Stand-Alone Files</h2>
+
+<p>A file is a <em>Conforming SVG Stand-Alone File</em> if:</p>
+
+<ul>
+ <li>it is an XML document,</li>
+ <li>its root element is an <a>'svg'</a> element, and</li>
+ <li>the SVG document fragment rooted at the document element is a <a href="#ConformingSVGDocuments">Conforming SVG Document Fragment</a>.</li>
+</ul>
+
+<h2 id="ConformingSVGGenerators">Conforming SVG Generators</h2>
+
+ <p>A <em>Conforming SVG Generator</em> is a program which:</p>
+ <ul>
+ <li>always creates <a
+ href="#ConformingSVGDocuments">Conforming SVG Document
+ Fragments</a> and/or <a
+ href="#ConformingSVGStandAloneFiles">Conforming SVG
+ Stand-Alone Files</a>.</li>
+ <li>does not create non-conforming SVG document fragments of
+ the above types.</li>
+ </ul>
+ <p>Additionally, an authoring tool which is a Conforming SVG
+ Generator conforms to all of the Priority 1 accessibility
+ guidelines from the document <a href="http://www.w3.org/TR/2000/REC-ATAG10-20000203/"><cite>Authoring Tool Accessibility
+ Guidelines 1.0</cite></a> [<a href="refs.html#ref-ATAG">ATAG</a>] that are relevant
+ to generators of SVG content. (Priorities 2 and 3 are
+ encouraged but not required for conformance.)</p>
+ <p>SVG generators are encouraged to follow <a
+ href="http://www.w3.org/International/">W3C developments in the
+ area of internationalization</a>. Of particular interest is the
+ <em>W3C Character Model</em> and the concept of <em>Webwide
+ Early Uniform Normalization</em>, which promises to enhance the
+ interchangability of Unicode character data across users and
+ applications. Future versions of the SVG specification are
+ likely to require support of the <em>W3C Character Model</em>
+ in Conforming SVG Generators.</p>
+
+ <h2 id="ConformingSVGServers">Conforming SVG Servers</h2>
+ <p>
+ Conforming SVG Servers must meet all the requirements of a Conforming SVG Generator. In addition, Conforming SVG Servers using
+ HTTP or other protocols that use Internet Media types must serve SVG stand-alone files with the media type <code>"image/svg+xml"</code>.
+ </p>
+ <p>
+ Also, if the SVG file is compressed with gzip or deflate, Conforming SVG Servers must indicate this with the appropriate header, according
+ to what the protocol supports. Specifically, for content compressed by the server immediately prior to transfer, the server must use the
+ "Transfer-Encoding: gzip" or "Transfer-Encoding: deflate" headers as appropriate, and for content stored in a compressed
+ format on the server (e.g. with the file extension "svgz"), the server must use the "Content-Encoding: gzip" or
+ "Content-Encoding: deflate" headers as appropriate.
+ </p>
+
+ <p><em>Note:</em> Compression of stored <em>content</em> (the "entity," in HTTP terms) is distinct from automatic compression of the
+ <em>message body</em>, as defined in HTTP/1.1
+ <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.39">TE</a>/
+ <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.41">Transfer Encoding</a>
+ ([<a href="refs.html#ref-RFC2616">RFC2616</a>], sections 14.39 and 14.41).</p>
+
+<h2 id="ConformingSVGDOMSubtree">Conforming SVG DOM Subtree</h2>
+
+<p>A DOM subtree rooted at a given element is a <em>Conforming SVG DOM Subtree</em>
+if, once serialized to XML, is a <a href="#ConformingSVGDocuments">Conforming SVG Document Fragment</a>.
+If the DOM subtree cannot be serialized to XML, such as when a
+<a>Comment</a> node's data contains the substring "--", then the subtree is not
+a Conforming SVG DOM Subtree.</p>
+
+<h2 id="ConformingSVGInterpreters">Conforming SVG Interpreters</h2>
+
+ <p>An SVG interpreter is a program which can parse and process
+ SVG document fragments. Examples of SVG interpreters are
+ server-side transcoding tools (e.g., a tool which converts SVG
+ content into modified SVG content) or analysis tools (e.g., a
+ tool which extracts the text content from SVG content). An <a
+ href="conform.html#ConformingSVGViewers">SVG viewer</a> also
+ satisfies the requirements of an SVG interpreter in that it can
+ parse and process SVG document fragments, where processing
+ consists of rendering the SVG content to the target medium.</p>
+ <p>In a <em>Conforming SVG Interpreter</em>, the XML parser
+ must be able to parse and process all XML constructs defined
+ within <a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML 1.0</a>
+ [<a href="refs.html#ref-XML10">XML10</a>] and
+ <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a>
+ [<a href="refs.html#ref-XML-NS">XML-NS</a>].</p>
+ <p>There are two sub-categories of <em>Conforming SVG
+ Interpreters</em>:</p>
+ <ul>
+ <li><em>Conforming Static SVG Interpreters</em> must be able
+ to parse and process the static language features of SVG that
+ correspond to the feature string "http://www.w3.org/TR/SVG11/feature#SVG-static" (see <a
+ href="svgdom.html#FeatureStrings">Feature strings</a>).</li>
+ <li>In addition to the requirements for the static category,
+ <em>Conforming Dynamic SVG Interpreters</em> must be able to
+ parse and process the language features of SVG that
+ correspond to the feature string "http://www.w3.org/TR/SVG11/feature#SVG-dynamic" (see
+ <a href="svgdom.html#FeatureStrings">Feature strings</a>) and
+ which support all of the required features in the <a
+ href="svgdom.html">SVG DOM</a> described in this
+ specification.</li>
+ </ul>
+ <p>A Conforming SVG Interpreter must parse any SVG document
+ correctly. It is not required to interpret the semantics of all
+ features correctly.</p>
+ <p>Note: A transcoder from SVG into another graphics
+ representation, such as an SVG-to-raster transcoder, represents
+ a viewer, and thus viewer conformance criteria apply. (See <a
+ href="conform.html#ConformingSVGViewers">Conforming SVG
+ Viewers</a>.)</p>
+
+<h2 id="ConformingSVGViewers">Conforming SVG Viewers</h2>
+
+ <p>An SVG viewer is a program which can parse and process an
+ SVG document fragment and render the contents of the document
+ onto some sort of output medium such as a display or printer;
+ thus, an <em>SVG Viewer</em> is also an <em>SVG
+ Interpreter</em>.</p>
+ <p>There are two sub-categories of <em>Conforming SVG
+ Viewers</em>:</p>
+ <ul>
+ <li><em>Conforming Static SVG Viewers</em> support the static
+ language features of SVG that correspond to the feature
+ string "http://www.w3.org/TR/SVG11/feature#SVG-static" (see <a
+ href="svgdom.html#FeatureStrings">Feature strings</a>). This
+ category often corresponds to platforms and environments
+ which only render static documents, such as printers.</li>
+ <li><em>Conforming Dynamic SVG Viewers</em> support the
+ language features of SVG that correspond to the feature
+ string "http://www.w3.org/TR/SVG11/feature#SVG-dynamic" (see <a
+ href="svgdom.html#FeatureStrings">Feature strings</a>). This
+ category often applies to platforms and environments such as
+ common Web browsers which support user interaction and
+ dynamic document content (i.e., documents whose content can
+ change over time). (User interaction includes support for
+ hyperlinking, events [e.g., mouse clicks], text selection,
+ zooming and panning [see <a
+ href="interact.html">Interactivity</a>]. Dynamic document
+ content can be achieved via <a
+ href="animate.html">declarative animation</a> or by scripts
+ modifying the <a href="svgdom.html">SVG DOM</a>.)</li>
+ </ul>
+ <p>Specific criteria that apply to both <em>Conforming Static
+ SVG Viewers</em> and <em>Conforming Dynamic SVG
+ Viewers</em>:</p>
+ <ul>
+ <li>The program must also be a <a
+ href="#ConformingSVGInterpreters">Conforming SVG
+ Interpreter</a>,</li>
+ <li>For interactive user environments, facilities must exist
+ for zooming and panning of stand-alone SVG documents or SVG
+ document fragments embedded within parent XML documents.</li>
+ <li>In environments that have appropriate user interaction
+ facilities, the viewer must support the ability to activate
+ hyperlinks.</li>
+ <li>If printing devices are supported, SVG content must be
+ printable at printer resolutions with the same graphics
+ features available as required for display (e.g., the
+ specified colors must be rendered on color printers).</li>
+ <li>On systems where this information is available, the
+ parent environment must provide the viewer with information
+ about physical device resolution. In situations where this
+ information is impossible to determine, the parent
+ environment shall pass a reasonable value for device
+ resolution which tends to approximate most common target
+ devices.</li>
+ <li>The viewer must support JPEG and PNG
+ image formats [<a href="refs.html#ref-JPEG">JPEG</a>] [<a href="refs.html#ref-PNG">PNG</a>].</li>
+ <li>Resampling of image data must be consistent with the
+ specification of property <a>'image-rendering'</a>.</li>
+ <li>The viewer must support alpha channel blending of the
+ image of the SVG content onto the target canvas.</li>
+ <li>SVG implementations must correctly support <a
+ href="http://www.ietf.org/rfc/rfc1952.txt">gzip-encoded</a>
+ [<a href="refs.html#ref-RFC1952">RFC1952</a>] and <a
+ href="http://www.ietf.org/rfc/rfc1951.txt">deflate-encoded</a>
+ [<a href="refs.html#ref-RFC1951">RFC1951</a>] data streams,
+ for any content type (including SVG, script files, images).
+ SVG implementations that support HTTP must support these
+ encodings according to the <a
+ href="http://www.ietf.org/rfc/rfc2616.txt">HTTP 1.1</a>
+ specification [<a href="refs.html#ref-RFC2616">RFC2616</a>];
+ in particular, the client must specify with an "Accept-Encoding:"
+ request header [<a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.3">HTTP-ACCEPT-ENCODING</a>]
+ those encodings that it accepts, including at minimum gzip
+ and deflate, and then decompress any <a
+ href="http://www.ietf.org/rfc/rfc1952.txt">gzip-encoded</a> and
+ <a href="http://www.ietf.org/rfc/rfc1951.txt">deflate-encoded</a>
+ data streams that are downloaded from the server. When an SVG
+ viewer retrieves compressed content (e.g., an .svgz file) over
+ HTTP, if the "Content-Encoding" and "Transfer-Encoding" response
+ headers are missing or specify a value that does not match the
+ compression method that has been applied to the content, then
+ the SVG viewer must not render the content and must treat the
+ document as being <a href="implnote.html#ErrorProcessing">in error</a>.</li>
+ <li>The viewer must support base64 encoded content using the
+ <a href="http://www.ietf.org/rfc/rfc2397.txt">"data:" URL scheme</a>
+ [<a href="refs.html#ref-RFC2397">RFC2397</a>]
+ wherever URI referencing of whole documents (such as raster images,
+ SVG documents, fonts and color profiles) is permitted within
+ SVG content. (Note: fragments of SVG content which do not
+ constitute an entire SVG document are not available using the
+ "data:" URL scheme.)</li>
+ <li>
+ The viewer must support the following W3C Recommendations
+ with regard to SVG content:
+ <ul>
+ <li>complete support for the <a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML 1.0 specification</a>
+ [<a href="refs.html#ref-XML10">XML10</a>].</li>
+ <li>complete support for inclusion of non-SVG namespaces
+ within SVG content as defined in <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a>
+ [<a href="refs.html#ref-XML-NS">XML-NS</a>].
+ (Note that data from non-SVG namespaces are included in
+ the DOM but are otherwise ignored.)</li>
+ </ul>
+ </li>
+ <li>All visual rendering must be accurate to within one
+ device pixel (px unit) to the mathematically correct result
+ at the initial 1:1 zoom ratio. It is suggested that viewers
+ attempt to keep a high degree of accuracy when zooming.</li>
+ <li>On systems which support accurate sRGB
+ [<a href="refs.html#ref-SRGB">SRGB</a>] color, all
+ sRGB color computations and all resulting color values must
+ be accurate to within one sRGB color component value, where
+ sRGB color component values range from 0 to 255.</li>
+ </ul>
+ <p>Although anti-aliasing support is not a strict requirement
+ for a Conforming SVG Viewer, it is highly recommended for
+ display devices. Lack of anti-aliasing support will generally
+ result in poor results on display devices.</p>
+ <p>Specific criteria that apply to only <em>Conforming Dynamic
+ SVG Viewers</em>:</p>
+ <ul>
+ <li>In Web browser environments, the viewer must have the
+ ability to search and select text strings within SVG
+ content.</li>
+ <li>If display devices are supported, the viewer must have
+ the ability to select and copy text from SVG content to the
+ system clipboard.</li>
+ <li>The viewer must have complete support for an
+ ECMAScript binding of the <a href="svgdom.html">SVG Document Object
+ Model</a> [<a href="refs.html#ref-ECMA-262">ECMA-262</a>].</li>
+ </ul>
+ <p>The <a href="http://www.w3.org/WAI/">Web Accessibility Initiative</a>
+ is defining <a href="http://www.w3.org/TR/2002/REC-UAAG10-20021217/"><cite>User Agent Accessibility Guidelines 1.0</cite></a>
+ [<a href="refs.html#ref-UAAG">UAAG</a>]. Viewers are
+ encouraged to conform to the Priority 1 accessibility
+ guidelines defined in this document, and preferably also
+ Priorities 2 and 3. Once the guidelines are completed, a future
+ version of this specification is likely to require conformance
+ to the Priority 1 guidelines in Conforming SVG Viewers.</p>
+
+ <p id="ConformingHighQualitySVGViewers">A higher order concept is that of a <em>Conforming
+ High-Quality SVG Viewer</em>, with sub-categories
+ <em>Conforming High-Quality Static SVG Viewer</em> and
+ <em>Conforming High-Quality Dynamic SVG Viewer</em>.</p>
+ <p>Both a <em>Conforming High-Quality Static SVG Viewer</em>
+ and a <em>Conforming High-Quality Dynamic SVG Viewer</em> must
+ support the following additional features:</p>
+ <ul>
+ <li>Professional-quality results with good processing and
+ rendering performance and smooth, flicker-free
+ animations.</li>
+ <li>On low-resolution devices such as display devices at
+ 150dpi or less, support for smooth edges on lines, curves and
+ text. (Smoothing is often accomplished using anti-aliasing
+ techniques.)</li>
+ <li>Color management via ICC profile support (i.e., the
+ ability to support colors defined using ICC profiles).</li>
+ <li>Resampling of image data must conform to the requirements
+ for Conforming High-Quality SVG Viewers as specified in the
+ description of property <a>'image-rendering'</a>.</li>
+ <li>At least double-precision floating point computation on
+ coordinate system transformation numerical calculations.</li>
+ </ul>
+ <p>A <em>Conforming High-Quality Dynamic SVG Viewer</em> must
+ support the following additional features:</p>
+ <ul>
+ <li>Progressive rendering and animation effects (i.e., the
+ start of the document will start appearing and animations
+ will start running in parallel with downloading the rest of
+ the document).</li>
+ <li>Restricted screen updates (i.e., only required areas of
+ the display are updated in response to redraw events).</li>
+ <li>Background downloading of images and fonts retrieved from
+ a Web server, with updating of the display once the downloads
+ are complete.</li>
+ </ul>
+ <p>A <em>Conforming SVG Viewer</em> must be able to apply
+ styling properties to SVG content using <a
+ href="styling.html#AlternativesForStyling">presentation
+ attributes</a>.</p>
+ <p>If the user agent supports <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/"><cite>Cascading Style Sheets, level 2</cite></a>
+ [<a href="refs.html#ref-CSS2">CSS2</a>], a
+ <em>Conforming SVG Viewer</em> must support CSS styling of SVG
+ content and must support all features from
+ CSS2 that are described in this specification as applying to SVG (see
+ <a href="styling.html#PropertiesFromCSS2">properties shared with CSS and XSL</a>,
+ <a href="styling.html#StylingWithCSS">Styling with CSS</a> and
+ <a href="styling.html#SVGUseOfCSS">Facilities from CSS and XSL used by SVG</a>).
+ The supported features from CSS2 must be implemented in accordance with
+ the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/conform.html#conformance">conformance
+ definitions from the CSS2 specification</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 3.2).</p>
+ <p>If the user agent includes an HTML or XHTML viewing
+ capability or can apply CSS/XSL styling properties to XML
+ documents, then a <em>Conforming SVG Viewer</em> must support
+ resources of MIME type "image/svg+xml" wherever raster image
+ external resources can be used, such as in the HTML or XHTML
+ <span class="element-name">'img'</span> element and in CSS/XSL
+ properties that can refer to raster image resources (e.g.,
+ <span class="prop-name">'background-image'</span>).</p>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/coords.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1571 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Coordinate Systems, Transformations and Units</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Coordinate Systems, Transformations and Units</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+ <p>For all media, the <span id='SVGCanvas'><span id="SVGViewport" class="SVG-Term">SVG canvas</span></span>
+ describes "the space where the SVG content is rendered." The
+ canvas is infinite for each dimension of the space, but
+ rendering occurs relative to a finite rectangular region of the
+ canvas. This finite rectangular region is called the <span
+ class="SVG-Term">SVG viewport</span>. 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 SVG viewport is the viewing area where the user sees the SVG content.</p>
+ <p>The size of the SVG viewport (i.e., its width and height) is
+ determined by a negotiation process (see <a
+ href="#ViewportSpace">Establishing the size of the initial
+ viewport</a>) between the SVG document fragment and its parent
+ (real or implicit). Once that negotiation process is completed,
+ the SVG user agent is provided the following information:</p>
+ <ul>
+ <li>a number (usually an integer) that represents the width
+ in "pixels" of the viewport</li>
+ <li>a number (usually an integer) that represents the height
+ in "pixels" of the viewport</li>
+ <li>(highly desirable but not required) a real number value
+ that indicates the size in real world units, such as
+ millimeters, of a "pixel" (i.e., a <em>px</em> unit
+ <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units'>as defined in CSS2</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 4.3.2)</li>
+ </ul>
+ <p id="SVGInitialUserCoordinateSystem">Using the above information, the SVG user agent determines
+ the <span class="SVG-Term">viewport</span>, an initial <span
+ class="SVG-Term">viewport coordinate system</span> and an
+ initial <span class="SVG-Term">user coordinate system</span>
+ such that the two coordinates systems are identical. Both
+ coordinates systems are established such that the origin
+ matches the origin of the viewport (for the root viewport, the
+ viewport origin is at the top/left corner), and one unit in the
+ initial coordinate system equals one "pixel" in the viewport.
+ (See <a href="coords.html#InitialCoordinateSystem">Initial
+ coordinate system</a>.) The viewport coordinate system is also
+ called <span class="SVG-Term">viewport space</span> and the
+ user coordinate system is also called <span
+ class="SVG-Term">user space</span>.</p>
+ <p id="LengthsInSVG">Lengths in SVG can be specified as:</p>
+ <ul>
+ <li>(if no unit identifier is provided) values in user space
+ — for example, "15"</li>
+ <li>(if a unit identifier is provided) a length expressed as
+ an absolute or relative unit measure — for example, "15mm"
+ or "5em"</li>
+ </ul>
+ <p>The supported length unit identifiers are: em, ex, px, pt,
+ pc, cm, mm, in, and percentages.</p>
+ <p>A new user space (i.e., a new current coordinate system) can
+ be established at any place within an SVG document fragment by
+ specifying <span class="SVG-Term">transformations</span> in the
+ form of <span class="SVG-Term">transformation matrices</span>
+ or simple transformation operations such as rotation, skewing,
+ scaling and translation. Establishing new user spaces via <a
+ href="#EstablishingANewUserSpace">coordinate system
+ transformations</a> are fundamental operations to 2D graphics
+ and represent the usual method of controlling the size,
+ position, rotation and skew of graphic objects.</p>
+ <p>New viewports also can be established. By <a
+ href="#EstablishingANewViewport">establishing a new
+ viewport</a>, you can redefine the meaning of percentages units
+ and provide a new reference rectangle for "fitting" a graphic
+ into a particular rectangular area. ("Fit" means that a given
+ graphic is transformed in such a way that its bounding box in
+ user space aligns exactly with the edges of a given
+ viewport.)</p>
+ <h2 id="ViewportSpace">The initial viewport</h2>
+ <p>The SVG user agent negotiates with its parent user agent to
+ determine the viewport into which the SVG user agent can render
+ the document. In some circumstances, SVG content will be
+ embedded (<a href="concepts.html#UsageOptions">by reference or
+ inline</a>) within a containing document. This containing
+ document might include attributes, properties and/or other
+ parameters (explicit or implicit) which specify or provide
+ hints about the dimensions of the viewport for the SVG content.
+ SVG content itself optionally can provide information about the
+ appropriate viewport region for the content via the <a>'svg/width'</a>
+ and <a>'svg/height'</a> XML attributes on the <a>outermost svg element</a>.
+ The negotiation process uses any information provided by the
+ containing document and the SVG content itself to choose the
+ viewport location and size.</p>
+ <p>The <a>'svg/width'</a> attribute on the
+ <a>outermost svg element</a>
+ establishes the viewport's width, unless the following
+ conditions are met:</p>
+ <ul>
+ <li>the SVG content is a separately stored resource that is
+ embedded by reference (such as the <span
+ class="element-name">'object'</span> element in XHTML [<a
+ href="refs.html#ref-XHTML">XHTML</a>]), or the SVG
+ content is embedded inline within a containing document;</li>
+ <li>and the referencing element or containing document is
+ styled using CSS [<a href="refs.html#ref-CSS2">CSS2</a>] or
+ XSL [<a href="refs.html#ref-XSL">XSL</a>];</li>
+ <li>and there are <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#positioning-scheme">CSS-compatible positioning properties</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 9.3)
+ specified on the referencing element (e.g.,
+ the <span class="element-name">'object'</span> element) or on
+ the containing document's <a>outermost svg element</a> that are sufficient
+ to establish the width of the viewport.</li>
+ </ul>
+ <p>Under these conditions, the positioning properties establish
+ the viewport's width.</p>
+ <p>Similarly, if there are
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#positioning-scheme">positioning properties</a>
+ specified on the referencing element or on the
+ <a>outermost svg element</a> that are
+ sufficient to establish the height of the viewport, then these
+ positioning properties establish the viewport's height;
+ otherwise, the <a>'svg/height'</a> attribute
+ on the <a>outermost svg element</a>
+ establishes the viewport's height.</p>
+ <p>If the <a>'svg/width'</a> or <a>'svg/height'</a>
+ attributes on the <a>outermost svg element</a>
+ are in <a
+ href="intro.html#TermUserUnits">user units</a> (i.e., no unit
+ identifier has been provided), then the value is assumed to be
+ equivalent to the same number of "px" units (see <a
+ href="coords.html#Units">Units</a>).</p>
+ <p>In the following example, an SVG graphic is embedded inline
+ within a parent XML document which is formatted using CSS
+ layout rules. Since CSS positioning properties are not provided
+ on the <a>outermost svg element</a>,
+ the <span class="attr-value">width="100px"</span> and
+ <span class="attr-value">height="200px"</span> attributes
+ determine the size of the initial viewport:</p>
+<pre>
+<?xml version="1.0" standalone="yes"?>
+<parent xmlns="http://some.url">
+
+ <!-- SVG graphic -->
+ <svg xmlns='http://www.w3.org/2000/svg'
+ width="100px" height="200px" version="1.1">
+ <path d="M100,100 Q200,400,300,100"/>
+ <!-- rest of SVG graphic would go here -->
+ </svg>
+
+</parent>
+</pre>
+ <p>The initial clipping path for the SVG document fragment is
+ established according to the rules described in <a
+ href="masking.html#InitialClippingPath">The initial clipping
+ path</a>.</p>
+
+ <h2 id="InitialCoordinateSystem">The initial coordinate system</h2>
+ <p>For the <a>outermost svg element</a>, the SVG user
+ agent determines an initial <span class="SVG-Term">viewport
+ coordinate system</span> and an initial <span
+ class="SVG-Term">user coordinate system</span> such that the
+ two coordinates systems are identical. The origin of both
+ coordinate systems is at the origin of the viewport, and one
+ unit in the initial coordinate system equals one "pixel" (i.e.,
+ a <em>px</em> unit <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units">as defined in CSS2</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 4.3.2)
+ in the viewport. In most cases, such as
+ stand-alone SVG documents or SVG document fragments embedded
+ (<a href="concepts.html#UsageOptions">by reference or
+ inline</a>) within XML parent documents where the parent's
+ layout is determined by CSS [<a href="refs.html#ref-CSS2">CSS2</a>] or
+ XSL [<a href="refs.html#ref-XSL">XSL</a>], the initial viewport
+ coordinate system (and therefore the initial user coordinate
+ system) has its origin at the top/left of the viewport, with
+ the positive x-axis pointing towards the right, the positive
+ y-axis pointing down, and text rendered with an "upright"
+ orientation, which means glyphs are oriented such that Roman
+ characters and full-size ideographic characters for Asian
+ scripts have the top edge of the corresponding glyphs oriented
+ upwards and the right edge of the corresponding glyphs oriented
+ to the right.</p>
+ <p>If the SVG implementation is part of a user agent which
+ supports styling XML documents using CSS2 compatible
+ <em>px</em> units, then the SVG user agent should get its
+ initial value for the size of a <em>px</em> unit in real world
+ units to match the value used for other XML styling operations;
+ otherwise, if the user agent can determine the size of a
+ <em>px</em> unit from its environment, it should use that
+ value; otherwise, it should choose an appropriate size for one
+ <em>px</em> unit. In all cases, the size of a <em>px</em> must
+ be in conformance with <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units">the rules described in CSS2</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 4.3.2).</p>
+
+ <p id="ExampleInitialCoords"><span class="example-ref">Example InitialCoords</span> below
+ shows that the initial coordinate system has the origin at the
+ top/left with the x-axis pointing to the right and the y-axis
+ pointing down. The initial user coordinate system has one user
+ unit equal to the parent (implicit or explicit) user agent's
+ "pixel".</p>
+
+<edit:example href='images/coords/InitialCoords.svg' name='InitialCoords' description="SVG's initial coordinate system" image='yes' link='yes'/>
+
+ <h2 id="EstablishingANewUserSpace">Coordinate system transformations</h2>
+ <p>A new user space (i.e., a new current coordinate system) can
+ be established by specifying <span
+ class="SVG-Term">transformations</span> in the form of a <a>'transform'</a>
+ attribute on a container element or graphics element or a
+ <a>'viewBox'</a> attribute on an
+ <a>'svg'</a>,
+ <a>'symbol'</a>,
+ <a>'marker element'</a>,
+ <a>'pattern'</a> and the
+ <a>'view'</a> element.
+ The <a>'transform'</a> and <a>'viewBox'</a> attributes transform user
+ space coordinates and lengths on sibling attributes on the
+ given element (see <a
+ href="coords.html#TransformAttributeEffectOnSiblingAttributes">effect
+ of the <span class="attr-name">'transform'</span> attribute on
+ sibling attributes</a> and <a
+ href="coords.html#ViewBoxAttributeEffectOnSiblingAttributes">effect
+ of the <span class="attr-name">'viewBox'</span> attribute on
+ sibling attributes</a>) and all of its descendants.
+ Transformations can be nested, in which case the effect of the
+ transformations are cumulative.</p>
+ <p id="ExampleOrigCoordSys"><span class="example-ref">Example OrigCoordSys</span> below
+ shows a document without transformations. The text string is
+ specified in the <a
+ href="coords.html#InitialCoordinateSystem">initial coordinate
+ system</a>.</p>
+
+<edit:example href='images/coords/OrigCoordSys.svg' name='OrigCoordSys' description="SVG's initial coordinate system" image='yes' link='yes'/>
+
+ <p id="ExampleNewCoordSys"><span class="example-ref">Example NewCoordSys</span>
+ establishes a new user coordinate system by specifying <span
+ class="attr-value">transform="translate(50,50)"</span> on the
+ third <a>'g'</a> element below. The
+ new user coordinate system has its origin at location (50,50)
+ in the original coordinate system. The result of this
+ transformation is that the coordinate (30,30) in the new user
+ coordinate system gets mapped to coordinate (80,80) in the
+ original coordinate system (i.e., the coordinates have been
+ translated by 50 units in X and 50 units in Y).</p>
+
+<edit:example href='images/coords/NewCoordSys.svg' name='NewCoordSys' description="New user coordinate system" image='yes' link='yes'/>
+
+ <p id="ExampleRotateScale"><span class="example-ref">Example RotateScale</span>
+ illustrates simple <strong>rotate</strong> and
+ <strong>scale</strong> transformations. The example defines two
+ new coordinate systems:</p>
+ <ul>
+ <li>one which is the result of a translation by 50 units in X
+ and 30 units in Y, followed by a rotation of 30 degrees</li>
+ <li>another which is the result of a translation by 200 units
+ in X and 40 units in Y, followed by a scale transformation of
+ 1.5.</li>
+ </ul>
+
+<edit:example href='images/coords/RotateScale.svg' name='RotateScale' description="Rotate and scale transforms" image='yes' link='yes'/>
+
+ <p id="ExampleSkew"><span class="example-ref">Example Skew</span> defines two
+ coordinate systems which are <strong>skewed</strong> relative
+ to the origin coordinate system.</p>
+
+<edit:example href='images/coords/Skew.svg' name='Skew' description="Show effects of skewX and skewY" image='yes' link='yes'/>
+
+ <p id="TransformMatrixDefined">Mathematically, all transformations can be represented as
+ 3x3 <span class="SVG-Term">transformation matrices</span> of
+ the following form:<br />
+ <img
+ src="images/coords/Matrix.png"
+ alt="3-by-3 transformation matrix" width="104"
+ height="83" /></p>
+ <p>Since only six values are used in the above 3x3 matrix, a
+ transformation matrix is also expressed as a vector: <strong>[a
+ b c d e f]</strong>.</p>
+ <p>Transformations map coordinates and lengths from a new
+ coordinate system into a previous coordinate system:<br />
+ <img
+ src="images/coords/MatrixMultiply.png"
+ alt="3-by-3 transformation matrix" width="408"
+ height="83" /></p>
+ <p>Simple transformations are represented in matrix form as
+ follows:</p>
+ <ul>
+ <li id="TranslationDefined">
+ Translation is equivalent to the matrix<br />
+ <img
+ src="images/coords/MatrixTranslate.png"
+ alt="Translation matrix" width="104" height="83" /><br />
+ or <strong>[1 0 0 1 tx ty]</strong>, where <em>tx</em> and
+ <em>ty</em> are the distances to translate coordinates in
+ <em>X</em> and <em>Y</em>, respectively.<br />
+ <br />
+ </li>
+ <li id="ScalingDefined"> Scaling is
+ equivalent to the matrix<br />
+ <img
+ src="images/coords/MatrixScale.png" alt="Scale matrix"
+ width="104" height="83" /><br />
+ or <strong>[sx 0 0 sy 0 0]</strong>. One unit in the
+ <em>X</em> and <em>Y</em> directions in the new coordinate
+ system equals <em>sx</em> and <em>sy</em> units in the
+ previous coordinate system, respectively.<br />
+ <br />
+ </li>
+ <li id="RotationDefined"> Rotation
+ about the origin is equivalent to the matrix<br />
+ <img
+ src="images/coords/MatrixRotate.png" alt="Rotation matrix"
+ width="169" height="83" /><br />
+ or <strong>[cos(a) sin(a) -sin(a) cos(a) 0 0]</strong>,
+ which has the effect of rotating the coordinate system axes
+ by angle <em>a</em>.<br />
+ <br />
+ </li>
+ <li id="SkewXDefined"> A skew
+ transformation along the x-axis is equivalent to the
+ matrix<br />
+ <img
+ src="images/coords/MatrixSkewX.png" alt="SkewX matrix"
+ width="131" height="83" /><br />
+ or <strong>[1 0 tan(a) 1 0 0]</strong>, which has the effect
+ of skewing X coordinates by angle <em>a</em>.<br />
+ <br />
+ </li>
+ <li id="SkewYDefined"> A skew
+ transformation along the y-axis is equivalent to the
+ matrix<br />
+ <img
+ src="images/coords/MatrixSkewY.png" alt="SkewY matrix"
+ width="131" height="83" /><br />
+ or <strong>[1 tan(a) 0 1 0 0]</strong>, which has the effect
+ of skewing Y coordinates by angle <em>a</em>.<br />
+ <br />
+ </li>
+ </ul>
+
+ <h2 id="NestedTransformations">Nested transformations</h2>
+ <p>Transformations can be nested to any level. The effect of
+ nested transformations is to post-multiply (i.e., concatenate)
+ the subsequent transformation matrices onto previously defined
+ transformations:<br />
+ <img
+ src="images/coords/MatrixNested.png"
+ alt="3-by-3 matrix concatenation" width="359"
+ height="83" /></p>
+ <p>For each given element, the accumulation of all
+ transformations that have been defined on the given element and
+ all of its ancestors up to and including the element that
+ established the current viewport (usually, the <a>'svg'</a>
+ element which is the most
+ immediate ancestor to the given element) is called the <span
+ class="SVG-Term">current transformation matrix</span> or <span
+ class="SVG-Term">CTM</span>. The CTM thus represents the
+ mapping of current user coordinates to viewport
+ coordinates:<br />
+ <img src="images/coords/CTM.png"
+ alt="current transformation matrix: CTM" width="483"
+ height="179" /></p>
+
+ <p id="ExampleNested"><span class="example-ref">Example Nested</span> illustrates
+ nested transformations.</p>
+
+<edit:example href='images/coords/Nested.svg' name='Nested' description="Nested transformations" image='yes' link='yes'/>
+
+ <p>In the example above, the CTM within the third nested
+ transformation (i.e., the <span
+ class="attr-value">transform="translate(130,160)"</span>)
+ consists of the concatenation of the three transformations, as
+ follows:<br />
+ <img src="images/coords/NestedCalcs.png"
+ alt="Matrix concatenation" width="512" height="296" /></p>
+ <br />
+ <h2 id="TransformAttribute">The <span class="attr-name">'transform'</span>
+ attribute</h2>
+ <p id="TransformList">The value of the <a>'transform'</a>
+ attribute is a <transform-list>, which is defined as a
+ list of transform definitions, which are applied in the order
+ provided. The individual transform definitions are separated by
+ whitespace and/or a comma. The available types of transform
+ definitions include:</p>
+ <ul>
+ <li><span class="attr-value">matrix(<a> <b>
+ <c> <d> <e> <f>)</span>, which
+ specifies a transformation in the form of a <a
+ href="coords.html#TransformMatrixDefined">transformation
+ matrix</a> of six values. <span
+ class="attr-value">matrix(a,b,c,d,e,f)</span> is equivalent
+ to applying the transformation matrix <strong>[a b c d e
+ f]</strong>.<br />
+ </li>
+ <li><span class="attr-value">translate(<tx>
+ [<ty>])</span>, which specifies a <a
+ href="coords.html#TranslationDefined">translation</a> by
+ <em>tx</em> and <em>ty</em>. If <em><ty></em> is not
+ provided, it is assumed to be zero.<br />
+ </li>
+ <li><span class="attr-value">scale(<sx>
+ [<sy>])</span>, which specifies a <a
+ href="coords.html#ScalingDefined">scale</a> operation by
+ <em>sx</em> and <em>sy</em>. If <em><sy></em> is not
+ provided, it is assumed to be equal to
+ <em><sx></em>.<br />
+ </li>
+ <li><span class="attr-value">rotate(<rotate-angle>
+ [<cx> <cy>])</span>, which specifies a <a
+ href="coords.html#RotationDefined">rotation</a> by <span
+ class="attr-value"><rotate-angle></span> degrees about
+ a given point.<br />
+ If optional parameters <span
+ class="attr-value"><cx></span> and <span
+ class="attr-value"><cy></span> are not supplied, the
+ rotate is about the origin of the current user coordinate
+ system. The operation corresponds to the matrix
+ <strong>[cos(a) sin(a) -sin(a) cos(a) 0 0]</strong>.<br />
+ If optional parameters <span
+ class="attr-value"><cx></span> and <span
+ class="attr-value"><cy></span> are supplied, the rotate
+ is about the point (<var>cx</var>, <var>cy</var>).
+ The operation represents the equivalent
+ of the following specification: <span
+ class="attr-value">translate(<cx>, <cy>)
+ rotate(<rotate-angle>) translate(-<cx>,
+ -<cy>)</span>.<br />
+ </li>
+ <li><span
+ class="attr-value">skewX(<skew-angle>)</span>, which
+ specifies a <a href="coords.html#SkewXDefined">skew
+ transformation along the x-axis</a>.<br />
+ </li>
+ <li><span
+ class="attr-value">skewY(<skew-angle>)</span>, which
+ specifies a <a href="coords.html#SkewYDefined">skew
+ transformation along the y-axis</a>.<br />
+ </li>
+ </ul>
+ <p>All numeric values are <a><number></a>s.</p>
+ <p>If a list of transforms is provided, then the net effect is
+ as if each transform had been specified separately in the order
+ provided. For example,</p>
+<pre>
+<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">
+ <!-- graphics elements go here -->
+</g>
+</pre>
+ <p>is functionally equivalent to:</p>
+<pre>
+<g transform="translate(-10,-20)">
+ <g transform="scale(2)">
+ <g transform="rotate(45)">
+ <g transform="translate(5,10)">
+ <!-- graphics elements go here -->
+ </g>
+ </g>
+ </g>
+</g>
+</pre>
+ <p id="TransformAttributeEffectOnSiblingAttributes">The <a>'transform'</a> attribute is
+ applied to an element before processing any other coordinate or
+ length values supplied for that element. In the element</p>
+<pre>
+<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>
+</pre>
+ <p>the x, y, width and height values are processed after the
+ current coordinate system has been scaled uniformly by a factor
+ of 2 by the <a>'transform'</a> attribute.
+ Attributes x, y, width and height (and any other attributes or
+ properties) are treated as values in the new user coordinate
+ system, not the previous user coordinate system. Thus, the
+ above <a>'rect'</a> element is
+ functionally equivalent to:</p>
+<pre>
+<g transform="scale(2)">
+ <rect x="10" y="10" width="20" height="20"/>
+</g>
+</pre>
+ <p>The following is the Backus-Naur Form (BNF) for values for
+ the <a>'transform'</a> attribute. The
+ following notation is used:</p>
+ <ul>
+ <li>*: 0 or more</li>
+ <li>+: 1 or more</li>
+ <li>?: 0 or 1</li>
+ <li>(): grouping</li>
+ <li>|: separates alternatives</li>
+ <li>double quotes surround literals</li>
+ </ul>
+<pre>
+transform-list:
+ wsp* transforms? wsp*
+transforms:
+ transform
+ | transform comma-wsp+ transforms
+transform:
+ matrix
+ | translate
+ | scale
+ | rotate
+ | skewX
+ | skewY
+matrix:
+ "matrix" wsp* "(" wsp*
+ number comma-wsp
+ number comma-wsp
+ number comma-wsp
+ number comma-wsp
+ number comma-wsp
+ number wsp* ")"
+translate:
+ "translate" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"
+scale:
+ "scale" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"
+rotate:
+ "rotate" wsp* "(" wsp* number ( comma-wsp number comma-wsp number )? wsp* ")"
+skewX:
+ "skewX" wsp* "(" wsp* number wsp* ")"
+skewY:
+ "skewY" wsp* "(" wsp* number wsp* ")"
+number:
+ sign? integer-constant
+ | sign? floating-point-constant
+comma-wsp:
+ (wsp+ comma? wsp*) | (comma wsp*)
+comma:
+ ","
+integer-constant:
+ digit-sequence
+floating-point-constant:
+ fractional-constant exponent?
+ | digit-sequence exponent
+fractional-constant:
+ digit-sequence? "." digit-sequence
+ | digit-sequence "."
+exponent:
+ ( "e" | "E" ) sign? digit-sequence
+sign:
+ "+" | "-"
+digit-sequence:
+ digit
+ | digit digit-sequence
+digit:
+ "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
+wsp:
+ (#x20 | #x9 | #xD | #xA)
+</pre>
+ <p>For the <a>'transform'</a>
+ attribute:</p>
+ <p> <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ <p>See the <a>'animateTransform'</a> element for
+ information on animating transformations.</p>
+ <h2 id="ViewBoxAttribute">The <span class="attr-name">'viewBox'</span>
+ attribute</h2>
+ <p>It is often desirable to specify that a given set of
+ graphics stretch to fit a particular container element. The
+ <a>'viewBox'</a> attribute provides this
+ capability.</p>
+ <p>All elements that establish a new viewport (see <a
+ href="coords.html#ElementsThatEstablishViewports">elements that
+ establish viewports</a>), plus the
+ <a>'marker element'</a>,
+ <a>'pattern'</a> and
+ <a>'view'</a>
+ elements have attribute
+ <a>'viewBox'</a>. The value of the <a>'viewBox'</a> attribute is a list of four
+ numbers <span class="attr-value"><min-x></span>, <span
+ class="attr-value"><min-y></span>, <span
+ class="attr-value"><width></span> and <span
+ class="attr-value"><height></span>, separated by
+ whitespace and/or a comma, which specify a rectangle in user
+ space which should be mapped to the bounds of the viewport
+ established by the given element, taking into account attribute
+ <a>'preserveAspectRatio'</a>. If specified,
+ an additional transformation is applied to all descendants of
+ the given element to achieve the specified effect.</p>
+ <p>A negative value for <span
+ class="attr-value"><width></span> or <span
+ class="attr-value"><height></span> is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>). A
+ value of zero disables rendering of the element.</p>
+ <p id="ExampleViewBox"><span class="example-ref">Example ViewBox</span> illustrates
+ the use of the <a>'viewBox'</a> attribute
+ on the <a>outermost svg element</a> to specify that
+ the SVG content should stretch to fit bounds of the
+ viewport.</p>
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="300px" height="200px" version="1.1"
+ viewBox="0 0 1500 1000" preserveAspectRatio="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>Example ViewBox - uses the viewBox
+ attribute to automatically create an initial user coordinate
+ system which causes the graphic to scale to fit into the
+ viewport no matter what size the viewport is.</desc>
+ <!-- This rectangle goes from (0,0) to (1500,1000) in user space.
+ Because of the viewBox attribute above,
+ the rectangle will end up filling the entire area
+ reserved for the SVG content. -->
+ <rect x="0" y="0" width="1500" height="1000"
+ fill="yellow" stroke="blue" stroke-width="12" />
+ <!-- A large, red triangle -->
+ <path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
+ <!-- A text string that spans most of the viewport -->
+ <text x="100" y="600" font-size="200" font-family="Verdana" >
+ Stretch to fit
+ </text>
+</svg>
+</pre>
+ <table summary="Example ViewBox">
+ <caption align="bottom">
+ Example ViewBox
+ </caption>
+ <tr>
+ <th>Rendered into<br />
+ viewport with<br />
+ width=300px,<br />
+ height=200px</th>
+ <th> </th>
+ <th>Rendered into<br />
+ viewport with<br />
+ width=150px,<br />
+ height=200px</th>
+ </tr>
+ <tr>
+ <td><img alt="Example ViewBox - stretch to fit 300 by 200"
+ src="images/coords/ViewBox.png" width="300"
+ height="200" /></td>
+ <td> </td>
+ <td><img alt="Example ViewBox - stretch to fit 150 by 200"
+ src="images/coords/ViewBox-Width150.png" width="150"
+ height="200" /></td>
+ </tr>
+ </table>
+ <p class="view-as-svg"><a href="images/coords/ViewBox.svg">View
+ this example as SVG (SVG-enabled browsers only)</a><br />
+ </p>
+ <p>The effect of the <a>'viewBox'</a>
+ attribute is that the user agent automatically supplies the
+ appropriate transformation matrix to map the specified
+ rectangle in user space to the bounds of a designated region
+ (often, the viewport). To achieve the effect of the example on
+ the left, with viewport dimensions of 300 by 200 pixels, the
+ user agent needs to automatically insert a transformation which
+ scales both X and Y by 0.2. The effect is equivalent to having
+ a viewport of size 300px by 200px and the following
+ supplemental transformation in the document, as follows:</p>
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="300px" height="200px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <strong><g transform="scale(0.2)"></strong>
+ <!-- Rest of document goes here -->
+ <strong></g></strong>
+</svg>
+</pre>
+ To achieve the effect of the example on the right, with
+ viewport dimensions of 150 by 200 pixels, the user agent needs
+ to automatically insert a transformation which scales X by 0.1
+ and Y by 0.2. The effect is equivalent to having a viewport of
+ size 150px by 200px and the following supplemental
+ transformation in the document, as follows:
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="150px" height="200px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <strong><g transform="scale(0.1 0.2)"></strong>
+ <!-- Rest of document goes here -->
+ <strong></g></strong>
+</svg>
+</pre>
+ <p>(Note: in some cases the user agent will need to supply a
+ <strong>translate</strong> transformation in addition to a
+ <strong>scale</strong> transformation. For example, on an
+ <a>outermost svg element</a>, a
+ <strong>translate</strong> transformation will be needed if the
+ <a>'viewBox'</a> attributes specifies
+ values other than zero for <span
+ class="attr-value"><min-x></span> or <span
+ class="attr-value"><min-y></span>.)</p>
+ <p id="ViewBoxAttributeEffectOnSiblingAttributes">Unlike the
+ <a>'transform'</a> attribute (see <a
+ href="coords.html#TransformAttributeEffectOnSiblingAttributes">effect
+ of the <span class="attr-name">'transform'</span> on sibling
+ attributes</a>), the automatic transformation that is created
+ due to a <a>'viewBox'</a> does not affect
+ the <span class="attr-name">'x'</span>, <span
+ class="attr-name">'y'</span>, <span
+ class="attr-name">'width'</span> and <span
+ class="attr-name">'height'</span> attributes (or in the case of
+ the <a>'marker element'</a> element, the
+ <a>'marker/markerWidth'</a> and <a>'marker/markerHeight'</a> attributes) on the
+ element with the <a>'viewBox'</a>
+ attribute. Thus, in the example above which shows an
+ <a>'svg'</a> element which has attributes
+ <a>'svg/width'</a>,
+ <a>'svg/height'</a> and <a>'viewBox'</a>,
+ the <a>'svg/width'</a> and <a>'svg/height'</a> attributes
+ represent values in the coordinate system that exists <em>before</em> the
+ <a>'viewBox'</a> transformation is applied. On
+ the other hand, like the <a>'transform'</a> attribute, it does
+ establish a new coordinate system for all other attributes and
+ for descendant elements.</p>
+ <p>For the <a>'viewBox'</a>
+ attribute:</p>
+ <p> <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></p>
+ <h2 id="PreserveAspectRatioAttribute">The <span class="attr-name">'preserveAspectRatio'</span>
+ attribute</h2>
+ <p>In some cases, typically when using the
+ <a>'viewBox'</a> attribute, it is desirable that the graphics stretch to
+ fit non-uniformly to take up the
+ entire viewport. In other cases, it is desirable that uniform
+ scaling be used for the purposes of preserving the aspect ratio
+ of the graphics.</p>
+ <p>Attribute <span
+ class="attr-value">preserveAspectRatio="[defer] <align>
+ [<meetOrSlice>]"</span>, which is available for all
+ elements that establish a new viewport (see <a
+ href="coords.html#ElementsThatEstablishViewports">elements that
+ establish viewports</a>), plus the
+ <a>'image'</a>,
+ <a>'marker element'</a>,
+ <a>'pattern'</a> and
+ <a>'view'</a> elements,
+ indicates whether or not to force uniform scaling.</p>
+ <p>For elements that establish a new viewport (see <a
+ href="coords.html#ElementsThatEstablishViewports">elements that
+ establish viewports</a>), plus the
+ <a>'marker element'</a>,
+ <a>'pattern'</a> and
+ <a>'view'</a> elements,
+ <a>'preserveAspectRatio'</a> only applies when
+ a value has been provided for <a>'viewBox'</a>
+ on the same element. For these elements, if attribute
+ <a>'viewBox'</a> is not provided, then
+ <a>'preserveAspectRatio'</a> is ignored.</p>
+ <p>For <a>'image'</a> elements,
+ <a>'preserveAspectRatio'</a> indicates how
+ referenced images should be fitted with respect to the
+ reference rectangle and whether the aspect ratio of the
+ referenced image should be preserved with respect to the
+ current user coordinate system.</p>
+ <p>If the value of <a>'preserveAspectRatio'</a> on an
+ <a>'image'</a> element starts with <span class='attr-value'>'defer'</span> then the value of the
+ <a>'preserveAspectRatio'</a> attribute on the
+ referenced content if present should be used. If the
+ referenced content lacks a value for
+ <a>'preserveAspectRatio'</a> then the
+ <a>'preserveAspectRatio'</a> attribute should
+ be processed as normal (ignoring <span class='attr-value'>'defer'</span>).
+ For <a>'preserveAspectRatio'</a> on all other
+ elements the <span class='attr-value'>'defer'</span> portion of the attribute is ignored.</p>
+ <p>The <span class="attr-value"><align></span> parameter
+ indicates whether to force uniform scaling and, if so, the
+ alignment method to use in case the aspect ratio of the <a>'viewBox'</a>
+ doesn't match the aspect ratio of the viewport. The <span
+ class="attr-value"><align></span> parameter must be one
+ of the following strings:</p>
+ <ul>
+ <li><span class="attr-value">none</span> - Do not force
+ uniform scaling. Scale the graphic content of the given
+ element non-uniformly if necessary such that the element's
+ bounding box exactly matches the viewport rectangle.<br />
+ (Note: if <span class="attr-value"><align></span> is
+ <span class="attr-value">none</span>, then the optional <span
+ class="attr-value"><meetOrSlice></span> value is
+ ignored.)</li>
+ <li><span class="attr-value">xMinYMin</span> - Force uniform
+ scaling.<br />
+ Align the <span class="attr-value"><min-x></span> of
+ the element's <a>'viewBox'</a> with the smallest X
+ value of the viewport.<br />
+ Align the <span class="attr-value"><min-y></span> of
+ the element's <a>'viewBox'</a> with the smallest Y
+ value of the viewport.</li>
+ <li><span class="attr-value">xMidYMin</span> - Force uniform
+ scaling.<br />
+ Align the midpoint X value of the element's
+ <a>'viewBox'</a> with the midpoint X value of the viewport.<br />
+ Align the <span class="attr-value"><min-y></span> of
+ the element's <a>'viewBox'</a> with the smallest Y
+ value of the viewport.</li>
+ <li><span class="attr-value">xMaxYMin</span> - Force uniform
+ scaling.<br />
+ Align the <span
+ class="attr-value"><min-x>+<width></span> of the
+ element's <a>'viewBox'</a> with the maximum X value
+ of the viewport.<br />
+ Align the <span class="attr-value"><min-y></span> of
+ the element's <a>'viewBox'</a> with the smallest Y
+ value of the viewport.</li>
+ <li><span class="attr-value">xMinYMid</span> - Force uniform
+ scaling.<br />
+ Align the <span class="attr-value"><min-x></span> of
+ the element's <a>'viewBox'</a> with the smallest X
+ value of the viewport.<br />
+ Align the midpoint Y value of the element's <a>'viewBox'</a>
+ with the midpoint Y
+ value of the viewport.</li>
+ <li><span class="attr-value">xMidYMid</span> (the default) -
+ Force uniform scaling.<br />
+ Align the midpoint X value of the element's <a>'viewBox'</a>
+ with the midpoint X value of the viewport.<br />
+ Align the midpoint Y value of the element's <a>'viewBox'</a>
+ with the midpoint Y value of the viewport.</li>
+ <li><span class="attr-value">xMaxYMid</span> - Force uniform
+ scaling.<br />
+ Align the <span
+ class="attr-value"><min-x>+<width></span> of the
+ element's <a>'viewBox'</a>
+ with the maximum X value of the viewport.<br />
+ Align the midpoint Y value of the element's <a>'viewBox'</a>
+ with the midpoint Y
+ value of the viewport.</li>
+ <li><span class="attr-value">xMinYMax</span> - Force uniform
+ scaling.<br />
+ Align the <span class="attr-value"><min-x></span> of
+ the element's <a>'viewBox'</a> with the smallest X
+ value of the viewport.<br />
+ Align the <span
+ class="attr-value"><min-y>+<height></span> of the
+ element's <a>'viewBox'</a> with the maximum Y value
+ of the viewport.</li>
+ <li><span class="attr-value">xMidYMax</span> - Force uniform
+ scaling.<br />
+ Align the midpoint X value of the element's <a>'viewBox'</a>
+ with the midpoint X value of the viewport.<br />
+ Align the <span
+ class="attr-value"><min-y>+<height></span> of the
+ element's <a>'viewBox'</a> with the maximum Y value
+ of the viewport.</li>
+ <li><span class="attr-value">xMaxYMax</span> - Force uniform
+ scaling.<br />
+ Align the <span
+ class="attr-value"><min-x>+<width></span> of the
+ element's <a>'viewBox'</a> with the maximum X value
+ of the viewport.<br />
+ Align the <span
+ class="attr-value"><min-y>+<height></span> of the
+ element's <a>'viewBox'</a> with the maximum Y value
+ of the viewport.</li>
+ </ul>
+ <p>The <span class="attr-value"><meetOrSlice></span>
+ parameter is optional and, if provided, is separated from the
+ <span class="attr-value"><align></span> value by one or
+ more spaces and then must be one of the following strings:</p>
+ <ul>
+ <li>
+ <span class="attr-value">meet</span> (the default) - Scale
+ the graphic such that:
+ <ul>
+ <li>aspect ratio is preserved</li>
+ <li>the entire <a>'viewBox'</a> is visible within
+ the viewport</li>
+ <li>the <a>'viewBox'</a> is scaled up as much
+ as possible, while still meeting the other criteria</li>
+ </ul>
+ In this case, if the aspect ratio of the graphic does not
+ match the viewport, some of the viewport will extend beyond
+ the bounds of the <a>'viewBox'</a> (i.e., the area into
+ which the <a>'viewBox'</a> will draw will be
+ smaller than the viewport).
+ </li>
+ <li>
+ <span class="attr-value">slice</span> - Scale the graphic
+ such that:
+ <ul>
+ <li>aspect ratio is preserved</li>
+ <li>the entire viewport is covered by the <a>'viewBox'</a></li>
+ <li>the <a>'viewBox'</a> is scaled down as
+ much as possible, while still meeting the other
+ criteria</li>
+ </ul>
+ In this case, if the aspect ratio of the <a>'viewBox'</a> does not match the
+ viewport, some of the <a>'viewBox'</a> will extend beyond the
+ bounds of the viewport (i.e., the area into which the <a>'viewBox'</a> will draw is larger
+ than the viewport).
+ </li>
+ </ul>
+ <p id="ExamplePreserveAspectRatio"><span class="example-ref">Example PreserveAspectRatio</span>
+ illustrates the various options on <a>'preserveAspectRatio'</a>. To save space,
+ XML entities have been defined for the three repeated graphic
+ objects, the rectangle with the smile inside and the outlines
+ of the two rectangles which have the same dimensions as the
+ target viewports. The example creates several new viewports by
+ including <a>'svg'</a> sub-elements embedded
+ inside the <a>outermost svg element</a> (see <a
+ href="coords.html#EstablishingANewViewport">Establishing a new
+ viewport</a>).</p>
+
+<edit:example href='images/coords/PreserveAspectRatio.svg' name='PreserveAspectRatio' description="demonstrate available options" image='yes' link='yes'/>
+
+ <p>For the <a>'preserveAspectRatio'</a>
+ attribute:</p>
+ <p> <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ <h2 id="EstablishingANewViewport">Establishing a new viewport</h2>
+ <p>At any point in an SVG drawing, you can establish a new
+ viewport into which all contained graphics is drawn by
+ including an <a>'svg'</a> element
+ inside SVG content. By establishing a new viewport, you also
+ implicitly establish a new viewport coordinate system, a new
+ user coordinate system, and, potentially, a new clipping path
+ (see the definition of the <a>'overflow'</a> property).
+ Additionally, there is a new meaning for percentage units
+ defined to be relative to the current viewport since a new
+ viewport has been established (see <a
+ href="coords.html#Units">Units</a>).</p>
+ <p>The bounds of the new viewport are defined by the <span
+ class="attr-name">'x'</span>, <span class="attr-name">'y'</span>,
+ <span class="attr-name">'width'</span> and <span
+ class="attr-name">'height'</span> attributes on the element
+ establishing the new viewport, such as an <a>'svg'</a> element. Both the new
+ viewport coordinate system and the new user coordinate system
+ have their origins at (<span class="attr-name">'x'</span>, <span
+ class="attr-name">'y'</span>), where <span
+ class="attr-name">'x'</span> and <span class="attr-name">'y'</span>
+ represent the value of the corresponding attributes on the
+ element establishing the viewport. The orientation of the new
+ viewport coordinate system and the new user coordinate system
+ correspond to the orientation of the current user coordinate
+ system for the element establishing the viewport. A single unit
+ in the new viewport coordinate system and the new user
+ coordinate system are the same size as a single unit in the
+ current user coordinate system for the element establishing the
+ viewport.</p>
+ <p>Here is an example:</p>
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4in" height="3in" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>This SVG drawing embeds another one,
+ thus establishing a new viewport
+ </desc>
+ <!-- The following statement establishing a new viewport
+ and renders SVG drawing B into that viewport -->
+ <svg x="25%" y="25%" width="50%" height="50%">
+ <!-- drawing B goes here -->
+ </svg>
+</svg>
+</pre>
+ <p>For an extensive example of creating new viewports, see <a
+ href="coords.html#ExamplePreserveAspectRatio">Example
+ PreserveAspectRatio</a>.</p>
+ <p id="ElementsThatEstablishViewports">The following elements establish new viewports:</p>
+ <ul>
+ <li>The <a>'svg'</a> element</li>
+ <li>A <a>'symbol'</a> element define new
+ viewports whenever they are instanced by a <a>'use'</a> element.</li>
+ <li>An <a>'image'</a> element that
+ references an SVG file will result in the establishment of a
+ temporary new viewport since the referenced resource by
+ definition will have an <a>'svg'</a> element.</li>
+ <li>A <a>'foreignObject'</a> element
+ creates a new viewport for rendering the content that is
+ within the element.</li>
+ </ul>
+ <p>Whether a new viewport also establishes a new additional
+ clipping path is determined by the value of the <a>'overflow'</a> property on the element
+ that establishes the new viewport. If a clipping path is
+ created to correspond to the new viewport, the clipping path's
+ geometry is determined by the value of the <a>'clip'</a> property. Also, see <a
+ href="masking.html#AutoClipAtViewportNotViewBox">Clip to
+ viewport vs. clip to <span
+ class="attr-name">'viewBox'</span></a>.</p>
+
+ <h2 id="Units">Units</h2>
+ <p>All coordinates and lengths in SVG can be specified with or
+ without a <span class="SVG-Term">unit identifier</span>.</p>
+ <p>When a coordinate or length value is a number without a unit
+ identifier (e.g., "25"), then the given coordinate or length is
+ assumed to be in user units (i.e., a value in the current user
+ coordinate system). For example:</p>
+<pre>
+<text font-size="50">Text size is 50 user units</text>
+</pre>
+ <p>Alternatively, a coordinate or length value can be expressed
+ as a number followed by a unit identifier (e.g., "25cm" or
+ "15em").
+ (Note that CSS defined <a>properties</a> used in a CSS style sheet
+ or the <a>'style attribute'</a> attribute require units for
+ non-zero lengths, see <a
+ href="styling.html#SVGStylingProperties">SVG's styling
+ properties</a>.)
+ The list of unit identifiers in SVG matches the list
+ of unit identifiers in CSS: em, ex, px, pt, pc, cm, mm and in.
+ The <a><length></a> type can also have
+ a percentage unit identifier. The following describes how the various unit
+ identifiers are processed:</p>
+ <ul>
+ <li>
+ <p>As in CSS, the <em>em</em> and <em>ex</em> unit
+ identifiers are relative to the current font's
+ <em>font-size</em> and <em>x-height</em>, respectively.</p>
+ </li>
+ <li>
+ <p>One <em>px</em> unit is defined to be equal to one user
+ unit. Thus, a length of "5px" is the same as a length of
+ "5".</p>
+ <p>Note that at initialization, a user unit in the <a
+ href="coords.html#InitialCoordinateSystem">the initial
+ coordinate system</a> is equivalenced to the parent
+ environment's notion of a <em>px</em> unit. Thus, in the <a
+ href="coords.html#InitialCoordinateSystem">the initial
+ coordinate system</a>, because the user coordinate system
+ aligns exactly with the parent's coordinate system, and
+ because often the parent's coordinate system aligns with
+ the device pixel grid, "5px" might actually map to 5
+ devices pixels. However, if there are any coordinate system
+ transformation due to the use of <a>'transform'</a> or
+ <a>'viewBox'</a> attributes, because
+ "5px" maps to 5 user units and because the coordinate
+ system transformations have resulted in a revised user
+ coordinate system, "5px" likely will not map to 5 device
+ pixels. As a result, in most circumstances, "px" units will
+ not map to the device pixel grid.</p>
+ </li>
+ <li>
+ <p>The other absolute unit identifiers from CSS (i.e., pt,
+ pc, cm, mm, in) are all defined as an appropriate multiple
+ of one <em>px</em> unit (which, according to the previous
+ item, is defined to be equal to one user unit), based on
+ what the SVG user agent determines is the size of a
+ <em>px</em> unit (possibly passed from the parent processor
+ or environment at initialization time). For example,
+ suppose that the user agent can determine from its
+ environment that "1px" corresponds to "0.2822222mm" (i.e.,
+ 90dpi). Then, for all processing of SVG content:</p>
+ <ul>
+ <li>"1pt" equals "1.25px" (and therefore 1.25 user
+ units)</li>
+ <li>"1pc" equals "15px" (and therefore 15 user
+ units)</li>
+ <li>"1mm" would be "3.543307px" (3.543307 user
+ units)</li>
+ <li>"1cm" equals "35.43307px" (and therefore 35.43307
+ user units)</li>
+ <li>"1in" equals "90px" (and therefore 90 user
+ units)</li>
+ </ul>
+ </li>
+ </ul>
+ <p>Note that use of <em>px</em> units or any other absolute
+ unit identifiers can cause inconsistent visual results on
+ different viewing environments since the size of "1px" may map
+ to a different number of user units on different systems; thus,
+ absolute units identifiers are only recommended for the
+ <a>'svg/width'</a> and the <a>'svg/height'</a> on
+ <a>' outermost svg elements'</a> and situations
+ where the content contains no transformations and it is
+ desirable to specify values relative to the device pixel grid
+ or to a particular real world unit size.</p>
+ <p>For percentage values that are defined to be relative to the
+ size of viewport:</p>
+ <ul>
+ <li>For any x-coordinate value or width value expressed as a
+ percentage of the viewport, the value to use is the specified
+ percentage of the <em>actual-width</em> in user units for the
+ nearest containing viewport, where <em>actual-width</em> is
+ the width dimension of the viewport element within the user
+ coordinate system for the viewport element.</li>
+ <li>For any y-coordinate value or height value expressed as a
+ percentage of the viewport, the value to use is the specified
+ percentage of the <em>actual-height</em> in user units for
+ the nearest containing viewport, where <em>actual-height</em>
+ is the height dimension of the viewport element within the
+ user coordinate system for the viewport element.</li>
+ <li id="Units_viewport_percentage">For any other length value expressed as a percentage of
+ the viewport, the percentage is calculated as the specified
+ percentage of <code>sqrt((<em>actual-width</em>)**2 +
+ (<em>actual-height</em>)**2))/sqrt(2)</code>.</li>
+ </ul>
+ <p id="ExampleUnits"><span class="example-ref">Example Units</span> below
+ illustrates some of the processing rules for different types of
+ units.</p>
+
+<edit:example href='images/coords/Units.svg' name='Units' description='demonstrate available options' image='yes' link='yes'/>
+
+ <p>The three rectangles on the left demonstrate the use of one
+ of the absolute unit identifiers, the "in" unit (inch). The
+ reference image above was generated on a 96dpi system (i.e., 1
+ inch = 96 pixels). Therefore, the topmost rectangle, which is
+ specified in inches, is exactly the same size as the middle
+ rectangle, which is specified in user units such that there are
+ 96 user units for each corresponding inch in the topmost
+ rectangle. (Note: on systems with different screen resolutions,
+ the top and middle rectangles will likely be rendered at
+ different sizes.) The bottom rectangle of the group illustrates
+ what happens when values specified in inches are scaled.</p>
+ <p>The three rectangles in the middle demonstrate the use of
+ one of the relative unit identifiers, the "em" unit. Because
+ the <a>'font-size'</a> property has been set
+ to <span class="prop-value">150</span> on the outermost <a>'g'</a> element, each "em" unit is
+ equal to 150 user units. The topmost rectangle, which is
+ specified in "em" units, is exactly the same size as the middle
+ rectangle, which is specified in user units such that there are
+ 150 user units for each corresponding "em" unit in the topmost
+ rectangle. The bottom rectangle of the group illustrates what
+ happens when values specified in "em" units are scaled.</p>
+ <p>The three rectangles on the right demonstrate the use of
+ percentages. Note that the width and height of the viewport in
+ the user coordinate system for the viewport element (in this
+ case, the <a>outermost svg element</a>) are 4000 and
+ 2000, respectively, because processing the <a>'viewBox'</a> attribute results in a
+ transformed user coordinate system. The topmost rectangle,
+ which is specified in percentage units, is exactly the same
+ size as the middle rectangle, which is specified in equivalent
+ user units. In particular, note that the <a>'stroke-width'</a> property in the
+ middle rectangle is set to 1% of the
+ <code>sqrt((<em>actual-width</em>)**2 +
+ (<em>actual-height</em>)**2)) / sqrt(2)</code>, which in this
+ case is .01*sqrt(4000*4000+2000*2000)/sqrt(2), or 31.62. The
+ bottom rectangle of the group illustrates what happens when
+ values specified in percentage units are scaled.</p>
+
+ <h2 id="ObjectBoundingBoxUnits">Object bounding box units</h2>
+ <p id="ObjectBoundingBox">The following elements offer the option of expressing
+ coordinate values and lengths as fractions (and, in some cases,
+ percentages) of the <span class="SVG-Term">bounding box</span>,
+ by setting a specified attribute to <span class="attr-value">'objectBoundingBox'</span>
+ on the given element:</p>
+ <table class='vert' summary="Object bounding box units rules">
+ <tr>
+ <th>Element</th>
+ <th>Attribute</th>
+ <th>Effect</th>
+ </tr>
+ <tr>
+ <edit:with element='linearGradient'>
+ <td><a>'linearGradient'</a></td>
+ <td><a>'gradientUnits'</a></td>
+ <td>Indicates that the attributes which specify the
+ gradient vector (<a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a>, <a>'y2'</a>) represent fractions or
+ percentages of the bounding box of the element to which the
+ gradient is applied.</td>
+ </edit:with>
+ </tr>
+ <tr>
+ <edit:with element='radialGradient'>
+ <td><a>'radialGradient'</a></td>
+ <td><a>'gradientUnits'</a></td>
+ <td>Indicates that the attributes which specify the center
+ (<a>'cx'</a>, <a>'cy'</a>), the radius (<a>'r'</a>) and focus
+ (<a>'fx'</a>, <a>'fy'</a>) represent fractions or
+ percentages of the bounding box of the element to which the
+ gradient is applied.</td>
+ </edit:with>
+ </tr>
+ <edit:with element='pattern'>
+ <tr>
+ <td><a>'pattern'</a></td>
+ <td><a>'patternUnits'</a></td>
+ <td>Indicates that the attributes which define how to tile the pattern
+ (<a>'x'</a>, <a>'y'</a>, <a>'width'</a>, <a>'height'</a>) are
+ established using the bounding box of the element to which the pattern
+ is applied.</td>
+ </tr>
+ <tr>
+ <td><a>'pattern'</a></td>
+ <td><a>'patternContentUnits'</a></td>
+ <td>Indicates that the user coordinate system for the
+ contents of the pattern is established using the bounding
+ box of the element to which the pattern is applied.</td>
+ </tr>
+ </edit:with>
+ <tr>
+ <td><a>'clipPath'</a></td>
+ <td><a>'clipPath/clipPathUnits'</a></td>
+ <td>Indicates that the user coordinate system for the contents of the
+ <a>'clipPath'</a> element is established using the bounding box of the
+ element to which the clipping path is applied.</td>
+ </tr>
+ <edit:with element='mask'>
+ <tr>
+ <td><a>'mask element'</a></td>
+ <td><a>'maskUnits'</a></td>
+ <td>Indicates that the attributes which define the masking region
+ (<a>'x'</a>, <a>'y'</a>, <a>'width'</a>, <a>'height'</a>) is
+ established using the bounding box of the element to which the mask
+ is applied.</td>
+ </tr>
+ <tr>
+ <td><a>'mask element'</a></td>
+ <td><a>'maskContentUnits'</a></td>
+ <td>Indicates that the user coordinate system for the contents of
+ the <a>'mask element'</a> element are established using the bounding box of
+ the element to which the mask is applied.</td>
+ </tr>
+ </edit:with>
+ <edit:with element='filter'>
+ <tr>
+ <td><a>'filter element'</a></td>
+ <td><a>'filterUnits'</a></td>
+ <td>Indicates that the attributes which define the
+ <a href="filters.html#FilterEffectsRegion">filter effects region</a>
+ (<a>'x'</a>, <a>'y'</a>, <a>'width'</a>, <a>'height'</a>) represent
+ fractions or percentages of the bounding box of the element to which
+ the filter is applied.</td>
+ </tr>
+ <tr>
+ <td><a>'filter element'</a></td>
+ <td><a>'primitiveUnits'</a></td>
+ <td>Indicates that the various length values within the filter
+ primitives represent fractions or percentages of the bounding box of
+ the element to which the filter is applied.</td>
+ </tr>
+ </edit:with>
+ </table>
+ <p>In the discussion that follows, the term <span
+ class="SVG-Term">applicable element</span> is the element to
+ which the given effect applies. For gradients and patterns, the
+ applicable element is the <a
+ href="intro.html#TermGraphicsElement">graphics element</a>
+ which has its <a>'fill'</a> or <a>'stroke'</a> property referencing the
+ given gradient or pattern. (See <a
+ href="painting.html#InheritanceOfPaintingProperties">Inheritance
+ of Painting Properties</a>. For special rules concerning <a
+ href="text.html">text elements</a>, see the discussion of <a
+ href="text.html#ObjectBoundingBoxUnitsTextObjects">object
+ bounding box units and text elements</a>.) For clipping paths,
+ masks and filters, the applicable element can be either a <a
+ href="intro.html#TermContainerElement">container element</a> or
+ a <a href="intro.html#TermGraphicsElement">graphics
+ element</a>.</p>
+ <p>When keyword <span
+ class="attr-value">objectBoundingBox</span> is used, then the
+ effect is as if a supplemental transformation matrix were
+ inserted into the list of nested transformation matrices to
+ create a new user coordinate system.</p>
+ <p>First, the (<strong>minx</strong>,<strong>miny</strong>) and
+ (<strong>maxx</strong>,<strong>maxy</strong>) coordinates are
+ determined for the applicable element and all of its
+ descendants. The values <strong>minx</strong>,
+ <strong>miny</strong>, <strong>maxx</strong> and
+ <strong>maxy</strong> are determined by computing the maximum
+ extent of the shape of the element in X and Y with respect to
+ the user coordinate system for the applicable element. The
+ bounding box is the tightest fitting rectangle aligned with the
+ axes of the applicable element's user coordinate system that
+ entirely encloses the applicable element and its descendants.
+ The bounding box is computed exclusive of any values for
+ clipping, masking, filter effects, opacity and stroke-width.
+ For curved shapes, the bounding box encloses all portions of
+ the shape, not just end points. For <a
+ href="text.html#TextElement"><span
+ class="element-name">'text'</span></a> elements, for the
+ purposes of the bounding box calculation, each glyph is treated
+ as a separate graphics element. The calculations assume that
+ all glyphs occupy the full glyph cell. For example, for
+ horizontal text, the calculations assume that each glyph
+ extends vertically to the full ascent and descent values for
+ the font.</p>
+ <p>Then, coordinate (0,0) in the new user coordinate system is
+ mapped to the (minx,miny) corner of the tight bounding box
+ within the user coordinate system of the applicable element and
+ coordinate (1,1) in the new user coordinate system is mapped to
+ the (maxx,maxy) corner of the tight bounding box of the
+ applicable element. In most situations, the following
+ transformation matrix produces the correct effect:</p>
+<pre>
+[ (maxx-minx) 0 0 (maxy-miny) minx miny ]
+</pre>
+ <p> </p>
+ <p>When percentages are used with attributes that define the
+ gradient vector, the pattern tile, the filter region or the
+ masking region, a percentage represents the same value as the
+ corresponding decimal value (e.g., 50% means the same as 0.5).
+ If percentages are used within the content of a <a>'pattern'</a>,
+ <a>'clipPath'</a>, <a>'mask element'</a> or <a>'filter element'</a> element, these values
+ are treated according to the processing rules for percentages
+ as defined in <a href="coords.html#Units">Units</a>.</p>
+ <p>Any numeric value can be specified for values expressed as a
+ fraction or percentage of object bounding box units. In
+ particular, fractions less are zero or greater than one and
+ percentages less than 0% or greater than 100% can be
+ specified.</p>
+ <p>Keyword <span class="attr-value">objectBoundingBox</span>
+ should not be used when the geometry of the applicable element
+ has no width or no height, such as the case of a horizontal or
+ vertical line, even when the line has actual thickness when
+ viewed due to having a non-zero stroke width since stroke width
+ is ignored for bounding box calculations. When the geometry of
+ the applicable element has no width or height and <span
+ class="attr-value">objectBoundingBox</span> is specified, then
+ the given effect (e.g., a gradient or a filter) will be
+ ignored.</p>
+
+
+
+<h2 id="IntrinsicSizing">Intrinsic sizing properties of the viewport of SVG content</h2>
+<p>SVG needs to specify how to calculate some intrinsic sizing properties to
+enable inclusion within other languages. The intrinsic width and height
+of the <a href="intro.html#TermViewport"><span class="svg-term">viewport</span></a> of SVG content must be determined from the <a href="struct.html#SVGElementWidthAttribute"><span class="attr-name">'width'</span></a> and <a href="struct.html#SVGElementHeightAttribute"><span
+class="attr-name">'height'</span></a>
+ attributes. If either of these are not specified, a
+ value of <span class="attr-value">'100%'</span> must
+ be assumed. <em>Note:</em> the <a href="struct.html#SVGElementWidthAttribute"><span class="attr-name">'width'</span></a> and <a href="struct.html#SVGElementHeightAttribute"><span
+ class="attr-name">'height'</span></a>
+ attributes are <em>not the same</em> as the CSS width and height properties. Specifically, percentage values <em>do not
+provide an intrinsic width or height, and do not indicate a percentage of the containing block</em>. Rather, once the viewport is established, they indicate the portion of the viewport that is actually covered by image data.</p>
+
+<p>The intrinsic aspect ratio of the <a href="intro.html#TermViewport"><span class="svg-term">viewport</span></a> of SVG content is necessary
+for example, when including SVG from an <span class="element-name">'object'</span> element in HTML styled with
+CSS. It is possible (indeed, common) for an SVG graphic to have an intrinsic aspect ratio but not to have an intrinsic width or height.
+The intrinsic aspect ratio must be calculated based upon the
+following rules:</p>
+<ul>
+<li><p>The aspect ratio is calculated by dividing a width by a height.</p></li>
+<li><p>If the <a href="struct.html#SVGElementWidthAttribute"><span class="attr-name">'width'</span></a> and <a href="struct.html#SVGElementHeightAttribute"><span
+class="attr-name">'height'</span></a> of the <a>rootmost 'svg' element</a> are both specified with
+unit identifiers (in, mm, cm, pt, pc, px, em, ex) or in <a href="intro.html#TermUserUnits"><span class="svg-term">user units</span></a>, then the aspect ratio is
+calculated from the <a href="struct.html#SVGElementWidthAttribute"><span class="attr-name">'width'</span></a> and <a href="struct.html#SVGElementHeightAttribute"><span
+class="attr-name">'height'</span></a> attributes after resolving both values to user units.</p></li>
+<li><p>If either/both of the <a href="struct.html#SVGElementWidthAttribute"><span class="attr-name">'width'</span></a> and <a href="struct.html#SVGElementHeightAttribute"><span
+class="attr-name">'height'</span></a> of the <a>rootmost 'svg' element</a> are in
+percentage units (or omitted), the aspect ratio is calculated from the width and
+height values of the <a href="coords.html#ViewBoxAttribute"><span
+ class="attr-name">'viewBox'</span></a> specified for the <a href="intro.html#TermCurrentSVGDocumentFragment"><span class="svg-term">current SVG document fragment</span></a>. If the <a href="coords.html#ViewBoxAttribute"><span
+ class="attr-name">'viewBox'</span></a> is not correctly specified, or set to <span class="attr-value">'none'</span>,
+the intrinsic aspect ratio cannot be calculated and is considered unspecified.</p></li>
+</ul>
+
+<p>Examples:</p>
+
+<div class="example">
+<div class="exampleheader">
+<strong>Example:</strong> Intrinsic Aspect Ratio 1
+</div>
+
+<div class="examplesource">
+<pre><![CDATA[<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
+ width="10cm" height="5cm">
+ ...
+</svg>]]></pre>
+</div>
+</div>
+
+<p>In this example the intrinsic aspect ratio of the <a href="intro.html#TermViewport"><span class="svg-term">viewport</span></a> is 2:1. The
+intrinsic width is 10cm and the intrinsic height is 5cm.</p>
+
+<div class="example">
+<div class="exampleheader">
+<strong>Example:</strong> Intrinsic Aspect Ratio 2
+</div>
+
+<div class="examplesource">
+<pre><![CDATA[<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
+ width="100%" height="50%" viewBox="0 0 200 200">
+ ...
+</svg>]]></pre>
+</div>
+</div>
+
+<p>In this example the intrinsic aspect ratio of the rootmost <a href="intro.html#TermViewport"><span class="svg-term">viewport</span></a> is
+1:1. An aspect ratio calculation in this case allows embedding in an
+object within a containing block that is only constrained in one direction.</p>
+
+<div class="example">
+<div class="exampleheader">
+<strong>Example:</strong> Intrinsic Aspect Ratio 3
+</div>
+
+<div class="examplesource">
+<pre><![CDATA[<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
+ width="10cm" viewBox="0 0 200 200">
+ ...
+</svg>]]></pre>
+</div>
+</div>
+
+<p>In this case the intrinsic aspect ratio is 1:1.</p>
+
+<div class="example">
+<div class="exampleheader">
+<strong>Example:</strong> Intrinsic Aspect Ratio 4
+</div>
+
+<div class="examplesource">
+<pre><![CDATA[<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
+ width="75%" height="10cm" viewBox="0 0 200 200">
+ ...
+</svg>]]></pre>
+</div>
+</div>
+
+<p>In this example, the intrinsic aspect ratio is 1:1.</p>
+
+
+
+<h2 id="GeographicCoordinates">Geographic coordinate systems</h2>
+
+<p>In order to allow interoperability between SVG content generators
+and user agents dealing with maps encoded in SVG, the use of a common
+metadata definition for describing the coordinate system used to
+generate SVG documents is encouraged.</p>
+
+<p>Such metadata must be added under the <a>'metadata'</a> element of
+the topmost <a>'svg'</a> element describing the map, consisting of an
+RDF description of the Coordinate Reference System definition used to
+generate the SVG map [<a href='refs.html#ref-RDF-PRIMER'>RDF-PRIMER</a>]. Note that
+the presence of this metadata does not affect the rendering of the SVG
+in any way; it merely provides added semantic value for applications
+that make use of combined maps.</p>
+
+<p>The definition must be conformant to the XML grammar described in
+<a href="http://portal.opengeospatial.org/files/?artifact_id=20509"><cite>GML 3.2.1</cite></a>,
+an OpenGIS Standard for encoding common CRS data types in XML
+[<a href='refs.html#ref-GML'>GML</a>]. In order to correctly map
+the 2-dimensional data used by SVG, the CRS must be of subtype
+<strong>ProjectedCRS</strong> or <strong>Geographic2dCRS</strong>. The
+first axis of the described CRS maps the SVG <var>x</var>-axis and the
+second axis maps the SVG <var>y</var>-axis.</p>
+
+<p>The main purpose of such metadata is to indicate to the user agent
+that two or more SVG documents can be overlayed or merged into a single
+document. Obviously, if two maps reference the same Coordinate Reference
+System definition and have the same SVG <a>'transform'</a> attribute
+value then they can be overlayed without reprojecting the data. If
+the maps reference different Coordinate Reference Systems and/or have
+different SVG <a>'transform'</a> attribute values, then a specialized
+cartographic user agent may choose to transform the coordinate data to
+overlay the data. However, typical SVG user agents are not required
+to perform these types of transformations, or even recognize the
+metadata. It is described in this specification so that the connection
+between geographic coordinate systems and the SVG coordinate system is
+clear.</p>
+
+<h2 id="SVGGlobalTransformAttribute">The <span class="attr-name">'svg:transform'</span> attribute</h2>
+
+<div class="adef-list">
+ <p><em>Attribute definition:</em></p>
+ <dl>
+ <dt id="SVGGlobalTransformAttributeDefinition"><span class="adef">svg:transform</span> = <span class="attr-value">"<a href="#TransformAttribute"><transform></a>" | "none"</span></dt>
+ <dd>
+ <dl>
+ <dt><span class="attr-value"><a href="#TransformAttribute"><transform></a></span></dt>
+ <dd>
+ <p>Specifies the affine transformation that has been
+ applied to the map data. The syntax is identical to
+ that described in <a href="#TransformAttribute">The <span class="attr-name">'transform'</span> attribute</a>
+ section.</p>
+ </dd>
+
+ <dt><span class="attr-value">none</span></dt>
+ <dd>
+ <p>Specifies that no supplemental affine transformation has been
+ applied to the map data. Using this value has the same meaning as
+ specifying the identity matrix, which in turn is just the same as
+ not specifying the
+ <a href='#SVGGlobalTransformAttribute'><span class='attr-name'>'svg:transform'</span></a>
+ the attribute at all.</p>
+ </dd>
+ </dl>
+ <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</p>
+ </dd>
+ </dl>
+</div>
+
+<p>This attribute describes an optional additional affine
+transformation that may have been applied during this
+mapping. This attribute may be added to the OpenGIS
+<span class="element-name">'CoordinateReferenceSystem'</span> element. Note
+that, unlike the <a>'transform'</a> attribute, it does not indicate that
+a transformation is to <em>be applied</em> to the data within the file.
+Instead, it simply describes the transformation that <em>was already
+applied</em> to the data when being encoded in SVG.</p>
+
+<p>There are three typical uses for the
+<a href='#SVGGlobalTransformAttribute'><span class='attr-name'>'svg:transform'</span></a>
+global attribute. These are described below and used in the examples.</p>
+
+<ul>
+ <li><p>Most ProjectedCRS have the north direction represented by
+ positive values of the second axis and conversely SVG has a
+ <var>y</var>-down coordinate system. That's why, in order to follow the
+ usual way to represent a map with the north at its top, it is
+ recommended for that kind of ProjectedCRS to use the
+ <a href='#SVGGlobalTransformAttribute'><span class='attr-name'>'svg:transform'</span></a>
+ global attribute with a <span class='attr-value'>'scale(1, -1)'</span> value as in the
+ third example below.</p></li>
+
+ <li><p>Most Geographic2dCRS have the latitude as their first
+ axis rather than the longitude, which means that the
+ south-north axis would be represented by the <var>x</var>-axis in SVG
+ instead of the usual <var>y</var>-axis. That's why, in order to follow
+ the usual way to represent a map with the north at its top,
+ it is recommended for that kind of Geographic2dCRS to use the
+ <a href='#SVGGlobalTransformAttribute'><span class='attr-name'>'svg:transform'</span></a>
+ global attribute with a <span class='attr-value'>'rotate(-90)'</span> value as in the
+ first example (while also adding the <span class='attr-value'>'scale(1, -1)'</span> as for
+ ProjectedCRS).</p></li>
+
+ <li><p>In addition, when converting for profiles which place
+ restrictions on precision of real number values, it may be
+ useful to add an additional scaling factor to retain good
+ precision for a specific area. When generating an SVG
+ document from WGS84 geographic coordinates (EPGS 4326), we
+ recommend the use of an additional 100 times scaling factor
+ corresponding to an <a href='#SVGGlobalTransformAttribute'><span class='attr-name'>'svg:transform'</span></a>
+ global attribute with a <span class='attr-value'>'rotate(-90) scale(100)'</span>
+ value (shown in the second example).
+ Different scaling values may be required depending on the
+ particular CRS.</p></li>
+</ul>
+
+<p>Below is a simple example of the coordinate metadata, which
+describes the coordinate system used by the document via a
+URI.</p>
+
+<edit:example href="images/coords/geocoord1.svg" link="no" image="no"/>
+
+<p>The second example uses a well-known identifier to describe
+the coordinate system. Note that the coordinates used in the
+document have had the supplied transform applied.</p>
+
+<edit:example href="images/coords/geocoord2.svg" link="no" image="no"/>
+
+<p>The third example defines the coordinate system completely
+within the SVG document.</p>
+
+<edit:example href="images/coords/geocoord3.svg" link="no" image="no"/>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGPoint">Interface SVGPoint</h3>
+
+<edit:interface name='::svg::SVGPoint'/>
+
+<h3 id="InterfaceSVGPointList">Interface SVGPointList</h3>
+
+<edit:interface name='::svg::SVGPointList'/>
+
+<h3 id="InterfaceSVGMatrix">Interface SVGMatrix</h3>
+
+<edit:interface name='::svg::SVGMatrix'/>
+
+<h3 id="InterfaceSVGTransform">Interface SVGTransform</h3>
+
+<edit:interface name='::svg::SVGTransform'/>
+
+<h3 id="InterfaceSVGTransformList">Interface SVGTransformList</h3>
+
+<edit:interface name='::svg::SVGTransformList'/>
+
+<h3 id="InterfaceSVGAnimatedTransformList">Interface SVGAnimatedTransformList</h3>
+
+<edit:interface name='::svg::SVGAnimatedTransformList'/>
+
+<h3 id="InterfaceSVGPreserveAspectRatio">Interface SVGPreserveAspectRatio</h3>
+
+<edit:interface name='::svg::SVGPreserveAspectRatio'/>
+
+<h3 id="InterfaceSVGAnimatedPreserveAspectRatio">Interface SVGAnimatedPreserveAspectRatio</h3>
+
+<edit:interface name='::svg::SVGAnimatedPreserveAspectRatio'/>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/definitions.xml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1558 @@
+<definitions xmlns='http://mcc.id.au/ns/local' xmlns:x='http://mcc.id.au/ns/local'>
+
+ <!-- === defined in this specification ================================== -->
+
+ <!-- ... elements and element-specific attributes ....................... -->
+
+ <element
+ name='a'
+ href='linking.html#AElement'
+ contentmodel='textoranyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='conditional processing, core, graphical event, presentation, style, xlink'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGAElement'>
+ <attribute name='xlink:href' href='linking.html#AElementXLinkHrefAttribute' animatable='yes'/>
+ <attribute name='xlink:show' href='linking.html#XLinkShowAttribute'/>
+ <attribute name='xlink:actuate' href='linking.html#AElementXLinkActuateAttribute'/>
+ <attribute name='target' href='linking.html#AElementTargetAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='altGlyph'
+ href='text.html#AltGlyphElement'
+ contentmodel='any'
+ attributecategories='conditional processing, core, graphical event, presentation, style, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGAltGlyphElement'>
+ <attribute name='x' href='text.html#AltGlyphElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='text.html#AltGlyphElementYAttribute' animatable='yes'/>
+ <attribute name='dx' href='text.html#AltGlyphElementDXAttribute' animatable='yes'/>
+ <attribute name='dy' href='text.html#AltGlyphElementDYAttribute' animatable='yes'/>
+ <attribute name='glyphRef' href='text.html#AltGlyphElementGlyphRefAttribute'/>
+ <attribute name='format' href='text.html#AltGlyphElementFormatAttribute'/>
+ <attribute name='rotate' href='text.html#AltGlyphElementRotateAttribute' animatable='yes'/>
+ <attribute name='xlink:href' href='text.html#AltGlyphElementHrefAttribute'/>
+ </element>
+
+ <element
+ name='altGlyphDef'
+ href='text.html#AltGlyphDefElement'
+ attributecategories='core'
+ interfaces='SVGAltGlyphDefElement'>
+ <x:contentmodel xmlns='http://www.w3.org/1999/xhtml'>
+ Either:
+ <ul>
+ <li>one or more <a>'glyphRef'</a> elements, or</li>
+ <li>one or more <a>'altGlyphItem'</a> elements.</li>
+ </ul>
+ </x:contentmodel>
+ </element>
+
+ <element
+ name='altGlyphItem'
+ href='text.html#AltGlyphItemElement'
+ attributecategories='core'
+ interfaces='SVGAltGlyphItemElement'>
+ <x:contentmodel xmlns='http://www.w3.org/1999/xhtml'>
+ One or more <a>'glyphRef'</a> elements.
+ </x:contentmodel>
+ </element>
+
+ <element
+ name='animate'
+ href='animate.html#AnimateElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ attributecategories='conditional processing, core, animation event, xlink, animation attribute target, animation timing, animation value, animation addition, presentation'
+ attributes='externalResourcesRequired'
+ interfaces='SVGAnimateElement'/>
+
+ <element
+ name='animateColor'
+ href='animate.html#AnimateColorElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ attributecategories='conditional processing, core, animation event, xlink, animation attribute target, animation timing, animation value, animation addition, presentation'
+ attributes='externalResourcesRequired'
+ interfaces='SVGAnimateColorElement'/>
+
+ <element
+ name='animateMotion'
+ href='animate.html#AnimateMotionElement'
+ attributecategories='conditional processing, core, animation event, xlink, animation timing, animation value, animation addition'
+ attributes='externalResourcesRequired'
+ interfaces='SVGAnimateMotionElement'>
+ <x:contentmodel xmlns='http://www.w3.org/1999/xhtml'>Any number of <a>descriptive elements</a> and at most one <a>'mpath'</a> element, in any order.</x:contentmodel>
+ <!--
+ <attribute name='calcMode' href='animate.html#AnimateMotionElementCalcModeAttribute'/>
+ -->
+ <attribute name='path' href='animate.html#PathAttribute'/>
+ <attribute name='keyPoints' href='animate.html#KeyPointsAttribute'/>
+ <attribute name='rotate' href='animate.html#RotateAttribute'/>
+ <attribute name='origin' href='animate.html#OriginAttribute'/>
+ </element>
+
+ <element
+ name='animateTransform'
+ href='animate.html#AnimateTransformElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ attributecategories='conditional processing, core, animation event, xlink, animation attribute target, animation timing, animation value, animation addition'
+ attributes='externalResourcesRequired'
+ interfaces='SVGAnimateTransformElement'>
+ <attribute name='type' href='animate.html#AnimateTransformElementTypeAttribute'/>
+ </element>
+
+ <element
+ name='circle'
+ href='shapes.html#CircleElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGCircleElement'>
+ <attribute name='cx' href='shapes.html#CircleElementCXAttribute' animatable='yes'/>
+ <attribute name='cy' href='shapes.html#CircleElementCYAttribute' animatable='yes'/>
+ <attribute name='r' href='shapes.html#CircleElementRAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='clipPath'
+ href='masking.html#ClipPathElement'
+ contentmodel='anyof'
+ elementcategories='descriptive, animation, shape'
+ elements='text, use'
+ attributecategories='conditional processing, core, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGClipPathElement'>
+ <attribute name='clipPathUnits' elements='clipPath' href='masking.html#ClipPathElementClipPathUnitsAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='color-profile'
+ href='color.html#ColorProfileElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ attributecategories='core, xlink'
+ interfaces='SVGColorProfileElement'>
+ <attribute name='local' href='color.html#ColorProfileElementLocalAttribute'/>
+ <attribute name='name' href='color.html#ColorProfileElementNameAttribute'/>
+ <attribute name='rendering-intent' href='color.html#ColorProfileElementRenderingIntentAttribute'/>
+ <attribute name='xlink:href' href='color.html#ColorProfileElementHrefAttribute'/>
+ </element>
+
+ <element
+ name='cursor'
+ href='interact.html#CursorElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ attributecategories='core, conditional processing, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGCursorElement'>
+ <attribute name='x' href='interact.html#CursorElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='interact.html#CursorElementYAttribute' animatable='yes'/>
+ <attribute name='xlink:href' href='interact.html#CursorElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='defs'
+ href='struct.html#DefsElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGDefsElement'/>
+
+ <element
+ name='desc'
+ href='struct.html#DescElement'
+ contentmodel='any'
+ attributecategories='core, style'
+ interfaces='SVGDescElement'/>
+
+ <element
+ name='ellipse'
+ href='shapes.html#EllipseElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGEllipseElement'>
+ <attribute name='cx' href='shapes.html#EllipseElementCXAttribute' animatable='yes'/>
+ <attribute name='cy' href='shapes.html#EllipseElementCYAttribute' animatable='yes'/>
+ <attribute name='rx' href='shapes.html#EllipseElementRXAttribute' animatable='yes'/>
+ <attribute name='ry' href='shapes.html#EllipseElementRYAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feBlend'
+ href='filters.html#feBlendElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFEBlendElement'>
+ <attribute name='in2' href='filters.html#feBlendIn2Attribute' animatable='yes'/>
+ <attribute name='mode' href='filters.html#feBlendModeAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feColorMatrix'
+ href='filters.html#feColorMatrixElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFEColorMatrixElement'>
+ <attribute name='type' href='filters.html#feColorMatrixTypeAttribute' animatable='yes'/>
+ <attribute name='values' href='filters.html#feColorMatrixValuesAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feComponentTransfer'
+ href='filters.html#feComponentTransferElement'
+ contentmodel='anyof'
+ elements='feFuncR, feFuncG, feFuncB, feFuncA'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFEComponentTransferElement'/>
+
+ <element
+ name='feComposite'
+ href='filters.html#feCompositeElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFECompositeElement'>
+ <attribute name='in2' href='filters.html#feCompositeIn2Attribute' animatable='yes'/>
+ <attribute name='operator' href='filters.html#feCompositeOperatorAttribute' animatable='yes'/>
+ <attribute name='k1' href='filters.html#feCompositeK1Attribute' animatable='yes'/>
+ <attribute name='k2' href='filters.html#feCompositeK2Attribute' animatable='yes'/>
+ <attribute name='k3' href='filters.html#feCompositeK3Attribute' animatable='yes'/>
+ <attribute name='k4' href='filters.html#feCompositeK4Attribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feConvolveMatrix'
+ href='filters.html#feConvolveMatrixElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFEConvolveMatrixElement'>
+ <attribute name='order' href='filters.html#feConvolveMatrixElementOrderAttribute' animatable='yes'/>
+ <attribute name='kernelMatrix' href='filters.html#feConvolveMatrixElementKernelMatrixAttribute' animatable='yes'/>
+ <attribute name='divisor' href='filters.html#feConvolveMatrixElementDivisorAttribute' animatable='yes'/>
+ <attribute name='bias' href='filters.html#feConvolveMatrixElementBiasAttribute' animatable='yes'/>
+ <attribute name='targetX' href='filters.html#feConvolveMatrixElementTargetXAttribute' animatable='yes'/>
+ <attribute name='targetY' href='filters.html#feConvolveMatrixElementTargetYAttribute' animatable='yes'/>
+ <attribute name='edgeMode' href='filters.html#feConvolveMatrixElementEdgeModeAttribute' animatable='yes'/>
+ <attribute name='kernelUnitLength' href='filters.html#feConvolveMatrixElementKernelUnitLengthAttribute' animatable='yes'/>
+ <attribute name='preserveAlpha' href='filters.html#feConvolveMatrixElementPreserveAlphaAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feDiffuseLighting'
+ href='filters.html#feDiffuseLightingElement'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFEDiffuseLightingElement'>
+ <x:contentmodel xmlns='http://www.w3.org/1999/xhtml'>Any number of <a>descriptive elements</a>
+ and exactly one <a>light source element</a>, in any order.</x:contentmodel>
+ <attribute name='surfaceScale' href='filters.html#feDiffuseLightingSurfaceScaleAttribute' animatable='yes'/>
+ <attribute name='diffuseConstant' href='filters.html#feDiffuseLightingDiffuseConstantAttribute' animatable='yes'/>
+ <attribute name='kernelUnitLength' href='filters.html#feDiffuseLightingKernelUnitLengthAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feDisplacementMap'
+ href='filters.html#feDisplacementMapElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFEDisplacementMapElement'>
+ <attribute name='in2' href='filters.html#feDisplacementMapIn2Attribute' animatable='yes'/>
+ <attribute name='scale' href='filters.html#feDisplacementMapScaleAttribute' animatable='yes'/>
+ <attribute name='xChannelSelector' href='filters.html#feDisplacementMapXChannelSelectorAttribute' animatable='yes'/>
+ <attribute name='yChannelSelector' href='filters.html#feDisplacementMapYChannelSelectorAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feDistantLight'
+ href='filters.html#feDistantLightElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core'
+ interfaces='SVGFEDistantLightElement'>
+ <attribute name='azimuth' href='filters.html#feDistantLightAzimuthAttribute' animatable='yes'/>
+ <attribute name='elevation' href='filters.html#feDistantLightElevationAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feFlood'
+ href='filters.html#feFloodElement'
+ contentmodel='anyof'
+ elements='animate, set, animateColor'
+ attributecategories='core, style, presentation, filter primitive'
+ interfaces='SVGFEFloodElement'/>
+
+ <element
+ name='feFuncR'
+ href='filters.html#feFuncRElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, transfer function element'
+ interfaces='SVGFEFuncRElement'/>
+
+ <element
+ name='feFuncG'
+ href='filters.html#feFuncGElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, transfer function element'
+ interfaces='SVGFEFuncGElement'/>
+
+ <element
+ name='feFuncB'
+ href='filters.html#feFuncBElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, transfer function element'
+ interfaces='SVGFEFuncBElement'/>
+
+ <element
+ name='feFuncA'
+ href='filters.html#feFuncAElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, transfer function element'
+ interfaces='SVGFEFuncAElement'/>
+
+ <element
+ name='feGaussianBlur'
+ href='filters.html#feGaussianBlurElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFEGaussianBlurElement'>
+ <attribute name='stdDeviation' href='filters.html#feGaussianBlurStdDeviationAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feImage'
+ href='filters.html#feImageElement'
+ contentmodel='anyof'
+ elements='animate, set, animateTransform'
+ attributecategories='core, style, presentation, filter primitive, xlink'
+ attributes='externalResourcesRequired, preserveAspectRatio'
+ interfaces='SVGFEImageElement'>
+ <attribute name='xlink:href' href='filters.html#feImageElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feMerge'
+ href='filters.html#feMergeElement'
+ contentmodel='anyof'
+ elements='feMergeNode'
+ attributecategories='core, style, presentation, filter primitive'
+ interfaces='SVGFEMergeElement'/>
+
+ <element
+ name='feMergeNode'
+ href='filters.html#feMergeNodeElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core'
+ attributes='in'
+ interfaces='SVGFEMergeNodeElement'/>
+
+ <element
+ name='feMorphology'
+ href='filters.html#feMorphologyElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFEMorphologyElement'>
+ <attribute name='operator' href='filters.html#feMorphologyOperatorAttribute' animatable='yes'/>
+ <attribute name='radius' href='filters.html#feMorphologyRadiusAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feOffset'
+ href='filters.html#feOffsetElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFEOffsetElement'>
+ <attribute name='dx' href='filters.html#feOffsetDxAttribute' animatable='yes'/>
+ <attribute name='dy' href='filters.html#feOffsetDyAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='fePointLight'
+ href='filters.html#fePointLightElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core'
+ interfaces='SVGFEPointLightElement'>
+ <attribute name='x' href='filters.html#fePointLightXAttribute' animatable='yes'/>
+ <attribute name='y' href='filters.html#fePointLightYAttribute' animatable='yes'/>
+ <attribute name='z' href='filters.html#fePointLightZAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feSpecularLighting'
+ href='filters.html#feSpecularLightingElement'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFESpecularLightingElement'>
+ <x:contentmodel xmlns='http://www.w3.org/1999/xhtml'>Any number of <a>descriptive elements</a>
+ and exactly one <a>light source element</a>, in any order.</x:contentmodel>
+ <attribute name='surfaceScale' href='filters.html#feSpecularLightingSurfaceScaleAttribute' animatable='yes'/>
+ <attribute name='specularConstant' href='filters.html#feSpecularLightingSpecularConstantAttribute' animatable='yes'/>
+ <attribute name='specularExponent' href='filters.html#feSpecularLightingSpecularExponentAttribute' animatable='yes'/>
+ <attribute name='kernelUnitLength' href='filters.html#feSpecularLightingKernelUnitLengthAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feSpotLight'
+ href='filters.html#feSpotLightElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core'
+ interfaces='SVGFESpotLightElement'>
+ <attribute name='x' href='filters.html#feSpotLightXAttribute' animatable='yes'/>
+ <attribute name='y' href='filters.html#feSpotLightYAttribute' animatable='yes'/>
+ <attribute name='z' href='filters.html#feSpotLightZAttribute' animatable='yes'/>
+ <attribute name='pointsAtX' href='filters.html#feSpotLightPointsAtXAttribute' animatable='yes'/>
+ <attribute name='pointsAtY' href='filters.html#feSpotLightPointsAtYAttribute' animatable='yes'/>
+ <attribute name='pointsAtZ' href='filters.html#feSpotLightPointsAtZAttribute' animatable='yes'/>
+ <attribute name='specularExponent' href='filters.html#feSpotLightSpecularExponentAttribute' animatable='yes'/>
+ <attribute name='limitingConeAngle' href='filters.html#feSpotLightLimitingConeAngleAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='feTile'
+ href='filters.html#feTileElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ attributes='in'
+ interfaces='SVGFETileElement'/>
+
+ <element
+ name='feTurbulence'
+ href='filters.html#feTurbulenceElement'
+ contentmodel='anyof'
+ elements='animate, set'
+ attributecategories='core, style, presentation, filter primitive'
+ interfaces='SVGFETurbulenceElement'>
+ <attribute name='baseFrequency' href='filters.html#feTurbulenceBaseFrequencyAttribute' animatable='yes'/>
+ <attribute name='numOctaves' href='filters.html#feTurbulenceNumOctavesAttribute' animatable='yes'/>
+ <attribute name='seed' href='filters.html#feTurbulenceSeedAttribute' animatable='yes'/>
+ <attribute name='stitchTiles' href='filters.html#feTurbulenceStitchTilesAttribute' animatable='yes'/>
+ <attribute name='type' href='filters.html#feTurbulenceTypeAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='filter'
+ href='filters.html#FilterElement'
+ contentmodel='anyof'
+ elementcategories='descriptive, filter primitive'
+ elements='animate, set'
+ attributecategories='core, style, presentation, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGFilterElement'>
+ <attribute name='x' href='filters.html#FilterElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='filters.html#FilterElementYAttribute' animatable='yes'/>
+ <attribute name='width' href='filters.html#FilterElementWidthAttribute' animatable='yes'/>
+ <attribute name='height' href='filters.html#FilterElementHeightAttribute' animatable='yes'/>
+ <attribute name='filterRes' href='filters.html#FilterElementFilterResAttribute' animatable='yes'/>
+ <attribute name='filterUnits' href='filters.html#FilterElementFilterUnitsAttribute' animatable='yes'/>
+ <attribute name='primitiveUnits' href='filters.html#FilterElementPrimitiveUnitsAttribute' animatable='yes'/>
+ <attribute name='xlink:href' href='filters.html#FilterElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='font'
+ href='fonts.html#FontElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ elements='font-face, missing-glyph, glyph, hkern, vkern'
+ attributecategories='core, style, presentation'
+ attributes='externalResourcesRequired'
+ interfaces='SVGFontElement'>
+ <attribute name='horiz-origin-x' href='fonts.html#FontElementHorizOriginXAttribute'/>
+ <attribute name='horiz-origin-y' href='fonts.html#FontElementHorizOriginYAttribute'/>
+ <attribute name='horiz-adv-x' href='fonts.html#FontElementHorizAdvXAttribute'/>
+ <attribute name='vert-origin-x' href='fonts.html#FontElementVertOriginXAttribute'/>
+ <attribute name='vert-origin-y' href='fonts.html#FontElementVertOriginYAttribute'/>
+ <attribute name='vert-adv-y' href='fonts.html#FontElementVertAdvYAttribute'/>
+ </element>
+
+ <element
+ name='font-face'
+ href='fonts.html#FontFaceElement'
+ attributecategories='core'
+ interfaces='SVGFontFaceElement'>
+ <x:contentmodel xmlns='http://www.w3.org/1999/xhtml'>Any number of <a>descriptive elements</a> and at most one <a>'font-face-src'</a> element, in any order.</x:contentmodel>
+ <attribute name='font-family' href='fonts.html#FontFaceElementFontFamilyAttribute'/>
+ <attribute name='font-style' href='fonts.html#FontFaceElementFontStyleAttribute'/>
+ <attribute name='font-variant' href='fonts.html#FontFaceElementFontVariantAttribute'/>
+ <attribute name='font-weight' href='fonts.html#FontFaceElementFontWeightAttribute'/>
+ <attribute name='font-stretch' href='fonts.html#FontFaceElementFontStretchAttribute'/>
+ <attribute name='font-size' href='fonts.html#FontFaceElementFontSizeAttribute'/>
+ <attribute name='unicode-range' href='fonts.html#FontFaceElementUnicodeRangeAttribute'/>
+ <attribute name='units-per-em' href='fonts.html#FontFaceElementUnitsPerEmAttribute'/>
+ <attribute name='panose-1' href='fonts.html#FontFaceElementPanose1Attribute'/>
+ <attribute name='stemv' href='fonts.html#FontFaceElementStemvAttribute'/>
+ <attribute name='stemh' href='fonts.html#FontFaceElementStemhAttribute'/>
+ <attribute name='slope' href='fonts.html#FontFaceElementSlopeAttribute'/>
+ <attribute name='cap-height' href='fonts.html#FontFaceElementCapHeightAttribute'/>
+ <attribute name='x-height' href='fonts.html#FontFaceElementXHeightAttribute'/>
+ <attribute name='accent-height' href='fonts.html#FontFaceElementAccentHeightAttribute'/>
+ <attribute name='ascent' href='fonts.html#FontFaceElementAscentAttribute'/>
+ <attribute name='descent' href='fonts.html#FontFaceElementDescentAttribute'/>
+ <attribute name='widths' href='fonts.html#FontFaceElementWidthsAttribute'/>
+ <attribute name='bbox' href='fonts.html#FontFaceElementBboxAttribute'/>
+ <attribute name='ideographic' href='fonts.html#FontFaceElementIdeographicAttribute'/>
+ <attribute name='alphabetic' href='fonts.html#FontFaceElementAlphabeticAttribute'/>
+ <attribute name='mathematical' href='fonts.html#FontFaceElementMathematicalAttribute'/>
+ <attribute name='hanging' href='fonts.html#FontFaceElementHangingAttribute'/>
+ <attribute name='v-ideographic' href='fonts.html#FontFaceElementVertIdeographicAttribute'/>
+ <attribute name='v-alphabetic' href='fonts.html#FontFaceElementVertAlphabeticAttribute'/>
+ <attribute name='v-mathematical' href='fonts.html#FontFaceElementVertMathematicalAttribute'/>
+ <attribute name='v-hanging' href='fonts.html#FontFaceElementVertHangingAttribute'/>
+ <attribute name='underline-position' href='fonts.html#FontFaceElementUnderlinePositionAttribute'/>
+ <attribute name='underline-thickness' href='fonts.html#FontFaceElementUnderlineThicknessAttribute'/>
+ <attribute name='strikethrough-position' href='fonts.html#FontFaceElementStrikeThroughPositionAttribute'/>
+ <attribute name='strikethrough-thickness' href='fonts.html#FontFaceElementStrikeThroughThicknessAttribute'/>
+ <attribute name='overline-position' href='fonts.html#FontFaceElementOverlinePositionAttribute'/>
+ <attribute name='overline-thickness' href='fonts.html#FontFaceElementOverlineThicknessAttribute'/>
+ </element>
+
+ <element
+ name='font-face-format'
+ href='fonts.html#FontFaceFormatElement'
+ attributecategories='core'
+ interfaces='SVGFontFaceFormatElement'>
+ <attribute name='string' href='fonts.html#FontFaceFormatElementStringAttribute'/>
+ </element>
+
+ <element
+ name='font-face-name'
+ href='fonts.html#FontFaceNameElement'
+ attributecategories='core'
+ interfaces='SVGFontFaceNameElement'>
+ <attribute name='name' href='fonts.html#FontFaceNameElementNameAttribute'/>
+ </element>
+
+ <element
+ name='font-face-src'
+ href='fonts.html#FontFaceSrcElement'
+ contentmodel='oneormoreof'
+ elements='font-face-uri, font-face-name'
+ attributecategories='core'
+ interfaces='SVGFontFaceSrcElement'/>
+
+ <element
+ name='font-face-uri'
+ href='fonts.html#FontFaceURIElement'
+ contentmodel='anyof'
+ elements='font-face-format'
+ attributecategories='core, xlink'
+ interfaces='SVGFontFaceUriElement'>
+ <attribute name='xlink:href' href='fonts.html#FontFaceUriElementHrefAttribute'/>
+ </element>
+
+ <element
+ name='foreignObject'
+ href='extend.html#ForeignObjectElement'
+ contentmodel='any'
+ attributecategories='core, conditional processing, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGForeignObjectElement'>
+ <attribute name='x' href='extend.html#ForeignObjectElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='extend.html#ForeignObjectElementYAttribute' animatable='yes'/>
+ <attribute name='width' href='extend.html#ForeignObjectElementWidthAttribute' animatable='yes'/>
+ <attribute name='height' href='extend.html#ForeignObjectElementHeightAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='g'
+ href='struct.html#GElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGGElement'/>
+
+ <element
+ name='glyph'
+ href='fonts.html#GlyphElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='core, style, presentation'
+ attributes='d, horiz-adv-x, vert-origin-x, vert-origin-y, vert-adv-y'
+ interfaces='SVGGlyphElement'>
+ <attribute name='unicode' elements='glyph' href='fonts.html#GlyphElementUnicodeAttribute'/>
+ <attribute name='glyph-name' elements='glyph' href='fonts.html#GlyphElementGlyphNameAttribute'/>
+ <attribute name='orientation' elements='glyph' href='fonts.html#GlyphElementOrientationAttribute'/>
+ <attribute name='arabic-form' elements='glyph' href='fonts.html#GlyphElementArabicFormAttribute'/>
+ <attribute name='lang' elements='glyph' href='fonts.html#GlyphElementLangAttribute'/>
+ </element>
+
+ <element
+ name='glyphRef'
+ href='text.html#GlyphRefElement'
+ attributecategories='core, style, presentation, xlink'
+ interfaces='SVGGlyphRefElement'>
+ <attribute name='x' href='text.html#GlyphRefElementXAttribute'/>
+ <attribute name='y' href='text.html#GlyphRefElementYAttribute'/>
+ <attribute name='dx' href='text.html#GlyphRefElementDXAttribute'/>
+ <attribute name='dy' href='text.html#GlyphRefElementDYAttribute'/>
+ <attribute name='glyphRef' href='text.html#GlyphRefElementGlyphRefAttribute'/>
+ <attribute name='format' href='text.html#GlyphRefElementFormatAttribute'/>
+ <attribute name='xlink:href' href='text.html#GlyphRefElementHrefAttribute'/>
+ </element>
+
+ <element
+ name='hkern'
+ href='fonts.html#HKernElement'
+ attributecategories='core'
+ attributes='u1, g1, u2, g2, k'
+ interfaces='SVGHKernElement'/>
+
+ <element
+ name='image'
+ href='struct.html#ImageElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive'
+ attributecategories='core, conditional processing, graphical event, style, xlink, presentation'
+ attributes='externalResourcesRequired, preserveAspectRatio, transform'
+ interfaces='SVGImageElement'>
+ <attribute name='x' href='struct.html#ImageElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='struct.html#ImageElementYAttribute' animatable='yes'/>
+ <attribute name='width' href='struct.html#ImageElementWidthAttribute' animatable='yes'/>
+ <attribute name='height' href='struct.html#ImageElementHeightAttribute' animatable='yes'/>
+ <attribute name='xlink:href' href='struct.html#ImageElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='line'
+ href='shapes.html#LineElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGLineElement'>
+ <attribute name='x1' href='shapes.html#LineElementX1Attribute' animatable='yes'/>
+ <attribute name='y1' href='shapes.html#LineElementY1Attribute' animatable='yes'/>
+ <attribute name='x2' href='shapes.html#LineElementX2Attribute' animatable='yes'/>
+ <attribute name='y2' href='shapes.html#LineElementY2Attribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='linearGradient'
+ href='pservers.html#LinearGradientElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ elements='animate, animateTransform, set, stop'
+ attributecategories='core, presentation, style, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGLinearGradientElement'>
+ <attribute name='x1' href='pservers.html#LinearGradientElementX1Attribute' animatable='yes'/>
+ <attribute name='y1' href='pservers.html#LinearGradientElementY1Attribute' animatable='yes'/>
+ <attribute name='x2' href='pservers.html#LinearGradientElementX2Attribute' animatable='yes'/>
+ <attribute name='y2' href='pservers.html#LinearGradientElementY2Attribute' animatable='yes'/>
+ <attribute name='gradientUnits' href='pservers.html#LinearGradientElementGradientUnitsAttribute' animatable='yes'/>
+ <attribute name='gradientTransform' href='pservers.html#LinearGradientElementGradientTransformAttribute' animatable='yes'/>
+ <attribute name='spreadMethod' href='pservers.html#LinearGradientElementSpreadMethodAttribute' animatable='yes'/>
+ <attribute name='xlink:href' href='pservers.html#LinearGradientElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='marker'
+ href='painting.html#MarkerElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='core, presentation, style'
+ attributes='externalResourcesRequired, viewBox, preserveAspectRatio'
+ interfaces='SVGMarkerElement'>
+ <attribute name='refX' href='painting.html#MarkerElementRefXAttribute' animatable='yes'/>
+ <attribute name='refY' href='painting.html#MarkerElementRefYAttribute' animatable='yes'/>
+ <attribute name='markerUnits' href='painting.html#MarkerUnitsAttribute' animatable='yes'/>
+ <attribute name='markerWidth' href='painting.html#MarkerWidthAttribute' animatable='yes'/>
+ <attribute name='markerHeight' href='painting.html#MarkerHeightAttribute' animatable='yes'/>
+ <attribute name='orient' href='painting.html#OrientAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='mask'
+ href='masking.html#MaskElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='conditional processing, core, presentation, style'
+ attributes='externalResourcesRequired'
+ interfaces='SVGMaskElement'>
+ <attribute name='x' elements='mask' href='masking.html#MaskElementXAttribute' animatable='yes'/>
+ <attribute name='y' elements='mask' href='masking.html#MaskElementYAttribute' animatable='yes'/>
+ <attribute name='width' elements='mask' href='masking.html#MaskElementWidthAttribute' animatable='yes'/>
+ <attribute name='height' elements='mask' href='masking.html#MaskElementHeightAttribute' animatable='yes'/>
+ <attribute name='maskUnits' elements='mask' href='masking.html#MaskElementMaskUnitsAttribute' animatable='yes'/>
+ <attribute name='maskContentUnits' elements='mask' href='masking.html#MaskElementMaskContentUnitsAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='metadata'
+ href='metadata.html#MetadataElement'
+ contentmodel='any'
+ attributecategories='core'
+ interfaces='SVGMetadataElement'/>
+
+ <element
+ name='missing-glyph'
+ href='fonts.html#MissingGlyphElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='core, style, presentation'
+ attributes='d, horiz-adv-x, vert-origin-x, vert-origin-y, vert-adv-y'
+ interfaces='SVGMissingGlyphElement'/>
+
+ <element
+ name='mpath'
+ href='animate.html#MPathElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ attributecategories='core, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGMPathElement'>
+ <attribute name='xlink:href' href='animate.html#MPathElementHrefAttribute'/>
+ </element>
+
+ <element
+ name='path'
+ href='paths.html#PathElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGPathElement'>
+ <attribute name='d' href='paths.html#DAttribute' animatable='yes'/>
+ <attribute name='pathLength' href='paths.html#PathLengthAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='pattern'
+ href='pservers.html#PatternElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='conditional processing, core, presentation, style, xlink'
+ attributes='externalResourcesRequired, viewBox, preserveAspectRatio'
+ interfaces='SVGPatternElement'>
+ <attribute name='x' href='pservers.html#PatternElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='pservers.html#PatternElementYAttribute' animatable='yes'/>
+ <attribute name='width' href='pservers.html#PatternElementWidthAttribute' animatable='yes'/>
+ <attribute name='height' href='pservers.html#PatternElementHeightAttribute' animatable='yes'/>
+ <attribute name='patternUnits' href='pservers.html#PatternElementPatternUnitsAttribute' animatable='yes'/>
+ <attribute name='patternContentUnits' href='pservers.html#PatternElementPatternContentUnitsAttribute' animatable='yes'/>
+ <attribute name='patternTransform' href='pservers.html#PatternElementPatternTransformAttribute' animatable='yes'/>
+ <attribute name='xlink:href' href='pservers.html#PatternElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='polygon'
+ href='shapes.html#PolygonElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGPolygonElement'>
+ <attribute name='points' href='shapes.html#PolygonElementPointsAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='polyline'
+ href='shapes.html#PolylineElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGPolylineElement'>
+ <attribute name='points' href='shapes.html#PolylineElementPointsAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='radialGradient'
+ href='pservers.html#RadialGradientElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ elements='animate, animateTransform, set, stop'
+ attributecategories='core, presentation, style, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGRadialGradientElement'>
+ <attribute name='cx' href='pservers.html#RadialGradientElementCXAttribute' animatable='yes'/>
+ <attribute name='cy' href='pservers.html#RadialGradientElementCYAttribute' animatable='yes'/>
+ <attribute name='r' href='pservers.html#RadialGradientElementRAttribute' animatable='yes'/>
+ <attribute name='fx' href='pservers.html#RadialGradientElementFXAttribute' animatable='yes'/>
+ <attribute name='fy' href='pservers.html#RadialGradientElementFYAttribute' animatable='yes'/>
+ <attribute name='gradientUnits' href='pservers.html#RadialGradientElementGradientUnitsAttribute' animatable='yes'/>
+ <attribute name='gradientTransform' href='pservers.html#RadialGradientElementGradientTransformAttribute' animatable='yes'/>
+ <attribute name='spreadMethod' href='pservers.html#RadialGradientElementSpreadMethodAttribute' animatable='yes'/>
+ <attribute name='xlink:href' href='pservers.html#RadialGradientElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='rect'
+ href='shapes.html#RectElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGRectElement'>
+ <attribute name='x' href='shapes.html#RectElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='shapes.html#RectElementYAttribute' animatable='yes'/>
+ <attribute name='width' href='shapes.html#RectElementWidthAttribute' animatable='yes'/>
+ <attribute name='height' href='shapes.html#RectElementHeightAttribute' animatable='yes'/>
+ <attribute name='rx' href='shapes.html#RectElementRXAttribute' animatable='yes'/>
+ <attribute name='ry' href='shapes.html#RectElementRYAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='script'
+ href='script.html#ScriptElement'
+ contentmodel='any'
+ attributecategories='core, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGScriptElement'>
+ <attribute name='type' href='script.html#ScriptElementTypeAttribute'/>
+ <attribute name='xlink:href' href='script.html#ScriptElementHrefAttribute'/>
+ </element>
+
+ <element
+ name='set'
+ href='animate.html#SetElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ attributecategories='conditional processing, core, animation event, xlink, animation attribute target, animation timing'
+ attributes='externalResourcesRequired'
+ interfaces='SVGSetElement'>
+ <attribute name='to' href='animate.html#SetElementToAttribute'/>
+ </element>
+
+ <element
+ name='stop'
+ href='pservers.html#StopElement'
+ contentmodel='anyof'
+ elements='animate, animateColor, set'
+ attributecategories='core, presentation, style'
+ interfaces='SVGStopElement'>
+ <attribute name='offset' href='pservers.html#StopElementOffsetAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='style'
+ href='styling.html#StyleElement'
+ contentmodel='any'
+ attributecategories='core'
+ interfaces='SVGStyleElement'>
+ <attribute name='type' href='styling.html#StyleElementTypeAttribute'/>
+ <attribute name='media' href='styling.html#StyleElementMediaAttribute'/>
+ <attribute name='title' href='styling.html#StyleElementTitleAttribute'/>
+ </element>
+
+ <element
+ name='svg'
+ href='struct.html#SVGElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='conditional processing, core, document event, graphical event, presentation, style'
+ attributes='externalResourcesRequired, x, y, width, height, viewBox, preserveAspectRatio, zoomAndPan, version, baseProfile, contentScriptType, contentStyleType'
+ interfaces='SVGSVGElement'>
+ <attribute name='x' href='struct.html#SVGElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='struct.html#SVGElementYAttribute' animatable='yes'/>
+ <attribute name='width' href='struct.html#SVGElementWidthAttribute' animatable='yes'/>
+ <attribute name='height' href='struct.html#SVGElementHeightAttribute' animatable='yes'/>
+ <attribute name='version' href='struct.html#SVGElementVersionAttribute'/>
+ <attribute name='baseProfile' href='struct.html#SVGElementBaseProfileAttribute'/>
+ </element>
+
+ <element
+ name='switch'
+ href='struct.html#SwitchElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape'
+ elements='svg, g, use, text, image, a, foreignObject, switch'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGSwitchElement'/>
+
+ <element
+ name='symbol'
+ href='struct.html#SymbolElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive, shape, structural, gradient'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, pattern, script, style, switch, view, text, altGlyphDef'
+ attributecategories='core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, preserveAspectRatio, viewBox'
+ interfaces='SVGSymbolElement'/>
+
+ <element
+ name='text'
+ href='text.html#TextElement'
+ contentmodel='textoranyof'
+ elementcategories='animation, descriptive, text content child'
+ elements='a'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, transform, lengthAdjust'
+ interfaces='SVGTextElement'>
+ <attribute name='x' href='text.html#TextElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='text.html#TextElementYAttribute' animatable='yes'/>
+ <attribute name='dx' href='text.html#TextElementDXAttribute' animatable='yes'/>
+ <attribute name='dy' href='text.html#TextElementDYAttribute' animatable='yes'/>
+ <attribute name='rotate' href='text.html#TextElementRotateAttribute' animatable='yes'/>
+ <attribute name='textLength' href='text.html#TextElementTextLengthAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='textPath'
+ href='text.html#TextPathElement'
+ contentmodel='textoranyof'
+ elementcategories='descriptive'
+ elements='animate, animateColor, a, set, tspan, tref, altGlyph'
+ attributecategories='conditional processing, core, graphical event, presentation, style, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGTextPathElement'>
+ <attribute name='xlink:href' href='text.html#TextPathElementHrefAttribute' animatable='yes'/>
+ <attribute name='startOffset' href='text.html#TextPathElementStartOffsetAttribute' animatable='yes'/>
+ <attribute name='method' href='text.html#TextPathElementMethodAttribute' animatable='yes'/>
+ <attribute name='spacing' href='text.html#TextPathElementSpacingAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='title'
+ href='struct.html#TitleElement'
+ contentmodel='any'
+ attributecategories='core, style'
+ interfaces='SVGTitleElement'/>
+
+ <element
+ name='tref'
+ href='text.html#TRefElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ elements='animate, animateColor, set'
+ attributecategories='conditional processing, core, graphical event, presentation, style, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGTRefElement'>
+ <attribute name='xlink:href' elements='tref' href='text.html#TRefElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='tspan'
+ href='text.html#TSpanElement'
+ contentmodel='textoranyof'
+ elementcategories='descriptive'
+ elements='a, animate, animateColor, set, tspan, tref, altGlyph'
+ attributecategories='conditional processing, core, graphical event, presentation, style'
+ attributes='externalResourcesRequired, x, y, dx, dy, rotate, textLength, lengthAdjust'
+ interfaces='SVGTSpanElement'/>
+
+ <element
+ name='use'
+ href='struct.html#UseElement'
+ contentmodel='anyof'
+ elementcategories='animation, descriptive'
+ attributecategories='core, conditional processing, graphical event, presentation, style, xlink'
+ attributes='externalResourcesRequired, transform'
+ interfaces='SVGUseElement'>
+ <attribute name='x' href='struct.html#UseElementXAttribute' animatable='yes'/>
+ <attribute name='y' href='struct.html#UseElementYAttribute' animatable='yes'/>
+ <attribute name='width' href='struct.html#UseElementWidthAttribute' animatable='yes'/>
+ <attribute name='height' href='struct.html#UseElementHeightAttribute' animatable='yes'/>
+ <attribute name='xlink:href' href='struct.html#UseElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='view'
+ href='linking.html#ViewElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ attributecategories='core'
+ attributes='externalResourcesRequired, viewBox, preserveAspectRatio, zoomAndPan'
+ interfaces='SVGViewElement'>
+ <attribute name='viewTarget' elements='view' href='linking.html#ViewElementViewTargetAttribute'/>
+ </element>
+
+ <element
+ name='vkern'
+ href='fonts.html#VKernElement'
+ attributecategories='core'
+ attributes='u1, g1, u2, g2, k'
+ interfaces='SVGVKernElement'/>
+
+ <!-- ... element categories ............................................ -->
+
+ <elementcategory name='animation' href='intro.html#TermAnimationElement' elements='animate, animateColor, animateMotion, animateTransform, set'/>
+ <elementcategory name='basic shape' href='intro.html#TermBasicShapeElement' elements='circle, ellipse, line, polygon, polyline, rect'/>
+ <elementcategory name='container' href='intro.html#TermContainerElement' elements='svg, g, defs, symbol, mask, pattern, marker, a, switch, glyph, missing-glyph'/>
+ <elementcategory name='descriptive' href='intro.html#TermDescriptiveElement' elements='desc, title, metadata'/>
+ <elementcategory name='filter primitive' href='intro.html#TermFilterPrimitiveElement' elements='feBlend, feFlood, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence'/>
+ <elementcategory name='gradient' href='intro.html#TermGradientElement' elements='linearGradient, radialGradient'/>
+ <elementcategory name='graphics' href='intro.html#TermGraphicsElement' elements='path, text, rect, circle, ellipse, line, polyline, polygon, image, use'/>
+ <elementcategory name='graphics referencing' href='intro.html#TermGraphicsReferencingElement' elements='use, image'/>
+ <elementcategory name='light source' href='intro.html#TermLightSourceElement' elements='feDistantLight, fePointLight, feSpotLight'/>
+ <elementcategory name='shape' href='intro.html#TermShapeElement' elements='circle, ellipse, line, path, polygon, polyline, rect'/>
+ <elementcategory name='structural' href='intro.html#TermStructuralElement' elements='defs, g, svg, symbol, use'/>
+ <elementcategory name='text content' href='intro.html#TermTextContentElement' elements='text, tspan, tref, textPath, altGlyph'/>
+ <elementcategory name='text content child' href='intro.html#TermTextContentChildElement' elements='tspan, tref, textPath, altGlyph'/>
+
+ <!-- ... attributes common to multiple elements ........................ -->
+
+ <!-- attributes common to both glyph and missing-glyph -->
+ <attribute name='d' elements='glyph, missing-glyph' href='fonts.html#GlyphElementDAttribute'/>
+ <attribute name='horiz-adv-x' elements='glyph, missing-glyph' href='fonts.html#GlyphElementHorizAdvXAttribute'/>
+ <attribute name='vert-origin-x' elements='glyph, missing-glyph' href='fonts.html#GlyphElementVertOriginXAttribute'/>
+ <attribute name='vert-origin-y' elements='glyph, missing-glyph' href='fonts.html#GlyphElementVertOriginYAttribute'/>
+ <attribute name='vert-adv-y' elements='glyph, missing-glyph' href='fonts.html#GlyphElementVertAdvYAttribute'/>
+
+ <!-- attribute common to most filter primitives (all except feFlood feImage feMerge feTurbulence -->
+ <attribute name='in' elements='feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feGaussianBlur, feMorphology, feOffset, feSpecularLighting, feTile' href='filters.html#FilterPrimitiveInAttribute' animatable='yes'/>
+
+ <!-- attributes common to hkern and vkern -->
+ <attribute name='u1' elements='hkern, vkern' href='fonts.html#HKernElementU1Attribute'/>
+ <attribute name='g1' elements='hkern, vkern' href='fonts.html#HKernElementG1Attribute'/>
+ <attribute name='u2' elements='hkern, vkern' href='fonts.html#HKernElementU2Attribute'/>
+ <attribute name='g2' elements='hkern, vkern' href='fonts.html#HKernElementG2Attribute'/>
+ <attribute name='k' elements='hkern, vkern' href='fonts.html#HKernElementKAttribute'/>
+
+ <!-- attributes common to text elements -->
+ <attribute name='x' elements='tspan, tref' href='text.html#TSpanElementXAttribute' animatable='yes'/>
+ <attribute name='y' elements='tspan, tref' href='text.html#TSpanElementYAttribute' animatable='yes'/>
+ <attribute name='dx' elements='tspan, tref' href='text.html#TSpanElementDXAttribute' animatable='yes'/>
+ <attribute name='dy' elements='tspan, tref' href='text.html#TSpanElementDYAttribute' animatable='yes'/>
+ <attribute name='rotate' elements='tspan, tref' href='text.html#TSpanElementRotateAttribute' animatable='yes'/>
+ <attribute name='textLength' elements='tspan, tref, textPath' href='text.html#TSpanElementTextLengthAttribute' animatable='yes'/>
+ <attribute name='lengthAdjust' elements='text, tspan, tref, textPath' href='text.html#TextElementLengthAdjustAttribute' animatable='yes'/>
+
+ <!-- xlink:show and xlink:actuate for all elements supporting the XLink attributes, except a -->
+ <attribute name='xlink:show' elements='animate, set, animateMotion, mpath, animateColor, animateTransform, color-profile, filter, feImage, font-face-uri, cursor, pattern, script, use, image, altGlyph, glyphRef' href='linking.html#XLinkShowAttribute'/>
+ <attribute name='xlink:actuate' elements='animate, set, animateMotion, mpath, animateColor, animateTransform, color-profile, filter, feImage, font-face-uri, cursor, pattern, script, use, image, altGlyph, glyphRef' href='linking.html#XLinkActuateAttribute'/>
+
+ <!-- attribute common to all animation elements -->
+ <attribute name='xlink:href' elements='animate, animateColor, animateMotion, animateTransform, set' href='animate.html#HrefAttribute'/>
+
+ <!-- misc -->
+ <attribute name='contentScriptType' href='script.html#ContentScriptTypeAttribute'/>
+ <attribute name='contentStyleType' href='styling.html#ContentStyleTypeAttribute'/>
+ <attribute name='externalResourcesRequired' href='struct.html#ExternalResourcesRequiredAttribute'/>
+ <attribute name='viewBox' href='coords.html#ViewBoxAttribute' animatable='yes'/>
+ <attribute name='preserveAspectRatio' href='coords.html#PreserveAspectRatioAttribute' animatable='yes'/>
+ <attribute name='transform' href='coords.html#TransformAttribute' animatable='yes'/>
+ <attribute name='zoomAndPan' href='interact.html#ZoomAndPanAttribute'/>
+
+ <!-- ... attribute categories .......................................... -->
+
+ <attributecategory
+ name='conditional processing'
+ href='intro.html#TermConditionalProcessingAttribute'>
+ <attribute name='requiredFeatures' href='struct.html#RequiredFeaturesAttribute'/>
+ <attribute name='requiredExtensions' href='struct.html#RequiredExtensionsAttribute'/>
+ <attribute name='systemLanguage' href='struct.html#SystemLanguageAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='core'
+ href='intro.html#TermCoreAttributes'>
+ <attribute name='id' href='struct.html#IDAttribute'/>
+ <attribute name='xml:base' href='struct.html#XMLBaseAttribute'/>
+ <attribute name='xml:lang' href='struct.html#XMLLangAttribute'/>
+ <attribute name='xml:space' href='struct.html#XMLSpaceAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='style'>
+ <attribute name='class' href='styling.html#ClassAttribute' animatable='yes'/>
+ <attribute name='style' href='styling.html#StyleAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='presentation'
+ href='intro.html#TermPresentationAttribute'
+ presentationattributes='alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, unicode-bidi, visibility, word-spacing, writing-mode'/>
+
+ <attributecategory
+ name='document event'
+ href='intro.html#TermDocumentEventAttribute'>
+ <attribute name='onunload' href='script.html#OnUnloadEventAttribute'/>
+ <attribute name='onabort' href='script.html#OnAbortEventAttribute'/>
+ <attribute name='onerror' href='script.html#OnErrorEventAttribute'/>
+ <attribute name='onresize' href='script.html#OnResizeEventAttribute'/>
+ <attribute name='onscroll' href='script.html#OnScrollEventAttribute'/>
+ <attribute name='onzoom' href='script.html#OnZoomEventAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='graphical event'
+ href='intro.html#TermGraphicalEventAttribute'>
+ <attribute name='onfocusin' href='script.html#OnFocusInEventAttribute'/>
+ <attribute name='onfocusout' href='script.html#OnFocusOutEventAttribute'/>
+ <attribute name='onactivate' href='script.html#OnActivateEventAttribute'/>
+ <attribute name='onclick' href='script.html#OnClickEventAttribute'/>
+ <attribute name='onmousedown' href='script.html#OnMouseDownEventAttribute'/>
+ <attribute name='onmouseup' href='script.html#OnMouseUpEventAttribute'/>
+ <attribute name='onmouseover' href='script.html#OnMouseOverEventAttribute'/>
+ <attribute name='onmousemove' href='script.html#OnMouseMoveEventAttribute'/>
+ <attribute name='onmouseout' href='script.html#OnMouseOutEventAttribute'/>
+ <attribute name='onload' href='script.html#OnLoadEventAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='animation event'
+ href='intro.html#TermAnimationEventAttribute'>
+ <attribute name='onbegin' href='script.html#OnBeginEventAttribute'/>
+ <attribute name='onend' href='script.html#OnEndEventAttribute'/>
+ <attribute name='onrepeat' href='script.html#OnRepeatEventAttribute'/>
+ <attribute name='onload' href='script.html#OnLoadEventAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='xlink'
+ href='intro.html#TermXLinkAttributes'
+ attributes='xlink:href, xlink:show, xlink:actuate'>
+ <attribute name='xlink:type' href='linking.html#XLinkTypeAttribute'/>
+ <attribute name='xlink:role' href='linking.html#XLinkRoleAttribute'/>
+ <attribute name='xlink:arcrole' href='linking.html#XLinkArcRoleAttribute'/>
+ <attribute name='xlink:title' href='linking.html#XLinkTitleAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='filter primitive'
+ href='intro.html#TermFilterPrimitiveAttributes'>
+ <attribute name='x' href='filters.html#FilterPrimitiveXAttribute' animatable='yes'/>
+ <attribute name='y' href='filters.html#FilterPrimitiveYAttribute' animatable='yes'/>
+ <attribute name='width' href='filters.html#FilterPrimitiveWidthAttribute' animatable='yes'/>
+ <attribute name='height' href='filters.html#FilterPrimitiveHeightAttribute' animatable='yes'/>
+ <attribute name='result' href='filters.html#FilterPrimitiveResultAttribute' animatable='yes'/>
+ </attributecategory>
+
+ <attributecategory
+ name='animation attribute target'
+ href='animate.html#TargetAttributes'>
+ <attribute name='attributeType' href='animate.html#AttributeTypeAttribute'/>
+ <attribute name='attributeName' href='animate.html#AttributeNameAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='animation timing'
+ href='animate.html#TimingAttributes'>
+ <attribute name='begin' href='animate.html#BeginAttribute'/>
+ <attribute name='dur' href='animate.html#DurAttribute'/>
+ <attribute name='end' href='animate.html#EndAttribute'/>
+ <attribute name='min' href='animate.html#MinAttribute'/>
+ <attribute name='max' href='animate.html#MaxAttribute'/>
+ <attribute name='restart' href='animate.html#RestartAttribute'/>
+ <attribute name='repeatCount' href='animate.html#RepeatCountAttribute'/>
+ <attribute name='repeatDur' href='animate.html#RepeatDurAttribute'/>
+ <attribute name='fill' href='animate.html#FillAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='animation value'
+ href='animate.html#ValueAttributes'>
+ <attribute name='calcMode' href='animate.html#CalcModeAttribute'/>
+ <attribute name='values' href='animate.html#ValuesAttribute'/>
+ <attribute name='keyTimes' href='animate.html#KeyTimesAttribute'/>
+ <attribute name='keySplines' href='animate.html#KeySplinesAttribute'/>
+ <attribute name='from' href='animate.html#FromAttribute'/>
+ <attribute name='to' href='animate.html#ToAttribute'/>
+ <attribute name='by' href='animate.html#ByAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='animation addition'
+ href='animate.html#AdditionAttributes'>
+ <attribute name='additive' href='animate.html#AdditiveAttribute'/>
+ <attribute name='accumulate' href='animate.html#AccumulateAttribute'/>
+ </attributecategory>
+
+ <attributecategory
+ name='transfer function element'
+ href='filters.html#TransferFunctionElementAttributes'>
+ <attribute name='type' href='filters.html#feComponentTransferTypeAttribute' animatable='yes'/>
+ <attribute name='tableValues' href='filters.html#feComponentTransferTableValuesAttribute' animatable='yes'/>
+ <attribute name='slope' href='filters.html#feComponentTransferSlopeAttribute' animatable='yes'/>
+ <attribute name='intercept' href='filters.html#feComponentTransferInterceptAttribute' animatable='yes'/>
+ <attribute name='amplitude' href='filters.html#feComponentTransferAmplitudeAttribute' animatable='yes'/>
+ <attribute name='exponent' href='filters.html#feComponentTransferExponentAttribute' animatable='yes'/>
+ <attribute name='offset' href='filters.html#feComponentTransferOffsetAttribute' animatable='yes'/>
+ </attributecategory>
+
+ <!-- ... properties ..................................................... -->
+
+ <property name='alignment-baseline' href='text.html#AlignmentBaselineProperty'/>
+ <property name='baseline-shift' href='text.html#BaselineShiftProperty'/>
+ <property name='clip' href='masking.html#ClipProperty'/>
+ <property name='clip-path' href='masking.html#ClipPathProperty'/>
+ <property name='clip-rule' href='masking.html#ClipRuleProperty'/>
+ <property name='color' href='color.html#ColorProperty'/>
+ <property name='color-interpolation' href='painting.html#ColorInterpolationProperty'/>
+ <property name='color-interpolation-filters' href='painting.html#ColorInterpolationFiltersProperty'/>
+ <property name='color-profile' href='color.html#ColorProfileProperty'/>
+ <property name='color-rendering' href='painting.html#ColorRenderingProperty'/>
+ <property name='cursor' href='interact.html#CursorProperty'/>
+ <property name='direction' href='text.html#DirectionProperty'/>
+ <property name='display' href='painting.html#DisplayProperty'/>
+ <property name='dominant-baseline' href='text.html#DominantBaselineProperty'/>
+ <property name='enable-background' href='filters.html#EnableBackgroundProperty'/>
+ <property name='fill' href='painting.html#FillProperty'/>
+ <property name='fill-opacity' href='painting.html#FillOpacityProperty'/>
+ <property name='fill-rule' href='painting.html#FillRuleProperty'/>
+ <property name='filter' href='filters.html#FilterProperty'/>
+ <property name='flood-color' href='filters.html#FloodColorProperty'/>
+ <property name='flood-opacity' href='filters.html#FloodOpacityProperty'/>
+ <property name='font' href='text.html#FontProperty'/>
+ <property name='font-family' href='text.html#FontFamilyProperty'/>
+ <property name='font-size' href='text.html#FontSizeProperty'/>
+ <property name='font-size-adjust' href='text.html#FontSizeAdjustProperty'/>
+ <property name='font-stretch' href='text.html#FontStretchProperty'/>
+ <property name='font-style' href='text.html#FontStyleProperty'/>
+ <property name='font-variant' href='text.html#FontVariantProperty'/>
+ <property name='font-weight' href='text.html#FontWeightProperty'/>
+ <property name='glyph-orientation-horizontal' href='text.html#GlyphOrientationHorizontalProperty'/>
+ <property name='glyph-orientation-vertical' href='text.html#GlyphOrientationVerticalProperty'/>
+ <property name='image-rendering' href='painting.html#ImageRenderingProperty'/>
+ <property name='kerning' href='text.html#KerningProperty'/>
+ <property name='letter-spacing' href='text.html#LetterSpacingProperty'/>
+ <property name='lighting-color' href='filters.html#LightingColorProperty'/>
+ <property name='marker' href='painting.html#MarkerProperty'/>
+ <property name='marker-end' href='painting.html#MarkerEndProperty'/>
+ <property name='marker-mid' href='painting.html#MarkerMidProperty'/>
+ <property name='marker-start' href='painting.html#MarkerStartProperty'/>
+ <property name='mask' href='masking.html#MaskProperty'/>
+ <property name='opacity' href='masking.html#OpacityProperty'/>
+ <property name='overflow' href='masking.html#OverflowProperty'/>
+ <property name='pointer-events' href='interact.html#PointerEventsProperty'/>
+ <property name='shape-rendering' href='painting.html#ShapeRenderingProperty'/>
+ <property name='stop-color' href='pservers.html#StopColorProperty'/>
+ <property name='stop-opacity' href='pservers.html#StopOpacityProperty'/>
+ <property name='stroke' href='painting.html#StrokeProperty'/>
+ <property name='stroke-dasharray' href='painting.html#StrokeDasharrayProperty'/>
+ <property name='stroke-dashoffset' href='painting.html#StrokeDashoffsetProperty'/>
+ <property name='stroke-linecap' href='painting.html#StrokeLinecapProperty'/>
+ <property name='stroke-linejoin' href='painting.html#StrokeLinejoinProperty'/>
+ <property name='stroke-miterlimit' href='painting.html#StrokeMiterlimitProperty'/>
+ <property name='stroke-opacity' href='painting.html#StrokeOpacityProperty'/>
+ <property name='stroke-width' href='painting.html#StrokeWidthProperty'/>
+ <property name='text-anchor' href='text.html#TextAnchorProperty'/>
+ <property name='text-decoration' href='text.html#TextDecorationProperty'/>
+ <property name='text-rendering' href='painting.html#TextRenderingProperty'/>
+ <property name='unicode-bidi' href='text.html#UnicodeBidiProperty'/>
+ <property name='visibility' href='painting.html#VisibilityProperty'/>
+ <property name='word-spacing' href='text.html#WordSpacingProperty'/>
+ <property name='writing-mode' href='text.html#WritingModeProperty'/>
+
+ <!-- ... interfaces ..................................................... -->
+
+ <interface name='SVGDocument' href='struct.html#InterfaceSVGDocument'/>
+ <interface name='SVGSVGElement' href='struct.html#InterfaceSVGSVGElement'/>
+ <interface name='SVGGElement' href='struct.html#InterfaceSVGGElement'/>
+ <interface name='SVGElement' href='types.html#InterfaceSVGElement'/>
+ <interface name='SVGDefsElement' href='struct.html#InterfaceSVGDefsElement'/>
+ <interface name='SVGTitleElement' href='struct.html#InterfaceSVGTitleElement'/>
+ <interface name='SVGDescElement' href='struct.html#InterfaceSVGDescElement'/>
+ <interface name='SVGSymbolElement' href='struct.html#InterfaceSVGSymbolElement'/>
+ <interface name='SVGUseElement' href='struct.html#InterfaceSVGUseElement'/>
+ <interface name='SVGPathElement' href='paths.html#InterfaceSVGPathElement'/>
+ <interface name='SVGElementInstance' href='struct.html#InterfaceSVGElementInstance'/>
+ <interface name='SVGElementInstanceList' href='struct.html#InterfaceSVGElementInstanceList'/>
+ <interface name='SVGImageElement' href='struct.html#InterfaceSVGImageElement'/>
+ <interface name='SVGSwitchElement' href='struct.html#InterfaceSVGSwitchElement'/>
+ <interface name='GetSVGDocument' href='struct.html#InterfaceGetSVGDocument'/>
+ <interface name='SVGAnimatedInteger' href='types.html#InterfaceSVGAnimatedInteger'/>
+ <interface name='SVGAnimatedNumber' href='types.html#InterfaceSVGAnimatedNumber'/>
+ <interface name='SVGAnimatedLength' href='types.html#InterfaceSVGAnimatedLength'/>
+ <interface name='SVGAnimatedEnumeration' href='types.html#InterfaceSVGAnimatedEnumeration'/>
+ <interface name='SVGViewSpec' href='types.html#InterfaceSVGViewSpec'/>
+ <interface name='SVGZoomAndPan' href='types.html#InterfaceSVGZoomAndPan'/>
+ <interface name='SVGFitToViewBox' href='types.html#InterfaceSVGFitToViewBox'/>
+ <interface name='SVGNumber' href='types.html#InterfaceSVGNumber'/>
+ <interface name='SVGAngle' href='types.html#InterfaceSVGAngle'/>
+ <interface name='SVGMatrix' href='coords.html#InterfaceSVGMatrix'/>
+ <interface name='SVGRect' href='types.html#InterfaceSVGRect'/>
+ <interface name='SVGAnimatedRect' href='types.html#InterfaceSVGAnimatedRect'/>
+ <interface name='SVGLength' href='types.html#InterfaceSVGLength'/>
+ <interface name='SVGTransform' href='coords.html#InterfaceSVGTransform'/>
+ <interface name='SVGStringList' href='types.html#InterfaceSVGStringList'/>
+ <interface name='SVGException' href='svgdom.html#ExceptionSVGException'/>
+ <interface name='SVGPaint' href='painting.html#InterfaceSVGPaint'/>
+ <interface name='SVGTransformList' href='coords.html#InterfaceSVGTransformList'/>
+ <interface name='SVGAnimatedTransformList' href='coords.html#InterfaceSVGAnimatedTransformList'/>
+ <interface name='SVGGradientElement' href='pservers.html#InterfaceSVGGradientElement'/>
+ <interface name='SVGClipPathElement' href='masking.html#InterfaceSVGClipPathElement'/>
+ <interface name='SVGMaskElement' href='masking.html#InterfaceSVGMaskElement'/>
+ <interface name='SVGAnimatedLengthList' href='types.html#InterfaceSVGAnimatedLengthList'/>
+ <interface name='SVGAnimatedAngle' href='types.html#InterfaceSVGAnimatedAngle'/>
+ <interface name='SVGAnimatedString' href='types.html#InterfaceSVGAnimatedString'/>
+ <interface name='SVGNumberList' href='types.html#InterfaceSVGNumberList'/>
+ <interface name='SVGAnimatedNumberList' href='types.html#InterfaceSVGAnimatedNumberList'/>
+ <interface name='SVGLengthList' href='types.html#InterfaceSVGLengthList'/>
+ <interface name='SVGColor' href='types.html#InterfaceSVGColor'/>
+ <interface name='SVGICCColor' href='types.html#InterfaceSVGICCColor'/>
+ <interface name='SVGStylable' href='types.html#InterfaceSVGStylable'/>
+ <interface name='SVGLocatable' href='types.html#InterfaceSVGLocatable'/>
+ <interface name='SVGTransformable' href='types.html#InterfaceSVGTransformable'/>
+ <interface name='SVGTests' href='types.html#InterfaceSVGTests'/>
+ <interface name='SVGLangSpace' href='types.html#InterfaceSVGLangSpace'/>
+ <interface name='SVGExternalResourcesRequired' href='types.html#InterfaceSVGExternalResourcesRequired'/>
+ <interface name='SVGURIReference' href='types.html#InterfaceSVGURIReference'/>
+ <interface name='SVGCSSRule' href='types.html#InterfaceSVGCSSRule'/>
+ <interface name='SVGRenderingIntent' href='types.html#InterfaceSVGRenderingIntent'/>
+ <interface name='SVGAnimatedBoolean' href='types.html#InterfaceSVGAnimatedBoolean'/>
+ <interface name='SVGUnitTypes' href='types.html#InterfaceSVGUnitTypes'/>
+ <interface name='SVGStyleElement' href='styling.html#InterfaceSVGStyleElement'/>
+ <interface name='SVGPoint' href='coords.html#InterfaceSVGPoint'/>
+ <interface name='SVGPointList' href='coords.html#InterfaceSVGPointList'/>
+ <interface name='SVGPreserveAspectRatio' href='coords.html#InterfaceSVGPreserveAspectRatio'/>
+ <interface name='SVGAnimatedPreserveAspectRatio' href='coords.html#InterfaceSVGAnimatedPreserveAspectRatio'/>
+ <interface name='SVGPathSeg' href='paths.html#InterfaceSVGPathSeg'/>
+ <interface name="SVGPathSegClosePath" href="paths.html#InterfaceSVGPathSegClosePath"/>
+ <interface name="SVGPathSegMovetoAbs" href="paths.html#InterfaceSVGPathSegMovetoAbs"/>
+ <interface name="SVGPathSegMovetoRel" href="paths.html#InterfaceSVGPathSegMovetoRel"/>
+ <interface name="SVGPathSegLinetoAbs" href="paths.html#InterfaceSVGPathSegLinetoAbs"/>
+ <interface name="SVGPathSegLinetoRel" href="paths.html#InterfaceSVGPathSegLinetoRel"/>
+ <interface name="SVGPathSegCurvetoCubicAbs" href="paths.html#InterfaceSVGPathSegCurvetoCubicAbs"/>
+ <interface name="SVGPathSegCurvetoCubicRel" href="paths.html#InterfaceSVGPathSegCurvetoCubicRel"/>
+ <interface name="SVGPathSegCurvetoQuadraticAbs" href="paths.html#InterfaceSVGPathSegCurvetoQuadraticAbs"/>
+ <interface name="SVGPathSegCurvetoQuadraticRel" href="paths.html#InterfaceSVGPathSegCurvetoQuadraticRel"/>
+ <interface name="SVGPathSegArcAbs" href="paths.html#InterfaceSVGPathSegArcAbs"/>
+ <interface name="SVGPathSegArcRel" href="paths.html#InterfaceSVGPathSegArcRel"/>
+ <interface name="SVGPathSegLinetoHorizontalAbs" href="paths.html#InterfaceSVGPathSegLinetoHorizontalAbs"/>
+ <interface name="SVGPathSegLinetoHorizontalRel" href="paths.html#InterfaceSVGPathSegLinetoHorizontalRel"/>
+ <interface name="SVGPathSegLinetoVerticalAbs" href="paths.html#InterfaceSVGPathSegLinetoVerticalAbs"/>
+ <interface name="SVGPathSegLinetoVerticalRel" href="paths.html#InterfaceSVGPathSegLinetoVerticalRel"/>
+ <interface name="SVGPathSegCurvetoCubicSmoothAbs" href="paths.html#InterfaceSVGPathSegCurvetoCubicSmoothAbs"/>
+ <interface name="SVGPathSegCurvetoCubicSmoothRel" href="paths.html#InterfaceSVGPathSegCurvetoCubicSmoothRel"/>
+ <interface name="SVGPathSegCurvetoQuadraticSmoothAbs" href="paths.html#InterfaceSVGPathSegCurvetoQuadraticSmoothAbs"/>
+ <interface name="SVGPathSegCurvetoQuadraticSmoothRel" href="paths.html#InterfaceSVGPathSegCurvetoQuadraticSmoothRel"/>
+ <interface name="SVGPathSegList" href="paths.html#InterfaceSVGPathSegList"/>
+ <interface name="SVGAnimatedPathData" href="paths.html#InterfaceSVGAnimatedPathData"/>
+ <interface name='SVGRectElement' href='shapes.html#InterfaceSVGRectElement'/>
+ <interface name='SVGCircleElement' href='shapes.html#InterfaceSVGCircleElement'/>
+ <interface name='SVGEllipseElement' href='shapes.html#InterfaceSVGEllipseElement'/>
+ <interface name='SVGLineElement' href='shapes.html#InterfaceSVGLineElement'/>
+ <interface name='SVGPolylineElement' href='shapes.html#InterfaceSVGPolylineElement'/>
+ <interface name='SVGPolygonElement' href='shapes.html#InterfaceSVGPolygonElement'/>
+ <interface name='SVGAnimatedPoints' href='shapes.html#InterfaceSVGAnimatedPoints'/>
+ <interface name='SVGTextElement' href='text.html#InterfaceSVGTextElement'/>
+ <interface name='SVGTSpanElement' href='text.html#InterfaceSVGTSpanElement'/>
+ <interface name='SVGTRefElement' href='text.html#InterfaceSVGTRefElement'/>
+ <interface name='SVGTextPathElement' href='text.html#InterfaceSVGTextPathElement'/>
+ <interface name='SVGAltGlyphElement' href='text.html#InterfaceSVGAltGlyphElement'/>
+ <interface name='SVGAltGlyphDefElement' href='text.html#InterfaceSVGAltGlyphDefElement'/>
+ <interface name='SVGAltGlyphItemElement' href='text.html#InterfaceSVGAltGlyphItemElement'/>
+ <interface name='SVGGlyphRefElement' href='text.html#InterfaceSVGGlyphRefElement'/>
+ <interface name='SVGTextContentElement' href='text.html#InterfaceSVGTextContentElement'/>
+ <interface name='SVGTextPositioningElement' href='text.html#InterfaceSVGTextPositioningElement'/>
+ <interface name='SVGMarkerElement' href='painting.html#InterfaceSVGMarkerElement'/>
+ <interface name='SVGColorProfileElement' href='color.html#InterfaceSVGColorProfileElement'/>
+ <interface name='SVGColorProfileRule' href='color.html#InterfaceSVGColorProfileRule'/>
+ <interface name='SVGLinearGradientElement' href='pservers.html#InterfaceSVGLinearGradientElement'/>
+ <interface name='SVGRadialGradientElement' href='pservers.html#InterfaceSVGRadialGradientElement'/>
+ <interface name='SVGStopElement' href='pservers.html#InterfaceSVGStopElement'/>
+ <interface name='SVGPatternElement' href='pservers.html#InterfaceSVGPatternElement'/>
+ <interface name='SVGCursorElement' href='interact.html#InterfaceSVGCursorElement'/>
+ <interface name='SVGAElement' href='linking.html#InterfaceSVGAElement'/>
+ <interface name='SVGViewElement' href='linking.html#InterfaceSVGViewElement'/>
+ <interface name='SVGScriptElement' href='script.html#InterfaceSVGScriptElement'/>
+ <interface name='SVGZoomEvent' href='script.html#InterfaceSVGZoomEvent'/>
+ <interface name='SVGAnimateElement' href='animate.html#InterfaceSVGAnimateElement'/>
+ <interface name='SVGSetElement' href='animate.html#InterfaceSVGSetElement'/>
+ <interface name='SVGAnimateMotionElement' href='animate.html#InterfaceSVGAnimateMotionElement'/>
+ <interface name='SVGMPathElement' href='animate.html#InterfaceSVGMPathElement'/>
+ <interface name='SVGAnimateColorElement' href='animate.html#InterfaceSVGAnimateColorElement'/>
+ <interface name='SVGAnimateTransformElement' href='animate.html#InterfaceSVGAnimateTransformElement'/>
+ <interface name='ElementTimeControl' href='animate.html#InterfaceElementTimeControl'/>
+ <interface name='TimeEvent' href='animate.html#InterfaceTimeEvent'/>
+ <interface name='SVGAnimationElement' href='animate.html#InterfaceSVGAnimationElement'/>
+ <interface name='SVGFontElement' href='fonts.html#InterfaceSVGFontElement'/>
+ <interface name='SVGGlyphElement' href='fonts.html#InterfaceSVGGlyphElement'/>
+ <interface name='SVGMissingGlyphElement' href='fonts.html#InterfaceSVGMissingGlyphElement'/>
+ <interface name='SVGHKernElement' href='fonts.html#InterfaceSVGHKernElement'/>
+ <interface name='SVGVKernElement' href='fonts.html#InterfaceSVGVKernElement'/>
+ <interface name='SVGFontFaceElement' href='fonts.html#InterfaceSVGFontFaceElement'/>
+ <interface name='SVGFontFaceSrcElement' href='fonts.html#InterfaceSVGFontFaceSrcElement'/>
+ <interface name='SVGFontFaceUriElement' href='fonts.html#InterfaceSVGFontFaceUriElement'/>
+ <interface name='SVGFontFaceFormatElement' href='fonts.html#InterfaceSVGFontFaceFormatElement'/>
+ <interface name='SVGFontFaceNameElement' href='fonts.html#InterfaceSVGFontFaceNameElement'/>
+ <interface name='SVGMetadataElement' href='metadata.html#InterfaceSVGMetadataElement'/>
+ <interface name='SVGForeignObjectElement' href='extend.html#InterfaceSVGForeignObjectElement'/>
+ <interface name='SVGFilterElement' href='filters.html#InterfaceSVGFilterElement'/>
+ <interface name='SVGFilterPrimitiveStandardAttributes' href='filters.html#InterfaceSVGFilterPrimitiveStandardAttributes'/>
+ <interface name='SVGFEBlendElement' href='filters.html#InterfaceSVGFEBlendElement'/>
+ <interface name='SVGFEColorMatrixElement' href='filters.html#InterfaceSVGFEColorMatrixElement'/>
+ <interface name='SVGFEComponentTransferElement' href='filters.html#InterfaceSVGFEComponentTransferElement'/>
+ <interface name='SVGComponentTransferFunctionElement' href='filters.html#InterfaceSVGComponentTransferFunctionElement'/>
+ <interface name='SVGFEFuncRElement' href='filters.html#InterfaceSVGFEFuncRElement'/>
+ <interface name='SVGFEFuncGElement' href='filters.html#InterfaceSVGFEFuncGElement'/>
+ <interface name='SVGFEFuncBElement' href='filters.html#InterfaceSVGFEFuncBElement'/>
+ <interface name='SVGFEFuncAElement' href='filters.html#InterfaceSVGFEFuncAElement'/>
+ <interface name='SVGFECompositeElement' href='filters.html#InterfaceSVGFECompositeElement'/>
+ <interface name='SVGFEConvolveMatrixElement' href='filters.html#InterfaceSVGFEConvolveMatrixElement'/>
+ <interface name='SVGFEDiffuseLightingElement' href='filters.html#InterfaceSVGFEDiffuseLightingElement'/>
+ <interface name='SVGFEDistantLightElement' href='filters.html#InterfaceSVGFEDistantLightElement'/>
+ <interface name='SVGFEPointLightElement' href='filters.html#InterfaceSVGFEPointLightElement'/>
+ <interface name='SVGFESpotLightElement' href='filters.html#InterfaceSVGFESpotLightElement'/>
+ <interface name='SVGFEDisplacementMapElement' href='filters.html#InterfaceSVGFEDisplacementMapElement'/>
+ <interface name='SVGFEFloodElement' href='filters.html#InterfaceSVGFEFloodElement'/>
+ <interface name='SVGFEGaussianBlurElement' href='filters.html#InterfaceSVGFEGaussianBlurElement'/>
+ <interface name='SVGFEImageElement' href='filters.html#InterfaceSVGFEImageElement'/>
+ <interface name='SVGFEMergeElement' href='filters.html#InterfaceSVGFEMergeElement'/>
+ <interface name='SVGFEMergeNodeElement' href='filters.html#InterfaceSVGFEMergeNodeElement'/>
+ <interface name='SVGFEMorphologyElement' href='filters.html#InterfaceSVGFEMorphologyElement'/>
+ <interface name='SVGFEOffsetElement' href='filters.html#InterfaceSVGFEOffsetElement'/>
+ <interface name='SVGFESpecularLightingElement' href='filters.html#InterfaceSVGFESpecularLightingElement'/>
+ <interface name='SVGFETileElement' href='filters.html#InterfaceSVGFETileElement'/>
+ <interface name='SVGFETurbulenceElement' href='filters.html#InterfaceSVGFETurbulenceElement'/>
+
+ <!-- ... grammar symbols ................................................ -->
+ <symbol name='angle' href='types.html#DataTypeAngle'/>
+ <symbol name='anything' href='types.html#DataTypeAnything'/>
+ <symbol name='color' href='types.html#DataTypeColor'/>
+ <symbol name='coordinate' href='types.html#DataTypeCoordinate'/>
+ <symbol name='frequency' href='types.html#DataTypeFrequency'/>
+ <symbol name='icccolor' href='types.html#DataTypeICCColor'/>
+ <symbol name='integer' href='types.html#DataTypeInteger'/>
+ <symbol name='length' href='types.html#DataTypeLength'/>
+ <symbol name='list' href='types.html#DataTypeList'/>
+ <symbol name='list-of-family-names' href='types.html#DataTypeListOfFamilyNames'/>
+<!--
+ <symbol name='list-of-language-ids' href='types.html#DataTypeListOfLanguageIDs'/>
+-->
+ <symbol name='list-of-strings' href='types.html#DataTypeListOfStrings'/>
+ <symbol name="name" href="types.html#DataTypeName"></symbol>
+ <symbol name='number' href='types.html#DataTypeNumber'/>
+ <symbol name='number-optional-number' href='types.html#DataTypeNumberOptionalNumber'/>
+ <symbol name='paint' href='types.html#DataTypePaint'/>
+ <symbol name='percentage' href='types.html#DataTypePercentage'/>
+ <symbol name='time' href='types.html#DataTypeTime'/>
+ <symbol name='transform-list' href='types.html#DataTypeTransformList'/>
+ <symbol name='iri' href='types.html#DataTypeIRI'/>
+ <symbol name='FuncIRI' href='types.html#DataTypeFuncIRI'/>
+ <symbol name="XML-Name" href="types.html#DataTypeXML-Name"/>
+
+ <!-- ... terms (these will be generated later) .......................... -->
+ <term name='SVG document' href='intro.html#TermSVGDocumentFragment'/>
+ <term name='SVG documents' href='intro.html#TermSVGDocumentFragment'/>
+ <term name='SVG document fragment' href='intro.html#TermSVGDocumentFragment'/>
+ <term name='SVG document fragments' href='intro.html#TermSVGDocumentFragment'/>
+ <term name='graphics element' href='intro.html#TermGraphicsElement'/>
+ <term name='graphics elements' href='intro.html#TermGraphicsElement'/>
+ <term name='container element' href='intro.html#TermGraphicsElement'/>
+ <term name='container elements' href='intro.html#TermContainerElement'/>
+ <term name='animation element' href='intro.html#TermAnimationElement'/>
+ <term name='animation elements' href='intro.html#TermAnimationElement'/>
+ <term name='structural element' href='intro.html#TermStructuralElement'/>
+ <term name='structural elements' href='intro.html#TermStructuralElement'/>
+ <term name='descriptive element' href='intro.html#TermDescriptiveElement'/>
+ <term name='descriptive elements' href='intro.html#TermDescriptiveElement'/>
+ <term name='gradient element' href='intro.html#TermGradientElement'/>
+ <term name='gradient elements' href='intro.html#TermGradientElement'/>
+ <term name='hit-test' href='intro.html#TermHitTesting'/>
+ <term name='hit-testing' href='intro.html#TermHitTesting'/>
+ <term name='text content element' href='intro.html#TermTextContentElement'/>
+ <term name='text content elements' href='intro.html#TermTextContentElement'/>
+ <term name='text content child element' href='intro.html#TermTextContentChildElement'/>
+ <term name='text content child elements' href='intro.html#TermTextContentChildElement'/>
+ <term name='filter primitive element' href='intro.html#TermFilterPrimitiveElement'/>
+ <term name='filter primitive elements' href='intro.html#TermFilterPrimitiveElement'/>
+ <term name='light source element' href='intro.html#TermLightSourceElement'/>
+ <term name='light source elements' href='intro.html#TermLightSourceElement'/>
+ <term name='IRI' href='intro.html#TermIRIReference'/>
+ <term name='IRI reference' href='intro.html#TermIRIReference'/>
+ <term name='IRI references' href='intro.html#TermIRIReference'/>
+ <term name='local IRI reference' href='intro.html#TermLocalIRIReference'/>
+ <term name='local IRI references' href='intro.html#TermLocalIRIReference'/>
+ <term name='non-local IRI reference' href='intro.html#TermNonLocalIRIReference'/>
+ <term name='non-local IRI references' href='intro.html#TermNonLocalIRIReference'/>
+ <term name='property' href='intro.html#TermProperty'/>
+ <term name='properties' href='intro.html#TermProperty'/>
+ <term name='presentation attribute' href='intro.html#TermPresentationAttribute'/>
+ <term name='presentation attributes' href='intro.html#TermPresentationAttribute'/>
+ <term name='graphical event attribute' href='intro.html#TermGraphicalEventAttribute'/>
+ <term name='graphical event attributes' href='intro.html#TermGraphicalEventAttribute'/>
+ <term name='document event attribute' href='intro.html#TermDocumentEventAttribute'/>
+ <term name='document event attributes' href='intro.html#TermDocumentEventAttribute'/>
+ <term name='animation event attribute' href='intro.html#TermAnimationEventAttribute'/>
+ <term name='animation event attributes' href='intro.html#TermAnimationEventAttribute'/>
+ <term name='animation attribute target attribute' href='intro.html#TermAnimationAttributeTargetAttribute'/>
+ <term name='animation timing attribute' href='intro.html#TermAnimationTimingAttribute'/>
+ <term name='animation value attribute' href='intro.html#TermAnimationValueAttribute'/>
+ <term name='animation addition attribute' href='intro.html#TermAnimationAdditionAttribute'/>
+ <term name='event attribute' href='intro.html#TermEventAttribute'/>
+ <term name='event attributes' href='intro.html#TermEventAttribute'/>
+ <term name='conditional processing attribute' href='intro.html#TermConditionalProcessingAttribute'/>
+ <term name='conditional processing attributes' href='intro.html#TermConditionalProcessingAttribute'/>
+ <term name='filter primitive attribute' href='intro.html#TermFilterPrimitiveAttributes'/>
+ <term name='filter primitive attributes' href='intro.html#TermFilterPrimitiveAttributes'/>
+ <term name='XLink attribute' href='intro.html#TermXLinkAttributes'/>
+ <term name='XLink attributes' href='intro.html#TermXLinkAttributes'/>
+ <term name='core attribute' href='intro.html#TermCoreAttributes'/>
+ <term name='core attributes' href='intro.html#TermCoreAttributes'/>
+ <term name='outermost svg element' href='intro.html#TermOutermostSVGElement'/>
+ <term name='outermost svg elements' href='intro.html#TermOutermostSVGElement'/>
+ <term name='user agent' href='intro.html#TermUserAgent'/>
+ <term name='user agents' href='intro.html#TermUserAgent'/>
+ <term name='SVG user agent' href='intro.html#TermUserAgent'/>
+ <term name='SVG user agents' href='intro.html#TermUserAgent'/>
+ <term name='rootmost SVG element' href='intro.html#TermRootmostSVGElement'/>
+ <term name="rootmost 'svg' element" href='intro.html#TermRootmostSVGElement'>rootmost <span xmlns='http://www.w3.org/1999/xhtml' class="element-name">‘svg’</span> element</term>
+ <term name='user coordinate system' href='intro.html#TermUserCoordinateSystem'/>
+ <term name='object bounding box units' href='coords.html#ObjectBoundingBoxUnits'/>
+ <term name='initial coordinate system' href='coords.html#InitialCoordinateSystem'/>
+ <term name='simple alpha compositing' href='masking.html#SimpleAlphaBlending'/>
+ <term name='filter region' href='filters.html#FilterEffectsRegion'/>
+ <term name='filter primitive subregion' href='filters.html#FilterPrimitiveSubRegion'/>
+
+ <!-- === defined in other specifications ================================ -->
+
+ <!-- ... interfaces ..................................................... -->
+
+ <interface name='DocumentCSS' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-DocumentCSS'/>
+ <interface name='DocumentEvent' href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent'/>
+ <interface name='EventListener' href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener'/>
+ <interface name='EventTarget' href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget'/>
+ <interface name='Event' href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event'/>
+ <interface name='Document' href='http://www.w3.org/TR/DOM-Level-2-Core/core.html#i-Document'/>
+ <interface name='CharacterData' href='http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-FF21A306'/>
+ <interface name='Comment' href='http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1728279322'/>
+ <interface name='Element' href='http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614'/>
+ <interface name='Node' href='http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247'/>
+ <interface name='NodeList' href='http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177'/>
+ <interface name='DOMImplementation' href='http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490'/>
+ <interface name='DOMException' href='http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187'/>
+ <interface name='CSSStyleDeclaration' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration'/>
+ <interface name='CSSPrimitiveValue' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSPrimitiveValue'/>
+ <interface name='CSSValueList' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSValueList'/>
+ <interface name='CSSValue' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSValue'/>
+ <interface name='CSSRule' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSRule'/>
+ <interface name='ViewCSS' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-ViewCSS'/>
+ <interface name='RGBColor' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-RGBColor'/>
+ <interface name='AbstractView' href='http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView'/>
+ <interface name='EmbeddingElement' hre='http://www.w3.org/TR/Window/#embeddingelt'/>
+</definitions>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/eltindex.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Element Index</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Element Index</h1>
+
+<p class="normativity"><em>This appendix is informative, not normative.</em></p>
+
+<p>The following are the elements in the SVG language:</p>
+
+<ul>
+ <li><a>'a'</a></li>
+ <li><a>'altGlyph'</a></li>
+ <li><a>'altGlyphDef'</a></li>
+ <li><a>'altGlyphItem'</a></li>
+ <li><a>'animate'</a></li>
+ <li><a>'animateColor'</a></li>
+ <li><a>'animateMotion'</a></li>
+ <li><a>'animateTransform'</a></li>
+ <li><a>'circle'</a></li>
+ <li><a>'clipPath'</a></li>
+ <li><a>'color-profile element'</a></li>
+ <li><a>'cursor element'</a></li>
+ <li><a>'defs'</a></li>
+ <li><a>'desc'</a></li>
+ <li><a>'ellipse'</a></li>
+ <li><a>'feBlend'</a></li>
+ <li><a>'feColorMatrix'</a></li>
+ <li><a>'feComponentTransfer'</a></li>
+ <li><a>'feComposite'</a></li>
+ <li><a>'feConvolveMatrix'</a></li>
+ <li><a>'feDiffuseLighting'</a></li>
+ <li><a>'feDisplacementMap'</a></li>
+ <li><a>'feDistantLight'</a></li>
+ <li><a>'feFlood'</a></li>
+ <li><a>'feFuncA'</a></li>
+ <li><a>'feFuncB'</a></li>
+ <li><a>'feFuncG'</a></li>
+ <li><a>'feFuncR'</a></li>
+ <li><a>'feGaussianBlur'</a></li>
+ <li><a>'feImage'</a></li>
+ <li><a>'feMerge'</a></li>
+ <li><a>'feMergeNode'</a></li>
+ <li><a>'feMorphology'</a></li>
+ <li><a>'feOffset'</a></li>
+ <li><a>'fePointLight'</a></li>
+ <li><a>'feSpecularLighting'</a></li>
+ <li><a>'feSpotLight'</a></li>
+ <li><a>'feTile'</a></li>
+ <li><a>'feTurbulence'</a></li>
+ <li><a>'filter element'</a></li>
+ <li><a>'font element'</a></li>
+ <li><a>'font-face'</a></li>
+ <li><a>'font-face-format'</a></li>
+ <li><a>'font-face-name'</a></li>
+ <li><a>'font-face-src'</a></li>
+ <li><a>'font-face-uri'</a></li>
+ <li><a>'foreignObject'</a></li>
+ <li><a>'g'</a></li>
+ <li><a>'glyph'</a></li>
+ <li><a>'glyphRef'</a></li>
+ <li><a>'hkern'</a></li>
+ <li><a>'image'</a></li>
+ <li><a>'line'</a></li>
+ <li><a>'linearGradient'</a></li>
+ <li><a>'marker element'</a></li>
+ <li><a>'mask element'</a></li>
+ <li><a>'metadata'</a></li>
+ <li><a>'missing-glyph'</a></li>
+ <li><a>'mpath'</a></li>
+ <li><a>'path'</a></li>
+ <li><a>'pattern'</a></li>
+ <li><a>'polygon'</a></li>
+ <li><a>'polyline'</a></li>
+ <li><a>'radialGradient'</a></li>
+ <li><a>'rect'</a></li>
+ <li><a>'script'</a></li>
+ <li><a>'set'</a></li>
+ <li><a>'stop'</a></li>
+ <li><a>'style element'</a></li>
+ <li><a>'svg'</a></li>
+ <li><a>'switch'</a></li>
+ <li><a>'symbol'</a></li>
+ <li><a>'text'</a></li>
+ <li><a>'textPath'</a></li>
+ <li><a>'title'</a></li>
+ <li><a>'tref'</a></li>
+ <li><a>'tspan'</a></li>
+ <li><a>'use'</a></li>
+ <li><a>'view'</a></li>
+ <li><a>'vkern'</a></li>
+</ul>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/escript.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>ECMAScript Language Binding</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>ECMAScript Language Binding</h1>
+
+<p class="normativity"><strong>This appendix is normative.</strong></p>
+
+<p>This appendix describes how to expose the SVG DOM to an ECMAScript language
+environment [<a href="refs.html#ref-ECMA-262">ECMA-262</a>].</p>
+
+<p>For descriptions of how interfaces and exceptions defined in other
+specifications are to be exposed to an ECMAScript language environment,
+consult the relevant specification:</p>
+
+<ul>
+ <li>For DOM Level 2 Core interfaces and exceptions, see
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.html">the DOM Level 2 Core ECMAScript Language Binding appendix</a>
+ ([<a href="refs.html#ref-DOM2">DOM2</a>], appendix E).</li>
+ <li>For DOM Level 2 Events interfaces, see
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/ecma-script-binding.html">the DOM Level 2 Events ECMAScript Language Binding appendix</a>
+ ([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], appendix C).</li>
+ <li>For DOM Level 2 Views interfaces, see
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Views-20001113/ecma-script-binding.html">the DOM Level 2 Views ECMAScript Language Binding appendix</a>
+ ([<a href="refs.html#ref-DOM2VIEWS">DOM2VIEWS</a>], appendix C).</li>
+ <li>For DOM Level 2 Style interfaces, see
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/ecma-script-binding.html">the DOM Level 2 Style ECMAScript Language Binding appendix</a>
+ ([<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>], appendix C).</li>
+</ul>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<p>The SVG DOM defines a single exception, <a>SVGException</a>, which is
+exposed to an ECMAScript language environment as follows.</p>
+
+<p>The ECMAScript global object has a property named <code>"SVGException"</code>
+whose value is an object with the following properties:</p>
+
+<ul>
+ <li>A read only property named <code>"SVG_WRONG_TYPE_ERR"</code>, whose value is the <span class='dom-attr-type'>Number</span> value 1.</li>
+ <li>A read only property named <code>"SVG_INVALID_VALUE_ERR"</code>, whose value is the <span class='dom-attr-type'>Number</span> value 2.</li>
+ <li>A read only property named <code>"SVG_MATRIX_NOT_INVERTABLE"</code>, whose value is the <span class='dom-attr-type'>Number</span> value 3.</li>
+</ul>
+
+<p>A host object that is an <a>SVGException</a> also has these three
+properties on itself, or somewhere in its prototype chain. Every such host
+object also has a read only property named <code>"code"</code> whose value is a
+<span class='dom-attr-type'>Number</span>, corresponding to the
+<a>SVGException::code</a> exception member on <a>SVGException</a>.</p>
+
+<h2 id="Constants">Constants</h2>
+
+<p>For every interface defined in the SVG DOM that has one or more constants
+defined on it, there exists a property on the ECMAScript global object whose
+name is the name of the interface, and whose value is an object with a read
+only property for each of the constants. The name of each of these read only
+properties is the name of the corresponding constant, and the value is
+a <span class='dom-attr-type'>Number</span> with the same value as that of
+the constant.</p>
+
+<p>A host object that implements an interface with constants defined on it
+has, on itself or somewhere in its prototype chain, these properties that
+correspond to the constants.</p>
+
+<h2 id="Types">Types</h2>
+
+<p>The following table gives the corresponding ECMAScript type for the IDL
+primitive types used in the SVG DOM.</p>
+
+<table class='vert' summary='Map of IDL types to ECMAScript types'>
+ <tr>
+ <th>IDL type</th>
+ <th>ECMAScript type</th>
+ </tr>
+ <tr>
+ <td>boolean</td>
+ <td><span class='dom-attr-type'>Boolean</span></td>
+ </tr>
+ <tr>
+ <td>float</td>
+ <td><span class='dom-attr-type'>Number</span></td>
+ </tr>
+ <tr>
+ <td>long</td>
+ <td><span class='dom-attr-type'>Number</span></td>
+ </tr>
+ <tr>
+ <td>unsigned short</td>
+ <td><span class='dom-attr-type'>Number</span></td>
+ </tr>
+ <tr>
+ <td>unsigned long</td>
+ <td><span class='dom-attr-type'>Number</span></td>
+ </tr>
+ <tr>
+ <td>DOMString</td>
+ <td><span class='dom-attr-type'>String</span></td>
+ </tr>
+</table>
+
+<p>When an ECMAScript <span class='dom-attr-type'>Number</span> is assigned to
+a property that corresponds to an attribute of an IDL integer type (long,
+unsigned short or unsigned long), or it is passed as an argument passed to an
+operation for which the argument type is an IDL integer type, then behavior is
+undefined if the <span class='dom-attr-type'>Number</span> value is not an
+integer within the range of that type.</p>
+
+<p>For an interface type, a host object that implements the given interface is
+used.</p>
+
+<h2 id="Objects">Objects</h2>
+
+<p>A host object that implements a given interface has properties on itself,
+or in its prototype chain, that correspond to the operations and attributes
+defined on that interface and all its superinterfaces.</p>
+
+<p>A property that corresponds to an attribute is read only if the attribute
+is read only, and has a name that is the same as the name of the attribute.
+When getting the property, a value of a type according to the <a href="#Types">Types</a>
+section above is returned. When setting the property, if it is not read only,
+then behavior is defined only if a value of a type according to the
+<a href="#Types">Types</a> section is assigned to it.</p>
+
+<p>For example, if <var>a</var> is a host object that implements the
+<a>SVGLength</a> interface, then evaluating the statement:</p>
+
+<pre>a.valueAsString = "10";</pre>
+
+<p>has defined behavior, but evaluating the statement:</p>
+
+<pre>a.valueAsString = 10;</pre>
+
+<p>does not.</p>
+
+<p>A property that corresponds to an operation has a name that is the same
+as the name of the operation, and has a value that is a
+<span class='dom-attr-type'>Function</span> object. The value returned
+from the <span class='dom-attr-type'>Function</span> is of a type according
+to the table in the <a href="#Types">Types</a> section above. When calling
+the <span class='dom-attr-type'>Function</span>, behavior is only defined
+if the correct number of arguments is passed, and the type of each argument
+is the type according to the <a href="#Types">Types</a> table. Also,
+behavior is only defined for invoking the <span class='dom-attr-type'>Function</span>
+with a <span class='dom-attr-type'>this</span> value that is equal to
+the object from which the <span class='dom-attr-type'>Function</span>
+was obtained.</p>
+
+<p>For example, if <var>L1</var> and <var>L2</var> are two distinct host objects that
+implement the <a>SVGPointList</a> interface and <var>p</var> is a host object
+that implements the <a>SVGPoint</a> interface, then evaluating the following
+statement has defined behavior:</p>
+
+<pre>L1.insertItemBefore(p, 0);</pre>
+
+<p>Evaluating any of the following statements, however, does not:</p>
+
+<pre>L1.insertItemBefore(p, '0');
+L1.insertItemBefore(p, -1);
+L1.insertItemBefore(p, 0.5);
+L1.insertItemBefore(p);
+L1.insertItemBefore(p, 0, 0);
+L1.insertItemBefore({ x: 10, y: 20 }, 0);
+L1.insertItemBefore.call([], p, 0);
+L1.insertItemBefore.call(L2, p, 0);</pre>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/expanded-toc.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Expanded Table of Contents</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Expanded Table of Contents</h1>
+
+<edit:fulltoc/>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/extend.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,287 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Extensibility</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Extensibility</h1>
+
+<h2 id="ForeignNamespaces">Foreign namespaces and private data</h2>
+
+ <p>SVG allows inclusion of elements from foreign namespaces
+ anywhere with the SVG content. In general, the SVG user agent
+ will include the unknown elements in the DOM but will otherwise
+ ignore unknown elements. (The notable exception is described
+ under <a href="#ForeignObjectElement">Embedding Foreign Object
+ Types</a>.)</p>
+ <p>Additionally, SVG allows inclusion of attributes from
+ foreign namespaces on any SVG element. The SVG user agent will
+ include unknown attributes in the DOM but with otherwise ignore
+ unknown attributes.</p>
+ <p>SVG's ability to include foreign namespaces can be used for
+ the following purposes:</p>
+ <ul>
+ <li>Application-specific information so that authoring
+ applications can include model-level data in the SVG content
+ to serve their "roundtripping" purposes (i.e., the ability to
+ write, then read a file without loss of higher-level
+ information).</li>
+ <li>Supplemental data for extensibility. For example, suppose
+ you have an extrusion extension which takes any 2D graphics
+ and extrudes it in three dimensions. When applying the
+ extrusion extension, you probably will need to set some
+ parameters. The parameters can be included in the SVG content
+ by inserting elements from an extrusion extension
+ namespace.</li>
+ </ul>
+ <p>To illustrate, a business graphics authoring application
+ might want to include some private data within an SVG document
+ so that it could properly reassemble the chart (a pie chart in
+ this case) upon reading it back in:</p>
+<pre>
+<?xml version="1.0" standalone="yes"?>
+<svg width="4in" height="3in" version="1.1"
+ xmlns = 'http://www.w3.org/2000/svg'>
+ <defs>
+ <myapp:piechart xmlns:myapp="http://example.org/myapp"
+ title="Sales by Region">
+ <myapp:pieslice label="Northern Region" value="1.23"/>
+ <myapp:pieslice label="Eastern Region" value="2.53"/>
+ <myapp:pieslice label="Southern Region" value="3.89"/>
+ <myapp:pieslice label="Western Region" value="2.04"/>
+ <!-- Other private data goes here -->
+ </myapp:piechart>
+ </defs>
+ <desc>This chart includes private data in another namespace
+ </desc>
+ <!-- In here would be the actual SVG graphics elements which
+ draw the pie chart -->
+</svg>
+</pre>
+
+<h2 id="EmbeddingForeignObjects">Embedding foreign object types</h2>
+
+ <p>One goal for SVG is to provide a mechanism by which other
+ XML language processors can render into an area within an SVG
+ drawing, with those renderings subject to the various
+ transformations and compositing parameters that are currently
+ active at a given point within the SVG content tree. One
+ particular example of this is to provide a frame for XML
+ content styled with CSS or XSL so that dynamically reflowing
+ text (subject to SVG transformations and compositing) could be
+ inserted into the middle of some SVG content. Another example
+ is inserting a <a
+ href="http://www.w3.org/TR/2003/REC-MathML2-20031021/">MathML</a> expression into
+ an SVG drawing [<a href='refs.html#ref-MATHML'>MATHML</a>].</p>
+ <p>The <a>'foreignObject'</a>
+ element allows for inclusion of a foreign namespace which has
+ its graphical content drawn by a different user agent. The
+ included foreign graphical content is subject to SVG
+ transformations and compositing.</p>
+ <p>The contents of <a>'foreignObject'</a> are assumed to be
+ from a different namespace. Any SVG elements within a <a>'foreignObject'</a> will not be drawn,
+ except in the situation where a properly defined SVG
+ subdocument with a proper <span class="attr-name">'xmlns'</span>
+ (see <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a>
+ [<a href="refs.html#ref-XML-NS">XML-NS</a>])
+ attribute specification is embedded recursively. One situation
+ where this can occur is when an SVG document fragment is
+ embedded within another non-SVG document fragment, which in
+ turn is embedded within an SVG document fragment (e.g., an SVG
+ document fragment contains an XHTML document fragment which in
+ turn contains yet another SVG document fragment).</p>
+ <p>Usually, a <a>'foreignObject'</a>
+ will be used in conjunction with the <a>'switch'</a> element and
+ the <a>'requiredExtensions'</a> attribute to
+ provide proper checking for user agent support and provide an
+ alternate rendering in case user agent support is not
+ available.</p>
+
+<h2 id="ForeignObjectElement">The <span class="element-name">'foreignObject'</span> element</h2>
+
+<edit:with element='foreignObject'>
+<edit:elementsummary name='foreignObject'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="ForeignObjectElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of one corner of the rectangular
+ region into which the graphics associated with the contents
+ of the <a>'foreignObject'</a>
+ will be rendered.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="ForeignObjectElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of one corner of the rectangular
+ region into which the referenced document is placed.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="ForeignObjectElementWidthAttribute"><span
+ class="adef">width</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The width of the rectangular region into which the
+ referenced document is placed.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="ForeignObjectElementHeightAttribute"><span
+ class="adef">height</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The height of the rectangular region into which the
+ referenced document is placed.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h2 id="AnExample">An example</h2>
+
+ <p>Here is an example:</p>
+<pre>
+<?xml version="1.0" standalone="yes"?>
+<svg width="4in" height="3in" version="1.1"
+ xmlns = 'http://www.w3.org/2000/svg'>
+ <desc>This example uses the 'switch' element to provide a
+ fallback graphical representation of an paragraph, if
+ XMHTML is not supported.</desc>
+ <!-- The 'switch' element will process the first child element
+ whose testing attributes evaluate to true.-->
+ <switch>
+ <!-- Process the embedded XHTML if the requiredExtensions attribute
+ evaluates to true (i.e., the user agent supports XHTML
+ embedded within SVG). -->
+ <foreignObject width="100" height="50"
+ requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
+ <!-- XHTML content goes here -->
+ <body xmlns="http://www.w3.org/1999/xhtml">
+ <p>Here is a paragraph that requires word wrap</p>
+ </body>
+ </foreignObject>
+ <!-- Else, process the following alternate SVG.
+ Note that there are no testing attributes on the 'text' element.
+ If no testing attributes are provided, it is as if there
+ were testing attributes and they evaluated to true.-->
+ <text font-size="10" font-family="Verdana">
+ <tspan x="10" y="10">Here is a paragraph that</tspan>
+ <tspan x="10" y="20">requires word wrap.</tspan>
+ </text>
+ </switch>
+</svg>
+</pre>
+
+ <p>It is not required that SVG user agent support the ability
+ to invoke other arbitrary user agents to handle embedded
+ foreign object types; however, all conforming SVG user agents
+ would need to support the <a>'switch'</a> element and
+ must be able to render valid SVG elements when they appear as
+ one of the alternatives within a <a>'switch'</a>
+ element.</p>
+ <p>Ultimately, it is expected that commercial Web browsers will
+ support the ability for SVG to embed content from other XML
+ grammars which use CSS or XSL to format their content, with the
+ resulting CSS- or XSL-formatted content subject to SVG
+ transformations and compositing. At this time, such a
+ capability is not a requirement.</p>
+
+<h2 id="PrivateElementsAndAttribute">Adding private elements and attributes to the DTD</h2>
+
+ <p>Using foreign namespaces as an extension mechanism adds flexibility, is
+ readily handled by validation technologies like NVDL and RelaxNG, but typically
+ breaks DTD validation unless the DTD has explicit extensibility hooks.</p>
+ <p>The SVG DTD allows for extending the SVG language within the
+ internal DTD subset. Within the internal DTD subset, you have
+ the ability to add custom elements and attributes to most SVG
+ elements. This facility may be used if DTD validation is desired.</p>
+ <p>The DTD defines an extension entity for most of SVG
+ elements. For example, the <a>'view'</a> element is defined in
+ the DTD as follows:</p>
+
+<pre class="dtd-fragment"><![CDATA[
+<!ENTITY % SVG.view.extra.content "" >
+
+<!ENTITY % SVG.view.element "INCLUDE" >
+<![%SVG.view.element;[
+<!ENTITY % SVG.view.content
+ "( %SVG.Description.class; %SVG.view.extra.content; )*"
+>
+<!ELEMENT %SVG.view.qname; %SVG.view.content; >
+<!-- end of SVG.view.element -->]]>]]><![CDATA[
+
+<!ENTITY % SVG.view.attlist "INCLUDE" >
+<![%SVG.view.attlist;[
+<!ATTLIST %SVG.view.qname;
+ %SVG.Core.attrib;
+ %SVG.External.attrib;
+ viewBox %ViewBoxSpec.datatype; #IMPLIED
+ preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
+ zoomAndPan ( disable | magnify ) 'magnify'
+ viewTarget CDATA #IMPLIED
+>
+<!-- end of SVG.view.attlist -->]]>]]>
+</pre>
+
+ <p>The entity <code>SVG.view.extra.content</code> can be defined in the
+ internal DTD subset to add custom sub-elements
+ attributes to the <a>'view'</a> element within a given
+ document, and an <code><!ATTLIST></code> can be used to add
+ custom attributes. For example, the following extends the <a>'view'</a> element with an
+ additional child element <span
+ class="element-name">'customNS:customElement'</span> and an
+ additional attribute <span class="attr-name">'customNS:customAttr'</span>:</p>
+<pre><![CDATA[
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+<!ENTITY % SVG.view.extra.content "| customNS:customElement" >
+<!ATTLIST %SVG.view.qname;
+ xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
+ customNS:customAttr CDATA #IMPLIED>
+<!ELEMENT customNS:customElement EMPTY>
+<!ATTLIST customNS:customElement
+ xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
+ info CDATA #IMPLIED>
+]>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="8cm" height="4cm">
+ <desc>Extend the 'view' element via the internal DTD subset</desc>
+ <!-- Presumably, some great graphics would go here. -->
+ <view viewBox="100 110 20 30" customNS:customAttr="123">
+ <customNS:customElement info="abc"/>
+ </view>
+</svg>
+]]></pre>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGForeignObjectElement">Interface SVGForeignObjectElement</h3>
+
+<edit:with element='foreignObject'>
+<edit:interface name='::svg::SVGForeignObjectElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/feature.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,547 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Feature Strings</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Feature Strings</h1>
+
+<p class="normativity"><strong>This appendix is normative.</strong></p>
+
+<h2 id="Introducation">Introduction</h2>
+
+<p>The following are the feature strings for the <a>'requiredFeatures'</a>
+attribute. These same feature strings apply to the
+<span class='dom-method-name'>hasFeature</span> method call that is part
+of the <a href="svgdom.html">SVG DOM</a>'s support for the
+<a>DOMImplementation</a> interface defined in
+<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>] (see
+<a href="svgdom.html#FeatureStrings">Feature strings for the <strong>hasFeature</strong> method call</a>).
+In some cases the feature strings map directly to a set of attributes,
+properties or elements, in others they represent some functionality of the
+user agent (that it is a dynamic viewer for example). Note that the format and
+naming for feature strings changed from
+<a href='http://www.w3.org/TR/2001/REC-SVG-20010904/'>SVG 1.0</a>
+[<a href='refs.html#ref-SVG10'>SVG10</a>] to SVG 1.1. The SVG 1.0 feature
+strings are listed below after the SVG 1.1 feature strings and User Agents
+should support all listed feature strings for compatibility reasons. However,
+the SVG 1.0 feature strings can be considered deprecated.</p>
+
+<h2 id="SVG11FeatureStrings">SVG 1.1 feature strings</h2>
+
+<dl id="SVG">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#SVG</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>At least one of the following (all of which are described
+ subsequently):
+ "http://www.w3.org/TR/SVG11/feature#SVG-static",
+ "http://www.w3.org/TR/SVG11/feature#SVG-animation",
+ "http://www.w3.org/TR/SVG11/feature#SVG-dynamic" or
+ "http://www.w3.org/TR/SVG11/feature#SVGDOM". (Because the
+ feature string "http://www.w3.org/TR/SVG11/feature#SVG" can
+ be ambiguous in some circumstances, it is recommended that
+ more specific feature strings be used.)</dd>
+</dl>
+<dl id="SVGDOM">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#SVGDOM</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>At least one of the following (all of which are described
+ subsequently):
+ "http://www.w3.org/TR/SVG11/feature#SVGDOM-static",
+ "http://www.w3.org/TR/SVG11/feature#SVGDOM-animation" or
+ "http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic". (Because
+ the feature string
+ "http://www.w3.org/TR/SVG11/feature#SVGDOM" can be ambiguous
+ in some circumstances, it is recommended that more specific
+ feature strings be used.)</dd>
+</dl>
+<dl id="SVG-static">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#SVG-static</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ The following features (described below)
+ <ul>
+ <li>http://www.w3.org/TR/SVG11/feature#CoreAttribute</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Structure</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#ContainerAttribute</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#ConditionalProcessing</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Image</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Style</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#ViewportAttribute</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Shape</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Text</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#PaintAttribute</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#OpacityAttribute</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#GraphicsAttribute</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Marker</li>
+ <li>http://www.w3.org/TR/SVG11/feature#ColorProfile</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Gradient</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Pattern</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Clip</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Mask</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Filter</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#XlinkAttribute</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Font</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Extensibility</li>
+ </ul>
+ For SVG viewers,
+ "http://www.w3.org/TR/SVG11/feature#SVG-static" indicates
+ that the viewer can process and render successfully all of
+ the language features corresponding to the feature strings
+ listed above.
+ </dd>
+</dl>
+<dl id="SVGDOM-static">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#SVGDOM-static</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>All of the DOM interfaces and methods that correspond to
+ the language features for
+ "http://www.w3.org/TR/SVG11/feature#SVG-static".</dd>
+</dl>
+<dl id="SVG-animation">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#SVG-animation</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>All of the language features from
+ "http://www.w3.org/TR/SVG11/feature#SVG-static" plus the
+ feature "http://www.w3.org/TR/SVG11/feature#Animation". For
+ SVG viewers running on media capable of rendering time-based
+ material, such as displays,
+ "http://www.w3.org/TR/SVG11/feature#SVG-animation" indicates
+ that the viewer can process and render successfully all of
+ the corresponding language features.</dd>
+</dl>
+<dl id="SVGDOM-animation">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#SVGDOM-animation</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>All of the DOM interfaces and methods that correspond to
+ the language features for
+ "http://www.w3.org/TR/SVG11/feature#SVG-animation".</dd>
+</dl>
+<dl id="SVG-dynamic">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#SVG-dynamic</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ All of the language features from
+ "http://www.w3.org/TR/SVG11/feature#SVG-animation" plus the
+ following features:
+ <ul>
+ <li>http://www.w3.org/TR/SVG11/feature#Hyperlinking</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Scripting</li>
+ <li>http://www.w3.org/TR/SVG11/feature#View</li>
+ <li>http://www.w3.org/TR/SVG11/feature#Cursor</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute</li>
+ <li>
+ http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute</li>
+ </ul>
+ For SVG viewers running on media capable of rendering
+ time-based material, such as displays,
+ "http://www.w3.org/TR/SVG11/feature#SVG-dynamic" indicates
+ that the viewer can process and render successfully all of
+ the corresponding language features.
+ </dd>
+</dl>
+<dl id="SVGDOM-dynamic">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>All of the DOM interfaces and methods that correspond to
+ the language features for
+ "http://www.w3.org/TR/SVG11/feature#SVG-dynamic".</dd>
+</dl>
+<dl id="CoreAttribute">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#CoreAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'id'</a>, <a>'xml:base'</a>, <a>'xml:lang'</a> and <a>'xml:space'</a>
+ attributes
+ </dd>
+</dl>
+<dl id="Structure">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Structure</dd>
+ <dt>User Agent Supports:</dt>
+ <dd><a>'svg'</a>, <a>'g'</a>, <a>'defs'</a>, <a>'desc'</a>, <a>'title'</a>, <a>'metadata'</a>, <a>'symbol'</a> and <a>'use'</a> elements</dd>
+</dl>
+<dl id="BasicStructure">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#BasicStructure</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ <a>'svg'</a>, <a>'g'</a>, <a>'defs'</a>, <a>'desc'</a>, <a>'title'</a>, <a>'metadata'</a> and <a>'use'</a> elements</dd>
+</dl>
+<dl id="ContainerAttribute">
+ <dt>Feature String:</dt>
+ <dd>
+ http://www.w3.org/TR/SVG11/feature#ContainerAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'enable-background'</a> property</dd>
+</dl>
+<dl id="ConditionalProcessing">
+
+ <dt>Feature String:</dt>
+ <dd>
+ http://www.w3.org/TR/SVG11/feature#ConditionalProcessing</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>the <a>'switch'</a> element, and the <a>'requiredFeatures'</a>, <a>'requiredExtensions'</a> and <a>'systemLanguage'</a> attributes</dd>
+</dl>
+<dl id="Image">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Image</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>the <a>'image'</a> element</dd>
+</dl>
+<dl id="Style">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Style</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>the <a>'style'</a> element</dd>
+</dl>
+<dl id="ViewportAttribute">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#ViewportAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>the <a>'clip'</a> and <a>'overflow'</a> properties</dd>
+</dl>
+<dl id="Shape">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Shape</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>the <a>'rect'</a>, <a>'circle'</a>, <a>'line'</a>, <a>'polyline'</a>, <a>'polygon'</a>, <a>'ellipse'</a> and <a>'path'</a> elements</dd>
+</dl>
+<dl id="Text">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Text</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>the <a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a>, <a>'textPath'</a>, <a>'altGlyph'</a>, <a>'altGlyphDef'</a>, <a>'altGlyphItem'</a> and <a>'glyphRef'</a> elements</dd>
+</dl>
+<dl id="BasicText">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#BasicText</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>the <a>'text'</a> element</dd>
+</dl>
+<dl id="PaintAttribute">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#PaintAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'color'</a>, <a>'fill'</a>, <a>'fill-rule'</a>, <a>'stroke'</a>, <a>'stroke-dasharray'</a>, <a>'stroke-dashoffset'</a>, <a>'stroke-linecap'</a>, <a>'stroke-linejoin'</a>, <a>'stroke-miterlimit'</a>, <a>'stroke-width'</a>, <a>'color-interpolation'</a> and <a>'color-rendering'</a> properties</dd>
+</dl>
+<dl id="BasicPaintAttribute">
+ <dt>Feature String:</dt>
+ <dd>
+ http://www.w3.org/TR/SVG11/feature#BasicPaintAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'color'</a>, <a>'fill'</a>, <a>'fill-rule'</a>, <a>'stroke'</a>, <a>'stroke-dasharray'</a>, <a>'stroke-dashoffset'</a>, <a>'stroke-linecap'</a>, <a>'stroke-linejoin'</a>, <a>'stroke-miterlimit'</a>, <a>'stroke-width'</a> and <a>'color-rendering'</a> properties</dd>
+</dl>
+<dl id="OpacityAttribute">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#OpacityAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'opacity'</a>, <a>'stroke-opacity'</a> and <a>'fill-opacity'</a> properties</dd>
+</dl>
+<dl id="GraphicsAttribute">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#GraphicsAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'display'</a>, <a>'image-rendering'</a>, <a>'pointer-events'</a>, <a>'shape-rendering'</a>, <a>'text-rendering'</a> and <a>'visibility'</a> properties</dd>
+</dl>
+<dl id="BasicGraphicsAttribute">
+ <dt>Feature String:</dt>
+ <dd>
+ http://www.w3.org/TR/SVG11/feature#BasicGraphicsAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'display'</a> and <a>'visibility'</a> properties</dd>
+</dl>
+<dl id="Marker">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Marker</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>the <a>'marker element'</a> element</dd>
+</dl>
+<dl id="ColorProfile">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#ColorProfile</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'color-profile element'</a> element</dd>
+</dl>
+<dl id="Gradient">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Gradient</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'linearGradient'</a>, <a>'radialGradient'</a> and <a>'stop'</a> elements</dd>
+</dl>
+<dl id="Pattern">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Pattern</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>the <a>'pattern'</a> element</dd>
+</dl>
+<dl id="Clip">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Clip</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'clipPath'</a> element and the <a>'clip-path'</a> and <a>'clip-rule'</a> properties</dd>
+</dl>
+<dl id="BasicClip">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#BasicClip</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'clipPath'</a> element and the <a>'clip-path'</a> property</dd>
+</dl>
+<dl id="Mask">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Mask</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'mask element'</a> element</dd>
+</dl>
+<dl id="Filter">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Filter</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'filter element'</a>, <a>'feBlend'</a>, <a>'feColorMatrix'</a>, <a>'feComponentTransfer'</a>, <a>'feComposite'</a>, <a>'feConvolveMatrix'</a>, <a>'feDiffuseLighting'</a>, <a>'feDisplacementMap'</a>, <a>'feFlood'</a>, <a>'feGaussianBlur'</a>, <a>'feImage'</a>, <a>'feMerge'</a>, <a>'feMergeNode'</a>, <a>'feMorphology'</a>, <a>'feOffset'</a>, <a>'feSpecularLighting'</a>, <a>'feTile'</a>, <a>'feDistantLight'</a>, <a>'fePointLight'</a>, <a>'feSpotLight'</a>, <a>'feFuncR'</a>, <a>'feFuncG'</a>, <a>'feFuncB'</a> and <a>'feFuncA'</a> elements</dd>
+</dl>
+<dl id="BasicFilter">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#BasicFilter</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'filter element'</a>, <a>'feBlend'</a>, <a>'feColorMatrix'</a>, <a>'feComponentTransfer'</a>, <a>'feComposite'</a>, <a>'feFlood'</a>, <a>'feGaussianBlur'</a>, <a>'feImage'</a>, <a>'feMerge'</a>, <a>'feMergeNode'</a>, <a>'feOffset'</a>, <a>'feTile'</a>, <a>'feFuncR'</a>, <a>'feFuncG'</a>, <a>'feFuncB'</a> and <a>'feFuncA'</a> elements</dd>
+</dl>
+<dl id="DocumentEventsAttribute">
+ <dt>Feature String:</dt>
+ <dd>
+ http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'onunload'</a>, <a>'onabort'</a>, <a>'onerror'</a>, <a>'onresize'</a>, <a>'onscroll'</a> and <a>'onzoom'</a> attributes</dd>
+</dl>
+<dl id="GraphicalEventsAttribute">
+ <dt>Feature String:</dt>
+ <dd>
+ http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'onfocusin'</a>, <a>'onfocusout'</a>, <a>'onactivate'</a>, <a>'onclick'</a>, <a>'onmousedown'</a>, <a>'onmouseup'</a>, <a>'onmouseover'</a>, <a>'onmousemove'</a>, <a>'onmouseout'</a> and <a>'svg/onload'</a> attributes</dd>
+</dl>
+<dl id="AnimationEventsAttribute">
+ <dt>Feature String:</dt>
+ <dd>
+ http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'onbegin'</a>, <a>'onend'</a>, <a>'onrepeat'</a> and <a>'svg/onload'</a> attributes</dd>
+</dl>
+<dl id="Cursor">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Cursor</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'cursor element'</a> element</dd>
+</dl>
+<dl id="Hyperlinking">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Hyperlinking</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'a'</a> element</dd>
+</dl>
+<dl id="XlinkAttribute">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#XlinkAttribute</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'xlink:type'</a>, <a>'xlink:href'</a>, <a>'xlink:role'</a>, <a>'xlink:arcrole'</a>, <a>'xlink:title'</a>, <a>'xlink:show'</a> and <a>'xlink:actuate'</a> attributes</dd>
+</dl>
+<dl id="ExternalResourcesRequired">
+ <dt>Feature String:</dt>
+ <dd>
+ http://www.w3.org/TR/SVG11/feature#ExternalResourcesRequired</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'externalResourcesRequired'</a> attribute</dd>
+</dl>
+<dl id="View">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#View</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'view'</a> element</dd>
+</dl>
+<dl id="Script">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Script</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'script'</a> element</dd>
+</dl>
+<dl id="Animation">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Animation</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'animate'</a>, <a>'set'</a>, <a>'animateMotion'</a>, <a>'animateTransform'</a>, <a>'animateColor'</a> and <a>'mpath'</a> elements</dd>
+</dl>
+<dl id="Font">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Font</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'font element'</a>, <a>'font-face'</a>, <a>'glyph'</a>, <a>'missing-glyph'</a>, <a>'hkern'</a>, <a>'vkern'</a>, <a>'font-face-src'</a>, <a>'font-face-uri'</a>, <a>'font-face-format'</a> and <a>'font-face-name'</a> elements</dd>
+</dl>
+<dl id="BasicFont">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#BasicFont</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'font element'</a>, <a>'font-face'</a>, <a>'glyph'</a>, <a>'missing-glyph'</a>, <a>'hkern'</a>, <a>'font-face-src'</a> and <a>'font-face-name'</a> elements</dd>
+</dl>
+<dl id="Extensibility">
+ <dt>Feature String:</dt>
+ <dd>http://www.w3.org/TR/SVG11/feature#Extensibility</dd>
+ <dt>User Agent Supports:</dt>
+ <dd>
+ the <a>'foreignObject'</a> element</dd>
+</dl>
+
+<h2 id="SVG10FeatureStrings">SVG 1.0 feature strings</h2>
+
+ <p>All <a href='http://www.w3.org/TR/2001/REC-SVG-20010904/'>SVG 1.0</a> [<a href='refs.html#ref-SVG10'>SVG10</a>]
+ feature strings referring to language
+ capabilities begin with <strong>"org.w3c.svg"</strong>. All SVG
+ 1.0 feature strings referring to <a href="svgdom.html">SVG
+ DOM</a> capabilities begin with
+ <strong>"org.w3c.dom.svg"</strong>.</p>
+ <ul>
+ <li>The feature string <strong>"org.w3c.svg"</strong>
+ indicates that the user agent supports at least one of the
+ following (all of which are described subsequently):
+ <strong>"org.w3c.svg.static"</strong>,
+ <strong>"org.w3c.svg.animation"</strong>,
+ <strong>"org.w3c.svg.dynamic"</strong> or
+ <strong>"org.w3c.dom.svg"</strong>. (Because the feature
+ string <strong>"org.w3c.svg"</strong> can be ambiguous in
+ some circumstances, it is recommended that more specific
+ feature strings be used.)</li>
+ <li>The feature string <strong>"org.w3c.dom.svg"</strong>
+ indicates that the user agent supports at least one of the
+ following (all of which are described subsequently):
+ <strong>"org.w3c.dom.svg.static"</strong>,
+ <strong>"org.w3c.dom.svg.animation"</strong> or
+ <strong>"org.w3c.dom.svg.dynamic"</strong>. (Because the
+ feature string <strong>"org.w3c.dom.svg"</strong> can be
+ ambiguous in some circumstances, it is recommended that more
+ specific feature strings be used.)</li>
+ <li>
+ The feature string <strong>"org.w3c.svg.static"</strong>
+ indicates the availability of all of the language
+ capabilities defined in:
+ <ul>
+ <li><a href="types.html">Basic Data Types and
+ Interfaces</a></li>
+ <li><a href="struct.html">Document Structure</a></li>
+ <li><a href="styling.html">Styling</a></li>
+ <li><a href="coords.html">Coordinate Systems,
+ Transformations and Units</a></li>
+ <li><a href="paths.html">Paths</a></li>
+ <li><a href="shapes.html">Basic Shapes</a></li>
+ <li><a href="text.html">Text</a></li>
+ <li><a href="painting.html">Painting: Filling, Stroking
+ and Marker Symbols</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="pservers.html">Gradients and
+ Patterns</a></li>
+ <li><a href="masking.html">Clipping, Masking and
+ Compositing</a></li>
+ <li><a href="filters.html">Filter Effects</a></li>
+ <li><a href="fonts.html">Fonts</a></li>
+ <li>The <a>'switch'</a> element</li>
+ <li>The <a>'requiredFeatures'</a> attribute</li>
+ <li>The <a>'requiredExtensions'</a> attribute</li>
+ <li>The <a>'systemLanguage'</a> attribute</li>
+ </ul>
+ <p>For SVG viewers, <strong>"org.w3c.svg.static"</strong>
+ indicates that the viewer can process and render
+ successfully all of the language features listed above.</p>
+ </li>
+ <li>The feature string
+ <strong>"org.w3c.dom.svg.static"</strong> indicates the
+ availability of all of the DOM interfaces and methods that
+ correspond to the language features for
+ <strong>"org.w3c.svg.static"</strong>.</li>
+ <li>The feature string
+ <strong>"org.w3c.svg.animation"</strong> includes all of the
+ language capabilities defined for
+ <strong>"org.w3c.svg.static"</strong> plus the availability
+ of all of the language capabilities defined in <a
+ href="animate.html">Animation</a>. For SVG viewers running on
+ media capable of rendering time-based material, such as
+ displays, <strong>"org.w3c.svg.animation"</strong> indicates
+ that the viewer can process and render successfully all of
+ the corresponding language features.</li>
+ <li>The feature string
+ <strong>"org.w3c.dom.svg.animation"</strong> corresponds to
+ the availability of DOM interfaces and methods that
+ correspond to the language features for
+ <strong>"org.w3c.svg.animation"</strong>.</li>
+ <li>The feature string <strong>"org.w3c.svg.dynamic"</strong>
+ includes all of the language capabilities defined for
+ <strong>"org.w3c.svg.animation"</strong> plus the
+ availability of all of the language capabilities defined in
+ <a href="svgdom.html#RelationshipWithDOM2Events">Relationship
+ with DOM2 events</a>, <a href="linking.html">Linking</a> and
+ <a href="interact.html">Interactivity</a> and <a
+ href="script.html">Scripting</a>. For SVG viewers running on
+ media capable of rendering time-based material, such as
+ displays, <strong>"org.w3c.svg.dynamic"</strong> indicates
+ that the viewer can process and render successfully all of
+ the corresponding language features.</li>
+ <li>The feature string
+ <strong>"org.w3c.dom.svg.dynamic"</strong> corresponds to the
+ availability of DOM interfaces and methods that correspond to
+ the language features for
+ <strong>"org.w3c.svg.dynamic"</strong>.</li>
+ <li>The feature string <strong>"org.w3c.svg.all"</strong>
+ corresponds to the availability of all of the language
+ capabilities defined in this specification.</li>
+ <li>The feature string <strong>"org.w3c.dom.svg.all"</strong>
+ corresponds to the availability of all of the DOM interfaces
+ defined in this specification.</li>
+ </ul>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/filters.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,3847 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Filter Effects</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Filter Effects</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+ <p>This chapter describes SVG's declarative filter effects
+ feature set, which when combined with the 2D power of SVG can
+ describe much of the common artwork on the Web in such a way
+ that client-side generation and alteration can be performed
+ easily. In addition, the ability to apply filter effects to SVG
+ <a href="intro.html#TermGraphicsElement">graphics elements</a>
+ and <a href="intro.html#TermContainerElement">container
+ elements</a> helps to maintain the semantic structure of the
+ document, instead of resorting to images which aside from
+ generally being a fixed resolution tend to obscure the original
+ semantics of the elements they replace. This is especially true
+ for effects applied to text.</p>
+ <p>A filter effect consists of a series of graphics operations
+ that are applied to a given <span id="TermSourceGraphic" class="SVG-Term">source
+ graphic</span> to produce a modified graphical result. The
+ result of the filter effect is rendered to the target device
+ instead of the original source graphic. The following
+ illustrates the process:</p>
+ <p><img
+ alt="Image showing source graphic transformed by filter effect"
+ src="images/filters/filters00.png" width="401"
+ height="78" /></p>
+ <p class="view-as-svg"><a
+ href="images/filters/filters00.svg">View this example as SVG
+ (SVG-enabled browsers only)</a></p>
+ <p>Filter effects are defined by <a>'filter element'</a> elements. To apply a
+ filter effect to a <a
+ href="intro.html#TermGraphicsElement">graphics element</a> or a
+ <a href="intro.html#TermContainerElement">container
+ element</a>, you set the value of the <a>'filter property'</a> property on the given
+ element such that it references the filter effect.</p>
+ <p>Each <a>'filter element'</a> element contains a set
+ of <span id="TermFilterPrimitive" class="SVG-Term">filter primitives</span> as its children.
+ Each filter primitive performs a single fundamental graphical
+ operation (e.g., a blur or a lighting effect) on one or more
+ inputs, producing a graphical result. Because most of the
+ filter primitives represent some form of image processing, in
+ most cases the output from a filter primitive is a single RGBA
+ image.</p>
+ <p>The original source graphic or the result from a filter
+ primitive can be used as input into one or more other filter
+ primitives. A common application is to use the source graphic
+ multiple times. For example, a simple filter could replace one
+ graphic by two by adding a black copy of original source
+ graphic offset to create a drop shadow. In effect, there are
+ now two layers of graphics, both with the same original source
+ graphics.</p>
+ <p>When applied to <a
+ href="intro.html#TermContainerElement">container elements</a>
+ such as <a>'g'</a>, the <a>'filter property'</a> property applies to the
+ contents of the group as a whole. The group's children do not
+ render to the screen directly; instead, the graphics commands
+ necessary to render the children are stored temporarily.
+ Typically, the graphics commands are executed as part of the
+ processing of the referenced <a>'filter element'</a> element via use of the
+ keywords <a href="filters.html#SourceGraphic"><span
+ class="attr-value">SourceGraphic</span></a> or <a
+ href="filters.html#SourceAlpha"><span
+ class="attr-value">SourceAlpha</span></a>. Filter effects can
+ be applied to <a
+ href="intro.html#TermContainerElement">container elements</a>
+ with no content (e.g., an empty <a>'g'</a> element), in which case the
+ <a href="filters.html#SourceGraphic"><span
+ class="attr-value">SourceGraphic</span></a> or <a
+ href="filters.html#SourceAlpha"><span
+ class="attr-value">SourceAlpha</span></a> consist of a
+ transparent black rectangle that is the size of the <a
+ href="filters.html#FilterEffectsRegion"><span
+ class="attr-value">filter effects region</span></a>.</p>
+ <p>Sometimes filter primitives result in undefined pixels. For
+ example, filter primitive <a>'feOffset'</a> can shift an image
+ down and to the right, leaving undefined pixels at the top and
+ left. In these cases, the undefined pixels are set to
+ transparent black.</p>
+
+ <h2 id="AnExample">An example</h2>
+ <p>The following shows an example of a filter effect.</p>
+ <p><span class="example-ref">Example filters01</span> -
+ introducing filter effects.</p>
+
+<edit:example href='images/filters/filters01.svg' name='filters01' title='introducing filter effects' link='yes' image='yes'/>
+
+ <p>The filter effect used in the example above is repeated here
+ with reference numbers in the left column before each of the
+ six filter primitives:</p>
+ <table summary="filter example with reference numbers">
+ <tr>
+ <td valign="top">
+<pre style="color:black">
+
+
+1
+2
+3
+
+
+
+
+4
+5
+
+6
+
+
+
+</pre>
+ </td>
+ <td valign="top">
+<pre>
+<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
+ <desc>Produces a 3D lighting effect.</desc>
+ <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+ <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="#bbbbbb"
+ result="specOut">
+ <fePointLight x="-5000" y="-10000" z="20000"/>
+ </feSpecularLighting>
+ <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+ <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+ k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+ <feMerge>
+ <feMergeNode in="offsetBlur"/>
+ <feMergeNode in="litPaint"/>
+ </feMerge>
+</filter>
+</pre>
+ </td>
+ </tr>
+ </table>
+ <p>The following pictures show the intermediate image results
+ from each of the six filter elements:</p>
+ <table summary="filter example intermediate results">
+ <tr>
+ <td>
+ <p><img width="115" height="70"
+ alt="filters01 - original source graphic"
+ src="images/filters/filters01-0.png" /><br />
+ Source graphic</p>
+ </td>
+ <td> </td>
+ <td>
+ <p><img width="115" height="70"
+ alt="filters01 - after filter element 1"
+ src="images/filters/filters01-1.png" /><br />
+ After filter primitive 1</p>
+ </td>
+ <td> </td>
+ <td>
+ <p><img width="115" height="70"
+ alt="filters01 - after filter element 2"
+ src="images/filters/filters01-2.png" /><br />
+ After filter primitive 2</p>
+ </td>
+ <td> </td>
+ <td>
+ <p><img width="115" height="70"
+ alt="filters01 - after filter element 3"
+ src="images/filters/filters01-3.png" /><br />
+ After filter primitive 3</p>
+ </td>
+ </tr>
+ <tr>
+ <td> </td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td> </td>
+ <td> </td>
+ <td>
+ <p><img width="115" height="70"
+ alt="filters01 - after filter element 4"
+ src="images/filters/filters01-4.png" /><br />
+ After filter primitive 4</p>
+ </td>
+ <td> </td>
+ <td>
+ <p><img width="115" height="70"
+ alt="filters01 - after filter element 5"
+ src="images/filters/filters01-5.png" /><br />
+ After filter primitive 5</p>
+ </td>
+ <td> </td>
+ <td>
+ <p><img width="115" height="70"
+ alt="filters01 - after filter element 6"
+ src="images/filters/filters01-6.png" /><br />
+ After filter primitive 6</p>
+ </td>
+ </tr>
+ </table>
+ <ol>
+ <li>Filter primitive <a>'feGaussianBlur'</a> takes input
+ <a href="filters.html#SourceAlpha"><span
+ class="attr-value">SourceAlpha</span></a>, which is the alpha
+ channel of the source graphic. The result is stored in a
+ temporary buffer named "blur". Note that "blur" is used as
+ input to both filter primitives 2 and 3.</li>
+ <li>Filter primitive <a>'feOffset'</a> takes buffer
+ "blur", shifts the result in a positive direction in both x
+ and y, and creates a new buffer named "offsetBlur". The
+ effect is that of a drop shadow.</li>
+ <li>Filter primitive <a>'feSpecularLighting'</a>, uses
+ buffer "blur" as a model of a surface elevation and generates
+ a lighting effect from a single point source. The result is
+ stored in buffer "specOut".</li>
+ <li>Filter primitive <a>'feComposite'</a> masks out the
+ result of filter primitive 3 by the original source graphics
+ alpha channel so that the intermediate result is no bigger
+ than the original source graphic.</li>
+ <li>Filter primitive <a>'feComposite'</a> composites the
+ result of the specular lighting with the original source
+ graphic.</li>
+ <li>Filter primitive <a>'feMerge'</a> composites two
+ layers together. The lower layer consists of the drop shadow
+ result from filter primitive 2. The upper layer consists of
+ the specular lighting result from filter primitive 5.</li>
+ </ol>
+
+<h2 id="FilterElement">The <span class="element-name">'filter'</span> element</h2>
+
+<edit:with element='filter'>
+
+<p>The description of the <a>'filter element'</a> element follows:</p>
+
+<edit:elementsummary name='filter'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="FilterElementFilterUnitsAttribute"><span
+ class="adef">filterUnits</span> = "<em>userSpaceOnUse</em>
+ | <em>objectBoundingBox</em>"</dt>
+ <dd>See <a href="#FilterEffectsRegion">Filter effects
+ region</a>.</dd>
+ <dt id="FilterElementPrimitiveUnitsAttribute"><span
+ class="adef">primitiveUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
+ <dd>Specifies the coordinate system for the various length
+ values within the filter primitives and for the attributes
+ that define the <a
+ href="filters.html#FilterPrimitiveSubRegion">filter
+ primitive subregion</a>.<br />
+ If <span class='attr-value'>primitiveUnits="userSpaceOnUse"</span>, any
+ length values within the filter definitions represent
+ values in the current user coordinate system in place at
+ the time when the <a>'filter element'</a> element is
+ referenced (i.e., the user coordinate system for the
+ element referencing the <a>'filter element'</a> element via a <a>'filter property'</a> property).<br />
+ If <span class='attr-value'>primitiveUnits="objectBoundingBox"</span>,
+ then any length values within the filter definitions
+ represent fractions or percentages of the bounding box on
+ the referencing element (see <a
+ href="coords.html#ObjectBoundingBox">Object bounding box
+ units</a>). Note that if only one number was specified in a <a href="types.html#DataTypeNumberOptionalNumber"><number-optional-number></a> value
+ this number is expanded out before the <a>'primitiveUnits'</a> computation takes place.
+ <br />
+ If attribute <a>'primitiveUnits'</a>
+ is not specified, then the effect is as if a value of <span
+ class="attr-value">userSpaceOnUse</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="FilterElementXAttribute"><span
+ class="adef">x</span> = "<em><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></em>"</dt>
+ <dd>See <a href="#FilterEffectsRegion">Filter effects
+ region</a>.</dd>
+ <dt id="FilterElementYAttribute"><span
+ class="adef">y</span> = "<em><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></em>"</dt>
+ <dd>See <a href="#FilterEffectsRegion">Filter effects
+ region</a>.</dd>
+ <dt id="FilterElementWidthAttribute"><span
+ class="adef">width</span> = "<em><a
+ href="types.html#DataTypeLength"><length></a></em>"</dt>
+ <dd>See <a href="#FilterEffectsRegion">Filter effects
+ region</a>.</dd>
+ <dt id="FilterElementHeightAttribute"><span
+ class="adef">height</span> = "<em><a
+ href="types.html#DataTypeLength"><length></a></em>"</dt>
+ <dd>See <a href="#FilterEffectsRegion">Filter effects
+ region</a>.</dd>
+ <dt id="FilterElementFilterResAttribute"><span
+ class="adef">filterRes</span> = "<em><a
+ href="types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>"</dt>
+ <dd>See <a href="#FilterEffectsRegion">Filter effects
+ region</a>.</dd>
+ <dt id="FilterElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="linking.html#IRIReference">IRI
+ reference</a> to another <a>'filter element'</a> element within the
+ current SVG document fragment. Any attributes which are
+ defined on the referenced <a>'filter element'</a> element which are not
+ defined on this element are inherited by this element. If
+ this element has no defined filter nodes, and the
+ referenced element has defined filter nodes (possibly due
+ to its own <a>'xlink:href'</a> attribute),
+ then this element inherits the filter nodes defined from
+ the referenced <a>'filter element'</a>
+ element. Inheritance can be indirect to an arbitrary level;
+ thus, if the referenced <a>'filter element'</a> element inherits
+ attributes or its filter node specification due to its own
+ <a>'xlink:href'</a> attribute, then the
+ current element can inherit those attributes or filter node
+ specifications.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p><a href="styling.html#SVGStylingProperties">Properties</a>
+ inherit into the <a>'filter element'</a>
+ element from its ancestors; properties do <em>not</em> inherit
+ from the element referencing the <a>'filter element'</a> element.</p>
+ <p><a>'filter element'</a> elements are
+ never rendered directly; their only usage is as something that
+ can be referenced using the <a>'filter property'</a> property. The <a>'display'</a> property does not apply
+ to the <a>'filter element'</a> element;
+ thus, <a>'filter element'</a> elements are
+ not directly rendered even if the <a>'display'</a> property is set to a
+ value other than <span class="prop-value">none</span>, and
+ <a>'filter element'</a> elements are
+ available for referencing even when the <a>'display'</a> property on the <a>'filter element'</a> element or any of its
+ ancestors is set to <span class="prop-value">none</span>.</p>
+
+ <h2 id="FilterProperty">The <span class="prop-name">'filter'</span>
+ property</h2>
+ <p>The description of the <a>'filter property'</a> property is as follows:</p>
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'filter'</span></dt>
+ <dd>
+ <table summary="filter property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><a href="types.html#DataTypeFuncIRI"><funciri></a> | none | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>none</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="intro.html#TermContainerElement">container
+ elements</a> (except <a>'mask element'</a>) and <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <dl>
+ <dt><span class="prop-value"><funciri></span></dt>
+ <dd>An <a href="types.html#DataTypeFuncIRI">Functional IRI
+ reference</a> to a <a>'filter element'</a> element which
+ defines the filter effects that shall be applied to this
+ element.</dd>
+ <dt><span class="prop-value">none</span></dt>
+ <dd>Do not apply any filter effects to this element.</dd>
+ </dl>
+
+ <h2 id="FilterEffectsRegion">Filter effects region</h2>
+ <p>A <a>'filter element'</a> element can define a
+ region on the canvas to which a given filter effect applies and
+ can provide a resolution for any intermediate continuous tone
+ images used to process any raster-based filter primitives. The
+ <a>'filter element'</a> element has the
+ following attributes which work together to define the filter
+ effects region:</p>
+
+ <dl class='definitions unemphasized-names'>
+ <dt id="FilterUnitsAttribute"><a>'filterUnits'</a></dt>
+ <dd>
+ <p>Defines the coordinate system for attributes <a>'x'</a>, <a>'y'</a>,
+ <a>'width'</a> and <a>'height'</a>.</p>
+
+ <p>If <span class="attr-value">filterUnits="userSpaceOnUse"</span>,
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> represent
+ values in the current user coordinate system in place at the time
+ when the <a>'filter element'</a> is referenced (i.e., the user
+ coordinate system for the element referencing the <a>'filter element'</a>
+ via a <a>'filter property'</a> property).</p>
+
+ <p>If <span class='attr-value'>filterUnits="objectBoundingBox"</span>,
+ then <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>
+ represent fractions or percentages of the bounding box on the referencing
+ element (see <a href="coords.html#ObjectBoundingBox">Object bounding box units</a>).</p>
+
+ <p>If attribute <a>'filterUnits'</a> is not specified, then the effect
+ is if a value of <span class='attr-value'>'objectBoundingBox'</span>
+ were specified.</p>
+
+ <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ </dd>
+
+ <dt id="FilterRegionXYWidthHeightAttributes"><a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a></dt>
+ <dd>
+ <p>These attributes define a rectangular region on the canvas to
+ which this filter applies.</p>
+
+ <p>The amount of memory and processing time required to apply
+ the filter are related to the size of this rectangle and the
+ <a>'filterRes'</a> attribute of the filter.</p>
+
+ <p>The coordinate system for these attributes depends on the
+ value for attribute <a>'filterUnits'</a>.</p>
+
+ <p>Negative values for <a>'width'</a> or <a>'height'</a> are an error
+ (see <a href="implnote.html#ErrorProcessing">Error processing</a>).
+ Zero values disable rendering of the element which referenced
+ the filter.</p>
+
+ <p>The bounds of this rectangle act as a hard clipping region for each
+ <a href="filters.html#FilterPrimitivesOverview">filter primitive</a>
+ included with a given <a>'filter element'</a> element; thus, if
+ the effect of a given filter primitive would extend beyond
+ the bounds of the rectangle (this sometimes happens when
+ using a <a>'feGaussianBlur'</a> filter
+ primitive with a very large <a>'feGaussianBlur/stdDeviation'</a>),
+ parts of the effect will get clipped.</p>
+
+ <p>If <a>'x'</a> or <a>'y'</a> is not specified, the effect is as if a
+ value of <span class="attr-value">-10%</span> were specified.</p>
+
+ <p>If <a>'width'</a> or <a>'height'</a> is not specified, the effect is as if a
+ value of <span class="attr-value">120%</span> were specified.</p>
+
+ <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ </dd>
+
+ <dt><a>'filterRes'</a></dt>
+ <dd>
+ <p>This attribute takes the form <code>x-pixels [y-pixels]</code>,
+ and indicates the width and height of the intermediate images in
+ pixels. If not provided, then the user agent will use reasonable values
+ to produce a high-quality result on the output device.
+ </p>
+
+ <p>Care should be taken when assigning a non-default value to
+ this attribute. Too small of a value may result in unwanted
+ pixelation in the result. Too large of a value may result in
+ slow processing and large memory usage.</p>
+
+ <p>Negative values are an error (see
+ <a href="implnote.html#ErrorProcessing">Error processing</a>).
+ Zero values disable rendering of the element which referenced
+ the filter.</p>
+
+ <p>Non-integer values are truncated, i.e rounded to the closest integer value towards zero.</p>
+
+ <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ </dd>
+ </dl>
+
+ <p>Note that both of the two possible value for <a>'filterUnits'</a>
+ (i.e., <span class="attr-value">'objectBoundingBox'</span> and
+ <span class="attr-value">'userSpaceOnUse'</span>) result in a filter
+ region whose coordinate system has its X-axis and Y-axis each
+ parallel to the X-axis and Y-axis, respectively, of the user
+ coordinate system for the element to which the filter will be
+ applied.</p>
+ <p>Sometimes implementers can achieve faster performance when
+ the <a>filter region</a> can be mapped directly to device pixels;
+ thus, for best performance on display devices, it is suggested
+ that authors define their region such that SVG user agent can
+ align the <a>filter region</a> pixel-for-pixel with the background. In
+ particular, for best filter effects performance, avoid rotating
+ or skewing the user coordinate system. Explicit values for
+ attribute <a>'filterRes'</a> can either
+ help or harm performance. If <a>'filterRes'</a> is smaller than the
+ automatic (i.e., default) filter resolution, then filter effect
+ might have faster performance (usually at the expense of
+ quality). If <a>'filterRes'</a> is larger
+ than the automatic (i.e., default) filter resolution, then
+ filter effects performance will usually be slower.</p>
+ <p>It is often necessary to provide padding space because the
+ filter effect might impact bits slightly outside the
+ tight-fitting bounding box on a given object. For these
+ purposes, it is possible to provide negative percentage values
+ for <a>'x'</a> and <a>'y'</a>, and percentages values greater than
+ 100% for <a>'width'</a> and <a>'height'</a>. This, for example, is
+ why the defaults for the filter effects region are <span class='attr-value'>x="-10%"
+ y="-10%" width="120%" height="120%"</span>.</p>
+
+</edit:with>
+
+ <h2 id="AccessingBackgroundImage">Accessing the background image</h2>
+ <p>Two possible pseudo input images for filter effects are <a
+ href="#BackgroundImage">BackgroundImage</a> and <a
+ href="#BackgroundAlpha">BackgroundAlpha</a>, which each
+ represent an image snapshot of the canvas under the filter
+ region at the time that the <a>'filter element'</a> element is invoked. <a
+ href="#BackgroundImage">BackgroundImage</a> represents both the
+ color values and alpha channel of the canvas (i.e., RGBA pixel
+ values), whereas <a href="#BackgroundAlpha">BackgroundAlpha</a>
+ represents only the alpha channel.</p>
+ <p>Implementations of SVG user agents often will need to
+ maintain supplemental background image buffers in order to
+ support the <a href="#BackgroundImage">BackgroundImage</a> and
+ <a href="#BackgroundAlpha">BackgroundAlpha</a> pseudo input
+ images. Sometimes, the background image buffers will contain an
+ in-memory copy of the accumulated painting operations on the
+ current canvas.</p>
+ <p>Because in-memory image buffers can take up significant
+ system resources, SVG content must explicitly indicate to the
+ SVG user agent that the document needs access to the background
+ image before <a href="#BackgroundImage">BackgroundImage</a> and
+ <a href="#BackgroundAlpha">BackgroundAlpha</a> pseudo input
+ images can be used. The property which enables access to the
+ background image is <a>'enable-background'</a>, defined below:</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="EnableBackgroundProperty"><span class="propdef-title prop-name">'enable-background'</span></dt>
+ <dd>
+ <table summary="enable-background property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>accumulate | new [ <x> <y>
+ <width> <height> ] | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>accumulate</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="intro.html#TermContainerElement">container
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p><a>'enable-background'</a> is only
+ applicable to <a
+ href="intro.html#TermContainerElement">container elements</a>
+ and specifies how the SVG user agents manages the accumulation
+ of the background image.</p>
+ <p>A value of <span class='prop-value'>new</span> indicates two things:</p>
+ <ul>
+ <li>It enables the ability of children of the current <a
+ href="intro.html#TermContainerElement">container element</a>
+ to access the background image.</li>
+ <li>It indicates that a new (i.e., initially transparent
+ black) background image canvas is established and that (in
+ effect) all children of the current <a
+ href="intro.html#TermContainerElement">container element</a>
+ shall be rendered into the new background image canvas in
+ addition to being rendered onto the target device.</li>
+ </ul>
+ <p>A meaning of <span class='prop-value'>enable-background: accumulate</span>
+ (the initial/default value) depends on context:</p>
+ <ul>
+ <li>If an ancestor <a
+ href="intro.html#TermContainerElement">container element</a>
+ has a property value of <span class='prop-value'>enable-background: new</span>, then all <a
+ href="intro.html#TermGraphicsElement">graphics elements</a>
+ within the current <a
+ href="intro.html#TermContainerElement">container element</a>
+ are rendered both onto the parent <a
+ href="intro.html#TermContainerElement">container
+ element</a>'s background image canvas and onto the target
+ device.</li>
+ <li>Otherwise, there is no current background image canvas,
+ so it is only necessary to render <a
+ href="intro.html#TermGraphicsElement">graphics elements</a>
+ onto the target device. (No need to render to the background
+ image canvas.)</li>
+ </ul>
+ <p>If a filter effect specifies either the <a
+ href="#BackgroundImage">BackgroundImage</a> or the <a
+ href="#BackgroundAlpha">BackgroundAlpha</a> pseudo input images
+ and no ancestor <a
+ href="intro.html#TermContainerElement">container element</a>
+ has a property value of <span class='prop-value'>enable-background: new</span>, then the
+ background image request is technically in error. Processing
+ will proceed without interruption (i.e., no error message) and
+ a transparent black image shall be provided in response to the
+ request.</p>
+ <p>The optional
+ <span class='prop-value'><x>,<y>,<width>,<height></span>
+ parameters on the <span class='prop-value'>new</span> value are
+ <a><number></a> values that indicate the
+ subregion of the <a
+ href="intro.html#TermContainerElement">container element</a>'s
+ <a href="intro.html#TermUserSpace">user space</a> where access
+ to the background image is allowed to happen. These parameters
+ enable the SVG user agent potentially to allocate smaller
+ temporary image buffers than the default values. Thus, the values
+ <span class='prop-value'><x>,<y>,<width>,<height></span> act as a
+ clipping rectangle on the background image canvas. Negative
+ values for <span class='prop-value'><width></span> or <span class='prop-value'><height></span> are an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>). If
+ more than zero but less than four of the values
+ <span class='prop-value'><x>,<y>,<width></span> and <span class='prop-value'><height></span> are
+ specified or if zero values are specified for <span class='prop-value'><width></span> or
+ <span class='prop-value'><height></span>, <a href="#BackgroundImage">BackgroundImage</a>
+ and <a href="#BackgroundAlpha">BackgroundAlpha</a> are
+ processed as if background image processing were not
+ enabled.</p>
+ <p>Assume you have an element E in the document and that E has
+ a series of ancestors A<sub>1</sub> (its immediate parent),
+ A<sub>2</sub>, etc. (Note: A<sub>0</sub> is E.) Each ancestor
+ A<sub>i</sub> will have a corresponding temporary background
+ image offscreen buffer BUF<sub>i</sub>. The contents of the
+ <em>background image</em> available to a <a>'filter element'</a> referenced by E is
+ defined as follows:</p>
+ <ul>
+ <li>Find the element A<sub>i</sub> with the smallest
+ subscript i (including A<sub>0</sub>=E) for which the <a>'enable-background'</a> property has
+ the value <span class="prop-value">new</span>. (Note: if
+ there is no such ancestor element, then there is no
+ background image available to E, in which case a transparent
+ black image will be used as E's background image.)</li>
+ <li>For each A<sub>i</sub> (from i=n to 1), initialize
+ BUF<sub>i</sub> to transparent black. Render all children of
+ A<sub>i</sub> up to but not including A<sub>i-1</sub> into
+ BUF<sub>i</sub>. The children are painted, then filtered,
+ clipped, masked and composited using the various painting,
+ filtering, clipping, masking and object opacity settings on
+ the given child. Any filter effects, masking and group
+ opacity that might be set on A<sub>i</sub> do <em>not</em>
+ apply when rendering the children of A<sub>i</sub> into
+ BUF<sub>i</sub>.<br />
+ (Note that for the case of A<sub>0</sub>=E, the graphical
+ contents of E are not rendered into BUF<sub>1</sub> and thus
+ are not part of the background image available to E. Instead,
+ the graphical contents of E are available via the <a
+ href="filters.html#SourceGraphic">SourceGraphic</a> and <a
+ href="filters.html#SourceAlpha">SourceAlpha</a> pseudo input
+ images.)</li>
+ <li>Then, for each A<sub>i</sub> (from i=1 to n-1), composite
+ BUF<sub>i</sub> into BUF<sub>i+1</sub>.</li>
+ <li>The accumulated result (i.e., BUF<sub>n</sub>) represents
+ the background image available to E.</li>
+ </ul>
+ <p><span class="example-ref">Example
+ enable-background-01</span> illustrates the rules for
+ background image processing.</p>
+
+<edit:example href='images/filters/enable-background-01.svg' name='enable-background-01' description='illustrate the rules for background image processing' image='yes' link='yes'/>
+
+ <p>The example above contains five parts, described as
+ follows:</p>
+ <ol>
+ <li>The first set is the reference graphic. The reference
+ graphic consists of a red rectangle followed by a 50%
+ transparent <a>'g'</a> element. Inside the <a>'g'</a> is a green circle that
+ partially overlaps the rectangle and a a blue triangle that
+ partially overlaps the circle. The three objects are then
+ outlined by a rectangle stroked with a thin blue line. No
+ filters are applied to the reference graphic.</li>
+ <li>The second set enables background image processing and
+ adds an empty <a>'g'</a> element which invokes the
+ ShiftBGAndBlur filter. This filter takes the current
+ accumulated background image (i.e., the entire reference
+ graphic) as input, shifts its offscreen down, blurs it, and
+ then writes the result to the canvas. Note that the offscreen
+ for the filter is initialized to transparent black, which
+ allows the already rendered rectangle, circle and triangle to
+ show through after the filter renders its own result to the
+ canvas.</li>
+ <li>The third set enables background image processing and
+ instead invokes the ShiftBGAndBlur filter on the inner <a>'g'</a> element. The accumulated
+ background at the time the filter is applied contains only
+ the red rectangle. Because the children of the inner <a>'g'</a> (i.e., the circle and
+ triangle) are not part of the inner <a>'g'</a> element's background and
+ because ShiftBGAndBlur ignores SourceGraphic, the children of
+ the inner <a>'g'</a> do not appear in the
+ result.</li>
+ <li>The fourth set enables background image processing and
+ invokes the ShiftBGAndBlur on the <a>'polygon'</a> element that draws
+ the triangle. The accumulated background at the time the
+ filter is applied contains the red rectangle plus the green
+ circle ignoring the effect of the <a>'opacity'</a> property on the inner
+ <a>'g'</a> element. (Note that the
+ blurred green circle at the bottom does not let the red
+ rectangle show through on its left side. This is due to
+ ignoring the effect of the <a>'opacity'</a> property.) Because the
+ triangle itself is not part of the accumulated background and
+ because ShiftBGAndBlur ignores SourceGraphic, the triangle
+ does not appear in the result.</li>
+ <li>The fifth set is the same as the fourth except that
+ filter ShiftBGAndBlur_WithSourceGraphic is invoked instead of
+ ShiftBGAndBlur. ShiftBGAndBlur_WithSourceGraphic performs the
+ same effect as ShiftBGAndBlur, but then renders the
+ SourceGraphic on top of the shifted, blurred background
+ image. In this case, SourceGraphic is the blue triangle;
+ thus, the result is the same as in the fourth case except
+ that the blue triangle now appears.</li>
+ </ol>
+
+ <h2 id="FilterPrimitivesOverview">Filter primitives overview</h2>
+
+ <h3 id="FilterPrimitivesOverviewIntro">Overview</h3>
+
+ <p>This section describes the various filter primtives that can
+ be assembled to achieve a particular filter effect.</p>
+ <p>Unless otherwise stated, all image filters operate on
+ premultiplied RGBA samples. Filters which work more naturally
+ on non-premultiplied data (feColorMatrix and
+ feComponentTransfer) will temporarily undo and redo
+ premultiplication as specified. All raster effect filtering
+ operations take 1 to N input RGBA images, additional attributes
+ as parameters, and produce a single output RGBA image.</p>
+ <p>The RGBA result from each filter primitive will be clamped
+ into the allowable ranges for colors and opacity values. Thus,
+ for example, the result from a given filter primitive will have
+ any negative color values or opacity values adjusted up to
+ color/opacity of zero.</p>
+ <p>The color space in which a particular filter primitive
+ performs its operations is determined by the value of property
+ <a>'color-interpolation-filters'</a> on
+ the given filter primitive. A different property, <a>'color-interpolation'</a> determines
+ the color space for other color operations. Because these two
+ properties have different initial values (<a>'color-interpolation-filters'</a> has
+ an initial value of <span class="prop-value">linearRGB</span>
+ whereas <a>'color-interpolation'</a> has an
+ initial value of <span class="prop-value">sRGB</span>), in some
+ cases to achieve certain results (e.g., when coordinating
+ gradient interpolation with a filtering operation) it will be
+ necessary to explicitly set <a>'color-interpolation'</a> to <span
+ class="prop-value">linearRGB</span> or <a>'color-interpolation-filters'</a> to
+ <span class="prop-value">sRGB</span> on particular elements.
+ Note that the examples below do not explicitly set either <a>'color-interpolation'</a> or <a>'color-interpolation-filters'</a>, so
+ the initial values for these properties apply to the
+ examples.</p>
+
+<h3 id="CommonAttributes">Common attributes</h3>
+
+<p>With the exception of the <a>'feTile/in'</a> attribute, all of the following
+attributes are available on all filter primitive elements:</p>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="FilterPrimitiveXAttribute"><span class="adef">x</span> = "<em><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></em>"</dt>
+ <dd>The minimum x coordinate for the subregion which
+ restricts calculation and rendering of the given filter
+ primitive. See <a
+ href="filters.html#FilterPrimitiveSubRegion">filter
+ primitive subregion</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="FilterPrimitiveYAttribute"><span class="adef">y</span> = "<em><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></em>"</dt>
+ <dd>The minimum y coordinate for the subregion which
+ restricts calculation and rendering of the given filter
+ primitive. See <a
+ href="filters.html#FilterPrimitiveSubRegion">filter
+ primitive subregion</a>.<br /><span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="FilterPrimitiveWidthAttribute"><span class="adef">width</span> = "<em><a
+ href="types.html#DataTypeLength"><length></a></em>"</dt>
+ <dd>The width of the subregion which restricts calculation
+ and rendering of the given filter primitive. See <a
+ href="filters.html#FilterPrimitiveSubRegion">filter
+ primitive subregion</a>.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables the effect of the given filter
+ primitive (i.e., the result is a transparent black
+ image).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="FilterPrimitiveHeightAttribute"><span class="adef">height</span> = "<em><a
+ href="types.html#DataTypeLength"><length></a></em>"</dt>
+ <dd>The height of the subregion which restricts calculation
+ and rendering of the given filter primitive. See <a
+ href="filters.html#FilterPrimitiveSubRegion">filter
+ primitive subregion</a>.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables the effect of the given filter
+ primitive (i.e., the result is a transparent black
+ image).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="FilterPrimitiveResultAttribute"><span class="adef">result</span> =
+ "<em><filter-primitive-reference></em>"</dt>
+ <dd>Assigned name for this filter primitive. If supplied,
+ then graphics that result from processing this filter
+ primitive can be referenced by an <a>'feTile/in'</a> attribute on a subsequent
+ filter primitive within the same <a>'filter element'</a> element. If no
+ value is provided, the output will only be available for
+ re-use as the implicit input into the next filter primitive
+ if that filter primitive provides no value for its <a>'feTile/in'</a> attribute.<br />
+ Note that a <em><filter-primitive-reference></em> is
+ not an XML ID; instead, a
+ <em><filter-primitive-reference></em> is only
+ meaningful within a given <a>'filter element'</a> element and thus
+ have only local scope. It is legal for the same
+ <em><filter-primitive-reference></em> to appear
+ multiple times within the same <a>'filter element'</a> element. When
+ referenced, the <em><filter-primitive-reference></em>
+ will use the closest preceding filter primitive with the
+ given result.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="FilterPrimitiveInAttribute"><span class="adef">in</span> = "<em><a
+ href="filters.html#SourceGraphic">SourceGraphic</a> | <a
+ href="filters.html#SourceAlpha">SourceAlpha</a> | <a
+ href="filters.html#BackgroundImage">BackgroundImage</a> |
+ <a href="filters.html#BackgroundAlpha">BackgroundAlpha</a>
+ | <a href="filters.html#FillPaint">FillPaint</a> | <a
+ href="filters.html#StrokePaint">StrokePaint</a> |
+ <filter-primitive-reference></em>"</dt>
+ <dd>
+ Identifies input for the given filter primitive. The
+ value can be either one of six keywords or can be a
+ string which matches a previous <a>'feTile/result'</a> attribute value
+ within the same <a>'filter element'</a> element. If no
+ value is provided and this is the first filter primitive,
+ then this filter primitive will use <a
+ href="filters.html#SourceGraphic"><span
+ class="attr-value">SourceGraphic</span></a> as its input.
+ If no value is provided and this is a subsequent filter
+ primitive, then this filter primitive will use the result
+ from the previous filter primitive as its input.<br />
+ <br />
+ If the value for <a>'feTile/result'</a>
+ appears multiple times within a given <a>'filter element'</a> element, then a
+ reference to that result will use the closest preceding
+ filter primitive with the given value for attribute <a>'feTile/result'</a>. Forward references to
+ results are <a href="implnote.html#ErrorProcessing">an
+ error</a>.<br />
+ <br />
+ Definitions for the six keywords:
+ <dl>
+ <dt id="SourceGraphic"><span class="attr-value">SourceGraphic</span></dt>
+ <dd>This keyword represents the <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a> that were the original input into the <a>'filter element'</a> element. For
+ raster effects filter primitives, the <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a> will be rasterized into an initially clear
+ RGBA raster in image space. Pixels left untouched by
+ the original graphic will be left clear. The image is
+ specified to be rendered in linear RGBA pixels. The
+ alpha channel of this image captures any anti-aliasing
+ specified by SVG. (Since the raster is linear, the
+ alpha channel of this image will represent the exact
+ percent coverage of each pixel.)</dd>
+ <dt id="SourceAlpha"><span class="attr-value">SourceAlpha</span></dt>
+ <dd>This keyword represents the <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a> that were the original input into the <a>'filter element'</a> element. <span
+ class="attr-value">SourceAlpha</span> has all of the
+ same rules as <a
+ href="filters.html#SourceGraphic"><span
+ class="attr-value">SourceGraphic</span></a> except that
+ only the alpha channel is used. The input image is an
+ RGBA image consisting of implicitly black color values
+ for the RGB channels, but whose alpha channel is the
+ same as <a href="filters.html#SourceGraphic"><span
+ class="attr-value">SourceGraphic</span></a>. If this
+ option is used, then some implementations might need to
+ rasterize the <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a> in order to extract the alpha
+ channel.</dd>
+ <dt id="BackgroundImage"><span class="attr-value">BackgroundImage</span></dt>
+ <dd>This keyword represents an image snapshot of the
+ canvas under the <a>filter region</a> at the time that the <a>'filter element'</a> element was
+ invoked. See <a
+ href="#AccessingBackgroundImage">Accessing the
+ background image</a>.</dd>
+ <dt id="BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></dt>
+ <dd>Same as <a
+ href="#BackgroundImage">BackgroundImage</a> except only
+ the alpha channel is used. See <a
+ href="filters.html#SourceAlpha"><span
+ class="attr-value">SourceAlpha</span></a> and <a
+ href="#AccessingBackgroundImage">Accessing the
+ background image</a>.</dd>
+ <dt id="FillPaint"><span class="attr-value">FillPaint</span></dt>
+ <dd>This keyword represents the value of the <a>'fill'</a> property on the
+ target element for the filter effect. The FillPaint
+ image has conceptually infinite extent. Frequently this
+ image is opaque everywhere, but it might not be if the
+ "paint" itself has alpha, as in the case of a gradient
+ or pattern which itself includes transparent or
+ semi-transparent parts.</dd>
+ <dt id="StrokePaint"><span class="attr-value">StrokePaint</span></dt>
+ <dd>This keyword represents the value of the <a>'stroke'</a> property on the
+ target element for the filter effect. The StrokePaint
+ image has conceptually infinite extent. Frequently this
+ image is opaque everywhere, but it might not be if the
+ "paint" itself has alpha, as in the case of a gradient
+ or pattern which itself includes transparent or
+ semi-transparent parts.</dd>
+ </dl>
+ <p>The <a>'feTile/in'</a> attribute is available on all filter
+ primitive elements that require an input.</p>
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </dd>
+ </dl>
+ </div>
+
+ <h3 id="FilterPrimitiveSubRegion">Filter primitive subregion</h3>
+
+<edit:with element='feTile'>
+
+ <p>All filter primitives have attributes <a>'x'</a>,
+ <a>'y'</a>, <a>'width'</a> and
+ <a>'height'</a> which identify a subregion which
+ restricts calculation and rendering of the given filter
+ primitive. These attributes are defined according to the same
+ rules as other filter primitives' coordinate and length
+ attributes and thus represent values in the coordinate system
+ established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.</p>
+ <p><a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> default to
+ the union (i.e., tightest fitting bounding box) of the
+ subregions defined for all referenced nodes. If there are no
+ referenced nodes (e.g., for <a>'feImage'</a> or <a>'feTurbulence'</a>), or one or more
+ of the referenced nodes is a standard input (one of <a
+ href="filters.html#SourceGraphic"><span
+ class="attr-value">SourceGraphic</span></a>, <a
+ href="filters.html#SourceAlpha"><span
+ class="attr-value">SourceAlpha</span></a>, <a
+ href="filters.html#BackgroundImage"><span
+ class="attr-value">BackgroundImage</span></a>, <a
+ href="filters.html#BackgroundAlpha"><span
+ class="attr-value">BackgroundAlpha</span></a>, <a
+ href="filters.html#FillPaint"><span
+ class="attr-value">FillPaint</span></a> or <a
+ href="filters.html#StrokePaint"><span
+ class="attr-value">StrokePaint</span></a>), or for <a>'feTile'</a> (which is special
+ because its principal function is to replicate the referenced
+ node in X and Y and thereby produce a usually larger result),
+ the default subregion is <span class="attr-value">0%</span>,<span class="attr-value">0%</span>,<span class="attr-value">100%</span>,<span class="attr-value">100%</span>,
+ where as a special-case the percentages are relative to the dimensions of the <a>filter region</a>, thus making the
+ the default <a>filter primitive subregion</a> equal to the <a>filter region</a>.</p>
+ <p><a>'x'</a>, <a>'y'</a>,
+ <a>'width'</a> and <a>'height'</a> act as a
+ hard clip clipping rectangle on both the filter primitive's input image(s) and the filter primitive result.</p>
+ <p>All intermediate offscreens are defined to not exceed the
+ intersection of <a>'x'</a>, <a>'y'</a>,
+ <a>'width'</a> and <a>'height'</a> with the <a>filter region</a>. The
+ <a>filter region</a> and any of the <a>'x'</a>,
+ <a>'y'</a>, <a>'width'</a> and
+ <a>'height'</a> subregions are to be set up such that
+ all offscreens are made big enough to accommodate any pixels
+ which even partly intersect with either the <a>filter region</a> or
+ the x,y,width,height subregions.</p>
+ <p><a>'feTile'</a> references a previous
+ filter primitive and then stitches the tiles together based on
+ the <a>'x'</a>, <a>'y'</a>,
+ <a>'width'</a> and <a>'height'</a> values of
+ the referenced filter primitive in order to fill its own
+ <a>filter primitive subregion</a>.</p>
+
+</edit:with>
+
+<p><span class='example-ref'>Example primitive-subregion-01</span> demonstrates the effect
+of specifying a filter primitive subregion:</p>
+
+<edit:example href='images/filters/primitive-subregion-01.svg' name='primitive-subregion-01' image='yes' link='yes'/>
+
+ <p>
+ In the example above there are three rects that each have a cross and a circle in them.
+ The circle element in each one has a different filter applied, but with the same <a>filter primitive subregion</a>.
+ The filter output should be limited to the <a>filter primitive subregion</a>, so you should never see the circles themselves,
+ just the rects that make up the <a>filter primitive subregion</a>.
+ </p>
+ <ul>
+ <li>
+ The upper left rect shows an <a>'feFlood'</a> with <span class="attr-value">flood-opacity="75%"</span> so the cross should be visible through the green rect in the middle.
+ </li>
+ <li>
+ The lower left rect shows an <a>'feMerge'</a> that merges <span class="attr-value">SourceGraphic</span> with <span class="attr-value">FillPaint</span>. Since the circle has <span class="attr-value">fill-opacity="0.5"</span> it will also be transparent so that the cross is visible through the green rect in the middle.
+ </li>
+ <li>
+ The upper right rect shows an <a>'feBlend'</a> that has <span class="attr-value">mode="multiply"</span>. Since the circle in this case isn't transparent the result is totally opaque. The rect should be dark green and the cross should not be visible through it.
+ </li>
+ </ul>
+
+ <h2 id="LightSourceDefinitions">Light source elements and properties</h2>
+
+ <h3 id="LightSourceIntro">Introduction</h3>
+
+ <p>The following sections define the elements that define a
+ light source, <a>'feDistantLight'</a>, <a>'fePointLight'</a> and <a>'feSpotLight'</a>, and property <a>'lighting-color'</a>, which defines
+ the color of the light.</p>
+
+<h3 id="feDistantLightElement">Light source <span class="element-name">'feDistantLight'</span></h3>
+
+<edit:with element='feDistantLight'>
+
+<edit:elementsummary name='feDistantLight'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feDistantLightAzimuthAttribute"><span
+ class="adef">azimuth</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Direction angle for the light source on the XY plane (clockwise),
+ in degrees from the x axis.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feDistantLightElevationAttribute"><span
+ class="adef">elevation</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Direction angle for the light source from the XY plane towards the z
+ axis, in degrees. Note the positive Z-axis points towards the viewer of
+ the content.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ <p>
+ The following diagram illustrates the angles which <a>'azimuth'</a>
+ and <a>'elevation'</a> represent in an XYZ coordinate system.
+ </p>
+ <img src="images/filters/azimuth-elevation.png"
+ alt="Angles which azimuth and elevation represent" width="480" height="360" />
+ </div>
+
+</edit:with>
+
+<h3 id="fePointLightElement">Light source <span class="element-name">'fePointLight'</span></h3>
+
+<edit:with element='fePointLight'>
+
+<edit:elementsummary name='fePointLight'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="fePointLightXAttribute"><span
+ class="adef">x</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>X location for the light source in the coordinate
+ system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="fePointLightYAttribute"><span
+ class="adef">y</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Y location for the light source in the coordinate
+ system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="fePointLightZAttribute"><span
+ class="adef">z</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Z location for the light source in the coordinate
+ system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element, assuming
+ that, in the <a
+ href="coords.html#InitialCoordinateSystem">initial
+ coordinate system</a>, the positive Z-axis comes out
+ towards the person viewing the content and assuming that
+ one unit along the Z-axis equals <a href="coords.html#Units_viewport_percentage">one unit in X and Y</a>.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h3 id="feSpotLightElement">Light source <span class="element-name">'feSpotLight'</span></h3>
+
+<edit:with element='feSpotLight'>
+
+<edit:elementsummary name='feSpotLight'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feSpotLightXAttribute"><span
+ class="adef">x</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>X location for the light source in the coordinate
+ system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpotLightYAttribute"><span
+ class="adef">y</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Y location for the light source in the coordinate
+ system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpotLightZAttribute"><span
+ class="adef">z</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Z location for the light source in the coordinate
+ system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element, assuming
+ that, in the <a
+ href="coords.html#InitialCoordinateSystem">initial
+ coordinate system</a>, the positive Z-axis comes out
+ towards the person viewing the content and assuming that
+ one unit along the Z-axis equals <a href="coords.html#Units_viewport_percentage">one unit in X and Y</a>.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpotLightPointsAtXAttribute"><span
+ class="adef">pointsAtX</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>X location in the coordinate system established by
+ attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element of the
+ point at which the light source is pointing.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpotLightPointsAtYAttribute"><span
+ class="adef">pointsAtY</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Y location in the coordinate system established by
+ attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element of the
+ point at which the light source is pointing.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpotLightPointsAtZAttribute"><span
+ class="adef">pointsAtZ</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Z location in the coordinate system established by
+ attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element of the
+ point at which the light source is pointing, assuming that, in the <a
+ href="coords.html#InitialCoordinateSystem">initial
+ coordinate system</a>, the positive Z-axis comes out
+ towards the person viewing the content and assuming that
+ one unit along the Z-axis equals <a href="coords.html#Units_viewport_percentage">one unit in X and Y</a>.
+ <br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpotLightSpecularExponentAttribute"><span
+ class="adef">specularExponent</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Exponent value controlling the focus for the light
+ source.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpotLightLimitingConeAngleAttribute"><span
+ class="adef">limitingConeAngle</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>A limiting cone which restricts the region where the
+ light is projected. No light is projected outside the cone.
+ <a>'limitingConeAngle'</a> represents
+ the angle in degrees between the spot light axis (i.e. the axis
+ between the light source and the point to which it is
+ pointing at) and the spot light cone. User agents should
+ apply a smoothing technique such as anti-aliasing at the
+ boundary of the cone.<br />
+ If no value is specified, then no limiting cone will be
+ applied.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h3 id="LightingColorProperty">The <span class="prop-name">'lighting-color'</span> property</h3>
+
+ <p>The <a>'lighting-color'</a> property
+ defines the color of the light source for filter primitives <a>'feDiffuseLighting'</a> and <a>'feSpecularLighting'</a>.</p>
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'lighting-color'</span></dt>
+ <dd>
+ <table summary="lighting-color property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>currentColor |<br />
+ <a href="types.html#DataTypeColor"><color></a>
+ [<a href="types.html#DataTypeICCColor"><icccolor></a>]
+ |<br />
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>white</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'feDiffuseLighting'</a>
+ and <a>'feSpecularLighting'</a>
+ elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<h2 id="feBlendElement">Filter primitive <span class="element-name">'feBlend'</span></h2>
+
+<edit:with element='feBlend'>
+
+ <p>This filter composites two objects together using commonly
+ used imaging software blending modes. It performs a pixel-wise
+ combination of two input images.</p>
+
+<edit:elementsummary name='feBlend'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feBlendModeAttribute"><span
+ class="adef">mode</span> = "<em>normal | multiply | screen
+ | darken | lighten</em>"</dt>
+ <dd>One of the image blending modes (see <a
+ href="#BlendingTable">table</a> below). If attribute <a>'mode'</a> is not specified, then the effect is as if a value of <span class="attr-value">normal</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feBlendIn2Attribute"><span
+ class="adef">in2</span> = "<em>(see <a>'in'</a> attribute)</em>"</dt>
+ <dd>The second input image to the blending operation. This
+ attribute can take on the same values as the <a>'in'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p>For all feBlend modes, the result opacity is computed as
+ follows:</p>
+<pre>
+qr = 1 - (1-qa)*(1-qb)
+</pre>
+ <p>For the compositing formulas below, the following
+ definitions apply:</p>
+<pre>
+cr = Result color (RGB) - premultiplied
+qa = Opacity value at a given pixel for image A
+qb = Opacity value at a given pixel for image B
+ca = Color (RGB) at a given pixel for image A - premultiplied
+cb = Color (RGB) at a given pixel for image B - premultiplied
+</pre>
+ <p id="BlendingTable">The following
+ table provides the list of available image blending modes:</p>
+ <table summary="blending modes" width="500" border="1">
+ <tr>
+ <td width="33%">Image Blending Mode</td>
+ <td width="67%">Formula for computing result color</td>
+ </tr>
+ <tr>
+ <td width="33%">normal</td>
+ <td width="67%">cr = (1 - qa) * cb + ca</td>
+ </tr>
+ <tr>
+ <td width="33%">multiply</td>
+ <td width="67%">cr = (1-qa)*cb + (1-qb)*ca + ca*cb</td>
+ </tr>
+ <tr>
+ <td width="33%">screen</td>
+ <td width="67%">cr = cb + ca - ca * cb</td>
+ </tr>
+ <tr>
+ <td width="33%">darken</td>
+ <td width="67%">cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca
+ + cb)</td>
+ </tr>
+ <tr>
+ <td width="33%">lighten</td>
+ <td width="67%">cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca
+ + cb)</td>
+ </tr>
+ </table>
+ <p><span class="attr-value">'normal'</span> blend mode is
+ equivalent to <a
+ href="filters.html#feCompositeOperatorAttribute"><span
+ class="attr-value">operator="over"</span></a> on the <a>'feComposite'</a> filter primitive,
+ matches the blending method used by <a>'feMerge'</a> and matches the <a
+ href="masking.html#SimpleAlphaBlending">simple alpha
+ compositing</a> technique used in SVG for all compositing
+ outside of filter effects.</p>
+ <p><span class="example-ref">Example feBlend</span> shows
+ examples of the five blend modes.</p>
+
+<edit:example href='images/filters/feBlend.svg' name='feBlend' description='Examples of feBlend modes' image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="feColorMatrixElement">Filter primitive <span class="element-name">'feColorMatrix'</span></h2>
+
+<edit:with element='feColorMatrix'>
+
+ <p>This filter applies a matrix transformation:</p>
+<pre>
+| R' | | a00 a01 a02 a03 a04 | | R |
+| G' | | a10 a11 a12 a13 a14 | | G |
+| B' | = | a20 a21 a22 a23 a24 | * | B |
+| A' | | a30 a31 a32 a33 a34 | | A |
+| 1 | | 0 0 0 0 1 | | 1 |
+</pre>
+ <p>on the RGBA color and alpha values of every pixel on the
+ input graphics to produce a result with a new set of RGBA color
+ and alpha values.</p>
+ <p>The calculations are performed on non-premultiplied color
+ values. If the input graphics consists of premultiplied color
+ values, those values are automatically converted into
+ non-premultiplied color values for this operation.</p>
+ <p>These matrices often perform an identity mapping in the
+ alpha channel. If that is the case, an implementation can avoid
+ the costly undoing and redoing of the premultiplication for all
+ pixels with A = 1.</p>
+
+<edit:elementsummary name='feColorMatrix'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feColorMatrixTypeAttribute"><span
+ class="adef">type</span> = "<em>matrix | saturate |
+ hueRotate | luminanceToAlpha</em>"</dt>
+ <dd>Indicates the type of matrix operation. The keyword
+ <span class="attr-value">'matrix'</span> indicates that a full
+ 5x4 matrix of values will be provided. The other keywords
+ represent convenience shortcuts to allow commonly used
+ color operations to be performed without specifying a
+ complete matrix. If attribute <a>'type'</a> is not specified, then the effect is as if a value of <span class="attr-value">matrix</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feColorMatrixValuesAttribute"><span
+ class="adef">values</span> = "<em>list of <a
+ href="types.html#DataTypeNumber"><number></a>s</em>"</dt>
+ <dd>
+ The contents of <a>'values'</a>
+ depends on the value of attribute <a>'type'</a>:
+ <ul>
+ <li>
+ For <span class="attr-value">type="matrix"</span>,
+ <a>'values'</a> is a list of 20
+ matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34),
+ separated by whitespace and/or a comma. For example,
+ the identity matrix could be expressed as:
+<pre>
+type="matrix"
+values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
+</pre>
+ </li>
+ <li>
+ For <span class="attr-value">type="saturate"</span>,
+ <a>'values'</a> is a single
+ real number value (0 to 1). A <span
+ class="attr-value">saturate</span> operation is
+ equivalent to the following matrix operation:
+<pre>
+| R' | |0.213+0.787s 0.715-0.715s 0.072-0.072s 0 0 | | R |
+| G' | |0.213-0.213s 0.715+0.285s 0.072-0.072s 0 0 | | G |
+| B' | = |0.213-0.213s 0.715-0.715s 0.072+0.928s 0 0 | * | B |
+| A' | | 0 0 0 1 0 | | A |
+| 1 | | 0 0 0 0 1 | | 1 |
+</pre>
+ </li>
+ <li>
+ For <span class="attr-value">type="hueRotate"</span>,
+ <a>'values'</a> is a single one
+ real number value (degrees). A <span
+ class="attr-value">hueRotate</span> operation is
+ equivalent to the following matrix operation:
+<pre>
+| R' | | a00 a01 a02 0 0 | | R |
+| G' | | a10 a11 a12 0 0 | | G |
+| B' | = | a20 a21 a22 0 0 | * | B |
+| A' | | 0 0 0 1 0 | | A |
+| 1 | | 0 0 0 0 1 | | 1 |
+</pre>
+ where the terms a00, a01, etc. are calculated as
+ follows:
+<pre>
+| a00 a01 a02 | [+0.213 +0.715 +0.072]
+| a10 a11 a12 | = [+0.213 +0.715 +0.072] +
+| a20 a21 a22 | [+0.213 +0.715 +0.072]
+ [+0.787 -0.715 -0.072]
+cos(hueRotate value) * [-0.213 +0.285 -0.072] +
+ [-0.213 -0.715 +0.928]
+ [-0.213 -0.715+0.928]
+sin(hueRotate value) * [+0.143 +0.140-0.283]
+ [-0.787 +0.715+0.072]
+</pre>
+ Thus, the upper left term of the hue matrix turns out
+ to be:
+<pre>
+.213 + cos(hueRotate value)*.787 - sin(hueRotate value)*.213
+</pre>
+ </li>
+ <li>
+ For <span
+ class="attr-value">type="luminanceToAlpha"</span>,
+ <a>'values'</a> is not
+ applicable. A <span
+ class="attr-value">luminanceToAlpha</span> operation
+ is equivalent to the following matrix operation:
+<pre>
+ | R' | | 0 0 0 0 0 | | R |
+ | G' | | 0 0 0 0 0 | | G |
+ | B' | = | 0 0 0 0 0 | * | B |
+ | A' | | 0.2125 0.7154 0.0721 0 0 | | A |
+ | 1 | | 0 0 0 0 1 | | 1 |
+</pre>
+ </li>
+ </ul>
+ If the attribute is not specified, then the default
+ behavior depends on the value of attribute <a>'type'</a>. If <span
+ class="attr-value">type="matrix"</span>, then this
+ attribute defaults to the identity matrix. If <span
+ class="attr-value">type="saturate"</span>, then this
+ attribute defaults to the value <span
+ class="attr-value">1</span>, which results in the
+ identity matrix. If <span
+ class="attr-value">type="hueRotate"</span>, then this
+ attribute defaults to the value <span
+ class="attr-value">0</span>, which results in the
+ identity matrix.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </dd>
+ </dl>
+ </div>
+ <p><span class="example-ref">Example feColorMatrix</span> shows
+ examples of the four types of feColorMatrix operations.</p>
+
+<edit:example href='images/filters/feColorMatrix.svg' name='feColorMatrix' description='Examples of feColorMatrix operations' image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="feComponentTransferElement">Filter primitive <span class="element-name">'feComponentTransfer'</span></h2>
+
+<edit:with element='feComponentTransfer'>
+
+ <p>This filter primitive performs component-wise remapping of
+ data as follows:</p>
+<pre>
+R' = <a href="filters.html#feFuncRElement">feFuncR</a>( R )
+G' = <a href="filters.html#feFuncGElement">feFuncG</a>( G )
+B' = <a href="filters.html#feFuncBElement">feFuncB</a>( B )
+A' = <a href="filters.html#feFuncAElement">feFuncA</a>( A )
+</pre>
+ <p>for every pixel. It allows operations like brightness
+ adjustment, contrast adjustment, color balance or
+ thresholding.</p>
+ <p>The calculations are performed on non-premultiplied color
+ values. If the input graphics consists of premultiplied color
+ values, those values are automatically converted into
+ non-premultiplied color values for this operation. (Note that
+ the undoing and redoing of the premultiplication can be avoided
+ if <a href="filters.html#feFuncAElement">feFuncA</a> is the
+ identity transform and all alpha values on the source graphic
+ are set to 1.)</p>
+
+<edit:elementsummary name='feComponentTransfer'/>
+
+<p>The child elements of a <a>'feComponentTransfer'</a> element specify the
+transfer functions for the four channels:</p>
+
+<ul id="transferFuncElements">
+ <li><a>'feFuncR'</a> — transfer function for the red component of the input graphic</li>
+ <li><a>'feFuncG'</a> — transfer function for the green component of the input graphic</li>
+ <li><a>'feFuncB'</a> — transfer function for the blue component of the input graphic</li>
+ <li><a>'feFuncA'</a> — transfer function for the alpha component of the input graphic</li>
+</ul>
+
+<p>The following rules apply to the processing of the <a>'feComponentTransfer'</a> element:</p>
+<ul>
+ <li>If more than one <a href="#transferFuncElements">transfer function element</a> of the same kind is specified, the last occurrence is to be used.</li>
+ <li>If any of the <a href="#transferFuncElements">transfer function elements</a> are unspecified, the <a>'feComponentTransfer'</a> must be processed as if those <a href="#transferFuncElements">transfer function elements</a> were specified with their <a>'type'</a> attributes set to <span class="attr-value">'identity'</span>.</li>
+</ul>
+
+<edit:with element='feFuncR'>
+
+<div id='feFuncRElement'>
+<edit:elementsummary name='feFuncR'/>
+</div>
+
+<div id='feFuncGElement'>
+<edit:elementsummary name='feFuncG'/>
+</div>
+
+<div id='feFuncBElement'>
+<edit:elementsummary name='feFuncB'/>
+</div>
+
+<div id='feFuncAElement'>
+<edit:elementsummary name='feFuncA'/>
+</div>
+
+<p id="TransferFunctionElementAttributes">The attributes below are the
+<span class='SVG-TermDefine'>transfer function element attributes</span>,
+which apply to sub-elements <a>'feFuncR'</a>, <a>'feFuncG'</a>, <a>'feFuncB'</a>
+and <a>'feFuncA'</a> that define the transfer functions.</p>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feComponentTransferTypeAttribute"><span
+ class="adef">type</span> = "<em>identity | table | discrete
+ | linear | gamma</em>"</dt>
+ <dd>
+ <p>Indicates the type of component transfer function. The
+ type of function determines the applicability of the
+ other attributes.</p>
+ <p>In the following, C is the initial component (e.g.,
+ <a>'feFuncR'</a>), C' is the remapped component; both
+ in the closed interval [0,1].</p>
+ <ul>
+ <li>
+ For <span class="attr-value">identity</span>:
+<pre>
+C' = C
+</pre>
+ </li>
+ <li>
+ For <span class="attr-value">table</span>, the
+ function is defined by linear interpolation
+ between values given in the attribute
+ <a>'tableValues'</a>. The table has <em>n+1</em>
+ values (i.e., v<sub>0</sub> to v<sub>n</sub>)
+ specifying the start and end values for <em>n</em>
+ evenly sized interpolation regions. Interpolations
+ use the following formula:
+
+ <p>For a value <code>C < 1</code> find <code>k</code>
+ such that:</p>
+
+ <p class="filterformula">k/n <= C < (k+1)/n</p>
+
+ <p>The result <code>C'</code> is given by:</p>
+
+ <p class="filterformula">C' = v<sub>k</sub> + (C -
+ k/n)*n * (v<sub>k+1</sub> - v<sub>k</sub>)</p>
+
+ <p>If <code>C = 1</code> then:</p>
+
+ <p class="filterformula">C' = v<sub>n</sub>.</p>
+
+ </li>
+ <li>
+ For <span class="attr-value">discrete</span>, the
+ function is defined by the step function given in the
+ attribute <a>'tableValues'</a>, which
+ provides a list of <em>n</em> values (i.e.,
+ v<sub>0</sub> to v<sub>n-1</sub>) in order to
+ identify a step function consisting of <em>n</em>
+ steps. The step function is defined by the following
+ formula:
+
+ <p>For a value <code>C < 1</code> find <code>k</code>
+ such that:</p>
+
+ <p class="filterformula">k/n <= C < (k+1)/n</p>
+
+ <p>The result <code>C'</code> is given by:</p>
+
+
+ <p class="filterformula">C' = v<sub>k</sub></p>
+ <p>If <code>C = 1</code> then:</p>
+
+ <p class="filterformula">C' = v<sub>n-1</sub>.</p>
+
+ </li>
+ <li>
+ For <span class="attr-value">linear</span>, the
+ function is defined by the following linear equation:
+
+ <p class="filterformula">C' = <a
+ href="filters.html#feComponentTransferSlopeAttribute">
+ <span class="attr-name">slope</span></a> * C + <a
+ href="filters.html#feComponentTransferInterceptAttribute">
+ <span class="attr-name">intercept</span></a></p>
+ </li>
+ <li>
+ For <span class="attr-value">gamma</span>, the
+ function is defined by the following exponential
+ function:
+ <p class="filterformula">C' = <a
+ href="filters.html#feComponentTransferAmplitudeAttribute">
+ <span class="attr-name">amplitude</span></a> * pow(C,
+ <a
+ href="filters.html#feComponentTransferExponentAttribute">
+ <span class="attr-name">exponent</span></a>) + <a
+ href="filters.html#feComponentTransferOffsetAttribute">
+ <span class="attr-name">offset</span></a></p>
+ </li>
+ </ul>
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </dd>
+ <dt id="feComponentTransferTableValuesAttribute"><span
+ class="adef">tableValues</span> = "<em>(list of <a
+ href="types.html#DataTypeNumber"><number></a>s)</em>"</dt>
+ <dd>When <span class="attr-value">type="table"</span>, the
+ list of <a
+ href="types.html#DataTypeNumber"><number></a>s
+ <em>v0,v1,...vn</em>, separated by white space and/or a
+ comma, which define the lookup table. An empty list results
+ in an identity transfer function.
+ If the attribute is not
+ specified, then the effect is as if an empty list were
+ provided.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feComponentTransferSlopeAttribute"><span
+ class="adef">slope</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>When <span class="attr-value">type="linear"</span>, the
+ slope of the linear function.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feComponentTransferInterceptAttribute"><span
+ class="adef">intercept</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>When <span class="attr-value">type="linear"</span>, the
+ intercept of the linear function.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feComponentTransferAmplitudeAttribute"><span
+ class="adef">amplitude</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>When <span class="attr-value">type="gamma"</span>, the
+ amplitude of the gamma function.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feComponentTransferExponentAttribute"><span
+ class="adef">exponent</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>When <span class="attr-value">type="gamma"</span>, the
+ exponent of the gamma function.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feComponentTransferOffsetAttribute"><span
+ class="adef">offset</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>When <span class="attr-value">type="gamma"</span>, the
+ offset of the gamma function.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<p><span class="example-ref">Example feComponentTransfer</span> shows
+examples of the four types of feComponentTransfer operations.</p>
+
+<edit:example href='images/filters/feComponentTransfer.svg' name='feComponentTransfer' description='Examples of feComponentTransfer operations' image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="feCompositeElement">Filter primitive <span class="element-name">'feComposite'</span></h2>
+
+<edit:with element='feComposite'>
+
+ <p>This filter performs the combination of the two input images
+ pixel-wise in image space using one of the Porter-Duff [<a
+ href="refs.html#ref-PORTERDUFF">PORTERDUFF</a>] compositing
+ operations: <em>over, in, atop, out, xor</em> [<a
+ href="refs.html#ref-SVG-COMPOSITING">SVG-COMPOSITING</a>]. Additionally, a
+ component-wise <em>arithmetic</em> operation (with the result
+ clamped between [0..1]) can be applied.</p>
+ <p>The <em>arithmetic</em> operation is useful for combining
+ the output from the <a>'feDiffuseLighting'</a> and <a>'feSpecularLighting'</a> filters
+ with texture data. It is also useful for implementing
+ <em>dissolve</em>. If the <em>arithmetic</em> operation is
+ chosen, each result pixel is computed using the following
+ formula:</p>
+<pre>
+result = k1*i1*i2 + k2*i1 + k3*i2 + k4
+</pre>
+where:
+ <ul>
+ <li>
+ <code>i1</code> and <code>i2</code> indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively
+ </li>
+ <li>
+ <code>k1, k2, k3</code> and <code>k4</code> indicate the values of the attributes with the same name
+ </li>
+ </ul>
+ <p>For this filter primitive, the extent of the resulting image
+ might grow as described in the section that describes the <a
+ href="filters.html#FilterPrimitiveSubRegion">filter primitive
+ subregion</a>.</p>
+
+<edit:elementsummary name='feComposite'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feCompositeOperatorAttribute"><span
+ class="adef">operator</span> = "<em>over | in | out | atop
+ | xor | arithmetic</em>"</dt>
+ <dd>The compositing operation that is to be performed. All
+ of the <a>'operator'</a> types except
+ <span class="attr-value">arithmetic</span> match the
+ corresponding operation as described in [<a
+ href="refs.html#ref-PORTERDUFF">PORTERDUFF</a>]. The <span
+ class="attr-value">arithmetic</span> operator is described
+ above. If attribute <a>'operator'</a> is not specified, then the effect is as if a value of <span class="attr-value">over</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feCompositeK1Attribute"><span
+ class="adef">k1</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Only applicable if <span
+ class="attr-value">operator="arithmetic"</span>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">0</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feCompositeK2Attribute"><span
+ class="adef">k2</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Only applicable if <span
+ class="attr-value">operator="arithmetic"</span>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">0</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feCompositeK3Attribute"><span
+ class="adef">k3</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Only applicable if <span
+ class="attr-value">operator="arithmetic"</span>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">0</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feCompositeK4Attribute"><span
+ class="adef">k4</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Only applicable if <span
+ class="attr-value">operator="arithmetic"</span>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">0</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feCompositeIn2Attribute"><span
+ class="adef">in2</span> = "<em>(see <a>'in'</a> attribute)</em>"</dt>
+ <dd>The second input image to the compositing operation.
+ This attribute can take on the same values as the <a>'in'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p><span class="example-ref">Example feComposite</span> shows
+ examples of the six types of feComposite operations. It also
+ shows two different techniques to using the <a
+ href="#BackgroundImage">BackgroundImage</a> as part of the
+ compositing operation.</p>
+ <p>The first two rows render bluish triangles into the
+ background. A filter is applied which composites reddish
+ triangles into the bluish triangles using one of the
+ compositing operations. The result from compositing is drawn
+ onto an opaque white temporary surface, and then that result is
+ written to the canvas. (The opaque white temporary surface
+ obliterates the original bluish triangle.)</p>
+ <p>The last two rows apply the same compositing operations of
+ reddish triangles into bluish triangles. However, the
+ compositing result is directly blended into the canvas (the
+ opaque white temporary surface technique is not used). In some
+ cases, the results are different than when a temporary opaque
+ white surface is used. The original bluish triangle from the
+ background shines through wherever the compositing operation
+ results in completely transparent pixel. In other cases, the
+ result from compositing is blended into the bluish triangle,
+ resulting in a different final color value.</p>
+
+<edit:example href='images/filters/feComposite.svg' name='feComposite' description='Examples of feComposite operations' image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="feConvolveMatrixElement">Filter primitive <span class="element-name">'feConvolveMatrix'</span></h2>
+
+<edit:with element='feConvolveMatrix'>
+
+ <p>feConvolveMatrix applies a matrix convolution filter effect.
+ A convolution combines pixels in the input image with
+ neighboring pixels to produce a resulting image. A wide variety
+ of imaging operations can be achieved through convolutions,
+ including blurring, edge detection, sharpening, embossing and
+ beveling.</p>
+ <p>A matrix convolution is based on an n-by-m matrix (the
+ convolution kernel) which describes how a given pixel value in
+ the input image is combined with its neighboring pixel values
+ to produce a resulting pixel value. Each result pixel is
+ determined by applying the kernel matrix to the corresponding
+ source pixel and its neighboring pixels. The basic convolution
+ formula which is applied to each color value for a given pixel
+ is:</p>
+ <p class="filterformula" id="feConvolveMatrixElementFormula">
+ COLOR<sub>X,Y</sub> = ( <br />
+ SUM
+ <sub>I=0 to [<a
+ href="filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { <br />
+ SUM
+ <sub>J=0 to [<a
+ href="filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { <br />
+ SOURCE
+ <sub>X-<a
+ href="filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a
+ href="filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> *
+ <a
+ href="filters.html#feConvolveMatrixElementKernelMatrixAttribute">
+ kernelMatrix</a><sub><a
+ href="filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1,
+ <a
+ href="filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> <br />
+ } <br />
+ } <br />
+ ) /
+ <a
+ href="filters.html#feConvolveMatrixElementDivisorAttribute">divisor</a> +
+ <a href="filters.html#feConvolveMatrixElementBiasAttribute">bias</a> * ALPHA<sub>X,Y</sub>
+ <br />
+ </p>
+ <p>where "orderX" and "orderY" represent the X and Y values for
+ the <a>'order'</a> attribute, "targetX"
+ represents the value of the <a>'targetX'</a> attribute, "targetY"
+ represents the value of the <a>'targetY'</a> attribute, "kernelMatrix"
+ represents the value of the <a>'kernelMatrix'</a> attribute,
+ "divisor" represents the value of the <a>'divisor'</a> attribute, and "bias"
+ represents the value of the <a>'bias'</a> attribute.</p>
+ <p>Note in the above formulas that the values in the kernel
+ matrix are applied such that the kernel matrix is rotated 180
+ degrees relative to the source and destination images in order
+ to match convolution theory as described in many computer
+ graphics textbooks.</p>
+ <p>To illustrate, suppose you have a input image which is 5
+ pixels by 5 pixels, whose color values for one of the color
+ channels are as follows:</p>
+<pre>
+ 0 20 40 235 235
+ 100 120 140 235 235
+ 200 220 240 235 235
+ 225 225 255 255 255
+ 225 225 255 255 255
+</pre>
+ <p>and you define a 3-by-3 convolution kernel as follows:</p>
+<pre>
+ 1 2 3
+ 4 5 6
+ 7 8 9
+</pre>
+ <p>Let's focus on the color value at the second row and second
+ column of the image (source pixel value is 120). Assuming the
+ simplest case (where the input image's pixel grid aligns
+ perfectly with the kernel's pixel grid) and assuming default
+ values for attributes <a>'divisor'</a>,
+ <a>'targetX'</a> and <a>'targetY'</a>, then resulting color value
+ will be:</p>
+<pre>
+(9* 0 + 8* 20 + 7* 40 +
+6*100 + 5*120 + 4*140 +
+3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)
+</pre>
+ <p>Because they operate on pixels, matrix convolutions are
+ inherently resolution-dependent. To make <a>'feConvolveMatrix'</a> produce
+ resolution-independent results, an explicit value should be
+ provided for either the <a>'filter/filterRes'</a> attribute on the <a>'filter element'</a> element and/or
+ attribute <a>'kernelUnitLength'</a>.</p>
+ <p><a>'kernelUnitLength'</a>, in
+ combination with the other attributes, defines an implicit
+ pixel grid in the filter effects coordinate system (i.e., the
+ coordinate system established by the <a>'filter/primitiveUnits'</a> attribute). If the
+ pixel grid established by <a>'kernelUnitLength'</a> is not
+ scaled to match the pixel grid established by attribute <a>'filter/filterRes'</a> (implicitly or
+ explicitly), then the input image will be temporarily rescaled
+ to match its pixels with <a>'kernelUnitLength'</a>. The
+ convolution happens on the resampled image. After applying the
+ convolution, the image is resampled back to the original
+ resolution.</p>
+ <p>When the image must be resampled to match the coordinate
+ system defined by <a>'kernelUnitLength'</a> prior to
+ convolution, or resampled to match the device coordinate system
+ after convolution, it is recommended that <a
+ href="conform.html#ConformingHighQualitySVGViewers">high
+ quality viewers</a> make use of appropriate interpolation
+ techniques, for example bilinear or bicubic. Depending on the
+ speed of the available interpolents, this choice may be
+ affected by the <a>'image-rendering'</a> property
+ setting. Note that implementations might choose approaches that
+ minimize or eliminate resampling when not necessary to produce
+ proper results, such as when the document is zoomed out such
+ that <a>'kernelUnitLength'</a> is
+ considerably smaller than a device pixel.</p>
+
+<edit:elementsummary name='feConvolveMatrix'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feConvolveMatrixElementOrderAttribute"><span
+ class="adef">order</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></span>"</dt>
+ <dd>Indicates the number of cells in each dimension for
+ <a>'kernelMatrix'</a>. The values
+ provided must be <a
+ href="types.html#DataTypeInteger"><integer></a>s
+ greater than zero. The first number, <orderX>,
+ indicates the number of columns in the matrix. The second
+ number, <orderY>, indicates the number of rows in the
+ matrix. If <orderY> is not provided, it defaults to
+ <orderX>.<br />
+ A typical value is order="3". It is recommended that only
+ small values (e.g., 3) be used; higher values may result in
+ very high CPU overhead and usually do not produce results
+ that justify the impact on performance.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">3</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feConvolveMatrixElementKernelMatrixAttribute">
+ <span class="adef">kernelMatrix</span> = "<span
+ class="attr-value"><list of numbers></span>"</dt>
+ <dd>The list of <a
+ href="types.html#DataTypeNumber"><number></a>s that
+ make up the kernel matrix for the convolution. Values are
+ separated by space characters and/or a comma. The number of
+ entries in the list must equal <orderX> times
+ <orderY>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feConvolveMatrixElementDivisorAttribute"><span
+ class="adef">divisor</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>After applying the <a>'kernelMatrix'</a> to the input image to
+ yield a number, that number is divided by <a>'divisor'</a> to yield the final
+ destination color value. A divisor that is the sum of all
+ the matrix values tends to have an evening effect on the
+ overall color intensity of the result. It is an error to
+ specify a divisor of zero. The default value is the sum of
+ all values in kernelMatrix, with the exception that if the
+ sum is zero, then the divisor is set to 1.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feConvolveMatrixElementBiasAttribute"><span
+ class="adef">bias</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>After applying the <a>'kernelMatrix'</a> to the input image to
+ yield a number and applying the <a>'divisor'</a>, the <a>'bias'</a> attribute is added to each
+ component. One application of <a>'bias'</a> is when it is desirable to
+ have .5 gray value be the zero response of the filter. The bias property shifts
+ the range of the filter. This allows representation of values that would
+ otherwise be clamped to 0 or 1. If <a>'bias'</a> is not specified, then
+ the effect is as if a value of <span class="attr-value">0</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feConvolveMatrixElementTargetXAttribute"><span
+ class="adef">targetX</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeInteger"><integer></a></span>"</dt>
+ <dd>Determines the positioning in X of the convolution
+ matrix relative to a given target pixel in the input image.
+ The leftmost column of the matrix is column number zero.
+ The value must be such that: 0 <= targetX < orderX.
+ By default, the convolution matrix is centered in X over
+ each pixel of the input image (i.e., targetX = floor (
+ orderX / 2 )).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feConvolveMatrixElementTargetYAttribute"><span
+ class="adef">targetY</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeInteger"><integer></a></span>"</dt>
+ <dd>Determines the positioning in Y of the convolution
+ matrix relative to a given target pixel in the input image.
+ The topmost row of the matrix is row number zero. The value
+ must be such that: 0 <= targetY < orderY. By default,
+ the convolution matrix is centered in Y over each pixel of
+ the input image (i.e., targetY = floor ( orderY / 2
+ )).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feConvolveMatrixElementEdgeModeAttribute"><span
+ class="adef">edgeMode</span> = "<span
+ class="attr-value">duplicate | wrap | none</span>"</dt>
+ <dd>
+ <p>Determines how to extend the input image as necessary
+ with color values so that the matrix operations can be
+ applied when the kernel is positioned at or near the edge
+ of the input image.</p>
+ <p>"duplicate" indicates that the input image is extended
+ along each of its borders as necessary by duplicating the
+ color values at the given edge of the input image.</p>
+<pre>
+Original N-by-M image, where m=M-1 and n=N-1:
+ 11 12 ... 1m 1M
+ 21 22 ... 2m 2M
+ .. .. ... .. ..
+ n1 n2 ... nm nM
+ N1 N2 ... Nm NM
+Extended by two pixels using "duplicate":
+ 11 11 11 12 ... 1m 1M 1M 1M
+ 11 11 11 12 ... 1m 1M 1M 1M
+ 11 11 11 12 ... 1m 1M 1M 1M
+ 21 21 21 22 ... 2m 2M 2M 2M
+ .. .. .. .. ... .. .. .. ..
+ n1 n1 n1 n2 ... nm nM nM nM
+ N1 N1 N1 N2 ... Nm NM NM NM
+ N1 N1 N1 N2 ... Nm NM NM NM
+ N1 N1 N1 N2 ... Nm NM NM NM
+</pre>
+ <p>"wrap" indicates that the input image is extended by
+ taking the color values from the opposite edge of the
+ image.</p>
+<pre>
+Extended by two pixels using "wrap":
+ nm nM n1 n2 ... nm nM n1 n2
+ Nm NM N1 N2 ... Nm NM N1 N2
+ 1m 1M 11 12 ... 1m 1M 11 12
+ 2m 2M 21 22 ... 2m 2M 21 22
+ .. .. .. .. ... .. .. .. ..
+ nm nM n1 n2 ... nm nM n1 n2
+ Nm NM N1 N2 ... Nm NM N1 N2
+ 1m 1M 11 12 ... 1m 1M 11 12
+ 2m 2M 21 22 ... 2m 2M 21 22
+</pre>
+ <p>"none" indicates that the input image is extended with
+ pixel values of zero for R, G, B and A.</p>
+ <p>
+ If attribute <a>'edgeMode'</a> is not specified, then the effect is as if a value of <span class="attr-value">duplicate</span> were specified.
+ </p>
+ <p><span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></p>
+ </dd>
+ <dt><a
+ id="feConvolveMatrixElementKernelUnitLengthAttribute"
+ name="feConvolveMatrixElementKernelUnitLengthAttribute"></a>
+ <span class="adef">kernelUnitLength</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></span>"</dt>
+ <dd>The first number is the <dx> value. The second
+ number is the <dy> value. If the <dy> value is
+ not specified, it defaults to the same value as <dx>.
+ Indicates the intended distance in current filter units
+ (i.e., units as determined by the value of attribute <a>'filter/primitiveUnits'</a>) between
+ successive columns and rows, respectively, in the <a>'kernelMatrix'</a>. By specifying
+ value(s) for <a>'kernelUnitLength'</a>, the kernel
+ becomes defined in a scalable, abstract coordinate system.
+ If <a>'kernelUnitLength'</a> is not
+ specified, the default value is one pixel in the offscreen
+ bitmap, which is a pixel-based coordinate system, and thus
+ potentially not scalable. For some level of consistency
+ across display media and user agents, it is necessary that
+ a value be provided for at least one of <a>'filter/filterRes'</a> and <a>'kernelUnitLength'</a>. In some
+ implementations, the most consistent results and the
+ fastest performance will be achieved if the pixel grid of
+ the temporary offscreen images aligns with the pixel grid
+ of the kernel.<br />
+ A negative or zero value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feConvolveMatrixElementPreserveAlphaAttribute">
+ <span class="adef">preserveAlpha</span> = "<span
+ class="attr-value">false | true</span>"</dt>
+ <dd>A value of <span class="attr-value">false</span>
+ indicates that the convolution will apply to all channels,
+ including the alpha channel. In this case the <code>ALPHA<sub>X,Y</sub></code>
+ of the <a href="#feConvolveMatrixElementFormula">convolution formula</a> for a given pixel is:
+
+ <p class="filterformula">
+ ALPHA<sub>X,Y</sub> = ( <br />
+ SUM
+ <sub>I=0 to [<a
+ href="filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { <br />
+ SUM
+ <sub>J=0 to [<a
+ href="filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { <br />
+ SOURCE
+ <sub>X-<a
+ href="filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a
+ href="filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> *
+ <a
+ href="filters.html#feConvolveMatrixElementKernelMatrixAttribute">
+ kernelMatrix</a><sub><a
+ href="filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1,
+ <a
+ href="filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> <br />
+ } <br />
+ } <br />
+ ) /
+ <a
+ href="filters.html#feConvolveMatrixElementDivisorAttribute">divisor</a> +
+ <a href="filters.html#feConvolveMatrixElementBiasAttribute">bias</a>
+ <br />
+ </p>
+
+ <br />
+ A value of <span class="attr-value">true</span> indicates
+ that the convolution will only apply to the color channels.
+ In this case, the filter will temporarily unpremultiply the
+ color component values, apply the kernel, and then
+ re-premultiply at the end. In this case the <code>ALPHA<sub>X,Y</sub></code>
+ of the <a href="#feConvolveMatrixElementFormula">convolution formula</a> for a given pixel is:
+ <p class="filterformula">
+ ALPHA<sub>X,Y</sub> = SOURCE<sub>X,Y</sub>
+ <br />
+ </p>
+ If <a>'preserveAlpha'</a> is not
+ specified, then the effect is as if a value of <span
+ class="attr-value">false</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h2 id="feDiffuseLightingElement">Filter primitive <span class="element-name">'feDiffuseLighting'</span></h2>
+
+<edit:with element='feDiffuseLighting'>
+
+ <p>This filter primitive lights an image using the alpha
+ channel as a bump map. The resulting image is an RGBA opaque
+ image based on the light color with alpha = 1.0 everywhere. The
+ lighting calculation follows the standard diffuse component of
+ the Phong lighting model. The resulting image depends on the
+ light color, light position and surface geometry of the input
+ bump map.</p>
+ <p>The light map produced by this filter primitive can be
+ combined with a texture image using the multiply term of the
+ <em>arithmetic</em> <a>'feComposite'</a> compositing
+ method. Multiple light sources can be simulated by adding
+ several of these light maps together before applying it to the
+ texture image.</p>
+ <p>The formulas below make use of 3x3 filters. Because they
+ operate on pixels, such filters are inherently
+ resolution-dependent. To make <a>'feDiffuseLighting'</a> produce
+ resolution-independent results, an explicit value should be
+ provided for either the <a>'filter/filterRes'</a> attribute on the <a>'filter element'</a> element and/or
+ attribute <a>'kernelUnitLength'</a>.</p>
+ <p><a>'kernelUnitLength'</a>, in combination
+ with the other attributes, defines an implicit pixel grid in
+ the filter effects coordinate system (i.e., the coordinate
+ system established by the <a>'filter/primitiveUnits'</a> attribute). If the
+ pixel grid established by <a>'kernelUnitLength'</a> is not scaled to
+ match the pixel grid established by attribute <a>'filter/filterRes'</a> (implicitly or
+ explicitly), then the input image will be temporarily rescaled
+ to match its pixels with <a>'kernelUnitLength'</a>. The 3x3 filters
+ are applied to the resampled image. After applying the filter,
+ the image is resampled back to its original resolution.</p>
+ <p>When the image must be resampled, it is recommended that <a
+ href="conform.html#ConformingHighQualitySVGViewers">high
+ quality viewers</a> make use of appropriate interpolation
+ techniques, for example bilinear or bicubic. Depending on the
+ speed of the available interpolents, this choice may be
+ affected by the <a>'image-rendering'</a> property
+ setting. Note that implementations might choose approaches that
+ minimize or eliminate resampling when not necessary to produce
+ proper results, such as when the document is zoomed out such
+ that <a>'kernelUnitLength'</a> is
+ considerably smaller than a device pixel.</p>
+ <p>For the formulas that follow, the
+ <code>Norm(A<sub>x</sub>,A<sub>y</sub>,A<sub>z</sub>)</code>
+ function is defined as:</p>
+ <p class="filterformula">
+ Norm(A<sub>x</sub>,A<sub>y</sub>,A<sub>z</sub>) =
+ sqrt(A<sub>x</sub>^2+A<sub>y</sub>^2+A<sub>z</sub>^2)</p>
+ <p>The resulting RGBA image is computed as follows:</p>
+ <p class="filterformula">D<sub>r</sub> = k<sub>d</sub> * N.L *
+ L<sub>r</sub><br />
+ D<sub>g</sub> = k<sub>d</sub> * N.L * L<sub>g</sub><br />
+ D<sub>b</sub> = k<sub>d</sub> * N.L * L<sub>b</sub><br />
+ D<sub>a</sub> = 1.0</p>
+ <p>where</p>
+ <dl>
+ <dd>k<sub>d</sub> = diffuse lighting constant<br />
+ N = surface normal unit vector, a function of x and y<br />
+ L = unit vector pointing from surface to light, a function
+ of x and y in the point and spot light cases<br />
+ L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub> = RGB components
+ of light, a function of x and y in the spot light case</dd>
+ </dl>
+ <p>N is a function of x and y and depends on the surface
+ gradient as follows:</p>
+ <p>The surface described by the input alpha image
+ I(x,y) is:</p>
+ <p class="filterformula">Z (x,y) = surfaceScale *
+ I(x,y)</p>
+
+ <p id="SurfaceNormalCalculations">Surface normal is calculated using the Sobel gradient 3x3
+ filter. Different filter kernels are used depending on whether
+ the given pixel is on the interior or an edge. For each case,
+ the formula is:</p>
+ <p class="filterformula">N<sub>x</sub> (x,y)= - surfaceScale *
+ FACTOR<sub>x</sub> *<br />
+ (K<sub>x</sub>(0,0)*I(x-dx,y-dy) +
+ K<sub>x</sub>(1,0)*I(x,y-dy) +
+ K<sub>x</sub>(2,0)*I(x+dx,y-dy) +<br />
+ K<sub>x</sub>(0,1)*I(x-dx,y) +
+ K<sub>x</sub>(1,1)*I(x,y) +
+ K<sub>x</sub>(2,1)*I(x+dx,y) +<br />
+ K<sub>x</sub>(0,2)*I(x-dx,y+dy) +
+ K<sub>x</sub>(1,2)*I(x,y+dy) +
+ K<sub>x</sub>(2,2)*I(x+dx,y+dy))<br />
+ N<sub>y</sub> (x,y)= - surfaceScale * FACTOR<sub>y</sub>
+ *<br />
+ (K<sub>y</sub>(0,0)*I(x-dx,y-dy) +
+ K<sub>y</sub>(1,0)*I(x,y-dy) +
+ K<sub>y</sub>(2,0)*I(x+dx,y-dy) +<br />
+ K<sub>y</sub>(0,1)*I(x-dx,y) +
+ K<sub>y</sub>(1,1)*I(x,y) +
+ K<sub>y</sub>(2,1)*I(x+dx,y) +<br />
+ K<sub>y</sub>(0,2)*I(x-dx,y+dy) +
+ K<sub>y</sub>(1,2)*I(x,y+dy) +
+ K<sub>y</sub>(2,2)*I(x+dx,y+dy))<br />
+ N<sub>z</sub> (x,y) = 1.0<br />
+ <br />
+ N = (N<sub>x</sub>, N<sub>y</sub>, N<sub>z</sub>) /
+ Norm((N<sub>x</sub>,N<sub>y</sub>,N<sub>z</sub>))</p>
+ <p>In these formulas, the <code>dx</code> and <code>dy</code>
+ values (e.g., <code>I(x-dx,y-dy)</code>), represent deltas
+ relative to a given <code>(x,y)</code> position for the purpose
+ of estimating the slope of the surface at that point. These
+ deltas are determined by the value (explicit or implicit) of
+ attribute <a>'kernelUnitLength'</a>.</p>
+ <table summary="feDiffuseLighting formulas" border="1">
+ <colgroup>
+ <col width="33.3%" />
+ <col width="33.3%" />
+ <col width="*" />
+ </colgroup>
+ <tr>
+ <td>
+ <p>Top/left corner:</p>
+ <p class="filterformula">
+ FACTOR<sub>x</sub>=2/(3*dx)<br />
+ K<sub>x</sub> =<br />
+ | 0 0 0 |<br />
+ | 0 -2 2 |<br />
+ | 0 -1 1 |<br />
+ <br />
+ FACTOR<sub>y</sub>=2/(3*dy)<br />
+ K<sub>y</sub> = <br />
+ | 0 0 0 |<br />
+ | 0 -2 -1 |<br />
+ | 0 2 1 |</p>
+ </td>
+ <td>
+ <p>Top row:</p>
+ <p class="filterformula">
+ FACTOR<sub>x</sub>=1/(3*dx)<br />
+ K<sub>x</sub> =<br />
+ | 0 0 0 |<br />
+ | -2 0 2 |<br />
+ | -1 0 1 |<br />
+ <br />
+ FACTOR<sub>y</sub>=1/(2*dy)<br />
+ K<sub>y</sub> = <br />
+ | 0 0 0 |<br />
+ | -1 -2 -1 |<br />
+ | 1 2 1 |</p>
+ </td>
+ <td>
+ <p>Top/right corner:</p>
+ <p class="filterformula">
+ FACTOR<sub>x</sub>=2/(3*dx)<br />
+ K<sub>x</sub> =<br />
+ | 0 0 0 |<br />
+ | -2 2 0 |<br />
+ | -1 1 0 |<br />
+ <br />
+ FACTOR<sub>y</sub>=2/(3*dy)<br />
+ K<sub>y</sub> = <br />
+ | 0 0 0 |<br />
+ | -1 -2 0 |<br />
+ | 1 2 0 |</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <p>Left column:</p>
+ <p class="filterformula">
+ FACTOR<sub>x</sub>=1/(2*dx)<br />
+ K<sub>x</sub> =<br />
+ | 0 -1 1 |<br />
+ | 0 -2 2 |<br />
+ | 0 -1 1 |<br />
+ <br />
+ FACTOR<sub>y</sub>=1/(3*dy)<br />
+ K<sub>y</sub> = <br />
+ | 0 -2 -1 |<br />
+ | 0 0 0 |<br />
+ | 0 2 1 |</p>
+ </td>
+ <td>
+ <p>Interior pixels:</p>
+ <p class="filterformula">
+ FACTOR<sub>x</sub>=1/(4*dx)<br />
+ K<sub>x</sub> =<br />
+ | -1 0 1 |<br />
+ | -2 0 2 |<br />
+ | -1 0 1 |<br />
+ <br />
+ FACTOR<sub>y</sub>=1/(4*dy)<br />
+ K<sub>y</sub> = <br />
+ | -1 -2 -1 |<br />
+ | 0 0 0 |<br />
+ | 1 2 1 |</p>
+ </td>
+ <td>
+ <p>Right column:</p>
+ <p class="filterformula">
+ FACTOR<sub>x</sub>=1/(2*dx)<br />
+ K<sub>x</sub> =<br />
+ | -1 1 0|<br />
+ | -2 2 0|<br />
+ | -1 1 0|<br />
+ <br />
+ FACTOR<sub>y</sub>=1/(3*dy)<br />
+ K<sub>y</sub> = <br />
+ | -1 -2 0 |<br />
+ | 0 0 0 |<br />
+ | 1 2 0 |</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <p>Bottom/left corner:</p>
+ <p class="filterformula">
+ FACTOR<sub>x</sub>=2/(3*dx)<br />
+ K<sub>x</sub> =<br />
+ | 0 -1 1 |<br />
+ | 0 -2 2 |<br />
+ | 0 0 0 |<br />
+ <br />
+ FACTOR<sub>y</sub>=2/(3*dy)<br />
+ K<sub>y</sub> = <br />
+ | 0 -2 -1 |<br />
+ | 0 2 1 |<br />
+ | 0 0 0 |</p>
+ </td>
+ <td>
+ <p>Bottom row:</p>
+ <p class="filterformula">
+ FACTOR<sub>x</sub>=1/(3*dx)<br />
+ K<sub>x</sub> =<br />
+ | -1 0 1 |<br />
+ | -2 0 2 |<br />
+ | 0 0 0 |<br />
+ <br />
+ FACTOR<sub>y</sub>=1/(2*dy)<br />
+ K<sub>y</sub> = <br />
+ | -1 -2 -1 |<br />
+ | 1 2 1 |<br />
+ | 0 0 0 |</p>
+ </td>
+ <td>
+ <p>Bottom/right corner:</p>
+ <p class="filterformula">
+ FACTOR<sub>x</sub>=2/(3*dx)<br />
+ K<sub>x</sub> =<br />
+ | -1 1 0 |<br />
+ | -2 2 0 |<br />
+ | 0 0 0 |<br />
+ <br />
+ FACTOR<sub>y</sub>=2/(3*dy)<br />
+ K<sub>y</sub> = <br />
+ | -1 -2 0 |<br />
+ | 1 2 0 |<br />
+ | 0 0 0 |</p>
+ </td>
+ </tr>
+ </table>
+ <p>L, the unit vector from the image sample to the light, is
+ calculated as follows:</p>
+ <p>For Infinite light sources it is constant:</p>
+ <p class="filterformula">L<sub>x</sub> =
+ cos(azimuth)*cos(elevation)<br />
+ L<sub>y</sub> = sin(azimuth)*cos(elevation)<br />
+ L<sub>z</sub> = sin(elevation)</p>
+ <p>For Point and spot lights it is a function of position:</p>
+ <p class="filterformula">L<sub>x</sub> = Light<sub>x</sub> -
+ x<br />
+ L<sub>y</sub> = Light<sub>y</sub> - y<br />
+ L<sub>z</sub> = Light<sub>z</sub> - Z(x,y)<br />
+ <br />
+ L = (L<sub>x</sub>, L<sub>y</sub>, L<sub>z</sub>) /
+ Norm(L<sub>x</sub>, L<sub>y</sub>, L<sub>z</sub>)</p>
+ <p>where Light<sub>x</sub>, Light<sub>y</sub>, and
+ Light<sub>z</sub> are the input light position.</p>
+ <p>L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub>, the light color
+ vector, is a function of position in the spot light case
+ only:</p>
+ <p class="filterformula">L<sub>r</sub> =
+ Light<sub>r</sub>*pow((-L.S),specularExponent)<br />
+ L<sub>g</sub> =
+ Light<sub>g</sub>*pow((-L.S),specularExponent)<br />
+ L<sub>b</sub> =
+ Light<sub>b</sub>*pow((-L.S),specularExponent)</p>
+ <p>where S is the unit vector pointing from the light to the
+ point (pointsAtX, pointsAtY, pointsAtZ) in the x-y plane:</p>
+ <p class="filterformula">S<sub>x</sub> = pointsAtX -
+ Light<sub>x</sub><br />
+ S<sub>y</sub> = pointsAtY - Light<sub>y</sub><br />
+ S<sub>z</sub> = pointsAtZ - Light<sub>z</sub><br />
+ <br />
+ S = (S<sub>x</sub>, S<sub>y</sub>, S<sub>z</sub>) /
+ Norm(S<sub>x</sub>, S<sub>y</sub>, S<sub>z</sub>)</p>
+ <p>If L.S is positive, no light is present. (L<sub>r</sub> =
+ L<sub>g</sub> = L<sub>b</sub> = 0). If <a>'feSpotLight/limitingConeAngle'</a> is specified, -L.S < cos(limitingConeAngle) also indicates that no light is present.</p>
+
+<edit:elementsummary name='feDiffuseLighting'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feDiffuseLightingSurfaceScaleAttribute"><span
+ class="adef">surfaceScale</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>height of surface when A<sub>in</sub> = 1.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feDiffuseLightingDiffuseConstantAttribute"><span
+ class="adef">diffuseConstant</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>kd in Phong lighting model. In SVG, this can be any
+ non-negative number.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feDiffuseLightingKernelUnitLengthAttribute">
+ <span class="adef">kernelUnitLength</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></span>"</dt>
+ <dd>The first number is the <dx> value. The second
+ number is the <dy> value. If the <dy> value is
+ not specified, it defaults to the same value as <dx>.
+ Indicates the intended distance in current filter units
+ (i.e., units as determined by the value of attribute <a>'filter/primitiveUnits'</a>) for
+ <code>dx</code> and <code>dy</code>, respectively, in the
+ <a href="filters.html#SurfaceNormalCalculations">surface
+ normal calculation formulas</a>. By specifying value(s) for
+ <a>'kernelUnitLength'</a>, the kernel
+ becomes defined in a scalable, abstract coordinate system.
+ If <a>'kernelUnitLength'</a> is not
+ specified, the <code>dx</code> and <code>dy</code> values
+ should represent very small deltas relative to a given
+ <code>(x,y)</code> position, which might be implemented in
+ some cases as one pixel in the intermediate image offscreen
+ bitmap, which is a pixel-based coordinate system, and thus
+ potentially not scalable. For some level of consistency
+ across display media and user agents, it is necessary that
+ a value be provided for at least one of <a>'filter/filterRes'</a> and <a>'kernelUnitLength'</a>. Discussion of
+ intermediate images are in the <a
+ href="filters.html#Introduction">Introduction</a> and in
+ the description of attribute <a>'filter/filterRes'</a>.<br />
+ A negative or zero value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p>The light source is defined by one of the child elements <a>'feDistantLight'</a>, <a>'fePointLight'</a> or <a>'feSpotLight'</a>. The light color
+ is specified by property <a>'lighting-color'</a>.</p>
+
+</edit:with>
+
+<h2 id="feDisplacementMapElement">Filter primitive <span class="element-name">'feDisplacementMap'</span></h2>
+
+<edit:with element='feDisplacementMap'>
+
+ <p>This filter primitive uses the pixels values from the image
+ from <a>'in2'</a> to spatially displace the
+ image from <a>'in'</a>. This is the transformation to
+ be performed:</p>
+<pre>
+P'(x,y) <- P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))
+</pre>
+ <p>where P(x,y) is the input image, <a>'in'</a>, and P'(x,y) is the
+ destination. XC(x,y) and YC(x,y) are the component values of
+ the channel designated by the <em>xChannelSelector</em> and
+ <em>yChannelSelector</em>. For example, to use the R component
+ of <a>'in2'</a> to control displacement in x
+ and the G component of Image2 to control displacement in y, set
+ <em>xChannelSelector</em> to "R" and <em>yChannelSelector</em>
+ to "G".</p>
+ <p>The displacement map defines the inverse of the mapping
+ performed.</p>
+ <p>The input image in is to remain premultiplied for this filter primitive. The calculations using the pixel values from <a>'in2'</a> are performed using non-premultiplied color values. If the image from <a>'in2'</a> consists of premultiplied color values, those values are automatically converted into non-premultiplied color values before performing this operation.</p>
+ <p>This filter can have arbitrary non-localized effect on the
+ input which might require substantial buffering in the
+ processing pipeline. However with this formulation, any
+ intermediate buffering needs can be determined by
+ <em>scale</em> which represents the maximum range of
+ displacement in either x or y.</p>
+ <p>When applying this filter, the source pixel location will
+ often lie between several source pixels. In this case it is
+ recommended that <a
+ href="conform.html#ConformingHighQualitySVGViewers">high
+ quality viewers</a> apply an interpolent on the surrounding
+ pixels, for example bilinear or bicubic, rather than simply
+ selecting the nearest source pixel. Depending on the speed of
+ the available interpolents, this choice may be affected by the
+ <a>'image-rendering'</a> property
+ setting.</p>
+ <p>The <a>'color-interpolation-filters'</a>
+ property only applies to the <a>'in2'</a> source image and does not
+ apply to the <a>'in'</a> source image. The <a>'in'</a> source image must remain in its current color space.</p>
+
+<edit:elementsummary name='feDisplacementMap'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feDisplacementMapScaleAttribute"><span
+ class="adef">scale</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Displacement scale factor. The amount is expressed in
+ the coordinate system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.<br />
+ When the value of this attribute is <span
+ class="attr-value">0</span>, this operation has no effect
+ on the source image.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feDisplacementMapXChannelSelectorAttribute">
+ <span class="adef">xChannelSelector</span> = "<em>R | G | B
+ | A</em>"</dt>
+ <dd>Indicates which channel from <a>'in2'</a> to use to displace the
+ pixels in <a>'in'</a> along the x-axis.
+ If attribute <a>'xChannelSelector'</a> is not specified, then the effect is as if a value of <span class="attr-value">A</span> were specified.
+ <br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feDisplacementMapYChannelSelectorAttribute">
+ <span class="adef">yChannelSelector</span> = "<em>R | G | B
+ | A</em>"</dt>
+ <dd>Indicates which channel from <a>'in2'</a> to use to displace the
+ pixels in <a>'in'</a> along the y-axis.
+ If attribute <a>'yChannelSelector'</a> is not specified, then the effect is as if a value of <span class="attr-value">A</span> were specified.
+ <br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feDisplacementMapIn2Attribute"><span
+ class="adef">in2</span> = "<em>(see <a>'in'</a> attribute)</em>"</dt>
+ <dd>The second input image, which is used to displace the
+ pixels in the image from attribute <a>'in'</a>. This attribute can take on
+ the same values as the <a>'in'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h2 id="feFloodElement">Filter primitive <span class="element-name">'feFlood'</span></h2>
+
+<edit:with element='feFlood'>
+
+ <p>This filter primitive creates a rectangle filled with the
+ color and opacity values from properties <a>'flood-color'</a> and <a>'flood-opacity'</a>. The rectangle is as
+ large as the <a
+ href="filters.html#FilterPrimitiveSubRegion">filter primitive
+ subregion</a> established by the <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> attributes on the <a>'feFlood'</a> element.</p>
+
+<edit:elementsummary name='feFlood'/>
+
+ <p>The <a>'flood-color'</a> property
+ indicates what color to use to flood the current <a
+ href="filters.html#FilterPrimitiveSubRegion">filter primitive
+ subregion</a>. The keyword <span
+ class="attr-value">currentColor</span> and ICC colors can be
+ specified in the same manner as within a <a
+ href="painting.html#SpecifyingPaint"><paint></a>
+ specification for the <a>'fill'</a> and <a>'stroke'</a> properties.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FloodColorProperty"><span class="propdef-title prop-name">'flood-color'</span></dt>
+ <dd>
+ <table summary="flood-color property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>currentColor |<br />
+ <a href="types.html#DataTypeColor"><color></a>
+ [<a href="types.html#DataTypeICCColor"><icccolor></a>]
+ |<br />
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>black</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'feFlood'</a>
+ elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>The <a>'flood-opacity'</a> property
+ defines the opacity value to use across the entire <a
+ href="filters.html#FilterPrimitiveSubRegion">filter primitive
+ subregion</a>.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FloodOpacityProperty"><span class="propdef-title prop-name">'flood-opacity'</span></dt>
+ <dd>
+ <table summary="flood-opacity property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>1</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'feFlood'</a>
+ elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h2 id="feGaussianBlurElement">Filter primitive <span class="element-name">'feGaussianBlur'</span></h2>
+
+<edit:with element='feGaussianBlur'>
+
+ <p>This filter primitive performs a Gaussian blur on the input
+ image.</p>
+ <p>The Gaussian blur kernel is an approximation of the
+ normalized convolution:</p>
+ <p class="filterformula">G(x,y) = H(x)I(y)</p>
+ <p>where</p>
+ <p class="filterformula">H(x) = exp(-x<sup>2</sup>/ (2s<sup>2</sup>)) / sqrt(2* pi*s<sup>2</sup>)</p>
+ <p>and</p>
+ <p class="filterformula">I(y) = exp(-y<sup>2</sup>/ (2t<sup>2</sup>)) / sqrt(2* pi*t<sup>2</sup>)</p>
+ <p>with 's' being the standard deviation in the x direction
+ and 't' being the standard deviation in the y direction, as specified by <a>'stdDeviation'</a>.</p>
+ <p>The value of <a>'stdDeviation'</a> can be either one or
+ two numbers. If two numbers are provided, the first number
+ represents a standard deviation value along the x-axis of the
+ current coordinate system and the second value represents a
+ standard deviation in Y. If one number is provided, then that
+ value is used for both X and Y.</p>
+ <p>Even if only one value is provided for <a>'stdDeviation'</a>, this can be
+ implemented as a separable convolution.</p>
+ <p>For larger values of 's' (s >= 2.0), an approximation can
+ be used: Three successive box-blurs build a piece-wise
+ quadratic convolution kernel, which approximates the Gaussian
+ kernel to within roughly 3%.</p>
+ <p class="filterformula">let d = floor(s * 3*sqrt(2*pi)/4 +
+ 0.5)</p>
+ <p>... if d is odd, use three box-blurs of size 'd', centered
+ on the output pixel.</p>
+ <p>... if d is even, two box-blurs of size 'd' (the first one
+ centered on the pixel boundary between the output pixel and the
+ one to the left, the second one centered on the pixel boundary
+ between the output pixel and the one to the right) and one box
+ blur of size 'd+1' centered on the output pixel.</p>
+ <p class="note">Note: the approximation formula also applies correspondingly to 't'.</p>
+ <p>Frequently this operation will take place on alpha-only
+ images, such as that produced by the built-in input, <a
+ href="filters.html#SourceAlpha"><span
+ class="attr-value">SourceAlpha</span></a>. The implementation
+ may notice this and optimize the single channel case. If the
+ input has infinite extent and is constant (e.g <span class="attr-value"><a href="#FillPaint">FillPaint</a></span>
+ where the fill is a solid color), this operation has
+ no effect. If the input has infinite extent and the filter result is the input to an <a>'feTile'</a>, the
+ filter is evaluated with periodic boundary conditions.</p>
+
+<edit:elementsummary name='feGaussianBlur'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feGaussianBlurStdDeviationAttribute"><span
+ class="adef">stdDeviation</span> = "<em><a
+ href="types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>"</dt>
+ <dd>The standard deviation for the blur operation. If two
+ <a href="types.html#DataTypeNumber"><number></a>s are
+ provided, the first number represents a standard deviation
+ value along the x-axis of the coordinate system established
+ by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element. The
+ second value represents a standard deviation in Y. If one
+ number is provided, then that value is used for both X and
+ Y.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image). If <a>'stdDeviation'</a> is <span class="attr-value">0</span> in only one of X or Y,
+ then the effect is that the blur is only applied in the direction that has a non-zero value.
+ <br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p><a href="filters.html#AnExample">The example</a> at the
+ start of this chapter makes use of the <a>'feGaussianBlur'</a> filter primitive to
+ create a drop shadow effect.</p>
+
+</edit:with>
+
+<h2 id="feImageElement">Filter primitive <span class="element-name">'feImage'</span></h2>
+
+<edit:with element='feImage'>
+
+ <p>This filter primitive refers to a graphic external to this
+ filter element, which is loaded or rendered into an RGBA raster
+ and becomes the result of the filter primitive.</p>
+ <p>This filter primitive can refer to an external image or can
+ be a reference to another piece of SVG. It produces an image
+ similar to the built-in image source <a
+ href="filters.html#SourceGraphic"><span
+ class="attr-value">SourceGraphic</span></a> except that the
+ graphic comes from an external source.</p>
+ <p>If the <a>'xlink:href'</a> references
+ a stand-alone image resource such as a JPEG, PNG or SVG file,
+ then the image resource is rendered according to the behavior
+ of the <a>'image'</a> element; otherwise, the
+ referenced resource is rendered according to the behavior of
+ the <a>'use'</a> element. In either case,
+ the current user coordinate system depends on the value of
+ attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element. The
+ processing of the <a>'preserveAspectRatio'</a> attribute on
+ the <a>'feImage'</a> element is
+ identical to that of the <a>'image'</a> element.</p>
+ <p>When the referenced image must be resampled to match the
+ device coordinate system, it is recommended that <a
+ href="conform.html#ConformingHighQualitySVGViewers">high
+ quality viewers</a> make use of appropriate interpolation
+ techniques, for example bilinear or bicubic. Depending on the
+ speed of the available interpolents, this choice may be
+ affected by the <a>'image-rendering'</a> property
+ setting.</p>
+
+<edit:elementsummary name='feImage'/>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feImageElementHrefAttribute"><span class="adef">xlink:href</span> = "<span class='attr-value'><a href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>
+ <p>An <a href="linking.html#IRIReference">IRI reference</a> to the image
+ source.</p>
+ <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ </dd>
+ <dt id="feImageElementPreserveAspectRatioAttribute">
+ <span class="adef">preserveAspectRatio</span> = "<span class='attr-value'><a href="coords.html#PreserveAspectRatioAttribute">[defer] <align> [<meetOrSlice>]</a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'preserveAspectRatio'</a>.
+ </p>
+ <p>
+ If attribute <a>'preserveAspectRatio'</a> is not specified, then the effect is as if a value of <span class="attr-value">xMidYMid meet</span> were specified.
+ </p>
+ <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ </dd>
+ </dl>
+</div>
+
+<p><span class="example-ref">Example feImage</span> illustrates how images are placed relative
+to an object. From left to right:</p>
+<ul>
+ <li>
+ The default placement of an image. Note that the image is
+ centered in the <a>filter region</a> and has the maximum size that will
+ fit in the region consistent with preserving the aspect ratio.
+ </li>
+ <li>
+ The image stretched to fit the bounding box of an object.
+ </li>
+ <li>
+ The image placed using user coordinates. Note that the image is
+ first centered in a box the size of the <a>filter region</a> and has the
+ maximum size that will fit in the box consistent with preserving
+ the aspect ratio. This box is then shifted by the given 'x' and
+ 'y' values relative to the viewport the object is in.
+ </li>
+</ul>
+
+<edit:example href='images/filters/feImage-01.svg' name='feImage' description='Examples of feImage use' image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="feMergeElement">Filter primitive <span class="element-name">'feMerge'</span></h2>
+
+<edit:with element='feMerge'>
+
+ <p>This filter primitive composites input image layers on top
+ of each other using the <em>over</em> operator with
+ <em>Input1</em> (corresponding to the first <a>'feMergeNode'</a> child element) on
+ the bottom and the last specified input, <em>InputN</em>
+ (corresponding to the last <a>'feMergeNode'</a> child element),
+ on top.</p>
+ <p>Many effects produce a number of intermediate layers in
+ order to create the final output image. This filter allows us
+ to collapse those into a single image. Although this could be
+ done by using n-1 Composite-filters, it is more convenient to
+ have this common operation available in this form, and offers
+ the implementation some additional flexibility.</p>
+ <p>Each <a>'feMerge'</a> element can have any number of <a>'feMergeNode'</a>
+ subelements, each of which has an <a>'feMergeNode/in'</a> attribute.</p>
+ <p>The canonical implementation of feMerge is to render the
+ entire effect into one RGBA layer, and then render the
+ resulting layer on the output device. In certain cases (in
+ particular if the output device itself is a continuous tone
+ device), and since merging is associative, it might be a
+ sufficient approximation to evaluate the effect one layer at a
+ time and render each layer individually onto the output device
+ bottom to top.</p>
+ <p>If the topmost image input is <a
+ href="filters.html#SourceGraphic"><span
+ class="attr-value">SourceGraphic</span></a> and this <a>'feMerge'</a> is the last filter
+ primitive in the filter, the implementation is encouraged to
+ render the layers up to that point, and then render the <a
+ href="filters.html#SourceGraphic"><span
+ class="attr-value">SourceGraphic</span></a> directly from its
+ vector description on top.</p>
+
+<edit:elementsummary name='feMerge'/>
+
+<div id='feMergeNodeElement'>
+<edit:elementsummary name='feMergeNode'/>
+</div>
+
+<p><a href="filters.html#AnExample">The example</a> at the start of this
+chapter makes use of the <a>'feMerge'</a> filter primitive to composite
+two intermediate filter results together.</p>
+
+</edit:with>
+
+<h2 id="feMorphologyElement">Filter primitive <span class="element-name">'feMorphology'</span></h2>
+
+<edit:with element='feMorphology'>
+
+ <p>This filter primitive performs "fattening" or "thinning" of
+ artwork. It is particularly useful for fattening or thinning an
+ alpha channel.</p>
+ <p>The dilation (or erosion) kernel is a rectangle with a width
+ of 2*<em>x-radius</em> and a height of 2*<em>y-radius</em>. In
+ dilation, the output pixel is the individual component-wise
+ maximum of the corresponding R,G,B,A values in the input
+ image's kernel rectangle. In erosion, the output pixel is the
+ individual component-wise minimum of the corresponding R,G,B,A
+ values in the input image's kernel rectangle.</p>
+ <p>Frequently this operation will take place on alpha-only
+ images, such as that produced by the built-in input, <a
+ href="filters.html#SourceAlpha"><span
+ class="attr-value">SourceAlpha</span></a>. In that case, the
+ implementation might want to optimize the single channel
+ case.</p>
+ <p>If the input has infinite extent and is constant (e.g
+ <span class="attr-value"><a href="#FillPaint">FillPaint</a></span>
+ where the fill is a solid color), this operation has
+ no effect. If the input has infinite extent and the filter result
+ is the input to an <a>'feTile'</a>, the filter is evaluated with
+ periodic boundary conditions.
+ </p>
+ <p>Because <a>'feMorphology'</a>
+ operates on premultipied color values, it will always result in
+ color values less than or equal to the alpha channel.</p>
+
+<edit:elementsummary name='feMorphology'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feMorphologyOperatorAttribute"><span
+ class="adef">operator</span> = "<em>erode |
+ dilate</em>"</dt>
+ <dd>A keyword indicating whether to erode (i.e., thin) or
+ dilate (fatten) the source graphic.
+ If attribute <a>'operator'</a> is not specified, then the effect is as if a value of <span class="attr-value">erode</span> were specified.
+ <br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feMorphologyRadiusAttribute"><span
+ class="adef">radius</span> = "<em><a
+ href="types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>"</dt>
+ <dd>The radius (or radii) for the operation. If two <a
+ href="types.html#DataTypeNumber"><number></a>s are
+ provided, the first number represents a x-radius and the
+ second value represents a y-radius. If one number is
+ provided, then that value is used for both X and Y. The
+ values are in the coordinate system established by
+ attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables the effect of the given filter
+ primitive (i.e., the result is a transparent black
+ image).<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p><span class="example-ref">Example feMorphology</span> shows
+ examples of the four types of feMorphology operations.</p>
+
+<edit:example href='images/filters/feMorphology.svg' name='feMorphology' description='Examples of erode and dilate' image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="feOffsetElement">Filter primitive <span class="element-name">'feOffset'</span></h2>
+
+<edit:with element='feOffset'>
+
+ <p>This filter primitive offsets the input image relative to
+ its current position in the image space by the specified
+ vector.</p>
+ <p>This is important for effects like drop shadows.</p>
+ <p>When applying this filter, the destination location may be
+ offset by a fraction of a pixel in device space. In this case a
+ <a href="conform.html#ConformingHighQualitySVGViewers">high
+ quality viewer</a> should make use of appropriate interpolation
+ techniques, for example bilinear or bicubic. This is especially
+ recommended for dynamic viewers where this interpolation
+ provides visually smoother movement of images. For static
+ viewers this is less of a concern. Close attention should be
+ made to the <a>'image-rendering'</a> property setting
+ to determine the authors intent.</p>
+
+<edit:elementsummary name='feOffset'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feOffsetDxAttribute"><span
+ class="adef">dx</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>The amount to offset the input graphic along the
+ x-axis. The offset amount is expressed in the coordinate
+ system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feOffsetDyAttribute"><span
+ class="adef">dy</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>The amount to offset the input graphic along the
+ y-axis. The offset amount is expressed in the coordinate
+ system established by attribute <a>'filter/primitiveUnits'</a> on the <a>'filter element'</a> element.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p><a href="filters.html#AnExample">The example</a> at the
+ start of this chapter makes use of the <a>'feOffset'</a> filter primitive to offset
+ the drop shadow from the original source graphic.</p>
+
+</edit:with>
+
+<h2 id="feSpecularLightingElement">Filter primitive <span class="element-name">'feSpecularLighting'</span></h2>
+
+<edit:with element='feSpecularLighting'>
+
+ <p>This filter primitive lights a source graphic using the
+ alpha channel as a bump map. The resulting image is an RGBA
+ image based on the light color. The lighting calculation
+ follows the standard specular component of the Phong lighting
+ model. The resulting image depends on the light color, light
+ position and surface geometry of the input bump map. The result
+ of the lighting calculation is added. The filter primitive
+ assumes that the viewer is at infinity in the z direction
+ (i.e., the unit vector in the eye direction is (0,0,1)
+ everywhere).</p>
+ <p>This filter primitive produces an image which contains the
+ specular reflection part of the lighting calculation. Such a
+ map is intended to be combined with a texture using the
+ <em>add</em> term of the <em>arithmetic</em> <a>'feComposite'</a> method. Multiple
+ light sources can be simulated by adding several of these light
+ maps before applying it to the texture image.</p>
+ <p>The resulting RGBA image is computed as follows:</p>
+ <p class="filterformula">S<sub>r</sub> = k<sub>s</sub> *
+ pow(N.H, specularExponent) * L<sub>r<br />
+ </sub> S<sub>g</sub> = k<sub>s</sub> * pow(N.H,
+ specularExponent) * L<sub>g<br />
+ </sub> S<sub>b</sub> = k<sub>s</sub> * pow(N.H,
+ specularExponent) * L<sub>b<br />
+ </sub> S<sub>a</sub> = max(S<sub>r,</sub> S<sub>g,</sub>
+ S<sub>b</sub>)</p>
+ <p>where</p>
+ <dl>
+ <dd>k<sub>s</sub> = specular lighting constant<br />
+ N = surface normal unit vector, a function of x and y<br />
+ H = "halfway" unit vector between eye unit vector and light
+ unit vector<br />
+ <br />
+ L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub> = RGB components
+ of light</dd>
+ </dl>
+ <p>See <a>'feDiffuseLighting'</a> for
+ definition of N and (L<sub>r</sub>, L<sub>g</sub>,
+ L<sub>b</sub>).</p>
+ <p>The definition of H reflects our assumption of the constant
+ eye vector E = (0,0,1):</p>
+ <p class="filterformula">H = (L + E) / Norm(L+E)</p>
+ <p>where L is the light unit vector.</p>
+ <p>Unlike the <a>'feDiffuseLighting'</a>, the <a>'feSpecularLighting'</a> filter
+ produces a non-opaque image. This is due to the fact that the
+ specular result
+ (S<sub>r</sub>,S<sub>g</sub>,S<sub>b</sub>,S<sub>a</sub>) is
+ meant to be added to the textured image. The alpha channel of
+ the result is the max of the color components, so that where
+ the specular light is zero, no additional coverage is added to
+ the image and a fully white highlight will add opacity.</p>
+ <p>The <a>'feDiffuseLighting'</a> and <a>'feSpecularLighting'</a> filters will
+ often be applied together. An implementation may detect this
+ and calculate both maps in one pass, instead of two.</p>
+
+<edit:elementsummary name='feSpecularLighting'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feSpecularLightingSurfaceScaleAttribute"><span
+ class="adef">surfaceScale</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>height of surface when A<sub>in</sub> = 1.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpecularLightingSpecularConstantAttribute">
+ <span class="adef">specularConstant</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>ks in Phong lighting model. In SVG, this can be any
+ non-negative number.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpecularLightingSpecularExponentAttribute">
+ <span class="adef">specularExponent</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>Exponent for specular term, larger is more "shiny".
+ Range 1.0 to 128.0.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feSpecularLightingKernelUnitLengthAttribute">
+ <span class="adef">kernelUnitLength</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></span>"</dt>
+ <dd>The first number is the <dx> value. The second
+ number is the <dy> value. If the <dy> value is
+ not specified, it defaults to the same value as <dx>.
+ Indicates the intended distance in current filter units
+ (i.e., units as determined by the value of attribute <a>'filter/primitiveUnits'</a>) for
+ <code>dx</code> and <code>dy</code>, respectively, in the
+ <a href="filters.html#SurfaceNormalCalculations">surface
+ normal calculation formulas</a>. By specifying value(s) for
+ <a>'kernelUnitLength'</a>, the kernel
+ becomes defined in a scalable, abstract coordinate system.
+ If <a>'kernelUnitLength'</a> is not
+ specified, the <code>dx</code> and <code>dy</code> values
+ should represent very small deltas relative to a given
+ <code>(x,y)</code> position, which might be implemented in
+ some cases as one pixel in the intermediate image offscreen
+ bitmap, which is a pixel-based coordinate system, and thus
+ potentially not scalable. For some level of consistency
+ across display media and user agents, it is necessary that
+ a value be provided for at least one of <a>'filter/filterRes'</a> and <a>'kernelUnitLength'</a>. Discussion of
+ intermediate images are in the <a
+ href="filters.html#Introduction">Introduction</a> and in
+ the description of attribute <a>'filter/filterRes'</a>.<br />
+ A negative or zero value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p>The light source is defined by one of the child elements <a>'feDistantLight'</a>, <a>'fePointLight'</a> or <a>'feDistantLight'</a>. The light
+ color is specified by property <a>'lighting-color'</a>.</p>
+ <p><a href="filters.html#AnExample">The example</a> at the
+ start of this chapter makes use of the <a>'feSpecularLighting'</a> filter primitive
+ to achieve a highly reflective, 3D glowing effect.</p>
+
+</edit:with>
+
+<h2 id="feTileElement">Filter primitive <span class="element-name">'feTile'</span></h2>
+
+<edit:with element='feTile'>
+
+ <p>This filter primitive fills a target rectangle with a
+ repeated, tiled pattern of an input image. The target rectangle
+ is as large as the <a
+ href="filters.html#FilterPrimitiveSubRegion">filter primitive
+ subregion</a> established by the <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> attributes on the <a>'feTile'</a> element.</p>
+ <p>Typically, the input image has been defined with its own <a
+ href="filters.html#FilterPrimitiveSubRegion">filter primitive
+ subregion</a> in order to define a reference tile. <a>'feTile'</a> replicates the reference
+ tile in both X and Y to completely fill the target rectangle.
+ The top/left corner of each given tile is at location
+ <code>(x+i*width,y+j*height)</code>, where <code>(x,y)</code>
+ represents the top/left of the input image's filter primitive
+ subregion, <code>width</code> and <code>height</code> represent
+ the width and height of the input image's filter primitive
+ subregion, and <code>i</code> and <code>j</code> can be any
+ integer value. In most cases, the input image will have a
+ smaller <a>filter primitive subregion</a> than the <a>'feTile'</a> in order to achieve a
+ repeated pattern effect.</p>
+ <p>Implementers must take appropriate measures in constructing
+ the tiled image to avoid artifacts between tiles, particularly
+ in situations where the user to device transform includes shear
+ and/or rotation. Unless care is taken, interpolation can lead
+ to edge pixels in the tile having opacity values lower or
+ higher than expected due to the interaction of painting
+ adjacent tiles which each have partial overlap with particular
+ pixels.</p>
+
+<edit:elementsummary name='feTile'/>
+
+</edit:with>
+
+<h2 id="feTurbulenceElement">Filter primitive <span class="element-name">'feTurbulence'</span></h2>
+
+<edit:with element='feTurbulence'>
+
+ <p>This filter primitive creates an image using the Perlin
+ turbulence function. It allows the synthesis of artificial
+ textures like clouds or marble. For a detailed description the
+ of the Perlin turbulence function, see "Texturing and
+ Modeling", Ebert et al, AP Professional, 1994. The resulting
+ image will fill the entire <a
+ href="filters.html#FilterPrimitiveSubRegion">filter primitive
+ subregion</a> for this filter primitive.</p>
+ <p>It is possible to create bandwidth-limited noise by
+ synthesizing only one octave.</p>
+ <p>The C code below shows the exact algorithm used for this
+ filter effect.</p>
+ <p>For fractalSum, you get a turbFunctionResult that is aimed
+ at a range of -1 to 1 (the actual result might exceed this
+ range in some cases). To convert to a color value, use the
+ formula <code>colorValue = ((turbFunctionResult * 255) + 255) /
+ 2</code>, then clamp to the range 0 to 255.</p>
+ <p>For turbulence, you get a turbFunctionResult that is aimed
+ at a range of 0 to 1 (the actual result might exceed this range
+ in some cases). To convert to a color value, use the formula
+ <code>colorValue = (turbFunctionResult * 255)</code>, then
+ clamp to the range 0 to 255.</p>
+ <p>The following order is used for applying the pseudo random
+ numbers. An initial seed value is computed based on attribute
+ <a>'seed'</a>. Then the implementation
+ computes the lattice points for R, then continues getting
+ additional pseudo random numbers relative to the last generated
+ pseudo random number and computes the lattice points for G, and
+ so on for B and A.</p>
+ <p>The generated color and alpha values are in the color space
+ determined by the value of property <a>'color-interpolation-filters'</a>:</p>
+<pre class="svgsamplecompressed">
+/* Produces results in the range [1, 2**31 - 2].
+Algorithm is: r = (a * r) mod m
+where a = 16807 and m = 2**31 - 1 = 2147483647
+See [Park & Miller], CACM vol. 31 no. 10 p. 1195, Oct. 1988
+To test: the algorithm should produce the result 1043618065
+as the 10,000th generated number if the original seed is 1.
+*/
+#define RAND_m 2147483647 /* 2**31 - 1 */
+#define RAND_a 16807 /* 7**5; primitive root of m */
+#define RAND_q 127773 /* m / a */
+#define RAND_r 2836 /* m % a */
+long setup_seed(long lSeed)
+{
+ if (lSeed <= 0) lSeed = -(lSeed % (RAND_m - 1)) + 1;
+ if (lSeed > RAND_m - 1) lSeed = RAND_m - 1;
+ return lSeed;
+}
+long random(long lSeed)
+{
+ long result;
+ result = RAND_a * (lSeed % RAND_q) - RAND_r * (lSeed / RAND_q);
+ if (result <= 0) result += RAND_m;
+ return result;
+}
+#define BSize 0x100
+#define BM 0xff
+#define PerlinN 0x1000
+#define NP 12 /* 2^PerlinN */
+#define NM 0xfff
+static uLatticeSelector[BSize + BSize + 2];
+static double fGradient[4][BSize + BSize + 2][2];
+struct StitchInfo
+{
+ int nWidth; // How much to subtract to wrap for stitching.
+ int nHeight;
+ int nWrapX; // Minimum value to wrap.
+ int nWrapY;
+};
+static void init(long lSeed)
+{
+ double s;
+ int i, j, k;
+ lSeed = setup_seed(lSeed);
+ for(k = 0; k < 4; k++)
+ {
+ for(i = 0; i < BSize; i++)
+ {
+ uLatticeSelector[i] = i;
+ for (j = 0; j < 2; j++)
+ fGradient[k][i][j] = (double)(((lSeed = random(lSeed)) % (BSize + BSize)) - BSize) / BSize;
+ s = double(sqrt(fGradient[k][i][0] * fGradient[k][i][0] + fGradient[k][i][1] * fGradient[k][i][1]));
+ fGradient[k][i][0] /= s;
+ fGradient[k][i][1] /= s;
+ }
+ }
+ while(--i)
+ {
+ k = uLatticeSelector[i];
+ uLatticeSelector[i] = uLatticeSelector[j = (lSeed = random(lSeed)) % BSize];
+ uLatticeSelector[j] = k;
+ }
+ for(i = 0; i < BSize + 2; i++)
+ {
+ uLatticeSelector[BSize + i] = uLatticeSelector[i];
+ for(k = 0; k < 4; k++)
+ for(j = 0; j < 2; j++)
+ fGradient[k][BSize + i][j] = fGradient[k][i][j];
+ }
+}
+#define s_curve(t) ( t * t * (3. - 2. * t) )
+#define lerp(t, a, b) ( a + t * (b - a) )
+double noise2(int nColorChannel, double vec[2], StitchInfo *pStitchInfo)
+{
+ int bx0, bx1, by0, by1, b00, b10, b01, b11;
+ double rx0, rx1, ry0, ry1, *q, sx, sy, a, b, t, u, v;
+ register i, j;
+ t = vec[0] + PerlinN;
+ bx0 = (int)t;
+ bx1 = bx0+1;
+ rx0 = t - (int)t;
+ rx1 = rx0 - 1.0f;
+ t = vec[1] + PerlinN;
+ by0 = (int)t;
+ by1 = by0+1;
+ ry0 = t - (int)t;
+ ry1 = ry0 - 1.0f;
+ // If stitching, adjust lattice points accordingly.
+ if(pStitchInfo != NULL)
+ {
+ if(bx0 >= pStitchInfo->nWrapX)
+ bx0 -= pStitchInfo->nWidth;
+ if(bx1 >= pStitchInfo->nWrapX)
+ bx1 -= pStitchInfo->nWidth;
+ if(by0 >= pStitchInfo->nWrapY)
+ by0 -= pStitchInfo->nHeight;
+ if(by1 >= pStitchInfo->nWrapY)
+ by1 -= pStitchInfo->nHeight;
+ }
+ bx0 &= BM;
+ bx1 &= BM;
+ by0 &= BM;
+ by1 &= BM;
+ i = uLatticeSelector[bx0];
+ j = uLatticeSelector[bx1];
+ b00 = uLatticeSelector[i + by0];
+ b10 = uLatticeSelector[j + by0];
+ b01 = uLatticeSelector[i + by1];
+ b11 = uLatticeSelector[j + by1];
+ sx = double(s_curve(rx0));
+ sy = double(s_curve(ry0));
+ q = fGradient[nColorChannel][b00]; u = rx0 * q[0] + ry0 * q[1];
+ q = fGradient[nColorChannel][b10]; v = rx1 * q[0] + ry0 * q[1];
+ a = lerp(sx, u, v);
+ q = fGradient[nColorChannel][b01]; u = rx0 * q[0] + ry1 * q[1];
+ q = fGradient[nColorChannel][b11]; v = rx1 * q[0] + ry1 * q[1];
+ b = lerp(sx, u, v);
+ return lerp(sy, a, b);
+}
+double turbulence(int nColorChannel, double *point, double fBaseFreqX, double fBaseFreqY,
+ int nNumOctaves, bool bFractalSum, bool bDoStitching,
+ double fTileX, double fTileY, double fTileWidth, double fTileHeight)
+{
+ StitchInfo stitch;
+ StitchInfo *pStitchInfo = NULL; // Not stitching when NULL.
+ // Adjust the base frequencies if necessary for stitching.
+ if(bDoStitching)
+ {
+ // When stitching tiled turbulence, the frequencies must be adjusted
+ // so that the tile borders will be continuous.
+ if(fBaseFreqX != 0.0)
+ {
+ double fLoFreq = double(floor(fTileWidth * fBaseFreqX)) / fTileWidth;
+ double fHiFreq = double(ceil(fTileWidth * fBaseFreqX)) / fTileWidth;
+ if(fBaseFreqX / fLoFreq < fHiFreq / fBaseFreqX)
+ fBaseFreqX = fLoFreq;
+ else
+ fBaseFreqX = fHiFreq;
+ }
+ if(fBaseFreqY != 0.0)
+ {
+ double fLoFreq = double(floor(fTileHeight * fBaseFreqY)) / fTileHeight;
+ double fHiFreq = double(ceil(fTileHeight * fBaseFreqY)) / fTileHeight;
+ if(fBaseFreqY / fLoFreq < fHiFreq / fBaseFreqY)
+ fBaseFreqY = fLoFreq;
+ else
+ fBaseFreqY = fHiFreq;
+ }
+ // Set up initial stitch values.
+ pStitchInfo = &stitch;
+ stitch.nWidth = int(fTileWidth * fBaseFreqX + 0.5f);
+ stitch.nWrapX = fTileX * fBaseFreqX + PerlinN + stitch.nWidth;
+ stitch.nHeight = int(fTileHeight * fBaseFreqY + 0.5f);
+ stitch.nWrapY = fTileY * fBaseFreqY + PerlinN + stitch.nHeight;
+ }
+ double fSum = 0.0f;
+ double vec[2];
+ vec[0] = point[0] * fBaseFreqX;
+ vec[1] = point[1] * fBaseFreqY;
+ double ratio = 1;
+ for(int nOctave = 0; nOctave < nNumOctaves; nOctave++)
+ {
+ if(bFractalSum)
+ fSum += double(noise2(nColorChannel, vec, pStitchInfo) / ratio);
+ else
+ fSum += double(fabs(noise2(nColorChannel, vec, pStitchInfo)) / ratio);
+ vec[0] *= 2;
+ vec[1] *= 2;
+ ratio *= 2;
+ if(pStitchInfo != NULL)
+ {
+ // Update stitch values. Subtracting PerlinN before the multiplication and
+ // adding it afterward simplifies to subtracting it once.
+ stitch.nWidth *= 2;
+ stitch.nWrapX = 2 * stitch.nWrapX - PerlinN;
+ stitch.nHeight *= 2;
+ stitch.nWrapY = 2 * stitch.nWrapY - PerlinN;
+ }
+ }
+ return fSum;
+}
+</pre>
+
+<edit:elementsummary name='feTurbulence'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="feTurbulenceBaseFrequencyAttribute"><span
+ class="adef">baseFrequency</span> = "<em><a
+ href="types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>"</dt>
+ <dd>The base frequency (frequencies) parameter(s) for the
+ noise function. If two <a
+ href="types.html#DataTypeNumber"><number></a>s are
+ provided, the first number represents a base frequency in
+ the X direction and the second value represents a base
+ frequency in the Y direction. If one number is provided,
+ then that value is used for both X and Y.<br />
+ A negative value for base frequency is an error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feTurbulenceNumOctavesAttribute"><span
+ class="adef">numOctaves</span> = "<em><a
+ href="types.html#DataTypeInteger"><integer></a></em>"</dt>
+ <dd>The numOctaves parameter for the noise function.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">1</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feTurbulenceSeedAttribute"><span
+ class="adef">seed</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a></em>"</dt>
+ <dd>The starting number for the pseudo random number
+ generator.<br />
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">0</span> were
+ specified. When the seed number is handed over to the algorithm above it must first be truncated, i.e. rounded to the closest integer value towards zero.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feTurbulenceStitchTilesAttribute"><span
+ class="adef">stitchTiles</span> = "<em>stitch |
+ noStitch</em>"</dt>
+ <dd>If <span
+ class="attr-value">stitchTiles="noStitch"</span>, no
+ attempt it made to achieve smooth transitions at the border
+ of tiles which contain a turbulence function. Sometimes the
+ result will show clear discontinuities at the tile
+ borders.<br />
+ If <span class="attr-value">stitchTiles="stitch"</span>,
+ then the user agent will automatically adjust
+ baseFrequency-x and baseFrequency-y values such that the
+ feTurbulence node's width and height (i.e., the width and
+ height of the current subregion) contains an integral
+ number of the Perlin tile width and height for the first
+ octave. The baseFrequency will be adjusted up or down
+ depending on which way has the smallest relative (not
+ absolute) change as follows: Given the frequency, calculate
+ <code>lowFreq=floor(width*frequency)/width</code> and
+ <code>hiFreq=ceil(width*frequency)/width</code>. If
+ frequency/lowFreq < hiFreq/frequency then use lowFreq,
+ else use hiFreq. While generating turbulence values,
+ generate lattice vectors as normal for Perlin Noise, except
+ for those lattice points that lie on the right or bottom
+ edges of the active area (the size of the resulting tile).
+ In those cases, copy the lattice vector from the opposite
+ edge of the active area.
+ <p>
+ If attribute <a>'stitchTiles'</a> is not specified, then the effect is as if a value of <span class="attr-value">noStitch</span> were specified.
+ </p><br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="feTurbulenceTypeAttribute"><span
+ class="adef">type</span> = "<em>fractalNoise |
+ turbulence</em>"</dt>
+ <dd>Indicates whether the filter primitive should perform a
+ noise or turbulence function.
+ If attribute <a>'type'</a> is not specified, then the effect is as if a value of <span class="attr-value">turbulence</span> were specified.
+ <br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p><span class="example-ref">Example feTurbulence</span> shows
+ the effects of various parameter settings for feTurbulence.</p>
+
+<edit:example href='images/filters/feTurbulence.svg' name='feTurbulence' description='Examples of feTurbulence operations' image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGFilterElement">Interface SVGFilterElement</h3>
+
+<edit:with element='filter'>
+<edit:interface name='::svg::SVGFilterElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFilterPrimitiveStandardAttributes">Interface SVGFilterPrimitiveStandardAttributes</h3>
+
+<edit:with element='feTile'>
+<edit:interface name='::svg::SVGFilterPrimitiveStandardAttributes'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEBlendElement">Interface SVGFEBlendElement</h3>
+
+<edit:with element='feBlend'>
+<edit:interface name='::svg::SVGFEBlendElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEColorMatrixElement">Interface SVGFEColorMatrixElement</h3>
+
+<edit:with element='feColorMatrix'>
+<edit:interface name='::svg::SVGFEColorMatrixElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEComponentTransferElement">Interface SVGFEComponentTransferElement</h3>
+
+<edit:with element='feComponentTransfer'>
+<edit:interface name='::svg::SVGFEComponentTransferElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGComponentTransferFunctionElement">Interface SVGComponentTransferFunctionElement</h3>
+
+<edit:with element='feFuncR'>
+<edit:interface name='::svg::SVGComponentTransferFunctionElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEFuncRElement">Interface SVGFEFuncRElement</h3>
+
+<edit:with element='feFuncR'>
+<edit:interface name='::svg::SVGFEFuncRElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEFuncGElement">Interface SVGFEFuncGElement</h3>
+
+<edit:with element='feFuncG'>
+<edit:interface name='::svg::SVGFEFuncGElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEFuncBElement">Interface SVGFEFuncBElement</h3>
+
+<edit:with element='feFuncB'>
+<edit:interface name='::svg::SVGFEFuncBElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEFuncAElement">Interface SVGFEFuncAElement</h3>
+
+<edit:with element='feFuncA'>
+<edit:interface name='::svg::SVGFEFuncAElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFECompositeElement">Interface SVGFECompositeElement</h3>
+
+<edit:with element='feComposite'>
+<edit:interface name='::svg::SVGFECompositeElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEConvolveMatrixElement">Interface SVGFEConvolveMatrixElement</h3>
+
+<edit:with element='feConvolveMatrix'>
+<edit:interface name='::svg::SVGFEConvolveMatrixElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEDiffuseLightingElement">Interface SVGFEDiffuseLightingElement</h3>
+
+<edit:with element='feDiffuseLighting'>
+<edit:interface name='::svg::SVGFEDiffuseLightingElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEDistantLightElement">Interface SVGFEDistantLightElement</h3>
+
+<edit:with element='feDistantLight'>
+<edit:interface name='::svg::SVGFEDistantLightElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEPointLightElement">Interface SVGFEPointLightElement</h3>
+
+<edit:with element='fePointLight'>
+<edit:interface name='::svg::SVGFEPointLightElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFESpotLightElement">Interface SVGFESpotLightElement</h3>
+
+<edit:with element='feSpotLight'>
+<edit:interface name='::svg::SVGFESpotLightElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEDisplacementMapElement">Interface SVGFEDisplacementMapElement</h3>
+
+<edit:with element='feDisplacementMap'>
+<edit:interface name='::svg::SVGFEDisplacementMapElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEFloodElement">Interface SVGFEFloodElement</h3>
+
+<edit:with element='feFlood'>
+<edit:interface name='::svg::SVGFEFloodElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEGaussianBlurElement">Interface SVGFEGaussianBlurElement</h3>
+
+<edit:with element='feGaussianBlur'>
+<edit:interface name='::svg::SVGFEGaussianBlurElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEImageElement">Interface SVGFEImageElement</h3>
+
+<edit:with element='feImage'>
+<edit:interface name='::svg::SVGFEImageElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEMergeElement">Interface SVGFEMergeElement</h3>
+
+<edit:with element='feMerge'>
+<edit:interface name='::svg::SVGFEMergeElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEMergeNodeElement">Interface SVGFEMergeNodeElement</h3>
+
+<edit:with element='feMergeNode'>
+<edit:interface name='::svg::SVGFEMergeNodeElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEMorphologyElement">Interface SVGFEMorphologyElement</h3>
+
+<edit:with element='feMorphology'>
+<edit:interface name='::svg::SVGFEMorphologyElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFEOffsetElement">Interface SVGFEOffsetElement</h3>
+
+<edit:with element='feOffset'>
+<edit:interface name='::svg::SVGFEOffsetElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFESpecularLightingElement">Interface SVGFESpecularLightingElement</h3>
+
+<edit:with element='feSpecularLighting'>
+<edit:interface name='::svg::SVGFESpecularLightingElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFETileElement">Interface SVGFETileElement</h3>
+
+<edit:with element='feTile'>
+<edit:interface name='::svg::SVGFETileElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGFETurbulenceElement">Interface SVGFETurbulenceElement</h3>
+
+<edit:with element='feTurbulence'>
+<edit:interface name='::svg::SVGFETurbulenceElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/fonts.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1394 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Fonts</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Fonts</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+ <p>Reliable delivery of fonts is a requirement for SVG.
+ Designers need to create SVG content with arbitrary fonts and
+ know that the same graphical result will appear when the
+ content is viewed by all end users, even when end users do not
+ have the necessary fonts installed on their computers. This
+ parallels the print world, where the designer uses a given font
+ when authoring a drawing for print, and the graphical content
+ appears exactly the same in the printed version as it appeared
+ on the designer's authoring system.</p>
+ <p>SVG utilizes the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#q1">WebFonts</a>
+ facility defined in CSS2
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.1) as a key
+ mechanism for reliable delivery of font data to end users. In a
+ common scenario, SVG authoring applications generate
+ compressed, subsetted WebFonts
+ for all text elements used by a given SVG document fragment.
+ Typically, the WebFonts are saved in a location relative to the referencing
+ document.</p>
+ <p>One disadvantage to the WebFont
+ facility to date is that specifications such as CSS2 do not require
+ support of particular font formats. The result is that
+ different implementations support different Web font formats,
+ thereby making it difficult for Web site creators to post a
+ single Web site using WebFonts that work across all user
+ agents.</p>
+ <p>To provide a common font format for SVG that is guaranteed
+ to be supported by all <a
+ href="conform.html#ConformingSVGViewers">conforming SVG
+ viewers</a>, SVG provides a facility to define fonts in SVG.
+ This facility is called <span class="SVG-Term">SVG
+ fonts</span>.</p>
+
+ <p id="SVGFonts">SVG fonts can improve the semantic richness of graphics that
+ represent text. For example, many company logos consist of the
+ company name drawn artistically. In some cases, <a href="access.html">accessibility</a> may be enhanced by
+ expressing the logo as a series of glyphs in an SVG font and
+ then rendering the logo as a <a>'text'</a> element which references
+ this font.</p>
+
+<h2 id="SVGFontsOverview">Overview of SVG fonts</h2>
+
+ <p>An <span class="SVG-Term">SVG font</span> is a font defined
+ using SVG's <a>'font element'</a> element.</p>
+ <p>The purpose of SVG fonts is to allow for delivery of glyph
+ outlines in display-only environments. SVG fonts that accompany
+ Web pages must be supported only in browsing and viewing
+ situations. Graphics editing applications or file translation
+ tools must not attempt to convert SVG fonts into system fonts.
+ The intent is that SVG files be interchangeable between two
+ content creators, but not the SVG fonts that might accompany
+ these SVG files. Instead, each content creator will need to
+ license the given font before being able to successfully edit
+ the SVG file. The <a>'font-face-name'</a> element
+ indicates the name of licensed font to use for editing.</p>
+ <p>SVG fonts contain unhinted font outlines. Because of this,
+ on many implementations there will be limitations regarding the
+ quality and legibility of text in small font sizes. For
+ increased quality and legibility in small font sizes, content
+ creators may want to use an alternate font technology, such as
+ fonts that ship with operating systems or an alternate WebFont
+ format.</p>
+ <p>Because SVG fonts are expressed using SVG elements and
+ attributes, in some cases the SVG font will take up more space
+ than if the font were expressed in a different WebFont
+ format which was especially designed for compact expression of
+ font data. For the fastest delivery of Web pages, content
+ creators may want to use an alternate font technology.</p>
+ <p>A key value of SVG fonts is guaranteed availability in SVG
+ user agents. In some situations, it might be appropriate for an
+ SVG font to be the first choice for rendering some text. In
+ other situations, the SVG font might be an alternate, back-up
+ font in case the first choice font (perhaps a hinted system
+ font) is not available to a given user.</p>
+ <p>The characteristics and attributes of SVG fonts correspond
+ closely to the font characteristics and parameters described in
+ the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html">Fonts chapter</a>
+ of the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/"><cite>Cascading Style Sheets (CSS) level 2</cite></a>
+ specification ([<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a>], chapter 15). In this model,
+ various font metrics, such as advance values and baseline
+ locations, and the glyph outlines themselves, are expressed in
+ units that are relative to an abstract square whose height is
+ the intended distance between lines of type in the same type
+ size. This square is called the <span class="SVG-Term">em
+ square</span> and it is the design grid on which the glyph
+ outlines are defined. The value of the <a>'font-face/units-per-em'</a>
+ attribute on the <a>'font-face'</a> element specifies how
+ many units the em square is divided into. Common values for
+ other font types are, for example, 250 (Intellifont), 1000
+ (Type 1) and 2048 (TrueType, TrueType GX and Open-Type). Unlike
+ standard graphics in SVG, where the initial coordinate system
+ has the y-axis pointing downward (see <a
+ href="coords.html#InitialCoordinateSystem">The initial
+ coordinate system</a>), the design grid for SVG fonts, along
+ with the initial coordinate system for the glyphs, has the
+ y-axis pointing upward for consistency with accepted industry
+ practice for many popular font formats.</p>
+ <p>SVG fonts and their associated glyphs do not specify
+ bounding box information. Because the glyph outlines are
+ expressed as SVG graphics elements, the implementation has the
+ option to render the glyphs either using standard graphics
+ calls or by using special-purpose font rendering technology, in
+ which case any necessary maximum bounding box and overhang
+ calculations can be performed from analysis of the graphics
+ elements contained within the glyph outlines.</p>
+ <p>An SVG font can be either embedded within the same document
+ that uses the font or saved as part of an external
+ resource.</p>
+ <p>Here is an example of how you might embed an SVG font inside
+ of an SVG document.</p>
+<pre>
+<?xml version="1.0" standalone="yes"?>
+<svg width="400px" height="300px" version="1.1"
+ xmlns = 'http://www.w3.org/2000/svg'>
+ <defs>
+ <font id="Font1" horiz-adv-x="1000">
+ <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+ units-per-em="1000" cap-height="600" x-height="400"
+ ascent="700" descent="300"
+ alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+ <font-face-src>
+ <font-face-name name="Super Sans Bold"/>
+ </font-face-src>
+ </font-face>
+ <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+ <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
+ <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
+ <!-- more glyphs -->
+ </font>
+ </defs>
+ <text x="100" y="100"
+ style="font-family: 'Super Sans', Helvetica, sans-serif;
+ font-weight: bold; font-style: normal">Text
+ using embedded font</text>
+</svg>
+</pre>
+ <p>Here is an example of how you might use the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">CSS @font-face facility</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.1) to reference an SVG font which is saved
+ in an external file. First referenced SVG font file:</p>
+<pre>
+<?xml version="1.0" standalone="yes"?>
+<svg width="100%" height="100%" version="1.1"
+ xmlns = 'http://www.w3.org/2000/svg'>
+ <defs>
+ <font id="Font2" horiz-adv-x="1000">
+ <font-face font-family="Super Sans" font-weight="normal" font-style="italic"
+ units-per-em="1000" cap-height="600" x-height="400"
+ ascent="700" descent="300"
+ alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+ <font-face-src>
+ <font-face-name name="Super Sans Italic"/>
+ </font-face-src>
+ </font-face>
+ <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+ <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
+ <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
+ <!-- more glyphs -->
+ </font>
+ </defs>
+</svg>
+</pre>
+ <p>The SVG file which uses/references the above SVG font</p>
+<pre>
+<?xml version="1.0" standalone="yes"?>
+<svg width="400px" height="300px" version="1.1"
+ xmlns = 'http://www.w3.org/2000/svg'>
+ <defs>
+ <style type="text/css">
+ <![CDATA[
+ @font-face {
+ font-family: 'Super Sans';
+ font-weight: normal;
+ font-style: italic;
+ src: url("myfont.svg#Font2") format("svg")
+ }
+ ]]>
+ </style>
+ </defs>
+ <text x="100" y="100"
+ style="font-family: 'Super Sans'; font-weight:normal;
+ font-style: italic">Text using referenced font</text>
+</svg>
+</pre>
+
+<h2 id="FontElement">The <span class="element-name">'font'</span> element</h2>
+
+<edit:with element='font'>
+
+<p>The <a>'font element'</a> element defines an SVG font.</p>
+
+<edit:elementsummary name='font'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="FontElementHorizOriginXAttribute"><span
+ class="adef">horiz-origin-x</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The X-coordinate in the font coordinate system of the
+ origin of a glyph to be used when drawing horizontally
+ oriented text. (Note that the origin applies to all glyphs
+ in the font.)<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontElementHorizOriginYAttribute"><span
+ class="adef">horiz-origin-y</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The Y-coordinate in the font coordinate system of the
+ origin of a glyph to be used when drawing horizontally
+ oriented text. (Note that the origin applies to all glyphs
+ in the font.)<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontElementHorizAdvXAttribute"><span
+ class="adef">horiz-adv-x</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The default horizontal advance after rendering a glyph
+ in horizontal orientation. Glyph widths are required to be
+ non-negative, even if the glyph is typically rendered
+ right-to-left, as in Hebrew and Arabic scripts.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontElementVertOriginXAttribute"><span
+ class="adef">vert-origin-x</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The default X-coordinate in the font coordinate system
+ of the origin of a glyph to be used when drawing vertically
+ oriented text.<br />
+ If the attribute is not specified, the effect is as if the
+ attribute were set to half of the effective value of
+ attribute <a>'horiz-adv-x'</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontElementVertOriginYAttribute"><span
+ class="adef">vert-origin-y</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The default Y-coordinate in the font coordinate system
+ of the origin of a glyph to be used when drawing vertically
+ oriented text.<br />
+ If the attribute is not specified, the effect is as if the
+ attribute were set to the position specified by the font's
+ <a>'font-face/ascent'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontElementVertAdvYAttribute"><span
+ class="adef">vert-adv-y</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The default vertical advance after rendering a glyph in
+ vertical orientation.<br />
+ If the attribute is not specified, the effect is as if a
+ value equivalent of one <em>em</em> were specified (see
+ <a>'font-face/units-per-em'</a>).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+
+<p>Each <a>'font element'</a> element must have a <a>'font-face'</a>
+child element which describes various characteristics of the font.</p>
+
+</edit:with>
+
+<h2 id='GlyphElement'>The <span class="element-name">'glyph'</span> element</h2>
+
+<edit:with element='glyph'>
+
+ <p>The <a>'glyph'</a> element
+ defines the graphics for a given glyph. The coordinate system
+ for the glyph is defined by the various attributes in the
+ <a>'font element'</a> element.</p>
+ <p>The graphics that make up the <a>'glyph'</a> can be a single <a
+ href="paths.html#PathData">path data</a> specification within
+ the <a>'d'</a> attribute, arbitrary SVG as
+ content within the <a>'glyph'</a>, or both.
+ These two alternatives are processed differently (see
+ below).</p>
+
+<edit:elementsummary name='glyph'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="GlyphElementUnicodeAttribute"><span
+ class="adef">unicode</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>One or more Unicode characters indicating the sequence
+ of Unicode characters which corresponds to this glyph. If a
+ character is provided, then this glyph corresponds to the
+ given Unicode character. If multiple characters are
+ provided, then this glyph corresponds to the given sequence
+ of Unicode characters. One use of a sequence of characters
+ is ligatures. For example, if <span
+ class="attr-value">unicode="ffl"</span>, then the given
+ glyph will be used to render the sequence of characters
+ "f", "f", and "l".<br />
+ <br />
+ It is often useful to refer to characters using XML
+ character references expressed in hexadecimal notation or
+ decimal notation. For example, <span
+ class="attr-value">unicode="ffl"</span> could be expressed
+ as XML character references in hexadecimal notation as
+ <span
+ class="attr-value">unicode="&#x66;&#x66;&#x6c;"</span>
+ or in decimal notation as <span
+ class="attr-value">unicode="&#102;&#102;&#108;"</span>.<br />
+ <br />
+ The <a>'unicode'</a> attribute
+ contributes to the process for deciding which glyph(s) are
+ used to represent which character(s). See <a
+ href="fonts.html#GlyphSelectionRules">glyph selection
+ rules</a>. If the <a>'unicode'</a> attribute is not
+ provided for a given <a>'glyph'</a>, then the only way
+ to use this glyph is via an <a>'altGlyph'</a> reference.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphElementGlyphNameAttribute"><span
+ class="adef">glyph-name</span> = "<span
+ class="attr-value"><name> [, <name> ]*</span>
+ "</dt>
+ <dd>A name for the glyph. It is recommended that glyph
+ names be unique within a font. The glyph names can be used
+ in situations where Unicode character numbers do not
+ provide sufficient information to access the correct glyph,
+ such as when there are multiple glyphs per Unicode
+ character. The glyph names can be referenced in <a
+ href="fonts.html#KernElements">kerning</a>
+ definitions.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphElementDAttribute"><span
+ class="adef">d</span> = "<span class="attr-value">path
+ data</span>"</dt>
+ <dd>The definition of the outline of a glyph, using the
+ same syntax as for the <a>'path/d'</a> attribute on a <a>'path'</a>
+ element. See <a href="paths.html#PathData">Path data</a>.<br />
+ See below for a discussion of this attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphElementOrientationAttribute"><span
+ class="adef">orientation</span> = "<span
+ class="attr-value">h | v</span>"</dt>
+ <dd>Indicates that the given glyph is only to be used for a
+ particular inline-progression-direction (i.e., horizontal
+ or vertical). If the attribute is not specified, then the
+ glyph can be used in all cases (i.e., both horizontal and
+ vertical inline-progression-direction).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphElementArabicFormAttribute"><span
+ class="adef">arabic-form</span> = "<span
+ class="attr-value">initial | medial | terminal |
+ isolated</span>"</dt>
+ <dd>For Arabic glyphs, indicates which of the four possible
+ forms this glyph represents.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphElementLangAttribute"><span
+ class="adef">lang</span> = "<span
+ class="attr-value">%LanguageCodes;</span>"</dt>
+ <dd>The attribute value is a comma-separated list of
+ language names as defined in
+ <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a>
+ [<a href="refs.html#ref-BCP47">BCP47</a>].
+ The glyph can be used if the <a>'xml:lang'</a> attribute exactly
+ matches one of the languages given in the value of this
+ parameter, or if the <a>'xml:lang'</a> attribute exactly
+ equals a prefix of one of the languages given in the value
+ of this parameter such that the first tag character
+ following the prefix is "-".<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphElementHorizAdvXAttribute"><span
+ class="adef">horiz-adv-x</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The horizontal advance after rendering the glyph in
+ horizontal orientation. If the attribute is not specified,
+ the effect is as if the attribute were set to the value of
+ the font's <a>'font/horiz-adv-x'</a> attribute.<br />
+ Glyph widths are required to be non-negative, even if the
+ glyph is typically rendered right-to-left, as in Hebrew and
+ Arabic scripts.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphElementVertOriginXAttribute"><span
+ class="adef">vert-origin-x</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The X-coordinate in the font coordinate system of the
+ origin of the glyph to be used when drawing vertically
+ oriented text.<br />
+ If the attribute is not specified, the effect is as if the
+ attribute were set to the value of the font's <a>'font/vert-origin-x'</a>
+ attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphElementVertOriginYAttribute"><span
+ class="adef">vert-origin-y</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The Y-coordinate in the font coordinate system of the
+ origin of a glyph to be used when drawing vertically
+ oriented text.<br />
+ If the attribute is not specified, the effect is as if the
+ attribute were set to the value of the font's <a>'font/vert-origin-y'</a>
+ attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphElementVertAdvYAttribute"><span
+ class="adef">vert-adv-y</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The vertical advance after rendering a glyph in
+ vertical orientation.<br />
+ If the attribute is not specified, the effect is as if the
+ attribute were set to the value of the font's <a>'font/vert-adv-y'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+ <p>The graphics for the <a>'glyph'</a> can be specified using
+ either the <a>'d'</a> attribute or arbitrary SVG as
+ content within the <a>'glyph'</a>.</p>
+ <p>If the <a>'d'</a> attribute is specified, then the
+ path data within this attribute is processed as follows:</p>
+ <ul>
+ <li>Any relative coordinates within the path data
+ specification are converted into equivalent absolute
+ coordinates</li>
+ <li>Each of these absolute coordinates is transformed from
+ the font coordinate system into the <a>'text'</a> element's current
+ coordinate system such that the origin of the font coordinate
+ system is properly positioned and rotated to align with the
+ <a href="text.html#CurrentTextPosition">current text
+ position</a> and orientation for the glyph, and scaled so
+ that the correct <a>'font-size'</a> is achieved.</li>
+ <li>The resulting, transformed path specification is rendered
+ as if it were a <a>'path'</a> element, using the
+ styling properties that apply to the characters which
+ correspond to the given glyph, and ignoring any styling
+ properties specified on the <a>'font element'</a> element or the
+ <a>'glyph'</a> element.</li>
+ </ul>
+ <p>If the <a>'glyph'</a> has child
+ elements, then those child elements are rendered in a manner
+ similar to how the <a>'use'</a> element renders a
+ referenced symbol. The rendering effect is as if the contents
+ of the referenced <a>'glyph'</a>
+ element were deeply cloned into a separate non-exposed DOM
+ tree. Because the cloned DOM tree is non-exposed, the SVG DOM
+ does not show the cloned instance.</p>
+ <p>For user agents that support <a
+ href="styling.html#StylingWithCSS">Styling with CSS</a>, the
+ conceptual deep cloning of the referenced <a>'glyph'</a> element into a non-exposed
+ DOM tree also copies any property values resulting from
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html">the CSS cascade</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 6)
+ on the referenced <a>'glyph'</a> and
+ its contents, and also applies any property values on the
+ <a>'font element'</a> element. CSS2 selectors
+ can be applied to the original (i.e., referenced) elements
+ because they are part of the formal document structure. CSS2
+ selectors cannot be applied to the (conceptually) cloned DOM
+ tree because its contents are not part of the formal document
+ structure.</p>
+ <p>Property inheritance, however, works as if the referenced
+ <a>'glyph'</a> had been textually
+ included as a deeply cloned child within the document tree. The
+ referenced <a>'glyph'</a> inherits
+ properties from the element that contains the characters that
+ correspond to the <a>'glyph'</a>.
+ The <a>'glyph'</a> does not inherit
+ properties from the <a>'font element'</a> element's original
+ parents.</p>
+ <p>In the generated content, for each instance of a given <a>'glyph'</a>, a
+ <a>'g'</a> is created which carries
+ with it all property values resulting from the CSS cascade
+ on the <a>'font element'</a> element for the
+ referenced <a>'glyph'</a>. Within
+ this <a>'g'</a> is another <a>'g'</a> which carries with it all
+ property values resulting from the CSS cascade
+ on the <a>'glyph'</a> element. The
+ original contents of the <a>'glyph'</a> element are deep-cloned
+ within the inner <a>'g'</a> element.</p>
+ <p>If the <a>'glyph'</a> has both a
+ <a>'d'</a> attribute and child elements,
+ the <a>'d'</a> attribute is rendered first, and
+ then the child elements.</p>
+ <p>In general, the <a>'d'</a> attribute renders in the same
+ manner as system fonts. For example, a dashed pattern will
+ usually look the same if applied to a system font or to an SVG
+ font which defines its glyphs using the <a>'d'</a> attribute. Many implementations
+ will be able to render glyphs defined with the <a>'d'</a> attribute quickly and will be
+ able to use a font cache for further performance gains.</p>
+ <p>Defining a glyph by including child elements within the
+ <a>'glyph'</a> gives greater
+ flexibility but more complexity. Different fill and stroke
+ techniques can be used on different parts of the glyphs. For
+ example, the base of an "i" could be red, and the dot could be
+ blue. This approach has an inherent complexity with units. Any
+ properties specified on a text elements which represents a
+ length, such as the <a>'stroke-width'</a> property, might
+ produce surprising results since the length value will be
+ processed in the coordinate system of the glyph.</p>
+
+</edit:with>
+
+<h2 id="MissingGlyphElement">The <span class="element-name">'missing-glyph'</span> element</h2>
+
+<edit:with element='missing-glyph'>
+
+<p>The <a>'missing-glyph'</a> element defines the graphics to use if
+there is an attempt to draw a glyph from a given font and the given
+glyph has not been defined. The attributes on the <a>'missing-glyph'</a>
+element have the same meaning as the corresponding attributes on the
+<a>'glyph'</a> element.</p>
+
+<edit:elementsummary name='missing-glyph'/>
+
+</edit:with>
+
+<h2 id="GlyphSelectionRules">Glyph selection rules</h2>
+
+<p>When determining the glyph(s) to draw a given character sequence, the
+<a>'font element'</a> element is searched from its first <a>'glyph'</a>
+element to its last in logical order to see if the upcoming sequence
+of Unicode characters to be rendered matches the sequence of Unicode
+characters specified in the <a>'glyph/unicode'</a> attribute for the
+given <a>'glyph'</a> element. The first successful match is used. Thus,
+the "ffl" ligature needs to be defined in the font before the "f" glyph;
+otherwise, the "ffl" will never be selected.</p>
+
+<p>Note that any occurrences of <a>'altGlyph'</a> take precedence over
+the above glyph selection rules within an SVG font.</p>
+
+<h2 id="KernElements">The <span class="element-name">'hkern'</span> and <span class="element-name">'vkern'</span> elements</h2>
+
+ <p>The <a>'hkern'</a> and <a>'vkern'</a> elements define kerning
+ pairs for horizontally-oriented and vertically-oriented pairs
+ of glyphs, respectively.</p>
+ <p>Kern pairs identify pairs of glyphs within a single font
+ whose inter-glyph spacing is adjusted when the pair of glyphs
+ are rendered next to each other. In addition to the requirement
+ that the pair of glyphs are from the same font, SVG font
+ kerning happens only when the two glyphs correspond to
+ characters which have the same values for properties <a>'font-family'</a>,
+ <a>'font-size'</a>, <a>'font-style'</a>, <a>'font-weight'</a>,
+ <a>'font-variant'</a>, <a>'font-stretch'</a>, <a>'font-size-adjust'</a>
+ and <a>'font property'</a>.</p>
+ <p>An example of a kerning pair are the letters "Va", where the
+ typographic result might look better if the letters "V" and the
+ "a" were rendered slightly closer together.</p>
+ <p>Right-to-left and bidirectional text in SVG is laid out in a
+ two-step process, which is described in <a
+ href="text.html#RelationshipWithBiDirectionality">Relationship
+ with bidirectionality</a>. If SVG fonts are used, before
+ kerning is applied, characters are re-ordered into
+ left-to-right (or top-to-bottom, for vertical text) visual
+ rendering order. Kerning from SVG fonts is then applied on
+ pairs of glyphs which are rendered contiguously. The first
+ glyph in the kerning pair is the left (or top) glyph in visual
+ rendering order. The second glyph in the kerning pair is the
+ right (or bottom) glyph in the pair.</p>
+ <p>For convenience to font designers and to minimize file
+ sizes, a single <a>'hkern'</a> and
+ <a>'vkern'</a> can define a single
+ kerning adjustment value between one set of glyphs (e.g., a
+ range of Unicode characters) and another set of glyphs (e.g.,
+ another range of Unicode characters).</p>
+
+ <p id="HKernElement">The <a>'hkern'</a> element
+ defines kerning pairs and adjustment values in the horizontal
+ advance value when drawing pairs of glyphs which the two glyphs
+ are contiguous and are both rendered horizontally (i.e.,
+ side-by-side). The spacing between characters is reduced by the
+ kerning adjustment. (Negative kerning adjustments increase the
+ spacing between characters.)</p>
+
+ <p id="VKernElement">The <a>'vkern'</a> element
+ defines kerning pairs and adjustment values in the vertical
+ advance value when drawing pairs of glyphs together when
+ stacked vertically. The spacing between characters is reduced
+ by the kerning adjustment.</p>
+
+<edit:with element='hkern'>
+
+<edit:elementsummary name='hkern'/>
+
+<edit:elementsummary name='vkern'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="HKernElementU1Attribute"><span
+ class="adef">u1</span> = "<span
+ class="attr-value">[<character> | <urange> ] [,
+ [<character> | <urange>] ]*</span> "</dt>
+ <dd>A sequence (comma-separated) of Unicode characters
+ (refer to the description of the <a>'glyph/unicode'</a>
+ attribute to the <a>'glyph'</a> element for a
+ description of how to express individual Unicode
+ characters) and/or ranges of Unicode characters (see
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#dataqual">description of ranges of Unicode characters in CSS2</a>;
+ [<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.3) which
+ identify a set of possible first glyphs in the kerning
+ pair. If a given Unicode character within the set has
+ multiple corresponding <a>'glyph'</a> elements (i.e.,
+ there are multiple <a>'glyph'</a> elements with the
+ same <a>'glyph/unicode'</a> attribute value, but
+ different <a>'glyph/glyph-name'</a> values), then all
+ such glyphs are included in the set. Comma is the separator
+ character; thus, to kern a comma, specify the comma as part
+ of a range of Unicode characters or as a glyph name using
+ the <a>'g1'</a> attribute. The total set of
+ possible first glyphs in the kerning pair is the union of
+ glyphs specified by the <a>'u1'</a> and <a>'g1'</a> attributes.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="HKernElementG1Attribute"><span
+ class="adef">g1</span> = "<span
+ class="attr-value"><name> [, <name> ]*</span>
+ "</dt>
+ <dd>A sequence (comma-separated) of glyph names (i.e.,
+ values that match <a>'glyph/glyph-name'</a> attributes
+ on <a>'glyph'</a> elements) which
+ identify a set of possible first glyphs in the kerning
+ pair. All glyphs with the given glyph name are included in
+ the set. The total set of possible first glyphs in the
+ kerning pair is the union of glyphs specified by the
+ <a>'u1'</a> and <a>'g1'</a> attributes.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="HKernElementU2Attribute"><span
+ class="adef">u2</span> = "<span
+ class="attr-value">[<character> | <urange>] [,
+ [<character> | <urange>] ]*</span> "</dt>
+ <dd>Same as the <a>'u1'</a> attribute, except that <a>'u2'</a>
+ specifies possible second glyphs in the kerning pair.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="HKernElementG2Attribute"><span
+ class="adef">g2</span> = "<span
+ class="attr-value"><name> [, <name> ]*</span>
+ "</dt>
+ <dd>Same as the <a>'g1'</a> attribute, except that <a>'g2'</a>
+ specifies possible second
+ glyphs in the kerning pair.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="HKernElementKAttribute"><span
+ class="adef">k</span> = "<span
+ class="attr-value"><number></span>"</dt>
+ <dd>The amount to decrease the spacing between the two
+ glyphs in the kerning pair. The value is in the font
+ coordinate system. This attribute is required.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+
+<p>At least one each of <a>'u1'</a> or <a>'g1'</a> and at least one
+of <a>'u2'</a> or <a>'g2'</a> must be provided.</p>
+
+</edit:with>
+
+<h2 id="FontDescriptions">Describing a font</h2>
+
+<h3 id="FontDescriptionsOverview">Overview of font descriptions</h3>
+
+ <p>A font description provides the bridge between an author's
+ font specification and the font data, which is the data needed
+ to format text and to render the abstract glyphs to which the
+ characters map — the actual scalable outlines or bitmaps. Fonts
+ are referenced by properties, such as the <a>'font-family'</a> property.</p>
+ <p>Each specified font description is added to the font
+ database and so that it can be used to select the relevant font
+ data. The font description contains descriptors such as the
+ location of the font data on the Web, and characterizations of
+ that font data. The font descriptors are also needed to match
+ the font properties to particular font data. The level of
+ detail of a font description can vary from just the name of the
+ font up to a list of glyph widths.</p>
+ <p>For more about font descriptions, refer to the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html">Fonts chapter</a>
+ in the CSS2 specification ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 15).</p>
+
+<h3 id="FontDescriptionsAlternatives">Alternative ways for providing a font description</h3>
+
+ <p>Font descriptions can be specified in either of the
+ following ways:</p>
+ <ul>
+ <li>a <a>'font-face'</a> element</li>
+ <li id="AtFontFace">an <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">@font-face rule</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.1) within a CSS
+ style sheet (only applicable for user agents which support using CSS to
+ style the SVG content)</li>
+ </ul>
+
+<h3 id="FontFaceElement">The <span class="element-name">'font-face'</span> element</h3>
+
+<edit:with element='font-face'>
+
+ <p>The <a>'font-face'</a> element
+ corresponds directly to the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">@font-face facility</a>
+ in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.1). It can be used to describe the
+ characteristics of any font, SVG font or otherwise.</p>
+ <p>When used to describe the characteristics of an SVG font
+ contained within the same document, it is recommended that the
+ <a>'font-face'</a> element be a
+ child of the <a>'font element'</a> element it is describing
+ so that the <a>'font element'</a> element can be
+ self-contained and fully-described. In this case, any
+ <a>'font-face-src'</a> elements within
+ the <a>'font-face'</a> element are
+ ignored as it is assumed that the <a>'font-face'</a> element is describing
+ the characteristics of its parent <a>'font element'</a> element.</p>
+
+<edit:elementsummary name='font-face'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="FontFaceElementFontFamilyAttribute"><span
+ class="adef">font-family</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-font-family">
+ <span class="prop-name">'font-family'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementFontStyleAttribute"><span
+ class="adef">font-style</span> = "<span
+ class="attr-value">all | [ normal | italic | oblique] [,
+ [normal | italic | oblique]]*</span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-font-style">
+ <span class="prop-name">'font-style'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. The style of a font. Takes on the same
+ values as the <a>'font-style property'</a>
+ property, except that a comma-separated list is
+ permitted.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'all'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementFontVariantAttribute"><span
+ class="adef">font-variant</span> = "<span
+ class="attr-value">[normal | small-caps] [,[normal |
+ small-caps]]*</span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-font-variant">
+ <span class="prop-name">'font-variant'</span></a>
+ descriptor within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. Indication of whether this face is the
+ small-caps variant of a font. Takes on the same values as
+ the <a>'font-variant property'</a>
+ property, except that a comma-separated list is
+ permitted.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'normal'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementFontWeightAttribute"><span
+ class="adef">font-weight</span> = "<span
+ class="attr-value">all | [normal | bold | 100 | 200 | 300 |
+ 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 |
+ 200 | 300 | 400 | 500 | 600 | 700 | 800 |
+ 900]]*</span>"</dt>
+ <dd>
+ Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-font-weight">
+ <span class="prop-name">'font-weight'</span></a>
+ descriptor within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>.<br />
+ The weight of a face relative to others in the same font
+ family. Takes on the same values as the <a>'font-weight property'</a>
+ property with three exceptions:
+ <ul>
+ <li>relative keywords (<span class='prop-value'>bolder</span>, <span class='prop-value'>lighter</span>) are not
+ permitted</li>
+ <li>a comma-separated list of values is permitted, for
+ fonts that contain multiple weights</li>
+ <li>an additional keyword, <span class='attr-value'>'all'</span>, is permitted, which
+ means that the font will match for all possible
+ weights; either because it contains multiple weights,
+ or because that face only has a single weight.</li>
+ </ul>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'all'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: no.</span>
+ </dd>
+ <dt id="FontFaceElementFontStretchAttribute"><span
+ class="adef">font-stretch</span> = "<span
+ class="attr-value">all | [ normal | ultra-condensed |
+ extra-condensed | condensed | semi-condensed |
+ semi-expanded | expanded | extra-expanded | ultra-expanded]
+ [, [ normal | ultra-condensed | extra-condensed | condensed
+ | semi-condensed | semi-expanded | expanded |
+ extra-expanded | ultra-expanded] ]*</span>"</dt>
+ <dd>
+ Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-font-stretch">
+ <span class="prop-name">'font-stretch'</span></a>
+ descriptor within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. Indication of the condensed or
+ expanded nature of the face relative to others in the
+ same font family. Takes on the same values as the <a>'font-stretch property'</a>
+ property except that:
+ <ul>
+ <li>relative keywords (<span class='prop-value'>wider</span>, <span class='prop-value'>narrower</span>) are not
+ permitted</li>
+ <li>a comma-separated list is permitted</li>
+ <li>the keyword <span class='attr-value'>'all'</span> is permitted</li>
+ </ul>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'normal'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: no.</span>
+ </dd>
+ <dt id="FontFaceElementFontSizeAttribute"><span
+ class="adef">font-size</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-font-size">
+ <span class="prop-name">'font-size'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementUnicodeRangeAttribute"><span
+ class="adef">unicode-range</span> = "<span
+ class="attr-value"><urange> [,
+ <urange>]*</span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-unicode-range">
+ <span class="prop-name">'unicode-range'</span></a>
+ descriptor within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. The range of ISO 10646 characters [<a href="refs.html#ref-UNICODE">UNICODE</a>]
+ possibly covered by the glyphs in the font. Except for any
+ additional information provided in this specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#dataqual">normative definition of the attribute</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.3).<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'U+0-10FFFF'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementUnitsPerEmAttribute"><span
+ class="adef">units-per-em</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-units-per-em">
+ <span class="prop-name">'units-per-em'</span></a>
+ descriptor within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. The number of coordinate units on the
+ em square, the size of the design grid on which glyphs are
+ laid out.<br />
+ This value is almost always necessary as nearly every
+ other attribute requires the definition of a design
+ grid.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'1000'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementPanose1Attribute"><span
+ class="adef">panose-1</span> = "<span
+ class="attr-value">[<integer>]{10}</span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-panose-1">
+ <span class="prop-name">'panose-1'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. The Panose-1 number, consisting of ten
+ decimal integers, separated by whitespace. Except for any
+ additional information provided in this specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#matching">normative definition of the attribute</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.6).<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0 0 0 0 0 0 0 0 0 0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementStemvAttribute"><span
+ class="adef">stemv</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-stemv">
+ <span class="prop-name">'stemv'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementStemhAttribute"><span
+ class="adef">stemh</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-stemh">
+ <span class="prop-name">'stemh'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementSlopeAttribute"><span
+ class="adef">slope</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-slope">
+ <span class="prop-name">'slope'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. The vertical stroke angle of the font.
+ Except for any additional information provided in this
+ specification, the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#matching">normative definition of the attribute</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.6).<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementCapHeightAttribute"><span
+ class="adef">cap-height</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-cap-height">
+ <span class="prop-name">'cap-height'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. The height of uppercase glyphs in the
+ font within the font coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementXHeightAttribute"><span
+ class="adef">x-height</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-x-height">
+ <span class="prop-name">'x-height'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. The height of lowercase glyphs in the
+ font within the font coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementAccentHeightAttribute"><span
+ class="adef">accent-height</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>The distance from the origin to the top of accent
+ characters, measured by a distance within the font
+ coordinate system.<br />
+ If the attribute is not specified, the effect is as if the
+ attribute were set to the value of the <a>'ascent'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementAscentAttribute"><span
+ class="adef">ascent</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-ascent">
+ <span class="prop-name">'ascent'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. The maximum unaccented height of the
+ font within the font coordinate system.<br />
+ If the attribute is not specified, the effect is as if the
+ attribute were set to the difference between the <a>'units-per-em'</a>
+ value and the <a>'font/vert-origin-y'</a> value for the
+ corresponding font.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementDescentAttribute"><span
+ class="adef">descent</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-descent">
+ <span class="prop-name">'descent'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. The maximum unaccented depth of the
+ font within the font coordinate system.<br />
+ If the attribute is not specified, the effect is as if the
+ attribute were set to the <a>'font/vert-origin-y'</a> value for the
+ corresponding font.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementWidthsAttribute"><span
+ class="adef">widths</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-widths">
+ <span class="prop-name">'widths'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementBboxAttribute"><span
+ class="adef">bbox</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-bbox">
+ <span class="prop-name">'bbox'</span></a> descriptor within
+ an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementIdeographicAttribute"><span
+ class="adef">ideographic</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>For horizontally oriented glyph layouts, indicates the
+ alignment coordinate for glyphs to achieve ideographic
+ baseline alignment. The value is an offset in the font
+ coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementAlphabeticAttribute"><span
+ class="adef">alphabetic</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-baseline">
+ <span class="prop-name">'baseline'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. For horizontally oriented glyph
+ layouts, indicates the alignment coordinate for glyphs to
+ achieve alphabetic baseline alignment. The value is an
+ offset in the font coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementMathematicalAttribute"><span
+ class="adef">mathematical</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Same syntax and semantics as the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-mathline">
+ <span class="prop-name">'mathline'</span></a> descriptor
+ within an <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">
+ @font-face rule</a>. For horizontally oriented glyph
+ layouts, indicates the alignment coordinate for glyphs to
+ achieve mathematical baseline alignment. The value is an
+ offset in the font coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementHangingAttribute"><span
+ class="adef">hanging</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>For horizontally oriented glyph layouts, indicates the
+ alignment coordinate for glyphs to achieve hanging baseline
+ alignment. The value is an offset in the font coordinate
+ system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementVertIdeographicAttribute"><span
+ class="adef">v-ideographic</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>For vertically oriented glyph layouts, indicates the
+ alignment coordinate for glyphs to achieve ideographic
+ baseline alignment. The value is an offset in the font
+ coordinate system relative to the glyph-specific <a>'glyph/vert-origin-x'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementVertAlphabeticAttribute"><span
+ class="adef">v-alphabetic</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>For vertically oriented glyph layouts, indicates the
+ alignment coordinate for glyphs to achieve alphabetic
+ baseline alignment. The value is an offset in the font
+ coordinate system relative to the glyph-specific <a>'glyph/vert-origin-x'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementVertMathematicalAttribute"><span
+ class="adef">v-mathematical</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>For vertically oriented glyph layouts, indicates the
+ alignment coordinate for glyphs to achieve mathematical
+ baseline alignment. The value is an offset in the font
+ coordinate system relative to the glyph-specific <a>'glyph/vert-origin-x'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementVertHangingAttribute"><span
+ class="adef">v-hanging</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>For vertically oriented glyph layouts, indicates the
+ alignment coordinate for glyphs to achieve hanging baseline
+ alignment. The value is an offset in the font coordinate
+ system relative to the glyph-specific <a>'glyph/vert-origin-x'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementUnderlinePositionAttribute"><span
+ class="adef">underline-position</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>The ideal position of an underline within the font
+ coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementUnderlineThicknessAttribute"><span class="adef">underline-thickness</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>The ideal thickness of an underline, expressed as a
+ length within the font coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementStrikeThroughPositionAttribute"><span class="adef">strikethrough-position</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>The ideal position of a strike-through within the font
+ coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementStrikeThroughThicknessAttribute"><span class="adef">strikethrough-thickness</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>The ideal thickness of a strike-through, expressed as a
+ length within the font coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementOverlinePositionAttribute"><span
+ class="adef">overline-position</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>The ideal position of an overline within the font
+ coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="FontFaceElementOverlineThicknessAttribute"><span
+ class="adef">overline-thickness</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>The ideal thickness of an overline, expressed as a
+ length within the font coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<p>The following elements and attributes correspond to the
+<span class="prop-name">'src'</span> descriptor within an
+@font-face rule. (Refer to the descriptions of the
+<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions">@font-face rule</a> and
+<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-src">'src' descriptor</a>
+in the CSS2 specification ([<a href="refs.html#ref-CSS2">CSS2</a>],
+sections 15.3.1 and 15.3.5.)</p>
+
+<h3 id="FontFaceSrcElement">The <span class="element-name">'font-face-src'</span> element</h3>
+
+<edit:with element='font-face-src'>
+
+<p>The <a>'font-face-src'</a> element, together with the
+<a>'font-face-uri'</a> and <a>'font-face-format'</a> elements described in the
+following sections, correspond to the <span class='prop-name'>'src'</span>
+descriptor within an @font-face rule. (Refer to the descriptions of the
+<a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-descriptions'>@font-face rule</a>
+and <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#descdef-src'>'src' descriptor</a>
+in the CSS2 specification ([<a href='refs.html#ref-CSS2'>CSS2</a>], sections
+15.3.1 and 15.3.5).</p>
+
+<p>A <a>'font-face-src'</a> element contains <a>'font-face-uri'</a> and
+<a>'font-face-name'</a> elements, which are used for referencing external
+and local fonts, respectively.</p>
+
+<edit:elementsummary name='font-face-src'/>
+
+</edit:with>
+
+<h3 id="FontFaceURIElement">The <span class='element-name'>'font-face-uri'</span> and <span class='element-name'>'font-face-format'</span> elements</h3>
+
+<edit:with element='font-face-uri'>
+
+<p>The <a>'font-face-uri'</a> element is used within a <a>'font-face-src'</a>
+element to reference a font defined inside or outside of the current SVG
+document.</p>
+
+<p>When a <a>'font-face-uri'</a> is referencing an <a href='#SVGFontsOverview'>SVG font</a>,
+then that reference must be to an SVG <a>'font element'</a> element, therefore
+requiring the use of a fragment identifier [<a href='refs.html#ref-RFC3986'>RFC3986</a>].
+The referenced <a>'font element'</a> element can be local (i.e., within the same
+document as the <a>'font-face-uri'</a> element) or remote (i.e., within a
+different document).</p>
+
+<edit:elementsummary name='font-face-uri'/>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="FontFaceUriElementHrefAttribute"><span class='adef'>xlink:href</span> =
+ "<span class='attr-value'><a href='types.html#DataTypeIRI'><IRI></a></span>"</dt>
+ <dd>
+ The <a>'xlink:href'</a> attribute specifies the location of the referenced
+ font.<br/>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span>
+ </dd>
+ </dl>
+</div>
+
+</edit:with>
+
+<edit:with element='font-face-format'>
+
+<p>Child <a>'font-face-format'</a> elements of a <a>'font-face-uri'</a>
+element are used to specify the supported formats of the font referenced by that
+<a>'font-face-uri'</a> element. They correspond to entries in a
+<span class='prop-value'>format(…)</span> clause of the
+<span class='prop-name'>'src'</span> descriptor in an @font-face rule.</p>
+
+<div id="FontFaceFormatElement">
+<edit:elementsummary name='font-face-format'/>
+</div>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="FontFaceFormatElementStringAttribute"><span class='adef'>string</span> =
+ "<span class='attr-value'><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dd>
+ The <a>'string'</a> attribute is a hint to the user agent, and specifies
+ a list of formats that the font referenced by the parent <a>'font-face-uri'</a>
+ element supports. The syntax of the attribute value is a format string
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#referencing">as defined in CSS2</a>,
+ such as <span class='attr-value'>'truetype'</span>. Refer to the description of the
+ <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#referencing'>'src' descriptor</a>
+ in CSS2 for details on how the format hint is interpreted
+ ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 15.3.5).<br/>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span>
+ </dd>
+ </dl>
+</div>
+
+</edit:with>
+
+<h3 id="FontFaceNameElement">The <span class='element-name'>'font-face-name'</span> element</h3>
+
+<edit:with element='font-face-name'>
+
+<p>The <a>'font-face-name'</a> element is used within a <a>'font-face-src'</a>
+element to reference a local font by name. It corresponds to a <span class='prop-value'>local(…)</span>
+clause in an @font-face rule <span class='prop-name'>'src'</span> descriptor.</p>
+
+<edit:elementsummary name='font-face-name'/>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="FontFaceNameElementNameAttribute"><span class='adef'>name</span> =
+ "<span class='attr-value'><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dd>
+ The <a>'name'</a> attribute specifies the name of a local font. Unlike
+ the syntax allowed between the parentheses of the <span class='prop-value'>local(…)</span>
+ clause in an @font-face rule <span class='prop-name'>'src'</span> descriptor,
+ the font name specified in this attribute is not surrounded in single or
+ double quotes. Refer to the description of the <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#referencing'>'src' descriptor</a>
+ in CSS2 for details on how the font name is interpreted
+ ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 15.3.5).<br/>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span>
+ </dd>
+ </dl>
+</div>
+
+</edit:with>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGFontElement">Interface SVGFontElement</h3>
+
+<edit:interface name="::svg::SVGFontElement"/>
+
+<h3 id="InterfaceSVGGlyphElement">Interface SVGGlyphElement</h3>
+
+<edit:interface name="::svg::SVGGlyphElement"/>
+
+<h3 id="InterfaceSVGMissingGlyphElement">Interface SVGMissingGlyphElement</h3>
+
+<edit:interface name="::svg::SVGMissingGlyphElement"/>
+
+<h3 id="InterfaceSVGHKernElement">Interface SVGHKernElement</h3>
+
+<edit:interface name="::svg::SVGHKernElement"/>
+
+<h3 id="InterfaceSVGVKernElement">Interface SVGVKernElement</h3>
+
+<edit:interface name="::svg::SVGVKernElement"/>
+
+<h3 id="InterfaceSVGFontFaceElement">Interface SVGFontFaceElement</h3>
+
+<edit:interface name="::svg::SVGFontFaceElement"/>
+
+<h3 id="InterfaceSVGFontFaceSrcElement">Interface SVGFontFaceSrcElement</h3>
+
+<edit:interface name="::svg::SVGFontFaceSrcElement"/>
+
+<h3 id="InterfaceSVGFontFaceUriElement">Interface SVGFontFaceUriElement</h3>
+
+<edit:interface name="::svg::SVGFontFaceUriElement"/>
+
+<h3 id="InterfaceSVGFontFaceFormatElement">Interface SVGFontFaceFormatElement</h3>
+
+<edit:interface name="::svg::SVGFontFaceFormatElement"/>
+
+<h3 id="InterfaceSVGFontFaceNameElement">Interface SVGFontFaceNameElement</h3>
+
+<edit:interface name="::svg::SVGFontFaceNameElement"/>
+
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/i18n.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Internationalization Support</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Internationalization Support</h1>
+
+<p class="normativity"><em>This appendix is informative, not normative.</em></p>
+
+<h2 id="Intro">Introduction</h2>
+
+<p>This appendix provides a brief summary of SVG's support for
+internationalization. The appendix is hyperlinked to the sections of the
+specification which elaborate on particular topics.</p>
+
+<h2 id="InternationalizationAndSVG">Internationalization and SVG</h2>
+
+<p>SVG is an application of XML
+[<a href="refs.html#ref-XML10">XML10</a>]
+and thus supports Unicode
+[<a href="refs.html#ref-UNICODE">UNICODE</a>],
+which defines a standard universal character set.</p>
+
+<p>Additionally, SVG provides a mechanism for precise control of
+the glyphs used to draw text strings, which is described in <a
+href="text.html#AlternateGlyphs">Alternate glyphs</a>. This facility
+provides:</p>
+
+<ul>
+ <li>the ability to specify the rendering of particular glyphs
+ which might not be accessible when defining character data using
+ Unicode</li>
+
+ <li>the ability to override the user agent's character-to-glyph
+ algorithms</li>
+
+ <li>the ability to follow the guidelines for normalizing character
+ data for the purposes of enhanced interoperability (see
+ <a href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character Model for the World Wide Web 1.0: Fundamentals</cite></a>
+ [<a href="refs.html#ref-CHARMOD">CHARMOD</a>]), while still
+ having precise control over the glyphs that are drawn.</li>
+</ul>
+
+<p>SVG supports:</p>
+
+<ul>
+ <li>Horizontal, left-to-right text found in Roman scripts (see the
+ <a>'writing-mode'</a> property)</li>
+
+ <li>Vertical and vertical-ideographic text (see the <a>'writing-mode'</a>
+ property)</li>
+
+ <li>Bidirectional text (for languages such as Arabic and Hebrew - see
+ the <a>'direction'</a> and <a>'unicode-bidi'</a> properties)</li>
+</ul>
+
+<p><a href="fonts.html#SVGFonts">SVG fonts</a>
+support contextual glyph selection for
+<a href="fonts.html#GlyphElementArabicFormAttribute">Arabic</a> and
+<a href="fonts.html#GlyphElementLangAttribute">Han</a> text.</p>
+
+<p id="I18nTextSubstitution">Multi-language SVG documents are possible
+by utilizing the <a>'systemLanguage'</a> attribute to have different
+text strings appear based on the client machine's language setting.</p>
+
+<h2 id="SVGInternationalizationGuidelines">SVG Internationalization Guidelines</h2>
+
+<p>SVG generators should follow W3C guidelines for normalizing character
+data [<a href="refs.html#ref-CHARMOD">CHARMOD</a>]. When precise
+control over glyph selection is required, use the facilities for
+<a href="text.html#AlternateGlyphs">Alternate glyphs</a> to override the
+user agent's character-to-glyph mapping algorithms.</p>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/idl.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>IDL Definitions</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>IDL Definitions</h1>
+
+<p class="normativity"><strong>This appendix is normative.</strong></p>
+
+<p>This appendix contains the complete OMG IDL for the SVG Document Object
+Model definitions. The IDL is also available at:</p>
+
+<pre><edit:locallink href="svg.idl"/></pre>
+
+<p>The SVG IDL defines the model for the SVG DOM. Note that the SVG IDL is
+defined such that some interfaces have more than one base class. The different
+standard language bindings for the SVG DOM are responsible for defining how
+to map all aspects of the SVG DOM into the given language, including how the
+language should implement interfaces with more than one base class.</p>
+
+<edit:completeidl modules='::smil, ::svg'/>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/idl2java.xsl Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,130 @@
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+ xmlns:idl='http://mcc.id.au/ns/idl'
+ xmlns:x='http://mcc.id.au/ns/local'
+ version='2.0'>
+
+ <xsl:output method='text'/>
+
+ <xsl:template match="/">
+ <xsl:for-each select="//(idl:interface | idl:exception)">
+ <xsl:variable name='interface' select='.'/>
+ <xsl:variable name='module' select='ancestor::idl:module[1]/@scopedname'/>
+ <xsl:variable name='module-part' select='replace(substring-after($module, "::"), "::", ".")'/>
+ <xsl:variable name='package' select='concat("org.w3c.", if ($module-part = "dom") then "" else "dom.", $module-part)'/>
+ <xsl:if test='$module-part = ("svg", "smil")'>
+ <xsl:result-document href='org/w3c/dom/{$module-part}/{@name}.java'>
+ <xsl:text>/*
+ * Copyright (c) 2010 World Wide Web Consortium,
+ *
+ * (Massachusetts Institute of Technology, European Research Consortium for
+ * Informatics and Mathematics, Keio University). All Rights Reserved. This
+ * work is distributed under the W3C(r) Software License [1] in the hope that
+ * it will be useful, but WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * [1] http://www.w3.org/Consortium/Legal/2002/copyright-software-20021231
+ */
+
+</xsl:text>
+ <xsl:text>package </xsl:text><xsl:value-of select='$package'/><xsl:text>; </xsl:text>
+ <xsl:variable name='importrefs' select='distinct-values(.//@ref/string())[id(x:deref(., $interface), $interface)/ancestor::idl:module[1]/@scopedname != $module]'/>
+ <xsl:if test='count($importrefs)'>
+ <xsl:for-each select='$importrefs'>
+ <xsl:sort select='id(x:deref(., $interface), $interface)/@scopedname' case-order='upper-first'/>
+ <xsl:text>import </xsl:text><xsl:value-of select='x:name(id(x:deref(., $interface), $interface), $package)'/><xsl:text>; </xsl:text>
+ </xsl:for-each>
+ <xsl:text> </xsl:text>
+ </xsl:if>
+ <xsl:choose>
+ <xsl:when test="self::idl:interface">public interface <xsl:value-of select='@name'/></xsl:when>
+ <xsl:when test="self::idl:exception">public class <xsl:value-of select='@name'/> extends RuntimeException</xsl:when>
+ </xsl:choose>
+ <xsl:if test='idl:extends'>
+ <xsl:text> extends </xsl:text>
+ <xsl:for-each select='idl:extends'>
+ <xsl:if test='position() != 1'>, </xsl:if>
+ <xsl:value-of select='id(x:deref(@ref, .))/@name'/>
+ </xsl:for-each>
+ </xsl:if>
+ <xsl:text> { </xsl:text>
+ <xsl:if test='self::idl:exception'>
+ <xsl:value-of select='concat(" public ", @name, "(")'/>
+ <xsl:for-each select='idl:member'>
+ <xsl:value-of select='concat(x:type(.), " ", @name, ", ")'/>
+ </xsl:for-each>
+ <xsl:text>String message) { super(message); </xsl:text>
+ <xsl:for-each select='idl:member'>
+ <xsl:value-of select='concat(" this.", @name, " = ", @name, "; ")'/>
+ </xsl:for-each>
+ <xsl:text> } </xsl:text>
+ </xsl:if>
+ <xsl:for-each select='idl:member'>
+ <xsl:value-of select='concat(" public ", x:type(.), " ", @name, "; ")'/>
+ </xsl:for-each>
+ <xsl:for-each select='idl:attribute'>
+ <xsl:variable name="fixedname" select="replace(@name, 'xml', 'XML')"/>
+ <xsl:value-of select='concat(" ", x:type(.), " get", upper-case(substring($fixedname, 1, 1)), substring($fixedname, 2), "(); ")'/>
+ <xsl:if test='not(@readonly="true")'>
+ <xsl:value-of select='concat(" void set", upper-case(substring($fixedname, 1, 1)), substring($fixedname, 2), "(", x:type(.), " ", $fixedname, "); ")'/>
+ </xsl:if>
+ </xsl:for-each>
+ <xsl:for-each select='idl:operation'>
+ <xsl:value-of select='concat(" ", x:type(.), " ", @name, "(")'/>
+ <xsl:for-each select='idl:argument'>
+ <xsl:if test='position() != 1'>, </xsl:if>
+ <xsl:value-of select='concat(x:type(.), " ", @name)'/>
+ </xsl:for-each>
+ <xsl:text>); </xsl:text>
+ </xsl:for-each>
+ <xsl:if test='self::idl:exception'>
+ <xsl:for-each select='//idl:const[@associatedexception=current()/@scopedname]'>
+ <xsl:value-of select='concat(" public static final ", x:type(.), " ", @name, " = ", @value, "; ")'/>
+ </xsl:for-each>
+ </xsl:if>
+ <xsl:for-each select='idl:const'>
+ <xsl:value-of select='concat(" final ", x:type(.), " ", @name, " = ", @value, "; ")'/>
+ </xsl:for-each>
+ <xsl:text>} </xsl:text>
+ </xsl:result-document>
+ </xsl:if>
+ </xsl:for-each>
+ </xsl:template>
+
+ <xsl:function name='x:name'>
+ <xsl:param name='type'/>
+ <xsl:param name='thispackage'/>
+ <xsl:variable name='module-part' select='replace(substring-after($type/ancestor::idl:module[1]/@scopedname, "::"), "::", ".")'/>
+ <xsl:variable name='package' select='concat("org.w3c.", if ($module-part = "dom") then "" else "dom.", $module-part)'/>
+ <xsl:value-of select='if ($thispackage = $package) then $type/@name else concat($package, ".", $type/@name)'/>
+ </xsl:function>
+
+ <xsl:function name='x:type'>
+ <xsl:param name='n'/>
+ <xsl:choose>
+ <xsl:when test='$n/idl:type/idl:scopedname'>
+ <xsl:variable name='s' select='$n/idl:type/idl:scopedname/@name'/>
+ <xsl:value-of select='reverse(tokenize($s, "::"))[1]'/>
+ </xsl:when>
+ <xsl:when test='$n/@type = "DOMString"'>String</xsl:when>
+ <xsl:when test='$n/@type = "unsigned long"'>long</xsl:when>
+ <xsl:when test='$n/@type = "unsigned short"'>short</xsl:when>
+ <xsl:when test='$n/@type = "octet"'>byte</xsl:when>
+ <xsl:otherwise><xsl:value-of select='$n/@type'/></xsl:otherwise>
+ </xsl:choose>
+ </xsl:function>
+
+ <xsl:function name='x:deref'>
+ <xsl:param name='s'/>
+ <xsl:param name='ctx' as='node()'/>
+ <xsl:variable name='n' select='id($s, $ctx)'/>
+ <xsl:choose>
+ <xsl:when test='$n/self::idl:typedef/idl:type/idl:scopedname'>
+ <xsl:copy-of select='x:deref($n/idl:type/idl:scopedname/@ref, $ctx)'/>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:copy-of select='$s'/>
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:function>
+</xsl:stylesheet>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/anim01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,56 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="3cm" viewBox="0 0 800 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example anim01 - demonstrate animation elements</desc>
+ <rect x="1" y="1" width="798" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <!-- The following illustrates the use of the 'animate' element
+ to animate a rectangles x, y, and width attributes so that
+ the rectangle grows to ultimately fill the viewport. -->
+ <rect id="RectElement" x="300" y="100" width="300" height="100"
+ fill="rgb(255,255,0)" >
+ <animate attributeName="x" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="0" />
+ <animate attributeName="y" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="0" />
+ <animate attributeName="width" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="800" />
+ <animate attributeName="height" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="300" />
+ </rect>
+
+ <!-- Set up a new user coordinate system so that
+ the text string's origin is at (0,0), allowing
+ rotation and scale relative to the new origin -->
+ <g transform="translate(100,100)" >
+ <!-- The following illustrates the use of the 'set', 'animateMotion',
+ 'animateColor' and 'animateTransform' elements. The 'text' element
+ below starts off hidden (i.e., invisible). At 3 seconds, it:
+ * becomes visible
+ * continuously moves diagonally across the viewport
+ * changes color from blue to dark red
+ * rotates from -30 to zero degrees
+ * scales by a factor of three. -->
+ <text id="TextElement" x="0" y="0"
+ font-family="Verdana" font-size="35.27" visibility="hidden" >
+ It's alive!
+ <set attributeName="visibility" attributeType="CSS" to="visible"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateMotion path="M 0 0 L 100 100"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateColor attributeName="fill" attributeType="CSS"
+ from="rgb(0,0,255)" to="rgb(128,0,0)"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" from="-30" to="0"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" from="1" to="3" additive="sum"
+ begin="3s" dur="6s" fill="freeze" />
+ </text>
+ </g>
+</svg>
+
Binary file master/images/animate/anim01a.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/anim01a.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,60 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="256px" height="91px" viewBox="0 0 800 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example anim01 - demonstrate animation elements</desc>
+ <rect x="1" y="1" width="798" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <!-- The following illustrates the use of the 'animate' element
+ to animate a rectangles x, y, and width attributes so that
+ the rectangle grows to ultimately fill the viewport. -->
+ <rect id="RectElement" x="300" y="100" width="300" height="100"
+ fill="rgb(255,255,0)" >
+<!--
+ <animate attributeName="x" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="0" />
+ <animate attributeName="y" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="0" />
+ <animate attributeName="width" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="800" />
+ <animate attributeName="height" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="300" />
+-->
+ </rect>
+
+ <!-- Set up a new user coordinate system so that
+ the text string's origin is at (0,0), allowing
+ rotation and scale relative to the new origin -->
+ <g transform="translate(100,100)" >
+ <!-- The following illustrates the use of the 'set', 'animateMotion',
+ 'animateColor' and 'animateTransform' elements. The 'text' element
+ below starts off hidden (i.e., invisible). At 3 seconds, it:
+ * becomes visible
+ * continuously moves diagonally across the viewport
+ * changes color from blue to dark red
+ * rotates from -30 to zero degrees
+ * scales by a factor of three. -->
+ <text id="TextElement" x="0" y="0"
+ font-family="Verdana" font-size="35.27" visibility="hidden" >
+ It's alive!
+<!--
+ <set attributeName="visibility" attributeType="CSS" to="visible"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateMotion path="M 0 0 L 100 100"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateColor attributeName="fill" attributeType="CSS"
+ from="rgb(0,0,255)" to="rgb(128,0,0)"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" from="-30" to="0"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" from="1" to="3" additive="sum"
+ begin="3s" dur="6s" fill="freeze" />
+-->
+ </text>
+ </g>
+</svg>
+
Binary file master/images/animate/anim01b.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/anim01b.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,62 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="256px" height="91px" viewBox="0 0 800 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example anim01 - demonstrate animation elements</desc>
+ <rect x="1" y="1" width="798" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <!-- The following illustrates the use of the 'animate' element
+ to animate a rectangles x, y, and width attributes so that
+ the rectangle grows to ultimately fill the viewport. -->
+ <rect id="RectElement" x="200" y="66.67" width="466.67" height="166.67"
+ fill="rgb(255,255,0)" >
+<!--
+ <animate attributeName="x" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="0" />
+ <animate attributeName="y" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="0" />
+ <animate attributeName="width" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="800" />
+ <animate attributeName="height" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="300" />
+-->
+ </rect>
+
+ <!-- Set up a new user coordinate system so that
+ the text string's origin is at (0,0), allowing
+ rotation and scale relative to the new origin -->
+ <g transform="translate(100,100)" >
+ <!-- The following illustrates the use of the 'set', 'animateMotion',
+ 'animateColor' and 'animateTransform' elements. The 'text' element
+ below starts off hidden (i.e., invisible). At 3 seconds, it:
+ * becomes visible
+ * continuously moves diagonally across the viewport
+ * changes color from blue to dark red
+ * rotates from -30 to zero degrees
+ * scales by a factor of three. -->
+<g transform="translate(0,0) rotate(-30) scale(1)" fill="rgb(0,0,255)">
+ <text id="TextElement" x="0" y="0"
+ font-family="Verdana" font-size="35.27" visibility="visible" >
+ It's alive!
+<!--
+ <set attributeName="visibility" attributeType="CSS" to="visible"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateMotion path="M 0 0 L 100 100"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateColor attributeName="fill" attributeType="CSS"
+ from="rgb(0,0,255)" to="rgb(128,0,0)"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" from="-30" to="0"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" from="1" to="3" additive="sum"
+ begin="3s" dur="6s" fill="freeze" />
+-->
+ </text>
+</g>
+ </g>
+</svg>
+
Binary file master/images/animate/anim01c.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/anim01c.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,62 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="256px" height="91px" viewBox="0 0 800 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example anim01 - demonstrate animation elements</desc>
+ <rect x="1" y="1" width="798" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <!-- The following illustrates the use of the 'animate' element
+ to animate a rectangles x, y, and width attributes so that
+ the rectangle grows to ultimately fill the viewport. -->
+ <rect id="RectElement" x="100" y="33.33" width="633.33" height="233.33"
+ fill="rgb(255,255,0)" >
+<!--
+ <animate attributeName="x" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="0" />
+ <animate attributeName="y" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="0" />
+ <animate attributeName="width" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="800" />
+ <animate attributeName="height" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="300" />
+-->
+ </rect>
+
+ <!-- Set up a new user coordinate system so that
+ the text string's origin is at (0,0), allowing
+ rotation and scale relative to the new origin -->
+ <g transform="translate(100,100)" >
+ <!-- The following illustrates the use of the 'set', 'animateMotion',
+ 'animateColor' and 'animateTransform' elements. The 'text' element
+ below starts off hidden (i.e., invisible). At 3 seconds, it:
+ * becomes visible
+ * continuously moves diagonally across the viewport
+ * changes color from blue to dark red
+ * rotates from -30 to zero degrees
+ * scales by a factor of three. -->
+<g transform="translate(50,50) rotate(-15) scale(2)" fill="rgb(64,0,128)">
+ <text id="TextElement" x="0" y="0"
+ font-family="Verdana" font-size="35.27" visibility="visible" >
+ It's alive!
+<!--
+ <set attributeName="visibility" attributeType="CSS" to="visible"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateMotion path="M 0 0 L 100 100"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateColor attributeName="fill" attributeType="CSS"
+ from="rgb(0,0,255)" to="rgb(128,0,0)"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" from="-30" to="0"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" from="1" to="3" additive="sum"
+ begin="3s" dur="6s" fill="freeze" />
+-->
+ </text>
+</g>
+ </g>
+</svg>
+
Binary file master/images/animate/anim01d.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/anim01d.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,62 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="256px" height="91px" viewBox="0 0 800 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example anim01 - demonstrate animation elements</desc>
+ <rect x="1" y="1" width="798" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <!-- The following illustrates the use of the 'animate' element
+ to animate a rectangles x, y, and width attributes so that
+ the rectangle grows to ultimately fill the viewport. -->
+ <rect id="RectElement" x="0" y="0" width="800" height="300"
+ fill="rgb(255,255,0)" >
+<!--
+ <animate attributeName="x" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="0" />
+ <animate attributeName="y" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="0" />
+ <animate attributeName="width" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="800" />
+ <animate attributeName="height" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="300" />
+-->
+ </rect>
+
+ <!-- Set up a new user coordinate system so that
+ the text string's origin is at (0,0), allowing
+ rotation and scale relative to the new origin -->
+ <g transform="translate(100,100)" >
+ <!-- The following illustrates the use of the 'set', 'animateMotion',
+ 'animateColor' and 'animateTransform' elements. The 'text' element
+ below starts off hidden (i.e., invisible). At 3 seconds, it:
+ * becomes visible
+ * continuously moves diagonally across the viewport
+ * changes color from blue to dark red
+ * rotates from -30 to zero degrees
+ * scales by a factor of three. -->
+<g transform="translate(100,100) rotate(0) scale(3)" fill="rgb(128,0,0)">
+ <text id="TextElement" x="0" y="0"
+ font-family="Verdana" font-size="35.27" visibility="visible" >
+ It's alive!
+<!--
+ <set attributeName="visibility" attributeType="CSS" to="visible"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateMotion path="M 0 0 L 100 100"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateColor attributeName="fill" attributeType="CSS"
+ from="rgb(0,0,255)" to="rgb(128,0,0)"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" from="-30" to="0"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" from="1" to="3" additive="sum"
+ begin="3s" dur="6s" fill="freeze" />
+-->
+ </text>
+</g>
+ </g>
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/animMotion01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,31 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="3cm" viewBox="0 0 500 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example animMotion01 - demonstrate motion animation computations</desc>
+ <rect x="1" y="1" width="498" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <!-- Draw the outline of the motion path in blue, along
+ with three small circles at the start, middle and end. -->
+ <path id="path1" d="M100,250 C 100,50 400,50 400,250"
+ fill="none" stroke="blue" stroke-width="7.06" />
+ <circle cx="100" cy="250" r="17.64" fill="blue" />
+ <circle cx="250" cy="100" r="17.64" fill="blue" />
+ <circle cx="400" cy="250" r="17.64" fill="blue" />
+
+ <!-- Here is a triangle which will be moved about the motion path.
+ It is defined with an upright orientation with the base of
+ the triangle centered horizontally just above the origin. -->
+ <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+ fill="yellow" stroke="red" stroke-width="7.06" >
+
+ <!-- Define the motion path animation -->
+ <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
+ <mpath xlink:href="#path1"/>
+ </animateMotion>
+ </path>
+</svg>
+
Binary file master/images/animate/animMotion01a.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/animMotion01a.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="144px" height="91px" viewBox="0 0 500 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example animMotion01 - demonstrate motion animation computations</desc>
+ <rect x="1" y="1" width="498" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <!-- Draw the outline of the motion path in blue, along
+ with three small circles at the start, middle and end. -->
+ <path d="M100,250 C 100,50 400,50 400,250"
+ fill="none" stroke="blue" stroke-width="7.06" />
+ <circle cx="100" cy="250" r="17.64" fill="blue" />
+ <circle cx="250" cy="100" r="17.64" fill="blue" />
+ <circle cx="400" cy="250" r="17.64" fill="blue" />
+
+ <!-- Here is a triangle which will be moved about the motion path.
+ It is defined with an upright orientation with the base of
+ the triangle centered horizontally just above the origin. -->
+<g transform="translate(100,250) rotate(-90)">
+ <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+ fill="yellow" stroke="red" stroke-width="7.06" >
+
+ <!-- Define the motion path animation -->
+<!--
+ <animateMotion dur="6s" repeatCount="indefinite"
+ path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
+-->
+ </path>
+</g>
+</svg>
+
Binary file master/images/animate/animMotion01b.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/animMotion01b.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="144px" height="91px" viewBox="0 0 500 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example animMotion01 - demonstrate motion animation computations</desc>
+ <rect x="1" y="1" width="498" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <!-- Draw the outline of the motion path in blue, along
+ with three small circles at the start, middle and end. -->
+ <path d="M100,250 C 100,50 400,50 400,250"
+ fill="none" stroke="blue" stroke-width="7.06" />
+ <circle cx="100" cy="250" r="17.64" fill="blue" />
+ <circle cx="250" cy="100" r="17.64" fill="blue" />
+ <circle cx="400" cy="250" r="17.64" fill="blue" />
+
+ <!-- Here is a triangle which will be moved about the motion path.
+ It is defined with an upright orientation with the base of
+ the triangle centered horizontally just above the origin. -->
+<g transform="translate(250,100) rotate(0)">
+ <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+ fill="yellow" stroke="red" stroke-width="7.06" >
+
+ <!-- Define the motion path animation -->
+<!--
+ <animateMotion dur="6s" repeatCount="indefinite"
+ path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
+-->
+ </path>
+</g>
+</svg>
+
Binary file master/images/animate/animMotion01c.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/animMotion01c.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="144px" height="91px" viewBox="0 0 500 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example animMotion01 - demonstrate motion animation computations</desc>
+ <rect x="1" y="1" width="498" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <!-- Draw the outline of the motion path in blue, along
+ with three small circles at the start, middle and end. -->
+ <path d="M100,250 C 100,50 400,50 400,250"
+ fill="none" stroke="blue" stroke-width="7.06" />
+ <circle cx="100" cy="250" r="17.64" fill="blue" />
+ <circle cx="250" cy="100" r="17.64" fill="blue" />
+ <circle cx="400" cy="250" r="17.64" fill="blue" />
+
+ <!-- Here is a triangle which will be moved about the motion path.
+ It is defined with an upright orientation with the base of
+ the triangle centered horizontally just above the origin. -->
+<g transform="translate(400,250) rotate(90)">
+ <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+ fill="yellow" stroke="red" stroke-width="7.06" >
+
+ <!-- Define the motion path animation -->
+<!--
+ <animateMotion dur="6s" repeatCount="indefinite"
+ path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
+-->
+ </path>
+</g>
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/animns01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Demonstration of the resolution of namespaces for animation</title>
+ <!-- at the point of definition, the QName a:href resolves to the namespace
+ name "http://www.w3.org/1999/xlink" and the local name "href" -->
+ <g xmlns:a="http://www.w3.org/1999/xlink">
+ <animate attributeName="a:href" xlink:href="#foo" dur="2s" to="two.png" fill="freeze"/>
+ </g>
+ <!-- at the point of use, the namespace name "http://www.w3.org/1999/xlink"
+ happens to be bound to the namespace prefix 'b' while the prefix
+ 'xlink' is bound to a different namespace name -->
+ <g xmlns:b="http://www.w3.org/1999/xlink" xmlns:xlink="http://example.net/bar">
+ <image xml:id="foo" b:href="one.png" x="35" y="50" width="410" height="160"/>
+ </g>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/dom01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,40 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4cm" height="2cm" viewBox="0 0 400 200"
+ onload="StartAnimation(evt)" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+
+ <script type="application/ecmascript"><![CDATA[
+ var timevalue = 0;
+ var timer_increment = 50;
+ var max_time = 5000;
+ var text_element;
+ function StartAnimation(evt) {
+ text_element = evt.target.ownerDocument.getElementById("TextElement");
+ ShowAndGrowElement();
+ }
+ function ShowAndGrowElement() {
+ timevalue = timevalue + timer_increment;
+ if (timevalue > max_time)
+ return;
+
+ // Scale the text string gradually until it is 20 times larger
+ scalefactor = (timevalue * 20.) / max_time;
+ text_element.setAttribute("transform", "scale(" + scalefactor + ")");
+ // Make the string more opaque
+ opacityfactor = timevalue / max_time;
+ text_element.setAttribute("opacity", opacityfactor);
+
+ // Call ShowAndGrowElement again <timer_increment> milliseconds later.
+ setTimeout("ShowAndGrowElement()", timer_increment)
+ }
+ window.ShowAndGrowElement = ShowAndGrowElement
+ ]]></script>
+ <rect x="1" y="1" width="398" height="198"
+ fill="none" stroke="blue" stroke-width="2"/>
+
+ <g transform="translate(50,150)" fill="red" font-size="7">
+ <text id="TextElement">SVG</text>
+ </g>
+</svg>
Binary file master/images/animate/dom01a.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/dom01a.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="151px" height="76px" viewBox="0 0 400 200"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <rect x="1" y="1" width="398" height="198"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <g transform="translate(50,150)" fill="red" font-size="7" >
+ <text id="TextElement" transform="scale(0)" opacity="0">SVG</text>
+ </g>
+</svg>
+
Binary file master/images/animate/dom01b.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/dom01b.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="151px" height="76px" viewBox="0 0 400 200"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <rect x="1" y="1" width="398" height="198"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <g transform="translate(50,150)" fill="red" font-size="7" >
+ <text id="TextElement" transform="scale(10)" opacity=".5">SVG</text>
+ </g>
+</svg>
+
Binary file master/images/animate/dom01c.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/dom01c.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="151px" height="76px" viewBox="0 0 400 200"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <rect x="1" y="1" width="398" height="198"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <g transform="translate(50,150)" fill="red" font-size="7" >
+ <text id="TextElement" transform="scale(20)" opacity="1">SVG</text>
+ </g>
+</svg>
+
Binary file master/images/animate/keySplines01.png has changed
Binary file master/images/animate/keySplines02.png has changed
Binary file master/images/animate/keySplines03.png has changed
Binary file master/images/animate/keySplines04.png has changed
Binary file master/images/autosp-0.png has changed
Binary file master/images/autosp-1.png has changed
Binary file master/images/bopomofo.png has changed
Binary file master/images/coords/CTM-orig.png has changed
Binary file master/images/coords/CTM.png has changed
Binary file master/images/coords/InitialCoords.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/InitialCoords.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="300px" height="100px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>Example InitialCoords - SVG's initial coordinate system</desc>
+
+ <g fill="none" stroke="black" stroke-width="3" >
+ <line x1="0" y1="1.5" x2="300" y2="1.5" />
+ <line x1="1.5" y1="0" x2="1.5" y2="100" />
+ </g>
+ <g fill="red" stroke="none" >
+ <rect x="0" y="0" width="3" height="3" />
+ <rect x="297" y="0" width="3" height="3" />
+ <rect x="0" y="97" width="3" height="3" />
+ </g>
+ <g font-size="14" font-family="Verdana" >
+ <text x="10" y="20">(0,0)</text>
+ <text x="240" y="20">(300,0)</text>
+ <text x="10" y="90">(0,100)</text>
+ </g>
+</svg>
+
Binary file master/images/coords/Matrix.png has changed
Binary file master/images/coords/MatrixMultiply.png has changed
Binary file master/images/coords/MatrixNested.png has changed
Binary file master/images/coords/MatrixRotate.png has changed
Binary file master/images/coords/MatrixScale.png has changed
Binary file master/images/coords/MatrixSkewX.png has changed
Binary file master/images/coords/MatrixSkewY.png has changed
Binary file master/images/coords/MatrixTranslate.png has changed
Binary file master/images/coords/Nested.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/Nested.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,43 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="400px" height="150px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>Example Nested - Nested transformations</desc>
+ <g fill="none" stroke="black" stroke-width="3" >
+ <!-- Draw the axes of the original coordinate system -->
+ <line x1="0" y1="1.5" x2="400" y2="1.5" />
+ <line x1="1.5" y1="0" x2="1.5" y2="150" />
+ </g>
+ <!-- First, a translate -->
+ <g transform="translate(50,90)">
+ <g fill="none" stroke="red" stroke-width="3" >
+ <line x1="0" y1="0" x2="50" y2="0" />
+ <line x1="0" y1="0" x2="0" y2="50" />
+ </g>
+ <text x="0" y="0" font-size="16" font-family="Verdana" >
+ ....Translate(1)
+ </text>
+ <!-- Second, a rotate -->
+ <g transform="rotate(-45)">
+ <g fill="none" stroke="green" stroke-width="3" >
+ <line x1="0" y1="0" x2="50" y2="0" />
+ <line x1="0" y1="0" x2="0" y2="50" />
+ </g>
+ <text x="0" y="0" font-size="16" font-family="Verdana" >
+ ....Rotate(2)
+ </text>
+ <!-- Third, another translate -->
+ <g transform="translate(130,160)">
+ <g fill="none" stroke="blue" stroke-width="3" >
+ <line x1="0" y1="0" x2="50" y2="0" />
+ <line x1="0" y1="0" x2="0" y2="50" />
+ </g>
+ <text x="0" y="0" font-size="16" font-family="Verdana" >
+ ....Translate(3)
+ </text>
+ </g>
+ </g>
+ </g>
+</svg>
+
Binary file master/images/coords/NestedCalcs.png has changed
Binary file master/images/coords/NewCoordSys.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/NewCoordSys.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,32 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="400px" height="150px"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example NewCoordSys - New user coordinate system</desc>
+ <g fill="none" stroke="black" stroke-width="3" >
+ <!-- Draw the axes of the original coordinate system -->
+ <line x1="0" y1="1.5" x2="400" y2="1.5" />
+ <line x1="1.5" y1="0" x2="1.5" y2="150" />
+ </g>
+ <g>
+ <text x="30" y="30" font-size="20" font-family="Verdana" >
+ ABC (orig coord system)
+ </text>
+ </g>
+ <!-- Establish a new coordinate system, which is
+ shifted (i.e., translated) from the initial coordinate
+ system by 50 user units along each axis. -->
+ <g transform="translate(50,50)">
+ <g fill="none" stroke="red" stroke-width="3" >
+ <!-- Draw lines of length 50 user units along
+ the axes of the new coordinate system -->
+ <line x1="0" y1="0" x2="50" y2="0" stroke="red" />
+ <line x1="0" y1="0" x2="0" y2="50" />
+ </g>
+ <text x="30" y="30" font-size="20" font-family="Verdana" >
+ ABC (translated coord system)
+ </text>
+ </g>
+</svg>
+
Binary file master/images/coords/OrigCoordSys.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/OrigCoordSys.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="400px" height="150px"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example OrigCoordSys - Simple transformations: original picture</desc>
+ <g fill="none" stroke="black" stroke-width="3" >
+ <!-- Draw the axes of the original coordinate system -->
+ <line x1="0" y1="1.5" x2="400" y2="1.5" />
+ <line x1="1.5" y1="0" x2="1.5" y2="150" />
+ </g>
+ <g>
+ <text x="30" y="30" font-size="20" font-family="Verdana" >
+ ABC (orig coord system)
+ </text>
+ </g>
+</svg>
+
Binary file master/images/coords/PreserveAspectRatio.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/PreserveAspectRatio.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
+[ <!ENTITY Smile "
+<rect x='.5' y='.5' width='29' height='39' fill='black' stroke='red'/>
+<g transform='translate(0, 5)'>
+<circle cx='15' cy='15' r='10' fill='yellow'/>
+<circle cx='12' cy='12' r='1.5' fill='black'/>
+<circle cx='17' cy='12' r='1.5' fill='black'/>
+<path d='M 10 19 A 8 8 0 0 0 20 19' stroke='black' stroke-width='2'/>
+</g>
+">
+<!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29'
+fill='none' stroke='blue'/>">
+<!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59'
+fill='none' stroke='blue'/>">
+]>
+
+<svg width="450px" height="300px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>Example PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc>
+ <rect x="1" y="1" width="448" height="298"
+ fill="none" stroke="blue"/>
+ <g font-size="9">
+ <text x="10" y="30">SVG to fit</text>
+ <g transform="translate(20,40)">&Smile;</g>
+ <text x="10" y="110">Viewport 1</text>
+ <g transform="translate(10,120)">&Viewport1;</g>
+ <text x="10" y="180">Viewport 2</text>
+ <g transform="translate(20,190)">&Viewport2;</g>
+
+ <g id="meet-group-1" transform="translate(100, 60)">
+ <text x="0" y="-30">--------------- meet ---------------</text>
+ <g><text y="-10">xMin*</text>&Viewport1;
+ <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
+ width="50" height="30">&Smile;</svg></g>
+ <g transform="translate(70,0)"><text y="-10">xMid*</text>&Viewport1;
+ <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
+ width="50" height="30">&Smile;</svg></g>
+ <g transform="translate(0,70)"><text y="-10">xMax*</text>&Viewport1;
+ <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
+ width="50" height="30">&Smile;</svg></g>
+ </g>
+
+ <g id="meet-group-2" transform="translate(250, 60)">
+ <text x="0" y="-30">---------- meet ----------</text>
+ <g><text y="-10">*YMin</text>&Viewport2;
+ <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
+ width="30" height="60">&Smile;</svg></g>
+ <g transform="translate(50, 0)"><text y="-10">*YMid</text>&Viewport2;
+ <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
+ width="30" height="60">&Smile;</svg></g>
+ <g transform="translate(100, 0)"><text y="-10">*YMax</text>&Viewport2;
+ <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
+ width="30" height="60">&Smile;</svg></g>
+ </g>
+
+ <g id="slice-group-1" transform="translate(100, 220)">
+ <text x="0" y="-30">---------- slice ----------</text>
+ <g><text y="-10">xMin*</text>&Viewport2;
+ <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
+ width="30" height="60">&Smile;</svg></g>
+ <g transform="translate(50,0)"><text y="-10">xMid*</text>&Viewport2;
+ <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
+ width="30" height="60">&Smile;</svg></g>
+ <g transform="translate(100,0)"><text y="-10">xMax*</text>&Viewport2;
+ <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
+ width="30" height="60">&Smile;</svg></g>
+ </g>
+
+ <g id="slice-group-2" transform="translate(250, 220)">
+ <text x="0" y="-30">--------------- slice ---------------</text>
+ <g><text y="-10">*YMin</text>&Viewport1;
+ <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
+ width="50" height="30">&Smile;</svg></g>
+ <g transform="translate(70,0)"><text y="-10">*YMid</text>&Viewport1;
+ <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
+ width="50" height="30">&Smile;</svg></g>
+ <g transform="translate(140,0)"><text y="-10">*YMax</text>&Viewport1;
+ <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
+ width="50" height="30">&Smile;</svg></g>
+ </g>
+ </g>
+</svg>
Binary file master/images/coords/RotateScale.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/RotateScale.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="400px" height="120px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>Example RotateScale - Rotate and scale transforms</desc>
+ <g fill="none" stroke="black" stroke-width="3" >
+ <!-- Draw the axes of the original coordinate system -->
+ <line x1="0" y1="1.5" x2="400" y2="1.5" />
+ <line x1="1.5" y1="0" x2="1.5" y2="120" />
+ </g>
+ <!-- Establish a new coordinate system whose origin is at (50,30)
+ in the initial coord. system and which is rotated by 30 degrees. -->
+ <g transform="translate(50,30)">
+ <g transform="rotate(30)">
+ <g fill="none" stroke="red" stroke-width="3" >
+ <line x1="0" y1="0" x2="50" y2="0" />
+ <line x1="0" y1="0" x2="0" y2="50" />
+ </g>
+ <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
+ ABC (rotate)
+ </text>
+ </g>
+ </g>
+ <!-- Establish a new coordinate system whose origin is at (200,40)
+ in the initial coord. system and which is scaled by 1.5. -->
+ <g transform="translate(200,40)">
+ <g transform="scale(1.5)">
+ <g fill="none" stroke="red" stroke-width="3" >
+ <line x1="0" y1="0" x2="50" y2="0" />
+ <line x1="0" y1="0" x2="0" y2="50" />
+ </g>
+ <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
+ ABC (scale)
+ </text>
+ </g>
+ </g>
+</svg>
+
Binary file master/images/coords/Skew.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/Skew.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="400px" height="120px" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>Example Skew - Show effects of skewX and skewY</desc>
+ <g fill="none" stroke="black" stroke-width="3" >
+ <!-- Draw the axes of the original coordinate system -->
+ <line x1="0" y1="1.5" x2="400" y2="1.5" />
+ <line x1="1.5" y1="0" x2="1.5" y2="120" />
+ </g>
+ <!-- Establish a new coordinate system whose origin is at (30,30)
+ in the initial coord. system and which is skewed in X by 30 degrees. -->
+ <g transform="translate(30,30)">
+ <g transform="skewX(30)">
+ <g fill="none" stroke="red" stroke-width="3" >
+ <line x1="0" y1="0" x2="50" y2="0" />
+ <line x1="0" y1="0" x2="0" y2="50" />
+ </g>
+ <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
+ ABC (skewX)
+ </text>
+ </g>
+ </g>
+ <!-- Establish a new coordinate system whose origin is at (200,30)
+ in the initial coord. system and which is skewed in Y by 30 degrees. -->
+ <g transform="translate(200,30)">
+ <g transform="skewY(30)">
+ <g fill="none" stroke="red" stroke-width="3" >
+ <line x1="0" y1="0" x2="50" y2="0" />
+ <line x1="0" y1="0" x2="0" y2="50" />
+ </g>
+ <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
+ ABC (skewY)
+ </text>
+ </g>
+ </g>
+</svg>
+
Binary file master/images/coords/Units.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/Units.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,45 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="400px" height="200px" viewBox="0 0 4000 2000"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example Units</title>
+ <desc>Illustrates various units options</desc>
+
+ <!-- Frame the picture -->
+ <rect x="5" y="5" width="3990" height="1990"
+ fill="none" stroke="blue" stroke-width="10"/>
+
+ <g fill="blue" stroke="red" font-family="Verdana" font-size="150">
+ <!-- Absolute unit specifiers -->
+ <g transform="translate(400,0)">
+ <text x="-50" y="300" fill="black" stroke="none">Abs. units:</text>
+ <rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
+ <rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
+ <g transform="scale(2)">
+ <rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
+ </g>
+ </g>
+
+ <!-- Relative unit specifiers -->
+ <g transform="translate(1600,0)">
+ <text x="-50" y="300" fill="black" stroke="none">Rel. units:</text>
+ <rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
+ <rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
+ <g transform="scale(2)">
+ <rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
+ </g>
+ </g>
+
+ <!-- Percentages -->
+ <g transform="translate(2800,0)">
+ <text x="-50" y="300" fill="black" stroke="none">Percentages:</text>
+ <rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
+ <rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
+ <g transform="scale(2)">
+ <rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
+ </g>
+ </g>
+ </g>
+</svg>
+
Binary file master/images/coords/ViewBox-Width150.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/ViewBox-Width150.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="150px" height="200px"
+ viewBox="0 0 1500 1000" preserveAspectRatio="none"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example ViewBox - uses the viewBox
+ attribute to automatically create an initial user coordinate
+ system which causes the graphic to scale to fit into the
+ viewport no matter what size the viewport is.</desc>
+
+ <!-- This rectangle goes from (0,0) to (1500,1000) in user space.
+ Because of the viewBox attribute above,
+ the rectangle will end up filling the entire area
+ reserved for the SVG content. -->
+ <rect x="0" y="0" width="1500" height="1000"
+ fill="yellow" stroke="blue" stroke-width="12" />
+
+ <!-- A large, red triangle -->
+ <path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
+
+ <!-- A text string that spans most of the viewport -->
+ <text x="100" y="600" font-size="200" font-family="Verdana" >
+ Stretch to fit
+ </text>
+</svg>
+
Binary file master/images/coords/ViewBox.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/ViewBox.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="300px" height="200px"
+ viewBox="0 0 1500 1000" preserveAspectRatio="none"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example ViewBox - uses the viewBox
+ attribute to automatically create an initial user coordinate
+ system which causes the graphic to scale to fit into the
+ viewport no matter what size the viewport is.</desc>
+
+ <!-- This rectangle goes from (0,0) to (1500,1000) in user space.
+ Because of the viewBox attribute above,
+ the rectangle will end up filling the entire area
+ reserved for the SVG content. -->
+ <rect x="0" y="0" width="1500" height="1000"
+ fill="yellow" stroke="blue" stroke-width="12" />
+
+ <!-- A large, red triangle -->
+ <path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
+
+ <!-- A text string that spans most of the viewport -->
+ <text x="100" y="600" font-size="200" font-family="Verdana" >
+ Stretch to fit
+ </text>
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/geocoord1.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="100" viewBox="0 0 1000 1000">
+
+ <desc>An example that references coordinate data.</desc>
+
+ <metadata>
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:crs="http://www.ogc.org/crs"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <rdf:Description rdf:about="">
+ <!-- The Coordinate Reference System is described
+ through a URI. -->
+ <crs:CoordinateReferenceSystem
+ svg:transform="rotate(-90)"
+ rdf:resource="http://www.example.org/srs/epsg.xml#4326"/>
+ </rdf:Description>
+ </rdf:RDF>
+ </metadata>
+
+ <!-- The actual map content -->
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/geocoord2.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="100" viewBox="0 0 1000 1000">
+
+ <desc>Example using a well known coordinate system.</desc>
+
+ <metadata>
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:crs="http://www.ogc.org/crs"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <rdf:Description rdf:about="">
+ <!-- In case of a well-known Coordinate Reference System
+ an 'Identifier' is enough to describe the CRS -->
+ <crs:CoordinateReferenceSystem svg:transform="rotate(-90) scale(100, 100)">
+ <crs:Identifier>
+ <crs:code>4326</crs:code>
+ <crs:codeSpace>EPSG</crs:codeSpace>
+ <crs:edition>5.2</crs:edition>
+ </crs:Identifier>
+ </crs:CoordinateReferenceSystem>
+ </rdf:Description>
+ </rdf:RDF>
+ </metadata>
+
+ <!-- The actual map content -->
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/coords/geocoord3.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,124 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="100" viewBox="0 0 1000 1000">
+
+ <desc>Coordinate metadata defined within the SVG document</desc>
+
+ <metadata>
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:crs="http://www.ogc.org/crs"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <rdf:Description rdf:about="">
+ <!-- For other CRS it should be entirely defined -->
+ <crs:CoordinateReferenceSystem svg:transform="scale(1,-1)">
+ <crs:NameSet>
+ <crs:name>Mercator projection of WGS84</crs:name>
+ </crs:NameSet>
+ <crs:ProjectedCRS>
+ <!-- The actual definition of the CRS -->
+ <crs:CartesianCoordinateSystem>
+ <crs:dimension>2</crs:dimension>
+ <crs:CoordinateAxis>
+ <crs:axisDirection>north</crs:axisDirection>
+ <crs:AngularUnit>
+ <crs:Identifier>
+ <crs:code>9108</crs:code>
+ <crs:codeSpace>EPSG</crs:codeSpace>
+ <crs:edition>5.2</crs:edition>
+ </crs:Identifier>
+ </crs:AngularUnit>
+ </crs:CoordinateAxis>
+ <crs:CoordinateAxis>
+ <crs:axisDirection>east</crs:axisDirection>
+ <crs:AngularUnit>
+ <crs:Identifier>
+ <crs:code>9108</crs:code>
+ <crs:codeSpace>EPSG</crs:codeSpace>
+ <crs:edition>5.2</crs:edition>
+ </crs:Identifier>
+ </crs:AngularUnit>
+ </crs:CoordinateAxis>
+ </crs:CartesianCoordinateSystem>
+ <crs:CoordinateReferenceSystem>
+ <!-- the reference system of that projected system is
+ WGS84 which is EPSG 4326 in EPSG codeSpace -->
+ <crs:NameSet>
+ <crs:name>WGS 84</crs:name>
+ </crs:NameSet>
+ <crs:Identifier>
+ <crs:code>4326</crs:code>
+ <crs:codeSpace>EPSG</crs:codeSpace>
+ <crs:edition>5.2</crs:edition>
+ </crs:Identifier>
+ </crs:CoordinateReferenceSystem>
+ <crs:CoordinateTransformationDefinition>
+ <crs:sourceDimensions>2</crs:sourceDimensions>
+ <crs:targetDimensions>2</crs:targetDimensions>
+ <crs:ParameterizedTransformation>
+ <crs:TransformationMethod>
+ <!-- the projection is a Mercator projection which is
+ EPSG 9805 in EPSG codeSpace -->
+ <crs:NameSet>
+ <crs:name>Mercator</crs:name>
+ </crs:NameSet>
+ <crs:Identifier>
+ <crs:code>9805</crs:code>
+ <crs:codeSpace>EPSG</crs:codeSpace>
+ <crs:edition>5.2</crs:edition>
+ </crs:Identifier>
+ <crs:description>Mercator (2SP)</crs:description>
+ </crs:TransformationMethod>
+ <crs:Parameter>
+ <crs:NameSet>
+ <crs:name>Latitude of 1st standart parallel</crs:name>
+ </crs:NameSet>
+ <crs:Identifier>
+ <crs:code>8823</crs:code>
+ <crs:codeSpace>EPSG</crs:codeSpace>
+ <crs:edition>5.2</crs:edition>
+ </crs:Identifier>
+ <crs:value>0</crs:value>
+ </crs:Parameter>
+ <crs:Parameter>
+ <crs:NameSet>
+ <crs:name>Longitude of natural origin</crs:name>
+ </crs:NameSet>
+ <crs:Identifier>
+ <crs:code>8802</crs:code>
+ <crs:codeSpace>EPSG</crs:codeSpace>
+ <crs:edition>5.2</crs:edition>
+ </crs:Identifier>
+ <crs:value>0</crs:value>
+ </crs:Parameter>
+ <crs:Parameter>
+ <crs:NameSet>
+ <crs:name>False Easting</crs:name>
+ </crs:NameSet>
+ <crs:Identifier>
+ <crs:code>8806</crs:code>
+ <crs:codeSpace>EPSG</crs:codeSpace>
+ <crs:edition>5.2</crs:edition>
+ </crs:Identifier>
+ <crs:value>0</crs:value>
+ </crs:Parameter>
+ <crs:Parameter>
+ <crs:NameSet>
+ <crs:name>False Northing</crs:name>
+ </crs:NameSet>
+ <crs:Identifier>
+ <crs:code>8807</crs:code>
+ <crs:codeSpace>EPSG</crs:codeSpace>
+ <crs:edition>5.2</crs:edition>
+ </crs:Identifier>
+ <crs:value>0</crs:value>
+ </crs:Parameter>
+ </crs:ParameterizedTransformation>
+ </crs:CoordinateTransformationDefinition>
+ </crs:ProjectedCRS>
+ </crs:CoordinateReferenceSystem>
+ </rdf:Description>
+ </rdf:RDF>
+ </metadata>
+
+ <!-- the actual map content -->
+</svg>
Binary file master/images/cumulative-transform-graph-1.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/cumulative-transform-graph-1.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,95 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="430" height="320" viewBox="0 0 430 320" text-rendering="geometricPrecision">
+ <marker id="arrowhead" markerWidth="16" markerHeight="16" viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" shape-rendering="geometricPrecision">
+ <path d="M0,2 8,5 0,8 z" stroke-linecap="round"/>
+ </marker>
+ <marker id="closed" markerWidth="8" markerHeight="8" viewBox="0 0 8 8" refX="4" refY="4" markerUnits="userSpaceOnUse" overflow="visible">
+ <circle cx="4" cy="4" r="4" fill="blue"/>
+ </marker>
+ <marker id="open" markerWidth="8" markerHeight="8" viewBox="0 0 8 8" refX="4" refY="4" markerUnits="userSpaceOnUse" overflow="visible">
+ <circle cx="4" cy="4" r="4" fill="blue"/>
+ <circle cx="4" cy="4" r="2" fill="#f4f4f4"/>
+ </marker>
+ <linearGradient id="fade" gradientUnits="userSpaceOnUse" x1="160" y1="0" x2="340" y2="0">
+ <stop offset="0" stop-color="blue"/>
+ <stop offset="0.75" stop-color="blue"/>
+ <stop offset="1" stop-color="blue" stop-opacity="0"/>
+ </linearGradient>
+ <rect width="430" height="320" fill="#f4f4f4"/>
+ <g transform="translate(10,4)">
+ <g stroke="#ccc" stroke-dasharray="6 2" shape-rendering="optimizeSpeed">
+ <path d="M20,260 H360
+ M20,240 H360
+ M20,220 H360
+ M20,200 H360
+ M20,180 H360
+ M20,160 H360
+ M20,140 H360
+ M20,120 H360
+ M20,100 H360
+ M20, 80 H360
+ M20, 60 H360"/>
+ </g>
+ <g fill="none" stroke="black" shape-rendering="optimizeSpeed">
+ <path d="M20,260 h-6
+ M20,240 h-6
+ M20,220 h-6
+ M20,200 h-6
+ M20,180 h-6
+ M20,160 h-6
+ M20,140 h-6
+ M20,120 h-6
+ M20,100 h-6
+ M20, 80 h-6
+ M20, 60 h-6"/>
+ <path d="M60,280 v6
+ M100,280 v6
+ M140,280 v6
+ M180,280 v6
+ M220,280 v6
+ M260,280 v6
+ M300,280 v6
+ M340,280 v6"/>
+ </g>
+ <g font-size="12px" text-anchor="middle" font-family="Menlo, monospace">
+ <g text-anchor="middle">
+ <text x="20" y="298">0</text>
+ <text x="60" y="298">2</text>
+ <text x="100" y="298">4</text>
+ <text x="140" y="298">6</text>
+ <text x="180" y="298">8</text>
+ <text x="220" y="298">10</text>
+ <text x="260" y="298">12</text>
+ <text x="300" y="298">14</text>
+ <text x="340" y="298">16</text>
+ </g>
+
+ <g text-anchor="end">
+ <text x="12" y="284">0</text>
+ <text x="12" y="264">1</text>
+ <text x="12" y="244">2</text>
+ <text x="12" y="224">3</text>
+ <text x="12" y="204">4</text>
+ <text x="12" y="184">5</text>
+ <text x="12" y="164">6</text>
+ <text x="12" y="144">7</text>
+ <text x="12" y="124">8</text>
+ <text x="12" y="104">9</text>
+ <text x="12" y="84">10</text>
+ <text x="12" y="64">11</text>
+ </g>
+ </g>
+ <g stroke="black" stroke-width="2" fill="none" marker-end="url(#arrowhead)" shape-rendering="optimizeSpeed">
+ <path d="M20,286 V40"/>
+ <path d="M14,280 H360"/>
+ </g>
+ <g transform="scale(1,-1) translate(20,-280)" fill="none" stroke="blue" stroke-width="3">
+ <path d="M0,40 80,60" marker-start="url(#closed)" marker-end="url(#open)"/>
+ <path d="M80,100 160,120" marker-start="url(#closed)" marker-end="url(#open)"/>
+ <path d="M160,160 240,180 340,180" marker-start="url(#closed)" stroke="url(#fade)"/>
+ </g>
+ <g font-size="15px" font-style="italic" font-family="serif">
+ <text x="380" y="284">time</text>
+ <text x="20" y="20" text-anchor="middle">scale</text>
+ </g>
+ </g>
+</svg>
Binary file master/images/fe-aa-ex.png has changed
Binary file master/images/fe-db-ex.png has changed
Binary file master/images/filters/azimuth-elevation.png has changed
Binary file master/images/filters/enable-background-01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/enable-background-01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,89 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="13.5cm" height="2.7cm" viewBox="0 0 1350 270"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example enable-background01</title>
+ <desc>This test case shows five pictures which illustrate the rules
+ for background image processing.</desc>
+
+ <defs>
+ <filter id="ShiftBGAndBlur"
+ filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
+ <desc>
+ This filter discards the SourceGraphic, if any, and just produces
+ a result consisting of the BackgroundImage shifted down 125 units
+ and then blurred.
+ </desc>
+ <feOffset in="BackgroundImage" dx="0" dy="125" />
+ <feGaussianBlur stdDeviation="8" />
+ </filter>
+ <filter id="ShiftBGAndBlur_WithSourceGraphic"
+ filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
+ <desc>
+ This filter takes the BackgroundImage, shifts it down 125 units, blurs it,
+ and then renders the SourceGraphic on top of the shifted/blurred background.
+ </desc>
+ <feOffset in="BackgroundImage" dx="0" dy="125" />
+ <feGaussianBlur stdDeviation="8" result="blur" />
+ <feMerge>
+ <feMergeNode in="blur"/>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+ </defs>
+
+ <g transform="translate(0,0)">
+ <desc>The first picture is our reference graphic without filters.</desc>
+ <rect x="25" y="25" width="100" height="100" fill="red"/>
+ <g opacity=".5">
+ <circle cx="125" cy="75" r="45" fill="green"/>
+ <polygon points="160,25 160,125 240,75" fill="blue"/>
+ </g>
+ <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
+ </g>
+
+ <g enable-background="new" transform="translate(270,0)">
+ <desc>The second adds an empty 'g' element which invokes ShiftBGAndBlur.</desc>
+ <rect x="25" y="25" width="100" height="100" fill="red"/>
+ <g opacity=".5">
+ <circle cx="125" cy="75" r="45" fill="green"/>
+ <polygon points="160,25 160,125 240,75" fill="blue"/>
+ </g>
+ <g filter="url(#ShiftBGAndBlur)"/>
+ <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
+ </g>
+
+ <g enable-background="new" transform="translate(540,0)">
+ <desc>The third invokes ShiftBGAndBlur on the inner group.</desc>
+ <rect x="25" y="25" width="100" height="100" fill="red"/>
+ <g filter="url(#ShiftBGAndBlur)" opacity=".5">
+ <circle cx="125" cy="75" r="45" fill="green"/>
+ <polygon points="160,25 160,125 240,75" fill="blue"/>
+ </g>
+ <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
+ </g>
+
+ <g enable-background="new" transform="translate(810,0)">
+ <desc>The fourth invokes ShiftBGAndBlur on the triangle.</desc>
+ <rect x="25" y="25" width="100" height="100" fill="red"/>
+ <g opacity=".5">
+ <circle cx="125" cy="75" r="45" fill="green"/>
+ <polygon points="160,25 160,125 240,75" fill="blue"
+ filter="url(#ShiftBGAndBlur)"/>
+ </g>
+ <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
+ </g>
+
+ <g enable-background="new" transform="translate(1080,0)">
+ <desc>The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.</desc>
+ <rect x="25" y="25" width="100" height="100" fill="red"/>
+ <g opacity=".5">
+ <circle cx="125" cy="75" r="45" fill="green"/>
+ <polygon points="160,25 160,125 240,75" fill="blue"
+ filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/>
+ </g>
+ <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
+ </g>
+</svg>
+
Binary file master/images/filters/feBlend.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/feBlend.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="5cm" viewBox="0 0 500 500"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example feBlend - Examples of feBlend modes</title>
+ <desc>Five text strings blended into a gradient,
+ with one text string for each of the five feBlend modes.</desc>
+ <defs>
+ <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
+ x1="100" y1="0" x2="300" y2="0">
+ <stop offset="0" stop-color="#000000" />
+ <stop offset=".33" stop-color="#ffffff" />
+ <stop offset=".67" stop-color="#ff0000" />
+ <stop offset="1" stop-color="#808080" />
+ </linearGradient>
+ <filter id="Normal">
+ <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
+ </filter>
+ <filter id="Multiply">
+ <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
+ </filter>
+ <filter id="Screen">
+ <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
+ </filter>
+ <filter id="Darken">
+ <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
+ </filter>
+ <filter id="Lighten">
+ <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
+ </filter>
+ </defs>
+ <rect fill="none" stroke="blue"
+ x="1" y="1" width="498" height="498"/>
+ <g enable-background="new" >
+ <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
+ <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
+ <text x="50" y="90" filter="url(#Normal)" >Normal</text>
+ <text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
+ <text x="50" y="270" filter="url(#Screen)" >Screen</text>
+ <text x="50" y="360" filter="url(#Darken)" >Darken</text>
+ <text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
+ </g>
+ </g>
+</svg>
+
Binary file master/images/filters/feColorMatrix.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/feColorMatrix.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,55 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="5cm" viewBox="0 0 800 500"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example feColorMatrix - Examples of feColorMatrix operations</title>
+ <desc>Five text strings showing the effects of feColorMatrix:
+ an unfiltered text string acting as a reference,
+ use of the feColorMatrix matrix option to convert to grayscale,
+ use of the feColorMatrix saturate option,
+ use of the feColorMatrix hueRotate option,
+ and use of the feColorMatrix luminanceToAlpha option.</desc>
+ <defs>
+ <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
+ x1="100" y1="0" x2="500" y2="0">
+ <stop offset="0" stop-color="#ff00ff" />
+ <stop offset=".33" stop-color="#88ff88" />
+ <stop offset=".67" stop-color="#2020ff" />
+ <stop offset="1" stop-color="#d00000" />
+ </linearGradient>
+ <filter id="Matrix" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feColorMatrix type="matrix" in="SourceGraphic"
+ values=".33 .33 .33 0 0
+ .33 .33 .33 0 0
+ .33 .33 .33 0 0
+ .33 .33 .33 0 0"/>
+ </filter>
+ <filter id="Saturate40" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/>
+ </filter>
+ <filter id="HueRotate90" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
+ </filter>
+ <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
+ <feComposite in="SourceGraphic" in2="a" operator="in" />
+ </filter>
+ </defs>
+ <rect fill="none" stroke="blue"
+ x="1" y="1" width="798" height="498"/>
+ <g font-family="Verdana" font-size="75"
+ font-weight="bold" fill="url(#MyGradient)" >
+ <rect x="100" y="0" width="500" height="20" />
+ <text x="100" y="90">Unfiltered</text>
+ <text x="100" y="190" filter="url(#Matrix)" >Matrix</text>
+ <text x="100" y="290" filter="url(#Saturate40)" >Saturate</text>
+ <text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text>
+ <text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text>
+ </g>
+</svg>
+
Binary file master/images/filters/feComponentTransfer.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/feComponentTransfer.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,65 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="4cm" viewBox="0 0 800 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example feComponentTransfer - Examples of feComponentTransfer operations</title>
+ <desc>Four text strings showing the effects of feComponentTransfer:
+ an identity function acting as a reference,
+ use of the feComponentTransfer table option,
+ use of the feComponentTransfer linear option,
+ and use of the feComponentTransfer gamma option.</desc>
+ <defs>
+ <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
+ x1="100" y1="0" x2="600" y2="0">
+ <stop offset="0" stop-color="#ff0000" />
+ <stop offset=".33" stop-color="#00ff00" />
+ <stop offset=".67" stop-color="#0000ff" />
+ <stop offset="1" stop-color="#000000" />
+ </linearGradient>
+ <filter id="Identity" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="identity"/>
+ <feFuncG type="identity"/>
+ <feFuncB type="identity"/>
+ <feFuncA type="identity"/>
+ </feComponentTransfer>
+ </filter>
+ <filter id="Table" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="0 0 1 1"/>
+ <feFuncG type="table" tableValues="1 1 0 0"/>
+ <feFuncB type="table" tableValues="0 1 1 0"/>
+ </feComponentTransfer>
+ </filter>
+ <filter id="Linear" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="linear" slope=".5" intercept=".25"/>
+ <feFuncG type="linear" slope=".5" intercept="0"/>
+ <feFuncB type="linear" slope=".5" intercept=".5"/>
+ </feComponentTransfer>
+ </filter>
+ <filter id="Gamma" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
+ <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
+ <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
+ </feComponentTransfer>
+ </filter>
+ </defs>
+ <rect fill="none" stroke="blue"
+ x="1" y="1" width="798" height="398"/>
+ <g font-family="Verdana" font-size="75"
+ font-weight="bold" fill="url(#MyGradient)" >
+ <rect x="100" y="0" width="600" height="20" />
+ <text x="100" y="90">Identity</text>
+ <text x="100" y="190" filter="url(#Table)" >TableLookup</text>
+ <text x="100" y="290" filter="url(#Linear)" >LinearFunc</text>
+ <text x="100" y="390" filter="url(#Gamma)" >GammaFunc</text>
+ </g>
+</svg>
+
Binary file master/images/filters/feComposite.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/feComposite.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,170 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Example feComposite - Examples of feComposite operations</title>
+ <desc>Four rows of six pairs of overlapping triangles depicting
+ the six different feComposite operators under different
+ opacity values and different clearing of the background.</desc>
+ <defs>
+ <desc>Define two sets of six filters for each of the six compositing operators.
+ The first set wipes out the background image by flooding with opaque white.
+ The second set does not wipe out the background, with the result
+ that the background sometimes shines through and is other cases
+ is blended into itself (i.e., "double-counting").</desc>
+ <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
+ <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+ </filter>
+ <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
+ <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+ </filter>
+ <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
+ <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+ </filter>
+ <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
+ <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+ </filter>
+ <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
+ <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+ </filter>
+ <filter id="arithmeticFlood" filterUnits="objectBoundingBox"
+ x="-5%" y="-5%" width="110%" height="110%">
+ <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+ <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
+ operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
+ <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+ </filter>
+ <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
+ </filter>
+ <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
+ </filter>
+ <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
+ </filter>
+ <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
+ </filter>
+ <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+ <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
+ </filter>
+ <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
+ x="-5%" y="-5%" width="110%" height="110%">
+ <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
+ operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
+ </filter>
+ <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
+ <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
+ <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
+ <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
+ <g id="TwoBlueTriangles">
+ <use xlink:href="#Blue100"/>
+ <use xlink:href="#Blue50"/>
+ </g>
+ <g id="BlueTriangles">
+ <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
+ <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
+ <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
+ <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
+ <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
+ <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
+ </g>
+ </defs>
+
+ <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
+ <g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
+ <desc>Render the examples using the filters that draw on top of
+ an opaque white surface, thus obliterating the background.</desc>
+ <g enable-background="new">
+ <text x="15" y="75">opacity 1.0</text>
+ <text x="15" y="115" font-size="27">(with feFlood)</text>
+ <text x="15" y="200">opacity 0.5</text>
+ <text x="15" y="240" font-size="27">(with feFlood)</text>
+ <use xlink:href="#BlueTriangles"/>
+ <g transform="translate(275,25)">
+ <use xlink:href="#Red100" filter="url(#overFlood)" />
+ <use xlink:href="#Red50" filter="url(#overFlood)" />
+ <text x="5" y="275">over</text>
+ </g>
+ <g transform="translate(400,25)">
+ <use xlink:href="#Red100" filter="url(#inFlood)" />
+ <use xlink:href="#Red50" filter="url(#inFlood)" />
+ <text x="35" y="275">in</text>
+ </g>
+ <g transform="translate(525,25)">
+ <use xlink:href="#Red100" filter="url(#outFlood)" />
+ <use xlink:href="#Red50" filter="url(#outFlood)" />
+ <text x="15" y="275">out</text>
+ </g>
+ <g transform="translate(650,25)">
+ <use xlink:href="#Red100" filter="url(#atopFlood)" />
+ <use xlink:href="#Red50" filter="url(#atopFlood)" />
+ <text x="10" y="275">atop</text>
+ </g>
+ <g transform="translate(775,25)">
+ <use xlink:href="#Red100" filter="url(#xorFlood)" />
+ <use xlink:href="#Red50" filter="url(#xorFlood)" />
+ <text x="15" y="275">xor</text>
+ </g>
+ <g transform="translate(900,25)">
+ <use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
+ <use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
+ <text x="-25" y="275">arithmetic</text>
+ </g>
+ </g>
+ <g transform="translate(0,325)" enable-background="new">
+ <desc>Render the examples using the filters that do not obliterate
+ the background, thus sometimes causing the background to continue
+ to appear in some cases, and in other cases the background
+ image blends into itself ("double-counting").</desc>
+ <text x="15" y="75">opacity 1.0</text>
+ <text x="15" y="115" font-size="27">(without feFlood)</text>
+ <text x="15" y="200">opacity 0.5</text>
+ <text x="15" y="240" font-size="27">(without feFlood)</text>
+ <use xlink:href="#BlueTriangles"/>
+ <g transform="translate(275,25)">
+ <use xlink:href="#Red100" filter="url(#overNoFlood)" />
+ <use xlink:href="#Red50" filter="url(#overNoFlood)" />
+ <text x="5" y="275">over</text>
+ </g>
+ <g transform="translate(400,25)">
+ <use xlink:href="#Red100" filter="url(#inNoFlood)" />
+ <use xlink:href="#Red50" filter="url(#inNoFlood)" />
+ <text x="35" y="275">in</text>
+ </g>
+ <g transform="translate(525,25)">
+ <use xlink:href="#Red100" filter="url(#outNoFlood)" />
+ <use xlink:href="#Red50" filter="url(#outNoFlood)" />
+ <text x="15" y="275">out</text>
+ </g>
+ <g transform="translate(650,25)">
+ <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
+ <use xlink:href="#Red50" filter="url(#atopNoFlood)" />
+ <text x="10" y="275">atop</text>
+ </g>
+ <g transform="translate(775,25)">
+ <use xlink:href="#Red100" filter="url(#xorNoFlood)" />
+ <use xlink:href="#Red50" filter="url(#xorNoFlood)" />
+ <text x="15" y="275">xor</text>
+ </g>
+ <g transform="translate(900,25)">
+ <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
+ <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
+ <text x="-25" y="275">arithmetic</text>
+ </g>
+ </g>
+ </g>
+</svg>
+
Binary file master/images/filters/feImage-01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/feImage-01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,33 @@
+<svg width="600" height="250" viewBox="0 0 600 250"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Example feImage - Examples of feImage use</title>
+ <desc>Three examples of using feImage, the first showing the
+ default rendering, the second showing the image fit
+ to a box and the third showing the image
+ shifted and clipped.</desc>
+ <defs>
+ <filter id="Default">
+ <feImage xlink:href="smiley.png" />
+ </filter>
+ <filter id="Fitted" primitiveUnits="objectBoundingBox">
+ <feImage xlink:href="smiley.png"
+ x="0" y="0" width="100%" height="100%"
+ preserveAspectRatio="none"/>
+ </filter>
+ <filter id="Shifted">
+ <feImage xlink:href="smiley.png"
+ x="500" y="5"/>
+ </filter>
+ </defs>
+ <rect fill="none" stroke="blue"
+ x="1" y="1" width="598" height="248"/>
+ <g>
+ <rect x="50" y="25" width="100" height="200" filter="url(#Default)"/>
+ <rect x="50" y="25" width="100" height="200" fill="none" stroke="green"/>
+ <rect x="250" y="25" width="100" height="200" filter="url(#Fitted)"/>
+ <rect x="250" y="25" width="100" height="200" fill="none" stroke="green"/>
+ <rect x="450" y="25" width="100" height="200" filter="url(#Shifted)"/>
+ <rect x="450" y="25" width="100" height="200" fill="none" stroke="green"/>
+ </g>
+</svg>
Binary file master/images/filters/feMorphology.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/feMorphology.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="7cm" viewBox="0 0 700 500"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example feMorphology - Examples of erode and dilate</title>
+ <desc>Five text strings drawn as outlines.
+ The first is unfiltered. The second and third use 'erode'.
+ The fourth and fifth use 'dilate'.</desc>
+ <defs>
+ <filter id="Erode3">
+ <feMorphology operator="erode" in="SourceGraphic" radius="3" />
+ </filter>
+ <filter id="Erode6">
+ <feMorphology operator="erode" in="SourceGraphic" radius="6" />
+ </filter>
+ <filter id="Dilate3">
+ <feMorphology operator="dilate" in="SourceGraphic" radius="3" />
+ </filter>
+ <filter id="Dilate6">
+ <feMorphology operator="dilate" in="SourceGraphic" radius="6" />
+ </filter>
+ </defs>
+ <rect fill="none" stroke="blue" stroke-width="2"
+ x="1" y="1" width="698" height="498"/>
+ <g enable-background="new" >
+ <g font-family="Verdana" font-size="75"
+ fill="none" stroke="black" stroke-width="6" >
+ <text x="50" y="90">Unfiltered</text>
+ <text x="50" y="180" filter="url(#Erode3)" >Erode radius 3</text>
+ <text x="50" y="270" filter="url(#Erode6)" >Erode radius 6</text>
+ <text x="50" y="360" filter="url(#Dilate3)" >Dilate radius 3</text>
+ <text x="50" y="450" filter="url(#Dilate6)" >Dilate radius 6</text>
+ </g>
+ </g>
+</svg>
Binary file master/images/filters/feTurbulence.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/feTurbulence.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,71 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="450px" height="325px" viewBox="0 0 450 325"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example feTurbulence - Examples of feTurbulence operations</title>
+ <desc>Six rectangular areas showing the effects of
+ various parameter settings for feTurbulence.</desc>
+ <g font-family="Verdana" text-anchor="middle" font-size="10" >
+ <defs>
+ <filter id="Turb1" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
+ </filter>
+ <filter id="Turb2" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/>
+ </filter>
+ <filter id="Turb3" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/>
+ </filter>
+ <filter id="Turb4" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/>
+ </filter>
+ <filter id="Turb5" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/>
+ </filter>
+ <filter id="Turb6" filterUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/>
+ </filter>
+ </defs>
+
+ <rect x="1" y="1" width="448" height="323"
+ fill="none" stroke="blue" stroke-width="1" />
+
+ <rect x="25" y="25" width="100" height="75" filter="url(#Turb1)" />
+ <text x="75" y="117">type=turbulence</text>
+ <text x="75" y="129">baseFrequency=0.05</text>
+ <text x="75" y="141">numOctaves=2</text>
+
+ <rect x="175" y="25" width="100" height="75" filter="url(#Turb2)" />
+ <text x="225" y="117">type=turbulence</text>
+ <text x="225" y="129">baseFrequency=0.1</text>
+ <text x="225" y="141">numOctaves=2</text>
+
+ <rect x="325" y="25" width="100" height="75" filter="url(#Turb3)" />
+ <text x="375" y="117">type=turbulence</text>
+ <text x="375" y="129">baseFrequency=0.05</text>
+ <text x="375" y="141">numOctaves=8</text>
+
+ <rect x="25" y="180" width="100" height="75" filter="url(#Turb4)" />
+ <text x="75" y="272">type=fractalNoise</text>
+ <text x="75" y="284">baseFrequency=0.1</text>
+ <text x="75" y="296">numOctaves=4</text>
+
+ <rect x="175" y="180" width="100" height="75" filter="url(#Turb5)" />
+ <text x="225" y="272">type=fractalNoise</text>
+ <text x="225" y="284">baseFrequency=0.4</text>
+ <text x="225" y="296">numOctaves=4</text>
+
+ <rect x="325" y="180" width="100" height="75" filter="url(#Turb6)" />
+ <text x="375" y="272">type=fractalNoise</text>
+ <text x="375" y="284">baseFrequency=0.1</text>
+ <text x="375" y="296">numOctaves=1</text>
+ </g>
+</svg>
+
Binary file master/images/filters/filters00.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/filters00.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,53 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="11.3cm" height="2.2cm" viewBox="0 0 1130 220" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Example filters00.svg - filter effects before and after</title>
+ <desc>Picture of the before and after affects of filtering.</desc>
+ <defs>
+ <filter id="MyFilter">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+ <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1"
+ specularExponent="10" lighting-color="white"
+ result="specOut">
+ <fePointLight x="-5000" y="-10000" z="20000"/>
+ </feSpecularLighting>
+ <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+ <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+ k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+ <feMerge>
+ <feMergeNode in="offsetBlur"/>
+ <feMergeNode in="litPaint"/>
+ </feMerge>
+ </filter>
+ <g id="CircleRectTriangle">
+ <g>
+ <circle cx="85" cy="80" r="40" fill="yellow" />
+<g>
+ <rect x="145" y="45" width="90" height="70" fill="red" />
+</g>
+ <path d="M260,40 L335,80 L260,120 z" fill="#4444ff" />
+ </g>
+ </g>
+ <path id="LineWithArrow"
+ d="M0,-15 h80 v-10 l40,25 l-40,25 v-10 h-80 z" />
+ </defs>
+ <g font-family="Verdana" font-size="30" >
+ <rect x="1" y="1" width="1128" height="218"
+ fill="#cccccc" stroke="blue" />
+ <use x="0" y="0" xlink:href="#CircleRectTriangle"/>
+ <text x="20" y="180">Original source graphic</text>
+ <use x="380" y="80" xlink:href="#LineWithArrow"/>
+ <text x="520" y="70">Filter</text>
+ <text x="520" y="120">Effect</text>
+ <use x="630" y="80" xlink:href="#LineWithArrow"/>
+ <text x="790" y="180">Result of filter effect</text>
+ </g>
+ <g filter="url(#MyFilter)" >
+ <use x="750" y="0" xlink:href="#CircleRectTriangle"/>
+ </g>
+</svg>
+
+
Binary file master/images/filters/filters01-0.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/filters01-0.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="115px" height="70px" viewBox="0 0 200 120" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <title>Example filters01-0.svg - source graphic with no filters</title>
+ <desc>Shows what filters01.svg looks like without any
+ filters.</desc>
+ <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
+ <g>
+ <g>
+ <path fill="none" stroke="#D90000" stroke-width="10"
+ d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
+ <path fill="#D90000"
+ d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
+ <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+ <text x="52" y="76">SVG</text>
+ </g>
+ </g>
+ </g>
+</svg>
+
+
Binary file master/images/filters/filters01-1.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/filters01-1.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="115px" height="70px" viewBox="0 0 200 120"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example filters01-1.svg - after first step</title>
+ <desc>Shows intermediate result for filters01.svg after applying
+ the first filter element, feGaussianBlur.</desc>
+ <defs>
+ <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+ </filter>
+ </defs>
+ <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
+ <g filter="url(#MyFilter)" >
+ <g>
+ <path fill="none" stroke="#D90000" stroke-width="10"
+ d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
+ <path fill="#D90000"
+ d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
+ <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+ <text x="52" y="76">SVG</text>
+ </g>
+ </g>
+ </g>
+</svg>
+
+
Binary file master/images/filters/filters01-2.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/filters01-2.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,29 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="115px" height="70px" viewBox="0 0 200 120"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example filters01-2.svg - after second step</title>
+ <desc>Shows intermediate result for filters01.svg after applying
+ the second filter element, feOffset.</desc>
+ <defs>
+ <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+ <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ </filter>
+ </defs>
+ <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
+ <g filter="url(#MyFilter)" >
+ <g>
+ <path fill="none" stroke="#D90000" stroke-width="10"
+ d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
+ <path fill="#D90000"
+ d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
+ <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+ <text x="52" y="76">SVG</text>
+ </g>
+ </g>
+ </g>
+</svg>
+
+
Binary file master/images/filters/filters01-3.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/filters01-3.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="115px" height="70px" viewBox="0 0 200 120"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example filters01-3.svg - after third step</title>
+ <desc>Shows intermediate result for filters01.svg after applying
+ the third filter element, feSpecularLighting.</desc>
+ <defs>
+ <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+ <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="#bbbbbb"
+ result="specOut">
+ <fePointLight x="-5000" y="-10000" z="20000"/>
+ </feSpecularLighting>
+ </filter>
+ </defs>
+ <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
+ <g filter="url(#MyFilter)" >
+ <g>
+ <path fill="none" stroke="#D90000" stroke-width="10"
+ d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
+ <path fill="#D90000"
+ d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
+ <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+ <text x="52" y="76">SVG</text>
+ </g>
+ </g>
+ </g>
+</svg>
+
+
Binary file master/images/filters/filters01-4.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/filters01-4.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="115px" height="70px" viewBox="0 0 200 120"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example filters01-4.svg - after fourth step</title>
+ <desc>Shows intermediate result for filters01.svg after applying
+ the fourth filter element, feComposite.</desc>
+ <defs>
+ <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+ <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="#bbbbbb"
+ result="specOut">
+ <fePointLight x="-5000" y="-10000" z="20000"/>
+ </feSpecularLighting>
+ <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+ </filter>
+ </defs>
+ <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
+ <g filter="url(#MyFilter)" >
+ <g>
+ <path fill="none" stroke="#D90000" stroke-width="10"
+ d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
+ <path fill="#D90000"
+ d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
+ <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+ <text x="52" y="76">SVG</text>
+ </g>
+ </g>
+ </g>
+</svg>
+
+
Binary file master/images/filters/filters01-5.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/filters01-5.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="115px" height="70px" viewBox="0 0 200 120"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example filters01-5.svg - after fifth step</title>
+ <desc>Shows intermediate result for filters01.svg after applying
+ the fifth filter element, feComposite.</desc>
+ <defs>
+ <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+ <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="#bbbbbb"
+ result="specOut">
+ <fePointLight x="-5000" y="-10000" z="20000"/>
+ </feSpecularLighting>
+ <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+ <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+ k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+ </filter>
+ </defs>
+ <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
+ <g filter="url(#MyFilter)" >
+ <g>
+ <path fill="none" stroke="#D90000" stroke-width="10"
+ d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
+ <path fill="#D90000"
+ d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
+ <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+ <text x="52" y="76">SVG</text>
+ </g>
+ </g>
+ </g>
+</svg>
+
+
Binary file master/images/filters/filters01-6.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/filters01-6.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,43 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="115px" height="70px" viewBox="0 0 200 120"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example filters01.svg - introducing filter effects</title>
+ <desc>An example which combines multiple filter primitives
+ to produce a 3D lighting effect on a graphic consisting
+ of the string "SVG" sitting on top of oval filled in red
+ and surrounded by an oval outlined in red.</desc>
+ <defs>
+ <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+ <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="#bbbbbb"
+ result="specOut">
+ <fePointLight x="-5000" y="-10000" z="20000"/>
+ </feSpecularLighting>
+ <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+ <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+ k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+ <feMerge>
+ <feMergeNode in="offsetBlur"/>
+ <feMergeNode in="litPaint"/>
+ </feMerge>
+ </filter>
+ </defs>
+ <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
+ <g filter="url(#MyFilter)" >
+ <g>
+ <path fill="none" stroke="#D90000" stroke-width="10"
+ d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
+ <path fill="#D90000"
+ d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
+ <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+ <text x="52" y="76">SVG</text>
+ </g>
+ </g>
+ </g>
+</svg>
+
+
Binary file master/images/filters/filters01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/filters01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,43 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example filters01.svg - introducing filter effects</title>
+ <desc>An example which combines multiple filter primitives
+ to produce a 3D lighting effect on a graphic consisting
+ of the string "SVG" sitting on top of oval filled in red
+ and surrounded by an oval outlined in red.</desc>
+ <defs>
+ <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+ <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+ <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="#bbbbbb"
+ result="specOut">
+ <fePointLight x="-5000" y="-10000" z="20000"/>
+ </feSpecularLighting>
+ <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+ <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+ k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+ <feMerge>
+ <feMergeNode in="offsetBlur"/>
+ <feMergeNode in="litPaint"/>
+ </feMerge>
+ </filter>
+ </defs>
+ <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
+ <g filter="url(#MyFilter)" >
+ <g>
+ <path fill="none" stroke="#D90000" stroke-width="10"
+ d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
+ <path fill="#D90000"
+ d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
+ <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+ <text x="52" y="76">SVG</text>
+ </g>
+ </g>
+ </g>
+</svg>
+
+
Binary file master/images/filters/primitive-subregion-01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/filters/primitive-subregion-01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,43 @@
+<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
+ <feFlood x="25%" y="25%" width="50%" height="50%"
+ flood-color="green" flood-opacity="0.75"/>
+ </filter>
+ <filter id="blend" primitiveUnits="objectBoundingBox">
+ <feBlend x="25%" y="25%" width="50%" height="50%"
+ in2="SourceGraphic" mode="multiply"/>
+ </filter>
+ <filter id="merge" primitiveUnits="objectBoundingBox">
+ <feMerge x="25%" y="25%" width="50%" height="50%">
+ <feMergeNode in="SourceGraphic"/>
+ <feMergeNode in="FillPaint"/>
+ </feMerge>
+ </filter>
+ </defs>
+
+ <g fill="none" stroke="blue" stroke-width="4">
+ <rect width="200" height="200"/>
+ <line x2="200" y2="200"/>
+ <line x1="200" y2="200"/>
+ </g>
+ <circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/>
+
+ <g transform="translate(200 0)">
+ <g fill="none" stroke="blue" stroke-width="4">
+ <rect width="200" height="200"/>
+ <line x2="200" y2="200"/>
+ <line x1="200" y2="200"/>
+ </g>
+ <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/>
+ </g>
+
+ <g transform="translate(0 200)">
+ <g fill="none" stroke="blue" stroke-width="4">
+ <rect width="200" height="200"/>
+ <line x2="200" y2="200"/>
+ <line x1="200" y2="200"/>
+ </g>
+ <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/>
+ </g>
+</svg>
Binary file master/images/filters/smiley.png has changed
Binary file master/images/fullwidth.png has changed
Binary file master/images/halfwidth.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/Makefile Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,21 @@
+# Makefile for generating SVGs and PNGs from the MathML documents in this directory.
+
+SVG2PNG=java -jar ../../../../../../tools/batik/batik-rasterizer.jar
+
+# This directory relative to tools/math/.
+THISDIR=../../profiles/1.1F2/master/images/implnote/arcs
+
+MML_FILES=$(wildcard *.mml)
+
+all : $(MML_FILES:%.mml=%.png)
+
+%.svg : %.mml
+ cd ../../../../../../tools/math && ./math2svg.py -o $(THISDIR)/$@ $(THISDIR)/$<
+
+%.png : %.svg
+ $(SVG2PNG) -cssUser 'data:text/css,svg{text-rendering:geometricPrecision}' -d $@ $<
+clean :
+ rm -f $(MML_FILES:%.mml=%.png) $(MML_FILES:%.mml=%.svg)
+
+.PRECIOUS : %.svg
+.PHONY : all clean
Binary file master/images/implnote/arcs/cx.png has changed
Binary file master/images/implnote/arcs/cxcyrxrypsitheta.png has changed
Binary file master/images/implnote/arcs/cy.png has changed
Binary file master/images/implnote/arcs/delta-theta.png has changed
Binary file master/images/implnote/arcs/equal.png has changed
Binary file master/images/implnote/arcs/fa.png has changed
Binary file master/images/implnote/arcs/fs.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image002.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,42 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <mo>(</mo>
+ <mtable>
+ <mtr><mtd><mi>x</mi></mtd></mtr>
+ <mtr><mtd><mi>y</mi></mtd></mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>=</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mo>-</mo><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mrow><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>·</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mrow><msub><mi>r</mi><mi>x</mi></msub><mo>⁢</mo><mi>cos</mi><mo>⁡</mo><mi>θ</mi></mrow></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mrow><msub><mi>r</mi><mi>y</mi></msub><mo>⁢</mo><mi>sin</mi><mo>⁡</mo><mi>θ</mi></mrow></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>+</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr><mtd><msub><mi>c</mi><mi>x</mi></msub></mtd></mtr>
+ <mtr><mtd><msub><mi>c</mi><mi>y</mi></msub></mtd></mtr>
+ </mtable>
+ <mo>)</mo>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image004.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,42 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <mo>(</mo>
+ <mtable>
+ <mtr><mtd><msub><mi>x</mi><mn>1</mn></msub></mtd></mtr>
+ <mtr><mtd><msub><mi>y</mi><mn>1</mn></msub></mtd></mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>=</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mo>-</mo><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mrow><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>·</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mrow><msub><mi>r</mi><mi>x</mi></msub><mo>⁢</mo><mi>cos</mi><mo>⁡</mo><msub><mi>θ</mi><mn>1</mn></msub></mrow></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mrow><msub><mi>r</mi><mi>y</mi></msub><mo>⁢</mo><mi>sin</mi><mo>⁡</mo><msub><mi>θ</mi><mn>1</mn></msub></mrow></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>+</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr><mtd><msub><mi>c</mi><mi>x</mi></msub></mtd></mtr>
+ <mtr><mtd><msub><mi>c</mi><mi>y</mi></msub></mtd></mtr>
+ </mtable>
+ <mo>)</mo>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image006.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,42 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <mo>(</mo>
+ <mtable>
+ <mtr><mtd><msub><mi>x</mi><mn>2</mn></msub></mtd></mtr>
+ <mtr><mtd><msub><mi>y</mi><mn>2</mn></msub></mtd></mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>=</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mo>-</mo><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mrow><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>·</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mrow><msub><mi>r</mi><mi>x</mi></msub><mo>⁢</mo><mi>cos</mi><mo>⁡</mo><mrow><mo>(</mo><msub><mi>θ</mi><mn>1</mn></msub><mo>+</mo><mi>Δθ</mi><mo>)</mo></mrow></mrow></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mrow><msub><mi>r</mi><mi>y</mi></msub><mo>⁢</mo><mi>sin</mi><mo>⁡</mo><mrow><mo>(</mo><msub><mi>θ</mi><mn>1</mn></msub><mo>+</mo><mi>Δθ</mi><mo>)</mo></mrow></mrow></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>+</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr><mtd><msub><mi>c</mi><mi>x</mi></msub></mtd></mtr>
+ <mtr><mtd><msub><mi>c</mi><mi>y</mi></msub></mtd></mtr>
+ </mtable>
+ <mo>)</mo>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image008.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,18 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <msub><mi>f</mi><mi>A</mi></msub>
+ <mo>=</mo>
+ <mo>{</mo>
+ <mtable>
+ <mtr>
+ <mtd><mn>1</mn></mtd>
+ <mtd><mtext>if</mtext> <mrow><mo form="prefix" rspace="0">|</mo><mi>Δθ</mi><mo form="postfix" lspace="0">|</mo></mrow> <mo>></mo> <mn>180°</mn></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mn>0</mn></mtd>
+ <mtd><mtext>if</mtext> <mrow><mo form="prefix" rspace="0">|</mo><mi>Δθ</mi><mo form="postfix" lspace="0">|</mo></mrow> <mo>≤</mo> <mn>180°</mn></mtd>
+ </mtr>
+ </mtable>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image010.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,18 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <msub><mi>f</mi><mi>S</mi></msub>
+ <mo>=</mo>
+ <mo>{</mo>
+ <mtable>
+ <mtr>
+ <mtd><mn>1</mn></mtd>
+ <mtd><mtext>if</mtext> <mi>Δθ</mi> <mo>></mo> <mn>0°</mn></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mn>0</mn></mtd>
+ <mtd><mtext>if</mtext> <mi>Δθ</mi> <mo><</mo> <mn>0°</mn></mtd>
+ </mtr>
+ </mtable>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image012.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,39 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><msub><mi>x</mi><mn>1</mn></msub><mo>′</mo></mtd>
+ </mtr>
+ <mtr>
+ <mtd><msub><mi>y</mi><mn>1</mn></msub><mo>′</mo></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>=</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mrow><mo>-</mo><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>·</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mfrac><mrow><msub><mi>x</mi><mn>1</mn></msub><mo>-</mo><msub><mi>x</mi><mn>2</mn></msub></mrow><mn>2</mn></mfrac></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mfrac><mrow><msub><mi>y</mi><mn>1</mn></msub><mo>-</mo><msub><mi>y</mi><mn>2</mn></msub></mrow><mn>2</mn></mfrac></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image014.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,81 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><msub><mi>c</mi><mi>x</mi></msub><mo>′</mo></mtd>
+ </mtr>
+ <mtr>
+ <mtd><msub><mi>c</mi><mi>y</mi></msub><mo>′</mo></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>=</mo>
+ <mo>±</mo>
+ <msqrt>
+ <mfrac>
+ <mstyle scriptlevel="-1">
+ <msubsup><mi>r</mi><mi>x</mi><mn>2</mn></msubsup>
+ <mo>⁢</mo>
+ <msubsup><mi>r</mi><mi>y</mi><mn>2</mn></msubsup>
+ <mo>-</mo>
+ <msubsup><mi>r</mi><mi>x</mi><mn>2</mn></msubsup>
+ <mo>⁢</mo>
+ <msup><mrow><mo>(</mo><msub><mi>y</mi><mn>1</mn></msub><mo>′</mo><mo>)</mo></mrow><mn>2</mn></msup>
+ <mo>-</mo>
+ <msubsup><mi>r</mi><mi>y</mi><mn>2</mn></msubsup>
+ <mo>⁢</mo>
+ <msup><mrow><mo>(</mo><msub><mi>x</mi><mn>1</mn></msub><mo>′</mo><mo>)</mo></mrow><mn>2</mn></msup>
+ </mstyle>
+ <mstyle scriptlevel="-1">
+ <msubsup><mi>r</mi><mi>x</mi><mn>2</mn></msubsup>
+ <mo>⁢</mo>
+ <msup><mrow><mo>(</mo><msub><mi>y</mi><mn>1</mn></msub><mo>′</mo><mo>)</mo></mrow><mn>2</mn></msup>
+ <mo>+</mo>
+ <msubsup><mi>r</mi><mi>y</mi><mn>2</mn></msubsup>
+ <mo>⁢</mo>
+ <msup><mrow><mo>(</mo><msub><mi>x</mi><mn>1</mn></msub><mo>′</mo><mo>)</mo></mrow><mn>2</mn></msup>
+ </mstyle>
+ </mfrac>
+ </msqrt>
+ <mo>⁢</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd>
+ <mfrac>
+ <mrow>
+ <msub><mi>r</mi><mi>x</mi></msub>
+ <mo>⁢</mo>
+ <msub><mi>y</mi><mn>1</mn></msub>
+ <mo>′</mo>
+ </mrow>
+ <mrow>
+ <msub><mi>r</mi><mi>y</mi></msub>
+ </mrow>
+ </mfrac>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mrow>
+ <mo>-</mo>
+ <mfrac>
+ <mrow>
+ <msub><mi>r</mi><mi>y</mi></msub>
+ <mo>⁢</mo>
+ <msub><mi>x</mi><mn>1</mn></msub>
+ <mo>′</mo>
+ </mrow>
+ <mrow>
+ <msub><mi>r</mi><mi>x</mi></msub>
+ </mrow>
+ </mfrac>
+ </mrow>
+ </mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image016.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,50 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><msub><mi>c</mi><mi>x</mi></msub></mtd>
+ </mtr>
+ <mtr>
+ <mtd><msub><mi>c</mi><mi>y</mi></msub></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>=</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mo>-</mo><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mrow><mi>sin</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ <mtd><mrow><mi>cos</mi><mo>⁡</mo><mi>φ</mi></mrow></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>·</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mrow><msub><mi>c</mi><mi>x</mi></msub><mo>′</mo></mrow></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mrow><msub><mi>c</mi><mi>y</mi></msub><mo>′</mo></mrow></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>+</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd><mfrac><mrow><msub><mi>x</mi><mn>1</mn></msub><mo>+</mo><msub><mi>x</mi><mn>2</mn></msub></mrow><mn>2</mn></mfrac></mtd>
+ </mtr>
+ <mtr>
+ <mtd><mfrac><mrow><msub><mi>y</mi><mn>1</mn></msub><mo>+</mo><msub><mi>y</mi><mn>2</mn></msub></mrow><mn>2</mn></mfrac></mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image018.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,31 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <mo>∠</mo>
+ <mo>(</mo>
+ <mover accent="true"><mi>u</mi><mo>⇀</mo></mover>
+ <mo>,</mo>
+ <mover accent="true"><mi>v</mi><mo>⇀</mo></mover>
+ <mo>)</mo>
+ <mo>=</mo>
+ <mo>±</mo>
+ <mi>arccos</mi>
+ <mo>⁡</mo>
+ <mfrac>
+ <mstyle scriptlevel="-2">
+ <mover accent="true"><mi>u</mi><mo>⇀</mo></mover>
+ <mo>·</mo>
+ <mover accent="true"><mi>v</mi><mo>⇀</mo></mover>
+ </mstyle>
+ <mstyle scriptlevel="-2">
+ <mo form="prefix" fence="true" stretchy="true" rspace="0">‖</mo>
+ <mover accent="true"><mi>u</mi><mo>⇀</mo></mover>
+ <mo form="postfix" fence="true" stretchy="true" lspace="0">‖</mo>
+ <mo>⁢</mo>
+ <mo form="prefix" fence="true" stretchy="true" rspace="0">‖</mo>
+ <mover accent="true"><mi>v</mi><mo>⇀</mo></mover>
+ <mo form="postfix" fence="true" stretchy="true" lspace="0">‖</mo>
+ </mstyle>
+ </mfrac>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image020.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,49 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <msub><mi>θ</mi><mn>1</mn></msub>
+ <mo>=</mo>
+ <mo>∠</mo>
+ <mo>(</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr><mtd><mn>1</mn></mtd></mtr>
+ <mtr><mtd><mn>0</mn></mtd></mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>,</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd>
+ <mfrac>
+ <mstyle scriptlevel="-1">
+ <msub><mi>x</mi><mn>1</mn></msub><mo>′</mo>
+ <mo>-</mo>
+ <msub><mi>c</mi><mi>x</mi></msub><mo>′</mo>
+ </mstyle>
+ <mstyle scriptlevel="-1">
+ <msub><mi>r</mi><mi>x</mi></msub>
+ </mstyle>
+ </mfrac>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mfrac>
+ <mstyle scriptlevel="-1">
+ <msub><mi>y</mi><mn>1</mn></msub><mo>′</mo>
+ <mo>-</mo>
+ <msub><mi>c</mi><mi>y</mi></msub><mo>′</mo>
+ </mstyle>
+ <mstyle scriptlevel="-1">
+ <msub><mi>r</mi><mi>y</mi></msub>
+ </mstyle>
+ </mfrac>
+ </mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>)</mo>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image022.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,80 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <mo>Δ</mo>
+ <mi>θ</mi>
+ <mo>≡</mo>
+ <mo>∠</mo>
+ <mo>(</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd>
+ <mfrac>
+ <mstyle scriptlevel="-1">
+ <msub><mi>x</mi><mn>1</mn></msub><mo>′</mo>
+ <mo>-</mo>
+ <msub><mi>c</mi><mi>x</mi></msub><mo>′</mo>
+ </mstyle>
+ <mstyle scriptlevel="-1">
+ <msub><mi>r</mi><mi>x</mi></msub>
+ </mstyle>
+ </mfrac>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mfrac>
+ <mstyle scriptlevel="-1">
+ <msub><mi>y</mi><mn>1</mn></msub><mo>′</mo>
+ <mo>-</mo>
+ <msub><mi>c</mi><mi>y</mi></msub><mo>′</mo>
+ </mstyle>
+ <mstyle scriptlevel="-1">
+ <msub><mi>r</mi><mi>y</mi></msub>
+ </mstyle>
+ </mfrac>
+ </mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>,</mo>
+ <mo>(</mo>
+ <mtable>
+ <mtr>
+ <mtd>
+ <mfrac>
+ <mstyle scriptlevel="-1">
+ <mo>-</mo>
+ <msub><mi>x</mi><mn>1</mn></msub><mo>′</mo>
+ <mo>-</mo>
+ <msub><mi>c</mi><mi>x</mi></msub><mo>′</mo>
+ </mstyle>
+ <mstyle scriptlevel="-1">
+ <msub><mi>r</mi><mi>x</mi></msub>
+ </mstyle>
+ </mfrac>
+ </mtd>
+ </mtr>
+ <mtr>
+ <mtd>
+ <mfrac>
+ <mstyle scriptlevel="-1">
+ <mo>-</mo>
+ <msub><mi>y</mi><mn>1</mn></msub><mo>′</mo>
+ <mo>-</mo>
+ <msub><mi>c</mi><mi>y</mi></msub><mo>′</mo>
+ </mstyle>
+ <mstyle scriptlevel="-1">
+ <msub><mi>r</mi><mi>y</mi></msub>
+ </mstyle>
+ </mfrac>
+ </mtd>
+ </mtr>
+ </mtable>
+ <mo>)</mo>
+ <mo>)</mo>
+ <mo>mod</mo>
+ <mn>360°</mn>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image024.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,22 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <msub><mi>r</mi><mi>x</mi></msub>
+ <mo>←</mo>
+ <mrow>
+ <mo form="prefix" fence="true" stretchy="true" rspace="0">|</mo>
+ <msub><mi>r</mi><mi>x</mi></msub>
+ <mo form="postfix" fence="true" stretchy="true" lspace="0">|</mo>
+ </mrow>
+ </mrow>
+ <mspace width="4em"/>
+ <mrow>
+ <msub><mi>r</mi><mi>y</mi></msub>
+ <mo>←</mo>
+ <mrow>
+ <mo form="prefix" fence="true" stretchy="true" rspace="0">|</mo>
+ <msub><mi>r</mi><mi>y</mi></msub>
+ <mo form="postfix" fence="true" stretchy="true" lspace="0">|</mo>
+ </mrow>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image026.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,16 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <mi>Λ</mi>
+ <mo>=</mo>
+ <mfrac>
+ <msup><mrow><mo>(</mo><msub><mi>x</mi><mn>1</mn></msub><mo>′</mo><mo>)</mo></mrow><mn>2</mn></msup>
+ <msubsup><mi>r</mi><mi>x</mi><mn>2</mn></msubsup>
+ </mfrac>
+ <mo>+</mo>
+ <mfrac>
+ <msup><mrow><mo>(</mo><msub><mi>y</mi><mn>1</mn></msub><mo>′</mo><mo>)</mo></mrow><mn>2</mn></msup>
+ <msubsup><mi>r</mi><mi>y</mi><mn>2</mn></msubsup>
+ </mfrac>
+ </mrow>
+</math>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/implnote/arcs/image028.mml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,22 @@
+<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+ <mrow>
+ <msub><mi>r</mi><mi>x</mi></msub>
+ <mo>←</mo>
+ <mrow>
+ <msqrt><mi>Λ</mi></msqrt>
+ <mo>⁢</mo>
+ <msub><mi>r</mi><mi>x</mi></msub>
+ </mrow>
+ </mrow>
+ <mspace width="4em"/>
+ <mrow>
+ <msub><mi>r</mi><mi>y</mi></msub>
+ <mo>←</mo>
+ <mrow>
+ <msqrt><mi>Λ</mi></msqrt>
+ <mo>⁢</mo>
+ <msub><mi>r</mi><mi>y</mi></msub>
+ </mrow>
+ </mrow>
+</math>
Binary file master/images/implnote/arcs/notequal.png has changed
Binary file master/images/implnote/arcs/plus.png has changed
Binary file master/images/implnote/arcs/psi.png has changed
Binary file master/images/implnote/arcs/rx.png has changed
Binary file master/images/implnote/arcs/ry.png has changed
Binary file master/images/implnote/arcs/theta.png has changed
Binary file master/images/implnote/arcs/theta1.png has changed
Binary file master/images/implnote/arcs/theta2.png has changed
Binary file master/images/implnote/arcs/x1.png has changed
Binary file master/images/implnote/arcs/x1y1x2y2fafs.png has changed
Binary file master/images/implnote/arcs/x2.png has changed
Binary file master/images/implnote/arcs/y1.png has changed
Binary file master/images/implnote/arcs/y2.png has changed
Binary file master/images/kashida.png has changed
Binary file master/images/lf-h-ex.png has changed
Binary file master/images/lf-h.png has changed
Binary file master/images/lf-hi-ex.png has changed
Binary file master/images/lf-hi.png has changed
Binary file master/images/lf-tny.png has changed
Binary file master/images/lf-v-ex.png has changed
Binary file master/images/lf-v.png has changed
Binary file master/images/lf-vi.png has changed
Binary file master/images/lg-f-ex.png has changed
Binary file master/images/lg-f.png has changed
Binary file master/images/lg-l-ex.png has changed
Binary file master/images/lg-l.png has changed
Binary file master/images/lg-s-ex.png has changed
Binary file master/images/lg-s.png has changed
Binary file master/images/lg-s2.png has changed
Binary file master/images/lgc-exh.png has changed
Binary file master/images/lgc-exvi.png has changed
Binary file master/images/lgl-exh.png has changed
Binary file master/images/lgl-exvi.png has changed
Binary file master/images/lgl.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/linking/05_07.xml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1 @@
+<linearGradient xml:id="MyGradient">...</linearGradient>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/linking/05_08.xml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1 @@
+<rect fill="url(#MyGradient)"/>
Binary file master/images/linking/link01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/linking/link01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example link01 - a link on an ellipse
+ </desc>
+ <rect x=".01" y=".01" width="4.98" height="2.98"
+ fill="none" stroke="blue" stroke-width=".03"/>
+ <a xlink:href="http://www.w3.org">
+ <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
+ fill="red" />
+ </a>
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/linking/target.xml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,11 @@
+<style type="text/css">
+#foo:target {filter: url(#glow)}
+/* when the element with id foo is linked to, use a glow filter */
+
+.bar :target {stroke: green; fill-opacity: 0.5}
+/* when any descendants of elements with class bar are linked
+ to, make the fill partly transparent and use a green stroke */
+
+:target {stroke: red }
+/* for everything else, just use a red stroke */
+</style>
Binary file master/images/logo-PR.png has changed
Binary file master/images/masking/compop01.png has changed
Binary file master/images/masking/compop02.png has changed
Binary file master/images/masking/compops.png has changed
Binary file master/images/masking/compregion.png has changed
Binary file master/images/masking/mask01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/masking/mask01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,32 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example mask01 - blue text masked with gradient against red background
+ </desc>
+ <defs>
+ <linearGradient id="Gradient" gradientUnits="userSpaceOnUse"
+ x1="0" y1="0" x2="800" y2="0">
+ <stop offset="0" stop-color="white" stop-opacity="0" />
+ <stop offset="1" stop-color="white" stop-opacity="1" />
+ </linearGradient>
+ <mask id="Mask" maskUnits="userSpaceOnUse"
+ x="0" y="0" width="800" height="300">
+ <rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />
+ </mask>
+ <text id="Text" x="400" y="200"
+ font-family="Verdana" font-size="100" text-anchor="middle" >
+ Masked text
+ </text>
+ </defs>
+
+ <!-- Draw a pale red rectangle in the background -->
+ <rect x="0" y="0" width="800" height="300" fill="#FF8080" />
+
+ <!-- Draw the text string twice. First, filled blue, with the mask applied.
+ Second, outlined in black without the mask. -->
+ <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
+ <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
+</svg>
+
Binary file master/images/masking/opacity01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/masking/opacity01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,47 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example opacity01 - opacity property</desc>
+
+ <rect x="1" y="1" width="1198" height="348"
+ fill="none" stroke="blue" />
+
+ <!-- Background blue rectangle -->
+ <rect x="100" y="100" width="1000" height="150" fill="#0000ff" />
+
+ <!-- Red circles going from opaque to nearly transparent -->
+ <circle cx="200" cy="100" r="50" fill="red" opacity="1" />
+ <circle cx="400" cy="100" r="50" fill="red" opacity=".8" />
+ <circle cx="600" cy="100" r="50" fill="red" opacity=".6" />
+ <circle cx="800" cy="100" r="50" fill="red" opacity=".4" />
+ <circle cx="1000" cy="100" r="50" fill="red" opacity=".2" />
+
+ <!-- Opaque group, opaque circles -->
+ <g opacity="1" >
+ <circle cx="182.5" cy="250" r="50" fill="red" opacity="1" />
+ <circle cx="217.5" cy="250" r="50" fill="green" opacity="1" />
+ </g>
+ <!-- Group opacity: .5, opacity circles -->
+ <g opacity=".5" >
+ <circle cx="382.5" cy="250" r="50" fill="red" opacity="1" />
+ <circle cx="417.5" cy="250" r="50" fill="green" opacity="1" />
+ </g>
+ <!-- Opaque group, semi-transparent green over red -->
+ <g opacity="1" >
+ <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5" />
+ <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5" />
+ </g>
+ <!-- Opaque group, semi-transparent red over green -->
+ <g opacity="1" >
+ <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5" />
+ <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5" />
+ </g>
+ <!-- Group opacity .5, semi-transparent green over red -->
+ <g opacity=".5" >
+ <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5" />
+ <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5" />
+ </g>
+</svg>
+
Binary file master/images/painting/fillrule-evenodd.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/fillrule-evenodd.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,38 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example fillrule-evenodd - demonstrates fill-rule:evenodd</desc>
+
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" />
+ <defs>
+ <path id="Triangle" d="M 16,0 L -8,9 v-18 z" fill="black" stroke="none" />
+ </defs>
+ <g fill-rule="evenodd" fill="red" stroke="black" stroke-width="3" >
+ <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" />
+ <use xlink:href="#Triangle" transform="translate(306.21 249) rotate(72)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(175.16,193.2) rotate(216)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(314.26,161) rotate(0)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(221.16,268.8) rotate(144)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(233.21,126.98) rotate(288)" overflow="visible" />
+ <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z
+ M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(0) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(120) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(240) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(60) translate(49,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(180) translate(49,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(300) translate(49,0) rotate(90)" overflow="visible" />
+ <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
+ M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(0) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(120) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(240) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(60) translate(49,0) rotate(-90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(180) translate(49,0) rotate(-90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(300) translate(49,0) rotate(-90)" overflow="visible" />
+ </g>
+</svg>
+
Binary file master/images/painting/fillrule-nonzero.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/fillrule-nonzero.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,38 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example fillrule-nonzero - demonstrates fill-rule:nonzero</desc>
+
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" />
+ <defs>
+ <path id="Triangle" d="M 16,0 L -8,9 v-18 z" fill="black" stroke="none" />
+ </defs>
+ <g fill-rule="nonzero" fill="red" stroke="black" stroke-width="3" >
+ <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" />
+ <use xlink:href="#Triangle" transform="translate(306.21 249) rotate(72)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(175.16,193.2) rotate(216)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(314.26,161) rotate(0)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(221.16,268.8) rotate(144)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(233.21,126.98) rotate(288)" overflow="visible" />
+ <path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z
+ M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(0) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(120) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(240) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(60) translate(49,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(180) translate(49,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(600,188) rotate(300) translate(49,0) rotate(90)" overflow="visible" />
+ <path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
+ M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(0) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(120) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(240) translate(107,0) rotate(90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(60) translate(49,0) rotate(-90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(180) translate(49,0) rotate(-90)" overflow="visible" />
+ <use xlink:href="#Triangle" transform="translate(950,188) rotate(300) translate(49,0) rotate(-90)" overflow="visible" />
+ </g>
+</svg>
+
Binary file master/images/painting/inheritance.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/inheritance.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="7cm" height="2cm" viewBox="0 0 700 200"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Gradients apply to leaf nodes
+ </desc>
+ <g>
+ <defs>
+ <linearGradient id="MyGradient" gradientUnits="objectBoundingBox">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <rect x="1" y="1" width="698" height="198"
+ fill="none" stroke="blue" stroke-width="2" />
+ <g fill="url(#MyGradient)" >
+ <rect x="100" y="50" width="200" height="100"/>
+ <rect x="400" y="50" width="200" height="100"/>
+ </g>
+ </g>
+</svg>
+
Binary file master/images/painting/linecap.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/linecap.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,40 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="2cm" viewBox="0 0 1200 200" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example linecap - demonstrates three stroke-linecap values</desc>
+ <rect x="1" y="1" width="1198" height="198" fill="none" stroke="blue" />
+ <style type="text/css"><![CDATA[
+ .thick { stroke:black; stroke-width:70 }
+ .thin { stroke:#ffcccc; stroke-width:5 }
+ text { text-anchor:middle; font-size:50; font-family:Verdana }
+ circle { fill:#ffcccc; stroke:none }
+ ]]></style>
+ <defs>
+ <line id="line1" x1="-125" x2="125" y1="0" y2="0" fill="none" />
+ <g id="circles">
+ <circle id="circle1" cx="-125" cy="0" r="8"/>
+ <circle id="circle2" cx="125" cy="0" r="8"/>
+ </g>
+ </defs>
+ <g transform="translate(200,75)">
+ <use class="thick" xlink:href="#line1" stroke-linecap="butt"/>
+ <use class="thin" xlink:href="#line1"/>
+ <use xlink:href="#circles"/>
+ <text y="90">'butt' cap</text>
+ </g>
+ <g transform="translate(600,75)">
+ <use class="thick" xlink:href="#line1" stroke-linecap="round"/>
+ <use class="thin" xlink:href="#line1"/>
+ <use xlink:href="#circles"/>
+ <text y="90">'round' cap</text>
+ </g>
+ <g transform="translate(1000,75)">
+ <use class="thick" xlink:href="#line1" stroke-linecap="square"/>
+ <use class="thin" xlink:href="#line1"/>
+ <use xlink:href="#circles"/>
+ <text y="90">'square' cap</text>
+ </g>
+</svg>
+
Binary file master/images/painting/linejoin.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/linejoin.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example linecap - demonstrates three stroke-linecap values</desc>
+ <rect x="1" y="1" width="1198" height="348" fill="none" stroke="blue" />
+ <style type="text/css"><![CDATA[
+ .thick { stroke:black; stroke-width:70 }
+ .thin { stroke:#ffcccc; stroke-width:5 }
+ text { text-anchor:middle; font-size:50; font-family:Verdana }
+ circle { fill:#ffcccc; stroke:none }
+ ]]></style>
+ <defs>
+ <path id="path1" d="M -125,150 L 0,0 L 125,150" fill="none" />
+ <circle id="circle1" cx="0" cy="0" r="8"/>
+ </defs>
+ <g transform="translate(200,75)">
+ <use class="thick" xlink:href="#path1" stroke-linejoin="miter"/>
+ <use class="thin" xlink:href="#path1"/>
+ <use xlink:href="#circle1"/>
+ <text y="230">'miter' join</text>
+ </g>
+ <g transform="translate(600,75)">
+ <use class="thick" xlink:href="#path1" stroke-linejoin="round"/>
+ <use class="thin" xlink:href="#path1"/>
+ <use xlink:href="#circle1"/>
+ <text y="230">'round' join</text>
+ </g>
+ <g transform="translate(1000,75)">
+ <use class="thick" xlink:href="#path1" stroke-linejoin="bevel"/>
+ <use class="thin" xlink:href="#path1"/>
+ <use xlink:href="#circle1"/>
+ <text y="230">'bevel' join</text>
+ </g>
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/marker-simulated.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,81 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4in" height="2in"
+ viewBox="0 0 4000 2000" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+
+ <desc>File which produces the same effect
+ as the marker example file, but without
+ using markers.
+ </desc>
+ <rect x="10" y="10" width="3980" height="1980"
+ fill="none" stroke="blue" stroke-width="10" />
+ <!-- The path draws as before, but without the marker properties -->
+ <path d="M 1000 750 L 2000 750 L 2500 1250"
+ fill="none" stroke="black" stroke-width="100" />
+
+ <!-- The following logic simulates drawing a marker
+ at final vertex of the path. -->
+
+ <!-- First off, move the origin of the user coordinate system
+ so that the origin is now aligned with the end point of the path. -->
+ <g transform="translate(2500,1250)" >
+
+ <!-- Rotate the coordinate system 45 degrees because
+ the marker specified orient="auto" and the final segment
+ of the path is going in the direction of 45 degrees. -->
+ <g transform="rotate(45)" >
+
+ <!-- Scale the coordinate system to match the coordinate system
+ indicated by the 'markerUnits' attributes, which in this case has
+ a value of 'strokeWidth'. Therefore, scale the coordinate system
+ by the current value of the 'stroke-width' property, which is 100. -->
+ <g transform="scale(100)" >
+
+ <!-- Translate the coordinate system by
+ (-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY)
+ in order that (refX,refY) within the marker will align with the vertex.
+ In this case, we use the default value for preserveAspectRatio
+ ('xMidYMid meet'), which means find a uniform scale factor
+ (i.e., viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY)
+ such that the viewBox fits entirely within the viewport ('meet') and
+ is center-aligned ('xMidYMid'). In this case, the uniform scale factor
+ is markerHeight/viewBoxHeight=3/10=.3. Therefore, translate by
+ (-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). -->
+ <g transform="translate(0,-1.5)" >
+
+ <!-- There is an implicit clipping path because the user agent style
+ sheet says that the 'overflow' property for markers has the value
+ 'hidden'. To achieve this, create a clipping path at the bounds
+ of the viewport. Note that in this case the viewport extends
+ 0.5 units to the left and right of the viewBox due to
+ a uniform scale factor, different ratios for markerWidth/viewBoxWidth
+ and markerHeight/viewBoxHeight, and 'xMidYMid' alignment -->
+ <clipPath id="cp1" >
+ <rect x="-0.5" y="0" width="4" height="3" />
+ </clipPath>
+ <g clip-path="url(#cp1)" >
+
+ <!-- Scale the coordinate system by the uniform scale factor
+ markerHeight/viewBoxHeight=3/10=.3 to set the coordinate
+ system to viewBox units. -->
+ <g transform="scale(.3)" >
+
+ <!-- This 'g' element carries all property values that result from
+ cascading and inheritance of properties on the original 'marker' element.
+ In this example, neither fill nor stroke was specified on the 'marker'
+ element or any ancestors of the 'marker', so the initial values of
+ "black" and "none" are used, respectively. -->
+ <g fill="black" stroke="none" >
+
+ <!-- Expand out the contents of the 'marker' element. -->
+ <path d="M 0 0 L 10 5 L 0 10 z" />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
Binary file master/images/painting/marker.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/marker.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4in" height="2in"
+ viewBox="0 0 4000 2000" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <marker id="Triangle"
+ viewBox="0 0 10 10" refX="0" refY="5"
+ markerUnits="strokeWidth"
+ markerWidth="4" markerHeight="3"
+ orient="auto">
+ <path d="M 0 0 L 10 5 L 0 10 z" />
+ </marker>
+ </defs>
+ <rect x="10" y="10" width="3980" height="1980"
+ fill="none" stroke="blue" stroke-width="10" />
+ <desc>Placing an arrowhead at the end of a path.
+ </desc>
+ <path d="M 1000 750 L 2000 750 L 2500 1250"
+ fill="none" stroke="black" stroke-width="100"
+ marker-end="url(#Triangle)" />
+</svg>
+
Binary file master/images/paths/arcs01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/paths/arcs01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example arcs01 - arc commands in path data</title>
+ <desc>Picture of a pie chart with two pie wedges and
+ a picture of a line with arc blips</desc>
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" stroke-width="1" />
+
+ <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
+ fill="red" stroke="blue" stroke-width="5" />
+ <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
+ fill="yellow" stroke="blue" stroke-width="5" />
+
+ <path d="M600,350 l 50,-25
+ a25,25 -30 0,1 50,-25 l 50,-25
+ a25,50 -30 0,1 50,-25 l 50,-25
+ a25,75 -30 0,1 50,-25 l 50,-25
+ a25,100 -30 0,1 50,-25 l 50,-25"
+ fill="none" stroke="red" stroke-width="5" />
+</svg>
+
Binary file master/images/paths/arcs02.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/paths/arcs02.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,59 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="5.25cm" viewBox="0 0 1200 525" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Example arcs02 - arc options in paths</title>
+ <desc>Pictures showing the result of setting
+ large-arc-flag and sweep-flag to the four
+ possible combinations of 0 and 1.</desc>
+ <g font-family="Verdana" >
+ <defs>
+ <g id="baseEllipses" font-size="20" >
+ <ellipse cx="125" cy="125" rx="100" ry="50"
+ fill="none" stroke="#888888" stroke-width="2" />
+ <ellipse cx="225" cy="75" rx="100" ry="50"
+ fill="none" stroke="#888888" stroke-width="2" />
+ <text x="35" y="70">Arc start</text>
+ <text x="225" y="145">Arc end</text>
+ </g>
+ </defs>
+ <rect x="1" y="1" width="1198" height="523"
+ fill="none" stroke="blue" stroke-width="1" />
+
+ <g font-size="30" >
+ <g transform="translate(0,0)">
+ <use xlink:href="#baseEllipses"/>
+ </g>
+ <g transform="translate(400,0)">
+ <text x="50" y="210">large-arc-flag=0</text>
+ <text x="50" y="250">sweep-flag=0</text>
+ <use xlink:href="#baseEllipses"/>
+ <path d="M 125,75 a100,50 0 0,0 100,50"
+ fill="none" stroke="red" stroke-width="6" />
+ </g>
+ <g transform="translate(800,0)">
+ <text x="50" y="210">large-arc-flag=0</text>
+ <text x="50" y="250">sweep-flag=1</text>
+ <use xlink:href="#baseEllipses"/>
+ <path d="M 125,75 a100,50 0 0,1 100,50"
+ fill="none" stroke="red" stroke-width="6" />
+ </g>
+ <g transform="translate(400,250)">
+ <text x="50" y="210">large-arc-flag=1</text>
+ <text x="50" y="250">sweep-flag=0</text>
+ <use xlink:href="#baseEllipses"/>
+ <path d="M 125,75 a100,50 0 1,0 100,50"
+ fill="none" stroke="red" stroke-width="6" />
+ </g>
+ <g transform="translate(800,250)">
+ <text x="50" y="210">large-arc-flag=1</text>
+ <text x="50" y="250">sweep-flag=1</text>
+ <use xlink:href="#baseEllipses"/>
+ <path d="M 125,75 a100,50 0 1,1 100,50"
+ fill="none" stroke="red" stroke-width="6" />
+ </g>
+ </g>
+ </g>
+</svg>
+
Binary file master/images/paths/cubic01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/paths/cubic01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="4cm" viewBox="0 0 500 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example cubic01- cubic Bézier commands in path data</title>
+ <desc>Picture showing a simple example of path data
+ using both a "C" and an "S" command,
+ along with annotations showing the control points
+ and end points</desc>
+ <style type="text/css"><![CDATA[
+ .Border { fill:none; stroke:blue; stroke-width:1 }
+ .Connect { fill:none; stroke:#888888; stroke-width:2 }
+ .SamplePath { fill:none; stroke:red; stroke-width:5 }
+ .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
+ .CtlPoint { fill:#888888; stroke:none }
+ .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
+ .Label { font-size:22; font-family:Verdana }
+ ]]></style>
+
+ <rect class="Border" x="1" y="1" width="498" height="398" />
+
+ <polyline class="Connect" points="100,200 100,100" />
+ <polyline class="Connect" points="250,100 250,200" />
+ <polyline class="Connect" points="250,200 250,300" />
+ <polyline class="Connect" points="400,300 400,200" />
+ <path class="SamplePath" d="M100,200 C100,100 250,100 250,200
+ S400,300 400,200" />
+ <circle class="EndPoint" cx="100" cy="200" r="10" />
+ <circle class="EndPoint" cx="250" cy="200" r="10" />
+ <circle class="EndPoint" cx="400" cy="200" r="10" />
+ <circle class="CtlPoint" cx="100" cy="100" r="10" />
+ <circle class="CtlPoint" cx="250" cy="100" r="10" />
+ <circle class="CtlPoint" cx="400" cy="300" r="10" />
+ <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
+ <text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
+ <text class="Label" x="325" y="350"
+ style="text-anchor:middle">S400,300 400,200</text>
+</svg>
Binary file master/images/paths/cubic02.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/paths/cubic02.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,88 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="10cm" viewBox="0 0 1000 1000"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example cubic02 - cubic Bézier commands in path data</title>
+ <desc>Picture showing examples of "C" and "S" commands,
+ along with annotations showing the control points
+ and end points</desc>
+ <style type="text/css"><![CDATA[
+ .Border { fill:none; stroke:blue; stroke-width:1 }
+ .Connect { fill:none; stroke:#888888; stroke-width:2 }
+ .SamplePath { fill:none; stroke:red; stroke-width:5 }
+ .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
+ .CtlPoint { fill:#888888; stroke:none }
+ .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
+ .Label { text-anchor:middle; font-size:22; font-family:Verdana }
+ ]]></style>
+
+ <rect class="Border" x="1" y="1" width="998" height="998" />
+
+ <!-- Path 1 -->
+ <polyline class="Connect" points="100,200 100,100" />
+ <polyline class="Connect" points="400,100 400,200" />
+ <path class="SamplePath" d="M100,200 C100,100 400,100 400,200" />
+ <circle class="EndPoint" cx="100" cy="200" r="10" />
+ <circle class="EndPoint" cx="400" cy="200" r="10" />
+ <circle class="CtlPoint" cx="100" cy="100" r="10" />
+ <circle class="CtlPoint" cx="400" cy="100" r="10" />
+ <text class="Label" x="250" y="275">M100,200 C100,100 400,100 400,200</text>
+
+ <!-- Path 2 -->
+ <polyline class="Connect" points="100,500 25,400" />
+ <polyline class="Connect" points="475,400 400,500" />
+ <path class="SamplePath" d="M100,500 C25,400 475,400 400,500" />
+ <circle class="EndPoint" cx="100" cy="500" r="10" />
+ <circle class="EndPoint" cx="400" cy="500" r="10" />
+ <circle class="CtlPoint" cx="25" cy="400" r="10" />
+ <circle class="CtlPoint" cx="475" cy="400" r="10" />
+ <text class="Label" x="250" y="575">M100,500 C25,400 475,400 400,500</text>
+
+ <!-- Path 3 -->
+ <polyline class="Connect" points="100,800 175,700" />
+ <polyline class="Connect" points="325,700 400,800" />
+ <path class="SamplePath" d="M100,800 C175,700 325,700 400,800" />
+ <circle class="EndPoint" cx="100" cy="800" r="10" />
+ <circle class="EndPoint" cx="400" cy="800" r="10" />
+ <circle class="CtlPoint" cx="175" cy="700" r="10" />
+ <circle class="CtlPoint" cx="325" cy="700" r="10" />
+ <text class="Label" x="250" y="875">M100,800 C175,700 325,700 400,800</text>
+
+ <!-- Path 4 -->
+ <polyline class="Connect" points="600,200 675,100" />
+ <polyline class="Connect" points="975,100 900,200" />
+ <path class="SamplePath" d="M600,200 C675,100 975,100 900,200" />
+ <circle class="EndPoint" cx="600" cy="200" r="10" />
+ <circle class="EndPoint" cx="900" cy="200" r="10" />
+ <circle class="CtlPoint" cx="675" cy="100" r="10" />
+ <circle class="CtlPoint" cx="975" cy="100" r="10" />
+ <text class="Label" x="750" y="275">M600,200 C675,100 975,100 900,200</text>
+
+ <!-- Path 5 -->
+ <polyline class="Connect" points="600,500 600,350" />
+ <polyline class="Connect" points="900,650 900,500" />
+ <path class="SamplePath" d="M600,500 C600,350 900,650 900,500" />
+ <circle class="EndPoint" cx="600" cy="500" r="10" />
+ <circle class="EndPoint" cx="900" cy="500" r="10" />
+ <circle class="CtlPoint" cx="600" cy="350" r="10" />
+ <circle class="CtlPoint" cx="900" cy="650" r="10" />
+ <text class="Label" x="750" y="575">M600,500 C600,350 900,650 900,500</text>
+
+ <!-- Path 6 (C and S command) -->
+ <polyline class="Connect" points="600,800 625,700" />
+ <polyline class="Connect" points="725,700 750,800" />
+ <polyline class="Connect" points="750,800 775,900" />
+ <polyline class="Connect" points="875,900 900,800" />
+ <path class="SamplePath" d="M600,800 C625,700 725,700 750,800
+ S875,900 900,800" />
+ <circle class="EndPoint" cx="600" cy="800" r="10" />
+ <circle class="EndPoint" cx="750" cy="800" r="10" />
+ <circle class="EndPoint" cx="900" cy="800" r="10" />
+ <circle class="CtlPoint" cx="625" cy="700" r="10" />
+ <circle class="CtlPoint" cx="725" cy="700" r="10" />
+ <circle class="CtlPoint" cx="875" cy="900" r="10" />
+ <circle class="AutoCtlPoint" cx="775" cy="900" r="9" />
+ <text class="Label" x="750" y="945">M600,800 C625,700 725,700 750,800</text>
+ <text class="Label" x="750" y="975">S875,900 900,800</text>
+</svg>
Binary file master/images/paths/quad01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/paths/quad01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,30 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example quad01 - quadratic Bézier commands in path data</title>
+ <desc>Picture showing a "Q" a "T" command,
+ along with annotations showing the control points
+ and end points</desc>
+ <rect x="1" y="1" width="1198" height="598"
+ fill="none" stroke="blue" stroke-width="1" />
+
+ <path d="M200,300 Q400,50 600,300 T1000,300"
+ fill="none" stroke="red" stroke-width="5" />
+ <!-- End points -->
+ <g fill="black" >
+ <circle cx="200" cy="300" r="10"/>
+ <circle cx="600" cy="300" r="10"/>
+ <circle cx="1000" cy="300" r="10"/>
+ </g>
+ <!-- Control points and lines from end points to control points -->
+ <g fill="#888888" >
+ <circle cx="400" cy="50" r="10"/>
+ <circle cx="800" cy="550" r="10"/>
+ </g>
+ <path d="M200,300 L400,50 L600,300
+ L800,550 L1000,300"
+ fill="none" stroke="#888888" stroke-width="2" />
+</svg>
+
Binary file master/images/paths/triangle01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/paths/triangle01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4cm" height="4cm" viewBox="0 0 400 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Example triangle01- simple example of a 'path'</title>
+ <desc>A path that draws a triangle</desc>
+ <rect x="1" y="1" width="398" height="398"
+ fill="none" stroke="blue" />
+ <path d="M 100 100 L 300 100 L 200 300 z"
+ fill="red" stroke="blue" stroke-width="3" />
+</svg>
+
Binary file master/images/pservers/gradient_vector_and_normal.png has changed
Binary file master/images/pservers/lingrad01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/pservers/lingrad01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>Example lingrad01 - fill a rectangle using a
+ linear gradient paint server</desc>
+ <g>
+ <defs>
+ <linearGradient id="MyGradient">
+ <stop offset="5%" stop-color="#F60" />
+ <stop offset="95%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+
+ <!-- Outline the drawing area in blue -->
+ <rect fill="none" stroke="blue"
+ x="1" y="1" width="798" height="398"/>
+
+ <!-- The rectangle is filled using a linear gradient paint server -->
+ <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
+ x="100" y="100" width="600" height="200"/>
+ </g>
+</svg>
+
Binary file master/images/pservers/pattern01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/pservers/pattern01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <pattern id="TrianglePattern" patternUnits="userSpaceOnUse"
+ x="0" y="0" width="100" height="100"
+ viewBox="0 0 10 10" >
+ <path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
+ </pattern>
+ </defs>
+
+ <!-- Outline the drawing area in blue -->
+ <rect fill="none" stroke="blue"
+ x="1" y="1" width="798" height="398"/>
+
+ <!-- The ellipse is filled using a triangle pattern paint server
+ and stroked with black -->
+ <ellipse fill="url(#TrianglePattern)" stroke="black" stroke-width="5"
+ cx="400" cy="200" rx="350" ry="150" />
+</svg>
+
+
Binary file master/images/pservers/radgrad01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/pservers/radgrad01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>Example radgrad01 - fill a rectangle by referencing a
+ radial gradient paint server</desc>
+ <g>
+ <defs>
+ <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
+ cx="400" cy="200" r="300" fx="400" fy="200">
+ <stop offset="0%" stop-color="red" />
+ <stop offset="50%" stop-color="blue" />
+ <stop offset="100%" stop-color="red" />
+ </radialGradient>
+ </defs>
+
+ <!-- Outline the drawing area in blue -->
+ <rect fill="none" stroke="blue"
+ x="1" y="1" width="798" height="398"/>
+
+ <!-- The rectangle is filled using a radial gradient paint server -->
+ <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
+ x="100" y="100" width="600" height="200"/>
+ </g>
+</svg>
+
Binary file master/images/pt-l.png has changed
Binary file master/images/pt-n.png has changed
Binary file master/images/ptrim0.png has changed
Binary file master/images/ptrim1.png has changed
Binary file master/images/pw-h-ex.png has changed
Binary file master/images/pw-h.png has changed
Binary file master/images/pw-s-ex.png has changed
Binary file master/images/r-box-t.png has changed
Binary file master/images/ra-c-h.png has changed
Binary file master/images/ra-c-rb-h.png has changed
Binary file master/images/ra-c-rb.png has changed
Binary file master/images/ra-c.png has changed
Binary file master/images/ra-dl-rb.png has changed
Binary file master/images/ra-dl.png has changed
Binary file master/images/ra-ds-rb.png has changed
Binary file master/images/ra-ds.png has changed
Binary file master/images/ra-l-rb.png has changed
Binary file master/images/ra-l.png has changed
Binary file master/images/ra-le-l.png has changed
Binary file master/images/ra-le-r.png has changed
Binary file master/images/ra-r-rb.png has changed
Binary file master/images/ra-r.png has changed
Binary file master/images/ro-a.png has changed
Binary file master/images/ro-e.png has changed
Binary file master/images/ro-n.png has changed
Binary file master/images/ro-s.png has changed
Binary file master/images/rp-b-vi-ex.png has changed
Binary file master/images/rp-b-vi.png has changed
Binary file master/images/rp-b.png has changed
Binary file master/images/rp-t-vi-ex.png has changed
Binary file master/images/rp-t-vi.png has changed
Binary file master/images/rp-t.png has changed
Binary file master/images/ruby-jp-b-ex.png has changed
Binary file master/images/ruby-jp-ex.png has changed
Binary file master/images/script/script01-AfterClick.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/script/script01-AfterClick.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,31 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="6cm" height="5cm" viewBox="0 0 600 500"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example script01 - invoke an ECMAScript function from an onclick event
+ </desc>
+ <!-- ECMAScript to change the radius with each click -->
+ <script type="application/ecmascript"> <![CDATA[
+ function circle_click(evt) {
+ var circle = evt.target;
+ var currentRadius = circle.getAttribute("r");
+ if (currentRadius == 100)
+ circle.setAttribute("r", currentRadius*2);
+ else
+ circle.setAttribute("r", currentRadius*0.5);
+ }
+ ]]> </script>
+
+ <!-- Outline the drawing area with a blue line -->
+ <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
+
+ <!-- Act on each click event -->
+ <circle onclick="circle_click(evt)" cx="300" cy="225" r="200"
+ fill="red"/>
+
+ <text x="300" y="480"
+ font-family="Verdana" font-size="35" text-anchor="middle">
+ Click on circle to change its size
+ </text>
+</svg>
Binary file master/images/script/script01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/script/script01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,31 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="6cm" height="5cm" viewBox="0 0 600 500"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example script01 - invoke an ECMAScript function from an onclick event
+ </desc>
+ <!-- ECMAScript to change the radius with each click -->
+ <script type="application/ecmascript"> <![CDATA[
+ function circle_click(evt) {
+ var circle = evt.target;
+ var currentRadius = circle.getAttribute("r");
+ if (currentRadius == 100)
+ circle.setAttribute("r", currentRadius*2);
+ else
+ circle.setAttribute("r", currentRadius*0.5);
+ }
+ ]]> </script>
+
+ <!-- Outline the drawing area with a blue line -->
+ <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
+
+ <!-- Act on each click event -->
+ <circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
+ fill="red"/>
+
+ <text x="300" y="480"
+ font-family="Verdana" font-size="35" text-anchor="middle">
+ Click on circle to change its size
+ </text>
+</svg>
Binary file master/images/shapes/circle01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/shapes/circle01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example circle01 - circle filled with red and stroked with blue</desc>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" stroke-width="2"/>
+
+ <circle cx="600" cy="200" r="100"
+ fill="red" stroke="blue" stroke-width="10" />
+</svg>
+
Binary file master/images/shapes/ellipse01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/shapes/ellipse01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example ellipse01 - examples of ellipses</desc>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <g transform="translate(300 200)">
+ <ellipse rx="250" ry="100"
+ fill="red" />
+ </g>
+
+ <ellipse transform="translate(900 200) rotate(-30)"
+ rx="250" ry="100"
+ fill="none" stroke="blue" stroke-width="20" />
+
+</svg>
+
Binary file master/images/shapes/line01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/shapes/line01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example line01 - lines expressed in user coordinates</desc>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <g stroke="green" >
+ <line x1="100" y1="300" x2="300" y2="100"
+ stroke-width="5" />
+ <line x1="300" y1="300" x2="500" y2="100"
+ stroke-width="10" />
+ <line x1="500" y1="300" x2="700" y2="100"
+ stroke-width="15" />
+ <line x1="700" y1="300" x2="900" y2="100"
+ stroke-width="20" />
+ <line x1="900" y1="300" x2="1100" y2="100"
+ stroke-width="25" />
+ </g>
+</svg>
+
Binary file master/images/shapes/polygon01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/shapes/polygon01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example polygon01 - star and hexagon</desc>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <polygon fill="red" stroke="blue" stroke-width="10"
+ points="350,75 379,161 469,161 397,215
+ 423,301 350,250 277,301 303,215
+ 231,161 321,161" />
+ <polygon fill="lime" stroke="blue" stroke-width="10"
+ points="850,75 958,137.5 958,262.5
+ 850,325 742,262.6 742,137.5" />
+</svg>
+
Binary file master/images/shapes/polyline01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/shapes/polyline01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example polyline01 - increasingly larger bars</desc>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" stroke-width="2" />
+
+ <polyline fill="none" stroke="blue" stroke-width="10"
+ points="50,375
+ 150,375 150,325 250,325 250,375
+ 350,375 350,250 450,250 450,375
+ 550,375 550,175 650,175 650,375
+ 750,375 750,100 850,100 850,375
+ 950,375 950,25 1050,25 1050,375
+ 1150,375" />
+</svg>
+
Binary file master/images/shapes/rect01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/shapes/rect01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example rect01 - rectangle with sharp corners</desc>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" stroke-width="2"/>
+
+ <rect x="400" y="100" width="400" height="200"
+ fill="yellow" stroke="navy" stroke-width="10" />
+</svg>
+
Binary file master/images/shapes/rect02.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/shapes/rect02.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example rect02 - rounded rectangles</desc>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="1198" height="398"
+ fill="none" stroke="blue" stroke-width="2"/>
+
+ <rect x="100" y="100" width="400" height="200" rx="50"
+ fill="green" />
+
+ <g transform="translate(700 210) rotate(-30)">
+ <rect x="0" y="0" width="400" height="200" rx="50"
+ fill="none" stroke="purple" stroke-width="30" />
+ </g>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/StandAlone01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="4cm" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>Four separate rectangles
+ </desc>
+ <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
+ <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
+ <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
+ <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
+ fill="none" stroke="blue" stroke-width=".02cm" />
+
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/Use01-GeneratedContent.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 100 30"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example Use01-GeneratedContent - Simple case of 'use' on a 'rect'</desc>
+ <!-- 'defs' section left out -->
+
+ <rect x=".1" y=".1" width="99.8" height="29.8"
+ fill="none" stroke="blue" stroke-width=".2" />
+
+ <!-- Start of generated content. Replaces 'use' -->
+ <g transform="translate(20,10)">
+ <rect width="60" height="10"/>
+ </g>
+ <!-- End of generated content -->
+
+</svg>
+
Binary file master/images/struct/Use01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/Use01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc>
+ <defs>
+ <rect id="MyRect" width="60" height="10"/>
+ </defs>
+ <rect x=".1" y=".1" width="99.8" height="29.8"
+ fill="none" stroke="blue" stroke-width=".2" />
+ <use x="20" y="10" xlink:href="#MyRect" />
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/Use02-GeneratedContent.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,29 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 100 30"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example Use02-GeneratedContent - 'use' on a 'symbol'</desc>
+
+ <!-- 'defs' section left out -->
+
+ <rect x=".1" y=".1" width="99.8" height="29.8"
+ fill="none" stroke="blue" stroke-width=".2" />
+
+ <!-- Start of generated content. Replaces 'use' -->
+ <g transform="translate(45, 10)" >
+ <!-- Start of referenced 'symbol'. 'symbol' replaced by 'svg',
+ with x,y,width,height=0,0,100%,100% -->
+ <svg width="10" height="10"
+ viewBox="0 0 20 20">
+ <rect x="1" y="1" width="8" height="8"/>
+ <rect x="11" y="1" width="8" height="8"/>
+ <rect x="1" y="11" width="8" height="8"/>
+ <rect x="11" y="11" width="8" height="8"/>
+ </svg>
+ <!-- End of referenced symbol -->
+ </g>
+ <!-- End of generated content -->
+
+</svg>
+
Binary file master/images/struct/Use02.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/Use02.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example Use02 - 'use' on a 'symbol'</desc>
+ <defs>
+ <symbol id="MySymbol" viewBox="0 0 20 20">
+ <desc>MySymbol - four rectangles in a grid</desc>
+ <rect x="1" y="1" width="8" height="8"/>
+ <rect x="11" y="1" width="8" height="8"/>
+ <rect x="1" y="11" width="8" height="8"/>
+ <rect x="11" y="11" width="8" height="8"/>
+ </symbol>
+ </defs>
+ <rect x=".1" y=".1" width="99.8" height="29.8"
+ fill="none" stroke="blue" stroke-width=".2" />
+ <use x="45" y="10" width="10" height="10"
+ xlink:href="#MySymbol" />
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/Use03-GeneratedContent.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 100 30"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example Use03-GeneratedContent - 'use' with a 'transform' attribute</desc>
+
+ <!-- 'defs' section left out -->
+
+ <rect x=".1" y=".1" width="99.8" height="29.8"
+ fill="none" stroke="blue" stroke-width=".2" />
+
+ <!-- Start of generated content. Replaces 'use' -->
+ <g transform="translate(20,2.5) rotate(10)">
+ <rect x="0" y="0" width="60" height="10"/>
+ </g>
+ <!-- End of generated content -->
+
+</svg>
+
Binary file master/images/struct/Use03.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/Use03.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example Use03 - 'use' with a 'transform' attribute</desc>
+ <defs>
+ <rect id="MyRect" x="0" y="0" width="60" height="10"/>
+ </defs>
+ <rect x=".1" y=".1" width="99.8" height="29.8"
+ fill="none" stroke="blue" stroke-width=".2" />
+ <use xlink:href="#MyRect"
+ transform="translate(20,2.5) rotate(10)" />
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/Use04-GeneratedContent.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,28 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="3cm" viewBox="0 0 1200 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example Use04-GeneratedContent - 'use' with a 'transform' attribute</desc>
+
+ <!-- 'style' and 'defs' sections left out -->
+
+ <rect x="0" y="0" width="1200" height="300"
+ style="fill:none; stroke:blue; stroke-width:3"/>
+ <g style="/* rule 11 */ stroke-width:40">
+
+ <!-- Start of generated content. Replaces 'use' -->
+ <g style="/* rule 1 */ fill:blue;
+ /* rule 3 */ fill-opacity:.5;
+ /* rule 5 */ stroke-linecap:round;
+ /* rule 12 */ stroke-dashoffset:50" >
+ <path d="M300 50 L900 50 L900 250 L300 250"
+ style="/* rule 2 */ stroke:red;
+ /* rule 4 */ stroke-opacity:.5;
+ /* rule 6 */ stroke-linejoin: bevel;
+ /* rule 10 */ stroke-dasharray:300,100" />
+ </g>
+ <!-- End of generated content -->
+
+ </g>
+</svg>
Binary file master/images/struct/Use04.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/Use04.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,32 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>Example Use04 - 'use' with CSS styling</desc>
+ <defs style=" /* rule 9 */ stroke-miterlimit: 10" >
+ <path id="MyPath" d="M300 50 L900 50 L900 250 L300 250"
+ class="MyPathClass"
+ style=" /* rule 10 */ stroke-dasharray:300,100" />
+ </defs>
+ <style type="text/css">
+ <![CDATA[
+ /* rule 1 */ #MyUse { fill: blue }
+ /* rule 2 */ #MyPath { stroke: red }
+ /* rule 3 */ use { fill-opacity: .5 }
+ /* rule 4 */ path { stroke-opacity: .5 }
+ /* rule 5 */ .MyUseClass { stroke-linecap: round }
+ /* rule 6 */ .MyPathClass { stroke-linejoin: bevel }
+ /* rule 7 */ use > path { shape-rendering: optimizeQuality }
+ /* rule 8 */ g > path { visibility: hidden }
+ ]]>
+ </style>
+
+ <rect x="0" y="0" width="1200" height="300"
+ style="fill:none; stroke:blue; stroke-width:3"/>
+ <g style=" /* rule 11 */ stroke-width:40">
+ <use id="MyUse" xlink:href="#MyPath"
+ class="MyUseClass"
+ style="/* rule 12 */ stroke-dashoffset:50" />
+ </g>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/defs01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="3cm"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Local URI references within ancestor's 'defs' element.</desc>
+ <defs>
+ <linearGradient id="Gradient01">
+ <stop offset="20%" stop-color="#39F" />
+ <stop offset="90%" stop-color="#F3F" />
+ </linearGradient>
+ </defs>
+ <rect x="1cm" y="1cm" width="6cm" height="1cm"
+ fill="url(#Gradient01)" />
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x=".01cm" y=".01cm" width="7.98cm" height="2.98cm"
+ fill="none" stroke="blue" stroke-width=".02cm" />
+
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/struct/grouping01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg"
+ version="1.1" width="5cm" height="5cm">
+ <desc>Two groups, each of two rectangles</desc>
+ <g id="group1" fill="red">
+ <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
+ <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
+ </g>
+ <g id="group2" fill="blue">
+ <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
+ <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
+ </g>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
+ fill="none" stroke="blue" stroke-width=".02cm"/>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/styling/ExternalCSSStyleSheet.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<?xml-stylesheet href="mystyle.css" type="text/css"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <rect x="200" y="100" width="600" height="300"/>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/styling/InternalCSSStyleSheet.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="10cm" height="5cm" viewBox="0 0 1000 500">
+ <defs>
+ <style type="text/css"><![CDATA[
+ rect {
+ fill: red;
+ stroke: blue;
+ stroke-width: 3
+ }
+ ]]></style>
+ </defs>
+ <rect x="200" y="100" width="600" height="300"/>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/styling/PresentationAttributes.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="10cm" height="5cm" viewBox="0 0 1000 500">
+ <rect x="200" y="100" width="600" height="300"
+ fill="red" stroke="blue" stroke-width="3"/>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/styling/StyleAttribute.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="10cm" height="5cm" viewBox="0 0 1000 500">
+ <rect x="200" y="100" width="600" height="300"
+ style="fill: red; stroke: blue; stroke-width: 3"/>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/styling/mystyle.css Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,5 @@
+rect {
+ fill: red;
+ stroke: blue;
+ stroke-width: 3
+}
Binary file master/images/ta-i.png has changed
Binary file master/images/ta-n.png has changed
Binary file master/images/tc-l2.png has changed
Binary file master/images/tc-l3.png has changed
Binary file master/images/tc-l4.png has changed
Binary file master/images/tc-l5.png has changed
Binary file master/images/tc-le-ex.png has changed
Binary file master/images/tc-li-ex.png has changed
Binary file master/images/tc-li.png has changed
Binary file master/images/text/GlyphOrientAuto.png has changed
Binary file master/images/text/GlyphOrientZero.png has changed
Binary file master/images/text/lf-h-ex.png has changed
Binary file master/images/text/lf-h.png has changed
Binary file master/images/text/lf-v-ex.png has changed
Binary file master/images/text/lf-v-ex.small.png has changed
Binary file master/images/text/lf-v.png has changed
Binary file master/images/text/lf-vi-ex.png has changed
Binary file master/images/text/lf-vi-ex.small.png has changed
Binary file master/images/text/lf-vi.png has changed
Binary file master/images/text/rtl-complex.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/rtl-complex.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="100%" height="100%" viewBox="0 0 400 400"
+ direction="rtl" xml:lang="he">
+
+ <title direction="ltr" xml:lang="en">Right-to-left Text</title>
+ <desc direction="ltr" xml:lang="en">
+ An example for using the 'direction' and 'unicode-bidi' properties
+ in documents that predominantly use right-to-left languages.
+ </desc>
+
+ <text x="200" y="200" font-size="20"> כתובת
+ MAC:‏
+ <tspan direction="ltr" unicode-bidi="embed">00-24-AF-2A-55-FC</tspan>
+ </text>
+
+</svg>
Binary file master/images/text/rtl-text.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/rtl-text.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="100%" height="100%" viewBox="0 0 400 400"
+ direction="rtl" xml:lang="fa">
+
+ <title direction="ltr" xml:lang="en">Right-to-left Text</title>
+ <desc direction="ltr" xml:lang="en">
+ A simple example for using the 'direction' property in documents
+ that predominantly use right-to-left languages.
+ </desc>
+
+ <text x="200" y="200" font-size="20">داستان SVG 1.1 SE طولا ني است.</text>
+
+</svg>
\ No newline at end of file
Binary file master/images/text/text01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/text01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example text01 - 'Hello, out there' in blue</desc>
+
+ <text x="250" y="150"
+ font-family="Verdana" font-size="55" fill="blue" >
+ Hello, out there
+ </text>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
+
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/textdecoration01-patch.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example textdecoration01 - behavior of 'text-decoration' property</desc>
+ <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" />
+ <g font-size="60" fill="blue" stroke="red" stroke-width="1" >
+ <text x="100" y="75">Normal text</text>
+ <text x="100" y="165" text-decoration="line-through" fill-opacity="0" stroke-opacity="0">
+ <tspan text-decoration="normal" fill-opacity="1" stroke-opacity="1">Text with line-through</tspan></text>
+ <text x="100" y="165" text-decoration="line-through" >
+ <tspan fill-opacity="0" stroke-opacity="0">Text with line-through</tspan></text>
+ <text x="100" y="255" text-decoration="underline" >Underlined text</text>
+ <text x="100" y="345" text-decoration="underline" >
+ <tspan>One </tspan>
+ <tspan fill="yellow" stroke="purple" >word </tspan>
+ <tspan fill="yellow" stroke="black" >has </tspan>
+ <tspan fill="yellow" stroke="darkgreen" text-decoration="underline" >different </tspan>
+ <tspan fill="yellow" stroke="blue" >underlining</tspan>
+ </text>
+ </g>
+</svg>
+
+
Binary file master/images/text/textdecoration01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/textdecoration01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example textdecoration01 - behavior of 'text-decoration' property</desc>
+ <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" />
+ <g font-size="60" fill="blue" stroke="red" stroke-width="1" >
+ <text x="100" y="75">Normal text</text>
+ <text x="100" y="165" text-decoration="line-through" >Text with line-through</text>
+ <text x="100" y="255" text-decoration="underline" >Underlined text</text>
+ <text x="100" y="345" text-decoration="underline" >
+ <tspan>One </tspan>
+ <tspan fill="yellow" stroke="purple" >word </tspan>
+ <tspan fill="yellow" stroke="black" >has </tspan>
+ <tspan fill="yellow" stroke="darkgreen" text-decoration="underline" >different </tspan>
+ <tspan fill="yellow" stroke="blue" >underlining</tspan>
+ </text>
+ </g>
+</svg>
+
+
Binary file master/images/text/toap01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/toap01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,26 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <path id="MyPath"
+ d="M 100 200
+ C 200 100 300 0 400 100
+ C 500 200 600 300 700 200
+ C 800 100 900 100 900 100" />
+ </defs>
+ <desc>Example toap01 - simple text on a path</desc>
+
+ <use xlink:href="#MyPath" fill="none" stroke="red" />
+ <text font-family="Verdana" font-size="42.5" fill="blue" >
+ <textPath xlink:href="#MyPath">
+ We go up, then we go down, then up again
+ </textPath>
+ </text>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
+
Binary file master/images/text/toap02.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/toap02.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,33 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <path id="MyPath"
+ d="M 100 200
+ C 200 100 300 0 400 100
+ C 500 200 600 300 700 200
+ C 800 100 900 100 900 100" />
+ </defs>
+ <desc>Example toap02 - tspan within textPath</desc>
+
+ <use xlink:href="#MyPath" fill="none" stroke="red" />
+ <text font-family="Verdana" font-size="42.5" fill="blue" >
+ <textPath xlink:href="#MyPath">
+ We go
+ <tspan dy="-30" fill="red" >
+ up
+ </tspan>
+ <tspan dy="30">
+ ,
+ </tspan>
+ then we go down, then up again
+ </textPath>
+ </text>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
+
Binary file master/images/text/toap03.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/toap03.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,26 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <path id="MyPath"
+ d="M 100 200
+ C 200 100 300 0 400 100
+ C 500 200 600 300 700 200
+ C 800 100 900 100 900 100" />
+ </defs>
+ <desc>Example toap03 - text on a path with startOffset attribute</desc>
+
+ <use xlink:href="#MyPath" fill="none" stroke="red" />
+ <text font-family="Verdana" font-size="42.5" fill="blue" >
+ <textPath xlink:href="#MyPath" startOffset="80%">
+ We go up, then we go down, then up again
+ </textPath>
+ </text>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
+
Binary file master/images/text/toap04.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/toap04.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <path id="MyPath"
+ d="M 100 125
+ C 150 125 250 175 300 175
+ C 350 175 450 125 500 125
+ C 550 125 650 175 700 175
+ C 750 175 850 125 900 125" />
+ </defs>
+ <desc>Example toap04 - text on a path layout rules</desc>
+
+ <use xlink:href="#MyPath" fill="none" stroke="red" />
+ <text font-family="Verdana" font-size="60" fill="blue" letter-spacing="2" >
+ <textPath xlink:href="#MyPath">
+ Choose shame or get war
+ </textPath>
+ </text>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
+
Binary file master/images/text/toap05.png has changed
Binary file master/images/text/toap06.png has changed
Binary file master/images/text/tref01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/tref01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 1000 300" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <text id="ReferencedText">
+ Referenced character data
+ </text>
+ </defs>
+ <desc>Example tref01 - inline vs reference text content</desc>
+
+ <text x="100" y="100" font-size="45" fill="blue" >
+ Inline character data
+ </text>
+ <text x="100" y="200" font-size="45" fill="red" >
+ <tref xlink:href="#ReferencedText"/>
+ </text>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
+
Binary file master/images/text/tspan01.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/tspan01.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example tspan01 - using tspan to change visual attributes</desc>
+
+ <g font-family="Verdana" font-size="45" >
+ <text x="200" y="150" fill="blue" >
+ You are
+ <tspan font-weight="bold" fill="red" >not</tspan>
+ a banana.
+ </text>
+ </g>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
+
Binary file master/images/text/tspan02.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/tspan02.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example tspan02 - using tspan's dx and dy attributes
+ for incremental positioning adjustments</desc>
+
+ <g font-family="Verdana" font-size="45" >
+ <text x="200" y="150" fill="blue" >
+ But you
+ <tspan dx="2em" dy="-50" font-weight="bold" fill="red" >
+ are
+ </tspan>
+ <tspan dy="100">
+ a peach!
+ </tspan>
+ </text>
+ </g>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
+
Binary file master/images/text/tspan03.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/tspan03.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example tspan03 - using tspan's x and y attributes
+ for multiline text and precise glyph positioning</desc>
+
+ <g font-family="Verdana" font-size="45" >
+ <text fill="rgb(255,164,0)" >
+ <tspan x="300 350 400 450 500 550 600 650" y="100">
+ Cute and
+ </tspan>
+ <tspan x="375 425 475 525 575" y="200">
+ fuzzy
+ </tspan>
+ </text>
+ </g>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
+
Binary file master/images/text/tspan04.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/tspan04.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>
+ Example tspan04 - The number of rotate values is less than the number of
+ characters in the string.
+ </desc>
+ <text font-family="Verdana" font-size="55" fill="blue" >
+ <tspan x="250" y="150" rotate="-30,0,30">
+ Hello, out there
+ </tspan>
+ </text>
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="998" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+</svg>
\ No newline at end of file
Binary file master/images/text/tspan05-diagram.png has changed
Binary file master/images/text/tspan05.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/text/tspan05.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,41 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 500 120"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>
+ Example tspan05 - propagation of rotation values to nested tspan elements.
+ </desc>
+ <text id="parent" font-family="Arial, sans-serif" font-size="32" fill="red" x="40" y="40"
+ rotate="5,15,25,35,45,55">
+ Not
+
+ <tspan id="child1" rotate="-10,-20,-30,-40" fill="orange">
+ all characters
+
+ <tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow">
+ in
+
+ <tspan id="child3">
+ the
+ </tspan>
+ </tspan>
+
+ <tspan id="child4" fill="orange" x="40" y="90">
+ text
+ </tspan>
+
+ have a
+ </tspan>
+
+ <tspan id="child5" rotate="-10" fill="blue">
+ specified
+ </tspan>
+
+ rotation
+ </text>
+
+ <!-- Show outline of canvas using 'rect' element -->
+ <rect x="1" y="1" width="498" height="118" fill="none"
+ stroke="blue" stroke-width="2" />
+</svg>
Binary file master/images/tj-d-ex.png has changed
Binary file master/images/tj-d.png has changed
Binary file master/images/tj-dal-ex.png has changed
Binary file master/images/tj-dal.png has changed
Binary file master/images/tj-ii-ex.png has changed
Binary file master/images/tj-ii.png has changed
Binary file master/images/tj-iw-ex.png has changed
Binary file master/images/tj-iw.png has changed
Binary file master/images/tj-n.png has changed
Binary file master/images/tjt-n.png has changed
Binary file master/images/tjt-p.png has changed
Binary file master/images/tjt-pak.png has changed
Binary file master/images/tny.png has changed
Binary file master/images/vcss.png has changed
Binary file master/images/vxhtml10.png has changed
Binary file master/images/w3c_home.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/implnote.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,706 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Implementation Requirements</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Implementation Requirements</h1>
+
+ <p class="normativity"><strong>This appendix is normative.</strong></p>
+ <h2 id="Introduction">Introduction</h2>
+ <p>The following are notes about implementation requirements
+ corresponding to various features in the SVG language.</p>
+
+<h2 id="ErrorProcessing">Error processing</h2>
+
+ <p>There are various scenarios where an SVG document fragment
+ is technically <span class="SVG-Term">in error</span>:</p>
+ <ul>
+ <li>When the content does not conform to the <a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML 1.0
+ specification</a> [<a href="refs.html#ref-XML10">XML10</a>], such as the
+ use of incorrect XML syntax</li>
+ <li>When an element or attribute is encountered in the
+ document which is not part of the <a href="svgdtd.html">SVG
+ DTD</a> and which is not properly identified as being part of
+ another namespace (see <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a>
+ [<a href="refs.html#ref-XML-NS">XML-NS</a>])</li>
+ <li>When an element has an attribute or property value which
+ is not permissible according to this specification</li>
+ <li>Other situations that are described as being <em>in
+ error</em> in this specification</li>
+ </ul>
+ <p>A document can go in and out of error over time. For
+ example, document changes from the <a href="svgdom.html">SVG
+ DOM</a> or from <a href="animate.html">animation</a> can cause
+ a document to become <em>in error</em> and a further change can
+ cause the document to become correct again.</p>
+ <p>The following error processing shall occur when a document
+ is in error:</p>
+ <ul>
+ <li>
+ The document shall be rendered up to, but not including,
+ the first element which has an error. Exceptions:
+ <ul>
+ <li>If a <a>'path'</a> element is the
+ first element which has an error and the only errors are
+ in the <a href="paths.html#PathData">path data</a>
+ specification, then render the <a>'path'</a> up to the point of the
+ path data error. For related information, see <a
+ href="implnote.html#PathElementImplementationNotes"><span
+ class="element-name">'path'</span> element implementation
+ notes</a>.</li>
+ <li>If a <a>'polyline'</a> or <a>'polygon'</a> element is the
+ first element which has an error and the only errors are
+ within the <a>'polyline/points'</a> attribute, then render
+ the <a>'polyline'</a> or <a>'polygon'</a> up to the segment
+ with the error.</li>
+ </ul>
+ This approach will provide a visual clue to the user or
+ developer about where the error might be in the document.
+ </li>
+ <li>If the document has animations, the animations shall stop
+ at the point at which an error is encountered and the visual
+ presentation of the document shall reflect the animated
+ status of the document at the point the error was
+ encountered.</li>
+ <li>A highly perceivable indication of error shall occur. For
+ visual rendering situations, an example of an indication of
+ error would be to render a translucent colored pattern such
+ as a checkerboard on top of the area where the SVG content is
+ rendered.</li>
+ <li>If the user agent has access to an error reporting
+ capability such as status bar, it is recommended that the
+ user agent provide whatever additional detail it can to
+ enable the user or developer to quickly find the source of
+ the error. For example, the user agent might provide an error
+ message along with a line number and character number at
+ which the error was encountered.</li>
+ </ul>
+ <p>Because of situations where a block of scripting changes
+ might cause a given SVG document fragment to go into and out of
+ error, error processing shall occur only at times when document
+ presentation (e.g., rendering to the display device) is
+ updated. In particular, error processing shall be disabled
+ whenever redraw has been suspended via DOM calls to
+ <a>SVGSVGElement::suspendRedraw</a>.</p>
+
+<h2 id="VersionControl">Version control</h2>
+
+ <p>The SVG user agent must verify the reference to the PUBLIC
+ identifier in the <code><!DOCTYPE></code> statement or
+ the namespace reference in the <span class='attr-name'>'xmlns'</span> attribute on
+ the <a>'svg'</a> element to ensure that
+ the given document (or document fragment) identifies a version
+ of the SVG language which the SVG user agent supports. If the
+ version information is missing or the version information
+ indicates a version of the SVG language which the SVG user
+ agent does not support, then the SVG user agent is not required
+ to render that document or fragment. In particular, it is not
+ required that an SVG user agent attempt to render future
+ versions of the SVG language. If the user environment provides
+ such an option, the user agent should alert or otherwise notify
+ the user that the version of the file is not supported and
+ suggest an alternate processing option (e.g., installing an
+ updated version of the user agent) if such an option
+ exists.</p>
+ <p>An SVG user agent which supports the SVG Recommendation
+ should alert or otherwise notify the user whenever it
+ encounters an SVG document (or document fragment) whose
+ <code><!DOCTYPE></code> statement or corresponding
+ <span class='attr-name'>'xmlns'</span> attribute corresponds to a working draft
+ version of the SVG specification. All content based on working
+ drafts of this specification should be updated to the SVG
+ Recommendation.</p>
+
+<h2 id="RangeClamping">Clamping values which are restricted to a particular range</h2>
+
+ <p>Some numeric attribute and property values have restricted
+ ranges, such as color component values. When out-of-range
+ values are provided, the user agent shall defer any error
+ checking until after presentation time, as composited actions
+ might produce intermediate values which are out-of-range but
+ final values which are within range.</p>
+ <p>Color values are not in error if they are out-of-range, even
+ if final computations produce an out-of-range color value at
+ presentation time. It is recommended that user agents clamp
+ color values to the nearest color value (possibly determined by
+ simple clipping) which the system can process as late as
+ possible (e.g., presentation time), although it is acceptable
+ for user agents to clamp color values as early as parse time.
+ Thus, implementation dependencies might preclude consistent
+ behavior across different systems when out-of-range color
+ values are used.</p>
+ <p>Opacity values out-of-range are not in error and should be
+ clamped to the range 0 to 1 at the time which opacity values
+ have to be processed (e.g., at presentation time or when it is
+ necessary to perform intermediate filter effect
+ calculations).</p>
+
+<h2 id="PathElementImplementationNotes"><span class="element-name">'path'</span> element implementation notes</h2>
+
+ <p>A conforming SVG user agent must implement path rendering as
+ follows:</p>
+ <ul>
+ <li>
+ Error handling:
+ <ul>
+ <li>The general rule for error handling in path data is
+ that the SVG user agent shall render a <a>'path'</a> element up
+ to (but not including) the path command containing the
+ first error in the path data specification. This will
+ provide a visual clue to the user or developer about
+ where the error might be in the path data specification.
+ This rule will greatly discourage generation of invalid
+ SVG path data.</li>
+ <li>If a path data command contains an incorrect set of
+ parameters, then the given path data command is rendered
+ up to and including the last correctly defined path
+ segment, even if that path segment is a sub-component of
+ a compound path data command, such as a "lineto" with
+ several pairs of coordinates. For example, for the path
+ data string <span class='attr-value'>'M 10,10 L 20,20,30'</span>,
+ there is an odd number of parameters for the "L" command, which requires an even
+ number of parameters. The user agent is required to draw
+ the line from (10,10) to (20,20) and then perform error
+ reporting since <span class='attr-value'>'L 20 20'</span>
+ is the last correctly defined segment of the path data specification.</li>
+ <li>Wherever possible, all SVG user agents shall report
+ all errors to the user.</li>
+ </ul>
+ </li>
+ <li>
+ Markers, directionality and zero-length path segments:
+ <ul>
+ <li>If markers are specified, then a marker is drawn on
+ every applicable vertex, even if the given vertex is the
+ end point of a zero-length path segment and even if
+ "moveto" commands follow each other.</li>
+ <li>Certain line-capping and line-joining situations and
+ markers require that a path segment have directionality
+ at its start and end points. Zero-length path segments
+ have no directionality. In these cases, the following
+ algorithm is used to establish directionality: to
+ determine the directionality of the start point of a
+ zero-length path segment, go backwards in the path data
+ specification within the current subpath until you find a
+ segment which has directionality at its end point (e.g.,
+ a path segment with non-zero length) and use its ending
+ direction; otherwise, temporarily consider the start
+ point to lack directionality. Similarly, to determine the
+ directionality of the end point of a zero-length path
+ segment, go forwards in the path data specification
+ within the current subpath until you find a segment which
+ has directionality at its start point (e.g., a path
+ segment with non-zero length) and use its starting
+ direction; otherwise, temporarily consider the end point
+ to lack directionality. If the start point has
+ directionality but the end point doesn't, then the end
+ point uses the start point's directionality. If the end
+ point has directionality but the start point doesn't,
+ then the start point uses the end point's directionality.
+ Otherwise, set the directionality for the path segment's
+ start and end points to align with the positive x-axis in
+ user space.</li>
+ <li>As mentioned in <a href="painting.html#StrokeProperties">Stroke Properties</a>,
+ linecaps must be painted for zero length subpaths when
+ <a>'stroke-linecap'</a> has a value of
+ <span class='prop-value'>round</span> or
+ <span class='prop-value'>square</span>.</li>
+ </ul>
+ </li>
+ <li>
+ The S/s commands indicate that the first control point of
+ the given cubic Bézier segment is calculated by
+ reflecting the previous path segments second control point
+ relative to the current point. The exact math is as
+ follows. If the current point is (<var>curx</var>, <var>cury</var>) and the
+ second control point of the previous path segment is
+ (<var>oldx2</var>, <var>oldy2</var>), then the reflected point (i.e., (<var>newx1</var>,
+ <var>newy1</var>), the first control point of the current path
+ segment) is:
+<pre>
+(newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - cury))
+ = (2*curx - oldx2, 2*cury - oldy2)
+</pre>
+ </li>
+ <li>A non-positive radius value is an error.</li>
+ <li>Unrecognized contents within a path data stream (i.e.,
+ contents that are not part of the path data grammar) is an
+ error.</li>
+ </ul>
+
+<h2 id="ArcImplementationNotes">Elliptical arc implementation notes</h2>
+
+<div class='math'>
+
+<h3 id="ArcSyntax">Elliptical arc syntax</h3>
+
+ <p>An elliptical arc is a particular path command. As
+ such, it is described by the following parameters in order:</p>
+ <p>(<var>x</var><sub>1</sub>, <var>y</var><sub>1</sub>) are the absolute coordinates of the
+ current point on the path, obtained from the last two
+ parameters of the previous path command.</p>
+ <p><var>r<sub>x</sub></var>
+ and <var>r<sub>y</sub></var>
+ are the radii of the ellipse (also known as its semi-major and
+ semi-minor axes).</p>
+ <p><var>φ</var> is the angle from the x-axis of the current coordinate
+ system to the x-axis of the ellipse.</p>
+ <p><var>f<sub>A</sub></var> is
+ the large arc flag, and is 0
+ if an arc spanning less than or equal to 180 degrees is chosen, or 1
+ if an arc spanning greater than 180 degrees is chosen.</p>
+ <p><var>f<sub>S</sub></var> is
+ the sweep flag, and is 0 if
+ the line joining center to arc sweeps through decreasing
+ angles, or 1 if it sweeps
+ through increasing angles.</p>
+ <p>(<var>x</var><sub>2</sub>, <var>y</var><sub>2</sub>) are the absolute coordinates of the
+ final point of the arc.</p>
+ <p>This parameterization of elliptical arcs will be referred to
+ as <em>endpoint parameterization</em>. One of the
+ advantages of endpoint parameterization is that it permits a
+ consistent path syntax in which all path commands end in the
+ coordinates of the new "current point". The following
+ notes give rules and formulas to help implementers deal with
+ endpoint parameterization.</p>
+
+<h3 id="ArcOutOfRangeParameters">Out-of-range parameters</h3>
+
+ <p>Arbitrary numerical values are permitted for all elliptical
+ arc parameters, but where these values are invalid or
+ out-of-range, an implementation must make sense of them as
+ follows:</p>
+ <p>If the endpoints (<var>x</var><sub>1</sub>, <var>y</var><sub>1</sub>)
+ and (<var>x</var><sub>2</sub>, <var>y</var><sub>2</sub>) are identical, then this is
+ equivalent to omitting the elliptical arc segment entirely.</p>
+ <p>If <var>r<sub>x</sub></var> = 0 or
+ <var>r<sub>y</sub></var> = 0
+ then this arc is treated as a straight line segment
+ (a "lineto") joining the endpoints.</p>
+ <p>If <var>r<sub>x</sub></var> or <var>r<sub>y</sub></var>
+ have negative signs, these are dropped; the absolute value is
+ used instead.</p>
+ <p>If <var>r<sub>x</sub></var>, <var>r<sub>y</sub></var>
+ and <var>φ</var> are such that there is no solution
+ (basically, the ellipse is not big enough to reach
+ from (<var>x</var><sub>1</sub>, <var>y</var><sub>1</sub>)
+ to (<var>x</var><sub>2</sub>, <var>y</var><sub>2</sub>))
+ then the ellipse is scaled up
+ uniformly until there is exactly one solution (until the
+ ellipse is just big enough).</p>
+ <p><var>φ</var> is taken mod 360 degrees.</p>
+ <p>Any nonzero value for either of the flags <var>f<sub>A</sub></var>
+ or <var>f<sub>S</sub></var> is taken to mean the value 1.</p>
+ <p>This forgiving yet consistent treatment of out-of-range
+ values ensures that:</p>
+ <ul>
+ <li>The inevitable approximations arising from computer
+ arithmetic cannot cause a valid set of values written by one
+ SVG implementation to be treated as invalid when read by
+ another SVG implementation. This would otherwise be a
+ problem for common boundary cases such as a semicircular
+ arc.</li>
+ <li>Continuous animations that cause parameters to pass
+ through invalid values are not a problem. The motion
+ remains continuous.</li>
+ </ul>
+
+<h3 id="ArcParameterizationAlternatives">Parameterization alternatives</h3>
+
+ <p>An arbitrary point (<var>x</var>, <var>y</var>) on the elliptical
+ arc can be described by the 2-dimensional matrix equation</p>
+ <table summary="equation F.6.3.1" width="90%" border="0"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="equation F.6.3.1"
+ src="images/implnote/arcs/image002.png" /></td>
+ <td align="right">(F.6.3.1)</td>
+ </tr>
+ </table>
+ <p>(<var>c<sub>x</sub></var>, <var>c<sub>y</sub></var>) are
+ the coordinates of the center of the ellipse.</p>
+ <p><var>r<sub>x</sub></var> and <var>r<sub>y</sub></var>
+ are the radii of the ellipse (also known as its semi-major and
+ semi-minor axes).</p>
+ <p><var>θ</var> is the angle from the
+ x-axis of the current coordinate system to the x-axis of the
+ ellipse.</p>
+ <p><var>θ</var> ranges from:</p>
+ <ul>
+ <li><var>θ</var><sub>1</sub> which is
+ the start angle of the elliptical arc prior to the stretch and
+ rotate operations.</li>
+ <li><var>θ</var><sub>2</sub> which is
+ the end angle of the elliptical arc prior to the stretch and
+ rotate operations.</li>
+ <li>Δ<var>θ</var> which is the difference between these
+ two angles.</li>
+ </ul>
+ <p>If one thinks of an ellipse as a circle that has been
+ stretched and then rotated, then <var>θ</var><sub>1</sub>,
+ <var>θ</var><sub>2</sub> and Δ<var>θ</var>
+ are the start angle, end angle and sweep angle, respectively
+ of the arc prior to the stretch and rotate operations.
+ This leads to an alternate parameterization which is common
+ among graphics APIs, which will be referred to as <em>center
+ parameterization</em>. In the next sections, formulas are
+ given for mapping in both directions between center
+ parameterization and endpoint parameterization.</p>
+
+<h3 id="ArcConversionCenterToEndpoint">Conversion from center to endpoint parameterization</h3>
+
+<p>Given the following variables:</p>
+
+<p class='indented separated'>
+ <var>c<sub>x</sub></var>
+ <var>c<sub>y</sub></var>
+ <var>r<sub>x</sub></var>
+ <var>r<sub>y</sub></var>
+ <var>φ</var>
+ <var>θ</var><sub>1</sub>
+ Δ<var>θ</var>
+</p>
+
+<p>the task is to find:</p>
+
+<p class='indented separated'>
+ <var>x</var><sub>1</sub>
+ <var>y</var><sub>1</sub>
+ <var>x</var><sub>2</sub>
+ <var>y</var><sub>2</sub>
+ <var>f<sub>A</sub></var>
+ <var>f<sub>S</sub></var>
+</p>
+
+<p>This can be achieved using the following formulas:</p>
+
+ <table summary="elliptical arc formulas" width="90%" border="0"
+ cellspacing="8" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.4.1"
+ src="images/implnote/arcs/image004.png" /></td>
+ <td align="right">(F.6.4.1)</td>
+ </tr>
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.4.2"
+ src="images/implnote/arcs/image006.png" /></td>
+ <td align="right">(F.6.4.2)</td>
+ </tr>
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.4.3"
+ src="images/implnote/arcs/image008.png" /></td>
+ <td align="right">(F.6.4.3)</td>
+ </tr>
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.4.4"
+ src="images/implnote/arcs/image010.png" /></td>
+ <td align="right">(F.6.4.4)</td>
+ </tr>
+ </table>
+
+<h3 id="ArcConversionEndpointToCenter">Conversion from endpoint to center parameterization</h3>
+
+<p>Given the following variables:</p>
+
+<p class='indented separated'>
+ <var>x</var><sub>1</sub>
+ <var>y</var><sub>1</sub>
+ <var>x</var><sub>2</sub>
+ <var>y</var><sub>2</sub>
+ <var>f<sub>A</sub></var>
+ <var>f<sub>S</sub></var>
+ <var>r<sub>x</sub></var>
+ <var>r<sub>y</sub></var>
+ <var>φ</var>
+</p>
+
+<p>the task is to find:</p>
+
+<p class='indented separated'>
+ <var>c<sub>x</sub></var>
+ <var>c<sub>y</sub></var>
+ <var>θ</var><sub>1</sub>
+ Δ<var>θ</var>
+</p>
+
+
+<p>The equations simplify after a translation which
+places the origin at the midpoint of the line joining
+(<var>x</var><sub>1</sub>, <var>y</var><sub>1</sub>) to
+(<var>x</var><sub>2</sub>, <var>y</var><sub>2</sub>), followed by
+a rotation to line up the coordinate axes with the axes of the ellipse.
+All transformed coordinates will be written with primes. They are
+computed as intermediate values on the way toward finding the required
+center parameterization variables. This procedure consists of the
+following steps:</p>
+
+<ul>
+ <li>
+ <p><em>Step 1: Compute</em> (<var>x</var><sub>1</sub>′, <var>y</var><sub>1</sub>′)</p>
+ <table summary="elliptical arc formulas" width="90%" border="0"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.5.1"
+ src="images/implnote/arcs/image012.png" /></td>
+ <td align="right">(F.6.5.1)</td>
+ </tr>
+ </table>
+ </li>
+ <li>
+ <p><em>Step 2: Compute</em> (<var>c<sub>x</sub></var>′, <var>c<sub>y</sub></var>′)</p>
+ <table summary="elliptical arc formulas" width="90%" border="0"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.5.2"
+ src="images/implnote/arcs/image014.png" /></td>
+ <td align="right">(F.6.5.2)</td>
+ </tr>
+ </table>
+ <p>where the + sign is chosen if <var>f<sub>A</sub></var> ≠ <var>f<sub>S</sub></var>, and
+ the − sign is chosen if <var>f<sub>A</sub></var> = <var>f<sub>S</sub></var>.</p>
+ </li>
+ <li>
+ <p><em>Step 3: Compute</em> (<var>c<sub>x</sub></var>, <var>c<sub>y</sub></var>)
+ <em>from</em> (<var>c<sub>x</sub></var>′, <var>c<sub>y</sub></var>′)</p>
+ <table summary="elliptical arc formulas" width="90%" border="0"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.5.3"
+ src="images/implnote/arcs/image016.png" /></td>
+ <td align="right">(F.6.5.3)</td>
+ </tr>
+ </table>
+ </li>
+ <li>
+ <p><em>Step 4: Compute</em> <var>θ</var><sub>1</sub> and Δ<var>θ</var></p>
+ <p>In general, the angle between two vectors
+ (<var>u<sub>x</sub></var>, <var>u<sub>y</sub></var>)
+ and (<var>v<sub>x</sub></var>, <var>v<sub>y</sub></var>) can be computed as</p>
+ <table summary="elliptical arc formulas" width="90%" border="0"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.5.4"
+ src="images/implnote/arcs/image018.png" /></td>
+ <td align="right">(F.6.5.4)</td>
+ </tr>
+ </table>
+
+ <p>where the ± sign appearing here is the sign of
+ <var>u<sub>x</sub></var> <var>v<sub>y</sub></var> − <var>u<sub>y</sub></var> <var>v<sub>x</sub></var>.</p>
+
+ <p>This angle function can be used to express <var>θ</var><sub>1</sub> and
+ Δ<var>θ</var> as follows:</p>
+
+ <table summary="elliptical arc formulas" width="90%" border="0"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.5.5"
+ src="images/implnote/arcs/image020.png" /></td>
+ <td align="right">(F.6.5.5)</td>
+ </tr>
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.5.6"
+ src="images/implnote/arcs/image022.png" /></td>
+ <td align="right">(F.6.5.6)</td>
+ </tr>
+ </table>
+
+ <p>where <var>θ</var><sub>1</sub> is fixed in the range
+ −360° < Δ<var>θ</var> < 360° such that:</p>
+
+ <p class='indented'>if <var>f<sub>S</sub></var> = 0, then Δ<var>θ</var> < 0,</p>
+ <p class='indented'>else if <var>f<sub>S</sub></var> = 1, then Δ<var>θ</var> > 0.</p>
+
+ <p>In other words, if <var>f<sub>S</sub></var> = 0 and the
+ right side of (F.6.5.6) is greater than 0, then subtract 360°,
+ whereas if <var>f<sub>S</sub></var> = 1 and the right
+ side of (F.6.5.6) is less than 0, then add 360°. In all other cases
+ leave it as is.</p>
+ </li>
+</ul>
+
+<h3 id="ArcCorrectionOutOfRangeRadii">Correction of out-of-range radii</h3>
+
+<p>This section formalizes the adjustments to out-of-range
+<var>r<sub>x</sub></var> and <var>r<sub>y</sub></var> mentioned in
+F.6.2. Algorithmically these adjustments consist of the following
+steps:</p>
+
+<ul>
+ <li>
+ <p><em>Step 1: Ensure radii are non-zero</em></p>
+ <p>If <var>r<sub>x</sub></var> = 0 or
+ <var>r<sub>y</sub></var> = 0, then treat
+ this as a straight line from (<var>x</var><sub>1</sub>, <var>y</var><sub>1</sub>)
+ to (<var>x</var><sub>2</sub>, <var>y</var><sub>2</sub>) and stop. Otherwise,</p>
+ </li>
+
+ <li>
+ <p><em>Step 2: Ensure radii are positive</em></p>
+ <p>Take the absolute value of <var>r<sub>x</sub></var> and
+ <var>r<sub>y</sub></var>:</p>
+ <table summary="elliptical arc formulas" width="90%" border="0"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.6.1"
+ src="images/implnote/arcs/image024.png" /></td>
+ <td align="right">(F.6.6.1)</td>
+ </tr>
+ </table>
+ </li>
+
+ <li>
+ <p><em>Step 3: Ensure radii are large enough</em></p>
+ <p>Using the primed coordinate values of equation (F.6.5.1),
+ compute</p>
+ <table summary="elliptical arc formulas" width="90%" border="0"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.6.2"
+ src="images/implnote/arcs/image026.png" /></td>
+ <td align="right">(F.6.6.2)</td>
+ </tr>
+ </table>
+ <p>If the result of the above equation is less than or equal to
+ 1, then no further change need be made to <var>r<sub>x</sub></var>
+ and <var>r<sub>y</sub></var>. If
+ the result of the above equation is greater than 1, then make
+ the replacements</p>
+ <table summary="elliptical arc formulas" width="90%" border="0"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td valign="top"><img
+ alt="Equation F.6.6.3"
+ src="images/implnote/arcs/image028.png" /></td>
+ <td align="right">(F.6.6.3)</td>
+ </tr>
+ </table>
+ </li>
+
+ <li>
+ <p><em>Step 4: Proceed with computations</em></p>
+ <p>Proceed with the remaining elliptical arc computations, such
+ as those in section F.6.5. Note: As a consequence of the
+ radii corrections in this section, equation (F.6.5.2) for the
+ center of the ellipse always has at least one solution (i.e.
+ the radicand is never negative). In the case that the
+ radii are scaled up using equation (F.6.6.3), the radicand of
+ (F.6.5.2) is zero and there is exactly one solution for the
+ center of the ellipse.</p>
+ </li>
+</ul>
+
+</div>
+
+<h2 id="TextSelectionImplementationNotes">Text selection implementation notes</h2>
+
+ <p>The following implementation notes describe the algorithm
+ for deciding which characters are selected during a <a
+ href="text.html#TextSelection">text selection</a>
+ operation.</p>
+ <p>As the text selection operation occurs (e.g., while the user
+ clicks and drags the mouse to identify the selection), the user
+ agent determines a <em>start selection position</em> and an
+ <em>end selection position</em>, each of which represents a
+ position in the text string between two characters. After
+ determining start selection position and end selection
+ position, the user agent selects the appropriate characters,
+ where the resulting text selection consists of either:</p>
+ <ul>
+ <li>no selection or</li>
+ <li>a <em>start character</em>, an <em>end character</em>
+ (possibly the same character), and all of the characters
+ within the same <a>'text'</a> element whose position
+ in the DOM is logically between the start character and end
+ character.</li>
+ </ul>
+ <p>On systems with pointer devices, to determine the <em>start
+ selection position</em>, the SVG user agent determines which
+ boundary between characters corresponding to rendered glyphs is
+ the best target (e.g., closest) based on the current pointer
+ location at the time of the event that initiates the selection
+ operation (e.g., the mouse down event). The user agent then
+ tracks the completion of the selection operation (e.g., the
+ mouse drag, followed ultimately by the mouse up). At the end of
+ the selection operation, the user agent determines which
+ boundary between characters is the best target (e.g., closest)
+ for the <em>end selection position</em>.</p>
+ <p>If no character reordering has occurred due to <a
+ href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>,
+ then the selection consists of all characters between the
+ <em>start selection position</em> and <em>end selection
+ position</em>. For example, if a <a>'text'</a> element contains the
+ string "abcdef" and the start selection position and end
+ selection positions are 0 and 3 respectively (assuming the left
+ side of the "a" is position zero), then the selection will
+ consist of "abc".</p>
+ <p>When the user agent is implementing selection of
+ bidirectional text, and when the selection starts (or ends)
+ between characters which are not contiguous in logical order,
+ then there might be multiple potential combinations of
+ characters that can be considered part of the selection. The
+ algorithms to choose among the combinations of potential
+ selection options shall choose the selection option which most
+ closely matches the text string's visual rendering order.</p>
+ <p>When multiple characters map inseparably to a given set of
+ one or more glyphs, the user agent can either disallow the
+ selection to start in the middle of the glyph set or can
+ attempt to allocate portions of the area taken up by the glyph
+ set to the characters that correspond to the glyph.</p>
+ <p>For systems which support pointer devices such as a mouse,
+ the user agent is required to provide a mechanism for selecting
+ text even when the given text has associated event handlers or
+ links, which might block text selection due to event processing
+ precedence rules (see <a
+ href="interact.html#PointerEvents">Pointer events</a>). One
+ implementation option: For platforms which support a pointer
+ device such as a mouse, the user agent may provide for a small
+ additional region around character cells which initiates text
+ selection operations but does not initiate event handlers or
+ links.</p>
+
+<h2 id="PrintingImplementationNotes">Printing implementation notes</h2>
+
+ <p>For user agents which support both zooming on display
+ devices and printing, it is recommended that the default
+ printing option produce printed output that reflects the
+ display device's current view of the current SVG document
+ fragment (assuming there is no media-specific styling), taking
+ into account any zooming and panning done by the user, the
+ current state of animation, and any document changes due to DOM
+ and scripting. Thus, if the user zooms into a particular area
+ of a map on the display device and then requests a hardcopy,
+ the hardcopy should show the same view of the map as appears on
+ the display device. If a user pauses an animation and prints,
+ the hardcopy should show the same graphics as the currently
+ paused picture on the display device. If scripting has added or
+ removed elements from the document, then the hardcopy should
+ reflect the same changes that would be reflected on the
+ display.</p>
+ <p>When an SVG document is rendered on a static-only device
+ such as a printer which does not support SVG's animation and
+ scripting and facilities, then the user agent shall ignore any
+ animation and scripting elements in the document and render the
+ remaining graphics elements according to the rules in this
+ specification.</p>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/index.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,178 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<div class="head">
+ <p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
+ <h1 id="pagetitle">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</h1>
+ <h2 id="pagesubtitle">W3C <edit:maturity/> <em><edit:date/></em></h2>
+ <dl>
+ <dt>This version:</dt>
+ <dd><edit:thisversion/></dd>
+ <dt>Latest version:</dt>
+ <dd><edit:latestversion/></dd>
+ <dt>Previous version:</dt>
+ <dd><edit:previousversion/></dd>
+ <dt>Public comments:</dt>
+ <dd><a href="mailto:www-svg@w3.org" class='url'>www-svg@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/www-svg/">archive</a>)</dd>
+ <dt class="top-editors">Editors:</dt>
+ <dd>Erik Dahlström, Opera Software <<a href="mailto:ed@opera.com" class='url'>ed@opera.com</a>></dd>
+ <dd>Patrick Dengler, Microsoft Corporation <<a href="mailto:patd@microsoft.com" class='url'>patd@microsoft.com</a>></dd>
+ <dd>Anthony Grasso, Canon Inc. <<a href="mailto:anthony.grasso@cisra.canon.com.au" class='url'>anthony.grasso@cisra.canon.com.au</a>></dd>
+ <dd>Chris Lilley, W3C <<a href="mailto:chris@w3.org" class='url'>chris@w3.org</a>></dd>
+ <dd>Cameron McCormack, Mozilla Corporation <<a href="mailto:cam@mcc.id.au" class='url'>cam@mcc.id.au</a>></dd>
+ <dd>Doug Schepers, W3C <<a href="mailto:schepers@w3.org" class='url'>schepers@w3.org</a>></dd>
+ <dd>Jonathan Watt, Mozilla Corporation <<a href="mailto:jwatt@jwatt.org" class='url'>jwatt@jwatt.org</a>></dd>
+ <dd class="top-editors">Jon Ferraiolo, ex Adobe Systems <<a href="mailto:jferrai@us.ibm.com" class='url'>jferrai@us.ibm.com</a>> <span class="authornote">(Versions 1.0 and 1.1 First Edition; until 10 May 2006)</span></dd>
+ <dd>藤沢 淳 (FUJISAWA Jun), Canon Inc. <<a href="mailto:fujisawa.jun@canon.co.jp" class='url'>fujisawa.jun@canon.co.jp</a>> <span class="authornote">(Version 1.1 First Edition)</span></dd>
+ <dd>Dean Jackson, ex W3C <<a href="mailto:dean@w3.org" class='url'>dean@w3.org</a>> <span class="authornote">(Version 1.1 First Edition; until February 2007)</span></dd>
+ </dl>
+ <p>Please refer to the <a href="http://www.w3.org/2011/08/REC-SVG11-20110802-errata"><strong>errata</strong></a> for this document, which may include some normative corrections.</p>
+
+ <p>This document is also available in these non-normative formats: a
+ <a href="single-page.html">single-page version</a>, a
+ <a href="REC-SVG11-20110802.zip">zip archive of HTML</a> (without external dependencies),
+ and a <a href="REC-SVG11-20110802.pdf">PDF</a>.
+ See also <a href="http://www.w3.org/Graphics/SVG/svg-updates/translations"><strong>translations</strong></a>, noting that the English version of this specification is the only normative version.</p>
+ <edit:copyright/>
+</div>
+
+<hr/>
+
+<h2 id="abstract">Abstract</h2>
+
+<p>This specification defines the features and syntax for Scalable
+Vector Graphics (SVG) Version 1.1, a modularized language for describing
+two-dimensional vector and mixed vector/raster graphics in XML.</p>
+
+<h2 id="status">Status of this document</h2>
+
+<p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a> at http://www.w3.org/TR/.</em></p>
+
+<p>This document is the <edit:date/> SVG 1.1
+Second Edition Recommendation. The Second Edition incorporates a
+number of corrections that were published as
+<a href="http://www.w3.org/2003/01/REC-SVG11-20030114-errata">errata against the First Edition</a>,
+as well as numerous other changes that help make the specification
+more readable and unambiguous. The <a href="changes.html">Changes</a>
+appendix lists all of the changes that were made since the
+first Proposed Recommendation publication of the Second Edition. For all changes made
+between the First Edition and the Second Edition, see:</p>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2010/WD-SVG11-20100622/changes.html">Changes between the SVG 1.1 First Edition Recommendation and the first Last Call Working Draft of SVG 1.1 Second Edition</a></li>
+ <li><a href="http://www.w3.org/TR/2011/WD-SVG11-20110512/changes.html">Changes between the first and second Last Call Working Drafts of SVG 1.1 Second Edition</a></li>
+ <li><a href="http://www.w3.org/TR/2011/PR-SVG11-20110609/changes.html">Changes between the second Last Call Working Draft and the Proposed Recommendation of SVG 1.1 Second Edition</a></li>
+ <li><a href="changes.html">Changes between the Proposed Recommendation and this document</a></li>
+</ul>
+
+<p>Comments on this Recommendation are welcome. Corrections
+against the specification will be published as errata,
+and subsequently will be incorporated into future editions of SVG 1.1 or into
+SVG 2.0. Comments can be sent to <a href="mailto:www-svg@w3.org" class='url'>www-svg@w3.org</a>, the public email
+list for issues related to vector graphics on the Web. This list is
+<a href="http://lists.w3.org/Archives/Public/www-svg/">archived</a> and
+senders must agree to have their message publicly archived from their
+first posting. To subscribe send an email to <a href="mailto:www-svg-request@w3.org" class='url'>www-svg-request@w3.org</a> with
+the word <code>subscribe</code> in the
+subject line.</p>
+
+<p>The W3C SVG Working Group has released an expanded
+<a href="http://dev.w3.org/SVG/profiles/1.1F2/test/harness/index.html">test suite</a> for SVG 1.1
+along with an
+<a href="http://dev.w3.org/SVG/profiles/1.1F2/test/status/implementation_matrix.html">implementation report</a>.
+This test suite will continue to be updated with new tests to improve interoperability even after Recommendation phase.</p>
+
+<p>This document has been produced by the
+<a href="http://www.w3.org/Graphics/SVG/WG">W3C SVG Working Group</a> as part of
+the <a href="http://www.w3.org/Graphics/Activity">Graphics Activity</a> within
+the <a href="http://www.w3.org/Interaction/">W3C Interaction Domain</a>. The
+goals of the W3C SVG Working Group are discussed in the
+<a href="http://www.w3.org/2007/11/SVG_rechartering/SVG-WG-charter.html">W3C SVG Charter</a>.
+The W3C SVG Working Group maintains a public Web page,
+<a href="http://www.w3.org/Graphics/SVG/" class='url'>http://www.w3.org/Graphics/SVG/</a>,
+that contains further background information. The authors of
+this document are the SVG Working Group participants.</p>
+
+<p>This document was produced by a group operating under the
+ <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
+ W3C maintains a <a rel="disclosure" href="http://www.w3.org/2004/01/pp-impl/19480/status">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
+
+<p>A list of current W3C Recommendations and
+other technical documents can be found at
+<a href="http://www.w3.org/TR/" class='url'>http://www.w3.org/TR/</a>. W3C publications
+may be updated, replaced, or obsoleted by other documents at any time.</p>
+
+<h3 id="AvailableLanguages">Available languages</h3>
+
+<p>The English version of this specification is the only normative version.
+However, for translations in other languages see
+<a href="http://www.w3.org/Graphics/SVG/svg-updates/translations.html" class='url'>http://www.w3.org/Graphics/SVG/svg-updates/translations.html</a>.</p>
+
+<div id="minitoc-section">
+<h2 id="minitoc">Table of Contents</h2>
+
+<edit:minitoc/>
+</div>
+
+<h2 id="Acknowledgments">Acknowledgments</h2>
+
+<p>The SVG Working Group would like to thank the following people for
+contributing to this specification by raising issues that resulted
+in errata that were folded in to this document:
+Tavmjong Bah,
+Brian Birtles,
+Tolga Capin,
+Alex Danilo,
+Thomas DeWeese,
+Alexey Feldgendler,
+Vincent Hardy,
+Ian Hickson,
+Olaf Hoffmann,
+Daniel Holbert,
+Oliver Hunt,
+Anne van Kesteren,
+Takeshi Kurosawa,
+Paul Libbrecht,
+Robert Longson,
+Helder Magalhães,
+Robert O’Callahan,
+Olli Pettay,
+Antoine Quint,
+Kalle Raita,
+Tim Rowley,
+Peter Sorotokin,
+Henry S. Thompson,
+Jasper van de Gronde,
+Mohamed Zergaoui,
+Boris Zbarsky.
+</p>
+
+<p>In addition, the SVG Working Group would like to acknowledge the
+contributions of the editors and authors of
+<a href='http://www.w3.org/TR/2001/REC-SVG-20010904/'>SVG 1.0</a> and
+<a href='http://www.w3.org/TR/2003/REC-SVG11-20030114/'>SVG 1.1 (First Edition)</a>,
+as much of the text in this document derives from these earlier
+versions of the SVG specification.</p>
+
+<p>Finally, the SVG Working Group would like to acknowledge the
+great many people outside of the SVG Working Group who help with the
+process of developing the SVG specifications. These people are too
+numerous to list individually. They include but are not limited to
+the early implementers of the SVG 1.0 and 1.1 languages (including
+viewers, authoring tools, and server-side transcoders), developers of
+SVG content, people who have contributed on the <span class='url'>www-svg@w3.org</span> and
+<span class='url'>svg-developers@yahoogroups.com</span> email lists, other Working Groups at the
+W3C, and the W3C Team. SVG 1.1 is truly a cooperative effort between
+the SVG Working Group, the rest of the W3C, and the public and benefits
+greatly from the pioneering work of early implementers and content
+developers, feedback from the public, and help from the W3C team.</p>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/interact.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1104 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Interactivity</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Interactivity</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+ <p>SVG content can be interactive (i.e., responsive to
+ user-initiated events) by utilizing the following features in
+ the SVG language:</p>
+ <ul>
+ <li>User-initiated actions such as button presses on the
+ pointing device (e.g., a mouse) can cause <a
+ href="animate.html">animations</a> or <a
+ href="script.html">scripts</a> to execute.</li>
+ <li>The user can initiate hyperlinks to new Web pages (see <a
+ href="linking.html#Links">Links out of SVG content: the <span
+ class="element-name">'a'</span> element</a>) by actions such
+ as mouse clicks when the pointing device is positioned over
+ particular graphics elements.</li>
+ <li>In many cases, depending on the value of the <a>'zoomAndPan'</a>
+ attribute on the <a>'svg'</a> element and on the
+ characteristics of the user agent, users are able to zoom
+ into and pan around SVG content.</li>
+ <li>User movements of the pointing device can cause changes
+ to the <a href="interact.html#Cursors">cursor</a> that shows
+ the current position of the pointing device.</li>
+ </ul>
+ <p>This chapter describes:</p>
+ <ul>
+ <li>information about <a
+ href="interact.html#SVGEvents">events</a>, including under
+ which circumstances events are triggered</li>
+ <li>how to indicate whether a given document can be <a
+ href="interact.html#EnableZoomAndPanControls">zoomed and
+ panned</a></li>
+ <li>how to specify which <a
+ href="interact.html#Cursors">cursors</a> to use</li>
+ </ul>
+ <p>Related information can be found in other chapters:</p>
+ <ul>
+ <li>hyperlinks are discussed in <a
+ href="linking.html">Links</a></li>
+ <li>scripting and event attributes are discussed in <a
+ href="script.html">Scripting</a></li>
+ <li>SVG's relationship to DOM2 events is discussed in <a
+ href="svgdom.html#RelationshipWithDOM2Events">Relationship
+ with DOM2 event model</a></li>
+ <li>animation is discussed in <a
+ href="animate.html">Animation</a></li>
+ </ul>
+
+<h2 id="SVGEvents">Complete list of supported events</h2>
+
+ <p>The following aspects of SVG are affected by events:</p>
+ <ul>
+ <li>Using <a href="svgdom.html">SVG Document Object Model
+ (DOM)</a>, a script can <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-registration">register
+ DOM 2 event listeners</a>
+ ([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], section 1.3) so that script can be invoked when a
+ given event occurs.</li>
+ <li>SVG includes <a href="script.html#EventAttributes">event
+ attributes</a> on selected elements which define script that
+ can be executed when a given event occurs in association with
+ the given element.</li>
+ <li>SVG's <a>animation elements</a> can be defined to begin or end based on
+ events.</li>
+ </ul>
+ <p>The following table lists all of the events which are
+ recognized and supported in SVG. The <em>Event name</em> in the
+ first column is the name to use within SVG's <a>animation elements</a> to
+ define the events which can start or end animations. The
+ <em>DOM2 name</em> in the second column is the name to use when
+ defining <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-registration">DOM 2 event listeners</a>
+ ([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], section 1.3).
+ The <em>Event attribute name</em> in
+ the fourth column contains the corresponding name of the <a
+ href="script.html#EventAttributes">event attributes</a> that
+ can be attached to elements in the SVG language.</p>
+ <p>Requirements in the table on whether an event of a given type
+ bubbles or is cancelable apply only to events that are created and
+ dispatched by the user agent. Events of those types created from script
+ using the <a class='idlattr' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-DocumentEvent-createEvent'>createEvent</a>
+ method on the <a>DocumentEvent</a> interface can be made to bubble
+ or be cancelable with the
+ <a class='idlattr' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-initEvent'>initEvent</a>
+ method.</p>
+ <table summary="Complete list of SVG events" class="vert event-table">
+ <tr>
+ <th>Event name and description</th>
+ <th>DOM2 name</th>
+ <th>DOM2 category</th>
+ <th>Event attribute name</th>
+ </tr>
+ <tr>
+ <td id="FocusInEvent"><p class="event-name"><strong>focusin</strong></p>
+ <p>Occurs when an element receives focus, such as when a <a>'text'</a> becomes selected.</p></td>
+ <td>DOMFocusIn</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-UIEvent">
+ UIEvent</a></td>
+ <td><a
+ href="script.html#OnFocusInEventAttribute">onfocusin</a></td>
+ </tr>
+ <tr>
+ <td id="FocusOutEvent"><p class="event-name"><strong>focusout</strong></p>
+ <p>Occurs when an element loses focus, such as when a <a>'text'</a> becomes unselected.</p></td>
+ <td>DOMFocusOut</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-UIEvent">
+ UIEvent</a></td>
+ <td><a
+ href="script.html#OnFocusOutEventAttribute">onfocusout</a></td>
+ </tr>
+ <tr>
+ <td id="ActivateEvent"><p class="event-name"><strong>activate</strong></p>
+ <p>Occurs when an element is activated, for instance, through
+ a mouse click or a keypress. A numerical argument is
+ provided to give an indication of the type of activation
+ that occurs: 1 for a simple activation (e.g. a simple click
+ or Enter), 2 for hyperactivation (for instance a double
+ click or Shift Enter).</p></td>
+ <td>DOMActivate</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-UIEvent">
+ UIEvent</a></td>
+ <td><a
+ href="script.html#OnActivateEventAttribute">onactivate</a></td>
+ </tr>
+ <tr>
+ <td id="ClickEvent"><p class="event-name"><strong>click</strong></p>
+ <p>Occurs when the pointing device button is clicked over
+ an element. A click is defined as a mousedown and mouseup
+ over the same screen location. The sequence of these events
+ is: <code>mousedown</code>, <code>mouseup</code>,
+ <code>click</code>. If multiple clicks occur at the same
+ screen location, the sequence repeats with the
+ <code>detail</code> attribute incrementing with each
+ repetition.</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent">
+ MouseEvent</a></td>
+ <td><a
+ href="script.html#OnClickEventAttribute">onclick</a></td>
+ </tr>
+ <tr>
+ <td id="MouseDownEvent"><p class="event-name"><strong>mousedown</strong></p>
+ <p>Occurs when the pointing device button is pressed over
+ an element.</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent">
+ MouseEvent</a></td>
+ <td><a
+ href="script.html#OnMouseDownEventAttribute">onmousedown</a></td>
+ </tr>
+ <tr>
+ <td id="MouseUpEvent"><p class="event-name"><strong>mouseup</strong></p>
+ <p>Occurs when the pointing device button is released over
+ an element.</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent">
+ MouseEvent</a></td>
+ <td><a
+ href="script.html#OnMouseUpEventAttribute">onmouseup</a></td>
+ </tr>
+ <tr>
+ <td id="MouseOverEvent"><p class="event-name"><strong>mouseover</strong></p>
+ <p>Occurs when the pointing device is moved onto an
+ element.</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent">
+ MouseEvent</a></td>
+ <td><a
+ href="script.html#OnMouseOverEventAttribute">onmouseover</a></td>
+ </tr>
+ <tr>
+ <td id="MouseMoveEvent"><p class="event-name"><strong>mousemove</strong></p>
+ <p>Occurs when the pointing device is moved while it is
+ over an element.</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent">
+ MouseEvent</a></td>
+ <td><a
+ href="script.html#OnMouseMoveEventAttribute">onmousemove</a></td>
+ </tr>
+ <tr>
+ <td id="MouseOutEvent"><p class="event-name"><strong>mouseout</strong></p>
+ <p>Occurs when the pointing device is moved away from an
+ element.</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent">
+ MouseEvent</a></td>
+ <td><a
+ href="script.html#OnMouseOutEventAttribute">onmouseout</a></td>
+ </tr>
+ <tr>
+ <td id="DOMSubtreeModifiedEvent"><p class="event-name"><strong>DOMSubtreeModified</strong></p>
+ <p>This is a general event for notification of all changes
+ to the document. It can be used instead of the more
+ specific events listed below. (The normative definition of
+ this event is the description in the <a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ DOM2 specification</a>.)</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ MutationEvent</a></td>
+ <td>none</td>
+ </tr>
+ <tr>
+ <td id="DOMNodeInsertedEvent"><p class="event-name"><strong>DOMNodeInserted</strong></p>
+ <p>Fired when a node has been added as a child of another
+ node. (The normative definition of this event is the
+ description in the <a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ DOM2 specification</a>.)</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ MutationEvent</a></td>
+ <td>none</td>
+ </tr>
+ <tr>
+ <td id="DOMNodeRemovedEvent"><p class="event-name"><strong>DOMNodeRemoved</strong></p>
+ <p>Fired when a node is being removed from another node.
+ (The normative definition of this event is the description
+ in the <a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ DOM2 specification</a>.)</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ MutationEvent</a></td>
+ <td>none</td>
+ </tr>
+ <tr>
+ <td id="DOMNodeRemovedFromDocumentEvent"><p class="event-name"><strong>DOMNodeRemovedFromDocument</strong></p>
+ <p>Fired when a node is being removed from a document,
+ either through direct removal of the Node or removal of a
+ subtree in which it is contained. (The normative definition
+ of this event is the description in the <a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ DOM2 specification</a>.)</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ MutationEvent</a></td>
+ <td>none</td>
+ </tr>
+ <tr>
+ <td id="DOMNodeInsertedIntoDocumentEvent"><p class="event-name"><strong>DOMNodeInsertedIntoDocument</strong></p>
+ <p>Fired when a node is being inserted into a document,
+ either through direct insertion of the Node or insertion of
+ a subtree in which it is contained. (The normative
+ definition of this event is the description in the <a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ DOM2 specification</a>.)</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ MutationEvent</a></td>
+ <td>none</td>
+ </tr>
+ <tr>
+ <td id="DOMAttrModifiedEvent"><p class="event-name"><strong>DOMAttrModified</strong></p>
+ <p>Fired after an attribute has been modified on a node.
+ (The normative definition of this event is the description
+ in the <a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ DOM2 specification</a>.)</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ MutationEvent</a></td>
+ <td>none</td>
+ </tr>
+ <tr>
+ <td id="DOMCharacterDataModifiedEvent"><p class="event-name"><strong>DOMCharacterDataModified</strong></p>
+ <p>Fired after CharacterData within a node has been
+ modified but the node itself has not been inserted or
+ deleted. (The normative definition of this event is the
+ description in the <a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ DOM2 specification</a>.)</p></td>
+ <td>(same)</td>
+ <td><a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent">
+ MutationEvent</a></td>
+ <td>none</td>
+ </tr>
+ <tr>
+ <td id="LoadEvent"><p class="event-name"><strong>SVGLoad</strong></p>
+ <p>The event is triggered at the point at which the user
+ agent has fully parsed the element and its descendants and
+ is ready to act appropriately upon that element, such as
+ being ready to render the element to the target device.
+ <a href="struct.html#ExternalResourcesRequired">Referenced
+ external resources that are required</a> must be loaded,
+ parsed and ready to render before the event is triggered.
+ Optional external resources are not required to be ready
+ for the event to be triggered.</p>
+ <p>SVGLoad events do not bubble and are not cancelable.</p>
+ </td>
+ <td>(same)</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnLoadEventAttribute">onload</a></td>
+ </tr>
+ <tr>
+ <td id="UnloadEvent"><p class="event-name"><strong>SVGUnload</strong></p>
+ <p>Only applicable to <a>outermost svg elements</a>. The unload
+ event occurs when the DOM implementation removes a document
+ from a window or frame.</p>
+ <p>SVGUnload events do not bubble and are not cancelable.</p>
+ </td>
+ <td>(same)</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnUnloadEventAttribute">onunload</a></td>
+ </tr>
+ <tr>
+ <td id="AbortEvent"><p class="event-name"><strong>SVGAbort</strong></p>
+ <p>The abort event occurs when page loading is stopped
+ before an element has been allowed to load completely.</p>
+ <p>SVGAbort events bubble but are not cancelable.</p>
+ </td>
+ <td>(same)</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnAbortEventAttribute">onabort</a></td>
+ </tr>
+ <tr>
+ <td id="ErrorEvent"><p class="event-name"><strong>SVGError</strong></p>
+ <p>The error event occurs when an element does not load
+ properly or when an error occurs during script
+ execution.</p>
+ <p>SVGError events bubble but are not cancelable.</p>
+ </td>
+ <td>(same)</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnErrorEventAttribute">onerror</a></td>
+ </tr>
+ <tr>
+ <td id="ResizeEvent"><p class="event-name"><strong>SVGResize</strong></p>
+ <p>Occurs when a document view is being resized. This
+ event is only applicable to <a>outermost svg elements</a> and is
+ dispatched after the resize operation has taken place. The
+ target of the event is the <a>'svg'</a> element.</p>
+ <p>SVGResize events bubble but are not cancelable.</p>
+ </td>
+ <td>(same)</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnResizeEventAttribute">onresize</a></td>
+ </tr>
+ <tr>
+ <td id="ScrollEvent"><p class="event-name"><strong>SVGScroll</strong></p>
+ <p>Occurs when a document view is being shifted along the
+ X or Y or both axis, either through a direct user
+ interaction or any change on the <a>SVGSVGElement::currentTranslate</a> property
+ available on <a>SVGSVGElement</a> interface. This event is only
+ applicable to <a>outermost svg elements</a> and is
+ dispatched after the shift modification has taken place.
+ The target of the event is the <a>'svg'</a> element.</p>
+ <p>SVGScroll events bubble but are not cancelable.</p>
+ </td>
+ <td>(same)</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnScrollEventAttribute">onscroll</a></td>
+ </tr>
+ <tr>
+ <td id="ZoomEvent"><p class="event-name"><strong>SVGZoom</strong></p>
+ <p>Occurs when the zoom level of a document view is being
+ changed, either through a direct user interaction or any
+ change to the <a>SVGSVGElement::currentScale</a>
+ property available on <a>SVGSVGElement</a> interface. This event
+ is only applicable to <a>outermost svg elements</a> and is
+ dispatched after the zoom level modification has taken
+ place. The target of the event is the <a>'svg'</a> element.</p>
+ <p>SVGZoom events bubble but are not cancelable.</p>
+ </td>
+ <td>none</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnZoomEventAttribute">onzoom</a></td>
+ </tr>
+ <tr>
+ <td id="BeginEvent"><p class="event-name"><strong>beginEvent</strong></p>
+ <p>Occurs when an animation element begins. For details,
+ see the description of Interface TimeEvent in the <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">
+ SMIL Animation specification</a>.</p></td>
+ <td>none</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnBeginEventAttribute">onbegin</a></td>
+ </tr>
+ <tr>
+ <td id="EndEvent"><p class="event-name"><strong>endEvent</strong></p>
+ <p>Occurs when an animation element ends. For details, see
+ the description of Interface TimeEvent in the <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">
+ SMIL Animation specification</a>.</p></td>
+ <td>none</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnEndEventAttribute">onend</a></td>
+ </tr>
+ <tr>
+ <td id="RepeatEvent"><p class="event-name"><strong>repeatEvent</strong></p>
+ <p>Occurs when an animation element repeats. It is raised
+ each time the element repeats, after the first iteration.
+ For details, see the description of Interface TimeEvent in
+ the <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">
+ SMIL Animation specification</a>.</p></td>
+ <td>none</td>
+ <td>none</td>
+ <td><a
+ href="script.html#OnRepeatEventAttribute">onrepeat</a></td>
+ </tr>
+ </table>
+ <p>As in <a
+ href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-keyevents">
+ DOM 2 Key events</a> ([<a href='refs.html#ref-DOM2EVENTS'>DOM2EVENTS</a>], section 1.6.3), the SVG specification does not provide a
+ key event set. An event set designed for use with keyboard
+ input devices will be included in a later version of the DOM
+ and SVG specifications.</p>
+
+ <p>Details on the parameters passed to event listeners for the
+ event types from DOM2 can be found in the DOM2 specification.
+ For other event types, the parameters passed to event listeners
+ are described elsewhere in this specification.</p>
+
+<p><a href='script.html#EventAttributes'>Event listener attributes</a>
+can be specified on some elements to listen to a given event. The script in
+such attributes is run only in response to "bubbling" and "at target" phase
+events dispatched to the element.</p>
+
+<p>Likewise, <a href='animate.html#EventValueSyntax'>event-value timing specifiers</a>
+used in <a>animation element</a> <a>'animate/begin'</a> and <a>'animate/end'</a>
+attributes are resolved to concrete times only in response to "bubbling" and
+"at target" phase events dispatched to the relevant element.</p>
+
+<h2 id="UIEvents">User interface events</h2>
+
+ <p>On user agents which support interactivity, it is common for
+ authors to define SVG documents such that they are responsive
+ to user interface events. Among the set of possible user events
+ are <a href="interact.html#PointerEvents">pointer events</a>,
+ keyboard events, and document events.</p>
+ <p>In response to user interface (UI) events, the author might
+ start an animation, perform a hyperlink to another Web page,
+ highlight part of the document (e.g., change the color of the
+ graphics elements which are under the pointer), initiate a
+ "roll-over" (e.g., cause some previously hidden graphics
+ elements to appear near the pointer) or launch a script which
+ communicates with a remote database.</p>
+
+<h2 id="PointerEvents">Pointer events</h2>
+
+ <p>User interface events that occur because of user actions
+ performed on a pointer device are called pointer events.</p>
+ <p>Many systems support pointer devices such as a mouse or
+ trackball. On systems which use a mouse, pointer events consist
+ of actions such as mouse movements and mouse clicks. On systems
+ with a different pointer device, the pointing device often
+ emulates the behavior of the mouse by providing a mechanism for
+ equivalent user actions, such as a button to press which is
+ equivalent to a mouse click.</p>
+ <p>For each pointer event, the SVG user agent determines the
+ <em>target element</em> of a given pointer event. The target
+ element is the topmost graphics element whose relevant
+ graphical content is under the pointer at the time of the
+ event. (See property <a>'pointer-events'</a> for a description
+ of how to determine whether an element's relevant graphical
+ content is under the pointer, and thus in which circumstances
+ that graphic element can be the target element for a pointer
+ event.) When an element is not displayed (i.e., when the
+ <a>'display'</a> property on that element
+ or one of its ancestors has a value of <span
+ class="prop-value">none</span>), that element cannot be the
+ target of pointer events.</p>
+ <p>If a target element for the pointer event exists, then
+ the event is dispatched to that element according to the
+ normal <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-flow'>event flow</a>
+ ([<a href='refs.html#ref-DOM2EVENTS'>DOM2EVENTS</a>], section 1.2).
+ Note, however, that if the target element is in a
+ <a>'use'</a> element shadow tree, that the event flow
+ will include <a>SVGElementInstance</a> objects. See
+ <a href='struct.html#UseElement'>The <span class='element-name'>'use'</span> element</a>
+ for details.</p>
+ <p>If a target element for the pointer event does not exist,
+ then the event is ignored.</p>
+
+ <h2 id="pointer-processing">Hit-testing and processing order for user interface events</h2>
+ <p>There are two distinct aspects of pointer-device interaction with an element or area:</p>
+ <ol>
+ <li>hit-testing, to determine if a pointer event (such as a mouse movement or mouse click) occurred within the interaction area of an element, and the subsequent DOM event flow;</li>
+ <li>functional processing of actions associated with any relevant element.</li>
+ </ol>
+
+ <h3 id="hit-testing">Hit-testing</h3>
+ <p>Determining whether a pointer event results in a positive <a>hit-test</a>
+ depends upon the position of the pointer, the size and shape of the
+ <a>graphics element</a>, and the computed value of the <a>'pointer-events'</a>
+ property on the element. The definition of the <a>'pointer-events'</a>
+ property below describes the exact region that is sensitive to pointer
+ events for a given type of graphics element.</p>
+
+ <p>Note that the <a>'svg'</a> element is not a <a>graphics element</a>, and in
+ a <a href="conform.html#ConformingSVGStandAloneFiles">Conforming SVG Stand-Alone File</a>
+ a <a>rootmost 'svg' element</a> will never be the target of pointer events,
+ though events can bubble to this element.
+ If a pointer event does not result in a positive <a>hit-test</a> on a
+ <a>graphics element</a>, then it should evoke any user-agent-specific window
+ behavior, such as a presenting a context menu or controls to allow zooming
+ and panning of an SVG document fragment.</p>
+
+ <p>This specification does not define the behavior of pointer events on the <a>rootmost 'svg' element</a> for SVG images which are embedded by reference
+ or inclusion within another document, e.g., whether the <a>rootmost 'svg' element</a> embedded in an HTML document intercepts mouse click events;
+ future specifications may define this behavior, but for the purpose of this specification, the behavior is implementation-specific.</p>
+
+
+ <h3 id="event-processing">Event processing</h3>
+ <p>An element which is the target of a user interface event may have
+ particular interaction behaviors, depending upon the type of element and
+ whether it has explicit associated interactions, such as scripted event
+ listeners, CSS pseudo-classes matches, or declarative animations
+ with event-based timing. The algorithm and order for processing
+ user interface events for a given target element, after dispatching the
+ DOM event, is as follows:</p>
+
+ <ol>
+ <li>If an event handler registered on this element invokes the <code>preventDefault()</code> DOM method, then no further processing for this element is performed, and the event follows the <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-flow">event flow processing</a> as described in <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html">DOM Level 2 Events</a> [<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>] (or its successor);</li>
+
+ <li>If the element has an associated title or description, such as a <a>'title element'</a> element or an <a>'xlink:title'</a> attribute, and the user agent supports the display of such information (e.g. via a tooltip or status-bar message), that information should be displayed, as appropriate to the type of pointer event;</li>
+
+ <li>If the element matches any relevant <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15">dynamic pseudo-class selectors</a> appropriate to the type of pointer event, such as <code>:hover</code>, <code>:active</code>, or <code>:focus</code> as described in [<a href="refs.html#ref-CSS2">CSS2</a>], section 5.11, then the relevant class properties are applied;</li>
+
+ <li>If the element and the event type are associated with the activation
+ or cancelation of declarative animation though the use of
+ <a href="animate.html#EventValueSyntax">event-value</a> timing specifiers,
+ any corresponding instance times must be resolved, and any conseqential
+ actions of this instance time resolution (such as immediately starting
+ or stopping the animation) must be performed;</li>
+
+ <li>If the element is a hyperlink (e.g., it is a descendant element of an <a>'a'</a> element), and the pointer event is of a type that activates that hyperlink (e.g. via a mouse click), and if the hyperlink traversal changes the context of the content (e.g. opens a different document, or moves the pointer away from this element by moving to another part of the same document), then no further processing for this element is performed;</li>
+
+ <li>If the element is a <a>text content element</a>, and the event type is one which the user agent recognizes as part of a text-selection operation (e.g., a mouse click and drag, or a double-click), then the <a
+ href="text.html#TextSelection">text selection</a> algorithm is performed;</li>
+
+ <li>If the event type is one which the user agent associates with the evocation of special user-interface controls (e.g., a right-click or command-click evoking a context menu), the user agent should evoke such user-agent-specific behavior, such as presenting a context menu or controls to allow zooming and panning of an SVG document fragment.</li>
+ </ol>
+
+<h2 id="PointerEventsProperty">The <span class="prop-name">'pointer-events'</span> property</h2>
+ <p>In different circumstances, authors may want to control
+ under what conditions particular graphic elements can become
+ the target of pointer events. For example, the author might
+ want a given element to receive pointer events only when the
+ pointer is over the stroked perimeter of a given shape. In
+ other cases, the author might want a given element to ignore
+ pointer events under all circumstances so that graphical
+ elements underneath the given element will become the target of
+ pointer events.</p>
+
+ <p>The effects of masking and clipping differ with respect to <a href="interact.html#PointerEventsProperty">pointer-events</a>.
+ A clip path is a geometric boundary, and a given point is clearly either inside or outside that boundary; thus, pointer events must be captured
+ normally over the rendered areas of a clipped element, but must not be captured over the clipped areas, as described in the definition of
+ <a href="masking.html#clipPath-geometry">clipping paths</a>. By contrast, a mask is not a binary transition, but a pixel operation,
+ and different behavior for fully transparent and almost-but-not-fully-transparent may be confusingly arbitrary; as a consequence, for elements with a
+ mask applied, pointer-events must still be captured even in areas where the mask goes to zero opacity. If an author wishes to achieve an effect where
+ the transparent parts of a mask allow pointer-events to pass to an element below, a combination of masking and clipping may be used.</p>
+ <p>The <a>'filter property'</a> property has no effect on pointer-events processing, and must in this context be treated as if the <a>'filter property'</a> wasn't specified.</p>
+
+ <p>For example, suppose a circle with a <a>'stroke'</a> of <span
+ class="prop-value">red</span> (i.e., the outline is solid red)
+ and a <a>'fill'</a> of <span class="prop-value">none</span> (i.e., the interior is not
+ painted) is rendered directly on top of a rectangle with a <a>'fill'</a> of <span
+ class="prop-value">blue</span>. The author might want the
+ circle to be the target of pointer events only when the pointer
+ is over the perimeter of the circle. When the pointer is over
+ the interior of the circle, the author might want the
+ underlying rectangle to be the target element of pointer
+ events.</p>
+ <p>The <a>'pointer-events'</a> property
+ specifies under what circumstances a given graphics element can
+ be the target element for a pointer event. It affects the
+ circumstances under which the following are processed:</p>
+ <ul>
+ <li>user interface events such as mouse clicks</li>
+ <li><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15">dynamic pseudo-classes</a>
+ (i.e., :hover, :active and :focus;
+ [<a href="refs.html#ref-CSS2">CSS2</a>], section 5.11)</li>
+ <li>hyperlinks (see <a href="linking.html#Links">Links out of
+ SVG content: the <span class="element-name">'a'</span>
+ element</a>)</li>
+ </ul>
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'pointer-events'</span></dt>
+ <dd>
+ <table summary="pointer-events property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td><em>Value:</em> </td>
+ <td>visiblePainted | visibleFill | visibleStroke |
+ visible |<br />
+ painted | fill | stroke | all | none | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr>
+ <td><em>Initial:</em> </td>
+ <td>visiblePainted</td>
+ </tr>
+ <tr>
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ </tr>
+ <tr>
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <dl>
+ <dt><span class="prop-value">visiblePainted</span></dt>
+ <dd>
+ The given element can be the target element for pointer events when
+ the <a>'visibility'</a> property is set to
+ <span class="prop-value">visible</span> and when the pointer is over a
+ "painted" area. The pointer is over a painted area if it is over the
+ interior (i.e., fill) of the element and the <a>'fill'</a> property has
+ an actual value other than <span class="prop-value">none</span> or it
+ is over the perimeter (i.e., stroke) of the element and the <a>'stroke'</a>
+ property is set to a value other than <span class="prop-value">none</span>.
+ </dd>
+
+ <dt><span class="prop-value">visibleFill</span></dt>
+ <dd>
+ The given element can be the target element for pointer events when the
+ <a>'visibility'</a>
+ property is set to <span class="prop-value">visible</span> and when the
+ pointer is over the interior (i.e., fill) of the element. The value of
+ the
+ <a>'fill'</a>
+ property does not affect event processing.
+ </dd>
+
+ <dt><span class="prop-value">visibleStroke</span></dt>
+ <dd>
+ The given element can be the target element for pointer events when the
+ <a>'visibility'</a>
+ property is set to <span class="prop-value">visible</span> and when the
+ pointer is over the perimeter (i.e., stroke) of the element. The value
+ of the
+ <a>'stroke'</a>
+ property does not affect event processing.
+ </dd>
+
+ <dt><span class="prop-value">visible</span></dt>
+ <dd>
+ The given element can be the target element for pointer events when the
+ <a>'visibility'</a>
+ property is set to <span class="prop-value">visible</span> and the
+ pointer is over either the interior (i.e., fill) or the perimeter (i.e.,
+ stroke) of the element. The values of the
+ <a>'fill'</a>
+ and
+ <a>'stroke'</a>
+ do not affect event processing.
+ </dd>
+
+ <dt><span class="prop-value">painted</span></dt>
+ <dd>
+ The given element can be the target element for pointer events when the
+ pointer is over a "painted" area. The pointer is over a painted area if
+ it is over the interior (i.e., fill) of the element and the <a>'fill'</a>
+ property has an actual value other than
+ <span class="prop-value">none</span> or it is over the perimeter (i.e.,
+ stroke) of the element and the <a>'stroke'</a> property has an actual
+ value other than <span class="prop-value">none</span>. The value of the
+ <a>'visibility'</a> property does not effect event processing.
+ </dd>
+
+ <dt><span class="prop-value">fill</span></dt>
+ <dd>
+ The given element can be the target element for pointer events when the
+ pointer is over the interior (i.e., fill) of the element. The values of
+ the
+ <a>'fill'</a>
+ and
+ <a>'visibility'</a>
+ properties do not affect event processing.
+ </dd>
+
+ <dt><span class="prop-value">stroke</span></dt>
+ <dd>
+ The given element can be the target element for pointer events when the
+ pointer is over the perimeter (i.e., stroke) of the element. The values
+ of the
+ <a>'stroke'</a>
+ and
+ <a>'visibility'</a>
+ properties do not affect event processing.
+ </dd>
+
+ <dt><span class="prop-value">all</span></dt>
+ <dd>
+ The given element can be the target element for pointer events whenever
+ the pointer is over either the interior (i.e., fill) or the perimeter
+ (i.e., stroke) of the element. The values of the
+ <a>'fill'</a>,
+ <a>'stroke'</a>
+ and
+ <a>'visibility'</a>
+ properties do not affect event processing.
+ </dd>
+
+ <dt><span class="prop-value">none</span></dt>
+ <dd>The given element does not receive pointer events.</dd>
+ </dl>
+ <p>
+ For text elements, hit-testing is performed on a character cell basis:
+ </p>
+ <ul>
+ <li>
+ The value <span class="prop-value">visiblePainted</span> means that the
+ text string can receive events anywhere within the character cell if
+ either the
+ <a>'fill'</a>
+ property is set to a value other than <span class="prop-value">none</span>
+ or the
+ <a>'stroke'</a>
+ property is set to a value other than <span class="prop-value">none</span>,
+ with the additional requirement that the
+ <a>'visibility'</a>
+ property is set to <span class="prop-value">visible</span>.
+ </li>
+ <li>
+ The values <span class="prop-value">visibleFill</span>,
+ <span class="prop-value">visibleStroke</span>
+ and
+ <span class="prop-value">visible</span>
+ are equivalent and indicate that the text string can receive events
+ anywhere within the character cell if the
+ <a>'visibility'</a>
+ property is set to <span class="prop-value">visible</span>. The values
+ of the
+ <a>'fill'</a>
+ and
+ <a>'stroke'</a>
+ properties do not affect event processing.
+ </li>
+ <li>
+ The value <span class="prop-value">painted</span> means that the text
+ string can receive events anywhere within the character cell if either
+ the
+ <a>'fill'</a>
+ property is set to a value other than
+ <span class="prop-value">none</span> or the
+ <a>'stroke'</a>
+ property is set to a value other than <span class="prop-value">none</span>.
+ The value of the
+ <a>'visibility'</a>
+ property does not affect event processing.
+ </li>
+ <li>
+ The values <span class="prop-value">fill</span>,
+ <span class="prop-value">stroke</span> and
+ <span class="prop-value">all</span> are equivalent and indicate that
+ the text string can receive events anywhere within the character cell.
+ The values of the
+ <a>'fill'</a>,
+ <a>'stroke'</a>
+ and
+ <a>'visibility'</a>
+ properties do not affect event processing.
+ </li>
+ <li>
+ The value <span class="prop-value">none</span> indicates that the given
+ text does not receive pointer events.
+ </li>
+ </ul>
+ <p>
+ For raster images, hit-testing is either performed on a
+ whole-image basis (i.e., the rectangular area for the image is
+ one of the determinants for whether the image receives the
+ event) or on a per-pixel basis (i.e., the alpha values for
+ pixels under the pointer help determine whether the image
+ receives the event):
+ </p>
+ <ul>
+ <li>
+ The value <span class="prop-value">visiblePainted</span> means that the
+ raster image can receive events anywhere within the bounds of the image
+ if any pixel from the raster image which is under the pointer is not
+ fully transparent, with the additional requirement that the
+ <a>'visibility'</a>
+ property is set to <span class="prop-value">visible</span>.
+ </li>
+ <li>
+ The values <span class="prop-value">visibleFill</span>,
+ <span class="prop-value">visibleStroke</span> and
+ <span class="prop-value">visible</span> are equivalent and indicate
+ that the image can receive events anywhere within the rectangular area
+ for the image if the
+ <a>'visibility'</a>
+ property is set to <span class="prop-value">visible</span>.
+ </li>
+ <li>
+ The value <span class="prop-value">painted</span> means that the raster
+ image can receive events anywhere within the bounds of the image if any
+ pixel from the raster image which is under the pointer is not fully
+ transparent. The value of the
+ <a>'visibility'</a>
+ property does not affect event processing.
+ </li>
+ <li>The values <span class="prop-value">fill</span>, <span
+ class="prop-value">stroke</span> and <span
+ class="prop-value">all</span> are equivalent and indicate
+ that the image can receive events anywhere within the
+ rectangular area for the image. The value of the <a>'visibility'</a> property does not
+ affect event processing.</li>
+ <li>The value <span class="prop-value">none</span> indicates
+ that the image does not receive pointer events.</li>
+ </ul>
+ <p>Note that for raster images, the values of properties <a>'opacity'</a>,
+ <a>'fill-opacity'</a>, <a>'stroke-opacity'</a>, <a>'fill'</a> and
+ <a>'stroke'</a> do not affect event processing.</p>
+
+<h2 id="EnableZoomAndPanControls">Magnification and panning</h2>
+
+ <p id="ZoomAndPanAttribute">Magnification represents a complete, uniform transformation
+ on an SVG document fragment, where the magnify operation scales
+ all graphical elements by the same amount. A magnify operation
+ has the effect of a supplemental scale and translate
+ transformation placed at the outermost level on the SVG
+ document fragment (i.e., outside the <a>outermost svg element</a>).</p>
+ <p>Panning represents a translation (i.e., a shift)
+ transformation on an SVG document fragment in response to a
+ user interface action.</p>
+ <p>SVG user agents that operate in interaction-capable user
+ environments are required to support the ability to magnify and
+ pan.</p>
+ <p>The <a>outermost svg element</a>
+ in an SVG document fragment has attribute <a>'svg/zoomAndPan'</a>, which takes the possible
+ values of <em>disable</em> and <em>magnify</em>, with the
+ default being <em>magnify</em>.</p>
+ <p>If <em>disable</em>, the user agent shall disable any
+ magnification and panning controls and not allow the user to
+ magnify or pan on the given document fragment.</p>
+ <p>If <em>magnify</em>, in environments that support user
+ interactivity, the user agent shall provide controls to allow
+ the user to perform a "magnify" operation on the document
+ fragment.</p>
+ <p>If a <a>'svg/zoomAndPan'</a> attribute is
+ assigned to an inner <a>'svg'</a>
+ element, the <a>'svg/zoomAndPan'</a> setting
+ on the inner <a>'svg'</a> element
+ will have no effect on the SVG user agent.</p>
+ <p><span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: no.</span></p>
+
+<h2 id="Cursors">Cursors</h2>
+
+<h3 id="CursorIntro">Introduction to cursors</h3>
+
+ <p>Some interactive display environments provide the ability to
+ modify the appearance of the pointer, which is also known as
+ the <em>cursor</em>. Three types of cursors are available:</p>
+ <ul>
+ <li>Standard built-in cursors</li>
+ <li>Platform-specific custom cursors</li>
+ <li>Platform-independent custom cursors</li>
+ </ul>
+ <p>The <a>'cursor property'</a> property is used to
+ specify which cursor to use. The <a>'cursor property'</a> property can be used to
+ reference standard built-in cursors by specifying a keyword
+ such as <em>crosshair</em> or a custom cursor. Custom cursors
+ are referenced via a <funciri> and can point to either an
+ external resource such as a platform-specific cursor file or to
+ a <a>'cursor element'</a> element, which can be
+ used to define a platform-independent cursor.</p>
+
+<h3 id="CursorProperty">The <span class="prop-name">'cursor'</span> property</h3>
+
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'cursor'</span></dt>
+ <dd>
+ <table summary="cursor property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr>
+ <td><em>Value:</em> </td>
+ <td>[ [<a
+ href="types.html#DataTypeFuncIRI"><funciri></a> ,]* [
+ auto | crosshair | default | pointer | move |
+ e-resize | ne-resize | nw-resize | n-resize |
+ se-resize | sw-resize | s-resize | w-resize| text |
+ wait | help ] ] | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr>
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="intro.html#TermContainerElement">container
+ elements</a> and <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ </tr>
+ <tr>
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <td><em>Media:</em> </td>
+ <td>visual, interactive</td>
+ </tr>
+ <tr>
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property specifies the type of cursor to be displayed
+ for the pointing device. Values have the following
+ meanings:</p>
+ <dl>
+ <dt><span class='attr-value'>auto</span></dt>
+ <dd>The UA determines the cursor to display based on the
+ current context.</dd>
+ <dt><span class='attr-value'>crosshair</span></dt>
+ <dd>A simple crosshair (e.g., short line segments resembling
+ a "+" sign).</dd>
+ <dt><span class='attr-value'>default</span></dt>
+ <dd>The platform-dependent default cursor. Often rendered as
+ an arrow.</dd>
+ <dt><span class='attr-value'>pointer</span></dt>
+ <dd>The cursor is a pointer that indicates a link.</dd>
+ <dt><span class='attr-value'>move</span></dt>
+ <dd>Indicates something is to be moved.</dd>
+ <dt><span class='attr-value'>e-resize, ne-resize, nw-resize, n-resize,
+ se-resize, sw-resize, s-resize, w-resize</span></dt>
+ <dd>Indicate that some edge is to be moved. For example, the
+ 'se-resize' cursor is used when the movement starts from the
+ south-east corner of the box.</dd>
+ <dt><span class='attr-value'>text</span></dt>
+ <dd>Indicates text that can be selected. Often rendered as an
+ I-bar.</dd>
+ <dt><span class='attr-value'>wait</span></dt>
+ <dd>Indicates that the program is busy. Often rendered as a
+ watch or hourglass.</dd>
+ <dt><span class='attr-value'>help</span></dt>
+ <dd>Help is available for the object under the cursor. Often
+ rendered as a question mark or a balloon.</dd>
+ <dt><span class='attr-value'><funciri></span></dt>
+ <dd>The user agent retrieves the cursor from the resource
+ designated by the URI. If the user agent cannot handle the
+ first cursor of a list of cursors, it shall attempt to handle
+ the second, etc. If the user agent cannot handle any
+ user-defined cursor, it must use the generic cursor at the
+ end of the list.</dd>
+ </dl>
+ <div class="example">
+<pre>
+P { cursor : url("mything.cur"), url("second.svg#curs"), text; }
+</pre>
+ </div>
+ <p>The <a>'cursor property'</a> property for SVG
+ is identical to the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#propdef-cursor"><span class="prop-name">'cursor'</span>
+ property defined in CSS2</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 18.1), with the
+ additional requirement that SVG user agents must support cursors defined by
+ the SVG <a>'cursor element'</a> element. This gives a single, cross-platform, interoperable cursor format, with PNG as the raster component.</p>
+
+<h3 id="CursorElement">The <span class="element-name">'cursor'</span> element</h3>
+
+<edit:with element='cursor'>
+
+ <p>The <a>'cursor element'</a> element can
+ be used to define a platform-independent custom cursor. A
+ recommended approach for defining a platform-independent custom
+ cursor is to create a PNG image [<a href="refs.html#ref-PNG">PNG</a>]
+ and define a <a>'cursor element'</a> element
+ that references the PNG image and identifies the exact position
+ within the image which is the pointer position (i.e., the hot
+ spot).</p>
+ <p>The PNG format is recommended because it supports the
+ ability to define a transparency mask via an alpha channel. If
+ a different image format is used, this format should support
+ the definition of a transparency mask (two options: provide an
+ explicit alpha channel or use a particular pixel color to
+ indicate transparency). If the transparency mask can be
+ determined, the mask defines the shape of the cursor;
+ otherwise, the cursor is an opaque rectangle. Typically, the
+ other pixel information (e.g., the R, G and B channels) defines
+ the colors for those parts of the cursor which are not masked
+ out. Note that cursors usually contain at least two colors so
+ that the cursor can be visible over most backgrounds.</p>
+
+<edit:elementsummary name='cursor'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="CursorElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The <em>x-coordinate</em> of the position in the
+ cursor's coordinate system which represents the precise
+ position that is being pointed to.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="CursorElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The <em>y-coordinate</em> of the position in the
+ cursor's coordinate system which represents the precise
+ position that is being pointed to.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="CursorElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeFuncIRI"><funciri></a></span>"</dt>
+ <dd>A <a href="types.html#DataTypeFuncIRI">Functional IRI
+ reference</a> to the file or element which provides the
+ image of the cursor.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p>SVG user agents are required to support PNG format images as
+ targets of the <a>'xlink:href'</a>
+ attribute.</p>
+
+</edit:with>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGCursorElement">Interface SVGCursorElement</h3>
+
+<edit:with element='cursor'>
+<edit:interface name='::svg::SVGCursorElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/intro.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,743 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Introduction</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Introduction</h1>
+
+<h2 id="AboutSVG">About SVG</h2>
+
+ <p>This specification defines the features and syntax for <a
+ href="http://www.w3.org/Graphics/SVG/">Scalable Vector Graphics
+ (SVG)</a>.</p>
+ <p>SVG is a language for describing two-dimensional graphics in
+ XML [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>]. SVG
+ allows for three types of graphic objects: vector graphic
+ shapes (e.g., paths consisting of straight lines and curves),
+ images and text. Graphical objects can be grouped, styled,
+ transformed and composited into previously rendered objects.
+ The feature set includes nested transformations, clipping
+ paths, alpha masks, filter effects and template objects.</p>
+ <p>SVG drawings can be <a href="interact.html">interactive</a>
+ and <a href="animate.html">dynamic</a>. <a
+ href="animate.html">Animations</a> can be defined and triggered
+ either declaratively (i.e., by embedding SVG animation elements
+ in SVG content) or via scripting.</p>
+ <p>Sophisticated applications of SVG are possible by use of a
+ supplemental scripting language which accesses <a
+ href="svgdom.html">SVG Document Object Model (DOM)</a>, which
+ provides complete access to all elements, attributes and
+ properties. A rich set of <a
+ href="interact.html#SVGEvents">event handlers</a> such as
+ <a>'onmouseover'</a> and <a>'onclick'</a> can be assigned to any SVG graphical
+ object. Because of its <a
+ href="intro.html#W3CCompatibility">compatibility and leveraging
+ of other Web standards</a>, features like <a
+ href="script.html">scripting</a> can be done on XHTML and SVG
+ elements simultaneously within the same Web page.</p>
+ <p>SVG is a language for rich graphical content. For
+ accessibility reasons, if there is an original source document
+ containing higher-level structure and semantics, it is
+ recommended that the higher-level information be made available
+ somehow, either by making the original source document
+ available, or making an alternative version available in an
+ alternative format which conveys the higher-level information,
+ or by using SVG's facilities to include the higher-level
+ information within the SVG content. For suggested techniques in
+ achieving greater accessibility, see <a
+ href="access.html">Accessibility</a>.</p>
+
+ <p>SVG 1.1 is a modularization of SVG 1.0 [<a href='refs.html#ref-SVG10'>SVG10</a>].
+ See the <a href="svgdtd.html">Document Type Definition</a> appendix for
+ details on how the DTD is structured to allow profiling and composition with
+ other XML languages.</p>
+
+ <h2 id="MIMEType">SVG MIME type, file name extension and Macintosh file
+ type</h2>
+ <p>The MIME type for SVG is "<tt>image/svg+xml</tt>" (see
+ <a href="http://www.ietf.org/rfc/rfc3023.txt"><cite>XML Media Types</cite></a>
+ [<a href="refs.html#ref-RFC3023">RFC3023</a>]). The
+ registration of this MIME type is in progress at the W3C.</p>
+ <p>It is recommended that SVG files have the extension
+ <code>".svg"</code> (all lowercase) on all platforms. It is
+ recommended that <a href="http://www.ietf.org/rfc/rfc1952.txt">gzip-compressed</a>
+ [<a href="refs.html#ref-RFC1952">RFC1952</a>]
+ SVG files have the extension <code>".svgz"</code> (all
+ lowercase) on all platforms.</p>
+ <p>It is recommended that SVG files stored on Macintosh HFS
+ file systems be given a file type of <code>"svg "</code>
+ (all lowercase, with a space character as the fourth letter).
+ It is recommended that gzip-compressed
+ SVG files stored on Macintosh HFS file systems be given a file
+ type of <code>"svgz"</code> (all lowercase).</p>
+ <h2 id="NamespaceAndDTDIdentifiers">SVG Namespace, Public Identifier and System
+ Identifier</h2>
+ <p>The following are the SVG 1.1 namespace, public identifier
+ and system identifier:</p>
+ <dl>
+ <dt id="Namespace">SVG Namespace:</dt>
+ <dd>http://www.w3.org/2000/svg</dd>
+ <dt id="PublicID">Public Identifier for SVG 1.1:</dt>
+ <dd>PUBLIC "-//W3C//DTD SVG 1.1//EN"</dd>
+ <dt id="SystemID">System Identifier for the SVG 1.1 Recommendation:</dt>
+ <dd>http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd</dd>
+ </dl>
+ <p>The following is an example <a
+ href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-prolog-dtd">document
+ type declaration</a> for an SVG document:</p>
+<pre>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+</pre>
+ <p>Note that DTD listed in the System Identifier is a
+ modularized DTD (i.e. its contents are spread over multiple
+ files), which means that a validator may have to fetch the
+ multiple modules in order to validate. For that reason,
+ there is a single flattened DTD available that corresponds
+ to the SVG 1.1 modularized DTD. It can be found at
+ <a href="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd">http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd</a>.</p>
+
+ <p>While a DTD is provided in this specification, the use of DTDs for
+ validating XML documents is known to be problematic. In particular, DTDs
+ do not handle namespaces gracefully. It is <em>not</em> recommended that
+ a DOCTYPE declaration be included in SVG documents.</p>
+
+ <h2 id="W3CCompatibility">Compatibility with Other Standards Efforts</h2>
+ <p>SVG leverages and integrates with other W3C specifications
+ and standards efforts. By leveraging and conforming to other
+ standards, SVG becomes more powerful and makes it easier for
+ users to learn how to incorporate SVG into their Web sites.</p>
+ <p>The following describes some of the ways in which SVG
+ maintains compatibility with, leverages and integrates with
+ other W3C efforts:</p>
+ <ul>
+ <li>SVG is an application of XML and is compatible with the
+ <a href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible Markup Language (XML) 1.0</cite></a> Recommendation
+ [<a href="refs.html#ref-XML10">XML10</a>]</li>
+ <li>SVG is compatible with the <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a> Recommendation
+ [<a href="refs.html#ref-XML-NS">XML-NS</a>]</li>
+ <li>SVG utilizes <a href="http://www.w3.org/TR/2001/REC-xlink-20010627/"><cite>XML Linking Language (XLink)</cite></a>
+ [<a href="refs.html#ref-XLINK">XLINK</a>] for IRI
+ referencing and requires support for base IRI specifications
+ defined in <a href="http://www.w3.org/TR/2009/REC-xmlbase-20090128/"><cite>XML Base</cite></a>
+ [<a href="refs.html#ref-XML-BASE">XML-BASE</a>].</li>
+ <li>SVG content can be styled by either CSS (see
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/"><cite>Cascading Style Sheets (CSS) level 2</cite></a>
+ [<a href="refs.html#ref-CSS2">CSS2</a>]) or XSLT
+ (see <a href="http://www.w3.org/TR/1999/REC-xslt-19991116"><cite>XSL Transformations (XSLT) Version 1.0</cite></a>
+ [<a href="refs.html#ref-XSLT">XSLT</a>] and
+ <a href="http://www.w3.org/TR/2007/REC-xslt20-20070123/"><cite>XSL Transformations (XSLT) Version 2.0</cite></a>
+ [<a href="refs.html#ref-XSLT2">XSLT2</a>]).
+ See <a href="styling.html#StylingWithCSS">Styling with CSS</a> and
+ <a href="styling.html#StylingWithXSL">Styling with XSL</a> for details.</li>
+ <li>SVG supports relevant properties and approaches common to
+ CSS and XSL, plus selected semantics and features of CSS (see
+ <a href="styling.html#SVGStylingProperties">SVG's styling
+ properties</a> and <a href="styling.html#SVGUseOfCSS">SVG's
+ Use of Cascading Style Sheets</a>).</li>
+ <li>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>].</li>
+ <li>SVG includes a complete Document Object Model (DOM) and
+ conforms to the <a href="http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/"><cite>Document Object Model (DOM) Level 1</cite></a>
+ Recommendation [<a
+ href="refs.html#ref-DOM1">DOM1</a>]. The
+ SVG DOM has a high level of compatibility and consistency
+ with the HTML DOM that is defined in the DOM Level 1
+ specification. Additionally, the SVG DOM supports and
+ incorporates many of the facilities described in
+ DOM Level 2, including the CSS object model and event
+ handling
+ [<a href="refs.html#ref-DOM2">DOM2</a>]
+ [<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>]
+ [<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>].</li>
+ <li>SVG incorporates some features and approaches that are
+ part of the <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/"><cite>Synchronized Multimedia Integration Language (SMIL) 3.0 Specification</cite></a>
+ [<a href="refs.html#ref-SMIL">SMIL</a>], including
+ the <a>'switch'</a> element and the <a>'systemLanguage'</a>
+ attribute.</li>
+ <li>SVG's animation features (see <a
+ href="animate.html">Animation</a>) were developed in
+ collaboration with the W3C Synchronized Multimedia (SYMM)
+ Working Group, developers of the <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/"><cite>Synchronized Multimedia Integration Language (SMIL) 3.0 Specification</cite></a>
+ [<a href="refs.html#ref-SMIL">SMIL</a>]. SVG's
+ animation features incorporate and extend the general-purpose
+ XML animation capabilities described in the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>].</li>
+ <li>SVG has been designed to allow SMIL to
+ use animated or static SVG content as media components.</li>
+ <li>SVG attempts to achieve maximum compatibility with both
+ <a href="http://www.w3.org/TR/1999/REC-html401-19991224/"><cite>HTML 4</cite></a> [<a href="refs.html#ref-HTML4">HTML4</a>]
+ and <a href="http://www.w3.org/TR/2002/REC-xhtml1-20020801/">XHTML™ 1.0</a> [<a href="refs.html#ref-XHTML">XHTML</a>]. Many of SVG's
+ facilities are modeled directly after HTML, including its use
+ of CSS [<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a>],
+ its approach to event handling, and its approach to its
+ Document Object Model [<a href="refs.html#ref-DOM2">DOM2</a>].</li>
+ <li>SVG is compatible with W3C work on internationalization.
+ References (W3C and otherwise) include: [<a
+ href="refs.html#ref-UNICODE">UNICODE</a>]
+ and [<a href="refs.html#ref-CHARMOD">CHARMOD</a>].
+ Also, see <a href="i18n.html">Internationalization
+ Support</a>.</li>
+ <li>SVG is compatible with <a href="http://www.w3.org/WAI/">W3C work on Web Accessibility</a>.
+ Also, see <a href="access.html">Accessibility Support</a>.</li>
+ </ul>
+ <p>In environments which support
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/">DOM 2 Core</a>
+ [<a href="refs.html#ref-DOM2">DOM2</a>] for other
+ XML grammars (e.g., XHTML [<a href="refs.html#ref-XHTML">XHTML</a>]) and which also
+ support SVG and the SVG DOM, a single scripting approach can be
+ used simultaneously for both XML documents and SVG graphics, in
+ which case interactive and dynamic effects will be possible on
+ multiple XML namespaces using the same set of scripts.</p>
+ <h2 id="Terminology">Terminology</h2>
+ <p>Within this specification, the key words "MUST", "MUST NOT",
+ "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
+ "RECOMMENDED", "MAY", and "OPTIONAL" are to be interpreted as
+ described in <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>
+ [<a href="refs.html#ref-RFC2119">RFC2119</a>].
+ However, for readability, these words do not appear in all
+ uppercase letters in this specification.</p>
+ <p>At times, this specification recommends good practice for
+ authors and user agents. These recommendations are not
+ normative and conformance with this specification does not
+ depend on their realization. These recommendations contain the
+ expression "We recommend ...", "This specification recommends
+ ...", or some similar wording.</p>
+ <h2 id="Definitions">Definitions</h2>
+ <dl class='definitions'>
+ <dt id="TermAnimationElement"><span class="SVG-TermDefine">animation element</span></dt>
+ <dd>An animation element is an element that can be used to animate
+ the attribute or property value of another element. The following elements
+ are animation elements: <edit:elementcategory name='animation'/>.</dd>
+
+ <dt id="TermAnimationEventAttribute"><span class="SVG-TermDefine">animation event attribute</span></dt>
+ <dd>An animation event attribute is an <a>event attribute</a> that specifies
+ script to run for a particular animation-related event. See
+ <a href="script.html#AnimationEvents">Animation event attributes</a>.
+ The animation event attributes are <edit:attributecategory name='animation event'/>.</dd>
+
+ <dt id="TermBasicShape"><span id="TermBasicShapeElement"
+ class="SVG-TermDefine">basic shape</span></dt>
+ <dd>Standard shapes which are predefined in SVG as a
+ convenience for common graphical operations. Specifically:
+ <edit:elementcategory name='basic shape'/>.</dd>
+
+ <dt id="TermCanvas"><span
+ class="SVG-TermDefine">canvas</span></dt>
+ <dd>A surface onto which graphics elements are drawn, which
+ can be real physical media such as a display or paper or an
+ abstract surface such as a allocated region of computer
+ memory. See the discussion of the <a
+ href="coords.html#SVGCanvas">SVG canvas</a> in the chapter on
+ <a href="coords.html">Coordinate Systems, Transformations and
+ Units</a>.</dd>
+
+ <dt id="TermClippingPath"><span
+ class="SVG-TermDefine">clipping path</span></dt>
+ <dd>A combination of <a>'path'</a>, <a>'text'</a>
+ and <a href="#TermBasicShape">basic shapes</a> which serve as the
+ outline of a (in the absence of anti-aliasing) 1-bit mask,
+ where everything on the "inside" of the outline is allowed to
+ show through but everything on the outside is masked out. See
+ <a href="masking.html#ClippingPaths">Clipping paths</a>.</dd>
+
+ <dt id="TermContainerElement"><span
+ class="SVG-TermDefine">container element</span></dt>
+ <dd>An element which can have graphics elements and other
+ container elements as child elements. Specifically:
+ <edit:elementcategory name='container'/>.</dd>
+
+ <dt id="TermConditionalProcessingAttribute"><span
+ class="SVG-TermDefine">conditional processing attribute</span></dt>
+ <dd>A conditional processing attribute is one that controls whether
+ or not the element on which it appears is processed. Most elements,
+ but not all, may have conditional processing attributes specified
+ on them. See <a href="struct.html#ConditionalProcessing">Conditional processing</a>
+ for details. The conditional processing attributes defined in
+ SVG 1.1 are <edit:attributecategory name='conditional processing'/>.</dd>
+
+ <dt id="TermCoreAttributes"><span class="SVG-TermDefine">core attributes</span></dt>
+ <dd>The core attributes are those attributes that can be specified
+ on any SVG element. See <a href="struct.html#CommonAttributes">Common attributes</a>.
+ The core attributes are <edit:attributecategory name='core'/>.</dd>
+
+ <dt id="TermCurrentInnermostSVGDocumentFragment">
+ <span class="SVG-TermDefine">current innermost SVG document
+ fragment</span></dt>
+ <dd>The XML document sub-tree which starts with the most
+ immediate ancestor <a href="struct.html#SVGElement"><span
+ class="element-name">'svg'</span></a> element of a given SVG
+ element.</dd>
+
+ <dt id="TermCurrentSVGDocumentFragment"><span
+ class="SVG-TermDefine">current SVG document
+ fragment</span></dt>
+ <dd>The XML document sub-tree which starts with the outermost
+ ancestor <a>'svg'</a> element of a given SVG
+ element, with the requirement that all container elements
+ between the outermost <a>'svg'</a> and this element are
+ all elements in the SVG language.</dd>
+
+ <dt id="TermCurrentTransformationMatrix"><span
+ class="SVG-TermDefine">current transformation matrix
+ (<span id="TermCTM">CTM</span>)</span></dt>
+ <dd>Transformation matrices define the mathematical mapping
+ from one coordinate system into another using a 3x3 matrix
+ using the equation <span class="code-fragment">[x' y' 1] = [x
+ y 1] * matrix</span>. The <em>current transformation
+ matrix</em> (CTM) defines the mapping from the user
+ coordinate system into the viewport coordinate system. See <a
+ href="coords.html#EstablishingANewUserSpace">Coordinate
+ system transformations</a>.</dd>
+
+ <dt id="TermDescriptiveElement"><span class="SVG-TermDefine">descriptive element</span></dt>
+ <dd>An element which provides supplementary descriptive information about
+ its parent. Specifically, the following elements are descriptive elements:
+ <edit:elementcategory name='descriptive'/>.</dd>
+
+ <dt id="TermDocumentEventAttribute"><span class="SVG-TermDefine">document event attribute</span></dt>
+ <dd>A document event attribute is an <a>event attribute</a> that specifies
+ script to run for a particular document-wide event. See
+ <a href="script.html#DocumentEvents">Document-level event attributes</a>.
+ The document event attributes are <edit:attributecategory name='document event'/>.</dd>
+
+ <dt id="TermEventAttribute"><span class="SVG-TermDefine">event attribute</span></dt>
+ <dd>An event attribute is one that specifies some script to run when
+ an event of a certain type is dispatched to the element on which the attribute
+ is specified. See <a href="script.html#EventAttributes">Event attributes</a>.</dd>
+
+ <dt id="TermFill"><span
+ class="SVG-TermDefine">fill</span></dt>
+ <dd>The operation of <a
+ href="intro.html#TermPaint">painting</a> the interior of a <a
+ href="intro.html#TermShape">shape</a> or the interior of the
+ character glyphs in a text string.</dd>
+
+ <dt id="TermFilterPrimitiveAttributes"><span class="SVG-TermDefine">filter primitive attributes</span></dt>
+ <dd>The filter primitive attributes is the set of attributes that are common
+ to all <a>filter primitive elements</a>. They are
+ <edit:attributecategory name='filter primitive'/>.</dd>
+
+ <dt id="TermFilterPrimitiveElement"><span class="SVG-TermDefine">filter primitive element</span></dt>
+ <dd>A filter primitive element is one that can be used as a child of a
+ <a>'filter element'</a> element to specify a node in the filter graph.
+ The following elements are the filter primitive elements defined
+ in SVG 1.1:
+ <edit:elementcategory name='filter primitive'/>.</dd>
+
+ <dt id="TermFont"><span
+ class="SVG-TermDefine">font</span></dt>
+ <dd>A font represents an organized collection of <a
+ href="intro.html#TermGlyph">glyphs</a> in which the various
+ glyph representations will share a common look or styling
+ such that, when a string of characters is rendered together,
+ the result is highly legible, conveys a particular artistic
+ style and provides consistent inter-character alignment and
+ spacing.</dd>
+
+ <dt id="TermGlyph"><span
+ class="SVG-TermDefine">glyph</span></dt>
+ <dd>A glyph represents a unit of rendered content within a <a
+ href="intro.html#TermFont">font</a>. Often, there is a
+ one-to-one correspondence between characters to be drawn and
+ corresponding glyphs (e.g., often, the character "A" is
+ rendered using a single glyph), but other times multiple
+ glyphs are used to render a single character (e.g., use of
+ accents) or a single glyph can be used to render multiple
+ characters (e.g., ligatures). Typically, a glyph is defined
+ by one or more <a href="intro.html#TermShape">shapes</a> such
+ as a <a href="paths.html">path</a>, possibly with additional
+ information such as rendering hints that help a font engine
+ to produce legible text in small sizes.</dd>
+
+ <dt id="TermGradientElement"><span class="SVG-TermDefine">gradient element</span></dt>
+ <dd>A gradient element is one that defines a gradient paint server.
+ SVG 1.1 defines the following gradient elements: <edit:elementcategory name='gradient'/>.</dd>
+
+ <dt id="TermGraphicalEventAttribute"><span class="SVG-TermDefine">graphical event attribute</span></dt>
+ <dd>A graphical event attribute is an <a>event attribute</a> that specifies
+ script to run for a particular user interaction event. See
+ <a href="script.html#GraphicsEvents">Event attributes on graphics and container elements</a>.
+ The graphical event attributes are <edit:attributecategory name='graphical event'/>.</dd>
+
+ <dt id="TermGraphicsElement"><span
+ class="SVG-TermDefine">graphics element</span></dt>
+ <dd>One of the element types that can cause graphics to be
+ drawn onto the target canvas. Specifically:
+ <edit:elementcategory name='graphics'/>.</dd>
+
+ <dt id="TermGraphicsReferencingElement"><span
+ class="SVG-TermDefine">graphics referencing
+ element</span></dt>
+ <dd>A graphics element which uses a reference to a different
+ document or element as the source of its graphical content.
+ Specifically: <edit:elementcategory name='graphics referencing'/>.</dd>
+
+ <dt id="TermHitTesting"><span class="SVG-TermDefine">hit-testing</span></dt>
+ <dd>The process of determining whether a pointer intersects a given
+ <a>graphics element</a>. Hit-testing is used in determining which element
+ to dispatch a mouse event to, which might be done in response to the user
+ moving the pointing device, or by changes in the position, shape and
+ other attributes of elements in the document. Hit-testing is also known
+ as <em>hit detection</em> or <em>picking</em>. See
+ <a href="interact.html#pointer-processing">hit-testing and processing
+ order for user interface events</a> and the definition of the
+ <a>'pointer-events'</a> property.</dd>
+
+ <dt id="TermIRIReference"><span
+ class="SVG-TermDefine">IRI reference</span></dt>
+ <dd>
+ An IRI reference is an Internationalized Resource Identifier
+ with an optional fragment identifier, as defined in
+ <a href="http://www.ietf.org/rfc/rfc3987.txt"><cite>Internationalized
+ Resource Identifiers</cite></a>
+ [<a href='refs.html#ref-RFC3987'>RFC3987</a>].
+ An IRI reference serves as a reference to a resource or (with a
+ fragment identifier) to a secondary resource. See
+ <a href="struct.html#Head">References and the <span
+ class="element-name">'defs'</span> element</a>.
+ </dd>
+
+ <dt id="TermLightSourceElement"><span class="SVG-TermDefine">light source element</span></dt>
+ <dd>A light source element is one that can specify light source
+ information for an <a>'feDiffuseLighting'</a> or <a>'feSpecularLighting'</a>
+ element. The following light source elements are defined in SVG 1.1:
+ <edit:elementcategory name='light source'/>.</dd>
+
+ <dt id="TermLocalIRIReference"><span
+ class="SVG-TermDefine">local IRI reference</span></dt>
+ <dd>An Internationalized Resource Identifier [<a href="refs.html#ref-RFC3987">RFC3987</a>] that does
+ not include an <span
+ class="code-fragment"><absoluteIRI></span> or <span
+ class="code-fragment"><relativeIRI></span> and thus
+ represents a reference to an element within the current
+ document. See <a href="struct.html#Head">References and the
+ <span class="element-name">'defs'</span> element</a>.</dd>
+
+ <dt id="TermMask"><span
+ class="SVG-TermDefine">mask</span></dt>
+ <dd>A <a href="intro.html#TermContainerElement">container
+ element</a> which can contain <a
+ href="intro.html#TermGraphicsElement">graphics elements</a>
+ or other container elements which define a set of graphics
+ that is to be used as a semi-transparent mask for compositing
+ foreground objects into the current background. See <a
+ href="masking.html#Masking">Masks</a>.</dd>
+
+ <dt id="TermNonLocalIRIReference"><span
+ class="SVG-TermDefine">non-local IRI reference</span></dt>
+ <dd>An Internationalized Resource Identifier [<a href="refs.html#ref-RFC3987">RFC3987</a>] that
+ includes an <span
+ class="code-fragment"><absoluteIRI></span> or <span
+ class="code-fragment"><relativeIRI></span> and thus
+ (usually) represents a reference to a different document or
+ an element within a different document. See <a
+ href="struct.html#Head">References and the <span
+ class="element-name">'defs'</span> element</a>.</dd>
+
+ <dt id="TermOutermostSVGElement">
+ <span class="SVG-TermDefine">outermost svg element</span>
+ </dt>
+ <dd>
+ The furthest <a>'svg'</a> ancestor element that remains in the
+ <a href="#TermCurrentSVGDocumentFragment">current SVG document fragment</a>.
+ </dd>
+
+ <dt id="TermPaint"><span
+ class="SVG-TermDefine">paint</span></dt>
+ <dd>A paint represents a way of putting color values onto the
+ canvas. A paint might consist of both color values and
+ associated alpha values which control the blending of colors
+ against already existing color values on the canvas. SVG
+ supports three types of built-in paint: <a
+ href="color.html#ColorIntroduction">color</a>, <a
+ href="pservers.html#Gradients">gradients</a> and <a
+ href="pservers.html#Patterns">patterns</a>.</dd>
+
+ <!--
+ <dt id="TermPointer"><span class="SVG-TermDefine">pointer</span></dt>
+ <dd>
+ <p>A pointer is a logical representation of a user-controlled interface interaction (such as moving an on-screen cursor with a mouse, keyboard, or other positioning device, or tapping a touch-screen), and functions as one or more points positioned at a specific coordinates within the viewport. A pointer may or may not have an associated visual representation, such as a cursor or arrow icon (in contrast to the <span class='prop-value'>pointer</span> value of the <span class='prop-name'>'cursor'</span> <a href="intro.html#TermProperty">property</a>, which refers to a particular cursor style.).</p>
+ <p>Multiple simultaneous pointers, such as with a touch-screen interface, may not be available in all environments, and are not defined in this specification.</p>
+ <p>Pointers may interact with <a href="#TermGraphicsElement">graphics elements</a> in different context-specific ways, which may be modified by different values of the <a href="interact.html#PointerEventsProperty">pointer-events</a> <a href="intro.html#TermProperty">property</a>.</p>
+ </dd>
+ -->
+
+ <dt id="TermPresentationAttribute"><span
+ class="SVG-TermDefine">presentation attribute</span></dt>
+ <dd>An XML attribute on an SVG element which specifies a
+ value for a given <a
+ href="intro.html#TermProperty">property</a> for that element. See <a
+ href="styling.html">Styling</a>. Note that
+ although any property may be <em>specified</em> on any element,
+ not all properties will <em>apply to</em> (affect the rendering of)
+ a given element. The definition of each property states to what set
+ of elements it applies.</dd>
+
+ <dt id="TermProperty"><span
+ class="SVG-TermDefine">property</span></dt>
+ <dd>A parameter that helps specify how a document should be
+ rendered. A complete list of SVG's properties can be found in
+ <a href="propidx.html">Property Index</a>. Properties are
+ assigned to elements in the SVG language either by <a
+ href="intro.html#TermPresentationAttribute">presentation
+ attributes</a> on elements in the SVG language or by using a
+ styling language such as CSS [<a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a>]. See <a
+ href="styling.html">Styling</a>.</dd>
+
+ <dt id="TermRootmostSVGElement"><span
+ class="SVG-TermDefine">rootmost <span class="element-name">'svg'</span> element</span></dt>
+ <dd>
+ <p>
+ The rootmost
+ <a href="struct.html#SVGElement"><span class="element-name">'svg'</span></a>
+ element is the furthest
+ <a href="struct.html#SVGElement"><span class="element-name">'svg'</span></a>
+ ancestor element that does not exit an
+ <a href="intro.html#TermSVGContext"><span class="svg-term">SVG context</span></a>.
+ See also
+ <a href="intro.html#TermSVGDocumentFragment"><span class="svg-term">SVG document fragment</span></a>.
+ </p>
+ </dd>
+
+ <dt id="TermShape"><span id="TermShapeElement"
+ class="SVG-TermDefine">shape</span></dt>
+ <dd>A graphics element that is defined by some combination of
+ straight lines and curves. Specifically:
+ <a>'path'</a>,
+ <a>'rect'</a>,
+ <a>'circle'</a>,
+ <a>'ellipse'</a>,
+ <a>'line'</a>,
+ <a>'polyline'</a> and
+ <a>'polygon'</a>.</dd>
+
+ <dt id="TermStroke"><span
+ class="SVG-TermDefine">stroke</span></dt>
+ <dd>The operation of <a
+ href="intro.html#TermPaint">painting</a> the outline of a <a
+ href="intro.html#TermShape">shape</a> or the outline of
+ character glyphs in a text string.</dd>
+
+ <dt id="TermStructuralElement"><span
+ class="SVG-TermDefine">structural element</span></dt>
+ <dd>The structural elements are those which define the primary
+ structure of an SVG document. Specifically, the following
+ elements are structural elements:
+ <edit:elementcategory name='structural'/>.</dd>
+
+ <dt id="TermSVGCanvas"><span
+ class="SVG-TermDefine">SVG canvas</span></dt>
+ <dd>The <a href="#TermCanvas">canvas</a> onto which the SVG
+ content is rendered. See the discussion of the <a
+ href="coords.html#SVGCanvas">SVG canvas</a> in the chapter on
+ <a href="coords.html">Coordinate Systems, Transformations and
+ Units</a>.</dd>
+
+ <dt id="TermSVGContext"><span
+ class="SVG-TermDefine">SVG context</span></dt>
+ <dd>
+ <p>
+ An SVG context is a document fragment where all elements within the
+ fragment must be subject to processing by an <a href="intro.html#TermSVGUserAgent"><span class="svg-term">SVG user agent</span></a> according
+ to the rules in this specification.
+ </p>
+ <p>
+ If SVG content is embedded inline within parent XML (such as XHTML),
+ the SVG context does not include the ancestors above the
+ <a>rootmost 'svg' element</a>.
+ If the SVG content contains any
+ <a href='extend.html#ForeignObjectElement'><span class='element-name'>'foreignObject'</span></a>
+ elements which in turn contain non-SVG content, the SVG context does
+ not include the contents of the
+ <a href='extend.html#ForeignObjectElement'><span class='element-name'>'foreignObject'</span></a>
+ elements.
+ </p>
+ </dd>
+
+ <dt id="TermSVGDocumentFragment"> <span
+ class="SVG-TermDefine">SVG document fragment</span></dt>
+ <dd>The XML document sub-tree which starts with an <a>'svg'</a>
+ element. An SVG
+ document fragment can consist of a stand-alone SVG document,
+ or a fragment of a parent XML document enclosed by an <a>'svg'</a>
+ element. When an <a>'svg'</a> element is a descendant
+ of another <a>'svg'</a> element, there are two
+ SVG document fragments, one for each <a>'svg'</a> element. (One SVG
+ document fragment is contained within another SVG document
+ fragment.)</dd>
+
+ <dt id="TermSVGUserAgent"><span
+ class="SVG-TermDefine">SVG user agent</span></dt>
+ <dd>
+ An SVG user agent is a <a href="intro.html#TermUserAgent"><span class="svg-term">user agent</span></a>
+ that is able to retrieve and render SVG content.
+ </dd>
+
+ <dt id="TermSVGViewport"><span
+ class="SVG-TermDefine">SVG viewport</span></dt>
+ <dd>The <a href="#TermViewport">viewport</a> within the <a
+ href="#TermSVGCanvas">SVG canvas</a> which defines the
+ rectangular region into which SVG content is rendered. See
+ the discussion of the <a href="coords.html#SVGViewport">SVG
+ viewport</a> in the chapter on <a
+ href="coords.html">Coordinate Systems, Transformations and
+ Units</a>.</dd>
+
+ <dt id="TermTextContentElement"><span
+ class="SVG-TermDefine">text content element</span></dt>
+ <dd>A text content element is an SVG element that causes a text string
+ to be rendered onto the canvas. The SVG 1.1 text content elements are the
+ following: <edit:elementcategory name='text content'/></dd>
+
+ <dt id="TermTextContentChildElement"><span
+ class="SVG-TermDefine">text content child element</span></dt>
+ <dd>A text content child element is a <a>text content element</a> that is allowed
+ as a descendant of another <a>text content element</a>. In SVG 1.1,
+ the text content child elements are the following:
+ <edit:elementcategory name='text content child'/></dd>
+
+ <dt id="TermTextContentBlockElement"><span
+ class="SVG-TermDefine">text content block element</span></dt>
+ <dd>
+ A text content block element is a
+ <a href="intro.html#TermTextContentElement"><span class="svg-term">text content element</span></a>
+ that serves as a standalone element for a unit of text, and
+ which may optionally contain certain child
+ <a href="intro.html#TermTextContentElement"><span class="svg-term">text content elements</span></a>
+ (e.g. <a href="text.html#TSpanElement"><span class="element-name">'tspan'</span></a>).
+ <!--SVG Tiny 1.2 defines two text content block elements:
+ <a href="text.html#TextElement"><span class="element-name">'text'</span></a>
+ and <a href="text.html#TextAreaElement"><span class="element-name">'textArea'</span></a>-->
+ <edit:elementcategory name='text block'/>.
+ </dd>
+
+ <dt id="TermTransformation"><span
+ class="SVG-TermDefine">transformation</span></dt>
+ <dd>A modification of the <a
+ href="#TermCurrentTransformationMatrix">current
+ transformation matrix (CTM)</a> by providing a supplemental
+ transformation in the form of a set of simple transformations
+ specifications (such as scaling, rotation or translation)
+ and/or one or more <a
+ href="#TermTransformationMatrix">transformation matrices</a>.
+ See <a
+ href="coords.html#EstablishingANewUserSpace">Coordinate
+ system transformations</a>.</dd>
+
+ <dt id="TermTransformationMatrix"><span
+ class="SVG-TermDefine">transformation matrix</span></dt>
+ <dd>Transformation matrices define the mathematical mapping
+ from one coordinate system into another using a 3x3 matrix
+ using the equation <span class="code-fragment">[x' y' 1] = [x
+ y 1] * matrix</span>. See <a
+ href="#TermCurrentTransformationMatrix">current
+ transformation matrix (CTM)</a> and <a
+ href="coords.html#EstablishingANewUserSpace">Coordinate
+ system transformations</a>.</dd>
+
+ <dt id="TermUserAgent"><span
+ class="SVG-TermDefine">user agent</span></dt>
+ <dd><p>The general definition of a user agent is an application
+ that retrieves and renders Web content, including text,
+ graphics, sounds, video, images, and other content types. A
+ user agent may require additional user agents that handle
+ some types of content. For instance, a browser may run a
+ separate program or plug-in to render sound or video. User
+ agents include graphical desktop browsers, multimedia
+ players, text browsers, voice browsers, and assistive
+ technologies such as screen readers, screen magnifiers,
+ speech synthesizers, onscreen keyboards, and voice input
+ software.</p>
+ <p>A "user agent" may or may not have the ability to retrieve
+ and render SVG content; however, an "SVG user agent"
+ retrieves and renders SVG content.</p></dd>
+
+ <dt id="TermUserCoordinateSystem"><span
+ class="SVG-TermDefine">user coordinate system</span></dt>
+ <dd>In general, a coordinate system defines locations and
+ distances on the current <a href="#TermCanvas">canvas</a>.
+ The current <span class="SVG-TermDefine">user coordinate
+ system</span> is the coordinate system that is currently
+ active and which is used to define how coordinates and
+ lengths are located and computed, respectively, on the
+ current <a href="#TermCanvas">canvas</a>. See <a
+ href="coords.html#SVGInitialUserCoordinateSystem">initial
+ user coordinate system</a> and <a
+ href="coords.html#EstablishingANewUserSpace">Coordinate
+ system transformations</a>.</dd>
+
+ <dt id="TermUserSpace"><span
+ class="SVG-TermDefine">user space</span></dt>
+ <dd>A synonym for <a href="#TermUserCoordinateSystem">user
+ coordinate system</a>.</dd>
+
+ <dt id="TermUserUnits"><span
+ class="SVG-TermDefine">user units</span></dt>
+ <dd>A coordinate value or length expressed in user units
+ represents a coordinate value or length in the current <a
+ href="#TermUserCoordinateSystem">user coordinate system</a>.
+ Thus, 10 user units represents a length of 10 units in the
+ current user coordinate system.</dd>
+
+ <dt id="TermViewport"><span
+ class="SVG-TermDefine">viewport</span></dt>
+ <dd>A rectangular region within the current <a
+ href="#TermCanvas">canvas</a> onto which <a
+ href="#TermGraphicsElement">graphics elements</a> are to be
+ rendered. See the discussion of the <a
+ href="coords.html#SVGViewport">SVG viewport</a> in the
+ chapter on <a href="coords.html">Coordinate Systems,
+ Transformations and Units</a>.</dd>
+
+ <dt id="TermViewportCoordinateSystem"><span
+ class="SVG-TermDefine">viewport coordinate system</span></dt>
+ <dd>In general, a coordinate system defines locations and
+ distances on the current <a href="#TermCanvas">canvas</a>.
+ The <span class="SVG-TermDefine">viewport coordinate
+ system</span> is the coordinate system that is active at the
+ start of processing of an <a>'svg'</a> element, before
+ processing the optional <a>'viewBox'</a> attribute. In the
+ case of an SVG document fragment that is embedded within a
+ parent document which uses CSS to manage its layout, then the
+ viewport coordinate system will have the same orientation and
+ lengths as in CSS, with the origin at the top-left on the <a
+ href="#TermViewport">viewport</a>. See <a
+ href="coords.html#ViewportSpace">The initial viewport</a> and
+ <a href="coords.html#EstablishingANewViewport">Establishing a
+ new viewport</a>.</dd>
+
+ <dt id="TermViewportSpace"><span
+ class="SVG-TermDefine">viewport space</span></dt>
+ <dd>A synonym for <a
+ href="#TermViewportCoordinateSystem">viewport coordinate
+ system</a>.</dd>
+
+ <dt id="TermViewportUnits"><span
+ class="SVG-TermDefine">viewport units</span></dt>
+ <dd>A coordinate value or length expressed in viewport units
+ represents a coordinate value or length in the <a
+ href="#TermViewportCoordinateSystem">viewport coordinate
+ system</a>. Thus, 10 viewport units represents a length of 10
+ units in the viewport coordinate system.</dd>
+
+ <dt id="TermXLinkAttributes"><span class="SVG-TermDefine">XLink attributes</span></dt>
+ <dd>The XLink attributes are the seven attributes defined in
+ the <a href="http://www.w3.org/TR/2001/REC-xlink-20010627/">XML Linking Language</a>
+ specification [<a href="refs.html#ref-XLINK">XLINK</a>], which are used
+ on various SVG elements that can reference resources. The most
+ import XLink attribute is <span class='attr-name'>'xlink:href'</span>,
+ whose definition can be found on each element that allows it.
+ The remaining XLink attributes are <a>'xlink:type'</a>, <a>'xlink:role'</a>,
+ <a>'xlink:arcrole'</a>, <a>'xlink:title'</a>, <a>'xlink:show'</a> and
+ <a>'xlink:actuate'</a>.</dd>
+ </dl>
+ </body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/java.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Java Language Binding</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Java Language Binding</h1>
+
+<p class="normativity"><em>This appendix is informative, not normative.</em></p>
+
+<h2 id="JavaBinding">The Java language binding</h2>
+
+<p>The Java language binding for the SVG Document Object Model definitions
+is available at:</p>
+
+<pre><edit:locallink href="java-binding.zip"/></pre>
+
+<p>Note that this language binding is not normative. The IDL Definitions are
+the normative parts of the SVG DOM.</p>
+
+<h2 id="UsingSVGWithJava">Using SVG with the Java language</h2>
+
+<p>When scripting SVG with a language such as ECMAScript, it is
+possible to embed script code directly in the SVG content using
+the <a>'script'</a> element and the event attributes (e.g., <a>'image/onload'</a>
+or <a>'onclick'</a>). For programming languages with a binary delivery
+format, such as the Java language, it is not possible to embed
+the code into the <a>'script'</a> element or within the event
+attributes. Therefore there is a need to specify how such
+languages can bind to and handle events in the SVG document.
+The following technique describes how this should be done when
+using the Java language and what is expected of the User Agent
+that supports dynamic SVG content through the Java language.</p>
+
+<ul>
+ <li>The <a>'script'</a> element should reference a jar file containing
+ the compiled code to handle the events fired by the document. For
+ example:
+<pre><![CDATA[
+<script type="application/java-archive" xlink:href="myJavaHandlers.jar"/>
+]]></pre>
+ </li>
+
+ <li>The manifest in the referenced jar file contains an entry,
+ SVG-Handler-Class, defining the class responsible for initializing
+ the event listeners on the SVG document. The entry should be a fully
+ qualified class name. For example:
+<pre>
+Manifest-Version: 1.1
+SVG-Handler-Class: org.example.svg.SVGHandler
+</pre>
+ </li>
+ <li>The class referenced by SVG-Handler-Class implements the
+ EventListenerInitializer interface defined as:
+<pre>
+public interface EventListenerInitializer {
+ void initializeEventListeners(SVGDocument doc);
+}
+</pre>
+ </li>
+
+ <li>The method initializeEventListeners() will be called by
+ the User Agent before the onload event is triggered.</li>
+</ul>
+
+<p>The event binding of other binary programming languages is not specified.</p>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/linking.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,688 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Linking</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Linking</h1>
+
+ <h2 id="IRIReference">References</h2>
+ <h3 id="HeadOverview">Overview</h3>
+
+ <p>On the Internet, resources are identified using <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>s
+ (Internationalized Resource Identifiers). For
+ example, an SVG file called someDrawing.svg located at
+ http://example.com might have the following <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>:</p>
+<pre>
+http://example.com/someDrawing.svg
+</pre>
+ <p>An <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> can also address a particular element within an XML
+ document by including an <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> fragment
+ identifier as part of the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>. An <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> which includes an
+ <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> fragment identifier consists of an optional base <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>, followed by a "#" character,
+ followed by the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> fragment identifier. For example, the
+ following <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> can be used to specify the element whose ID is
+ "Lamppost" within file someDrawing.svg:</p>
+<pre>
+http://example.com/someDrawing.svg#Lamppost
+</pre>
+
+<!-- from 1.2T - add this too?
+
+
+ <h4 id="AlteringXlinkHref">Altering the <span class="attr-name">'xlink:href'</span> attribute</h4>
+
+ <p>If the <a href="animate.html#HrefAttribute"><span class="attr-name">'xlink:href'</span></a>
+ attribute of an element in the tree is altered by any means (e.g. script, declarative
+ animation) such that a new resource is referenced, the new resource must replace
+ the existing resource, and must be rendered as appropriate. For specific effects
+ on the scripting context when a
+ <a href="script.html#ScriptElement"><span class="element-name">'script'</span></a> element's
+ <a href="animate.html#HrefAttribute"><span class="attr-name">'xlink:href'</span></a> attribute
+ is altered, see <a href="script.html#ScriptContentProcessing">Script processing</a>.</p>
+
+ -->
+
+ <h3 id="IRIandURI">IRIs and URIs</h3>
+ <p>Internationalized
+ Resource Identifiers (<a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>s) are a more generalized complement to Uniform Resource
+ Identifiers (URIs). An <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> is a sequence of characters from the
+ Universal Character Set [<a href="refs.html#ref-UNICODE">UNICODE</a>]. A URI is constructed from a much
+ more restricted set of characters. All URIs are already conformant <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>s. A mapping from <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>s to
+ URIs is defined by the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> specification, which means that IRIs can be used instead of URIs
+ in XML documents, to identify resources. <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>s can be converted to URIs for resolution
+ on a network, if the protocol does not support <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>s directly.</p>
+ <p>Previous versions of SVG, following XLink, defined an IRI reference type
+ as a URI <em>or as a sequence of characters which must result in an IRI after a
+ particular escaping procedure was applied</em>. The escaping procedure was repeated in the
+ XLink 1.0 specification [<a href="refs.html#ref-XLINK">XLINK</a>], and in the W3C
+ XML Schema Part 2: Datatypes specification [<a href="refs.html#ref-SCHEMA2">SCHEMA2</a>]. This copying introduced the
+ possibility of error and divergence, but was done because the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> specification was not
+ yet standardized.</p>
+ <p>In this specification, the correct term <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> is used for this "URI or sequence of characters
+ plus an algorithm" and the escaping method, which turns IRIs into URIs, is defined by reference to the <a href="http://www.ietf.org/rfc/rfc3987.txt">IRI
+ specification</a> [<a href="refs.html#ref-RFC3987">RFC3987</a>], which
+ has since become an IETF Proposed Standard. Other W3C
+ specifications are expected to be revised over time to remove these duplicate
+ descriptions of the escaping procedure and to refer to <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> directly.</p>
+
+ <h3 id="IRIforms">Syntactic forms: IRI and FuncIRI</h3>
+
+ <p>IRIs are used in the <a href="animate.html#HrefAttribute"><span class="attr-name">'xlink:href'</span></a> attribute. Some attributes allow both IRIs and text strings as content. To disambiguate a text string from a relative IRI, the functional notation <a href="types.html#DataTypeFuncIRI"><FuncIRI></a> is used. This is simply an IRI delimited with a functional notation. <strong>Note:</strong> For historical reasons, the delimiters are "url(" and ")", for compatibility with the CSS specifications. The FuncIRI form is used in <a href="styling.html#StylingUsingPresentationAttributes">presentation attributes</a>
+ <!-- not in 1.1
+ and <a href="interact.html#navigation">navigation attributes</a>
+ -->
+ .</p>
+
+
+ <p>SVG makes extensive use of <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>
+ references, both absolute and relative, to other
+ objects. For example, to <a href="intro.html#TermFill"><span class="svg-term">fill</span></a> a rectangle with a linear
+ gradient, you first define a <a href="pservers.html#LinearGradients"><span class="element-name">'linearGradient'</span></a> element and give
+ it an ID, as in:</p>
+ <edit:example href="images/linking/05_07.xml" image="no" link="no">
+ </edit:example><p>You then reference the linear gradient as the value of the
+ <a href="painting.html#FillProperty"><span class="prop-name">'fill'</span></a> property for the rectangle, as in the following example:</p>
+
+ <edit:example href="images/linking/05_08.xml" image="no" link="no">
+ </edit:example>
+
+
+<!-- old stuff from 1.1 for checking
+
+<p id="IRIReference">IRI references are defined in either of the
+following forms:</p>
+
+<pre class='grammar'><![CDATA[
+<IRI-reference> = [ <absoluteIRI> | <relativeIRI> ] [ "#" <elementID> ] -or-
+<IRI-reference> = [ <absoluteIRI> | <relativeIRI> ] [ "#xpointer(id(" <elementID> "))" ]
+]]></pre>
+
+<p>where <span class="grammar"><elementID></span>
+is the ID of the referenced element.</p>
+
+<p>(Note that the two forms above (i.e.,
+<span class="code-fragment">#<elementID></span> and
+<span class="code-fragment">#xpointer(id(<elementID>))</span>)
+are formulated in syntaxes compatible with "XML Pointer Language (XPointer)"
+[<a href="http://www.w3.org/TR/xptr">XPTR</a>]. These two formulations of IRI
+references are the only XPointer formulations that are required in SVG 1.1 user
+agents.)</p>
+
+-->
+
+<p>SVG supports two types of IRI references:</p>
+
+<ul>
+ <li><a>local IRI references</a>, where the IRI reference does not contain an
+ <span class="grammar"><absoluteIRI></span> or
+ <span class="grammar"><relativeIRI></span> and thus only contains
+ a fragment identifier (i.e.,
+ <span class="code-fragment">#<elementID></span> or
+ <span class="code-fragment">#xpointer(id<elementID></span>))</li>
+
+ <li><a>non-local IRI references</a>, where the IRI reference does contain an
+ <span class="grammar"><absoluteIRI></span> or
+ <span class="grammar"><relativeIRI></span></li>
+</ul>
+
+<h3 id="processingIRI">Processing of IRI references</h3>
+
+<p>The following rules apply to the processing of IRI references:</p>
+
+<ul>
+ <li>IRI references to nodes that do not exist shall be treated as
+ invalid references.</li>
+
+ <li>IRI references to elements which are inappropriate
+ targets for the given reference shall be treated as invalid
+ references (see list below for appropriate targets). For
+ example, the <a>'clip-path'</a> property can only refer to
+ <a>'clipPath'</a> elements. The property setting
+ <span class="attr-value">clip-path:url(#MyElement)</span> is an
+ invalid reference if the referenced element is not a <a>'clipPath'</a>.</li>
+
+ <li>IRI references that directly or indirectly reference
+ themselves are treated as invalid circular references.</li>
+</ul>
+
+<p>The following list describes the elements and properties that allow IRI
+references and the valid target types for those references:</p>
+
+<ul>
+ <li>the <a>'a'</a> element can reference any local or non-local resource</li>
+ <li>the <a>'altGlyph'</a> element must reference either an <a>'altGlyphDef'</a> element or a <a>'glyph'</a> element</li>
+ <li>the <a>'animate'</a> element (see <a href="animate.html#TargetElement">Identifying the target element for an animation</a> for reference rules)</li>
+ <li>the <a>'animateColor'</a> element (see <a href="animate.html#TargetElement">Identifying the target element for an animation</a> for reference rules)</li>
+ <li>the <a>'animateMotion'</a> element (see <a href="animate.html#TargetElement">Identifying the target element for an animation</a> for reference rules)</li>
+ <li>the <a>'animateTransform'</a> element (see <a href="animate.html#TargetElement">Identifying the target element for an animation</a> for reference rules)</li>
+ <li>the <a>'clip-path'</a> property must reference a <a>'clipPath'</a> element</li>
+ <li>the <a>'color-profile element'</a> element must reference an ICC profile resource</li>
+ <li>the <a>'color-profile property'</a> property must reference an ICC profile resource or a <a>'color-profile element'</a> element</li>
+ <li>the <a href="color.html#ColorProfileSrcProperty">'src'</a> descriptor on an @color-profile definition must reference an ICC profile resource or a <a>'color-profile element'</a> element</li>
+ <li>the <a>'cursor element'</a> element must reference a resource that can provide an image for the cursor graphic</li>
+ <li>the <a>'cursor property'</a> property must reference a resource that can provide an image for the cursor graphic</li>
+ <li>the <a>'feImage'</a> element must reference any local or non-local resource</li>
+ <li>the <a>'fill'</a> property (see <a href="painting.html#SpecifyingPaint">Specifying paint</a> for reference rules)</li>
+ <li>the <a>'filter element'</a> element must reference a <a>'filter element'</a> element</li>
+ <li>the <a>'filter property'</a> property must reference a <a>'filter element'</a> element</li>
+ <li>the <a>'image'</a> element must reference any local or non-local resource</li>
+ <li>the <a>'linearGradient'</a> element must reference a <a>'linearGradient'</a> or <a>'radialGradient'</a> element</li>
+ <li>the <a>'marker property'</a>, <a>'marker-start'</a>, <a>'marker-mid'</a> and <a>'marker-end'</a> properties must reference a <a>'marker element'</a> element.</li>
+ <li>the <a>'mask property'</a> property must reference a <a>'mask element'</a> element</li>
+ <li>the <a>'pattern'</a> element must reference a <a>'pattern'</a> element</li>
+ <li>the <a>'radialGradient'</a> element must reference a <a>'linearGradient'</a> or <a>'radialGradient'</a> element</li>
+ <li>the <a>'script'</a> element must reference an external resource that provides the script content</li>
+ <li>the <a>'stroke'</a> property (see <a href="painting.html#SpecifyingPaint">Specifying paint</a> for reference rules)</li>
+ <li>the <a>'textPath'</a> element must reference a <a>'path'</a> element</li>
+ <li>the <a>'tref'</a> element can reference any SVG element</li>
+ <li>the <a>'set'</a> element (see <a href="animate.html#TargetElement">Identifying the target element for an animation</a> for reference rules)</li>
+ <li>the <a>'use'</a> element can reference any local or non-local resource</li>
+</ul>
+
+<p>The following rules apply to the processing of invalid IRI references:</p>
+
+<ul>
+ <li>An invalid local IRI reference (i.e., an invalid references to a node
+ within the current document) represents an error (see
+ <a href="implnote.html#ErrorProcessing">Error processing</a>), apart from the
+ <a>'a/xlink:href'</a> attribute on the <a>'a'</a> element and the properties
+ that allow for backup values in the case where the IRI reference is invalid
+ (see <a>'fill'</a> and <a>'stroke'</a>).</li>
+
+ <li>An invalid circular IRI reference represents an error (see
+ <a href="implnote.html#ErrorProcessing">Error processing</a>).</li>
+
+ <li>When attribute <a>'externalResourcesRequired'</a> has been set to
+ <span class="attr-value">'true'</span> on the referencing element or one of
+ its ancestors, then an unresolved external IRI reference (i.e., a resource
+ that cannot be located) represents an error (see
+ <a href="implnote.html#ErrorProcessing">Error processing</a>).</li>
+</ul>
+
+
+
+<h3 id="xlinkRefAttrs">IRI reference attributes</h3>
+
+ <p id="xlinkRefAttrsEmbed"><a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> references are normally specified with an <span
+ class="attr-name">'href'</span> attribute in the XLink [<a
+ href="http://www.w3.org/TR/xlink/">XLink</a>] namespace. For example,
+ if the
+ prefix of 'xlink' is used for attributes in the XLink
+ namespace, then the attribute is <!-- not shall; could also have duplicate prefixes defined.--> be specified as <span
+ class="attr-name">'xlink:href'</span>. The value of this
+ attribute forms a reference for the desired resource (or
+ secondary resource, if there is a fragment identifier).</p>
+ <p>The value of the <span class="attr-name">'href'</span>
+ attribute must be an <a href="types.html#DataTypeIRI"><span
+ class="svg-term">Internationalized Resource Identifier</span></a>.</p>
+
+ <p>If the protocol, such as HTTP, does not support <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a>s directly,
+ the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> is converted to a URI by the SVG implementation, as described
+ in section 3.1 of the <a href="http://www.ietf.org/rfc/rfc3987.txt">IRI specification</a> [<a href="refs.html#ref-RFC3987">RFC3987</a>.</p>
+ <p>Because it is impractical for any application to check that
+ a value is an <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> reference, this specification follows the lead
+ of the <a href="http://www.ietf.org/rfc/rfc3986.txt">IRI Specification</a>
+ in this matter and imposes no such conformance testing
+ requirement on SVG applications.</p>
+ <p>If the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> reference is relative, its absolute version must be computed by the method described in
+ <a href="http://www.w3.org/TR/xmlbase/">XML Base</a> before use [<a href="refs.html#ref-XML-BASE">XML-BASE</a>].</p>
+
+ <div class="adef-list">
+ <dl>
+ <dt><a id="XLinkTypeAttribute"
+ name="XLinkTypeAttribute"></a> <span
+ class="adef">xlink:type</span> = "<span
+ class="attr-value">simple</span>"</dt>
+ <dd><p>Identifies the type of XLink being used. In SVG 1.1, only
+ simple links are available.
+ Links are simple links by default,
+ so the attribute <span
+ class="attr-value">xlink:type="simple"</span>
+ is optional and may be omitted on simple links.
+ Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
+ <p class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</p></dd>
+ <dt><a id="XLinkRoleAttribute"
+ name="XLinkRoleAttribute"></a> <span
+ class="adef">xlink:role</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><IRI></a></span>"</dt>
+ <dd><p>An optional <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> reference that identifies some resource that describes
+ the intended property. The value must be an <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> reference as
+ defined in [<a
+ href="http://www.ietf.org/rfc/rfc3987.txt">RFC3987</a>],
+ except that if the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> scheme used is allowed to have
+ absolute and relative forms, the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> portion must be
+ absolute. When no value is supplied, no particular role
+ value shall be inferred.
+ Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
+ <p class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</p></dd>
+ <dt><a id="XLinkArcRoleAttribute"
+ name="XLinkArcRoleAttribute"></a> <span
+ class="adef">xlink:arcrole</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><IRI></a></span>"</dt>
+ <dd><p>An optional <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> reference that identifies some resource that describes
+ the intended property. The value must be an <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> reference as
+ defined in [<a
+ href="http://www.ietf.org/rfc/rfc3987.txt">RFC3987</a>],
+ except that if the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> scheme used is allowed to have
+ absolute and relative forms, the <a href="intro.html#TermIRIReference"><span class="svg-term">IRI</span></a> portion must be
+ absolute. When no value is supplied, no particular role
+ value shall be inferred. The arcrole
+ attribute corresponds to the [<a
+ href="refs.html#ref-RDF-PRIMER">RDF-PRIMER</a>] notion
+ of a property, where the role can be interpreted as stating
+ that "starting-resource HAS arc-role ending-resource." This
+ contextual role can differ from the meaning of an ending
+ resource when taken outside the context of this particular
+ arc. For example, a resource might generically represent a
+ "person," but in the context of a particular arc it might
+ have the role of "mother" and in the context of a different
+ arc it might have the role of "daughter."
+ Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
+ <p class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</p></dd>
+ <dt><a id="XLinkTitleAttribute"
+ name="XLinkTitleAttribute"></a> <span
+ class="adef">xlink:title</span> = "<span
+ class="attr-value"><a href="types.html#DataTypeAnything"><anything></a></span>"</dt>
+ <dd><p>The title attribute shall be used to describe the meaning of
+ a link or resource in a human-readable fashion, along the
+ same lines as the role or arcrole attribute. A value is
+ optional; if a value is supplied, it shall contain a
+ string that describes the resource. In general it is preferable
+ to use a <a href="struct.html#TitleElement"><span class="element-name">'title'</span></a> child element
+ rather than a <span class="attr-name">'title'</span> attribute. The use of this
+ information is highly dependent on the type of processing
+ being done. It may be used, for example, to make titles
+ available to applications used by visually impaired users,
+ or to create a table of links, or to present help text that
+ appears when a user lets a mouse pointer hover over a
+ starting resource.
+ Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
+ <p class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</p></dd>
+ <dt><a id="XLinkShowAttribute"
+ name="XLinkShowAttribute"></a> <span
+ class="adef">xlink:show</span> = "<span
+ class="attr-value">new</span>' |
+ '<span
+ class="attr-value">replace</span>' |
+ '<span
+ class="attr-value">embed</span>' |
+ '<span
+ class="attr-value">other</span>' |
+ '<span
+ class="attr-value">none</span>'</dt>
+ <dd><p>This attribute is provided for backwards compatibility with SVG
+ 1.1. It provides documentation to XLink-aware processors. In
+ case of a conflict, the target attribute has priority, since it can
+ express a wider range of values.
+ Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
+ <p class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</p></dd>
+ <dt><a id="XLinkActuateAttribute"
+ name="XLinkActuateAttribute"></a> <span
+ class="adef">xlink:actuate</span> = "<span
+ class="attr-value">onLoad</span>'</dt>
+ <dd><p>This attribute is provided for backwards compatibility with SVG
+ 1.1. It provides documentation to XLink-aware processors.
+ Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
+ <p class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</p></dd>
+ </dl>
+ </div>
+
+ <p>In all cases, for compliance with either the "Namespaces in XML 1.0" or the "Namespaces in XML 1.1"
+ Recommendation [<a
+ href="http://www.w3.org/TR/REC-xml-names/">XML-NS10</a>][<a
+ href="http://www.w3.org/TR/xml-names11/">XML-NS</a>], an
+ explicit XLink namespace declaration must be provided whenever
+ one of the above XLink attributes is used within SVG content.
+ One simple way to provide such an XLink namespace declaration
+ is to include an <span class="attr-name">'xmlns'</span> attribute
+ for the XLink namespace on the <a href="struct.html#SVGElement"><span
+ class="element-name">'svg'</span></a> element for content that uses
+ XLink attributes. For example:</p>
+
+
+
+<pre class='xml'><![CDATA[
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" ...>
+ <image xlink:href="foo.png" .../>
+</svg>
+]]></pre>
+
+<h2 id="Links">Links out of SVG content: the <span class="element-name">'a'</span> element</h2>
+
+<edit:with element='a'>
+
+<p>SVG provides an <a>'a'</a> element, to indicate links (also known
+as <em>hyperlinks</em> or <em>Web links</em>). The <a>'a'</a> element may
+contain any element that its parent may contain, except itself.</p>
+
+<p>SVG uses XLink ([<a href="http://www.w3.org/TR/2001/REC-xlink-20010627/">XLink</a>])
+for all link definitions. SVG 1.1 only requires
+that user agents support XLink's notion of
+<a href="http://www.w3.org/TR/2001/REC-xlink-20010627/#simple-links">
+simple links</a>. Each simple link associates exactly two resources, one
+local and one remote, with an arc going from the former to the latter.</p>
+
+<p>A simple link is defined for each separate rendered element contained
+within the <a>'a'</a> element; thus, if the <a>'a'</a> element contains
+three <a>'circle'</a> elements, a link is created for each circle. For
+each rendered element within an <a>'a'</a> element, the given rendered
+element is the local resource (the source anchor for the link).</p>
+
+<p>The remote resource (the destination for the link) is defined by
+a <a href="linking.html#IRIReference">IRI</a> specified by the XLink
+<a>'xlink:href'</a> attribute on the <a>'a'</a> element. The remote resource
+may be any Web resource (e.g., an image, a video clip, a sound bite, a
+program, another SVG document, an HTML document, an element within the
+current document, an element within a different document, etc.). By
+activating these links (by clicking with the mouse, through keyboard
+input, voice commands, etc.), users may visit these resources.</p>
+
+<p id="ExampleLink01"><span class="example-ref">Example link01</span> assigns
+a link to an ellipse.</p>
+
+<edit:example href='images/linking/link01.svg' name='link01' description='a link on an ellipse' image='yes' link='yes'/>
+
+<p>If the above SVG file is viewed by a user agent that supports both
+SVG and HTML, then clicking on the ellipse will cause the current window
+or frame to be replaced by the W3C home page.</p>
+
+<div id="AElement">
+<edit:elementsummary name='a'/>
+</div>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt><a id="XLinkShowAttribute2"
+ name="XLinkShowAttribute2"></a> <span
+ class="adef">xlink:show</span> = "<span
+ class="attr-value">new</span>" |
+ "<span
+ class="attr-value">replace</span>" </dt>
+ <dd><p>This attribute provides documentation to XLink-aware processors. If
+ <span class="attr-value">target="_blank"</span> then use
+ <span class="attr-value">xlink:show="new"</span> else use
+ <span class="attr-value">'replace'</span>. In
+ case of a conflict, the target attribute has priority, since it can
+ express a wider range of values.
+ Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
+ <p class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</p></dd>
+ <dt id="AElementXLinkActuateAttribute"><span
+ class="adef">xlink:actuate</span> = <span class='attr-value'>"onRequest"</span></dt>
+ <dd><p>This attribute provides documentation to XLink-aware processors that
+ an application should traverse from the starting
+ resource to the ending resource only on a post-loading
+ event triggered for the purpose of traversal.
+ Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
+ <p class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</p></dd>
+ <dt id="AElementXLinkHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span class="attr-value"><a href="types.html#DataTypeIRI"><IRI></a></span>"</dt>
+ <dd><p>The location of the referenced object, expressed as an <a href="intro.html#TermIRIReference"><span class="svg-term">IRI reference</span></a>.</p>
+ <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</p>
+ </dd>
+ <dt id="AElementTargetAttribute"><span
+ class="adef">target</span> = "<span
+ class="attr-value">_replace</span>" |
+ "<span
+ class="attr-value">_self</span>" |
+ "<span
+ class="attr-value">_parent</span>" |
+ "<span
+ class="attr-value">_top</span>" |
+ "<span
+ class="attr-value">_blank</span>" |
+ "<span class="attr-value"><a href="types.html#DataTypeXML-Name"><XML-Name></a></span>"
+ </dt>
+ <dd><p>This attribute should be used when there are multiple possible targets for
+ the ending resource, such as when the parent document is a
+ multi-frame HTML or XHTML document. This attribute specifies the
+ name or portion of the target window, frame, pane, tab, or other
+ relevant presentation context (e.g., an HTML or XHTML frame, iframe, or object element) into
+ which a document is to be opened when the link is activated:</p>
+ <dl class="definitions"><dt><span class="attr-value">_replace</span></dt>
+ <dd>The current SVG image is replaced by the linked content in the
+ same rectangular area in the same frame as the current SVG image.</dd>
+ <dt><span class="attr-value">_self</span></dt>
+ <dd>The current SVG image is replaced by the linked content in the
+ same frame as the current SVG image. If the attribute is not specified,
+ <span class='attr-value'>'_self'</span> is assumed.</dd>
+ <dt><span class="attr-value">_parent</span></dt>
+ <dd>The immediate frameset parent of the SVG image is replaced by the
+ linked content.</dd>
+ <dt><span class="attr-value">_top</span></dt>
+ <dd>The content of the full window or tab, including any frames, is
+ replaced by the linked content</dd>
+ <dt><span class="attr-value">_blank</span></dt>
+ <dd>A new un-named window or tab is requested for the display of the
+ linked content. If this fails, the result is the same as <span class="attr-value">_top</span></dd>
+ <dt><span class="attr-value"><a href="types.html#DataTypeXML-Name"><XML-Name></a></span></dt>
+ <dd>Specifies the name of the frame, pane, or other relevant
+ presentation context for display of the linked content. If this
+ already exists, it is re-used, replacing the existing content. If
+ it does not exist, it is created (the same as <span class="attr-value">'_blank'</span>, except that
+ it now has a name).
+ <!-- Note that frame-target must be an <a href="types.html#DataTypeXML-Name">XML Name</a> [XML11]. --></dd>
+ </dl>
+ <p>Note: The value <span class="attr-value">'_new'</span> is <em>not</em> a legal value for target (use <span class="attr-value">'_blank'</span>).</p>
+ <p class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</p></dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h2 id="LinksIntoSVG">Linking into SVG content: IRI fragments and SVG views</h2>
+
+<h3 id="IntroFragmentsViews">Introduction: IRI fragments and SVG views</h3>
+
+
+<p>Because SVG content often represents a picture or drawing
+of something, a common need is to link into a particular
+<span class="SVG-Term">view</span> of the document, where a view indicates
+the initial transformations so as to present a closeup of a particular
+section of the document.</p>
+
+<h3 id="SVGFragmentIdentifiers">SVG fragment identifiers</h3>
+
+<p>To link into a particular view of an SVG document, the IRI fragment
+identifier needs to be a correctly formed <span class="SVG-Term">SVG
+fragment identifier</span>. An SVG fragment identifier defines the
+meaning of the "selector" or "fragment identifier" portion of IRIs that
+locate resources of MIME media type "image/svg+xml".</p>
+
+<p>An SVG fragment identifier can come in two forms:</p>
+
+<ul>
+ <li>Shorthand <em>bare name</em> form of addressing (e.g.,
+ <span class="attr-value">MyDrawing.svg#MyView</span>). This form of
+ addressing, which allows addressing an SVG element by its ID, is compatible
+ with the fragment addressing mechanism for older versions of HTML.</li>
+
+ <li id="SVGViewSpecification"><span class="SVG-Term">SVG view specification</span>
+ (e.g., <span class="attr-value">MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</span>).
+ This form of addressing specifies the desired view of the
+ document (e.g., the region of the document to view, the
+ initial zoom level) completely within the SVG fragment
+ specification. The contents of the SVG view specification are
+ the five parameter specifications, <span class='attr-value'>viewBox(...)</span>,
+ <span class='attr-value'>preserveAspectRatio(...)</span>,
+ <span class='attr-value'>transform(...)</span>,
+ <span class='attr-value'>zoomAndPan(...)</span> and
+ <span class='attr-value'>viewTarget(...)</span>, whose parameters have the
+ same meaning as the corresponding attributes on a <a>'view'</a> element, or,
+ in the case of <span class='attr-value'>transform(...)</span>, the same
+ meaning as the corresponding attribute has on a
+ <a>'g'</a> element).</li>
+</ul>
+
+<p>An SVG fragment identifier is defined as follows:</p>
+
+<pre class='grammar'>
+SVGFragmentIdentifier ::= BareName |
+ SVGViewSpec
+
+BareName ::= XML_Name
+SVGViewSpec ::= 'svgView(' SVGViewAttributes ')'
+SVGViewAttributes ::= SVGViewAttribute |
+ SVGViewAttribute ';' SVGViewAttributes
+
+SVGViewAttribute ::= viewBoxSpec |
+ preserveAspectRatioSpec |
+ transformSpec |
+ zoomAndPanSpec |
+ viewTargetSpec
+viewBoxSpec ::= 'viewBox(' ViewBoxParams ')'
+preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')'
+transformSpec ::= 'transform(' TransformParams ')'
+zoomAndPanSpec ::= 'zoomAndPan(' ZoomAndPanParams ')'
+viewTargetSpec ::= 'viewTarget(' ViewTargetParams ')'
+</pre>
+
+<p>where:</p>
+
+<ul>
+
+ <li><span class="code-fragment">ViewBoxParams</span> corresponds to the
+ parameter values for the <a>'viewBox'</a> attribute on the <a>'view'</a>
+ element. For example, <span class="attr-value">viewBox(0,0,200,200)</span>.</li>
+
+ <li><span class="code-fragment">AspectParams</span> corresponds to the
+ parameter values for the <a>'preserveAspectRatio'</a> attribute on the
+ <a>'view'</a> element. For example,
+ <span class="attr-value">preserveAspectRatio(xMidYMid)</span>.</li>
+
+ <li><span class="code-fragment">TransformParams</span> corresponds to the
+ parameter values for the <a>'transform'</a> attribute that is available on
+ many elements. For example, <span class="attr-value">transform(scale(5))</span>.</li>
+
+ <li><span class="code-fragment">ZoomAndPanParams</span> corresponds to the
+ parameter values for the <a>'zoomAndPan'</a> attribute on the <a>'view'</a>
+ element. For example, <span class="attr-value">zoomAndPan(magnify)</span>.</li>
+
+ <li><span class="code-fragment">ViewTargetParams</span> corresponds to the
+ parameter values for the <a>'view/viewTarget'</a> attribute on the <a>'view'</a>
+ element. For example, <span class="attr-value">viewTarget(MyElementID)</span>.</li>
+</ul>
+
+<p>Spaces are not allowed in fragment specifications; thus, commas
+are used to separate numeric values within an SVG view specification
+(e.g., <span class="attr-value">#svgView(viewBox(0,0,200,200))</span>)
+and semicolons are used to separate attributes (e.g.,
+<span class="attr-value">#svgView(viewBox(0,0,200,200);preserveAspectRatio(none))</span>).</p>
+<p>
+Semicolons used to separate 'SVGViewAttribute' in SVG fragments may be url-escaped (as %3B);
+this is useful when animating a (semi-colon separated)
+list of IRIs because otherwise the semicolon would be interpreted as a list separator.
+</p>
+
+<p>The five types of <span class="code-fragment">SVGViewAttribute</span> may occur in any order, but each type may only occur at most one time in a correctly formed <span class="code-fragment">SVGViewSpec</span>.</p>
+
+<p>When a source document performs a link into an SVG document, for example
+via an <a href="http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html#h-12.2">HTML anchor element</a>
+([<a href="refs.html#ref-HTML4">HTML4</a>], section 12.2; i.e.,
+<span class="attr-value"><a href=...></span> element in HTML) or an
+XLink specification [<a href="refs.html#ref-XLINK">XLINK</a>], then
+the SVG fragment identifier specifies the initial view into the SVG document,
+as follows:</p>
+
+<ul>
+ <li>If no SVG fragment identifier is provided (e.g, the specified IRI did
+ not contain a "#" character, such as <span class="attr-value">MyDrawing.svg</span>),
+ then the initial view into the SVG document is established using the view
+ specification attributes (i.e., <a>'viewBox'</a>, etc.) on the
+ <a>outermost svg element</a>.</li>
+
+ <li>If the SVG fragment identifier addresses a <a>'view'</a> element within
+ an SVG document (e.g., <span class="attr-value">MyDrawing.svg#MyView</span>
+ or <span class="attr-value">MyDrawing.svg#xpointer(id('MyView'))</span>)
+ then the closest ancestor <a>'svg'</a> element is displayed in the viewport.
+ Any view specification attributes included on the given <a>'view'</a>
+ element override the corresponding view specification attributes on the
+ closest ancestor <a>'svg'</a> element.</li>
+
+ <li>If the SVG fragment identifier addresses specific SVG view (e.g.,
+ <span class="attr-value">MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</span>),
+ then the document fragment defined by the closest ancestor <a>'svg'</a>
+ element is displayed in the viewport using the SVG view specification
+ provided by the SVG fragment identifier.</li>
+
+ <li>If the SVG fragment identifier addresses any element other than a
+ <a>'view'</a> element, then the document defined by the closest ancestor
+ <a>'svg'</a> element is displayed in the viewport using the view
+ specification attributes on that <a>'svg'</a> element.</li>
+</ul>
+
+<h3 id="ViewElement">Predefined views: the <span class="element-name">'view'</span> element</h3>
+
+<edit:with element='view'>
+
+<p>The <span class="element-name">'view'</span> element is defined
+as follows:</p>
+
+<edit:elementsummary name='view'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="ViewElementViewTargetAttribute"><span
+ class="adef">viewTarget</span> = "<em>XML_Name
+ [XML_NAME]*</em>"</dt>
+ <dd>Indicates the target object associated with the view.
+ <br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+
+</edit:with>
+
+<h3 id="ViewHighlight">Highlighting views</h3>
+
+<p>It is helpful to users if the target element(s) are highlighted. The visual styling of this highlight should be decided by the document author, because the SVG User Agent has no way to determine what changes would make the elements more visible.</p>
+
+<p>The CSS :target selector ([<a href="refs.html#ref-SELECTORS">SELECTORS</a>], section 6.2.2) may be used in a stylesheet to provide alternate styling for elements which are the target of links. For example:</p>
+
+ <edit:example href="images/linking/target.xml" image="no" link="no">
+ </edit:example>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id='InterfaceSVGAElement'>Interface SVGAElement</h3>
+
+<edit:with element='a'>
+<edit:interface name='::svg::SVGAElement'/>
+</edit:with>
+
+<h3 id='InterfaceSVGViewElement'>Interface SVGViewElement</h3>
+
+<edit:with element='view'>
+<edit:interface name='::svg::SVGViewElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/masking.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,958 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Clipping, Masking and Compositing</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Clipping, Masking and Compositing</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>SVG supports the following clipping/masking features:</p>
+
+<ul>
+ <li><a href="#ClippingPaths">clipping paths</a>, which uses
+ any combination of <a>'path'</a>, <a>'text'</a> and
+ <a href="intro.html#TermBasicShape">basic shapes</a> to serve as
+ the outline of a (in the absence of anti-aliasing) 1-bit
+ mask, where everything on the "inside" of the outline is
+ allowed to show through but everything on the outside is
+ masked out</li>
+
+ <li><a href="#Masking">masks</a>, which are
+ <a href="intro.html#TermContainerElement">container elements</a>
+ which can contain <a href="intro.html#TermGraphicsElement">graphics elements</a>
+ or other container elements which define a set of graphics
+ that is to be used as a semi-transparent mask for compositing
+ foreground objects into the current background.</li>
+</ul>
+
+<p>One key distinction between a <a href="#ClippingPaths">clipping path</a>
+and a <a href="#Masking">mask</a> is that clipping paths are hard masks
+(i.e., the silhouette consists of either fully opaque pixels or
+fully transparent pixels, with the possible exception of
+anti-aliasing along the edge of the silhouette) whereas masks
+consist of an image where each pixel value indicates the degree
+of transparency vs. opacity. In a mask, each pixel value can
+range from fully transparent to fully opaque.</p>
+
+<p>SVG supports only simple alpha blending compositing (see
+<a href="#SimpleAlphaBlending">Simple Alpha Compositing</a>).</p>
+
+<h2 id="SimpleAlphaBlending">Simple alpha compositing</h2>
+
+<p>Graphics elements are blended into the elements already
+rendered on the canvas using simple alpha compositing, in which
+the resulting color and opacity at any given pixel on the
+canvas is the result of the following formulas (all color
+values use premultiplied alpha):</p>
+
+<pre>
+Er, Eg, Eb - Element color value
+Ea - Element alpha value
+Cr, Cg, Cb - Canvas color value (before blending)
+Ca - Canvas alpha value (before blending)
+Cr', Cg', Cb' - Canvas color value (after blending)
+Ca' - Canvas alpha value (after blending)
+Ca' = 1 - (1 - Ea) * (1 - Ca)
+Cr' = (1 - Ea) * Cr + Er
+Cg' = (1 - Ea) * Cg + Eg
+Cb' = (1 - Ea) * Cb + Eb
+</pre>
+
+<p>The following rendering properties, which provide
+information about the color space in which to perform the
+compositing operations, apply to compositing operations:</p>
+
+<ul>
+ <li><a>'color-interpolation'</a></li>
+ <li><a>'color-rendering'</a></li>
+</ul>
+
+<h2 id="ClippingPaths">Clipping paths</h2>
+
+<h3 id="ClippingPathsIntro">Introduction</h3>
+
+<p>The clipping path restricts the region to which paint can be
+applied. Conceptually, any parts of the drawing that lie
+outside of the region bounded by the currently active clipping
+path are not drawn. A clipping path can be thought of as a mask
+wherein those pixels outside the clipping path are black with
+an alpha value of zero and those pixels inside the clipping
+path are white with an alpha value of one (with the possible
+exception of anti-aliasing along the edge of the
+silhouette).</p>
+
+<h3 id="InitialClippingPath">The initial clipping path</h3>
+
+<p>When an <a>'svg'</a> element is either the root element in the
+document or is embedded within a document whose layout is determined
+according to the layout rules of CSS or XSL, then the user agent must
+establish an initial clipping path for the SVG document fragment. The
+<a>'overflow'</a> and <a>'clip'</a> properties along with additional SVG
+user agent processing rules determine the initial clipping path which
+the user agent establishes for the SVG document fragment:</p>
+
+<h3 id="OverflowAndClipProperties">The <span class="prop-name">'overflow'</span>
+and <span class="prop-name">'clip'</span> properties</h3>
+
+ <div class="propdef">
+ <dl>
+ <dt id="OverflowProperty"><span class="propdef-title prop-name">'overflow'</span></dt>
+ <dd>
+ <table summary="overflow property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>visible | hidden | scroll | auto | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>see prose</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="coords.html#ElementsThatEstablishViewports">elements
+ which establish a new viewport</a>, <a>'pattern'</a> elements
+ and <a>'marker element'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>The <a>'overflow'</a> property has the same parameter values and has the
+same meaning <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visufx.html#overflow">as defined in CSS2</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], section 11.1.1);
+however, the following additional points apply:</p>
+
+<ul>
+ <li>The <a>'overflow'</a> property applies to
+ <a href="coords.html#ElementsThatEstablishViewports">elements that establish new viewports</a>
+ (e.g., <a>'svg'</a> elements), <a>'pattern'</a> elements and <a>'marker element'</a>
+ elements. For all other elements, the property has no effect (i.e., a clipping
+ rectangle is not created).</li>
+
+ <li>For those elements to which the <a>'overflow'</a> property can apply, if
+ the <a>'overflow'</a> property has the value <span class='prop-value'>hidden</span> or <span class='prop-value'>scroll</span>,
+ the effect is that a new clipping path in the shape of a rectangle is created.
+ The result is equivalent to defining a <a>'clipPath'</a> element whose
+ content is a <a>'rect'</a> element which defines the equivalent rectangle,
+ and then specifying the <uri> of this <a>'clipPath'</a> element on the
+ <a>'clip-path'</a> property for the given element.</li>
+
+ <li>If the <a>'overflow'</a> property has a value other than
+ <span class='prop-value'>hidden</span> or <span class='prop-value'>scroll</span>,
+ the property has no effect (i.e., a clipping rectangle is not created).</li>
+
+ <li>Within SVG content, the value <span class='prop-value'>auto</span> is
+ equivalent to the value <span class='prop-value'>visible</span>.</li>
+
+ <li>When an <a>outermost svg element</a> is embedded inline within a
+ parent XML grammar which uses <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html">CSS layout</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 9)
+ or <a href="http://www.w3.org/TR/2006/REC-xsl11-20061205/">XSL formatting</a>
+ [<a href="refs.html#ref-XSL">XSL</a>], if the
+ <a>'overflow'</a> property has the value <span class='prop-value'>hidden</span>
+ or <span class='prop-value'>scroll</span>, then the user agent will
+ establish an initial clipping path equal to the bounds of the initial
+ <a href="coords.html#SVGViewport">viewport</a>; otherwise, the initial
+ clipping path is set according to the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visufx.html#overflow">clipping rules as defined in CSS2</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 11.1.1).</li>
+
+ <li>When an <a>outermost svg element</a> is stand-alone or embedded
+ inline within a parent XML grammar which does not use CSS layout
+ or XSL formatting, the
+ <a>'overflow'</a> property on the <a>outermost svg element</a> is ignored
+ for the purposes of visual rendering and the initial clipping path is set to
+ the bounds of the initial <a href="coords.html#SVGViewport">viewport</a>.</li>
+
+ <li>The initial value for <span class="prop-name">'overflow'</span> as defined in [<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visufx.html#overflow">CSS2-overflow</a>] is 'visible', and this applies also to the root <a href="struct.html#SVGElement"><span class="element-name">'svg'</span></a> element; however, for child elements of an SVG document, SVG's <a href="styling.html#UAStyleSheet">user agent style sheet</a> overrides this initial value and sets the <span class="prop-name">'overflow'</span> property on <a href="coords.html#ElementsThatEstablishViewports">elements that establish new viewports</a> (e.g., <a href="struct.html#SVGElement"><span class="element-name">'svg'</span></a> elements), <a href="pservers.html#PatternElement"><span class="element-name">'pattern'</span></a> elements and <a href="painting.html#MarkerElement"><span class="element-name">'marker'</span></a> elements to the value 'hidden'.</li>
+
+</ul>
+
+<p>As a result of the above, the default behavior of SVG user agents is to
+establish a clipping path to the bounds of the initial
+<a href="coords.html#SVGViewport">viewport</a> and to establish a new clipping
+path for each <a href="coords.html#ElementsThatEstablishViewports">element which
+establishes a new viewport</a> and each <a>'pattern'</a> and
+<a>'marker element'</a> element.</p>
+
+<p>For related information, see <a href="masking.html#AutoClipAtViewportNotViewBox">Clip
+to viewport vs. clip to <span class="attr-name">'viewBox'</span></a>.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="ClipProperty"><span class="propdef-title prop-name">'clip'</span></dt>
+ <dd>
+ <table summary="clip property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><shape> | auto | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="coords.html#ElementsThatEstablishViewports">elements
+ which establish a new viewport</a>, <a>'pattern'</a> elements
+ and <a>'marker element'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>The <a>'clip'</a> property has the same parameter values
+<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visufx.html#clipping">as defined in CSS2</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], section 11.1.2).
+Unitless values, which indicate current user coordinates, are
+permitted on the coordinate values on the <shape>. The
+value of <span class='prop-value'>auto</span> defines a clipping path along
+the bounds of the viewport created by the given element.</p>
+
+<h3 id="AutoClipAtViewportNotViewBox">Clip to viewport vs. clip to
+<span class="attr-name">'viewBox'</span></h3>
+
+<p>It is important to note that initial values for the <a>'overflow'</a> and
+<a>'clip'</a> properties and the <a href="styling.html#UAStyleSheet">user agent
+style sheet</a> will result in an initial clipping path that is set to the
+bounds of the initial viewport. When attributes <a>'viewBox'</a> and
+<a>'preserveAspectRatio'</a> attributes are specified, it is sometime
+desirable that the clipping path be set to the bounds of the <a>'viewBox'</a>
+instead of the viewport (or reference rectangle, in the case of
+<a>'marker element'</a> and <a>'pattern'</a> elements), particularly when
+<a>'preserveAspectRatio'</a> specifies uniform scaling and the aspect ratio of
+the <a>'viewBox'</a> does not match the aspect ratio of the viewport.</p>
+
+<p>To set the initial clipping path to the bounds of the <a>'viewBox'</a>, set
+the bounds of <a>'clip'</a> property to the same rectangle as specified on the
+<a>'viewBox'</a> attribute. (Note that the parameters do not match.
+<a>'clip'</a> takes values <top>, <right>,<bottom> and
+<left>, whereas <a>'viewBox'</a> takes values <min-x>,
+<min-y>, <width> and <height>.)</p>
+
+<h3 id="EstablishingANewClippingPath">Establishing a new clipping path: the <span class="element-name">'clipPath'</span> element</h3>
+
+<edit:with element='clipPath'>
+
+<p id="ClipPathElement">A clipping path is defined with a <a>'clipPath'</a>
+element. A clipping path is used/referenced using the <a>'clip-path'</a>
+property.</p>
+
+<p>A <a>'clipPath'</a> element can contain <a>'path'</a> elements,
+<a>'text'</a> elements, <a href="shapes.html">basic shapes</a> (such as
+<a>'circle'</a>) or a <a>'use'</a> element. If a <a>'use'</a> element is a
+child of a <a>'clipPath'</a> element, it must directly reference
+<a>'path'</a>, <a>'text'</a> or <a href="shapes.html">basic shape</a> elements.
+Indirect references are an error (see
+<a href="implnote.html#ErrorProcessing">Error processing</a>).</p>
+
+<p>The raw geometry of each child element exclusive of rendering properties
+such as <a>'fill'</a>, <a>'stroke'</a>, <a>'stroke-width'</a> within a
+<a>'clipPath'</a> conceptually defines a 1-bit mask (with the possible
+exception of anti-aliasing along the edge of the geometry) which represents
+the silhouette of the graphics associated with that element. Anything outside
+the outline of the object is masked out. If a child element is
+made invisible by <a>'display'</a> or <a>'visibility'</a> it does not contribute
+to the clipping path. When the <a>'clipPath'</a> element
+contains multiple child elements, the silhouettes of the child elements are
+logically OR'd together to create a single silhouette which is then used to
+restrict the region onto which paint can be applied. Thus, a point is inside
+the clipping path if it is inside any of the children of the
+<a>'clipPath'</a>.</p>
+
+<p>For a given graphics element, the actual clipping path used
+will be the intersection of the clipping path specified by its
+<a>'clip-path'</a> property (if any) with any clipping paths on its
+ancestors, as specified by the <a>'clip-path'</a> property on the
+ancestor elements, or by the <a>'overflow'</a> property on ancestor
+<a href="coords.html#ElementsThatEstablishViewports">elements
+which establish a new viewport</a>. Also, see the discussion of
+<a href="masking.html#InitialClippingPath">the initial clipping path</a>.)</p>
+
+<p>A couple of notes:</p>
+
+<ul>
+ <li>The <a>'clipPath'</a> element itself and its child elements do
+ <em>not</em> inherit clipping paths from the ancestors of the
+ <a>'clipPath'</a> element.</li>
+
+ <li>The <a>'clipPath'</a> element or any of its children can specify
+ property <a>'clip-path'</a>.<br /> If a valid <a>'clip-path'</a> reference
+ is placed on a <a>'clipPath'</a> element, the resulting clipping path is the
+ intersection of the contents of the <a>'clipPath'</a> element with the
+ referenced clipping path.<br />
+ If a valid <a>'clip-path'</a> reference is placed on one of the children of
+ a <a>'clipPath'</a> element, then the given child element is clipped by the
+ referenced clipping path before OR'ing the silhouette of the child element
+ with the silhouettes of the other child elements.</li>
+
+ <li>An empty clipping path will completely clip away the element that had the <a>'clip-path'</a> property applied.</li>
+
+</ul>
+
+<edit:elementsummary name='clipPath'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="ClipPathElementClipPathUnitsAttribute"><span
+ class="adef">clipPathUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
+ <dd>Defines the coordinate system for the contents of the
+ <a>'clipPath'</a>.<br />
+ If <span class="attr-value">clipPathUnits="userSpaceOnUse"</span>,
+ the contents of the <a>'clipPath'</a> represent values in
+ the current user coordinate system in place at the time
+ when the <a>'clipPath'</a>
+ element is referenced (i.e., the user coordinate system for
+ the element referencing the <a>'clipPath'</a> element via the
+ <a>'clip-path'</a> property).<br />
+ If <span class="attr-value">clipPathUnits="objectBoundingBox"</span>,
+ then the user coordinate system for the contents of the
+ <a>'clipPath'</a> element is established using the bounding box of
+ the element to which the clipping path is applied (see <a
+ href="coords.html#ObjectBoundingBox">Object bounding box
+ units</a>).<br />
+ If attribute <a>'clipPathUnits'</a>
+ is not specified, then the effect is as if a value of <span
+ class="attr-value">'userSpaceOnUse'</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p><a href="styling.html#SVGStylingProperties">Properties</a> inherit into the
+<a>'clipPath'</a> element from its ancestors; properties do <em>not</em>
+inherit from the element referencing the <a>'clipPath'</a> element.</p>
+
+<p><a>'clipPath'</a> elements are never rendered directly; their only usage is
+as something that can be referenced using the <a>'clip-path'</a> property. The
+<a>'display'</a> property does not apply to the <a>'clipPath'</a> element;
+thus, <a>'clipPath'</a> elements are not directly rendered even if the
+<a>'display'</a> property is set to a value other than
+<span class="prop-value">none</span>, and <a>'clipPath'</a> elements are
+available for referencing even when the <a>'display'</a> property on the
+<a>'clipPath'</a> element or any of its ancestors is set to
+<span class="prop-value">none</span>.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="ClipPathProperty"><span class="propdef-title prop-name">'clip-path'</span></dt>
+ <dd>
+ <table summary="clip-path property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><a href="types.html#DataTypeFuncIRI"><funciri></a>
+ | none | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>none</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="intro.html#TermContainerElement">container
+ elements</a>, <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a>
+ and <a>'clipPath'</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class="prop-value"><a href="types.html#DataTypeFuncIRI"><funciri></a></span></dt>
+ <dd>An <a href="linking.html#IRIReference">IRI reference</a> to another
+ graphical object within the same SVG document fragment which will be used as
+ the clipping path. If the <a href="linking.html#IRIReference">IRI reference</a> is not valid
+ (e.g it points to an object that doesn't exist or the object is not a <a>'clipPath'</a> element) the
+ <a>'clip-path'</a> property must be treated as if it hadn't been specified.</dd>
+</dl>
+
+ <div class="propdef">
+ <dl>
+ <dt id="ClipRuleProperty"><span class="propdef-title prop-name">'clip-rule'</span></dt>
+ <dd>
+ <table summary="clip-rule property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>nonzero | evenodd | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>nonzero</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td>graphics elements within a <a>'clipPath'</a>
+ element</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class="prop-value">nonzero</span></dt>
+ <dd>See description of <a>'fill-rule'</a> property.</dd>
+
+ <dt><span class="prop-value">evenodd</span></dt>
+ <dd>See description of <a>'fill-rule'</a> property.</dd>
+</dl>
+
+<p>The <a>'clip-rule'</a> property only applies to graphics elements that are
+contained within a <a>'clipPath'</a> element. The following fragment of code
+will cause an evenodd clipping rule to be applied to the clipping path because
+<a>'clip-rule'</a> is specified on the <a>'path'</a> element that defines the
+clipping shape:</p>
+
+<pre>
+<g clip-rule="nonzero">
+ <clipPath id="MyClip">
+ <path d="..." clip-rule="evenodd" />
+ </clipPath>
+ <rect clip-path="url(#MyClip)" ... />
+</g>
+</pre>
+
+<p>whereas the following fragment of code will <em>not</em> cause an
+evenodd clipping rule to be applied because the <a>'clip-rule'</a> is
+specified on the referencing element, not on the object defining the
+clipping shape:</p>
+
+<pre>
+<g clip-rule="nonzero">
+ <clipPath id="MyClip">
+ <path d="..." />
+ </clipPath>
+ <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
+</g>
+</pre>
+
+<h3 id="clipPath-geometry">Clipping paths, geometry, and pointer events</h3>
+
+ <p>
+ A clipping path is conceptually equivalent to a custom viewport for
+ the referencing element. Thus, it affects the rendering of an element,
+ but not the element's inherent geometry. The bounding box of a clipped
+ element (that is, an element which references a
+ <span class="element-name">'clipPath'</span> element via a
+ <span class="prop-name">'clip-path'</span> property, or a child of the
+ referencing element) must remain the same as if it were not clipped.
+ </p>
+
+ <p>By default, <a href="interact.html#PointerEventsProperty">pointer-events</a> must not be dispatched on the clipped (non-visible) regions of a shape. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive <span class="event-name">'click'</span> events outside the smaller radius. Later versions of SVG may define new properties to enable fine-grained control over the interactions between hit testing and clipping.</p>
+
+</edit:with>
+
+<h2 id="Masking">Masking</h2>
+
+<edit:with element='mask'>
+
+<p id="MaskElement">In SVG, you can specify that any other graphics
+object or <a>'g'</a> element can be used as an alpha mask for
+compositing the current object into the background.</p>
+
+<p>A mask is defined with a <a>'mask element'</a> element. A mask is
+used/referenced using the <a>'mask property'</a> property.</p>
+
+<p>A <a>'mask element'</a> can contain any graphical elements or
+<a href="intro.html#TermContainerElement">container elements</a> such as
+a <a>'g'</a>.</p>
+
+<p>It is an error if the <a>'mask property'</a> property references a
+non-existent object or if the referenced object is not a <a>'mask element'</a>
+element (see <a href="implnote.html#ErrorProcessing">Error Processing</a>).</p>
+
+<p>The effect is as if the child elements of the <a>'mask element'</a> are
+rendered into an offscreen image which has been initialized to transparent
+black. Any graphical object which uses/references the given
+<a>'mask element'</a> element will be painted onto the background through the
+mask, thus completely or partially masking out parts of the graphical
+object.</p>
+
+<p>For any graphics object that is used as a mask, the mask value at any point
+is computed from the color channel values and alpha channel value as follows.
+First a luminance value is computed from the color channel values:
+</p>
+<ul>
+<li>If the computed value of <a>'color-interpolation'</a> on the <a>'mask element'</a> element is <span class="attr-value">linearRGB</span>,
+first convert the original image color values (potentially in the sRGB color space) to the linear RGB color space (see
+<a href="painting.html#RenderingProperties">Rendering properties</a>). Then,
+using non-premultiplied linear RGB color values, apply the luminance-to-alpha
+coefficients (as defined in the <a>'feColorMatrix'</a> filter primitive) to
+convert the linear RGB color values to linear luminance values.
+</li>
+<li>
+If the computed value of <a>'color-interpolation'</a> on the <a>'mask element'</a> element is <span class="attr-value">sRGB</span> then the luminance value
+is calculated by taking the non-premultiplied RGB color values, applying the luminance-to-alpha
+coefficients (as defined in the <a>'feColorMatrix'</a> filter primitive) to
+convert the RGB color values to luminance values.</li>
+</ul>
+<p>Finally if the
+graphics object also includes an alpha channel, then the computed
+luminance value is multiplied by the corresponding alpha value to produce the
+mask value.
+</p>
+
+<p>For a four-channel RGBA graphics object that is used as a mask, both
+the color channels and the alpha channel of the mask contribute to the
+masking operation. The alpha mask that is used to composite the current
+object into the background represents the product of the luminance of
+the color channels (see previous paragraph) and the alpha channel from
+the mask.</p>
+
+<p>For a three-channel RGB graphics object that is used as a mask (e.g.,
+when referencing a 3-channel image file), the effect is as if the object
+were converted into a 4-channel RGBA image with the alpha channel
+uniformly set to 1.</p>
+
+<p>For a single-channel image that is used as a mask (e.g., when
+referencing a 1-channel grayscale image file), the effect is as if the
+object were converted into a 4-channel RGBA image, where the single
+channel from the referenced object is used to compute the three color
+channels and the alpha channel is uniformly set to 1. Note that when
+referencing a grayscale image file, the transfer curve relating the
+encoded grayscale values to linear light values must be taken into
+account when computing the color channels.</p>
+
+<p>The effect of a mask is identical to what would have happened if
+there were no mask but instead the alpha channel of the given object
+were multiplied with the mask's resulting alpha values (i.e., the
+product of the mask's luminance from its color channels multiplied by
+the mask's alpha channel).</p>
+
+<p>Note that SVG <a>'path'</a>s, shapes (e.g., <a>'circle'</a>) and
+<a>'text'</a> are all treated as four-channel RGBA images for the purposes
+of masking operations.</p>
+
+<p id="ExampleMask01"><span class="example-ref">Example mask01</span> uses
+an image to mask a rectangle.</p>
+
+<edit:example href='images/masking/mask01.svg' name='mask01' description='blue text masked with gradient against red background' image='yes' link='yes'/>
+
+<edit:elementsummary name='mask'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="MaskElementMaskUnitsAttribute"><span
+ class="adef">maskUnits</span> = "<em>userSpaceOnUse</em> |
+ <em>objectBoundingBox</em>"</dt>
+ <dd>Defines the coordinate system for attributes
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>.<br />
+ If <span
+ class="attr-value">maskUnits="userSpaceOnUse"</span>,
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>
+ represent values in the current user coordinate system in place at
+ the time when the <a>'mask element'</a>
+ element is referenced (i.e., the user coordinate system for
+ the element referencing the <a>'mask element'</a> element via the
+ <a>'mask property'</a> property).<br />
+ If <span
+ class="attr-value">maskUnits="objectBoundingBox"</span>,
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>
+ represent fractions or percentages of the bounding box of
+ the element to which the mask is applied. (See <a
+ href="coords.html#ObjectBoundingBox">Object bounding box
+ units</a>.)<br />
+ If attribute <a>'maskUnits'</a> is
+ not specified, then the effect is as if a value of <span
+ class="attr-value">'objectBoundingBox'</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="MaskElementMaskContentUnitsAttribute"><span
+ class="adef">maskContentUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
+ <dd>Defines the coordinate system for the contents of the
+ <a>'mask element'</a>.<br />
+ If <span
+ class="attr-value">maskContentUnits="userSpaceOnUse"</span>,
+ the user coordinate system for the contents of the
+ <a>'mask element'</a> element is the current
+ user coordinate system in place at the time when the
+ <a>'mask element'</a> element is referenced
+ (i.e., the user coordinate system for the element
+ referencing the <a>'mask element'</a>
+ element via the <a>'mask property'</a>
+ property).<br />
+ If <span
+ class="attr-value">maskContentUnits="objectBoundingBox"</span>,
+ the user coordinate system for the contents of the <a>'mask element'</a> is established using the
+ bounding box of the element to which the mask is applied.
+ (See <a href="coords.html#ObjectBoundingBox">Object
+ bounding box units</a>.)<br />
+ If attribute <a>'maskContentUnits'</a> is not specified,
+ then the effect is as if a value of <span
+ class="attr-value">'userSpaceOnUse'</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="MaskElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of one corner of the rectangle
+ for the largest possible offscreen buffer. Note that the
+ clipping path used to render any graphics within the mask
+ will consist of the intersection of the current clipping
+ path associated with the given object and the rectangle
+ defined by
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'-10%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="MaskElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of one corner of the rectangle
+ for the largest possible offscreen buffer.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'-10%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="MaskElementWidthAttribute"><span
+ class="adef">width</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The width of the largest possible offscreen buffer.
+ Note that the clipping path used to render any graphics
+ within the mask will consist of the intersection of the
+ current clipping path associated with the given object and
+ the rectangle defined by
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'120%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="MaskElementHeightAttribute"><span
+ class="adef">height</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The height of the largest possible offscreen
+ buffer.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'120%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p><a href="styling.html#SVGStylingProperties">Properties</a> inherit into the
+<a>'mask element'</a> element from its ancestors; properties do <em>not</em>
+inherit from the element referencing the <a>'mask element'</a> element.</p>
+
+<p><a>'mask element'</a> elements are never rendered directly; their only
+usage is as something that can be referenced using the <a>'mask property'</a>
+property. The <a>'opacity'</a>, <a>'filter property'</a> and <a>'display'</a> properties do not apply to the
+<a>'mask element'</a> element; thus, <a>'mask element'</a> elements are not
+directly rendered even if the <a>'display'</a> property is set to a value
+other than <span class="prop-value">none</span>, and <a>'mask element'</a>
+elements are available for referencing even when the <a>'display'</a> property
+on the <a>'mask element'</a> element or any of its ancestors is set to
+<span class="prop-value">none</span>.</p>
+
+<p>The following is a description of the <a>'mask property'</a> property.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="MaskProperty"><span class="propdef-title prop-name">'mask'</span></dt>
+ <dd>
+ <table summary="mask property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><a href="types.html#DataTypeFuncIRI"><funciri></a> | none | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>none</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="intro.html#TermContainerElement">container
+ elements</a> and <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class="prop-value"><a href="types.html#DataTypeFuncIRI"><funciri></a></span></dt>
+ <dd>A <a href="linking.html#IRIReference">IRI reference</a> to another
+ graphical object which will be used as the mask.</dd>
+</dl>
+
+</edit:with>
+
+<h2 id="ObjectAndGroupOpacityProperties">Object and group opacity: the
+<span class="prop-name">'opacity'</span> property</h2>
+
+<p>There are several opacity properties within SVG:</p>
+
+<ul>
+ <li><a>'fill-opacity'</a>, which specifies the opacity of a fill
+ operation;</li>
+
+ <li><a>'stroke-opacity'</a>, which specifies the opacity of a stroking
+ operation;</li>
+
+ <li><a>'stop-opacity'</a>, which specifies the opacity of a gradient stop; and</li>
+
+ <li><a>'opacity'</a>, which specifies object/group opacity and which is
+ described in this section.</li>
+</ul>
+
+<p>Except for object/group opacity (described just below), all other opacity
+properties are involved in intermediate rendering operations. Object/group
+opacity can be thought of conceptually as a postprocessing operation.
+Conceptually, after the object/group is rendered into an RGBA offscreen image,
+the object/group opacity setting specifies how to blend the offscreen image
+into the current background.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="OpacityProperty"><span class="propdef-title prop-name">'opacity'</span></dt>
+ <dd>
+ <table summary="opacity property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>1</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="intro.html#TermContainerElement">container
+ elements</a> (except <a>'mask element'</a>) and <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class="prop-value"><opacity-value></span></dt>
+ <dd>The uniform opacity setting to be applied across an
+ entire object, as a <a><number></a>. Any values outside the range 0.0 (fully
+ transparent) to 1.0 (fully opaque) will be clamped to this
+ range. (See <a href="implnote.html#RangeClamping">Clamping
+ values which are restricted to a particular range</a>.) If
+ the object is a container element such as a <a>'g'</a>, then
+ the effect is as if the contents of the <a>'g'</a> were
+ blended against the current background using a mask where the
+ value of each pixel of the mask is <opacity-value>.
+ (See <a href="masking.html#SimpleAlphaBlending">Simple alpha
+ compositing</a>.)</dd>
+</dl>
+
+<p id="ExampleOpacity01"><span class="example-ref">Example opacity01</span>
+illustrates various usage of the <a>'opacity'</a> property on elements and
+groups.</p>
+
+<edit:example href='images/masking/opacity01.svg' name='opacity01' description='opacity property' image='yes' link='yes'/>
+
+<p>In the example above, the top row of circles have differing opacities,
+ranging from 1.0 to 0.2. The bottom row illustrates five <a>'g'</a> elements,
+each of which contains overlapping red and green circles, as follows:</p>
+
+<ul>
+ <li>The first group shows the opaque case for reference. The group has
+ opacity of 1, as do the circles.</li>
+
+ <li>The second group shows group opacity when the elements in the group are
+ opaque.</li>
+
+ <li>The third and fourth group show that opacity is not commutative. In the
+ third group (which has opacity of 1), a semi-transparent green circle is
+ drawn on top of a semi-transparent red circle, whereas in the fourth group a
+ semi-transparent red circle is drawn on top of a semi-transparent green
+ circle. Note that area where the two circles intersect display different
+ colors. The third group shows more green color in the intersection area,
+ whereas the fourth group shows more red color.</li>
+
+ <li>The fifth group shows the multiplicative effect of opacity settings.
+ Both the circles and the group itself have opacity settings of .5. The
+ result is that the portion of the red circle which does not overlap with the
+ green circle (i.e., the top/right of the red circle) will blend into the
+ blue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, after
+ blending into the blue rectangle, results in a blended color which is 25%
+ red and 75% blue.</li>
+</ul>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGClipPathElement">Interface SVGClipPathElement</h3>
+
+<edit:with element='clipPath'>
+<edit:interface name='::svg::SVGClipPathElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGMaskElement">Interface SVGMaskElement</h3>
+
+<edit:with element='mask'>
+<edit:interface name='::svg::SVGMaskElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/metadata.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,132 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Metadata</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Metadata</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+ <p>Metadata is structured data about data.</p>
+ <p>In the computing industry, there are ongoing standardization
+ efforts towards metadata with the goal of promoting industry
+ interoperability and efficiency. Content creators should track
+ these developments and include appropriate metadata in their
+ SVG content which conforms to these various metadata standards
+ as they emerge.</p>
+ <p>The W3C has a <a
+ href="http://www.w3.org/2001/sw/Activity">Semantic Web
+ Activity</a> which has been established to serve a leadership
+ role, in both the design of enabling specifications and the
+ open, collaborative development of technologies that support
+ the automation, integration and reuse of data across various
+ applications. The Semantic Web Activity builds upon the earlier
+ W3C Metadata Activity, including the definition of Resource
+ Description Framework (RDF). The
+ <a href="http://www.w3.org/TR/2004/REC-rdf-primer-20040210/"><cite>RDF Primer</cite></a>
+ is the first in a set of six documents that define the Resource Description Framework
+ [<a href="refs.html#ref-RDF-PRIMER">RDF-PRIMER</a>].</p>
+ <p>Another activity relevant to most applications of metadata
+ is the <a href="http://dublincore.org/">Dublin Core</a>
+ [<a href="refs.html#ref-DCORE">DCORE</a>], which is
+ a set of generally applicable core metadata properties (e.g.,
+ Title, Creator/Author, Subject, Description, etc.).</p>
+ <p>Individual industries or individual content creators are
+ free to define their own metadata schema but are encouraged to
+ follow existing metadata standards and use standard metadata
+ schema wherever possible to promote interchange and
+ interoperability. If a particular standard metadata schema does
+ not meet your needs, then it is usually better to define an
+ additional metadata schema in an existing framework such as RDF
+ and to use custom metadata schema in combination with standard
+ metadata schema, rather than totally ignore the standard
+ schema.</p>
+
+<h2 id="MetadataElement">The <span class="element-name">'metadata'</span> element</h2>
+
+ <p>Metadata which is included with SVG content should be
+ specified within <a>'metadata'</a>
+ elements. The contents of the <a>'metadata'</a> should be elements from
+ other XML namespaces, with these elements from these namespaces
+ expressed in a manner conforming with the <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a> Recommendation
+ [<a href="refs.html#ref-XML-NS">XML-NS</a>].</p>
+ <p>Authors should provide a <a>'metadata'</a> child element to the
+ <a>outermost svg element</a> within a
+ stand-alone SVG document. The <a>'metadata'</a> child element to an <a>'svg'</a> element serves the
+ purposes of identifying document-level metadata.</p>
+ <p>The DTD definitions of many of SVG's elements (particularly,
+ container and text elements) place no restriction on the
+ placement or number of the <a>'metadata'</a> sub-elements. This
+ flexibility is only present so that there will be a consistent
+ content model for container elements, because some container
+ elements in SVG allow for mixed content, and because <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-mixed-content">the mixed
+ content rules for XML</a> ([<a href="refs.html#ref-XML10">XML10</a>], section 3.2.2)
+ do not permit the desired restrictions. Representations of
+ future versions of the SVG language might use more expressive
+ representations than DTDs which allow for more restrictive
+ mixed content rules. It is strongly recommended that at most
+ one <a>'metadata'</a> element appear
+ as a child of any particular element, and that this element
+ appear before any other child elements (except possibly <a>'desc'</a> or
+ <a>'title'</a> elements) or character
+ data content. If metadata-processing user agents need to choose
+ among multiple <a>'metadata'</a>
+ elements for processing it should choose the first one.</p>
+
+<edit:elementsummary name='metadata'/>
+
+<h2 id="Example">An example</h2>
+
+ <p>Here is an example of how metadata can be included in an SVG
+ document. The example uses the Dublin Core version 1.1 schema.
+ (Other XML-compatible metadata languages, including ones not
+ based on RDF, can be used also.)</p>
+<pre>
+<?xml version="1.0" standalone="yes"?>
+<svg width="4in" height="3in" version="1.1"
+ xmlns = 'http://www.w3.org/2000/svg'>
+ <desc xmlns:myfoo="http://example.org/myfoo">
+ <myfoo:title>This is a financial report</myfoo:title>
+ <myfoo:descr>The global description uses markup from the
+ <myfoo:emph>myfoo</myfoo:emph> namespace.</myfoo:descr>
+ <myfoo:scene><myfoo:what>widget $growth</myfoo:what>
+ <myfoo:contains>$three $graph-bar</myfoo:contains>
+ <myfoo:when>1998 $through 2000</myfoo:when> </myfoo:scene>
+ </desc>
+ <metadata>
+ <rdf:RDF
+ xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#"
+ xmlns:dc = "http://purl.org/dc/elements/1.1/" >
+ <rdf:Description about="http://example.org/myfoo"
+ dc:title="MyFoo Financial Report"
+ dc:description="$three $bar $thousands $dollars $from 1998 $through 2000"
+ dc:publisher="Example Organization"
+ dc:date="2000-04-11"
+ dc:format="image/svg+xml"
+ dc:language="en" >
+ <dc:creator>
+ <rdf:Bag>
+ <rdf:li>Irving Bird</rdf:li>
+ <rdf:li>Mary Lambert</rdf:li>
+ </rdf:Bag>
+ </dc:creator>
+ </rdf:Description>
+ </rdf:RDF>
+ </metadata>
+</svg>
+</pre>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGMetadataElement">Interface SVGMetadataElement</h3>
+
+<edit:interface name="::svg::SVGMetadataElement"/>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/mimereg.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,202 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN"
+ "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+ <title>Media Type registration for image/svg+xml</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+<h1 id="mimereg">Media Type Registration for image/svg+xml</h1>
+
+<p class="normativity"><strong>This appendix is normative.</strong></p>
+
+<h2 id="mime-intro">
+Introduction
+</h2>
+
+<p>
+This appendix registers a new MIME media type, "image/svg+xml" in conformance with <a href="http://www.ietf.org/rfc/rfc4288.txt">BCP 13</a> and <a href="http://www.w3.org/2002/06/registering-mediatype.html">W3CRegMedia</a>.
+</p>
+
+<h2 id="mime-registration">
+Registration of media type image/svg+xml
+</h2>
+
+<dl>
+<dt>
+Type name:</dt>
+<dd>
+<p>
+image
+</p>
+
+</dd>
+<dt>
+Subtype name:</dt>
+<dd>
+<p>
+svg+xml
+</p>
+
+</dd>
+<dt>
+Required parameters:</dt>
+<dd>
+<p>
+None.
+</p>
+
+</dd>
+<dt>
+Optional parameters:</dt>
+<dd>
+<p>
+charset
+</p>
+
+<p>
+Same as application/xml media type, as specified in [<a href="refs.html#ref-RFC3023">RFC3023</a>] or its successors.
+</p>
+
+</dd>
+<dt>
+Encoding considerations:</dt>
+<dd>
+<p>
+Same as for application/xml. See [<a href="refs.html#ref-RFC3023">RFC3023</a>], section 3.2 or its successors.
+</p>
+
+</dd>
+
+<dt>
+Security considerations:</dt>
+<dd>
+<p>
+As with other XML types and as noted in [<a href="refs.html#ref-RFC3023">RFC3023</a>] section 10, repeated expansion of maliciously constructed XML entities can be used to consume large amounts of memory, which may cause XML processors in constrained environments to fail.
+</p>
+
+
+<p>
+Several SVG elements may cause arbitrary URIs to be referenced. In this case, the security issues of [<a href="refs.html#ref-RFC3986">RFC3986</a>], section 7, should be considered.
+</p>
+
+<p>
+In common with HTML, SVG documents may reference external media such as images, audio, video, style sheets, and scripting languages. Scripting languages are executable content. In this case, the security considerations in the Media Type registrations for those formats shall apply.
+</p>
+
+<p>
+In addition, because of the extensibility features for SVG and of XML in general, it is possible that "image/svg+xml" may describe content that has security implications beyond those described here. However, if the processor follows only the normative semantics of the published specification, this content will be outside the SVG namespace and shall be ignored. Only in the case where the processor recognizes and processes the additional content, or where further processing of that content is dispatched to other processors, would security issues potentially arise. And in that case, they would fall outside the domain of this registration document.
+</p>
+
+</dd>
+<dt>
+Interoperability considerations:</dt>
+<dd>
+<p>
+The published specification describes processing semantics that dictate behavior that must be followed when dealing with, among other things, unrecognized elements and attributes, both in the SVG namespace and in other namespaces.
+</p>
+
+<p>
+Because SVG is extensible, conformant "image/svg+xml" processors must expect that content received is well-formed XML, but it cannot be guaranteed that the content is valid to a particular DTD or Schema or that the processor will recognize all of the elements and attributes in the document.
+</p>
+
+<p>
+SVG has a published Test Suite and associated implementation report showing which implementations passed which tests at the time of the report. This information is periodically updated as new tests are added or as implementations improve.
+</p>
+
+</dd>
+<dt>
+Published specification:</dt>
+<dd>
+<p>
+This media type registration is extracted from Appendix P of the <a href="http://www.w3.org/TR/SVG11">SVG 1.1 specification</a>.
+</p>
+
+</dd>
+
+<dt>
+Applications that use this media type:</dt>
+<dd>
+<p>
+SVG is used by Web browsers, often in conjunction with HTML; by mobile phones and digital cameras, as a format for interchange of graphical assets in desk top publishing, for industrial process visualization, display signage, and many other applications which require scalable static or interactive graphical capability.
+</p>
+
+</dd>
+
+<dt>
+Additional information:</dt>
+<dd><dl>
+ <dt>Magic number(s):</dt>
+ <dd></dd>
+ <dt>File extension(s):</dt>
+ <dd>svg
+ <p>Note that the extension 'svgz' is used as an alias for 'svg.gz'
+ <cite>[<a href="refs.html#ref-RFC1952">RFC1952</a>]</cite>,
+ <em>i.e.</em> octet streams of type image/svg+xml, subsequently
+ compressed with gzip.</p></dd>
+ <dt>Macintosh file type code(s):</dt>
+ <dd>"svg " (all lowercase, with a space character as the
+ fourth letter).
+ <p>Note that the Macintosh file type code 'svgz' (all lowercase) is used as an alias for GZIP
+ <cite>[<a href="refs.html#ref-RFC1952">RFC1952</a>]</cite> compressed "svg ", <em>i.e.</em>
+ octet streams of type image/svg+xml, subsequently compressed with gzip.</p></dd>
+ <dt>Macintosh Universal Type Identifier code: </dt>
+ <dd><tt>org.w3c.svg</tt> conforms to <tt>public.image</tt> and to <tt>public.xml</tt></dd>
+ <dt>Windows Clipboard Name:</dt>
+ <dd>"SVG Image"</dd>
+ <dt>Fragment Identifiers</dt>
+ <dd>For documents labeled as application/svg+xml, the fragment identifier
+ notation is either Shorthand Pointers (formerly called barenames) or
+ the SVG-specific <a href="linking.html#LinksIntoSVG">SVG Views</a> syntax;
+ both described in the <a href="linking.html#SVGFragmentIdentifiers">fragment
+ identifiers section of the SVG specification</a>.</dd>
+ </dl>
+</dd>
+
+<dt>
+Person & email address to contact for further information:</dt>
+<dd>
+<p>
+Chris Lilley, Doug Schepers (member-svg-media-type@w3.org).
+</p>
+
+</dd>
+<dt>
+Intended usage:</dt>
+<dd>
+<p>
+COMMON
+</p>
+
+</dd>
+
+<dt>
+Restrictions on usage:</dt>
+<dd>
+<p>
+None
+</p>
+
+</dd>
+<dt>
+Author:</dt>
+<dd>
+<p>
+The SVG specification is a work product of the World Wide Web Consortium's SVG Working Group.
+</p>
+
+</dd>
+<dt>
+Change controller:</dt>
+<dd>
+<p>
+The W3C has change control over this specification.
+</p>
+
+</dd>
+
+</dl>
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/minimize.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Minimizing SVG File Sizes</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Minimizing SVG File Sizes</h1>
+
+<p class="normativity"><em>This appendix is informative, not normative.</em></p>
+
+ <p>Considerable effort has been made to make SVG file sizes as
+ small as possible while still retaining the benefits of XML and
+ achieving compatibility and leverage with other W3C
+ specifications.</p>
+ <p>Here are some of the features in SVG that promote small file
+ sizes:</p>
+ <ul>
+ <li>SVG's path data definition was defined to produce a
+ compact data stream for vector graphics data: all commands
+ are one character in length; relative coordinates are
+ available; separator characters do not have to be supplied
+ when tokens can be identified implicitly; smooth curve
+ formulations are available (cubic Béziers, quadratic
+ Béziers and elliptical arcs) to prevent the need to
+ tesselate into polylines; and shortcut formulations exist for
+ common forms of cubic Bézier segments, quadratic
+ Bézier segments, and horizontal and vertical straight
+ line segments so that the minimum number of coordinates need
+ to be specified.</li>
+ <li>Text can be specified using XML character data — no need
+ to convert to outlines.</li>
+ <li>SVG contains a facility for defining symbols once and
+ referencing them multiple times using different visual
+ attributes and different sizing, positioning, clipping and
+ client-side filter effects</li>
+ <li>User agents that support <a
+ href="styling.html#StylingWithCSS">styling with CSS</a> can
+ use CSS selectors and property inheritance to define commonly
+ used sets of attributes once as named styles.</li>
+ <li>Filter effects allow for compelling visual results and
+ effects typically found only in image-authoring tools using
+ small amounts of vector and/or raster data</li>
+ </ul>
+ <p>Additionally, HTTP/1.1 allows for compressed data to be
+ passed from server to client, which can result in significant
+ file size reduction. Here are some sample compression results
+ using <a href="http://www.ietf.org/rfc/rfc1952.txt">gzip
+ compression</a> on SVG documents [<a href="refs.html#ref-RFC1952">RFC1952</a>]:</p>
+ <table class='vert' summary="gzip compression results on SVG file sizes">
+ <tr style="text-align: center">
+ <th>Uncompressed
+ SVG</th>
+ <th>With gzip
+ compression</th>
+ <th>Compression
+ ratio</th>
+ </tr>
+ <tr style="text-align: right">
+ <td>12,912</td>
+ <td>2,463</td>
+ <td>81%</td>
+ </tr>
+ <tr style="text-align: right">
+ <td>12,164</td>
+ <td>2,553</td>
+ <td>79%</td>
+ </tr>
+ <tr style="text-align: right">
+ <td>11,613</td>
+ <td>2,617</td>
+ <td>77%</td>
+ </tr>
+ <tr style="text-align: right">
+ <td>18,689</td>
+ <td>4,077</td>
+ <td>78%</td>
+ </tr>
+ <tr style="text-align: right">
+ <td>13,024</td>
+ <td>2,041</td>
+ <td>84%</td>
+ </tr>
+ </table>
+ <p>A related issue is progressive rendering. Some SVG viewers
+ will support:</p>
+ <ul>
+ <li>the ability to display the first parts of an SVG document
+ fragments as the remainder of the document is downloaded from
+ the server; thus, the user will see part of the SVG drawing
+ right away and interact with it, even if the SVG file size is
+ large.</li>
+ <li>delayed downloading of images and fonts. Just like some
+ HTML browsers, some SVG viewers will download images and
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#q1">WebFonts</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.1)
+ last, substituting a temporary image and system fonts,
+ respectively, until the given image and/or font is
+ available.</li>
+ </ul>
+ <p>Here are techniques for minimizing SVG file sizes and
+ minimizing the time before the user is able to start
+ interacting with the SVG document fragments:</p>
+ <ul>
+ <li>Construct the SVG file such that any links which the user
+ might want to click on are included at the beginning of the
+ SVG file</li>
+ <li>Use default values whenever possible rather than defining
+ all attributes and properties explicitly.</li>
+ <li>Take advantage of the <a href="paths.html#PathData">path
+ data</a> data compaction facilities: use relative
+ coordinates; use <em>h</em> and <em>v</em> for horizontal and
+ vertical lines; use <em>s</em> or <em>t</em> for cubic and
+ quadratic Bézier segments whenever possible; eliminate
+ extraneous white space and separators.</li>
+ <li>Utilize symbols if the same graphic appears multiple
+ times in the document</li>
+ <li>For user agents that support <a
+ href="styling.html#StylingWithCSS">styling with CSS</a>,
+ utilize CSS property inheritance and selectors to consolidate
+ commonly used properties into named styles or to assign the
+ properties to a parent <a>'g'</a> element.</li>
+ <li>Utilize filter effects to help construct graphics via
+ client-side graphics operations.</li>
+ </ul>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/painting.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,2209 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Painting: Filling, Stroking and Marker Symbols</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Painting: Filling, Stroking and Marker Symbols</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p><a>'path'</a> elements, <a>'text'</a> elements and <a href="shapes.html">basic shapes</a> can be
+<strong>filled</strong> (which means painting the interior of
+the object) and <strong>stroked</strong> (which means painting
+along the outline of the object). Filling and stroking both can
+be thought of in more general terms as
+<strong>painting</strong> operations.</p>
+
+<p>Certain elements (i.e., <a>'path'</a>, <a>'polyline'</a>, <a>'polygon'</a>
+and <a>'line'</a> elements) can also have
+<a href="painting.html#Markers">marker symbols</a> drawn at their vertices.</p>
+
+<p>With SVG, you can paint (i.e., fill or stroke) with:</p>
+
+<ul>
+ <li>a single color</li>
+ <li>a gradient (linear or radial)</li>
+ <li>a pattern (vector or image, possibly tiled)</li>
+ <li>custom paints available via <a href="extend.html">extensibility</a></li>
+</ul>
+
+<p>SVG uses the general notion of a <strong>paint server</strong>. Paint
+servers are specified using a <a href="linking.html#IRIReference">IRI reference</a>
+on a <a>'fill'</a> or <a>'stroke'</a> property.
+<a href="pservers.html">Gradients and patterns</a> are just specific types of
+paint servers.</p>
+
+<h2 id="SpecifyingPaint">Specifying paint</h2>
+
+<p>Properties <a>'fill'</a> and <a>'stroke'</a> take on a value of type
+<span class="prop-value"><paint></span>, which is specified as follows:</p>
+
+ <table summary="paint specification" cellspacing="0"
+ cellpadding="0">
+ <tr valign="baseline">
+ <td><span
+ class="prop-name"><paint></span>: </td>
+ <td><span class="prop-value">none |<br />
+ currentColor |<br />
+ <a href="types.html#DataTypeColor"><color></a>
+ [<a href="types.html#DataTypeICCColor"><icccolor></a>] |<br />
+ <a href="types.html#DataTypeFuncIRI"><funciri></a> [ none | currentColor | <a href="types.html#DataTypeColor"><color></a>
+ [<a href="types.html#DataTypeICCColor"><icccolor></a>] ] |<br />
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></span></td>
+ </tr>
+ </table>
+ <dl>
+ <dt><strong>none</strong></dt>
+ <dd>Indicates that no paint is applied.</dd>
+ <dt><strong>currentColor</strong></dt>
+ <dd>Indicates that painting is done using the current animated value of the color specified
+ by the <a>'color'</a> property. This
+ mechanism is provided to facilitate sharing of color
+ attributes between parent grammars such as other (non-SVG)
+ XML. This mechanism allows you to define a style in your HTML
+ which sets the <span class='prop-name'>'color'</span> property and then pass that style to
+ the SVG user agent so that your SVG text will draw in the
+ same color.</dd>
+ <dt><strong><color> [<icccolor>]</strong></dt>
+ <dd><a href="types.html#DataTypeColor"><color></a> is
+ the explicit color (in the sRGB color space [<a href='refs.html#ref-SRGB'>SRGB</a>])
+ to be used to paint the current object. SVG supports all of
+ the syntax alternatives for <color>
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color">defined in CSS2</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 4.3.6), with the
+ exception that SVG contains an expanded list of <a
+ href="types.html#ColorKeywords">recognized color keywords
+ names</a>. If an optional ICC color specification [<a href='refs.html#ref-ICC42'>ICC42</a>] is
+ provided, then the user agent searches the color profile
+ description database for a <a
+ href="color.html#ColorProfileDescriptions">color profile
+ description</a> entry whose name descriptor matches
+ the <name> part of the <a href="types.html#DataTypeICCColor"><icccolor></a>
+ and uses the last matching entry that is found.
+ (If no match is found, then the ICC color specification is
+ ignored.) The comma and/or whitespace separated list
+ of <a href="types.html#DataTypeNumber"><number></a>s
+ is a set of ICC-profile-specific color values.
+ (In most cases, the <a href="types.html#DataTypeNumber"><number></a>s will
+ be in the range 0 to 1.) On platforms which support ICC-based
+ color management, the <a href="types.html#DataTypeICCColor"><icccolor></a> gets
+ precedence over the <a href="types.html#DataTypeColor"><color></a> (which is in the sRGB color
+ space). Note that color interpolation occurs in an RGB color
+ space even if an ICC-based color specification is provided
+ (see <a>'color-interpolation'</a> and <a>'color-interpolation-filters'</a>).
+ For more on ICC-based colors, refer to <a
+ href="color.html#ColorProfileDescriptions">Color profile
+ descriptions</a>.</dd>
+ <dt><strong><a href="types.html#DataTypeFuncIRI"><funciri></a><br />
+ [ none |<br />
+ currentColor |<br />
+ <color>
+ [<icccolor>] ]</strong></dt>
+ <dd>The <a href="types.html#DataTypeFuncIRI"><funciri></a> is used to identify a <a
+ href="pservers.html">paint server</a> such as a gradient, a
+ pattern or a custom paint defined by an extension (see <a
+ href="extend.html">Extensibility</a>). The <funciri>
+ points to the paint server (e.g., a <a
+ href="pservers.html#Gradients">gradient</a> or <a
+ href="pservers.html#Patterns">pattern</a>) to be
+ used to paint the current object. If the <a
+ href="linking.html#IRIReference">IRI reference</a>
+ is not valid (e.g., it points to an object that doesn't exist
+ or the object is not a valid paint server), then the paint
+ method following the <funciri> (i.e., <span class='prop-value'>none |
+ currentColor | <color> [<icccolor>]</span>
+ is used if provided; otherwise, the document is in error (see
+ <a href="implnote.html#ErrorProcessing">Error
+ processing</a>).</dd>
+ </dl>
+
+<h2 id="FillProperties">Fill Properties</h2>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FillProperty"><span class="propdef-title prop-name">'fill'</span></dt>
+ <dd>
+ <table summary="fill property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><paint> (See <a
+ href="painting.html#SpecifyingPaint">Specifying
+ paint</a>)</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>black</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>The <a>'fill'</a> property paints the interior of the given graphical
+element. The area to be painted consists of any areas inside the outline
+of the shape. To determine the inside of the shape, all subpaths are
+considered, and the interior is determined according to the rules
+associated with the current value of the <a>'fill-rule'</a> property.
+The zero-width geometric outline of a shape is included in the area to
+be painted.</p>
+
+<p>The fill operation fills open subpaths by performing the fill
+operation as if an additional "closepath" command were added to the
+path to connect the last point of the subpath with the first point of
+the subpath. Thus, fill operations apply to both open subpaths within
+<a>'path'</a> elements (i.e., subpaths without a closepath command) and
+<a>'polyline'</a> elements.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FillRuleProperty"><span class="propdef-title prop-name">'fill-rule'</span></dt>
+ <dd>
+ <table summary="fill-rule property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>nonzero | evenodd | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>nonzero</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>The <a>'fill-rule'</a> property indicates the algorithm which is to
+be used to determine what parts of the canvas are included inside the
+shape. For a simple, non-intersecting path, it is intuitively clear
+what region lies "inside"; however, for a more complex path, such as a
+path that intersects itself or where one subpath encloses another, the
+interpretation of "inside" is not so obvious.</p>
+
+<p>The <a>'fill-rule'</a> property provides two options for how the
+inside of a shape is determined:</p>
+
+<dl>
+ <dt><span class='prop-value'>nonzero</span></dt>
+ <dd>
+ This rule determines the "insideness" of a point on the
+ canvas by drawing a ray from that point to infinity in any
+ direction and then examining the places where a segment of
+ the shape crosses the ray. Starting with a count of zero,
+ add one each time a path segment crosses the ray from left
+ to right and subtract one each time a path segment crosses
+ the ray from right to left. After counting the crossings,
+ if the result is zero then the point is <em>outside</em>
+ the path. Otherwise, it is <em>inside</em>. The following
+ drawing illustrates the <span class='prop-value'>nonzero</span> rule:
+ <p><img alt="Image showing nonzero fill rule"
+ src="images/painting/fillrule-nonzero.png" width="426"
+ height="142" /></p>
+ <p class="view-as-svg"><a
+ href="images/painting/fillrule-nonzero.svg">View this
+ example as SVG (SVG-enabled browsers only)</a></p>
+ </dd>
+ <dt><span class='prop-value'>evenodd</span></dt>
+ <dd>
+ This rule determines the "insideness" of a point on the
+ canvas by drawing a ray from that point to infinity in any
+ direction and counting the number of path segments from the
+ given shape that the ray crosses. If this number is odd,
+ the point is inside; if even, the point is outside. The
+ following drawing illustrates the <span class='prop-value'>evenodd</span>
+ rule:
+ <p><img alt="Image showing evenodd fill rule"
+ src="images/painting/fillrule-evenodd.png" width="426"
+ height="142" /></p>
+ <p class="view-as-svg"><a
+ href="images/painting/fillrule-evenodd.svg">View this
+ example as SVG (SVG-enabled browsers only)</a></p>
+ </dd>
+</dl>
+
+<p>(Note: the above explanations do not specify what to do if a path
+segment coincides with or is tangent to the ray. Since any ray will do,
+one may simply choose a different ray that does not have such problem
+intersections.)</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FillOpacityProperty"><span class="propdef-title prop-name">'fill-opacity'</span></dt>
+ <dd>
+ <table summary="fill-opacity property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>1</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p><a>'fill-opacity'</a> specifies the
+opacity of the painting operation used to paint the interior
+the current object. (See <a
+href="render.html#PaintingShapesAndText">Painting shapes and
+text</a>.)</p>
+
+<dl>
+ <dt><span class='prop-value'><opacity-value></span></dt>
+ <dd>The opacity of the painting operation used to fill the current
+ object, as a <a><number></a>. Any values outside the range 0.0 (fully transparent)
+ to 1.0 (fully opaque) will be clamped to this range. (See
+ <a href="implnote.html#RangeClamping">Clamping values which are
+ restricted to a particular range</a>.)</dd>
+</dl>
+
+<p>Related properties: <a>'stroke-opacity'</a> and <a>'opacity'</a>.</p>
+
+<h2 id="StrokeProperties">Stroke Properties</h2>
+
+<p>The following are the properties which affect how an element is stroked.</p>
+
+<p>In all cases, all stroking properties which are affected by
+directionality, such as those having to do with dash patterns, must be
+rendered such that the stroke operation starts at the same point at
+which the graphics element starts. In particular, for <a>'path'</a>
+elements, the start of the path is the first point of the initial
+"moveto" command.</p>
+
+<p>For stroking properties such as dash patterns whose computations
+are dependent on progress along the outline of the graphics element,
+distance calculations are required to utilize the SVG user agent's
+standard <a href="paths.html#DistanceAlongAPath">Distance along a path</a>
+algorithms.</p>
+
+<p>When stroking is performed using a complex paint server, such as a
+gradient or a pattern, the stroke operation must be identical to the
+result that would have occurred if the geometric shape defined by the
+geometry of the current graphics element and its associated stroking
+properties were converted to an equivalent <a>'path'</a> element and
+then filled using the given paint server.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StrokeProperty"><span class="propdef-title prop-name">'stroke'</span></dt>
+ <dd>
+ <table summary="stroke property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><paint> (See <a
+ href="painting.html#SpecifyingPaint">Specifying
+ paint</a>)</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>none</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>The <a>'stroke'</a> property paints along the outline of the given
+graphical element.</p>
+
+<p>A subpath (see <a href="paths.html">Paths</a>) consisting of
+a single <a href="paths.html#PathDataMovetoCommands">moveto</a>
+shall not be stroked. Any zero length subpath shall not be
+stroked if the <a>'stroke-linecap'</a> property has a value of
+<span class="prop-value">butt</span> but shall be stroked if the
+<a>'stroke-linecap'</a> property has a value of
+<span class="prop-value">round</span> or <span class="prop-value">square</span>,
+producing respectively a circle or a square centered at the given point.
+Examples of zero length subpaths include
+<span class="attr-value">'M 10,10 L 10,10'</span>,
+<span class="attr-value">'M 20,20 h 0'</span>,
+<span class="attr-value">'M 30,30 z'</span> and
+<span class="attr-value">'M 40,40 c 0,0 0,0 0,0'</span>.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StrokeWidthProperty"><span class="propdef-title prop-name">'stroke-width'</span></dt>
+ <dd>
+ <table summary="stroke-width property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><a><percentage></a> | <a><length></a> |
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>1</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>Yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>This property specifies the width of the stroke on the current object.
+If a <a><percentage></a> is used, the value represents a percentage of
+the current viewport. (See <a href="coords.html#Units">Units</a>.)</p>
+<p>A zero value causes no stroke to be painted. A negative value
+is an error (see <a href="implnote.html#ErrorProcessing">Error processing</a>).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StrokeLinecapProperty"><span class="propdef-title prop-name">'stroke-linecap'</span></dt>
+ <dd>
+ <table summary="stroke-linecap property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>butt | round | square | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>butt</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p><a>'stroke-linecap'</a> specifies the shape to be used at the end of
+open subpaths when they are stroked. For further details see the <a href="implnote.html#PathElementImplementationNotes">path implementation notes</a>.</p>
+
+<dl>
+ <dt><span class='prop-value'>butt</span></dt>
+ <dd>See drawing below.</dd>
+ <dt><span class='prop-value'>round</span></dt>
+ <dd>See drawing below.</dd>
+ <dt><span class='prop-value'>square</span></dt>
+ <dd>See drawing below.</dd>
+</dl>
+
+<p><img alt="Image showing stroke-linecap alternatives" src="images/painting/linecap.png" width="454" height="76" /></p>
+<p class="view-as-svg"><a href="images/painting/linecap.svg">View this example as SVG (SVG- and CSS-enabled browsers only)</a></p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StrokeLinejoinProperty"><span class="propdef-title prop-name">'stroke-linejoin'</span></dt>
+ <dd>
+ <table summary="stroke-linejoin property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>miter | round | bevel | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>miter</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p><a>'stroke-linejoin'</a> specifies the shape to be used at the
+corners of paths or basic shapes when they are stroked. For further details see the <a href="implnote.html#PathElementImplementationNotes">path implementation notes</a>.</p>
+
+<dl>
+ <dt><span class='prop-value'>miter</span></dt>
+ <dd>See drawing below.</dd>
+ <dt><span class='prop-value'>round</span></dt>
+ <dd>See drawing below.</dd>
+ <dt><span class='prop-value'>bevel</span></dt>
+ <dd>See drawing below.</dd>
+</dl>
+
+<p><img alt="Image showing stroke-linejoin alternatives" src="images/painting/linejoin.png" width="454" height="133" /></p>
+<p class="view-as-svg"><a href="images/painting/linejoin.svg">View this example as SVG (SVG- and CSS-enabled browsers only)</a></p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StrokeMiterlimitProperty"><span class="propdef-title prop-name">'stroke-miterlimit'</span></dt>
+ <dd>
+ <table summary="stroke-miterlimit property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><miterlimit> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>4</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>When two line segments meet at a sharp angle and <span
+class='prop-value'>miter</span> joins have been specified for
+<a>'stroke-linejoin'</a>, it is possible for the miter to extend
+far beyond the thickness of the line stroking the path. The
+<a>'stroke-miterlimit'</a> imposes a limit on the ratio of the miter
+length to the <a>'stroke-width'</a>. When the limit is exceeded, the
+join is converted from a miter to a bevel.</p>
+
+<dl>
+ <dt><span class='prop-value'><miterlimit></span></dt>
+ <dd>The limit on the ratio of the miter length to the <a>'stroke-width'</a>.
+ The value of <span class='prop-value'><miterlimit></span> must be a
+ <a><number></a> greater than or equal to 1. Any other value is an error (see
+ <a href="implnote.html#ErrorProcessing">Error processing</a>).</dd>
+</dl>
+
+<p>The ratio of miter length (distance between the outer tip and
+the inner corner of the miter) to <a>'stroke-width'</a> is directly
+related to the angle (theta) between the segments in user space by the
+formula:</p>
+
+<pre>
+miterLength / stroke-width = 1 / sin ( theta / 2 )
+</pre>
+
+<p>For example, a miter limit of 1.414 converts miters to bevels for
+theta less than 90 degrees, a limit of 4.0 converts them for theta less
+than approximately 29 degrees, and a limit of 10.0 converts them for
+theta less than approximately 11.5 degrees.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StrokeDasharrayProperty"><span class="propdef-title prop-name">'stroke-dasharray'</span></dt>
+ <dd>
+ <table summary="stroke-dasharray property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>none | <dasharray> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>none</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>yes (see below)</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes (<a
+ href="animate.html#AdditionAttributes">non-additive</a>)</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p><span class="prop-name">'stroke-dasharray'</span> controls
+the pattern of dashes and gaps used to stroke paths.
+<span class='prop-value'><dasharray></span> contains a
+list of comma and/or white space separated
+<a href="types.html#DataTypeLength"><length></a>s and
+<a><percentage></a>s that specify the
+lengths of alternating dashes and gaps. If an odd number of values
+is provided, then the list of values is repeated to yield an even
+number of values. Thus, <span class="prop-value">stroke-dasharray: 5,3,2</span>
+is equivalent to <span class="prop-value">stroke-dasharray: 5,3,2,5,3,2</span>.</p>
+
+<dl>
+ <dt><span class='prop-value'>none</span></dt>
+ <dd>Indicates that no dashing is used. If stroked, the line is drawn
+ solid.</dd>
+
+ <dt><span class='prop-value'><dasharray></span></dt>
+ <dd>
+ <p>A list of comma and/or white space separated
+ <a href="types.html#DataTypeLength"><length></a>s
+ (which can have a <a href="coords.html#Units">unit identifier</a>)
+ and <a><percentage></a>s. A percentage represents a distance as a
+ percentage of the current viewport (see <a href="coords.html#Units">Units</a>).
+ A negative value is an error (see
+ <a href="implnote.html#ErrorProcessing">Error processing</a>). If the
+ sum of the values
+ is zero, then the stroke is rendered as if a value of
+ <span class='prop-value'>none</span> were specified. For further details see the <a href="implnote.html#PathElementImplementationNotes">path implementation notes</a>.</p>
+
+ <p>The grammar for <dasharray> is as follows:</p>
+
+ <pre class='grammar'><span id='DashArray'>dasharray</span> ::= (<a href='types.html#Length'>length</a> | <a href='types.html#Percentage'>percentage</a>) (<a href='types.html#CommaWSP'>comma-wsp</a> <a href='#DashArray'>dasharray</a>)?</pre>
+ </dd>
+</dl>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StrokeDashoffsetProperty"><span class="propdef-title prop-name">'stroke-dashoffset'</span></dt>
+ <dd>
+ <table summary="stroke-dashoffset property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><a><percentage></a> | <a><length></a> |
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>0</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>see prose</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p><a>'stroke-dashoffset'</a> specifies the distance into the dash
+pattern to start the dash.</p>
+
+<p>If a <a><percentage></a> is used, the value represents a
+percentage of the current viewport (see <a href="coords.html#Units">Units</a>).</p>
+
+<p>Values can be negative.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StrokeOpacityProperty"><span class="propdef-title prop-name">'stroke-opacity'</span></dt>
+ <dd>
+ <table summary="stroke-opacity property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>1</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p><a>'stroke-opacity'</a> specifies the opacity of the
+painting operation used to stroke the current object. (See
+<a href="render.html#PaintingShapesAndText">Painting shapes and text</a>.)</p>
+
+<dl>
+ <dt><span class='prop-value'><opacity-value></span></dt>
+ <dd>The opacity of the painting operation used to stroke the current
+ object, as a <a><number></a>. Any values outside the range 0.0 (fully transparent)
+ to 1.0 (fully opaque) will be clamped to this range. (See
+ <a href="implnote.html#RangeClamping">Clamping values which are
+ restricted to a particular range</a>.)</dd>
+</dl>
+
+<p>Related properties: <a>'fill-opacity'</a> and <a>'opacity'</a>.</p>
+
+<h2 id="VisibilityControl">Controlling visibility</h2>
+
+<p>SVG uses two properties, <a>'display'</a> and <a>'visibility'</a>, to
+control the visibility of graphical elements or (in the case of the
+<a>'display'</a> property) container elements.</p>
+
+<p>The differences between the two properties are as follows:</p>
+
+<ul>
+ <li>When applied to a container element, setting <a>'display'</a>
+ to <span class="prop-value">none</span> causes the container and
+ all of its children to be invisible; thus, it acts on groups of
+ elements as a group. <a>'visibility'</a>, however, only applies
+ to individual graphics elements. Setting <a>'visibility'</a>
+ to <span class="prop-value">hidden</span> on a <a>'g'</a>
+ will make its children invisible as long as the children do
+ not specify their own <a>'visibility'</a> properties as <span
+ class="prop-value">visible</span>. Note that <a>'visibility'</a> is
+ <em>not</em> an inheritable property.</li>
+
+ <li>When the <a>'display'</a> property is set to <span
+ class="prop-value">none</span>, then the given element does not
+ become part of the rendering tree. With <a>'visibility'</a> set
+ to <span class="prop-value">hidden</span>, however, processing
+ occurs as if the element were part of the rendering tree and still
+ taking up space, but not actually rendered onto the canvas. This
+ distinction has implications for the <a>'tspan'</a>, <a>'tref'</a> and
+ <a>'altGlyph'</a> elements, <a href="interact.html#UIEvents">event processing</a>,
+ for <a href="coords.html#ObjectBoundingBox">bounding box calculations</a>
+ and for calculation of <a href="masking.html#ClippingPaths">clipping paths</a>.
+ If <a>'display'</a> is set to <span class="prop-value">none</span> on a
+ <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> element, then the
+ text string is ignored for the purposes of text layout; however, if
+ <a>'visibility'</a> is set to <span class="prop-value">hidden</span>,
+ the text string is used for text layout (i.e., it takes up space)
+ even though it is not rendered on the canvas. Regarding events, if
+ <a>'display'</a> is set to <span class="prop-value">none</span>,
+ the element receives no events; however, if <a>'visibility'</a>
+ is set to <span class="prop-value">hidden</span>, the element
+ might still receive events, depending on the value of property
+ <a>'pointer-events'</a>. The geometry of a graphics element with
+ <a>'display'</a> set to <span class="prop-value">none</span> is
+ not included in <a href="coords.html#ObjectBoundingBox">bounding box</a>
+ and <a href="masking.html#ClippingPaths">clipping paths</a>
+ calculations; however, even if <a>'visibility'</a> is to
+ <span class="prop-value">hidden</span>, the geometry of the graphics element
+ still contributes to bounding box and clipping path calculations.</li>
+</ul>
+
+ <div class="propdef">
+ <dl>
+ <dt id="DisplayProperty"><span class="propdef-title prop-name">'display'</span></dt>
+ <dd>
+ <table summary="display property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>inline | block | list-item |<br />
+ run-in | compact | marker |<br />
+ table | inline-table | table-row-group |
+ table-header-group |<br />
+ table-footer-group | table-row | table-column-group
+ | table-column |<br />
+ table-cell | table-caption | none | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>inline</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'svg'</a>, <a>'g'</a>, <a>'switch'</a>, <a>'a'</a>,
+ <a>'foreignObject'</a>, graphics elements (including the
+ <a>'text'</a> element) and text sub-elements (i.e.,
+ <a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>,
+ <a>'textPath'</a>)</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>all</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>A value of <span class="prop-value">display: none</span> indicates
+that the given element and its children shall not be rendered directly
+(i.e., those elements are not present in the rendering tree). Any
+value other than <span class="prop-value">none</span> or
+<span class="prop-value">inherit</span> indicates that the given element
+shall be rendered by the SVG user agent.</p>
+
+<p>The <a>'display'</a> property only affects the direct rendering
+of a given element, whereas it does not prevent elements from
+being referenced by other elements. For example, setting
+<span class="prop-value">display: none</span> on a <a>'path'</a> element
+will prevent that element from getting rendered directly onto the
+canvas, but the <a>'path'</a> element can still be referenced by a
+<a>'textPath'</a> element; furthermore, its geometry will be used
+in text-on-a-path processing even if the <a>'path'</a> has
+<span class="prop-value">display: none</span>.</p>
+
+<p>The <a>'display'</a> property affects direct rendering into
+offscreen canvases also, such as occurs with the implementation model
+for <a href="masking.html#Masking">masks</a>. Thus, setting
+<span class="prop-value">display: none</span> on a child of a <a>'mask element'</a>
+will prevent the given child element from being rendered as part of the
+mask. Similarly, setting <span class="prop-value">display: none</span>
+on a child of a <a>'clipPath element'</a> element will prevent the given child
+element from contributing to the clipping path.</p>
+
+<p>Elements with <span class="prop-value">display: none</span> do not
+take up space in text layout operations, do not receive events, and
+do not contribute to
+<a href="coords.html#ObjectBoundingBox">bounding box</a> and
+<a href="masking.html#ClippingPaths">clipping paths</a> calculations.</p>
+
+<p>Except for any additional information provided in this specification, the
+normative definition of the <a>'display'</a> property is
+<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-display">the CSS2 definition</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], section 9.2.6).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="VisibilityProperty"><span class="propdef-title prop-name">'visibility'</span></dt>
+ <dd>
+ <table summary="visibility property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>visible | hidden | collapse | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>visible</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td>graphics elements (including the <a>'text'</a> element) and
+ text sub-elements (i.e., <a>'tspan'</a>, <a>'tref'</a>,
+ <a>'altGlyph'</a>, <a>'textPath'</a> and <a>'a'</a>)</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class='prop-value'>visible</span></dt>
+ <dd>The current graphics element is visible.</dd>
+ <dt><span class='prop-value'>hidden</span> or <span class='prop-value'>collapse</span></dt>
+ <dd>The current graphics element is invisible (i.e., nothing is painted on
+ the canvas).</dd>
+</dl>
+
+<p>Note that if the <a>'visibility'</a> property is set to
+<span class="prop-value">hidden</span> on a <a>'tspan'</a>, <a>'tref'</a> or
+<a>'altGlyph'</a> element, then the text is invisible but still takes up
+space in text layout calculations.</p>
+
+<p>Depending on the value of property <a>'pointer-events'</a>, graphics
+elements which have their <a>'visibility'</a> property set to
+<span class="prop-value">hidden</span> still might receive events.</p>
+
+<p>Except for any additional information provided in this specification, the
+normative definition of the <a>'visibility'</a> property is
+<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visufx.html#propdef-visibility">the CSS2 definition</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], section 11.2).</p>
+
+
+<h2 id="Markers">Markers</h2>
+
+<edit:with element='marker'>
+
+<h3 id="MarkersIntroduction">Introduction</h3>
+
+<p>A marker is a symbol which is attached to one or more vertices of
+<a>'path'</a>, <a>'line'</a>, <a>'polyline'</a> and <a>'polygon'</a>
+elements. Typically, markers are used to make arrowheads or polymarkers.
+Arrowheads can be defined by attaching a marker to the start or end
+vertices of <a>'path'</a>, <a>'line'</a> or <a>'polyline'</a> elements.
+Polymarkers can be defined by attaching a marker to all vertices of a
+<a>'path'</a>, <a>'line'</a>, <a>'polyline'</a> or <a>'polygon'</a>
+element.</p>
+
+<p>The graphics for a marker are defined by a <a>'marker element'</a> element.
+To indicate that a particular <a>'marker element'</a> element should be
+rendered at the vertices of a particular <a>'path'</a>, <a>'line'</a>,
+<a>'polyline'</a> or <a>'polygon'</a> element, set one or more marker
+properties (<a>'marker property'</a>, <a>'marker-start'</a>, <a>'marker-mid'</a>
+or <a>'marker-end'</a>) to reference the given <a>'marker element'</a>
+element.</p>
+
+<p><span class="example-ref">Example Marker</span> draws a triangular marker
+symbol as an arrowhead at the end of a path.</p>
+
+<edit:example href='images/painting/marker.svg' name='Marker' description="Triangular marker at the end of a path" image='yes' link='yes'/>
+
+<p>Markers can be animated. The animated effects will show on all current uses
+of the markers within the document.</p>
+
+<h3 id="MarkerElement">The <span class="element-name">'marker'</span> element</h3>
+
+<p>The <a>'marker element'</a> element defines the graphics that is to
+be used for drawing arrowheads or polymarkers on a given <a>'path'</a>,
+<a>'line'</a>, <a>'polyline'</a> or <a>'polygon'</a> element.</p>
+
+<edit:elementsummary name='marker'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="MarkerUnitsAttribute"><span
+ class="adef">markerUnits</span> = "<span
+ class="attr-value">strokeWidth |
+ userSpaceOnUse</span>"</dt>
+ <dd>Defines the coordinate system for attributes
+ <a>'markerWidth'</a>, <a>'markerHeight'</a> and the
+ contents of the <a>'marker element'</a>.<br />
+ If <span class="attr-value">markerUnits="strokeWidth"</span>,
+ <a>'markerWidth'</a>, <a>'markerHeight'</a> and the contents
+ of the <a>'marker element'</a> represent values in a coordinate system
+ which has a single unit equal the size in user units of the
+ current stroke width (see the <a>'stroke-width'</a> property) in
+ place for the graphic object referencing the marker.<br />
+ If <span class="attr-value">markerUnits="userSpaceOnUse"</span>,
+ <a>'markerWidth'</a>, <a>'markerHeight'</a> and the contents
+ of the <a>'marker element'</a> represent values in the current
+ user coordinate system in place for the graphic object
+ referencing the marker (i.e., the user coordinate system for
+ the element referencing the <a>'marker element'</a> element via a
+ <a>'marker property'</a>, <a>'marker-start'</a>, <a>'marker-mid'</a>
+ or <a>'marker-end'</a> property).<br />
+ If attribute <a>'markerUnits'</a> is not specified, then the effect
+ is as if a value of <span class="attr-value">'strokeWidth'</span>
+ were specified.<br />
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></dd>
+ <dt id="MarkerElementRefXAttribute"><span
+ class="adef">refX</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of the reference point which is
+ to be aligned exactly at the marker position. The
+ coordinate is defined in the coordinate system after
+ application of the <a>'viewBox'</a> and <a>'preserveAspectRatio'</a>
+ attributes.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="MarkerElementRefYAttribute"><span
+ class="adef">refY</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of the reference point which is
+ to be aligned exactly at the marker position. The
+ coordinate is defined in the coordinate system after
+ application of the <a>'viewBox'</a> and <a>'preserveAspectRatio'</a>
+ attributes.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="MarkerWidthAttribute"><span
+ class="adef">markerWidth</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>Represents the width of the viewport into which the
+ marker is to be fitted when it is rendered.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "3" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="MarkerHeightAttribute"><span
+ class="adef">markerHeight</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>Represents the height of the viewport into which the
+ marker is to be fitted when it is rendered.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "3" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="OrientAttribute"><span class="adef">orient</span> = "<span
+ class="attr-value">auto | <a
+ href="types.html#DataTypeAngle"><angle></a></span>"</dt>
+ <dd>
+ Indicates how the marker is rotated.<br />
+ <br />
+ A value of <span class='attr-value'>'auto'</span> indicates that the marker is
+ oriented such that its positive x-axis is pointing as
+ follows:
+ <ol type="a">
+ <li>
+ If there is a path segment coming into the
+ vertex and another path segment going out of the vertex,
+ the marker's positive x-axis should point toward the
+ angle bisector for the angle at the given vertex, where
+ that angle has one side consisting of tangent vector for
+ the path segment going into the vertex and the other side
+ the tangent vector for the path segment going out of the
+ vertex. Note:
+ <ul>
+ <li>If the tangent vectors are the same, the angle bisector equals the two tangent vectors.</li>
+ <li>If an incoming and an outgoing vertex produce a zero vector the direction of marker is undefined.</li>
+ </ul>
+ </li>
+ <li>
+ If there is only a path segment going into the vertex (e.g.,
+ the last vertex on an open path), the marker's positive
+ x-axis should point in the same direction as the tangent
+ vector for the path segment going into the vertex.
+ </li>
+ <li>
+ If there is only a path segment going out of the vertex
+ (e.g., the first vertex on an open path), the marker's
+ positive x-axis should point in the same direction as the
+ tangent vector for the path segment going out of the
+ vertex. (Refer to <a href="implnote.html#PathElementImplementationNotes"><span class='element-name'>'path'</span>
+ element implementation notes</a> for a more thorough
+ discussion of the directionality of path segments.)
+ </li>
+ </ol>
+ <br />
+ In all cases for closed subpaths (e.g., subpaths which
+ end with a <a
+ href="paths.html#PathDataClosePathCommand">'closepath'</a>
+ command), the orientation of the marker corresponding to
+ the initial point of the subpath is calculated assuming
+ that:
+ <ul>
+ <li>the path segment going into the vertex is the path
+ segment corresponding to the closepath</li>
+ <li>the path segment coming out of the vertex is the
+ first path segment in the subpath</li>
+ </ul>
+ <br />
+ When a <a
+ href="paths.html#PathDataClosePathCommand">'closepath'</a>
+ command is followed by a command other than a <a
+ href="paths.html#PathDataMovetoCommands">'moveto'</a>
+ command, then the orientation of the marker corresponding
+ to the <a
+ href="paths.html#PathDataClosePathCommand">'closepath'</a>
+ command is calculated assuming that:
+ <ul>
+ <li>the path segment going into the vertex is the path
+ segment corresponding to the closepath</li>
+ <li>the path segment coming out of the vertex is the
+ first path segment of the subsequent subpath</li>
+ </ul>
+ <br />
+ A <a><angle></a> value represents a
+ particular orientation in the user space of the graphic
+ object referencing the marker. For example, if a value of
+ "0" is given, then the marker will be drawn such that its
+ x-axis will align with the x-axis of the user space of
+ the graphic object referencing the marker. If the
+ attribute is not specified, the effect is as if a value
+ of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: yes
+ (non-additive).</span>
+ </dd>
+ </dl>
+ </div>
+
+<p>Markers are drawn such that their reference point (i.e.,
+attributes <a>'refX'</a> and <a>'refY'</a>) is positioned at the
+given vertex. In other words, a translation transformation is
+constructed by the user agent to achieve the effect of having point
+(<a>'refX'</a> and <a>'refY'</a>) within the marker content's coordinate
+system (after any transformations due to the <a>'viewBox'</a> and
+<a>'preserveAspectRatio'</a> attributes) align exactly with the given
+vertex.</p>
+
+<p>SVG's <a href="styling.html#UAStyleSheet">user agent style sheet</a> sets
+the <a>'overflow'</a> property for <a>'marker element'</a> elements to
+<span class="prop-value">hidden</span>, which causes a rectangular clipping
+path to be created at the bounds of the marker tile. Unless the
+<a>'overflow'</a> property is overridden, any graphics within the marker which
+goes outside of the marker rectangle will be clipped.</p>
+
+<p>The contents of the <a>'marker element'</a> are relative to a new
+coordinate system. Attribute <a>'markerUnits'</a> determines an initial
+scale factor for transforming the graphics in the marker into the user
+coordinate system for the referencing element. An additional set of
+transformations might occur if there is a <a>'viewBox'</a> attribute, in
+which case the coordinate system for the contents of the <a>'marker element'</a>
+will be transformed due to the processing of attributes <a>'viewBox'</a>
+and <a>'preserveAspectRatio'</a>. If there is no <a>'viewBox'</a>
+attribute, then the assumed default value for the the <a>'viewBox'</a>
+attribute has the origin of the viewBox coincident with the origin
+of the viewport and the width/height of the viewBox the same as the
+width/height of the viewport.</p>
+
+<p><a href="styling.html#SVGStylingProperties">Properties</a> inherit into the
+<a>'marker element'</a> element from its ancestors; properties do <em>not</em>
+inherit from the element referencing the <a>'marker element'</a> element.</p>
+
+<p><a>'marker element'</a> elements are never rendered directly;
+their only usage is as something that can be referenced using the
+<a>'marker property'</a>, <a>'marker-start'</a>, <a>'marker-end'</a> and
+<a>'marker-mid'</a> properties. The <a>'display'</a> property does not
+apply to the <a>'marker element'</a> element; thus, <a>'marker element'</a> elements
+are not directly rendered even if the <a>'display'</a> property is
+set to a value other than <span class="prop-value">none</span>, and
+<a>'marker element'</a> elements are available for referencing even when the
+<a>'display'</a> property on the <a>'marker element'</a> element or any of its
+ancestors is set to <span class="prop-value">none</span>.</p>
+
+<p><a href="script.html#EventAttributes">Event attributes</a> and
+<a href="svgdom.html#EventListeners">event listeners</a> attached
+to the contents of a <a>'marker element'</a> element are not processed;
+only the rendering aspects of <a>'marker element'</a> elements are
+processed.</p>
+
+<h3 id="MarkerProperties">Marker properties</h3>
+
+<p><a>'marker-start'</a> defines the arrowhead or polymarker that shall
+be drawn at the first vertex of the given <a>'path'</a> element or
+<a href="shapes.html">basic shape</a>. <a>'marker-end'</a> defines
+the arrowhead or polymarker that shall be drawn at the final vertex.
+<a>'marker-mid'</a> defines the arrowhead or polymarker that shall be
+drawn at every other vertex (i.e., every vertex except the first and
+last). Note that for a <a>'path'</a> element which ends with a closed
+sub-path, the last vertex is the same as the initial vertex on the given
+sub-path. In this case, if <a>'marker-end'</a> does not equal
+<span class="prop-value">none</span>, then it is possible that two markers
+will be rendered on the given vertex. One way to prevent this is to set
+<a>'marker-end'</a> to <span class="prop-value">none</span>. (Note that
+the same comment applies to <a>'polygon'</a> elements.)</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="MarkerStartProperty"><span class='propdef-title prop-name'>'marker-start'</span></dt>
+ <dt id="MarkerMidProperty"><span class='propdef-title prop-name'>'marker-mid'</span></dt>
+ <dt id="MarkerEndProperty"><span class='propdef-title prop-name'>'marker-end'</span></dt>
+ <dd>
+ <table summary="marker properties" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>none | <funciri> |
+ <a class="noxref" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit"><span class="value-inst-inherit noxref">inherit</span></a>
+ </td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>none</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'path'</a>, <a>'line'</a>, <a>'polyline'</a> and
+ <a>'polygon'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class='prop-value'>none</span></dt>
+ <dd>Indicates that no marker symbol shall be drawn at the given
+ vertex (vertices).</dd>
+
+ <dt><span class='prop-value'><funciri></span></dt>
+ <dd>The <funciri> is a <a href="types.html#DataTypeFuncIRI">Functional IRI reference</a>
+ to the <a>'marker element'</a> element which shall be used as the arrowhead
+ symbol or polymarker at the given vertex or vertices. If the
+ <a href="linking.html#IRIReference">IRI reference</a> is not valid (e.g.,
+ it points to an object that is undefined or the object is not a
+ <a>'marker element'</a> element), then the marker(s) shall not
+ be drawn.</dd>
+</dl>
+
+<p id="MarkerProperty">The <a>'marker property'</a> property specifies
+the marker symbol that shall be used for all points on the sets the
+value for all vertices on the given <a>'path'</a> element or
+<a href="shapes.html">basic shape</a>. It is a short-hand for the three
+individual marker properties:</p>
+
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'marker'</span></dt>
+ <dd>
+ <table summary="marker property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>see individual properties</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>see individual properties</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'path'</a>, <a>'line'</a>, <a>'polyline'</a> and
+ <a>'polygon'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<h3 id="MarkerAlgorithm">Details on how markers are rendered</h3>
+
+<p>Markers are drawn after the given object is filled and stroked.</p>
+
+<p>For each marker that is drawn, a temporary new user coordinate
+system is established so that the marker will be positioned and sized
+correctly, as follows:</p>
+
+<ul>
+ <li>The axes of the temporary new user coordinate system are aligned
+ according to the <a>'orient'</a> attribute on the
+ <a>'marker element'</a> element and the slope of the curve at the given vertex.
+ (Note: if there is a discontinuity at a vertex, the slope is the
+ average of the slopes of the two segments of the curve that join
+ at the given vertex. If a slope cannot be determined, the slope is
+ assumed to be zero.)</li>
+
+ <li>A temporary new coordinate system is established by attribute
+ <a>'markerUnits'</a>. If <a>'markerUnits'</a> equals
+ <span class="attr-value">'strokeWidth'</span>, then the temporary new
+ user coordinate system is the result of scaling the current
+ user coordinate system by the current value of property
+ <a>'stroke-width'</a>. If <a>'markerUnits'</a> equals
+ <span class="attr-value">'userSpaceOnUse'</span>, then no extra scale
+ transformation is applied.</li>
+
+ <li>An additional set of transformations might occur if the
+ <a>'marker element'</a> element includes a <a>'viewBox'</a> attribute, in
+ which case additional transformations are set up to produce the necessary
+ result due to attributes <a>'viewBox'</a> and <a>'preserveAspectRatio'</a>.</li>
+
+ <li>If the <a>'overflow'</a> property on the <a>'marker element'</a> element
+ indicates that the marker needs to be clipped to its viewport, then an
+ implicit clipping path is established at the bounds of the viewport.</li>
+</ul>
+
+<p>The rendering effect of a marker is as if the contents of the
+referenced <a>'marker element'</a> element were deeply cloned
+into a separate non-exposed DOM tree for each instance of the
+marker. Because the cloned DOM tree is non-exposed, the SVG DOM
+does not show the cloned instance of the marker.</p> <p>For user
+agents that support <a href="styling.html#StylingWithCSS">Styling
+with CSS</a>, the conceptual deep cloning of the referenced
+<a>'marker element'</a> element into a non-exposed DOM tree also
+copies any property values resulting from
+<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html">the CSS cascade</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 6) and
+property inheritance on the referenced element and its contents. CSS2
+selectors can be applied to the original (i.e., referenced) elements
+because they are part of the formal document structure. CSS2 selectors
+cannot be applied to the (conceptually) cloned DOM tree because its
+contents are not part of the formal document structure.</p>
+
+<p>For illustrative purposes, we'll repeat the marker example shown earlier:</p>
+
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4in" height="2in"
+ viewBox="0 0 4000 2000" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <marker id="Triangle"
+ viewBox="0 0 10 10" refX="0" refY="5"
+ markerUnits="strokeWidth"
+ markerWidth="4" markerHeight="3"
+ orient="auto">
+ <path d="M 0 0 L 10 5 L 0 10 z" />
+ </marker>
+ </defs>
+ <rect x="10" y="10" width="3980" height="1980"
+ fill="none" stroke="blue" stroke-width="10" />
+ <desc>Placing an arrowhead at the end of a path.
+ </desc>
+ <path d="M 1000 750 L 2000 750 L 2500 1250"
+ fill="none" stroke="black" stroke-width="100"
+ marker-end="url(#Triangle)" />
+</svg>
+</pre>
+
+<p>The rendering effect of the above file will be visually identical to
+the following:</p>
+
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4in" height="2in"
+ viewBox="0 0 4000 2000" version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ <desc>File which produces the same effect
+ as the marker example file, but without
+ using markers.
+ </desc>
+ <rect x="10" y="10" width="3980" height="1980"
+ fill="none" stroke="blue" stroke-width="10" />
+ <!-- The path draws as before, but without the marker properties -->
+ <path d="M 1000 750 L 2000 750 L 2500 1250"
+ fill="none" stroke="black" stroke-width="100" />
+ <!-- The following logic simulates drawing a marker
+ at final vertex of the path. -->
+ <!-- First off, move the origin of the user coordinate system
+ so that the origin is now aligned with the end point of the path. -->
+ <strong><g transform="translate(2500,1250)" ></strong>
+ <!-- Rotate the coordinate system 45 degrees because
+ the marker specified orient="auto" and the final segment
+ of the path is going in the direction of 45 degrees. -->
+ <strong><g transform="rotate(45)" ></strong>
+ <!-- Scale the coordinate system to match the coordinate system
+ indicated by the 'markerUnits' attributes, which in this case has
+ a value of 'strokeWidth'. Therefore, scale the coordinate system
+ by the current value of the 'stroke-width' property, which is 100. -->
+ <strong><g transform="scale(100)" ></strong>
+ <!-- Translate the coordinate system by
+ (-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY)
+ in order that (refX,refY) within the marker will align with the vertex.
+ In this case, we use the default value for preserveAspectRatio
+ ('xMidYMid meet'), which means find a uniform scale factor
+ (i.e., viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY)
+ such that the viewBox fits entirely within the viewport ('meet') and
+ is center-aligned ('xMidYMid'). In this case, the uniform scale factor
+ is markerHeight/viewBoxHeight=3/10=.3. Therefore, translate by
+ (-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). -->
+ <strong><g transform="translate(0,-1.5)" ></strong>
+ <!-- There is an implicit clipping path because the user agent style
+ sheet says that the 'overflow' property for markers has the value
+ 'hidden'. To achieve this, create a clipping path at the bounds
+ of the viewport. Note that in this case the viewport extends
+ 0.5 units to the left and right of the viewBox due to
+ a uniform scale factor, different ratios for markerWidth/viewBoxWidth
+ and markerHeight/viewBoxHeight, and 'xMidYMid' alignment -->
+ <strong><clipPath id="cp1" >
+ <rect x="-0.5" y="0" width="4" height="3" />
+ </clipPath></strong>
+ <strong><g clip-path="url(#cp1)" ></strong>
+ <!-- Scale the coordinate system by the uniform scale factor
+ markerHeight/viewBoxHeight=3/10=.3 to set the coordinate
+ system to viewBox units. -->
+ <strong><g transform="scale(.3)" ></strong>
+ <!-- This 'g' element carries all property values that result from
+ cascading and inheritance of properties on the original 'marker' element.
+ In this example, neither fill nor stroke was specified on the 'marker'
+ element or any ancestors of the 'marker', so the initial values of
+ "black" and "none" are used, respectively. -->
+ <strong><g fill="black" stroke="none" ></strong>
+ <!-- Expand out the contents of the 'marker' element. -->
+ <strong><path d="M 0 0 L 10 5 L 0 10 z" /></strong>
+ <strong></g></strong>
+ <strong></g></strong>
+ <strong></g></strong>
+ <strong></g></strong>
+ <strong></g></strong>
+ <strong></g></strong>
+ <strong></g></strong>
+</svg>
+</pre>
+<p class="view-as-svg"><a href="images/painting/marker-simulated.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
+
+</edit:with>
+
+<h2 id="RenderingProperties">Rendering properties</h2>
+
+<h3 id="ColorInterpolationProperties">Color interpolation properties:
+<span class="prop-name">'color-interpolation'</span> and
+<span class="prop-name">'color-interpolation-filters'</span></h3>
+
+<p>The SVG user agent performs color interpolations and compositing
+at various points as it processes SVG content. Two properties,
+<a>'color-interpolation'</a> and <a>'color-interpolation-filters'</a>,
+control which color space is used for particular categories of graphics
+operations. The following table shows which property applies to which
+graphics operations:</p>
+
+ <table class='vert' summary="applicability of color interpolation properties">
+ <tr>
+ <th>Graphics operation</th>
+ <th>Corresponding property</th>
+ </tr>
+ <tr>
+ <td>interpolating between gradient stops (see <a
+ href="pservers.html#Gradients">Gradient</a>)</td>
+ <td><a>'color-interpolation'</a></td>
+ </tr>
+ <tr>
+ <td>interpolating color when performing color
+ animations with either <a>'animate'</a> or <a>'animateColor'</a></td>
+ <td><a>'color-interpolation'</a></td>
+ </tr>
+ <tr>
+ <td><a href="masking.html#SimpleAlphaBlending">alpha
+ compositing</a> of <a
+ href="intro.html#TermGraphicsElement">graphics elements</a>
+ into the current background</td>
+ <td><a>'color-interpolation'</a></td>
+ </tr>
+ <tr>
+ <td><a href="filters.html">filter effects</a></td>
+ <td><a>'color-interpolation-filters'</a></td>
+ </tr>
+ </table>
+
+<p>Both properties choose between color operations occurring in the
+sRGB color space or in a (light
+energy linear) linearized RGB color space. Having chosen the appropriate
+color space, component-wise linear interpolation is used.</p>
+
+<p id="sRGBlinearRGBConversionFormulas">The conversion formulas between the
+sRGB color space (i.e., nonlinear with 2.2 gamma curve) and the linearized RGB
+color space (i.e., color values expressed as sRGB tristimulus values without a
+gamma curve) can be found in <a href="http://webstore.iec.ch/webstore/webstore.nsf/artnum/025408">the sRGB specification</a>
+[<a href="refs.html#ref-SRGB">SRGB</a>].
+For illustrative purposes, the following formula shows the conversion from
+sRGB to linearized RGB:</p>
+
+<pre>
+ R[sRGB] = R[sRGB-8bit] / 255
+ G[sRGB] = G[sRGB-8bit] / 255
+ B[sRGB] = B[sRGB-8bit] / 255
+If R[sRGB], G[sRGB], B[sRGB] <= 0.04045
+ R[linearRGB] = R[sRGB] / 12.92
+ G[linearRGB] = G[sRGB] / 12.92
+ B[linearRGB] = B[sRGB] / 12.92
+else if R[sRGB], G[sRGB], B[sRGB] > 0.04045
+ R[linearRGB] = ((R[sRGB] + 0.055) / 1.055) ^ 2.4
+ G[linearRGB] = ((G[sRGB] + 0.055) / 1.055) ^ 2.4
+ B[linearRGB] = ((B[sRGB] + 0.055) / 1.055) ^ 2.4
+ R[linearRGB-8bit] = R[linearRGB] * 255
+ G[linearRGB-8bit] = G[linearRGB] * 255
+ B[linearRGB-8bit] = B[linearRGB] * 255
+</pre>
+
+<p>Out-of-range color values, if supported by the user agent, also are
+converted using the above formulas. (See
+<a href="implnote.html#RangeClamping">Clamping values which are restricted to a particular range</a>.)</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="ColorInterpolationProperty"><span class="propdef-title prop-name">'color-interpolation'</span></dt>
+ <dd>
+ <table summary="color-interpolation property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | sRGB | linearRGB | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>sRGB</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="intro.html#TermContainerElement">container
+ elements</a>, <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a>, <a>'animate'</a> and <a>'animateColor'</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class='prop-value'>auto</span></dt>
+ <dd>Indicates that the user agent can choose either the
+ <span class='prop-value'>sRGB</span> or
+ <span class='prop-value'>linearRGB</span> spaces for color interpolation.
+ This option indicates that the author doesn't require that color
+ interpolation occur in a particular color space.</dd>
+
+ <dt><span class='prop-value'>sRGB</span></dt>
+ <dd>Indicates that color interpolation should occur in the sRGB
+ color space.</dd>
+
+ <dt><span class='prop-value'>linearRGB</span></dt>
+ <dd>Indicates that color interpolation should occur in the
+ linearized RGB color space as described above.</dd>
+</dl>
+
+<p>The <a>'color-interpolation'</a> property specifies the color space for
+gradient interpolations, color animations and alpha compositing.</p>
+
+<p>When a child element is blended into a background, the value of the
+<a>'color-interpolation'</a> property on the child determines the type of
+blending, not the value of the <a>'color-interpolation'</a> on the parent.
+For <a href="pservers.html#Gradients">gradients</a> which make use of the
+<span class='attr-name'>'xlink:href'</span> attribute to reference another
+gradient, the gradient uses the <a>'color-interpolation'</a> property value
+from the gradient element which is directly referenced by the <a>'fill'</a> or
+<a>'stroke'</a> property. When animating colors, color interpolation is
+performed according to the value of the <a>'color-interpolation'</a> property
+on the element being animated.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="ColorInterpolationFiltersProperty"><span class="propdef-title prop-name">'color-interpolation-filters'</span></dt>
+ <dd>
+ <table summary="color-interpolation-filters property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | sRGB | linearRGB | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>linearRGB</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="filters.html#TermFilterPrimitive">filter
+ primitives</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class='prop-value'>auto</span></dt>
+ <dd>Indicates that the user agent can choose either the
+ <span class='prop-value'>sRGB</span> or
+ <span class='prop-value'>linearRGB</span> spaces for filter effects color
+ operations. This option indicates that the author doesn't require that color
+ operations occur in a particular color space.</dd>
+
+ <dt><span class='prop-value'>sRGB</span></dt>
+ <dd>Indicates that filter effects color operations should occur in the sRGB
+ color space.</dd>
+
+ <dt><span class='prop-value'>linearRGB</span></dt>
+ <dd>Indicates that filter effects color operations should occur in the
+ linearized RGB color space.</dd>
+</dl>
+
+<p>The <a>'color-interpolation-filters'</a> property specifies the color space
+for imaging operations performed via <a href="filters.html">filter effects</a>.</p>
+
+<p>Note that <a>'color-interpolation-filters'</a> has a different initial
+value than <a>'color-interpolation'</a>. <a>'color-interpolation-filters'</a>
+has an initial value of <span class="prop-value">linearRGB</span>, whereas
+<a>'color-interpolation'</a> has an initial value of
+<span class="prop-value">sRGB</span>. Thus, in the default case, filter
+effects operations occur in the linearRGB color space, whereas all other color
+interpolations occur by default in the sRGB color space.</p>
+
+<h3 id="ColorRenderingProperty">The <span class="prop-name">'color-rendering'</span> property</h3>
+
+<p>The creator of SVG content might want to provide a hint
+to the implementation about how to make speed vs. quality
+tradeoffs as it performs color interpolation and compositing. The
+<a>'color-rendering'</a> property provides a hint to the SVG user
+agent about how to optimize its color interpolation and compositing
+operations.</p>
+
+<p><a>'color-rendering'</a> takes precedence over
+<a>'color-interpolation-filters'</a>. For example, assume
+<span class="prop-value">color-rendering: optimizeSpeed</span> and
+<span class="prop-value">color-interpolation-filters: linearRGB</span>.
+In this case, the SVG user agent should perform color operations in a way that
+optimizes performance, which might mean sacrificing the color interpolation
+precision as specified by <span class="prop-value">color-interpolation-filters: linearRGB</span>.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'color-rendering'</span></dt>
+ <dd>
+ <table summary="color-rendering property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | optimizeSpeed | optimizeQuality | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a
+ href="intro.html#TermContainerElement">container
+ elements</a>, <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a>, <a>'animate'</a> and <a>'animateColor'</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class='prop-value'>auto</span></dt>
+ <dd>Indicates that the user agent shall make appropriate
+ tradeoffs to balance speed and quality, but quality shall be
+ given more importance than speed.</dd>
+
+ <dt><span class='prop-value'>optimizeSpeed</span></dt>
+ <dd>Indicates that the user agent shall emphasize rendering
+ speed over quality. For RGB display devices, this option will
+ sometimes cause the user agent to perform color interpolation
+ and compositing in the device RGB color space.</dd>
+
+ <dt><span class='prop-value'>optimizeQuality</span></dt>
+ <dd>Indicates that the user agent shall emphasize quality
+ over rendering speed.</dd>
+</dl>
+
+<h3 id="ShapeRenderingProperty">The <span class="prop-name">'shape-rendering'</span> property</h3>
+
+<p>The creator of SVG content might want to provide a hint to the
+implementation about what tradeoffs to make as it renders vector graphics
+elements such as <a>'path'</a> elements and <a href="shapes.html">basic shapes</a>
+such as circles and rectangles. The <a>'shape-rendering'</a> property provides
+these hints.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'shape-rendering'</span></dt>
+ <dd>
+ <table summary="shape-rendering property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | optimizeSpeed | crispEdges |<br />
+ geometricPrecision | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermShape">shapes</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class='prop-value'>auto</span></dt>
+ <dd>Indicates that the user agent shall make appropriate
+ tradeoffs to balance speed, crisp edges and geometric
+ precision, but with geometric precision given more importance
+ than speed and crisp edges.</dd>
+
+ <dt><span class='prop-value'>optimizeSpeed</span></dt>
+ <dd>Indicates that the user agent shall emphasize rendering
+ speed over geometric precision and crisp edges. This option
+ will sometimes cause the user agent to turn off shape
+ anti-aliasing.</dd>
+
+ <dt><span class='prop-value'>crispEdges</span></dt>
+ <dd>Indicates that the user agent shall attempt to emphasize
+ the contrast between clean edges of artwork over rendering
+ speed and geometric precision. To achieve crisp edges, the
+ user agent might turn off anti-aliasing for all lines and
+ curves or possibly just for straight lines which are close to
+ vertical or horizontal. Also, the user agent might adjust
+ line positions and line widths to align edges with device
+ pixels.</dd>
+
+ <dt><span class='prop-value'>geometricPrecision</span></dt>
+ <dd>Indicates that the user agent shall emphasize geometric
+ precision over speed and crisp edges.</dd>
+</dl>
+
+<h3 id="TextRenderingProperty">The <span class="prop-name">'text-rendering'</span> property</h3>
+
+<p>The creator of SVG content might want to provide a hint to the
+implementation about what tradeoffs to make as it renders text. The
+<a>'text-rendering'</a> property provides these hints.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'text-rendering'</span></dt>
+ <dd>
+ <table summary="text-rendering property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | optimizeSpeed | optimizeLegibility |<br />
+ geometricPrecision | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'text'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class='prop-value'>auto</span></dt>
+ <dd>Indicates that the user agent shall make appropriate
+ tradeoffs to balance speed, legibility and geometric
+ precision, but with legibility given more importance than
+ speed and geometric precision.</dd>
+
+ <dt><span class='prop-value'>optimizeSpeed</span></dt>
+ <dd>Indicates that the user agent shall emphasize rendering
+ speed over legibility and geometric precision. This option
+ will sometimes cause the user agent to turn off text
+ anti-aliasing.</dd>
+
+ <dt><span class='prop-value'>optimizeLegibility</span></dt>
+ <dd>Indicates that the user agent shall emphasize legibility
+ over rendering speed and geometric precision. The user agent
+ will often choose whether to apply anti-aliasing techniques,
+ built-in font hinting or both to produce the most legible
+ text.</dd>
+
+ <dt><span class='prop-value'>geometricPrecision</span></dt>
+ <dd>Indicates that the user agent shall emphasize geometric
+ precision over legibility and rendering speed. This option
+ will usually cause the user agent to suspend the use of
+ hinting so that glyph outlines are drawn with comparable
+ geometric precision to the rendering of path data.</dd>
+</dl>
+
+<h3 id="ImageRenderingProperty">The <span class="prop-name">'image-rendering'</span> property</h3>
+
+<p>The creator of SVG content might want to provide a hint to the
+implementation about how to make speed vs. quality tradeoffs as it performs
+image processing. The <a>'image-rendering'</a> property provides a hint to the
+SVG user agent about how to optimize its image rendering.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt><span class="propdef-title prop-name">'image-rendering'</span></dt>
+ <dd>
+ <table summary="image-rendering property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | optimizeSpeed | optimizeQuality | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td>images</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<dl>
+ <dt><span class='prop-value'>auto</span></dt>
+ <dd>Indicates that the user agent shall make appropriate
+ tradeoffs to balance speed and quality, but quality shall be
+ given more importance than speed. The user agent shall employ
+ a resampling algorithm at least as good as nearest neighbor
+ resampling, but bilinear resampling is strongly preferred.
+ For <a href="conform.html#ConformingHighQualitySVGViewers">Conforming
+ High-Quality SVG Viewers</a>, the user agent shall employ a
+ resampling algorithm at least as good as bilinear
+ resampling.</dd>
+
+ <dt><span class='prop-value'>optimizeQuality</span></dt>
+ <dd>Indicates that the user agent shall emphasize quality
+ over rendering speed. The user agent shall employ a
+ resampling algorithm at least as good as bilinear
+ resampling.</dd>
+
+ <dt><span class='prop-value'>optimizeSpeed</span></dt>
+ <dd>Indicates that the user agent shall emphasize rendering
+ speed over quality. The user agent should use a resampling
+ algorithm which achieves the goal of fast rendering, with the
+ requirement that the resampling algorithm shall be at least
+ as good as nearest neighbor resampling. If performance goals
+ can be achieved with higher quality algorithms, then the user
+ agent should use the higher quality algorithms instead of
+ nearest neighbor resampling.</dd>
+</dl>
+
+<p>In all cases, resampling must be done in a truecolor (e.g.,
+24-bit) color space even if the original data and/or the target
+device is indexed color.</p>
+
+<h2 id="InheritanceOfPaintingProperties">Inheritance of painting properties</h2>
+
+<p>The values of any of the painting properties described in this chapter can
+be inherited from a given object's parent. Painting, however, is always done
+on each <a href="intro.html#TermGraphicsElement">graphics element</a>
+individually, never at the <a href="intro.html#TermContainerElement">container element</a>
+(e.g., a <a>'g'</a>) level. Thus, for the following SVG, even though the
+gradient fill is specified on the <a>'g'</a>, the gradient is simply inherited
+through the <a>'g'</a> element down into each rectangle, each of which is
+rendered such that its interior is painted with the gradient.</p>
+
+<p><span class="example-ref">Example Inheritance</span></p>
+
+<edit:example href='images/painting/inheritance.svg' name='Inheritance' image='yes' link='yes'/>
+
+<p>Any painting properties defined in terms of the
+<a href="coords.html#ObjectBoundingBoxUnits">object's bounding box</a> use the
+bounding box of the <a href="intro.html#TermGraphicsElement">graphics element</a>
+to which the operation applies. Note that <a href="text.html">text elements</a>
+are defined such that any painting operations defined in terms of the
+<a href="coords.html#ObjectBoundingBoxUnits">object's bounding box</a> use the
+bounding box of the entire <a>'text'</a> element. (See the discussion of
+<a href="text.html#ObjectBoundingBoxUnitsTextObjects">object bounding box units and text elements</a>.)</p>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGPaint">Interface SVGPaint</h3>
+
+<edit:interface name='::svg::SVGPaint'/>
+
+<h3 id="InterfaceSVGMarkerElement">Interface SVGMarkerElement</h3>
+
+<edit:with element='marker'>
+<edit:interface name='::svg::SVGMarkerElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/paths.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,799 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Paths</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Paths</h1>
+
+<edit:with element='path'>
+
+<h2 id="Introduction">Introduction</h2>
+
+ <p>Paths represent the outline of a shape which can be filled,
+ stroked, used as a clipping path, or any combination of the
+ three. (See <a href="painting.html">Filling, Stroking and Paint
+ Servers</a> and <a href="masking.html">Clipping, Masking and
+ Compositing</a>.)</p>
+ <p>A path is described using the concept of a current point. In
+ an analogy with drawing on paper, the current point can be
+ thought of as the location of the pen. The position of the pen
+ can be changed, and the outline of a shape (open or closed) can
+ be traced by dragging the pen in either straight lines or
+ curves.</p>
+ <p>Paths represent the geometry of the outline of an object,
+ defined in terms of <em>moveto</em> (set a new current point),
+ <em>lineto</em> (draw a straight line), <em>curveto</em> (draw
+ a curve using a cubic Bézier), <em>arc</em> (elliptical
+ or circular arc) and <em>closepath</em> (close the current
+ shape by drawing a line to the last <em>moveto</em>) elements.
+ Compound paths (i.e., a path with multiple subpaths) are
+ possible to allow effects such as "donut holes" in objects.</p>
+ <p>This chapter describes the syntax, behavior and DOM
+ interfaces for SVG paths. Various implementation notes for SVG
+ paths can be found in <a
+ href="implnote.html#PathElementImplementationNotes"><span
+ class="element-name">'path'</span> element implementation
+ notes</a> and <a
+ href="implnote.html#ArcImplementationNotes">Elliptical arc
+ implementation notes</a>.</p>
+ <p>A path is defined in SVG using the <a>'path'</a> element.</p>
+
+<h2 id="PathElement">The <span class="element-name">'path'</span> element</h2>
+
+<edit:elementsummary name='path'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="DAttribute"><span
+ class="adef">d</span> = "<em>path data</em>"</dt>
+ <dd>The definition of the outline of a shape. See <a
+ href="#PathData">Path data</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: yes.</span>
+ Path data animation is only possible when each path data
+ specification within an animation specification has exactly
+ the same list of path data commands as the <a>'d'</a> attribute. If an animation is
+ specified and the list of path data commands is not the
+ same, then the animation specification is in error (see <a
+ href="implnote.html#ErrorProcessing">Error Processing</a>).
+ The animation engine interpolates each parameter to each
+ path data command separately based on the attributes to the
+ given animation element. Flags and booleans are
+ interpolated as fractions between zero and one, with any
+ non-zero value considered to be a value of one/true.</dd>
+ <dt id="PathLengthAttribute"><span class="adef">pathLength</span> = "<a
+ href="types.html#DataTypeNumber"><number></a>"</dt>
+ <dd>The author's computation of the total length of the
+ path, in user units. This value is used to calibrate the
+ user agent's own <a
+ href="paths.html#DistanceAlongAPath">distance-along-a-path</a>
+ calculations with that of the author. The user agent will
+ scale all distance-along-a-path computations by the ratio
+ of <a>'pathLength'</a> to the user
+ agent's own computed value for total path length. <a>'pathLength'</a> potentially affects
+ calculations for <a href="text.html#TextOnAPath">text on a path</a>,
+ <a href="animate.html#AnimateMotionElement">motion animation</a> and
+ various <a href="painting.html#StrokeProperties">stroke operations</a>.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<h2 id="PathData">Path data</h2>
+
+<h3 id="PathDataGeneralInformation">General information about path data</h3>
+
+ <p>A path is defined by including a <a>'path'</a>
+ element which contains a <span class='attr-value'>d="(path data)"</span>
+ attribute, where the <a>'d'</a> attribute contains the
+ <em>moveto</em>, <em>line</em>, <em>curve</em> (both cubic and
+ quadratic Béziers), <em>arc</em> and <em>closepath</em>
+ instructions.</p>
+ <p><span class="example-ref">Example triangle01</span>
+ specifies a path in the shape of a triangle. (The
+ <strong>M</strong> indicates a <em>moveto</em>, the
+ <strong>L</strong>s indicate <em>lineto</em>s, and the
+ <strong>z</strong> indicates a <em>closepath</em>).</p>
+
+<edit:example href='images/paths/triangle01.svg' link='yes' image='yes' name='triangle01' description="simple example of a 'path'"/>
+
+ <p>Path data can contain newline characters and thus can be
+ broken up into multiple lines to improve readability. Because
+ of line length limitations with certain related tools, it is
+ recommended that SVG generators split long path data strings
+ across multiple lines, with each line not exceeding 255
+ characters. Also note that newline characters are only allowed
+ at certain places within path data.</p>
+ <p>The syntax of path data is concise in order to allow for
+ minimal file size and efficient downloads, since many SVG files
+ will be dominated by their path data. Some of the ways that SVG
+ attempts to minimize the size of path data are as follows:</p>
+ <ul>
+ <li>All instructions are expressed as one character (e.g., a
+ <em>moveto</em> is expressed as an <strong>M</strong>).</li>
+ <li>Superfluous white space and separators such as commas can
+ be eliminated (e.g., "M 100 100 L 200 200" contains
+ unnecessary spaces and could be expressed more compactly as
+ "M100 100L200 200").</li>
+ <li>The command letter can be eliminated on subsequent
+ commands if the same command is used multiple times in a row
+ (e.g., you can drop the second "L" in "M 100 200 L 200 100 L
+ -100 -200" and use "M 100 200 L 200 100 -100 -200"
+ instead).</li>
+ <li>Relative versions of all commands are available
+ (uppercase means absolute coordinates, lowercase means
+ relative coordinates).</li>
+ <li>Alternate forms of <em>lineto</em> are available to
+ optimize the special cases of horizontal and vertical lines
+ (absolute and relative).</li>
+ <li>Alternate forms of <em>curve</em> are available to
+ optimize the special cases where some of the control points
+ on the current segment can be determined automatically from
+ the control points on the previous segment.</li>
+ </ul>
+ <p>The path data syntax is a prefix notation (i.e., commands
+ followed by parameters). The only allowable decimal point is a
+ Unicode
+ U+0046 FULL STOP (".") character (also referred to in Unicode as
+ PERIOD, dot and decimal point) and no other delimiter
+ characters are allowed [<a href='refs.html#ref-UNICODE'>UNICODE</a>].
+ (For example, the following is an
+ invalid numeric value in a path data stream: "13,000.56".
+ Instead, say: "13000.56".)</p>
+ <p>For the relative versions of the commands, all coordinate
+ values are relative to the current point at the start of the
+ command.</p>
+ <p>In the tables below, the following notation is used:</p>
+ <ul>
+ <li>(): grouping of parameters</li>
+ <li>+: 1 or more of the given parameter(s) is required</li>
+ </ul>
+ <p>The following sections list the commands.</p>
+
+ <h3 id="PathDataMovetoCommands">The <strong>"moveto"</strong> commands</h3>
+ <p>The "moveto" commands (<strong>M</strong> or
+ <strong>m</strong>) establish a new current point. The effect
+ is as if the "pen" were lifted and moved to a new location. A
+ path data segment (if there is one) must begin with a "moveto"
+ command. Subsequent "moveto" commands (i.e., when the "moveto"
+ is not the first command) represent the start of a new
+ <em>subpath</em>:</p>
+ <table summary="moveto command" class="PathDataTable"
+ border="1" cellspacing="2" cellpadding="5">
+ <tr>
+ <th>Command</th>
+ <th>Name</th>
+ <th>Parameters</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><strong>M</strong> (absolute)<br />
+ <strong>m</strong> (relative)</td>
+ <td>moveto</td>
+ <td>(x y)+</td>
+ <td>
+ Start a new sub-path at the given (x,y) coordinate.
+ <strong>M</strong> (uppercase) indicates that absolute
+ coordinates will follow; <strong>m</strong> (lowercase)
+ indicates that relative coordinates will follow. If a moveto is
+ followed by multiple pairs of coordinates, the subsequent pairs
+ are treated as implicit lineto commands. Hence, implicit lineto
+ commands will be relative if the moveto is relative, and
+ absolute if the moveto is absolute. If a relative moveto
+ (<strong>m</strong>) appears as the first element of the path,
+ then it is treated as a pair of absolute coordinates. In this
+ case, subsequent pairs of coordinates are treated as relative
+ even though the initial moveto is interpreted as an absolute moveto.
+ </td>
+ </tr>
+ </table>
+
+ <h3 id="PathDataClosePathCommand">The <strong>"closepath"</strong> command</h3>
+ <p>The "closepath" (<strong>Z</strong> or <strong>z</strong>)
+ ends the current subpath and causes an automatic straight line
+ to be drawn from the current point to the initial point of the
+ current subpath. If a "closepath" is followed immediately by a
+ "moveto", then the "moveto" identifies the start point of the
+ next subpath. If a "closepath" is followed immediately by any
+ other command, then the next subpath starts at the same initial
+ point as the current subpath.</p>
+ <p>When a subpath ends in a "closepath," it differs in behavior
+ from what happens when "manually" closing a subpath via a
+ "lineto" command in how <a>'stroke-linejoin'</a>
+ and <a>'stroke-linecap'</a> are implemented. With "closepath", the end of the final segment
+ of the subpath is "joined" with the start of the initial
+ segment of the subpath using the current value of <a>'stroke-linejoin'</a>.
+ If you instead "manually" close the subpath via a "lineto"
+ command, the start of the first segment and the end of the last
+ segment are not joined but instead are each capped using the
+ current value of <a>'stroke-linecap'</a>.
+ At the end of the command, the new current point is set to the
+ initial point of the current subpath.</p>
+ <table summary="closepath command" class="PathDataTable"
+ border="1" cellspacing="2" cellpadding="5">
+ <tr>
+ <th>Command</th>
+ <th>Name</th>
+ <th>Parameters</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><strong>Z</strong> or<br />
+ <strong>z</strong></td>
+ <td>closepath</td>
+ <td>(none)</td>
+ <td>Close the current subpath by drawing a straight line from the
+ current point to current subpath's initial point. Since the Z and z
+ commands take no parameters, they have an identical effect.</td>
+ </tr>
+ </table>
+
+ <h3 id="PathDataLinetoCommands">The <strong>"lineto"</strong> commands</h3>
+ <p>The various "lineto" commands draw straight lines from the
+ current point to a new point:</p>
+ <table summary="lineto command" class="PathDataTable"
+ border="1" cellspacing="2" cellpadding="5">
+ <tr>
+ <th>Command</th>
+ <th>Name</th>
+ <th>Parameters</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><strong>L</strong> (absolute)<br />
+ <strong>l</strong> (relative)</td>
+ <td>lineto</td>
+ <td>(x y)+</td>
+ <td>Draw a line from the current point to the given (x,y)
+ coordinate which becomes the new current point.
+ <strong>L</strong> (uppercase) indicates that absolute
+ coordinates will follow; <strong>l</strong> (lowercase)
+ indicates that relative coordinates will follow. A number
+ of coordinates pairs may be specified to draw a polyline.
+ At the end of the command, the new current point is set to
+ the final set of coordinates provided.</td>
+ </tr>
+ <tr>
+ <td><strong>H</strong> (absolute)<br />
+ <strong>h</strong> (relative)</td>
+ <td>horizontal lineto</td>
+ <td>x+</td>
+ <td>Draws a horizontal line from the current point (cpx,
+ cpy) to (x, cpy). <strong>H</strong> (uppercase) indicates
+ that absolute coordinates will follow; <strong>h</strong>
+ (lowercase) indicates that relative coordinates will
+ follow. Multiple x values can be provided (although usually
+ this doesn't make sense). At the end of the command, the
+ new current point becomes (x, cpy) for the final value of
+ x.</td>
+ </tr>
+ <tr>
+ <td><strong>V</strong> (absolute)<br />
+ <strong>v</strong> (relative)</td>
+ <td>vertical lineto</td>
+ <td>y+</td>
+ <td>Draws a vertical line from the current point (cpx, cpy)
+ to (cpx, y). <strong>V</strong> (uppercase) indicates that
+ absolute coordinates will follow; <strong>v</strong>
+ (lowercase) indicates that relative coordinates will
+ follow. Multiple y values can be provided (although usually
+ this doesn't make sense). At the end of the command, the
+ new current point becomes (cpx, y) for the final value of
+ y.</td>
+ </tr>
+ </table>
+
+ <h3 id="PathDataCurveCommands">The curve commands</h3>
+ <p>These three groups of commands draw curves:</p>
+ <ul>
+ <li><a href="paths.html#PathDataCubicBezierCommands">Cubic
+ Bézier commands</a> (<strong>C</strong>,
+ <strong>c</strong>, <strong>S</strong> and
+ <strong>s</strong>). A cubic Bézier segment is defined
+ by a start point, an end point, and two control points.</li>
+ <li><a
+ href="paths.html#PathDataQuadraticBezierCommands">Quadratic
+ Bézier commands</a> (<strong>Q</strong>,
+ <strong>q</strong>, <strong>T</strong> and
+ <strong>t</strong>). A quadratic Bézier segment is
+ defined by a start point, an end point, and one control
+ point.</li>
+ <li><a
+ href="paths.html#PathDataEllipticalArcCommands">Elliptical
+ arc commands</a> (<strong>A</strong> and <strong>a</strong>).
+ An elliptical arc segment draws a segment of an ellipse.</li>
+ </ul>
+
+ <h3 id="PathDataCubicBezierCommands">The cubic Bézier curve commands</h3>
+ <p>The cubic Bézier commands are as follows:</p>
+ <table summary="cubic Bézier command"
+ class="PathDataTable" border="1" cellspacing="2"
+ cellpadding="5">
+ <tr>
+ <th>Command</th>
+ <th>Name</th>
+ <th>Parameters</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><strong>C</strong> (absolute)<br />
+ <strong>c</strong> (relative)</td>
+ <td>curveto</td>
+ <td>(x1 y1 x2 y2 x y)+</td>
+ <td>Draws a cubic Bézier curve from the current
+ point to (x,y) using (x1,y1) as the control point at the
+ beginning of the curve and (x2,y2) as the control point at
+ the end of the curve. <strong>C</strong> (uppercase)
+ indicates that absolute coordinates will follow;
+ <strong>c</strong> (lowercase) indicates that relative
+ coordinates will follow. Multiple sets of coordinates may
+ be specified to draw a polybézier. At the end of the
+ command, the new current point becomes the final (x,y)
+ coordinate pair used in the polybézier.</td>
+ </tr>
+ <tr>
+ <td><strong>S</strong> (absolute)<br />
+ <strong>s</strong> (relative)</td>
+ <td>shorthand/smooth curveto</td>
+ <td>(x2 y2 x y)+</td>
+ <td>Draws a cubic Bézier curve from the current
+ point to (x,y). The first control point is assumed to be
+ the reflection of the second control point on the previous
+ command relative to the current point. (If there is no
+ previous command or if the previous command was not an C,
+ c, S or s, assume the first control point is coincident
+ with the current point.) (x2,y2) is the second control
+ point (i.e., the control point at the end of the curve).
+ <strong>S</strong> (uppercase) indicates that absolute
+ coordinates will follow; <strong>s</strong> (lowercase)
+ indicates that relative coordinates will follow. Multiple
+ sets of coordinates may be specified to draw a
+ polybézier. At the end of the command, the new
+ current point becomes the final (x,y) coordinate pair used
+ in the polybézier.</td>
+ </tr>
+ </table>
+ <p><span class="example-ref">Example cubic01</span> shows some
+ simple uses of cubic Bézier commands within a path. The
+ example uses an internal CSS style sheet to assign styling
+ properties. Note that the control point for the "S" command is
+ computed automatically as the reflection of the control point
+ for the previous "C" command relative to the start point of the
+ "S" command.</p>
+
+<edit:example href='images/paths/cubic01.svg' name='cubic01' description='cubic Bézier comamnds in path data' image='yes' link='yes'/>
+
+ <p>The following picture shows some how cubic Bézier
+ curves change their shape depending on the position of the
+ control points. The first five examples illustrate a single
+ cubic Bézier path segment. The example at the lower
+ right shows a "C" command followed by an "S" command.</p>
+ <p><img
+ alt="Example cubic02 - cubic Bézier commands in path data"
+ src="images/paths/cubic02.png" width="355" height="355" /></p>
+ <p class="view-as-svg"><a href="images/paths/cubic02.svg">View
+ this example as SVG (SVG-enabled browsers only)</a><br />
+ </p>
+
+ <h3 id="PathDataQuadraticBezierCommands">The quadratic Bézier curve commands</h3>
+ <p>The quadratic Bézier commands are as follows:</p>
+ <table summary="quadratic Bézier command"
+ class="PathDataTable" border="1" cellspacing="2"
+ cellpadding="5">
+ <tr>
+ <th>Command</th>
+ <th>Name</th>
+ <th>Parameters</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><strong>Q</strong> (absolute)<br />
+ <strong>q</strong> (relative)</td>
+ <td>quadratic Bézier curveto</td>
+ <td>(x1 y1 x y)+</td>
+ <td>Draws a quadratic Bézier curve from the current
+ point to (x,y) using (x1,y1) as the control point.
+ <strong>Q</strong> (uppercase) indicates that absolute
+ coordinates will follow; <strong>q</strong> (lowercase)
+ indicates that relative coordinates will follow. Multiple
+ sets of coordinates may be specified to draw a
+ polybézier. At the end of the command, the new
+ current point becomes the final (x,y) coordinate pair used
+ in the polybézier.</td>
+ </tr>
+ <tr>
+ <td><strong>T</strong> (absolute)<br />
+ <strong>t</strong> (relative)</td>
+ <td>Shorthand/smooth quadratic Bézier curveto</td>
+ <td>(x y)+</td>
+ <td>Draws a quadratic Bézier curve from the current
+ point to (x,y). The control point is assumed to be the
+ reflection of the control point on the previous command
+ relative to the current point. (If there is no previous
+ command or if the previous command was not a Q, q, T or t,
+ assume the control point is coincident with the current
+ point.) <strong>T</strong> (uppercase) indicates that
+ absolute coordinates will follow; <strong>t</strong>
+ (lowercase) indicates that relative coordinates will
+ follow. At the end of the command, the new current point
+ becomes the final (x,y) coordinate pair used in the
+ polybézier.</td>
+ </tr>
+ </table>
+ <p><span class="example-ref">Example quad01</span> shows some
+ simple uses of quadratic Bézier commands within a path.
+ Note that the control point for the "T" command is computed
+ automatically as the reflection of the control point for the
+ previous "Q" command relative to the start point of the "T"
+ command.</p>
+
+<edit:example href='images/paths/quad01.svg' name='quad01' description='quadratic Bézier commands in path data' image='yes' link='yes'/>
+
+ <h3 id="PathDataEllipticalArcCommands">The elliptical arc curve commands</h3>
+ <p>The elliptical arc commands are as follows:</p>
+ <table summary="elliptical arc commands" class="PathDataTable"
+ border="1" cellspacing="2" cellpadding="5">
+ <tr>
+ <th>Command</th>
+ <th>Name</th>
+ <th>Parameters</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><strong>A</strong> (absolute)<br />
+ <strong>a</strong> (relative)</td>
+ <td>elliptical arc</td>
+ <td>(rx ry x-axis-rotation large-arc-flag sweep-flag x
+ y)+</td>
+ <td>Draws an elliptical arc from the current point to
+ (<strong>x</strong>, <strong>y</strong>). The size and
+ orientation of the ellipse are defined by two radii
+ (<strong>rx</strong>, <strong>ry</strong>) and an
+ <strong>x-axis-rotation</strong>, which indicates how the
+ ellipse as a whole is rotated relative to the current
+ coordinate system. The center (<strong>cx</strong>,
+ <strong>cy</strong>) of the ellipse is calculated
+ automatically to satisfy the constraints imposed by the
+ other parameters. <strong>large-arc-flag</strong> and
+ <strong>sweep-flag</strong> contribute to the automatic
+ calculations and help determine how the arc is drawn.</td>
+ </tr>
+ </table>
+ <p><span class="example-ref">Example arcs01</span> shows some
+ simple uses of arc commands within a path.</p>
+
+<edit:example href='images/paths/arcs01.svg' name='arcs01' description='arc commands in path data' image='yes' link='yes'/>
+
+ <p>The elliptical arc command draws a section of an ellipse
+ which meets the following constraints:</p>
+ <ul>
+ <li>the arc starts at the current point</li>
+ <li>the arc ends at point (<strong>x</strong>,
+ <strong>y</strong>)</li>
+ <li>the ellipse has the two radii (<strong>rx</strong>,
+ <strong>ry</strong>)</li>
+ <li>the x-axis of the ellipse is rotated by
+ <strong>x-axis-rotation</strong> relative to the x-axis of
+ the current coordinate system.</li>
+ </ul>
+ For most situations, there are actually four different arcs
+ (two different ellipses, each with two different arc sweeps)
+ that satisfy these constraints. <strong>large-arc-flag</strong>
+ and <strong>sweep-flag</strong> indicate which one of the four
+ arcs are drawn, as follows:
+ <ul>
+ <li>Of the four candidate arc sweeps, two will represent an
+ arc sweep of greater than or equal to 180 degrees (the
+ "large-arc"), and two will represent an arc sweep of less
+ than or equal to 180 degrees (the "small-arc"). If
+ <strong>large-arc-flag</strong> is '1', then one of the two
+ larger arc sweeps will be chosen; otherwise, if
+ <strong>large-arc-flag</strong> is '0', one of the smaller
+ arc sweeps will be chosen,</li>
+ <li>If <strong>sweep-flag</strong> is '1', then the arc will
+ be drawn in a "positive-angle" direction (i.e., the ellipse
+ formula x=<strong>cx</strong>+<strong>rx</strong>*cos(theta)
+ and y=<strong>cy</strong>+<strong>ry</strong>*sin(theta) is
+ evaluated such that theta starts at an angle corresponding to
+ the current point and increases positively until the arc
+ reaches (x,y)). A value of 0 causes the arc to be drawn in a
+ "negative-angle" direction (i.e., theta starts at an angle
+ value corresponding to the current point and decreases until
+ the arc reaches (x,y)).</li>
+ </ul>
+ <p>The following illustrates the four combinations of
+ <strong>large-arc-flag</strong> and <strong>sweep-flag</strong>
+ and the four different arcs that will be drawn based on the
+ values of these flags. For each case, the following path data
+ command was used:</p>
+<pre>
+<path d="M 125,75 a100,50 0 ?,? 100,50"
+ style="fill:none; stroke:red; stroke-width:6"/>
+</pre>
+ <p>where "?,?" is replaced by "0,0" "0,1" "1,0" and "1,1" to
+ generate the four possible cases.</p>
+ <p><img alt="Illustration of flags in arc commands"
+ src="images/paths/arcs02.png" width="426" height="187" /></p>
+ <p class="view-as-svg"><a href="images/paths/arcs02.svg">View
+ this example as SVG (SVG-enabled browsers only)</a></p>
+ <p>Refer to <a
+ href="implnote.html#ArcImplementationNotes">Elliptical arc
+ implementation notes</a> for detailed implementation notes for
+ the path data elliptical arc commands.</p>
+
+ <h3 id="PathDataBNF">The grammar for path data</h3>
+ <p>The following notation is used in the Backus-Naur Form (BNF)
+ description of the grammar for path data:</p>
+ <ul>
+ <li>*: 0 or more</li>
+ <li>+: 1 or more</li>
+ <li>?: 0 or 1</li>
+ <li>(): grouping</li>
+ <li>|: separates alternatives</li>
+ <li>double quotes surround literals</li>
+ </ul>
+ <p>The following is the BNF for SVG paths.</p>
+<pre class='grammar'>
+svg-path:
+ wsp* moveto-drawto-command-groups? wsp*
+moveto-drawto-command-groups:
+ moveto-drawto-command-group
+ | moveto-drawto-command-group wsp* moveto-drawto-command-groups
+moveto-drawto-command-group:
+ moveto wsp* drawto-commands?
+drawto-commands:
+ drawto-command
+ | drawto-command wsp* drawto-commands
+drawto-command:
+ closepath
+ | lineto
+ | horizontal-lineto
+ | vertical-lineto
+ | curveto
+ | smooth-curveto
+ | quadratic-bezier-curveto
+ | smooth-quadratic-bezier-curveto
+ | elliptical-arc
+moveto:
+ ( "M" | "m" ) wsp* moveto-argument-sequence
+moveto-argument-sequence:
+ coordinate-pair
+ | coordinate-pair comma-wsp? lineto-argument-sequence
+closepath:
+ ("Z" | "z")
+lineto:
+ ( "L" | "l" ) wsp* lineto-argument-sequence
+lineto-argument-sequence:
+ coordinate-pair
+ | coordinate-pair comma-wsp? lineto-argument-sequence
+horizontal-lineto:
+ ( "H" | "h" ) wsp* horizontal-lineto-argument-sequence
+horizontal-lineto-argument-sequence:
+ coordinate
+ | coordinate comma-wsp? horizontal-lineto-argument-sequence
+vertical-lineto:
+ ( "V" | "v" ) wsp* vertical-lineto-argument-sequence
+vertical-lineto-argument-sequence:
+ coordinate
+ | coordinate comma-wsp? vertical-lineto-argument-sequence
+curveto:
+ ( "C" | "c" ) wsp* curveto-argument-sequence
+curveto-argument-sequence:
+ curveto-argument
+ | curveto-argument comma-wsp? curveto-argument-sequence
+curveto-argument:
+ coordinate-pair comma-wsp? coordinate-pair comma-wsp? coordinate-pair
+smooth-curveto:
+ ( "S" | "s" ) wsp* smooth-curveto-argument-sequence
+smooth-curveto-argument-sequence:
+ smooth-curveto-argument
+ | smooth-curveto-argument comma-wsp? smooth-curveto-argument-sequence
+smooth-curveto-argument:
+ coordinate-pair comma-wsp? coordinate-pair
+quadratic-bezier-curveto:
+ ( "Q" | "q" ) wsp* quadratic-bezier-curveto-argument-sequence
+quadratic-bezier-curveto-argument-sequence:
+ quadratic-bezier-curveto-argument
+ | quadratic-bezier-curveto-argument comma-wsp?
+ quadratic-bezier-curveto-argument-sequence
+quadratic-bezier-curveto-argument:
+ coordinate-pair comma-wsp? coordinate-pair
+smooth-quadratic-bezier-curveto:
+ ( "T" | "t" ) wsp* smooth-quadratic-bezier-curveto-argument-sequence
+smooth-quadratic-bezier-curveto-argument-sequence:
+ coordinate-pair
+ | coordinate-pair comma-wsp? smooth-quadratic-bezier-curveto-argument-sequence
+elliptical-arc:
+ ( "A" | "a" ) wsp* elliptical-arc-argument-sequence
+elliptical-arc-argument-sequence:
+ elliptical-arc-argument
+ | elliptical-arc-argument comma-wsp? elliptical-arc-argument-sequence
+elliptical-arc-argument:
+ nonnegative-number comma-wsp? nonnegative-number comma-wsp?
+ number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair
+coordinate-pair:
+ coordinate comma-wsp? coordinate
+coordinate:
+ number
+nonnegative-number:
+ integer-constant
+ | floating-point-constant
+number:
+ sign? integer-constant
+ | sign? floating-point-constant
+flag:
+ "0" | "1"
+comma-wsp:
+ (wsp+ comma? wsp*) | (comma wsp*)
+comma:
+ ","
+integer-constant:
+ digit-sequence
+floating-point-constant:
+ fractional-constant exponent?
+ | digit-sequence exponent
+fractional-constant:
+ digit-sequence? "." digit-sequence
+ | digit-sequence "."
+exponent:
+ ( "e" | "E" ) sign? digit-sequence
+sign:
+ "+" | "-"
+digit-sequence:
+ digit
+ | digit digit-sequence
+digit:
+ "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
+wsp:
+ (#x20 | #x9 | #xD | #xA)
+</pre>
+ <p>The processing of the BNF must consume as much of a given
+ BNF production as possible, stopping at the point when a
+ character is encountered which no longer satisfies the
+ production. Thus, in the string "M 100-200", the first
+ coordinate for the "moveto" consumes the characters "100" and
+ stops upon encountering the minus sign because the minus sign
+ cannot follow a digit in the production of a "coordinate". The
+ result is that the first coordinate will be "100" and the
+ second coordinate will be "-200".</p>
+ <p>Similarly, for the string "M 0.6.5", the first coordinate of
+ the "moveto" consumes the characters "0.6" and stops upon
+ encountering the second decimal point because the production of
+ a "coordinate" only allows one decimal point. The result is
+ that the first coordinate will be "0.6" and the second
+ coordinate will be ".5".</p>
+ <p>Note that the BNF allows the path <a>'d'</a> attribute to be empty. This is not
+ an error, instead it disables rendering of the path.</p>
+
+ <h2 id="DistanceAlongAPath">Distance along a path</h2>
+ <p>Various operations, including <a
+ href="text.html#TextOnAPath">text on a path</a> and <a
+ href="animate.html#AnimateMotionElement">motion animation</a>
+ and various <a href="painting.html#StrokeProperties">stroke
+ operations</a>, require that the user agent compute the
+ distance along the geometry of a graphics element, such as a <a>'path'</a>.</p>
+ <p>Exact mathematics exist for computing distance along a path,
+ but the formulas are highly complex and require substantial
+ computation. It is recommended that authoring products and user
+ agents employ algorithms that produce as precise results as
+ possible; however, to accommodate implementation differences
+ and to help distance calculations produce results that
+ approximate author intent, the <a>'pathLength'</a> attribute can be used
+ to provide the author's computation of the total length of the
+ path so that the user agent can scale distance-along-a-path
+ computations by the ratio of <a>'pathLength'</a> to the user agent's own
+ computed value for total path length.</p>
+ <p>A "moveto" operation within a <a>'path'</a> element is defined to have
+ zero length. Only the various "lineto", "curveto" and "arcto"
+ commands contribute to path length calculations.</p>
+
+</edit:with>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGPathSeg">Interface SVGPathSeg</h3>
+
+<edit:interface name='::svg::SVGPathSeg'/>
+
+<h3 id="InterfaceSVGPathSegClosePath">Interface SVGPathSegClosePath</h3>
+
+<edit:interface name="::svg::SVGPathSegClosePath"/>
+
+<h3 id="InterfaceSVGPathSegMovetoAbs">Interface SVGPathSegMovetoAbs</h3>
+
+<edit:interface name="::svg::SVGPathSegMovetoAbs"/>
+
+<h3 id="InterfaceSVGPathSegMovetoRel">Interface SVGPathSegMovetoRel</h3>
+
+<edit:interface name="::svg::SVGPathSegMovetoRel"/>
+
+<h3 id="InterfaceSVGPathSegLinetoAbs">Interface SVGPathSegLinetoAbs</h3>
+
+<edit:interface name="::svg::SVGPathSegLinetoAbs"/>
+
+<h3 id="InterfaceSVGPathSegLinetoRel">Interface SVGPathSegLinetoRel</h3>
+
+<edit:interface name="::svg::SVGPathSegLinetoRel"/>
+
+<h3 id="InterfaceSVGPathSegCurvetoCubicAbs">Interface SVGPathSegCurvetoCubicAbs</h3>
+
+<edit:interface name="::svg::SVGPathSegCurvetoCubicAbs"/>
+
+<h3 id="InterfaceSVGPathSegCurvetoCubicRel">Interface SVGPathSegCurvetoCubicRel</h3>
+
+<edit:interface name="::svg::SVGPathSegCurvetoCubicRel"/>
+
+<h3 id="InterfaceSVGPathSegCurvetoQuadraticAbs">Interface SVGPathSegCurvetoQuadraticAbs</h3>
+
+<edit:interface name="::svg::SVGPathSegCurvetoQuadraticAbs"/>
+
+<h3 id="InterfaceSVGPathSegCurvetoQuadraticRel">Interface SVGPathSegCurvetoQuadraticRel</h3>
+
+<edit:interface name="::svg::SVGPathSegCurvetoQuadraticRel"/>
+
+<h3 id="InterfaceSVGPathSegArcAbs">Interface SVGPathSegArcAbs</h3>
+
+<edit:interface name="::svg::SVGPathSegArcAbs"/>
+
+<h3 id="InterfaceSVGPathSegArcRel">Interface SVGPathSegArcRel</h3>
+
+<edit:interface name="::svg::SVGPathSegArcRel"/>
+
+<h3 id="InterfaceSVGPathSegLinetoHorizontalAbs">Interface SVGPathSegLinetoHorizontalAbs</h3>
+
+<edit:interface name="::svg::SVGPathSegLinetoHorizontalAbs"/>
+
+<h3 id="InterfaceSVGPathSegLinetoHorizontalRel">Interface SVGPathSegLinetoHorizontalRel</h3>
+
+<edit:interface name="::svg::SVGPathSegLinetoHorizontalRel"/>
+
+<h3 id="InterfaceSVGPathSegLinetoVerticalAbs">Interface SVGPathSegLinetoVerticalAbs</h3>
+
+<edit:interface name="::svg::SVGPathSegLinetoVerticalAbs"/>
+
+<h3 id="InterfaceSVGPathSegLinetoVerticalRel">Interface SVGPathSegLinetoVerticalRel</h3>
+
+<edit:interface name="::svg::SVGPathSegLinetoVerticalRel"/>
+
+<h3 id="InterfaceSVGPathSegCurvetoCubicSmoothAbs">Interface SVGPathSegCurvetoCubicSmoothAbs</h3>
+
+<edit:interface name="::svg::SVGPathSegCurvetoCubicSmoothAbs"/>
+
+<h3 id="InterfaceSVGPathSegCurvetoCubicSmoothRel">Interface SVGPathSegCurvetoCubicSmoothRel</h3>
+
+<edit:interface name="::svg::SVGPathSegCurvetoCubicSmoothRel"/>
+
+<h3 id="InterfaceSVGPathSegCurvetoQuadraticSmoothAbs">Interface SVGPathSegCurvetoQuadraticSmoothAbs</h3>
+
+<edit:interface name="::svg::SVGPathSegCurvetoQuadraticSmoothAbs"/>
+
+<h3 id="InterfaceSVGPathSegCurvetoQuadraticSmoothRel">Interface SVGPathSegCurvetoQuadraticSmoothRel</h3>
+
+<edit:interface name="::svg::SVGPathSegCurvetoQuadraticSmoothRel"/>
+
+<h3 id="InterfaceSVGPathSegList">Interface SVGPathSegList</h3>
+
+<edit:interface name="::svg::SVGPathSegList"/>
+
+<h3 id="InterfaceSVGAnimatedPathData">Interface SVGAnimatedPathData</h3>
+
+<edit:interface name="::svg::SVGAnimatedPathData"/>
+
+<h3 id="InterfaceSVGPathElement">Interface SVGPathElement</h3>
+
+<edit:with element='path'>
+<edit:interface name="::svg::SVGPathElement"/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/propidx.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1113 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Property Index</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Property Index</h1>
+
+<p class="normativity"><em>This appendix is informative, not normative.</em></p>
+
+ <table class='vert property-table' summary="list of all properties">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Values</th>
+ <th>Initial value</th>
+ <th>Applies to</th>
+ <th title='Inherited'>Inh.</th>
+ <th>Percentages</th>
+ <th>Media</th>
+ <th title='Animatable'><a href="animate.html#Animatable">Anim.</a></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a>'alignment-baseline'</a></td>
+ <td>auto | baseline | before-edge | text-before-edge |
+ middle | central | after-edge | text-after-edge |
+ ideographic | alphabetic | hanging | mathematical | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>see property description</td>
+ <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> elements</td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'baseline-shift'</a></td>
+ <td>baseline | sub | super | <a
+ href="types.html#DataTypePercentage"><percentage></a>
+ | <a href="types.html#DataTypeLength"><length></a>
+ | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>baseline</td>
+ <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> elements</td>
+ <td>no</td>
+ <td>refer to the "line height" of the <a>'text'</a> element, which in
+ the case of SVG is defined to be equal to the font size</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'clip'</a></td>
+ <td><a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visufx.html#value-def-shape">
+ <span
+ class="value-inst-shape noxref"><shape></span></a>
+ | auto | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td><a
+ href="coords.html#ElementsThatEstablishViewports">elements
+ which establish a new viewport</a>, <a>'pattern'</a> elements and <a>'marker element'</a> elements</td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'clip-path'</a></td>
+ <td><a href="types.html#DataTypeFuncIRI"><funciri></a> |
+ none | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>none</td>
+ <td><a href="intro.html#TermContainerElement">container
+ elements</a> and <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'clip-rule'</a></td>
+ <td>nonzero | evenodd | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>nonzero</td>
+ <td>graphics elements within a <a>'clipPath'</a> element</td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'color'</a></td>
+ <td><a href="types.html#DataTypeColor"><color></a>
+ | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>depends on user agent</td>
+ <td>elements to which properties <a
+ href="painting.html#FillProperty"><span
+ class="prop-name">'fill'</span></a>, <a
+ href="painting.html#StrokeProperty"><span
+ class="prop-name">'stroke'</span></a>, <a
+ href="pservers.html#StopColorProperty"><span
+ class="prop-name">'stop-color'</span></a>, <a
+ href="filters.html#FloodColorProperty"><span
+ class="prop-name">'flood-color'</span></a>, <a
+ href="filters.html#LightingColorProperty"><span
+ class="prop-name">'lighting-color'</span></a> apply</td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'color-interpolation'</a></td>
+ <td>auto | sRGB | linearRGB | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>sRGB</td>
+ <td><a href="intro.html#TermContainerElement">container
+ elements</a>, <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a> and <a>'animateColor'</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'color-interpolation-filters'</a></td>
+ <td>auto | sRGB | linearRGB | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>linearRGB</td>
+ <td><a href="filters.html#TermFilterPrimitive">filter
+ primitives</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'color-profile property'</a></td>
+ <td>auto | sRGB | <name> | <a
+ href="types.html#DataTypeFuncIRI"><funciri></a> | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td><a>'image'</a> elements that
+ refer to raster images</td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'color-rendering'</a></td>
+ <td>auto | optimizeSpeed | optimizeQuality | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td><a href="intro.html#TermContainerElement">container
+ elements</a>, <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a> and <a>'animateColor'</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'cursor property'</a></td>
+ <td>[ [<a href="types.html#DataTypeFuncIRI"><funciri></a>
+ ,]* [ auto | crosshair | default | pointer | move |
+ e-resize | ne-resize | nw-resize | n-resize | se-resize |
+ sw-resize | s-resize | w-resize| text | wait | help ] ] |
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td><a href="intro.html#TermContainerElement">container
+ elements</a> and <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a>, <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#interactive-media-group">
+ interactive</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'direction'</a></td>
+ <td>ltr | rtl | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>ltr</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><a>'display'</a></td>
+ <td>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 | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>inline</td>
+ <td><a>'svg'</a>, <a>'g'</a>, <a>'switch'</a>, <a>'a'</a>, <a>'foreignObject'</a>, graphics
+ elements (including the <a>'text'</a> element) and text
+ sub-elements (i.e., <a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a>)</td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#all-media-group">
+ all</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'dominant-baseline'</a></td>
+ <td>auto | use-script | no-change | reset-size |
+ ideographic | alphabetic | hanging | mathematical |
+ central | middle | text-after-edge | text-before-edge |
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'enable-background'</a></td>
+ <td>accumulate | new [ <x> <y> <width>
+ <height> ] | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>accumulate</td>
+ <td><a href="intro.html#TermContainerElement">container
+ elements</a></td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><a>'fill'</a></td>
+ <td><paint> (See <a
+ href="painting.html#SpecifyingPaint">Specifying
+ paint</a>)</td>
+ <td>black</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'fill-opacity'</a></td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>1</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'fill-rule'</a></td>
+ <td>nonzero | evenodd | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>nonzero</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'filter property'</a></td>
+ <td><a href="types.html#DataTypeFuncIRI"><funciri></a> | none | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>none</td>
+ <td><a href="intro.html#TermContainerElement">container
+ elements</a> and <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'flood-color'</a></td>
+ <td>currentColor |<br />
+ <a href="types.html#DataTypeColor"><color></a>
+ [<a href="types.html#DataTypeICCColor"><icccolor></a>]
+ |<br />
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>black</td>
+ <td><a>'feFlood'</a> elements</td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'flood-opacity'</a></td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>1</td>
+ <td><a>'feFlood'</a> elements</td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'font property'</a></td>
+ <td>[ [ <a>'font-style'</a>
+ || <a>'font-variant'</a>
+ || <a>'font-weight'</a>
+ ]? <a>'font-size'</a>
+ [ / <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#propdef-line-height">
+ <span
+ class="propinst-line-height noxref">'line-height'</span></a>
+ ]? <a>'font-family'</a>
+ ] | caption | icon | menu | message-box | small-caption |
+ status-bar | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>see individual properties</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>see individual properties</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes <sup><a href='#note1'>[1]</a></sup></td>
+ </tr>
+ <tr>
+ <td><a>'font-family'</a></td>
+ <td>[[ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#value-def-family-name">
+ <span
+ class="value-inst-family-name noxref"><family-name></span></a>
+ | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#value-def-generic-family">
+ <span
+ class="value-inst-generic-family noxref"><generic-family></span></a>
+ ],]* [ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#value-def-family-name">
+ <span
+ class="value-inst-family-name noxref"><family-name></span></a>
+ | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#value-def-generic-family">
+ <span
+ class="value-inst-generic-family noxref"><generic-family></span></a>]
+ | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>depends on user agent</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'font-size'</a></td>
+ <td><a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#value-def-absolute-size">
+ <span
+ class="value-inst-absolute-size noxref"><absolute-size></span></a>
+ | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#value-def-relative-size">
+ <span
+ class="value-inst-relative-size noxref"><relative-size></span></a>
+ | <a href="types.html#DataTypeLength"><length></a>
+ | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-percentage">
+ <span
+ class="value-inst-percentage noxref"><percentage></span></a>
+ | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>medium</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes, the computed value is inherited</td>
+ <td>refer to parent element's font size</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'font-size-adjust'</a></td>
+ <td><a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-number">
+ <span
+ class="value-inst-number noxref"><number></span></a>
+ | none | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>none</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes <sup><a href='#note1'>[1]</a></sup></td>
+ </tr>
+ <tr>
+ <td><a>'font-stretch'</a></td>
+ <td>normal | wider | narrower | ultra-condensed |
+ extra-condensed | condensed | semi-condensed |
+ semi-expanded | expanded | extra-expanded |
+ ultra-expanded | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>normal</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'font-style'</a></td>
+ <td>normal | italic | oblique | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>normal</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'font-variant'</a></td>
+ <td>normal | small-caps | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>normal</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'font-weight'</a></td>
+ <td>normal | bold | bolder | lighter | 100 | 200 | 300 |
+ 400 | 500 | 600 | 700 | 800 | 900 | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>normal</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'glyph-orientation-horizontal'</a></td>
+ <td><a><angle></a> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>0deg</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><a>'glyph-orientation-vertical'</a></td>
+ <td>auto | <a><angle></a> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><a>'image-rendering'</a></td>
+ <td>auto | optimizeSpeed | optimizeQuality | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td>images</td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'kerning'</a></td>
+ <td>auto | <a
+ href="types.html#DataTypeLength"><length></a> | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'letter-spacing'</a></td>
+ <td>normal | <a
+ href="types.html#DataTypeLength"><length></a> | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>normal</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'lighting-color'</a></td>
+ <td>currentColor |<br />
+ <a href="types.html#DataTypeColor"><color></a>
+ [<a href="types.html#DataTypeICCColor"><icccolor></a>]
+ |<br />
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>white</td>
+ <td><a>'feDiffuseLighting'</a> and
+ <a>'feSpecularLighting'</a>
+ elements</td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'marker property'</a></td>
+ <td>see individual properties</td>
+ <td>see individual properties</td>
+ <td><a>'path'</a>, <a>'line'</a>, <a>'polyline'</a> and <a>'polygon'</a> elements</td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'marker-end'</a><br />
+ <a>'marker-mid'</a><br />
+ <a>'marker-start'</a></td>
+ <td>none |<br />
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a>
+ |<br />
+ <a href="types.html#DataTypeFuncIRI"><funciri></a></td>
+ <td>none</td>
+ <td><a>'path'</a>, <a>'line'</a>, <a>'polyline'</a> and <a>'polygon'</a> elements</td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'mask property'</a></td>
+ <td><a href="types.html#DataTypeFuncIRI"><funciri></a> | none | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>none</td>
+ <td><a href="intro.html#TermContainerElement">container
+ elements</a> and <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'opacity'</a></td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>1</td>
+ <td><a href="intro.html#TermContainerElement">container
+ elements</a> and <a
+ href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'overflow'</a></td>
+ <td>visible | hidden | scroll | auto | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>see prose</td>
+ <td><a
+ href="coords.html#ElementsThatEstablishViewports">elements
+ which establish a new viewport</a>, <a>'pattern'</a> elements and <a>'marker element'</a> elements</td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'pointer-events'</a></td>
+ <td>visiblePainted | visibleFill | visibleStroke |
+ visible |<br />
+ painted | fill | stroke | all | none | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>visiblePainted</td>
+ <td><a href="intro.html#TermGraphicsElement">graphics
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'shape-rendering'</a></td>
+ <td>auto | optimizeSpeed | crispEdges |<br />
+ geometricPrecision | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td><a href="intro.html#TermShape">shapes</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stop-color'</a></td>
+ <td>currentColor |<br />
+ <a href="types.html#DataTypeColor"><color></a>
+ [<a href="types.html#DataTypeICCColor"><icccolor></a>]
+ |<br />
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>black</td>
+ <td><a>'stop'</a> elements</td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stop-opacity'</a></td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>1</td>
+ <td><a>'stop'</a> elements</td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stroke'</a></td>
+ <td><paint> (See <a
+ href="painting.html#SpecifyingPaint">Specifying
+ paint</a>)</td>
+ <td>none</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stroke-dasharray'</a></td>
+ <td>none | <dasharray> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>none</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes <sup><a href='#note1'>[1]</a></sup></td>
+ </tr>
+ <tr>
+ <td><a>'stroke-dashoffset'</a></td>
+ <td><a><percentage></a> | <a
+ href="types.html#DataTypeLength"><length></a> | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>0</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>see prose</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stroke-linecap'</a></td>
+ <td>butt | round | square | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>butt</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stroke-linejoin'</a></td>
+ <td>miter | round | bevel | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>miter</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stroke-miterlimit'</a></td>
+ <td><miterlimit> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>4</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stroke-opacity'</a></td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>1</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stroke-width'</a></td>
+ <td><a><percentage></a> | <a
+ href="types.html#DataTypeLength"><length></a> | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>1</td>
+ <td><a href="intro.html#TermShape">shapes</a> and <a
+ href="intro.html#TermTextContentElement">text content
+ elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'text-anchor'</a></td>
+ <td>start | middle | end | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>start</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'text-decoration'</a></td>
+ <td>none | [ underline || overline || line-through ||
+ blink ] | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>none</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>no (see prose)</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'text-rendering'</a></td>
+ <td>auto | optimizeSpeed | optimizeLegibility |<br />
+ geometricPrecision | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>auto</td>
+ <td><a>'text'</a> elements</td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'unicode-bidi'</a></td>
+ <td>normal | embed | bidi-override | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>normal</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>no</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><a>'visibility'</a></td>
+ <td>visible | hidden | collapse | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>visible</td>
+ <td>graphics elements (including the <a>'text'</a> element) and text
+ sub-elements (i.e., <a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> and <a>'a'</a>)</td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'word-spacing'</a></td>
+ <td>normal | <a
+ href="types.html#DataTypeLength"><length></a> | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>normal</td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'writing-mode'</a></td>
+ <td>lr-tb | rl-tb | tb-rl | lr | rl | tb | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ <td>lr-tb</td>
+ <td><a>'text'</a> elements</td>
+ <td>yes</td>
+ <td>N/A</td>
+ <td><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">
+ visual</a></td>
+ <td>no</td>
+ </tr>
+ </tbody>
+ </table>
+
+<ol class='notes'>
+ <li id="note1"><sup>[1]</sup> The <a>'font property'</a>, <a>'font-size-adjust'</a> and <a>'stroke-dasharray'</a>
+ properties are animatable but do not support additive animation.</li>
+</ol>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/pservers.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,945 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Gradients and Patterns</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Gradients and Patterns</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>With SVG, you can fill (i.e., paint the interior) or stroke (i.e.,
+paint the outline) of shapes and text using one of the following:</p>
+
+<ul>
+ <li><a href="color.html">color</a> (using <color>)</li>
+
+ <li><a href="#Gradients">gradients</a> (linear or radial)</li>
+
+ <li><a href="#Patterns">patterns</a> (vector or image, possibly tiled)</li>
+</ul>
+
+<p>SVG uses the general notion of a <strong>paint server</strong>.
+Gradients and patterns are just specific types of built-in paint
+servers.</p>
+
+<p>Paint servers are referenced using an
+<a href="linking.html#IRIReference">IRI reference</a> on a <a>'fill'</a> or
+<a>'stroke'</a> property.</p>
+
+<h2 id="Gradients">Gradients</h2>
+
+<h3 id="GradientsIntroduction">Introduction</h3>
+
+<p>Gradients consist of continuously smooth color transitions
+along a vector from one color to another, possibly
+followed by additional transitions along the same vector
+to other colors. SVG provides for two types of gradients:
+<a href="pservers.html#LinearGradients"><strong>linear
+gradients</strong></a> and <a
+href="pservers.html#RadialGradients"><strong>radial
+gradients</strong></a>.</p>
+
+<p>Once defined, gradients are then referenced using <a>'fill'</a> or
+<a>'stroke'</a> properties on a given
+<a href="intro.html#TermGraphicsElement">graphics element</a> to indicate that
+the given element shall be filled or stroked with the referenced gradient.</p>
+
+<p>
+The angle of the color transitions along the gradient vector is defined by the
+gradient normal. Before any transforms are applied to the gradient or its
+referencing <a href="intro.html#TermGraphicsElement">graphics element</a>, the
+gradient normal is perpendicular with the gradient vector. If a
+<a href="intro.html#TermGraphicsElement">graphics element</a> references a
+gradient, conceptually the <a href="intro.html#TermGraphicsElement">graphics
+element</a> should take a copy of the gradient vector and gradient normal and
+treat it as part of its own geometry. Any transformations applied to the
+<a href="intro.html#TermGraphicsElement">graphics element</a> geometry also
+apply to the copied gradient vector and gradient normal. Any gradient transforms
+that are specified on the reference gradient are applied before any
+<a href="intro.html#TermGraphicsElement">graphics element</a> transformations
+are applied to the gradient.
+</p>
+
+<img src="images/pservers/gradient_vector_and_normal.png"
+ alt="linear and radial gradient vectors and normals" width="1000"
+ height="500" />
+
+<h3 id="LinearGradients">Linear gradients</h3>
+
+<edit:with element='linearGradient'>
+
+<p id="LinearGradientElement">Linear gradients are defined by a
+<a>'linearGradient'</a> element.</p>
+
+<edit:elementsummary name='linearGradient'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="LinearGradientElementGradientUnitsAttribute"><span
+ class="adef">gradientUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
+ <dd>Defines the coordinate system for attributes <a>'x1'</a>,
+ <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a>.<br />
+ If <span
+ class="attr-value">gradientUnits="userSpaceOnUse"</span>,
+ <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a> represent
+ values in the coordinate system that results from taking
+ the current user coordinate system in place at the time
+ when the gradient element is referenced (i.e., the user
+ coordinate system for the element referencing the gradient
+ element via a <a>'fill'</a> or <a>'stroke'</a> property) and then
+ applying the transform specified by attribute <a>'gradientTransform'</a>.<br />
+ If <span
+ class="attr-value">gradientUnits="objectBoundingBox"</span>,
+ the user coordinate system for attributes
+ <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a> is established
+ using the bounding box of the element to which the gradient
+ is applied (see <a
+ href="coords.html#ObjectBoundingBox">Object bounding box
+ units</a>) and then applying the transform specified by
+ attribute <a>'gradientTransform'</a>.<br />
+ When <span class="attr-value">gradientUnits="objectBoundingBox"</span>
+ and <a>'gradientTransform'</a> is the
+ identity matrix, the normal of the linear gradient is
+ perpendicular to the gradient vector in object bounding box
+ space (i.e., the abstract coordinate system where (0,0) is
+ at the top/left of the object bounding box and (1,1) is at
+ the bottom/right of the object bounding box). When the object's bounding
+ box is not square, the gradient normal which is initially perpendicular
+ to the gradient vector within object bounding box space may render
+ non-perpendicular relative to the gradient vector in user space. If the
+ gradient vector is parallel to one of the axes of the bounding box, the
+ gradient normal will remain perpendicular. This transformation is due to
+ application of the non-uniform scaling transformation from bounding box
+ space to user space.<br />
+ If attribute <a>'gradientUnits'</a>
+ is not specified, then the effect is as if a value of <span
+ class="attr-value">'objectBoundingBox'</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LinearGradientElementGradientTransformAttribute"><span
+ class="adef">gradientTransform</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeTransformList"><transform-list></a></span>"</dt>
+ <dd>Contains the definition of an optional additional
+ transformation from the gradient coordinate system onto the
+ target coordinate system (i.e., userSpaceOnUse or
+ objectBoundingBox). This allows for things such as skewing
+ the gradient. This additional transformation matrix is
+ post-multiplied to (i.e., inserted to the right of) any
+ previously defined transformations, including the implicit
+ transformation necessary to convert from <a
+ href="coords.html#ObjectBoundingBox">object bounding box
+ units</a> to user space.<br />
+ If attribute <a>'gradientTransform'</a> is not
+ specified, then the effect is as if an identity transform
+ were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LinearGradientElementX1Attribute"><span
+ class="adef">x1</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd><a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a> define a <em>gradient
+ vector</em> for the linear gradient. This <em>gradient
+ vector</em> provides starting and ending points onto which
+ the <a href="#GradientStops">gradient stops</a> are mapped.
+ The values of <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a> can be either
+ numbers or percentages.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LinearGradientElementY1Attribute"><span
+ class="adef">y1</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>See <a>'x1'</a>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LinearGradientElementX2Attribute"><span
+ class="adef">x2</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>See <a>'x1'</a>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'100%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LinearGradientElementY2Attribute"><span
+ class="adef">y2</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>See <a>'x1'</a>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LinearGradientElementSpreadMethodAttribute"><span
+ class="adef">spreadMethod</span> = "pad | reflect |
+ repeat"</dt>
+ <dd>Indicates what happens if the gradient starts or ends
+ inside the bounds of the <em>target rectangle</em>.
+ Possible values are: <span class='attr-value'>'pad'</span>, which says to use the
+ terminal colors of the gradient to fill the remainder of
+ the target region, <span class='attr-value'>'reflect'</span>, which says to reflect
+ the gradient pattern start-to-end, end-to-start,
+ start-to-end, etc. continuously until the <em>target
+ rectangle</em> is filled, and <span class='attr-value'>repeat</span>, which says
+ to repeat the gradient pattern start-to-end, start-to-end,
+ start-to-end, etc. continuously until the target region is
+ filled.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'pad'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LinearGradientElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="linking.html#IRIReference">IRI
+ reference</a> to a different <a>'linearGradient'</a> or
+ <a>'radialGradient'</a> element within
+ the current SVG document fragment. Any <a>'linearGradient'</a> attributes
+ which are defined on the referenced element which are not
+ defined on this element are inherited by this element. If
+ this element has no defined gradient stops, and the
+ referenced element does (possibly due to its own <a>'xlink:href'</a>
+ attribute), then this element
+ inherits the gradient stop from the referenced element.
+ Inheritance can be indirect to an arbitrary level; thus, if
+ the referenced element inherits attribute or gradient stops
+ due to its own <a>'xlink:href'</a>
+ attribute, then the current element can inherit those
+ attributes or gradient stops.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p>Percentages are allowed for <a>'x1'</a>,
+<a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a>. For
+<span class='attr-value'>gradientUnits="userSpaceOnUse"</span>,
+percentages represent values relative to the current viewport. For
+<span class='attr-value'>gradientUnits="objectBoundingBox"</span>,
+percentages represent values relative to the bounding box for the
+object.</p>
+
+<p>If <a>'x1'</a> = <a>'x2'</a> and <a>'y1'</a> =
+<a>'y2'</a>, then the area to be painted will be painted as
+a single color using the color and opacity of the last
+<a href="pservers.html#GradientStops">gradient stop</a>.</p>
+
+<p><a href="styling.html#SVGStylingProperties">Properties</a> inherit
+into the <a>'linearGradient'</a> element from its ancestors;
+properties do <em>not</em> inherit from the element referencing the
+<a>'linearGradient'</a> element.</p>
+
+<p><a>'linearGradient'</a> elements are never rendered directly;
+their only usage is as something that can be referenced using the
+<a>'fill'</a> and <a>'stroke'</a> properties. The <a>'display'</a>
+property does not apply to the <a>'linearGradient'</a> element; thus,
+<a>'linearGradient'</a> elements are not directly rendered even if
+the <a>'display'</a> property is set to a value other than
+<span class="prop-value">none</span>, and <a>'linearGradient'</a>
+elements are available for referencing even when the <a>'display'</a>
+property on the <a>'linearGradient'</a> element or any of its ancestors
+is set to <span class="prop-value">none</span>.</p>
+
+<p id="ExampleLinGrad01"><span class="example-ref">Example lingrad01</span>
+shows how to fill a rectangle by referencing a linear gradient paint
+server.</p>
+
+<edit:example href='images/pservers/lingrad01.svg' name='lingrad01' description='fill a rectangle using a linear gradient paint server' image='yes' link='yes'/>
+
+</edit:with>
+
+<h3 id="RadialGradients">Radial gradients</h3>
+
+<edit:with element='radialGradient'>
+
+<p id="RadialGradientElement">Radial gradients are defined by a
+<a>'radialGradient'</a> element.</p>
+
+<edit:elementsummary name='radialGradient'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="RadialGradientElementGradientUnitsAttribute"><span
+ class="adef">gradientUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
+ <dd>Defines the coordinate system for attributes
+ <a>'cx'</a>, <a>'cy'</a>, <a>'r'</a>, <a>'fx'</a> and <a>'fy'</a>.<br/>
+ If <span
+ class="attr-value">gradientUnits="userSpaceOnUse"</span>,
+ <a>'cx'</a>, <a>'cy'</a>, <a>'r'</a>, <a>'fx'</a> and <a>'fy'</a>
+ represent values in the coordinate system that results from taking
+ the current user coordinate system in place at the time
+ when the gradient element is referenced (i.e., the user
+ coordinate system for the element referencing the gradient
+ element via a <a>'fill'</a> or <a>'stroke'</a> property) and then
+ applying the transform specified by attribute <a>'gradientTransform'</a>.<br />
+ If <span
+ class="attr-value">gradientUnits="objectBoundingBox"</span>,
+ the user coordinate system for attributes
+ <a>'cx'</a>, <a>'cy'</a>, <a>'r'</a>, <a>'fx'</a> and <a>'fy'</a>
+ is established
+ using the bounding box of the element to which the gradient
+ is applied (see <a
+ href="coords.html#ObjectBoundingBox">Object bounding box
+ units</a>) and then applying the transform specified by
+ attribute <a>'gradientTransform'</a>.<br />
+ When <span
+ class="attr-value">gradientUnits="objectBoundingBox"</span>
+ and <a>'gradientTransform'</a> is the
+ identity matrix, then the rings of the radial gradient are
+ circular with respect to the object bounding box space
+ (i.e., the abstract coordinate system where (0,0) is at the
+ top/left of the object bounding box and (1,1) is at the
+ bottom/right of the object bounding box). When the object's
+ bounding box is not square, the rings that are conceptually
+ circular within object bounding box space will render as
+ elliptical due to application of the non-uniform scaling
+ transformation from bounding box space to user space.<br />
+ If attribute <a>'gradientUnits'</a>
+ is not specified, then the effect is as if a value of <span
+ class="attr-value">'objectBoundingBox'</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RadialGradientElementGradientTransformAttribute"><span
+ class="adef">gradientTransform</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeTransformList"><transform-list></a></span>"</dt>
+ <dd>Contains the definitions of an optional additional
+ transformation from the gradient coordinate system onto the
+ target coordinate system (i.e., userSpaceOnUse or
+ objectBoundingBox). This allows for things such as skewing
+ the gradient. This additional transformation matrix is
+ post-multiplied to (i.e., inserted to the right of) any
+ previously defined transformations, including the implicit
+ transformation necessary to convert from <a
+ href="coords.html#ObjectBoundingBox">object bounding box
+ units</a> to user space.<br />
+ If attribute <a>'gradientTransform'</a> is not
+ specified, then the effect is as if an identity transform
+ were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RadialGradientElementCXAttribute"><span
+ class="adef">cx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd><a>'cx'</a>, <a>'cy'</a> and <a>'r'</a> define the largest (i.e.,
+ outermost) circle for the radial gradient. The gradient
+ will be drawn such that the 100% <a
+ href="#GradientStops">gradient stop</a> is mapped to the
+ perimeter of this largest (i.e., outermost) circle.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'50%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RadialGradientElementCYAttribute"><span
+ class="adef">cy</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>See <a>'cx'</a>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'50%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RadialGradientElementRAttribute"><span
+ class="adef">r</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>See <a>'cx'</a>.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero will cause the area to be painted as a
+ single color using the color and opacity of the last <a
+ href="pservers.html#GradientStops">gradient stop</a>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'50%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RadialGradientElementFXAttribute"><span
+ class="adef">fx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd><a>'fx'</a> and <a>'fy'</a> define the focal point for the
+ radial gradient. The gradient will be drawn such that the
+ 0% <a href="#GradientStops">gradient stop</a> is mapped to
+ (fx, fy).<br />
+ If attribute <a>'fx'</a> is not specified, <a>'fx'</a> will coincide
+ with the presentational value of <a>'cx'</a> for the element whether the
+ value for 'cx' was inherited or not. If the element references an
+ element that specifies a value for 'fx', then the value of 'fx' is
+ inherited from the referenced element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RadialGradientElementFYAttribute"><span
+ class="adef">fy</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>See <a>'fx'</a>.<br />
+ If attribute <a>'fy'</a> is not specified, <a>'fy'</a> will coincide
+ with the presentational vlaue of <a>'cy'</a> for the element whether the
+ value for 'cy' was inherited or not. If the element references an
+ element that specifies a value for 'fy', then the value of 'fy' is
+ inherited from the referenced element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RadialGradientElementSpreadMethodAttribute"><span
+ class="adef">spreadMethod</span> = "pad | reflect |
+ repeat"</dt>
+ <dd>Indicates what happens if the gradient starts or ends
+ inside the bounds of the object(s) being painted by the
+ gradient. Has the same values and meanings as the <a>'spreadMethod'</a>
+ attribute on <a>'linearGradient'</a> element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RadialGradientElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="linking.html#IRIReference">IRI
+ reference</a> to a different <a>'linearGradient'</a> or
+ <a>'radialGradient'</a> element within
+ the current SVG document fragment. Any <a>'radialGradient'</a> attributes
+ which are defined on the referenced element which are not
+ defined on this element are inherited by this element. If
+ this element has no defined gradient stops, and the
+ referenced element does (possibly due to its own <a>'xlink:href'</a>
+ attribute), then this element inherits the gradient stop from the referenced element.
+ Inheritance can be indirect to an arbitrary level; thus, if
+ the referenced element inherits attribute or gradient stops
+ due to its own <a>'xlink:href'</a>
+ attribute, then the current element can inherit those
+ attributes or gradient stops.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p>Percentages are allowed for attributes <a>'cx'</a>, <a>'cy'</a>,
+<a>'r'</a>, <a>'fx'</a> and <a>'fy'</a>. For
+<span class="attr-value">gradientUnits="userSpaceOnUse"</span>, percentages
+represent values relative to the current viewport. For
+<span class="attr-value">gradientUnits="objectBoundingBox"</span>, percentages
+represent values relative to the bounding box for the object.</p>
+
+<p>If the point defined by <a>'fx'</a> and <a>'fy'</a> lies outside the
+circle defined by <a>'cx'</a>, <a>'cy'</a> and <a>'r'</a>, then the user
+agent shall set the focal point to the intersection of the line from
+(<a>'cx'</a>, <a>'cy'</a>) to (<a>'fx'</a>, <a>'fy'</a>) with the circle
+defined by <a>'cx'</a>, <a>'cy'</a> and <a>'r'</a>.</p>
+
+<p><a href="styling.html#SVGStylingProperties">Properties</a>
+inherit into the <a>'radialGradient'</a> element from its ancestors;
+properties do <em>not</em> inherit from the element referencing the
+<a>'radialGradient'</a> element.</p>
+
+<p><a>'radialGradient'</a> elements are never rendered directly;
+their only usage is as something that can be referenced using the
+<a>'fill'</a> and <a>'stroke'</a> properties. The <a>'display'</a>
+property does not apply to the <a>'radialGradient'</a> element; thus,
+<a>'radialGradient'</a> elements are not directly rendered even if
+the <a>'display'</a> property is set to a value other than
+<span class="prop-value">none</span>, and <a>'radialGradient'</a> elements
+are available for referencing even when the <a>'display'</a> property on
+the <a>'radialGradient'</a> element or any of its ancestors is set to
+<span class="prop-value">none</span>.</p>
+
+<p id="ExampleRadGrad01"><span class="example-ref">Example radgrad01</span>
+shows how to fill a rectangle by referencing a radial gradient paint
+server.</p>
+
+<edit:example href='images/pservers/radgrad01.svg' name='radgrad01' description='fill a rectangle by referencing a radial gradient paint server' image='yes' link='yes'/>
+
+</edit:with>
+
+<h3 id="GradientStops">Gradient stops</h3>
+
+<edit:with element='stop'>
+
+<p id="StopElement">The ramp of colors to use on a gradient is defined
+by the <a>'stop'</a> elements that are child elements to either the
+<a>'linearGradient'</a> element or the <a>'radialGradient'</a>
+element.</p>
+
+<edit:elementsummary name='stop'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="StopElementOffsetAttribute"><span
+ class="adef">offset</span> = "<em><a
+ href="types.html#DataTypeNumber"><number></a> | <a
+ href="types.html#DataTypePercentage"><percentage></a></em>"</dt>
+ <dd>The <a>'offset'</a> attribute is
+ either a <a
+ href="types.html#DataTypeNumber"><number></a>
+ (usually ranging from 0 to 1) or a <a
+ href="types.html#DataTypePercentage"><percentage></a>
+ (usually ranging from 0% to 100%) which indicates where the
+ gradient stop is placed. For linear gradients, the <a>'offset'</a> attribute represents a
+ location along the <em>gradient vector</em>. For radial
+ gradients, it represents a percentage distance from (fx,fy)
+ to the edge of the outermost/largest circle.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p>The <a>'stop-color'</a> property indicates what color to use at that
+gradient stop. The keyword <span class="attr-value">currentColor</span> and
+ICC colors can be specified in the same manner as within a
+<a href="painting.html#SpecifyingPaint"><paint></a> specification for
+the <a>'fill'</a> and <a>'stroke'</a> properties.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StopColorProperty"><span class="propdef-title prop-name">'stop-color'</span></dt>
+ <dd>
+ <table summary="stop-color property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>currentColor |<br />
+ <a href="types.html#DataTypeColor"><color></a>
+ <a href="types.html#DataTypeICCColor"><icccolor></a>
+ |<br />
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>black</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'stop'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>The <a>'stop-opacity'</a> property defines the opacity of a given
+gradient stop.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StopOpacityProperty"><span class="propdef-title prop-name">'stop-opacity'</span></dt>
+ <dd>
+ <table summary="stop-opacity property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>1</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'stop'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+<p>Some notes on gradients:</p>
+
+<ul>
+ <li>Gradient offset values less than 0 (or less than 0%) are
+ rounded up to 0%. Gradient offset values greater than 1 (or
+ greater than 100%) are rounded down to 100%.</li>
+ <li>It is necessary that at least two stops defined to have a
+ gradient effect. If no stops are defined, then painting shall
+ occur as if 'none' were specified as the paint style. If one
+ stop is defined, then paint with the solid color fill using
+ the color defined for that gradient stop.</li>
+ <li>Each gradient offset value is required to be equal to or
+ greater than the previous gradient stop's offset value. If a
+ given gradient stop's offset value is not equal to or greater
+ than all previous offset values, then the offset value is
+ adjusted to be equal to the largest of all previous offset
+ values.</li>
+ <li>
+ If two gradient stops have the same offset value, then the
+ latter gradient stop controls the color value at the
+ overlap point. In particular:
+<pre>
+<stop offset="0" stop-color="white"/>
+<stop offset=".2" stop-color="red"/>
+<stop offset=".2" stop-color="blue"/>
+<stop offset="1" stop-color="black"/>
+</pre>
+ will have approximately the same effect as:
+<pre>
+<stop offset="0" stop-color="white"/>
+<stop offset=".1999999999" stop-color="red"/>
+<stop offset=".2" stop-color="blue"/>
+<stop offset="1" stop-color="black"/>
+</pre>
+ which is a gradient that goes smoothly from white to red,
+ then abruptly shifts from red to blue, and then goes
+ smoothly from blue to black.
+ </li>
+</ul>
+
+</edit:with>
+
+<h2 id="Patterns">Patterns</h2>
+
+<edit:with element='pattern'>
+
+<p id="PatternElement">A pattern is used to fill or stroke an object
+using a pre-defined graphic object which can be replicated ("tiled") at
+fixed intervals in <em>x</em> and <em>y</em> to cover the areas to be
+painted. Patterns are defined using a <a>'pattern'</a> element and then
+referenced by properties <a>'fill'</a> and <a>'stroke'</a> on a given
+<a href="intro.html#TermGraphicsElement">graphics element</a> to indicate
+that the given element shall be filled or stroked with the referenced
+pattern.</p>
+
+<p>Attributes <a>'x'</a>, <a>'y'</a>, <a>'width'</a>, <a>'height'</a>
+and <a>'patternUnits'</a> define a reference rectangle somewhere
+on the infinite canvas. The reference rectangle has its
+top/left at (<var>x</var>, <var>y</var>) and its bottom/right at
+(<var>x</var> + <var>width</var>, <var>y</var> + <var>height</var>). The tiling
+theoretically extends a series of such rectangles to infinity
+in X and Y (positive and negative), with rectangles starting at
+(<var>x</var> + m*<var>width</var>, <var>y</var> + n*
+<var>height</var>) for each possible integer value for <em>m</em> and
+<em>n</em>.</p>
+
+<edit:elementsummary name='pattern'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="PatternElementPatternUnitsAttribute"><span
+ class="adef">patternUnits</span> = "<em>userSpaceOnUse</em>
+ | <em>objectBoundingBox</em>"</dt>
+ <dd>Defines the coordinate system for attributes
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>.<br />
+ If <span
+ class="attr-value">patternUnits="userSpaceOnUse"</span>,
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>
+ represent values in the coordinate system that results from
+ taking the current user coordinate system in place at the
+ time when the <a>'pattern'</a>
+ element is referenced (i.e., the user coordinate system for
+ the element referencing the <a>'pattern'</a> element via a
+ <a>'fill'</a> or <a>'stroke'</a> property) and then
+ applying the transform specified by attribute <a>'patternTransform'</a>.<br />
+ If <span
+ class="attr-value">patternUnits="objectBoundingBox"</span>,
+ the user coordinate system for attributes
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>
+ is established
+ using the bounding box of the element to which the pattern
+ is applied (see <a
+ href="coords.html#ObjectBoundingBox">Object bounding box
+ units</a>) and then applying the transform specified by
+ attribute <a>'patternTransform'</a>.<br />
+ If attribute <a>'patternUnits'</a>
+ is not specified, then the effect is as if a value of <span
+ class="attr-value">'objectBoundingBox'</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="PatternElementPatternContentUnitsAttribute"><span
+ class="adef">patternContentUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
+ <dd>Defines the coordinate system for the contents of the
+ <a>'pattern'</a>. Note that this
+ attribute has no effect if attribute <a>'viewBox'</a> is specified.<br />
+ If <span class="attr-value">patternContentUnits="userSpaceOnUse"</span>,
+ the user coordinate system for the contents of the <a>'pattern'</a>
+ element is the coordinate system that results from taking
+ the current user coordinate system in place at the time
+ when the <a>'pattern'</a> element is referenced (i.e., the
+ user coordinate system for the element referencing the
+ <a>'pattern'</a> element via a <a>'fill'</a> or <a>'stroke'</a>
+ property) and then applying the transform specified by attribute
+ <a>'patternTransform'</a>.<br />
+ If <span
+ class="attr-value">patternContentUnits="objectBoundingBox"</span>,
+ the user coordinate system for the contents of the <a>'pattern'</a> element is
+ established using the bounding box of the element to which
+ the pattern is applied (see <a
+ href="coords.html#ObjectBoundingBox">Object bounding box
+ units</a>) and then applying the transform specified by
+ attribute <a>'patternTransform'</a>.<br />
+ If attribute <a>'patternContentUnits'</a> is not
+ specified, then the effect is as if a value of
+ <span class="attr-value">'userSpaceOnUse'</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="PatternElementPatternTransformAttribute"><span
+ class="adef">patternTransform</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeTransformList"><transform-list></a></span>"</dt>
+ <dd>Contains the definition of an optional additional
+ transformation from the pattern coordinate system onto the
+ target coordinate system (i.e., <span class='attr-value'>'userSpaceOnUse'</span> or
+ <span class='attr-value'>'objectBoundingBox'</span>). This allows for things such as skewing
+ the pattern tiles. This additional transformation matrix is
+ post-multiplied to (i.e., inserted to the right of) any
+ previously defined transformations, including the implicit
+ transformation necessary to convert from <a
+ href="coords.html#ObjectBoundingBox">object bounding box
+ units</a> to user space.<br />
+ If attribute <a>'patternTransform'</a> is not specified,
+ then the effect is as if an identity transform were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="PatternElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd><a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> indicate how the
+ pattern tiles are placed and spaced. These attributes
+ represent coordinates and values in the coordinate space
+ specified by the combination of attributes <a>'patternUnits'</a>
+ and <a>'patternTransform'</a>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of zero were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="PatternElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>See <a>'x'</a>.<br />
+ If the attribute is not specified, the effect is as if a
+ value of zero were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="PatternElementWidthAttribute"><span
+ class="adef">width</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>See <a>'x'</a>.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element (i.e., no
+ paint is applied).<br />
+ If the attribute is not specified, the effect is as if a
+ value of zero were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="PatternElementHeightAttribute"><span
+ class="adef">height</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>See <a>'x'</a>.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element (i.e., no
+ paint is applied).<br />
+ If the attribute is not specified, the effect is as if a
+ value of zero were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="PatternElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="linking.html#IRIReference">IRI
+ reference</a> to a different <a>'pattern'</a> element within the
+ current SVG document fragment. Any attributes which are
+ defined on the referenced element which are not defined on
+ this element are inherited by this element. If this element
+ has no children, and the referenced element does (possibly
+ due to its own <a>'xlink:href'</a>
+ attribute), then this element inherits the children from
+ the referenced element. Inheritance can be indirect to an
+ arbitrary level; thus, if the referenced element inherits
+ attributes or children due to its own <a>'xlink:href'</a> attribute, then the current
+ element can inherit those attributes or children.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="PatternElementPreserveAspectRatioAttribute">
+ <span class="adef">preserveAspectRatio</span> = "<span class='attr-value'><a href="coords.html#PreserveAspectRatioAttribute">[defer] <align> [<meetOrSlice>]</a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'preserveAspectRatio'</a>.
+ </p>
+ <p>
+ If the attribute is not specified, then the effect is as if a value of <span class="attr-value">xMidYMid meet</span> were specified.
+ </p>
+ <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ </dd>
+ </dl>
+ </div>
+
+<p>SVG's <a href="styling.html#UAStyleSheet">user agent style sheet</a> sets
+the <a>'overflow'</a> property for <a>'pattern'</a> elements to
+<span class="prop-value">hidden</span>, which causes a rectangular clipping
+path to be created at the bounds of the pattern tile. Unless the
+<a>'overflow'</a> property is overridden, any graphics within the pattern
+which goes outside of the pattern rectangle will be clipped. Note that if
+the <a>'overflow'</a> property is set to <span class="prop-value">visible</span>
+the rendering behavior for the pattern is undefined.
+<a href="pservers.html#ExamplePattern01">Example pattern01</a> below shows the
+effect of clipping to the pattern tile.</p>
+
+<p>The contents of the <a>'pattern'</a> are relative to a new coordinate
+system. If there is a <a>'viewBox'</a> attribute, then the new coordinate
+system is fitted into the region defined by the <a>'x'</a>, <a>'y'</a>,
+<a>'width'</a>, <a>'height'</a> and <a>'patternUnits'</a> attributes on the
+<a>'pattern'</a> element using the standard rules for <a>'viewBox'</a> and
+<a>'preserveAspectRatio'</a>. If there is no <a>'viewBox'</a> attribute, then
+the new coordinate system has its origin at (<var>x</var>, <var>y</var>),
+where <var>x</var> is established by the <a>'x'</a> attribute on the
+<a>'pattern'</a> element, and <var>y</var> is established by the <a>'y'</a>
+attribute on the <a>'pattern'</a> element. Thus, in the following example:</p>
+
+<pre>
+<pattern x="10" y="10" width="20" height="20">
+ <rect x="5" y="5" width="10" height="10"/>
+</pattern>
+</pre>
+
+<p>the rectangle has its top/left located 5 units to the right and 5
+units down from the origin of the pattern tile.</p>
+
+<p>The <a>'viewBox'</a> attribute introduces a supplemental transformation
+which is applied on top of any transformations necessary to create a new
+pattern coordinate system due to attributes <a>'x'</a>, <a>'y'</a>,
+<a>'width'</a>, <a>'height'</a> and <a>'patternUnits'</a>.</p>
+
+<p><a href="styling.html#SVGStylingProperties">Properties</a> inherit into the
+<a>'pattern'</a> element from its ancestors; properties do <em>not</em>
+inherit from the element referencing the <a>'pattern'</a> element.</p>
+
+<p><a>'pattern'</a> elements are never rendered directly; their only usage is
+as something that can be referenced using the <a>'fill'</a> and
+<a>'stroke'</a> properties. The <a>'display'</a> property does not apply to
+the <a>'pattern'</a> element; thus, <a>'pattern'</a> elements are not directly
+rendered even if the <a>'display'</a> property is set to a value other than
+<span class="prop-value">none</span>, and <a>'pattern'</a> elements are
+available for referencing even when the <a>'display'</a> property on the
+<a>'pattern'</a> element or any of its ancestors is set to
+<span class="prop-value">none</span>.</p>
+
+<p><a href="script.html#EventAttributes">Event attributes</a> and
+<a href="svgdom.html#EventListeners">event listeners</a> attached to the
+contents of a <a>'pattern'</a> element are not processed; only the rendering
+aspects of <a>'pattern'</a> elements are processed.</p>
+
+<p id="ExamplePattern01"><span class="example-ref">Example pattern01</span>
+shows how to fill a rectangle by referencing a pattern paint server. Note how
+the blue stroke of each triangle has been clipped at the top and the left.
+This is due to SVG's <a href="styling.html#UAStyleSheet">user agent style sheet</a>
+setting the <a>'overflow'</a> property for <a>'pattern'</a> elements to
+<span class="prop-value">hidden</span>, which causes the pattern to be clipped
+to the bounds of the pattern tile.</p>
+
+<edit:example href='images/pservers/pattern01.svg' name='pattern01' description='fill a rectangle by referencing a pattern paint server' image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGGradientElement">Interface SVGGradientElement</h3>
+
+<edit:interface name='::svg::SVGGradientElement'/>
+
+<h3 id="InterfaceSVGLinearGradientElement">Interface SVGLinearGradientElement</h3>
+
+<edit:with element='linearGradient'>
+<edit:interface name='::svg::SVGLinearGradientElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGRadialGradientElement">Interface SVGRadialGradientElement</h3>
+
+<edit:with element='radialGradient'>
+<edit:interface name='::svg::SVGRadialGradientElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGStopElement">Interface SVGStopElement</h3>
+
+<edit:with element='stop'>
+<edit:interface name='::svg::SVGStopElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGPatternElement">Interface SVGPatternElement</h3>
+
+<edit:with element='pattern'>
+<edit:interface name='::svg::SVGPatternElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/publish.xml Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,72 @@
+<!-- Publication script configuration for SVG 1.1 (Second Edition). -->
+
+<publish-conf xmlns='http://mcc.id.au/ns/local'>
+ <title>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</title>
+ <short-title>SVG 1.1 (Second Edition)</short-title>
+ <maturity>REC</maturity>
+ <output use-publish-directory='true'/>
+
+ <publication-date>2011-08-02</publication-date>
+
+ <versions>
+ <cvs href='http://dev.w3.org/SVG/profiles/1.1F2/publish/'/>
+ <this href='http://www.w3.org/TR/2011/REC-SVG11-20110802/'/>
+ <previous href='http://www.w3.org/TR/2011/PR-SVG11-20110609/'/>
+ <latest href='http://www.w3.org/TR/SVG11/'/>
+ <latestrec href='http://www.w3.org/TR/SVG/'/>
+ </versions>
+
+ <definitions href='definitions.xml'/>
+ <interfaces idl='svg.idlx'/>
+
+ <toc href='expanded-toc.html'/>
+ <elementindex href='eltindex.html'/>
+ <attributeindex href='attindex.html'/>
+ <propertyindex href='propidx.html'/>
+
+ <index name='index'/>
+ <page name='expanded-toc'/>
+ <chapter name='intro'/>
+ <chapter name='concepts'/>
+ <chapter name='render'/>
+ <chapter name='types'/>
+ <chapter name='struct'/>
+ <chapter name='styling'/>
+ <chapter name='coords'/>
+ <chapter name='paths'/>
+ <chapter name='shapes'/>
+ <chapter name='text'/>
+ <chapter name='painting'/>
+ <chapter name='color'/>
+ <chapter name='pservers'/>
+ <chapter name='masking'/>
+ <chapter name='filters'/>
+ <chapter name='interact'/>
+ <chapter name='linking'/>
+ <chapter name='script'/>
+ <chapter name='animate'/>
+ <chapter name='fonts'/>
+ <chapter name='metadata'/>
+ <chapter name='backward'/>
+ <chapter name='extend'/>
+ <appendix name='svgdtd'/>
+ <appendix name='svgdom'/>
+ <appendix name='idl'/>
+ <appendix name='java'/>
+ <appendix name='escript'/>
+ <appendix name='implnote'/>
+ <appendix name='conform'/>
+ <appendix name='access'/>
+ <appendix name='i18n'/>
+ <appendix name='minimize'/>
+ <appendix name='refs'/>
+ <appendix name='eltindex'/>
+ <appendix name='attindex'/>
+ <appendix name='propidx'/>
+ <appendix name='feature'/>
+ <appendix name='mimereg'/>
+ <appendix name='changes'/>
+ <!--
+ <appendix name='indexlist'/>
+ -->
+</publish-conf>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/refs.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,576 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>References</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>References</h1>
+
+<h2 id="NormativeReferences">Normative references</h2>
+
+<dl class="references">
+ <dt id="ref-ATAG"><strong class="normref">[ATAG]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2000/REC-ATAG10-20000203/">Authoring Tool Accessibility Guidelines 1.0</a></cite>,
+ J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile, eds.
+ World Wide Web Consortium, 03 February 2000.
+ <br/>This edition of ATAG 1.0 is http://www.w3.org/TR/2000/REC-ATAG10-20000203/.
+ <br/>The <a href="http://www.w3.org/TR/ATAG10/">latest edition of ATAG 1.0</a> is available at
+ http://www.w3.org/TR/ATAG10/.
+ </dd>
+
+ <dt id="ref-BCP47"><strong class="normref">[BCP47]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/bcp/bcp47.txt">IETF BCP 47</a></cite>
+ Tags for Identifying Languages, A. Phillips and M. Davis, Editors, September 2009.
+ <br/>Available at http://www.rfc-editor.org/rfc/bcp/bcp47.txt.
+ </dd>
+
+ <dt id="ref-COLORIMETRY"><strong class="normref">[COLORIMETRY]</strong></dt>
+ <dd>
+ <cite><a href="http://www.cie.co.at/publ/abst/15-2004.html">Colorimetry, Third Edition</a></cite>,
+ Commission Internationale de l'Eclairage, CIE Publication 15:2004,
+ ISBN 3-901-906-33-9.
+ <br/>Available at http://www.cie.co.at/publ/abst/15-2004.html.
+ </dd>
+
+ <dt id="ref-CSS2"><strong class="normref">[CSS2]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">Cascading Style Sheets, level 2</a></cite>,
+ B. Bos, H. W. Lie, C. Lilley, I. Jacobs, eds.
+ World Wide Web Consortium, 11 April 2008.
+ <br/>This edition of CSS2 is http://www.w3.org/TR/2008/REC-CSS2-20080411/ and is no longer maintained.
+ <br/>The <a href="http://www.w3.org/TR/CSS2/">latest edition of CSS2</a> is available at
+ http://www.w3.org/TR/CSS2/. The CSS Working Group encourages authors and
+implementors to reference <a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> (or its <a href="http://www.w3.org/TR/CSS/">successor</a>) instead of this
+document and,
+when features common to CSS2 and CSS 2.1 are defined differently
+to follow the definitions in CSS 2.1. A list of <a href="http://www.w3.org/TR/CSS21/changes.html">changes between CSS2 and CSS 2.1</a> may be helpful.
+In particular, future editions of SVG are expected to reference CSS 2.1 and CSS 3 Fonts.
+ </dd>
+
+ <dt id="ref-DOM1"><strong class="normref">[DOM1]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/">Document Object Model (DOM) Level 1 Specification</a></cite>,
+ V. Apparao, S. Byrne, M. Champion, S. Isaacs, I. Jacobs, A. Le Hors, G. Nicol, J. Robie, R. Sutor, C. Wilson, L. Wood, eds.
+ World Wide Web Consortium, 01 October 1998.
+ <br/>This edition of DOM Level 1 is http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/.
+ <br/>The <a href="http://www.w3.org/TR/REC-DOM-Level-1/">latest edition of DOM Level 1</a> is available at
+ http://www.w3.org/TR/REC-DOM-Level-1/.
+ </dd>
+
+ <dt id="ref-DOM2" ><strong class="normref">[DOM2]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/">Document Object Model (DOM) Level 2 Core Specification</a></cite>,
+ A. Le Hors, P. Le Hégaret, L. Wood, G. Nicol, J. Robie, M. Champion, S. Byrne, eds.
+ World Wide Web Consortium, 13 November 2000.
+ <br/>This edition of DOM Level 2 Core is http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/.
+ <br/>The <a href="http://www.w3.org/TR/DOM-Level-2-Core/">latest edition of DOM Level 2 Core</a> is available at
+ http://www.w3.org/TR/DOM-Level-2-Core/.
+ </dd>
+
+ <dt id="ref-DOM2EVENTS"><strong class="normref">[DOM2EVENTS]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/">Document Object Model (DOM) Level 2 Events Specification</a></cite>,
+ T. Pixley, ed.
+ World Wide Web Consortium, 13 November 2000.
+ <br/>This edition of DOM 2 Events is http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/.
+ <br/>The <a href="http://www.w3.org/TR/DOM-Level-2-Events/">latest edition of DOM 2 Events</a> is available at
+ http://www.w3.org/TR/DOM-Level-2-Events/.
+ </dd>
+
+ <dt id="ref-DOM2STYLE" ><strong class="normref">[DOM2STYLE]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">Document Object Model (DOM) Level 2 Style Specification</a></cite>,
+ C. Wilson, P. Le Hégaret, V. Apparao, eds.
+ World Wide Web Consortium, 13 November 2000.
+ <br/>This edition of DOM Level 2 Style is http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/.
+ <br/>The <a href="http://www.w3.org/TR/DOM-Level-2-Style/">latest edition of DOM Level 2 Style</a> is available at
+ http://www.w3.org/TR/DOM-Level-2-Style/.
+ </dd>
+
+ <dt id="ref-DOM2VIEWS"><strong class="normref">[DOM2VIEWS]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Views-20001113/">Document Object Model (DOM) Level 2 Views Specification</a></cite>,
+ A. Le Hors, L. Cable, eds.
+ World Wide Web Consortium, 13 November 2000.
+ <br/>This edition of DOM 2 Views is http://www.w3.org/TR/2000/REC-DOM-Level-2-Views-20001113/.
+ <br/>The <a href="http://www.w3.org/TR/DOM-Level-2-Views/">latest edition of DOM 2 Views</a> is available at
+ http://www.w3.org/TR/DOM-Level-2-Views/.
+ </dd>
+
+ <dt id="ref-ECMA-262"><strong class="normref">[ECMA-262]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript Language Specification, 5th Edition</a></cite>,
+ M. Cowlishaw, ed.
+ Ecma International, December 2009.
+ <br/>Available at http://www.ecma-international.org/publications/standards/Ecma-262.htm.
+ </dd>
+
+ <dt id="ref-ICC42"><strong class="normref">[ICC42]</strong></dt>
+ <dd>
+ <cite><a href="http://www.color.org/ICC1v42_2006-05.pdf">Specification ICC.1:2004-10, File Format for Color Profiles, Profile Version 4.2.0.0</a>
+ with errata incorporated, 5/22/20006</cite>,
+ International Color Consortium, 2006.<br />
+ Available at http://www.color.org/ICC1v42_2006-05.pdf.<br />
+ This specification is substantially identical to ISO 15076-1:2005.<br />
+ The ICC list some <a href="http://www.color.org/icc_specs2.xalter">approved revisions to ICC.1:2004-10</a>.
+ </dd>
+
+ <dt id="ref-ISO8601"><strong class="normref">[ISO8601]</strong></dt>
+ <dd>
+ <cite><a href="http://www.iso.org/iso/catalogue_detail?csnumber=40874">Data elements and interchange formats - Information interchange - Representation of dates and times</a></cite>,
+ International Organization for Standardization, 2004.
+ Available at http://www.iso.org/iso/catalogue_detail?csnumber=40874.
+ </dd>
+
+ <dt id="ref-JPEG"><strong class="normref">[JPEG]</strong></dt>
+ <dd>
+ <cite><a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=18902">ISO/IEC 10918-1:1994/Cor 1:2005: Information Technology — Digital Compression And Coding Of Continuous-tone Still Images</a></cite>,
+ International Organization for Standardization, September 2005.
+ <br/>Available at http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=18902.
+ <br/>An older version is available at <a href="http://www.w3.org/Graphics/JPEG/itu-t81.pdf">http://www.w3.org/Graphics/JPEG/itu-t81.pdf</a>.
+ </dd>
+
+ <dt id="ref-GML"><strong class="normref">[GML]</strong></dt>
+ <dd>
+ <cite><a href="http://portal.opengeospatial.org/files/?artifact_id=20509">OpenGIS Geography Markup Language (GML) Encoding Standard, version 3.2.1</a></cite>,
+ C. Portele, ed.
+ Open GIS Consortium, 27 August 2007.
+ <br/>Available at http://portal.opengeospatial.org/files/?artifact_id=20509.
+ </dd>
+
+ <dt id="ref-PNG"><strong class="normref">[PNG]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2003/REC-PNG-20031110/">Portable Network Graphics (PNG) Specification (Second Edition)</a>:
+ Information technology — Computer graphics and image processing — Portable Network Graphics (PNG): Functional specification, ISO/IEC 15948:2003 (E)</cite>,
+ D. Duce, ed. World Wide Web Consortium, 10 November 2003.
+ <br/>This edition of PNG is http://www.w3.org/TR/2003/REC-PNG-20031110/.
+ <br/>The <a href="http://www.w3.org/TR/PNG/">latest edition of PNG</a> is available at
+ http://www.w3.org/TR/PNG/.
+ </dd>
+
+ <dt id="ref-PORTERDUFF"><strong class="normref">[PORTERDUFF]</strong></dt>
+ <dd>
+ <cite>Compositing Digital Images</cite>,
+ T. Porter and T. Duff.
+ SIGGRAPH '84 Conference Proceedings, Association for Computing Machinery, Volume 18, Number 3, July 1984.
+ </dd>
+
+ <dt id="ref-RFC1951"><strong class="normref">[RFC1951]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc1951.txt">DEFLATE Compressed Data Format Specification version 1.3</a></cite>,
+ P. Deutsch, May 1996.<br />
+ Available at http://www.ietf.org/rfc/rfc1951.txt.
+ </dd>
+
+ <dt id="ref-RFC1952"><strong class="normref">[RFC1952]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc1952.txt">GZIP file format specification version 4.3</a></cite>,
+ P. Deutsch, May 1996.<br />
+ Available at http://www.ietf.org/rfc/rfc1952.txt.
+ </dd>
+
+ <dt id="ref-RFC2046"><strong class="normref">[RFC2046]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc2046.txt">Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types</a></cite>,
+ N. Freed and N. Borenstein, November 1996.
+ (Note that this RFC obsoletes RFC 1521, RFC 1522 and RFC 1590.)
+ <br/>Available at http://www.ietf.org/rfc/rfc2046.txt.
+ </dd>
+
+ <dt id="ref-RFC2119"><strong class="normref">[RFC2119]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a></cite>,
+ S. Bradner, March 1997.
+ <br/>Available at http://www.ietf.org/rfc/rfc2119.txt.
+ </dd>
+
+ <dt id="ref-RFC2318"><strong class="normref">[RFC2318]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc2318.txt">The text/css Media Type</a></cite>,
+ H. Lie, B. Bos, C. Lilley, March 1998.<br />
+ Available at http://www.ietf.org/rfc/rfc2318.txt.
+ </dd>
+
+ <dt id="ref-RFC2397"><strong class="normref">[RFC2397]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc2397">The "data" URL scheme</a></cite>,
+ L. Masinter, August 1998.
+ <br/>Available at http://www.ietf.org/rfc/rfc2397.
+ </dd>
+
+ <dt id="ref-RFC2616"><strong class="normref">[RFC2616]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc2616">Hypertext Transfer Protocol -- HTTP/1.1</a></cite>,
+ R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen, L. Masinter, P. Leach and T. Berners-Lee, June 1999.
+ (Note that this RFC obsoletes RFC 2068.)
+ <br/>Available at http://www.ietf.org/rfc/rfc2616.
+ </dd>
+
+ <dt id="ref-RFC2732"><strong class="normref">[RFC2732]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc2732.txt">Format for Literal IPv6 Addresses in URL's</a></cite>,
+ R. Hinden, B. Carpenter, L. Masinter, December 1999.<br />
+ Available at http://www.ietf.org/rfc/rfc2732.txt.
+ </dd>
+
+ <dt id="ref-RFC3023"><strong class="normref">[RFC3023]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc3023.txt">XML Media Types</a></cite>,
+ M. Murata, S. St. Laurent, D. Kohn, January 2001.
+ <br/>Available at http://www.ietf.org/rfc/rfc3023.
+ </dd>
+
+ <dt id="ref-RFC3629" ><strong class="normref">[RFC3629]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc3629.txt">UTF-8, a transformation format of ISO 10646</a></cite>,
+ F. Yergeau, November 2003.
+ (Note that this RFC obsoletes RFC 2044 and RFC 2279.)
+ <br/>Available at http://www.ietf.org/rfc/rfc3629.txt.
+ </dd>
+
+ <dt id="ref-RFC3986"><strong class="normref">[RFC3986]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc3986">Uniform Resource Identifiers (URI): Generic Syntax</a></cite>,
+ T. Berners-Lee, R. Fielding, L. Masinter, January 2005.
+ (Note that RFC 3986 updates RFC 1738 and obsoletes RFC 2732, RFC 2396 and RFC 1808.)
+ <br/>Available at http://tools.ietf.org/html/rfc3986.
+ </dd>
+
+ <dt id="ref-RFC3987"><strong class="normref">[RFC3987]</strong></dt>
+ <dd>
+ <cite><a href="http://tools.ietf.org/html/rfc3987">Internationalized Resource Identifiers (IRIs)</a></cite>,
+ M. Dürst, M. Suignard, January 2005.
+ <br/>Available at http://tools.ietf.org/html/rfc3987.
+ </dd>
+
+ <dt id="ref-RFC4329"><strong class="normref">[RFC4329]</strong></dt>
+ <dd>
+ <cite><a href="http://www.ietf.org/rfc/rfc4329.txt">Scripting Media Types</a></cite>,
+ B. Höhrmann, April 2006.
+ <br/>Available at http://www.ietf.org/rfc/rfc4329.txt.
+ </dd>
+
+ <dt id="ref-SMILANIM"><strong class="normref">[SMILANIM]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">SMIL Animation</a></cite>,
+ P. Schmitz, A. Cohen.
+ World Wide Web Consortium, 04 September 2001.
+ <br/>This edition of SMIL Animation is http://www.w3.org/TR/2001/REC-smil-animation-20010904/.
+ <br/>The <a href="http://www.w3.org/TR/smil-animation/">latest edition of SMIL Animation</a> is available at
+ http://www.w3.org/TR/smil-animation/.
+ </dd>
+
+ <dt id="ref-SRGB"><strong class="normref">[SRGB]</strong></dt>
+ <dd>
+ <cite><a href="http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf">IEC 61966-2-1/Amd 1:2003
+ : Multimedia systems and equipment — Colour measurement and management — Part 2-1: Colour management — Default RGB colour space — sRGB</a></cite>,
+ International Electrotechnical Commission, 2003.
+ <br/>Available at <a href="http://webstore.iec.ch/webstore/webstore.nsf/artnum/025408">http://webstore.iec.ch/webstore/webstore.nsf/artnum/025408</a>
+ and at <a href="http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf">http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf</a>.<br />
+ See also <a href="http://www.color.org/chardata/rgb/srgb.xalter">http://www.color.org/chardata/rgb/srgb.xalter</a>
+ for technical data and color profiles.
+ </dd>
+
+ <dt id="ref-UAX9"><strong class="normref">[UAX9]</strong></dt>
+ <dd>
+ <cite><a href="http://www.unicode.org/reports/tr9/">Unicode Bidirectional Algorithm</a></cite>,
+ The Unicode Standard Annex #9. The Unicode Consortium, 2010.
+ <br />Available at http://www.unicode.org/reports/tr9/.
+ </dd>
+
+ <dt id="ref-UNICODE"><strong class="normref">[UNICODE]</strong></dt>
+ <dd>
+ <cite><a href="http://www.unicode.org/versions/Unicode6.0.0/">The Unicode Standard, Version 6.0.0</a></cite>,
+ The Unicode Consortium, Mountain View, CA, 2011. ISBN 978-1-936213-01-6.
+ <br />Available at http://www.unicode.org/versions/Unicode6.0.0.
+ </dd>
+
+ <dt id="ref-XLINK"><strong class="normref">[XLINK]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2010/REC-xlink11-20100506/">XML Linking Language (XLink) Version 1.1</a></cite>,
+ S. DeRose, E. Maler, D. Orchard, N. Walsh, eds.
+ World Wide Web Consortium, 06 May 2010.
+ <br/>This edition of XLink 1.1 is http://www.w3.org/TR/2010/REC-xlink11-20100506/.
+ <br/>The <a href="http://www.w3.org/TR/xlink11/">latest edition of XLink 1.1</a> is available at
+ http://www.w3.org/TR/xlink11/.
+ </dd>
+
+ <dt id="ref-XML10"><strong class="normref">[XML10]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2008/REC-xml-20081126/">Extensible Markup Language (XML) 1.0 (Fifth Edition)</a></cite>,
+ T. Bray, J. Paoli, C. M. Sperberg-McQueen, E. Maler, F. Yergeau, eds.
+ World Wide Web Consortium, 26 November 2008.
+ <br/>This edition of XML 1.0 is http://www.w3.org/TR/2008/REC-xml-20081126/.
+ <br/>The <a href="http://www.w3.org/TR/xml/">latest edition of XML 1.0</a> is available at
+ http://www.w3.org/TR/xml/.
+ </dd>
+
+ <dt id="ref-XML-BASE"><strong class="normref">[XML-BASE]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2009/REC-xmlbase-20090128/">XML Base</a> (Second Edition)</cite>,
+ J. Marsh, R. Tobin, eds.
+ World Wide Web Consortium, 28 January 2009.
+ <br/>This edition of XML Base is http://www.w3.org/TR/2009/REC-xmlbase-20090128/.
+ <br/>The <a href="http://www.w3.org/TR/xmlbase/">latest edition of XML Base</a> is available at
+ http://www.w3.org/TR/xmlbase/.
+ </dd>
+
+ <dt id="ref-XML-NS"><strong class="normref">[XML-NS]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2009/REC-xml-names-20091208/">Namespaces in XML 1.0 (Third Edition)</a></cite>,
+ T. Bray, D. Hollander, A. Layman, R. Tobin, H. Thompson, eds.
+ World Wide Web Consortium, 8 December 2009.
+ <br/>This edition of Namespaces in XML is http://www.w3.org/TR/2009/REC-xml-names-20091208/.
+ <br/>The <a href="http://www.w3.org/TR/xml-names/">latest edition of Namespaces in XML</a> is available at
+ http://www.w3.org/TR/xml-names/.
+ </dd>
+
+ <dt id="ref-XML-SS"><strong class="normref">[XML-SS]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/">Associating Style Sheets with XML documents, Version 1.0</a></cite>,
+ J. Clark, ed.
+ World Wide Web Consortium, 29 June 1999.
+ <br/>This edition of XML Stylsheet is http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/.
+ <br/>The <a href="http://www.w3.org/TR/xml-stylesheet/">latest edition of XML Stylesheet</a> is available at
+ http://www.w3.org/TR/xml-stylesheet/.
+ </dd>
+
+ <dt id="ref-XSL"><strong class="normref">[XSL]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2006/REC-xsl11-20061205/">Extensible Stylesheet Language (XSL) Version 1.1</a></cite>,
+ A. Berglund, ed.
+ World Wide Web Consortium, 05 December 2006.
+ <br/>This edition of XSL is http://www.w3.org/TR/2006/REC-xsl11-20061205/.
+ <br/>The <a href="http://www.w3.org/TR/xsl/">latest edition of XSL</a> is available at
+ http://www.w3.org/TR/xsl/.
+ </dd>
+</dl>
+
+<h2 id="InformativeReferences">Informative references</h2>
+
+<dl class="references">
+ <dt id="ref-CHARMOD"><strong class="informref">[CHARMOD]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2005/REC-charmod-20050215/">Character Model for the World Wide Web 1.0: Fundametnals</a></cite>,
+ M. Dürst, F. Yergeau, R. Ishida, M. Wolf, T. Texin, eds.
+ World Wide Web Consortium, 15 February 2005.
+ <br/>This edition of Charmod Fundamentals is http://www.w3.org/TR/2005/REC-charmod-20050215/.
+ <br/>The <a href="http://www.w3.org/TR/charmod/">latest edition of Charmod Fundamentals</a> is available at
+ http://www.w3.org/TR/charmod/.
+ </dd>
+
+ <dt id="ref-DCORE"><strong class="informref">[DCORE]</strong></dt>
+ <dd>
+ <cite><a href="http://dublincore.org/">Dublin Core Metadata Initiative</a></cite>.
+ <br/>Available at http://dublincore.org/.
+ </dd>
+
+ <dt id="ref-DOM3"><strong class="informref">[DOM3]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/">Document Object Model (DOM) Level 3 Core Specification</a></cite>,
+ A. Le Hors, P. Le Hégaret, L. Wood, G. Nicol, J. Robie, M. Champion, S. Byrne, eds.
+ World Wide Web Consortium, 07 April 2004.
+ <br/>This edition of DOM 3 Core is http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/.
+ <br/>The <a href="http://www.w3.org/TR/DOM-Level-3-Core/">latest edition of DOM 3 Core</a> is available at
+ http://www.w3.org/TR/DOM-Level-3-Core/.
+ </dd>
+
+ <dt id="ref-FOLEY-VANDAM"><strong class="informref">[FOLEY-VANDAM]</strong></dt>
+ <dd>
+ <cite>Computer Graphics: Principles and Practice</cite>, Second Edition,
+ J. D. Foley, A. van Dam, S. K. Feiner, J. F. Hughes, R. L. Phillips.
+ Addison-Wesley, 1995.
+ </dd>
+
+ <dt id="ref-HTML4"><strong class="informref">[HTML4]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/1999/REC-html401-19991224/">HTML 4.01 Specification</a></cite>,
+ D. Raggett, A. Le Hors, I. Jacobs.
+ World Wide Web Consortium, 24 December 1999.
+ <br/>This edition of HTML 4 is http://www.w3.org/TR/1999/REC-html401-19991224/.
+ <br/>The <a href="http://www.w3.org/TR/html4/">latest edition of HTML 4</a> is available at
+ http://www.w3.org/TR/html4/.
+ </dd>
+
+ <dt id="ref-MATHML"><strong class="informref">[MATHML]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2010/REC-MathML3-20101021/">Mathematical Markup Language (MathML) Version 3.0</a></cite>,
+ D. Carlisle, P. Ion, R. Miner, eds.
+ World Wide Web Consortium, 21 October 2010.
+ <br/>This edition of MathML 3 is http://www.w3.org/TR/2010/REC-MathML3-20101021/.
+ <br/>The <a href="http://www.w3.org/TR/MathML3/">latest edition of MathML 3</a> is available at
+ http://www.w3.org/TR/MathML3/.
+ </dd>
+
+ <dt id="ref-MIMETYPES"><strong class="informref">[MIMETYPES]</strong></dt>
+ <dd>
+ <cite><a href="http://www.iana.org/assignments/media-types/">MIME Media Types</a></cite>,
+ Internet Assigned Numbers Authority.
+ <br/>Available at http://www.iana.org/assignments/media-types/.
+ </dd>
+
+ <dt id="ref-NVDL"><strong class="informref">[NVDL]</strong></dt>
+ <dd>
+ <cite><a href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c038615_ISO_IEC_19757-4_2006(E).zip">Information Technology — Document Schema Definition Languages (DSDL) — Part 4: Namespace-based Validation Dispatching Language: ISO/IEC 19757-4:2006/Cor 1:2008</a></cite>,
+ International Organization for Standardization, December 2005.
+ <br/>Available at http://standards.iso.org/ittf/PubliclyAvailableStandards/c038615_ISO_IEC_19757-4_2006(E).zip.<br />
+ See also <a href="http://nvdl.org/">http://nvdl.org/</a>.
+ </dd>
+
+ <dt id="ref-OPENTYPE"><strong class="informref">[OPENTYPE]</strong></dt>
+ <dd>
+ <cite><a href="http://www.microsoft.com/typography/otspec160/">OpenType Specification Version 1.6</a></cite>.
+ July 2009.
+ <br/>Available at http://www.microsoft.com/typography/otspec160/.<br />
+ (Note that this is technically equivalent to ISO/IEC 14496-22:2009 (Second Edition) "Open Font Format",
+ available at <a href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip">http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip</a>.)
+ </dd>
+
+ <dt id="ref-RDF-PRIMER"><strong class="informref">[RDF-PRIMER]</strong></dt>
+ <dd>
+ <cite class='w3crec'><a href="http://www.w3.org/TR/2004/REC-rdf-primer-20040210/">RDF Primer</a></cite>,
+ F. Manolas, E. Miller, eds.
+ World Wide Web Consortium, 10 February 2004.
+ <br/>This edition of RDF Primer is http://www.w3.org/TR/2004/REC-rdf-primer-20040210/.
+ <br/>The <a href="http://www.w3.org/TR/rdf-primer/">latest edition of RDF Primer</a> is available at
+ http://www.w3.org/TR/rdf-primer/.
+ </dd>
+
+ <dt id="ref-SCHEMA2"><strong class="informref">[SCHEMA2]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2004/REC-xmlschema-2-20041028/">XML Schema Part 2: Datatypes Second Edition</a></cite>.
+ P. Biron, A. Malhotra, eds.
+ World Wide Web Consortium, 28 October 2004.
+ (See also <a href="http://www.w3.org/TR/2005/NOTE-xml11schema10-20050511/"><cite>Processing XML 1.1 documents with XML Schema 1.0 processors</cite></a>.)
+ <br/>This edition of XML Schema Part 2 is http://www.w3.org/TR/2004/REC-xmlschema-2-20041028/.
+ <br/>The <a href="http://www.w3.org/TR/xmlschema-2/">latest edition of XML Schema Part 2</a> is available at
+ http://www.w3.org/TR/xmlschema-2/.
+ </dd>
+
+ <dt id="ref-SELECTORS"><strong class="informref">[SELECTORS]</strong></dt>
+ <dd>
+ <cite class="w3cpr"><a href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215/">Selectors Level 3</a></cite>,
+ T. Çelik, E. Etemad, D. Glazman, I. Hickson, P. Linss, J. Williams, eds.
+ World Wide Web Consortium, 15 December 2009.
+ <br/>This edition of Selectors Level 3 is http://www.w3.org/TR/2009/PR-css3-selectors-20091215/.
+ <br/>The <a href="http://www.w3.org/TR/css3-selectors/">latest edition of Selectors Level 3</a> is available at
+ http://www.w3.org/TR/css3-selectors/.
+ </dd>
+
+
+ <dt id="ref-SVG-ACCESS"><strong class="informref">[SVG-ACCESS]</strong></dt>
+ <dd>
+ <cite class="w3cnote"><a href="http://www.w3.org/TR/2000/NOTE-SVG-access-20000807/">Accessibility Features of SVG</a></cite>,
+ C. McCathieNevile, M. Koivunen, eds.
+ World Wide Web Consortium, 07 August 2000.
+ <br/>This edition of Accessibility Features of SVG is http://www.w3.org/TR/2000/NOTE-SVG-access-20000807/.
+ <br/>The <a href="http://www.w3.org/TR/SVG-access/">latest edition of Accessibility Features of SVG</a> is available at
+ http://www.w3.org/TR/SVG-access/.
+ </dd>
+
+ <dt id="ref-SVG-COMPOSITING"><strong class="informref">[SVG-COMPOSITING]</strong></dt>
+ <dd>
+ <cite class="w3cwd"><a href="http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/">SVG Compositing Specification</a></cite>,
+ A. Grasso, ed.
+ World Wide Web Consortium, 30 April 2009.
+ <br/>This edition of SVG Compositing is http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/.
+ <br/>The <a href="http://www.w3.org/TR/SVGCompositing/">latest edition of SVG Compositing</a> is available at
+ http://www.w3.org/TR/SVGCompositing/.
+ </dd>
+
+ <dt id="ref-SMIL"><strong class="informref">[SMIL]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">Synchronized Multimedia Integration Language (SMIL 3.0)</a></cite>,
+ D. Bulterman <em>et al.</em>, eds. 01 December 2008.
+ <br/>This edition of SMIL is http://www.w3.org/TR/2008/REC-SMIL3-20081201/.
+ <br/>The <a href="http://www.w3.org/TR/smil/">latest edition of SMIL</a> is available at http://www.w3.org/TR/smil/.
+ </dd>
+
+ <dt id="ref-SVG10"><strong class="informref">[SVG10]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2001/REC-SVG-20010904/">Scalable Vector Graphics (SVG) 1.0</a></cite>,
+ J. Ferraiolo, ed. 04 September 2001.
+ <br/>This edition of SVG 1.0 is http://www.w3.org/TR/2003/REC-SVG11-20030114/.
+ <br/>The <a href="http://www.w3.org/TR/SVG10/">latest edition of SVG 1.0</a> is available at
+ http://www.w3.org/TR/SVG10/.
+ </dd>
+
+ <dt id="ref-UAAG"><strong class="informref">[UAAG]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2002/REC-UAAG10-20021217/">User Agent Accessibility Guidelines 1.0</a></cite>,
+ I. Jacobs, J. Gunderson, E. Hansen, eds. 17 December 2002.
+ <br/>This edition of UAAG is http://www.w3.org/TR/2002/REC-UAAG10-20021217/.
+ <br/>The <a href="http://www.w3.org/TR/UAAG10/">latest edition of UAAG</a> is available at
+ http://www.w3.org/TR/UAAG10/.
+ </dd>
+
+ <dt id="ref-WCAG2"><strong class="informref">[WCAG2]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">Web Content Accessibility Guidelines (WCAG) 2.0</a></cite>,
+ B. Caldwell, M. Cooper, L. Reid, G. Vanderheiden, eds.
+ World Wide Web Consortium, 11 December 2008.
+ <br/>This edition of WCAG 2.0 is http://www.w3.org/TR/2008/REC-WCAG20-20081211/.
+ <br/>The <a href="http://www.w3.org/TR/WCAG20/">latest edition of WCAG 2.0</a> is available at
+ http://www.w3.org/TR/WCAG20/.
+ </dd>
+
+ <dt id="ref-WINDOW"><strong class="informref">[WINDOW]</strong></dt>
+ <dd>
+ <cite class="w3cwd"><a href="http://www.w3.org/TR/2006/WD-Window-20060407/">Window Object 1.0</a></cite>,
+ I. Davis, M. Stachowiak, eds.
+ World Wide Web Consortium, work in progress, 07 April 2006.
+ <br/>This edition of Window Object 1.0 is http://www.w3.org/TR/2006/WD-Window-20060407/.
+ <br/>The <a href="http://www.w3.org/TR/Window/">latest edition of Window Object 1.0</a> is available at
+ http://www.w3.org/TR/Window/.
+ </dd>
+
+ <dt id="ref-XHTML"><strong class="informref">[XHTML]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2002/REC-xhtml1-20020801/">XHTML™ 1.0: The Extensible HyperText Markup Language (Second Edition)</a></cite>,
+ S. Pemberton, ed.
+ World Wide Web Consortium, 1 August 2002.
+ <br/>This edition of XHTML 1 is http://www.w3.org/TR/2002/REC-xhtml1-20020801/.
+ <br/>The <a href="http://www.w3.org/TR/xhtml1/">latest edition of XHTML 1</a> is available at
+ http://www.w3.org/TR/xhtml1/.
+ </dd>
+
+ <dt id="ref-XHTMLplusMathMLplusSVG" ><strong class="informref">[XHTMLplusMathMLplusSVG]</strong></dt>
+ <dd>
+ <cite class="w3cwd"><a href="http://www.w3.org/TR/2002/WD-XHTMLplusMathMLplusSVG-20020809/">An XHTML + MathML + SVG Profile</a></cite>,
+ <span lang="ja">石川 雅康</span> (<span class="familyname">Ishikawa</span> Masayasu), ed.
+ World Wide Web Consortium, <span class="wip">work in progress</span>, 09 August 2002.
+ <br/>This edition of XHTML + MathML + SVG is http://www.w3.org/TR/2002/WD-XHTMLplusMathMLplusSVG-20020809/.
+ <br/>The <a href="http://www.w3.org/TR/XHTMLplusMathMLplusSVG/">latest edition of XHTML + MathML + SVG</a> is available at
+ http://www.w3.org/TR/XHTMLplusMathMLplusSVG/.
+ </dd>
+
+
+ <dt id="ref-XSLT" ><strong class="informref">[XSLT]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/1999/REC-xslt-19991116">XSL Transformations (XSLT) Version 1.0</a></cite>,
+ J. Clark, ed.
+ World Wide Web Consortium, 16 November 1999.
+ <br/>This edition of XSLT 1.0 is http://www.w3.org/TR/1999/REC-xslt-19991116.
+ <br/>The <a href="http://www.w3.org/TR/xslt">latest edition of XSLT 1.0</a> is available at
+ http://www.w3.org/TR/xslt.
+ </dd>
+
+ <dt id="ref-XSLT2"><strong class="informref">[XSLT2]</strong></dt>
+ <dd>
+ <cite class="w3crec"><a href="http://www.w3.org/TR/2007/REC-xslt20-20070123/">XSL Transformations (XSLT) Version 2.0</a></cite>,
+ M. Kay, ed.
+ World Wide Web Consortium, 23 January 2007.
+ <br/>This edition of XSLT 2.0 is http://www.w3.org/TR/2007/REC-xslt20-20070123/.
+ <br/>The <a href="http://www.w3.org/TR/xslt20/">latest edition of XSLT 2.0</a> is available at
+ http://www.w3.org/TR/xslt20/.
+ </dd>
+</dl>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/render.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,200 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Rendering Model</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Rendering Model</h1>
+
+ <h2 id="Introduction">Introduction</h2>
+ <p>Implementations of SVG are expected to behave as though they
+ implement a rendering (or imaging) model corresponding to the
+ one described in this chapter. A real implementation is not
+ required to implement the model in this way, but the result on
+ any device supported by the implementation shall match that
+ described by this model.</p>
+ <p>The appendix on <a href="conform.html">conformance
+ requirements</a> describes the extent to which an actual
+ implementation may deviate from this description. In practice
+ an actual implementation will deviate slightly because of
+ limitations of the output device (e.g. only a limited range of
+ colors might be supported) and because of practical limitations
+ in implementing a precise mathematical model (e.g. for
+ realistic performance curves are approximated by straight
+ lines, the approximation need only be sufficiently precise to
+ match the conformance requirements).</p>
+ <h2 id="PaintersModel">The painters model</h2>
+ <p>SVG uses a "painters model" of rendering. <a
+ href="intro.html#TermPaint">Paint</a> is applied in successive
+ operations to the output device such that each operation paints
+ over some area of the output device. When the area overlaps a
+ previously painted area the new paint partially or completely
+ obscures the old. When the paint is not completely opaque the
+ result on the output device is defined by the (mathematical)
+ rules for compositing described under <a
+ href="masking.html#SimpleAlphaBlending">Alpha Blending</a>.</p>
+ <h2 id="RenderingOrder">Rendering Order</h2>
+ <p>Elements in an SVG document fragment have an implicit
+ drawing order, with the first elements in the SVG document
+ fragment getting "painted" first. Subsequent elements are
+ painted on top of previously painted elements.</p>
+ <h2 id="Grouping">How groups are rendered</h2>
+ <p>Grouping elements such as the <a>'g'</a> element (see <a
+ href="intro.html#TermContainerElement">container elements</a>)
+ have the effect of producing a temporary separate canvas
+ initialized to transparent black onto which child elements are
+ painted. Upon the completion of the group, any <a
+ href="render.html#FilteringPaintRegions">filter effects</a>
+ specified for the group are applied to create a modified
+ temporary canvas. The modified temporary canvas is composited
+ into the background, taking into account any group-level <a
+ href="masking.html#Masking">masking</a> and <a
+ href="masking.html#OpacityProperty">opacity</a> settings on the
+ group.</p>
+
+ <h2 id="Elements">How elements are rendered</h2>
+ <p>Individual <a href="intro.html#TermGraphicsElement">graphics
+ elements</a> are rendered as if each graphics element
+ represented its own group; thus, the effect is as if a
+ temporary separate canvas is created for each graphics element.
+ The element is first painted onto the temporary canvas (see <a
+ href="render.html#PaintingShapesAndText">Painting shapes and
+ text</a> and <a
+ href="render.html#PaintingRasterImages">Painting raster
+ images</a> below). Then any <a
+ href="render.html#FilteringPaintRegions">filter effects</a>
+ specified for the graphics element are applied to create a
+ modified temporary canvas. The modified temporary canvas is
+ then composited into the background, taking into account any <a
+ href="render.html#ClippingMaskingObjectOpacity">clipping,
+ masking and object opacity</a> settings on the graphics
+ element.</p>
+
+ <h2 id="TypesOfGraphicsElements">Types of graphics elements</h2>
+ <p>SVG supports three fundamental types of <a
+ href="intro.html#TermGraphicsElement">graphics elements</a>
+ that can be rendered onto the canvas:</p>
+ <ul>
+ <li><a href="intro.html#TermShape">Shapes</a>, which
+ represent some combination of straight line and curves</li>
+ <li>Text, which represents some combination of character
+ glyphs</li>
+ <li>Raster images, which represent an array of values that
+ specify the paint color and opacity (often termed alpha) at a
+ series of points on a rectangular grid. (SVG requires support
+ for specified raster image formats under <a
+ href="conform.html">conformance requirements</a>.)</li>
+ </ul>
+
+ <h3 id="PaintingShapesAndText">Painting shapes and text</h3>
+ <p>Shapes and text can be <a
+ href="intro.html#TermFill">filled</a> (i.e., apply paint to the
+ interior of the shape) and <a
+ href="intro.html#TermStroke">stroked</a> (i.e., apply paint
+ along the outline of the shape). A stroke operation is centered
+ on the outline of the object; thus, in effect, half of the
+ paint falls on the interior of the shape and half of the paint
+ falls outside of the shape.</p>
+ <p>For certain types of shapes, <a
+ href="painting.html#Markers">marker symbols</a> (which
+ themselves can consist of any combination of shapes, text and
+ images) can be drawn at selected vertices. Each marker symbol
+ is painted as if its graphical content were expanded into the
+ SVG document tree just after the shape object which is using
+ the given marker symbol. The graphical contents of a marker
+ symbol are rendered using the same methods as graphics
+ elements. Marker symbols are not applicable to text.</p>
+ <p>The fill is painted first, then the stroke, and then the
+ marker symbols. The marker symbols are rendered in order along
+ the outline of the shape, from the start of the shape to the
+ end of the shape.</p>
+ <p>Each fill and stroke operation has its own opacity settings;
+ thus, you can fill and/or stroke a shape with a
+ semi-transparently drawn solid color, with different opacity
+ values for the fill and stroke operations.</p>
+ <p>The fill and stroke operations are entirely independent
+ painting operations; thus, if you both fill and stroke a shape,
+ half of the stroke will be painted on top of part of the
+ fill.</p>
+ <p>SVG supports the following built-in types of paint which can
+ be used in fill and stroke operations:</p>
+ <ul>
+ <li><a href="color.html#ColorIntroduction">Solid
+ color</a></li>
+ <li><a href="pservers.html#Gradients">Gradients</a> (linear
+ and radial)</li>
+ <li><a href="pservers.html#Patterns">Patterns</a></li>
+ </ul>
+ <h3 id="PaintingRasterImages">Painting raster images</h3>
+ <p>When a raster image is rendered, the original samples are
+ "resampled" using standard algorithms to produce samples at the
+ positions required on the output device. Resampling
+ requirements are discussed under <a
+ href="conform.html">conformance requirements</a>.</p>
+ <h2 id="FilteringPaintRegions">Filtering painted regions</h2>
+ <p>SVG allows any painting operation to be filtered. (See <a
+ href="filters.html">Filter Effects</a>.)</p>
+ <p>In this case the result must be as though the paint
+ operations had been applied to an intermediate canvas
+ initialized to transparent black, of a size determined by the
+ rules given in <a href="filters.html">Filter Effects</a> then
+ filtered by the processes defined in <a
+ href="filters.html">Filter Effects</a>.</p>
+ <h2 id="ClippingMaskingObjectOpacity">Clipping, masking and object opacity</h2>
+ <p>SVG allows any painting operation to be limited to a
+ subregion of the output device by clipping and masking. This is
+ described in <a href="masking.html">Clipping, Masking and
+ Compositing</a>.</p>
+ <p>Clipping uses a path to define a region of the output device
+ to which paint can be applied. Any painting operation executed
+ within the scope of the clipping must be rendered such that
+ only those parts of the device that fall within the clipping
+ region are affected by the painting operation. A clipping path
+ can be thought of as a mask wherein those pixels outside the
+ clipping path are black with an alpha value of zero and those
+ pixels inside the clipping path are white with an alpha value
+ of one. "Within" is defined by the same rules used to determine
+ the interior of a path for painting. The clipping path is
+ typically anti-aliased on low-resolution devices (see
+ <a>'shape-rendering'</a>. Clipping is
+ described in <a href="masking.html#ClippingPaths">Clipping
+ paths</a>.</p>
+ <p>Masking uses the luminance of the color channels and alpha
+ channel in a referenced SVG element to define a supplemental
+ set of alpha values which are multiplied to the alpha values
+ already present in the graphics to which the mask is applied.
+ Masking is described in <a
+ href="masking.html#Masking">Masking</a>.</p>
+ <p>A supplemental masking operation may also be specified by
+ applying a "global" opacity to a set of rendering operations.
+ In this case the mask is infinite, with a color of white and an
+ alpha channel of the given opacity value. (See the <a>'opacity'</a>
+ property.)</p>
+ <p>In all cases the SVG implementation must behave as though
+ all painting and filtering is first performed to an
+ intermediate canvas which has been initialized to transparent
+ black. Then, alpha values on the intermediate canvas are
+ multiplied by the implicit alpha values from the clipping path,
+ the alpha values from the mask, and the alpha values from the
+ <a>'opacity'</a> property. The resulting
+ canvas is composited into the background using <a
+ href="masking.html#SimpleAlphaBlending">simple alpha
+ blending</a>. Thus if an area of the output device is painted
+ with a group opacity of 50% using opaque red paint followed by
+ opaque green paint the result is as though it had been painted
+ with just 50% opaque green paint. This is because the opaque
+ green paint completely obscures the red paint on the
+ intermediate canvas before the intermediate as a whole is
+ rendered onto the output device.</p>
+ <h2 id="ParentCompositing">Parent Compositing</h2>
+ <p>SVG document fragments can be semi-opaque. In many
+ environments (e.g., Web browsers), the SVG document fragment
+ has a final compositing step where the document as a whole is
+ blended translucently into the background canvas.</p>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/script.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,286 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Scripting</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Scripting</h1>
+
+<h2 id="ScriptingLanguage">Specifying the scripting language</h2>
+
+<h3 id="DefaultScriptingLanguage">Specifying the default scripting language</h3>
+
+<p>The <a>'svg/contentScriptType'</a> attribute on the <a>'svg'</a> element
+specifies the default scripting language for the given document fragment.</p>
+
+ <div class="adef-list">
+ <dl>
+ <dt id="ContentScriptTypeAttribute"><span
+ class="adef">contentScriptType</span> = "<span
+ class="attr-value"><em>content-type</em></span>"</dt>
+ <dd>Identifies the default scripting language for the given
+ SVG document fragment. This attribute sets the default scripting language used
+ to process the value strings in <a
+ href="script.html#EventAttributes">event attributes</a>.
+ This language must be used for all instances of script that do not specify
+ their own scripting language.
+ The value <span
+ class="attr-value"><em>content-type</em></span> specifies a
+ media type, per <a href="http://www.ietf.org/rfc/rfc2046.txt">MIME Part Two: Media Types</a>
+ [<a href="refs.html#ref-RFC2046">RFC2046</a>].
+ The default value is <span class='attr-value'>'application/ecmascript'</span>
+ [<a href='refs.html#ref-RFC4329'>RFC4329</a>].<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+
+<h3 id="SpecifiedScriptingLanguage">Local declaration of a scripting language</h3>
+
+<p>It is also possible to specify the scripting language for each individual
+<a>'script'</a> element by specifying a <a>'script/type'</a> on the
+<a>'script'</a> element.</p>
+
+<h2 id="ScriptElement">The <span class="element-name">'script'</span> element</h2>
+
+<p>A <a>'script'</a> element is equivalent to the <a>'script'</a> element in
+HTML and thus is the place for scripts (e.g., ECMAScript). Any functions
+defined within any <a>'script'</a> element have a "global" scope across the
+entire current document.</p>
+
+<p id="ExampleScript01"><span class="example-ref">Example script01</span>
+defines a function <code>circle_click</code> which is called by the
+<a>'onclick'</a> event attribute on the <a>'circle'</a> element. The drawing
+below on the left is the initial image. The drawing below on the right shows
+the result after clicking on the circle.</p>
+
+<p>Note that this example demonstrates the use of the <a>'onclick'</a> event
+attribute for explanatory purposes. The example presupposes the presence of an
+input device with the same behavioral characteristics as a mouse, which will
+not always be the case. To support the widest range of users, the
+<a>'onactivate'</a> event attribute should be used instead of the
+<a>'onclick'</a> event attribute.</p>
+
+<p id="ScriptElementExecution">Before attempting to execute the <a>'script'</a> element the resolved media type value for <a>'script/type'</a> must be inspected.
+If the <a>SVG user agent</a> does not support the scripting language then the <a>'script'</a> element must not be executed.
+</p>
+
+<pre class="xml"><?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="6cm" height="5cm" viewBox="0 0 600 500"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example script01 - invoke an ECMAScript function from an onclick event
+ </desc>
+ <!-- ECMAScript to change the radius with each click -->
+ <script type="application/ecmascript"> <![CDATA[
+ function circle_click(evt) {
+ var circle = evt.target;
+ var currentRadius = circle.getAttribute("r");
+ if (currentRadius == 100)
+ circle.setAttribute("r", currentRadius*2);
+ else
+ circle.setAttribute("r", currentRadius*0.5);
+ }
+ ]]> </script>
+
+ <!-- Outline the drawing area with a blue line -->
+ <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
+
+ <!-- Act on each click event -->
+ <circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
+ fill="red"/>
+
+ <text x="300" y="480"
+ font-family="Verdana" font-size="35" text-anchor="middle">
+
+ Click on circle to change its size
+ </text>
+</svg></pre><table summary="Example script01"><caption align="bottom">Example script01</caption><tbody><tr><td><img alt="Example script01 — invoke an ECMAScript function from an onclick event — before first click" src="images/script/script01.png"/> <img alt="Example script01 — invoke an ECMAScript function from an onclick event — after first click" src="images/script/script01-AfterClick.png"/></td></tr></tbody></table><p class="view-as-svg"><a href="images/script/script01.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
+
+
+<edit:elementsummary name='script'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="ScriptElementTypeAttribute"><span
+ class="adef">type</span> = "<span
+ class="attr-value"><em>content-type</em></span>"</dt>
+ <dd>Identifies the scripting language for the given <a>'script'</a> element. The value
+ <span class="attr-value"><em>content-type</em></span>
+ specifies a media type, per
+ <a href="http://www.ietf.org/rfc/rfc2046.txt">Multipurpose Internet Mail Extensions
+ (MIME) Part Two</a> [<a href="refs.html#ref-RFC2046">RFC2046</a>].
+ If a <a>'script/type'</a> is not provided, the value of <a>'contentScriptType'</a> on
+ the <a>'svg'</a> element shall be used, which in turn defaults to
+ "application/ecmascript" [<a href="refs.html#ref-RFC4329">RFC4329</a>]. If a
+ <a>'script element'</a> element falls outside of the
+ <a>outermost svg element</a> and the <a>'script/type'</a>
+ is not provided, the <a>'script/type'</a> must default to "application/ecmascript"
+ [<a href="refs.html#ref-RFC4329">RFC4329</a>].<br/>
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+
+ <dt id="ScriptElementHrefAttribute"><span class="adef">xlink:href</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="linking.html#IRIReference">IRI reference</a> to an external
+ resource containing the script code.<br/>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
+ </dl>
+ </div>
+
+<h2 id="EventHandling">Event handling</h2>
+
+<p>Events can cause scripts to execute when either of the following has
+occurred:</p>
+
+<ul>
+ <li><a href="script.html#EventAttributes">Event attributes</a> such as
+ <a>'onclick'</a> or <a>'g/onload'</a> are assigned to particular elements,
+ where the values of the event attributes are script which is executed
+ when the given event occurs.</li>
+
+ <li><a href="svgdom.html#EventListeners">Event listeners</a> as described in
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/">DOM Level 2 Events</a>
+ [<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>]
+ are defined which are invoked when a given event happens on a
+ given object.</li>
+</ul>
+
+<p>Related sections of the spec:</p>
+
+<ul>
+ <li><a href="interact.html#UIEvents">User interface events</a> describes how
+ an SVG user agent handles events such as pointer movements events (e.g.,
+ mouse movement) and activation events (e.g., mouse click).</li>
+
+ <li><a href="svgdom.html#RelationshipWithDOM2Events">Relationship with DOM2 events</a>
+ describes what parts of DOM are supported by SVG and how to register event
+ listeners.</li>
+</ul>
+
+<h2 id="EventAttributes">Event attributes</h2>
+
+<p>The following event attributes are available on many SVG elements.</p>
+
+<p>The complete list of events that are part of the SVG language and SVG DOM
+and descriptions of those events is provided in
+<a href="interact.html#SVGEvents">Complete list of supported events</a>.</p>
+
+<h3 id="LoadEvent">Event attribute for the SVGLoad event</h3>
+
+<p>Below is the definition for the <a>'g/onload'</a> event attribute. It
+can be specified on all of the <a>animation elements</a> and most of the
+<a>graphics elements</a> and <a>container elements</a>. The <a>'g/onload'</a>
+event attribute is classified as both a <a>graphical event attribute</a>
+and an <a>animation event attribute</a>. (See the definition for each element
+to determine whether it can have a <a>graphical event attribute</a>
+specified on it.)</p>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="OnLoadEventAttribute"><span class="adef">onload</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dd>Specifies some script to execute when "bubbling" or "at target"
+ phase listeners for the SVGLoad event are fired on the element
+ the attribute is specified on.<br/>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
+ </dl>
+</div>
+
+<h3 id="GraphicsEvents">Event attributes on graphics and container elements</h3>
+
+<p>Below are the definitions for the <a>graphical event attributes</a>.
+These can be specified on most <a>graphics elements</a> and
+<a>container elements</a>. (See the definition for each element to
+determine whether it can have a <a>graphical event attribute</a>
+specified on it.)</p>
+
+<p>Note that <a>'g/onload'</a>, defined above, is also classified as a
+<a>graphical event attribute</a>.</p>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="OnFocusInEventAttribute"><span class="adef">onfocusin</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnFocusOutEventAttribute"><span class="adef">onfocusout</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnActivateEventAttribute"><span class="adef">onactivate</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnClickEventAttribute"><span class="adef">onclick</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnMouseDownEventAttribute"><span class="adef">onmousedown</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnMouseUpEventAttribute"><span class="adef">onmouseup</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnMouseOverEventAttribute"><span class="adef">onmouseover</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnMouseMoveEventAttribute"><span class="adef">onmousemove</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnMouseOutEventAttribute"><span class="adef">onmouseout</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dd>Specifies some script to execute when "bubbling" or "at target"
+ phase listeners for the corresponding event are fired on the element
+ the attribute is specified on. See the <a href='interact.html#SVGEvents'>Complete list of support events</a>
+ to determine which event each of these event attributes corresponds to.<br/>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
+ </dl>
+</div>
+
+<h3 id="DocumentEvents">Document-level event attributes</h3>
+
+<p>Below are the definitions for the <a>document event attributes</a>.
+These can be specified only on <a>'svg'</a> elements.</p>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="OnUnloadEventAttribute"><span class="adef">onunload</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnAbortEventAttribute"><span class="adef">onabort</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnErrorEventAttribute"><span class="adef">onerror</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnResizeEventAttribute"><span class="adef">onresize</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnScrollEventAttribute"><span class="adef">onscroll</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnZoomEventAttribute"><span class="adef">onzoom</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dd>Specifies some script to execute when "bubbling" or "at target"
+ phase listeners for the corresponding event are fired on the element
+ the attribute is specified on. See the <a href='interact.html#SVGEvents'>Complete list of support events</a>
+ to determine which event each of these event attributes corresponds to.<br/>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
+ </dl>
+</div>
+
+<h3 id="AnimationEvents">Animation event attributes</h3>
+
+<p>Below are the definitions for the <a>animation event attributes</a>.
+These can be specified on the <a>animation elements</a>.</p>
+
+<p>Note that <a>'g/onload'</a>, defined above, is also classified as an
+<a>animation event attribute</a>.</p>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="OnBeginEventAttribute"><span class="adef">onbegin</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnEndEventAttribute"><span class="adef">onend</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dt id="OnRepeatEventAttribute"><span class="adef">onrepeat</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
+ <dd>Specifies some script to execute when "bubbling" or "at target"
+ phase listeners for the corresponding event are fired on the element
+ the attribute is specified on. See the <a href='interact.html#SVGEvents'>Complete list of support events</a>
+ to determine which event each of these event attributes corresponds to.<br/>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
+ </dl>
+</div>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGScriptElement">Interface SVGScriptElement</h3>
+
+<edit:with element='script'>
+<edit:interface name='::svg::SVGScriptElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGZoomEvent">Interface SVGZoomEvent</h3>
+
+<edit:interface name='::svg::SVGZoomEvent'/>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/shapes.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,649 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Basic Shapes</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Basic Shapes</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>SVG contains the following set of basic shape elements:</p>
+
+<ul>
+ <li>rectangles (including optional rounded corners), created with the <a>'rect'</a> element,</li>
+ <li>circles, created with the <a>'circle'</a> element,</li>
+ <li>ellipses, created with the <a>'ellipse'</a> element,</li>
+ <li>straight lines, created with the <a>'line'</a> element,</li>
+ <li>polylines, created with the <a>'polyline'</a> element, and</li>
+ <li>polygons, created with the <a>'polygon'</a> element.</li>
+</ul>
+
+<p>Mathematically, these shape elements are equivalent to a
+<a>'path'</a> element that would construct the same shape. The basic
+shapes may be stroked, filled and used as clip paths. All of the
+properties available for <a>'path'</a> elements also apply to the basic
+shapes.</p>
+
+<h2 id="RectElement">The <span class="element-name">'rect'</span> element</h2>
+
+<edit:with element='rect'>
+
+<p>The <a>'rect'</a> element defines a rectangle which is axis-aligned
+with the current <a href="intro.html#TermUserCoordinateSystem">user
+coordinate system</a>. Rounded rectangles can be achieved by setting
+appropriate values for attributes <a>'rx'</a> and <a>'ry'</a>.</p>
+
+<edit:elementsummary name='rect'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="RectElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of the side of the rectangle
+ which has the smaller x-axis coordinate value in the
+ current user coordinate system.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RectElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of the side of the rectangle
+ which has the smaller y-axis coordinate value in the
+ current user coordinate system.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RectElementWidthAttribute"><span
+ class="adef">width</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The width of the rectangle.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RectElementHeightAttribute"><span
+ class="adef">height</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The height of the rectangle.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RectElementRXAttribute"><span
+ class="adef">rx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>For rounded rectangles, the x-axis radius of the
+ ellipse used to round off the corners of the
+ rectangle.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).<br />
+ See the notes below about what happens if the attribute is
+ not specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="RectElementRYAttribute"><span
+ class="adef">ry</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>For rounded rectangles, the y-axis radius of the
+ ellipse used to round off the corners of the
+ rectangle.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).<br />
+ See the notes below about what happens if the attribute is
+ not specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<!--
+<p>If a properly specified value is provided for <a>'rx'</a>
+but not for <a>'ry'</a>, then the user agent processes the
+<a>'rect'</a> element with the effective value for <a>'ry'</a> as
+equal to <a>'rx'</a>. If a properly specified value is provided for
+<a>'ry'</a> but not for <a>'rx'</a>, then the user agent processes
+the <a>'rect'</a> element with the effective value for <a>'rx'</a>
+as equal to <a>'ry'</a>. If neither <a>'rx'</a> nor <a>'ry'</a>
+has a properly specified value, then the user agent processes
+the <a>'rect'</a> element as if no rounding had been specified,
+resulting in square corners. If <a>'rx'</a> is greater than half
+of the width of the rectangle, then the user agent processes the
+<a>'rect'</a> element with the effective value for <a>'rx'</a> as
+half of the width of the rectangle. If <a>'ry'</a> is greater than
+half of the height of the rectangle, then the user agent processes
+the <a>'rect'</a> element with the effective value for <a>'ry'</a>
+as half of the height of the rectangle.</p>
+-->
+
+<p>The values used for the x- and y-axis rounded corner radii are
+determined implicitly if the <a>'rx'</a> or <a>'ry'</a> attributes (or both)
+are not specified, or are specified but with invalid values.
+The values are also subject to clamping so that the lengths of
+the straight segments of the rectangle are never negative. The
+effective values for <a>'rx'</a> and <a>'ry'</a> are determined by following
+these steps in order:</p>
+
+<ol>
+ <li>Let <var>rx</var> and <var>ry</var> be length values.</li>
+
+ <li>If neither <a>'rx'</a> nor <a>'ry'</a> are properly specified, then set both
+ <var>rx</var> and <var>ry</var> to 0. (This will result in square corners.)</li>
+
+ <li>Otherwise, if a properly specified value is provided for <a>'rx'</a>, but
+ not for <a>'ry'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'rx'</a>.</li>
+
+ <li>Otherwise, if a properly specified value is provided for <a>'ry'</a>, but
+ not for <a>'rx'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'ry'</a>.</li>
+
+ <li>Otherwise, both <a>'rx'</a> and <a>'ry'</a> were specified properly. Set <var>rx</var> to
+ the value of <a>'rx'</a> and <var>ry</var> to the value of <a>'ry'</a>.</li>
+
+ <li>If <var>rx</var> is greater than half of <a>'width'</a>, then set
+ <var>rx</var> to half of <a>'width'</a>.</li>
+
+ <li>If <var>ry</var> is greater than half of <a>'height'</a>, then set
+ <var>ry</var> to half of <a>'height'</a>.</li>
+
+ <li>The effective values of <a>'rx'</a> and <a>'ry'</a> are <var>rx</var> and
+ <var>ry</var>, respectively.</li>
+</ol>
+
+<p>Mathematically, a <a>'rect'</a> element can be mapped to an
+equivalent <a>'path'</a> element as follows: (Note: all coordinate and
+length values are first converted into user space coordinates according
+to <a href="coords.html#Units">Units</a>.)</p>
+
+<ul>
+ <li>perform an absolute <a
+ href="paths.html#PathDataMovetoCommands">moveto</a> operation to
+ location (<em>x+rx</em>,<em>y</em>), where <em>x</em> is the value of
+ the <a>'rect'</a> element's <a>'x'</a> attribute converted to user
+ space, <em>rx</em> is the effective value of the <a>'rx'</a> attribute
+ converted to user space and <em>y</em> is the value of the <a>'y'</a>
+ attribute converted to user space</li>
+
+ <li>perform an absolute horizontal <a href="paths.html#PathDataLinetoCommands">lineto</a>
+ operation to location (<em>x+width-rx</em>,<em>y</em>), where <em>width</em>
+ is the <a>'rect'</a> element's <a>'width'</a> attribute converted to user
+ space</li>
+
+ <li>perform an absolute <a href="paths.html#PathDataEllipticalArcCommands">elliptical arc</a>
+ operation to coordinate (<em>x+width</em>,<em>y+ry</em>), where the effective
+ values for the <a>'rx'</a> and <a>'ry'</a> attributes on the <a>'rect'</a>
+ element converted to user space are used as the <em>rx</em> and <em>ry</em>
+ attributes on the <a href="paths.html#PathDataEllipticalArcCommands">elliptical arc</a>
+ command, respectively, the <em>x-axis-rotation</em> is set to zero, the
+ <em>large-arc-flag</em> is set to zero, and the <em>sweep-flag</em> is set
+ to one</li>
+
+ <li>perform a absolute vertical <em>lineto</em> to location
+ (<em>x+width</em>,<em>y+height-ry</em>), where <em>height</em> is the
+ <a>'rect'</a> element's <a>'height'</a> attribute converted to user
+ space</li>
+
+ <li>perform an absolute <a href="paths.html#PathDataEllipticalArcCommands">elliptical arc</a>
+ operation to coordinate (<em>x+width-rx</em>,<em>y+height</em>)</li>
+
+ <li>perform an absolute horizontal <em>lineto</em> to location
+ (<em>x+rx</em>,<em>y+height</em>)</li>
+
+ <li>perform an absolute <a href="paths.html#PathDataEllipticalArcCommands">elliptical arc</a>
+ operation to coordinate (<em>x</em>,<em>y+height-ry</em>)</li>
+
+ <li>perform an absolute absolute vertical <em>lineto</em> to location
+ (<em>x</em>,<em>y+ry</em>)</li>
+
+ <li>perform an absolute <a href="paths.html#PathDataEllipticalArcCommands">elliptical arc</a>
+ operation to coordinate (<em>x+rx</em>,<em>y</em>)</li>
+</ul>
+
+<p id="ExampleRect01"><span class="example-ref">Example rect01</span> shows a
+rectangle with sharp corners. The <a>'rect'</a> element is filled with yellow
+and stroked with navy.</p>
+
+<edit:example href='images/shapes/rect01.svg' name='rect01' description='rectangle with sharp corners' link='yes' image='yes'/>
+
+<p id="ExampleRect02"><span class="example-ref">Example rect02</span> shows
+two rounded rectangles. The <a>'rx'</a> specifies how to round the corners of
+the rectangles. Note that since no value has been specified for the <a>'ry'</a>
+attribute, it will be assigned the same value as the <a>'rx'</a> attribute.</p>
+
+<edit:example href='images/shapes/rect02.svg' name='rect02' description='rounded rectangles expressed in user coordinates' link='yes' image='yes'/>
+
+</edit:with>
+
+<h2 id="CircleElement">The <span class="element-name">'circle'</span> element</h2>
+
+<edit:with element='circle'>
+
+<p>The <a>'circle'</a> element defines a circle based on a center point and a
+radius.</p>
+
+<edit:elementsummary name='circle'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="CircleElementCXAttribute"><span
+ class="adef">cx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of the center of the
+ circle.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="CircleElementCYAttribute"><span
+ class="adef">cy</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of the center of the
+ circle.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="CircleElementRAttribute"><span
+ class="adef">r</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The radius of the circle.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p>The arc of a <a>'circle'</a> element begins at the "3 o'clock" point
+on the radius and progresses towards the "9 o'clock" point. The starting
+point and direction of the arc are affected by the user space transform
+in the same manner as the geometry of the element.</p>
+
+<p id="ExampleCircle01"><span class="example-ref">Example
+circle01</span> consists of a <a>'circle'</a> element that is filled
+with red and stroked with blue.</p>
+
+<edit:example href='images/shapes/circle01.svg' name='circle01' description='circle filled with red and stroked with blue' link='yes' image='yes'/>
+
+</edit:with>
+
+<h2 id="EllipseElement">The <span class="element-name">'ellipse'</span> element</h2>
+
+<edit:with element='ellipse'>
+
+<p>The <a>'ellipse'</a> element defines an ellipse which is axis-aligned
+with the current <a href="intro.html#TermUserCoordinateSystem">user
+coordinate system</a> based on a center point and two radii.</p>
+
+<edit:elementsummary name='ellipse'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="EllipseElementCXAttribute"><span
+ class="adef">cx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of the center of the
+ ellipse.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="EllipseElementCYAttribute"><span
+ class="adef">cy</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of the center of the
+ ellipse.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="EllipseElementRXAttribute"><span
+ class="adef">rx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The x-axis radius of the ellipse.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="EllipseElementRYAttribute"><span
+ class="adef">ry</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The y-axis radius of the ellipse.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p id="ExampleEllipse01">The arc of an <a>'ellipse'</a> element begins
+at the "3 o'clock" point on the radius and progresses towards the "9
+o'clock" point. The starting point and direction of the arc are affected
+by the user space transform in the same manner as the geometry of the
+element.</p>
+
+<p><span class="example-ref">Example ellipse01</span> below specifies
+the coordinates of the two ellipses in the user coordinate system
+established by the <a>'viewBox'</a> attribute on the <a>'svg'</a>
+element and the <a>'transform'</a> attribute on the <a>'g'</a> and
+<a>'ellipse'</a> elements. Both ellipses use the default values of
+zero for the <a>'cx'</a> and <a>'cy'</a> attributes (the center of the
+ellipse). The second ellipse is rotated.</p>
+
+<edit:example href='images/shapes/ellipse01.svg' name='ellipse01' description='ellipses expressed in user coordinates' link='yes' image='yes'/>
+
+</edit:with>
+
+<h2 id="LineElement">The <span class="element-name">'line'</span> element</h2>
+
+<edit:with element='line'>
+
+<p>The <a>'line'</a> element defines a line segment that starts at one point
+and ends at another.</p>
+
+<edit:elementsummary name='line'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="LineElementX1Attribute"><span
+ class="adef">x1</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of the start of the line.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LineElementY1Attribute"><span
+ class="adef">y1</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of the start of the line.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LineElementX2Attribute"><span
+ class="adef">x2</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of the end of the line.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="LineElementY2Attribute"><span
+ class="adef">y2</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of the end of the line.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p>Mathematically, a <a>'line'</a> element can be mapped to an
+equivalent <a>'path'</a> element as follows: (Note: all coordinate and
+length values are first converted into user space coordinates according
+to <a href="coords.html#Units">Units</a>.)</p>
+
+<ul>
+ <li>perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a>
+ operation to absolute location (<em>x1</em>,<em>y1</em>), where <em>x1</em>
+ and <em>y1</em> are the values of the <a>'line'</a> element's <a>'x1'</a> and
+ <a>'y1'</a> attributes converted to user space, respectively</li>
+
+ <li>perform an absolute <a href="paths.html#PathDataLinetoCommands">lineto</a>
+ operation to absolute location (<em>x2</em>,<em>y2</em>), where <em>x2</em>
+ and <em>y2</em> are the values of the <a>'line'</a> element's <a>'x2'</a> and
+ <a>'y2'</a> attributes converted to user space, respectively</li>
+</ul>
+
+<p>Because <a>'line'</a> elements are single lines and thus are geometrically
+one-dimensional, they have no interior; thus, <a>'line'</a> elements are never
+filled (see the <a>'fill'</a> property).</p>
+
+<p id="ExampleLine01"><span class="example-ref">Example line01</span> below
+specifies the coordinates of the five lines in the user coordinate system
+established by the <a>'viewBox'</a> attribute on the <a>'svg'</a> element. The
+lines have different thicknesses.</p>
+
+<edit:example href='images/shapes/line01.svg' name='line01' description='lines expressed in user coordinates' link='yes' image='yes'/>
+
+</edit:with>
+
+<h2 id="PolylineElement">The <span class="element-name">'polyline'</span> element</h2>
+
+<edit:with element='polyline'>
+
+<p>The <a>'polyline'</a> element defines a set of connected straight
+line segments. Typically, <a>'polyline'</a> elements define open
+shapes.</p>
+
+<edit:elementsummary name='polyline'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="PolylineElementPointsAttribute"><span
+ class="adef">points</span> = "<span class="attr-value"><a
+ href="shapes.html#PointsBNF"><list-of-points></a></span>"</dt>
+ <dd>The points that make up the polyline. All coordinate
+ values are in the user coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p>If an odd number of coordinates is provided, then the element is in
+error, with the same user agent behavior as occurs with an incorrectly
+specified <a>'path'</a> element.</p>
+
+<p>Mathematically, a <a>'polyline'</a> element can be mapped to an
+equivalent <a>'path'</a> element as follows:</p>
+
+<ul>
+ <li>perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a>
+ operation to the first coordinate pair in the list of points</li>
+
+ <li>for each subsequent coordinate pair, perform an absolute
+ <a href="paths.html#PathDataLinetoCommands">lineto</a> operation to that
+ coordinate pair.</li>
+</ul>
+
+<p id="ExamplePolyline01"><span class="example-ref">Example polyline01</span>
+below specifies a polyline in the user coordinate system established by the
+<a>'viewBox'</a> attribute on the <a>'svg'</a> element.</p>
+
+<edit:example href='images/shapes/polyline01.svg' name='polyline01' description='increasingly larger bars' link='yes' image='yes'/>
+
+</edit:with>
+
+<h2 id="PolygonElement">The <span class="element-name">'polygon'</span> element</h2>
+
+<edit:with element='polygon'>
+
+<p>The <a>'polygon'</a> element defines a closed shape consisting of a
+set of connected straight line segments.</p>
+
+<edit:elementsummary name='polygon'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="PolygonElementPointsAttribute"><span
+ class="adef">points</span> = "<span class="attr-value"><a
+ href="shapes.html#PointsBNF"><list-of-points></a></span>"</dt>
+ <dd>The points that make up the polygon. All coordinate
+ values are in the user coordinate system.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+
+<p>If an odd number of coordinates is provided, then the element is in
+error, with the same user agent behavior as occurs with an incorrectly
+specified <a>'path'</a> element.</p>
+
+<p>Mathematically, a <a>'polygon'</a> element can be mapped to an
+equivalent <a>'path'</a> element as follows:</p>
+
+<ul>
+ <li>perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a>
+ operation to the first coordinate pair in the list of points</li>
+
+ <li>for each subsequent coordinate pair, perform an absolute
+ <a href="paths.html#PathDataLinetoCommands">lineto</a> operation to that
+ coordinate pair</li>
+
+ <li>perform a <a href="paths.html#PathDataClosePathCommand">closepath</a>
+ command</li>
+</ul>
+
+<p id="ExamplePolygon01"><span class="example-ref">Example
+polygon01</span> below specifies two polygons (a star and a hexagon) in
+the user coordinate system established by the <a>'viewBox'</a> attribute
+on the <a>'svg'</a> element.</p>
+
+<edit:example href='images/shapes/polygon01.svg' name='polygon01' description='star and hexagon' link='yes' image='yes'/>
+
+</edit:with>
+
+<h3 id="PointsBNF">The grammar for points specifications in
+<span class="element-name">'polyline'</span> and
+<span class="element-name">'polygon'</span> elements</h3>
+
+<p>The following is the Extended Backus-Naur Form (EBNF) for points specifications
+in <a>'polyline'</a> and <a>'polygon'</a> elements. The following
+notation is used:</p>
+
+<ul>
+ <li>*: 0 or more</li>
+ <li>+: 1 or more</li>
+ <li>?: 0 or 1</li>
+ <li>(): grouping</li>
+ <li>|: separates alternatives</li>
+ <li>double quotes surround literals</li>
+</ul>
+
+<pre>
+list-of-points:
+ wsp* coordinate-pairs? wsp*
+coordinate-pairs:
+ coordinate-pair
+ | coordinate-pair comma-wsp coordinate-pairs
+coordinate-pair:
+ coordinate comma-wsp coordinate
+ | coordinate negative-coordinate
+coordinate:
+ number
+number:
+ sign? integer-constant
+ | sign? floating-point-constant
+negative-coordinate:
+ "-" integer-constant
+ | "-" floating-point-constant
+comma-wsp:
+ (wsp+ comma? wsp*) | (comma wsp*)
+comma:
+ ","
+integer-constant:
+ digit-sequence
+floating-point-constant:
+ fractional-constant exponent?
+ | digit-sequence exponent
+fractional-constant:
+ digit-sequence? "." digit-sequence
+ | digit-sequence "."
+exponent:
+ ( "e" | "E" ) sign? digit-sequence
+sign:
+ "+" | "-"
+digit-sequence:
+ digit
+ | digit digit-sequence
+digit:
+ "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
+wsp:
+ (#x20 | #x9 | #xD | #xA)+
+</pre>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGRectElement">Interface SVGRectElement</h3>
+
+<edit:with element="rect">
+<edit:interface name="::svg::SVGRectElement"/>
+</edit:with>
+
+<h3 id="InterfaceSVGCircleElement">Interface SVGCircleElement</h3>
+
+<edit:with element="circle">
+<edit:interface name="::svg::SVGCircleElement"/>
+</edit:with>
+
+<h3 id="InterfaceSVGEllipseElement">Interface SVGEllipseElement</h3>
+
+<edit:with element="ellipse">
+<edit:interface name="::svg::SVGEllipseElement"/>
+</edit:with>
+
+<h3 id="InterfaceSVGLineElement">Interface SVGLineElement</h3>
+
+<edit:with element="line">
+<edit:interface name="::svg::SVGLineElement"/>
+</edit:with>
+
+<h3 id="InterfaceSVGAnimatedPoints">Interface SVGAnimatedPoints</h3>
+
+<edit:interface name="::svg::SVGAnimatedPoints"/>
+
+<h3 id="InterfaceSVGPolylineElement">Interface SVGPolylineElement</h3>
+
+<edit:with element="polyline">
+<edit:interface name="::svg::SVGPolylineElement"/>
+</edit:with>
+
+<h3 id="InterfaceSVGPolygonElement">Interface SVGPolygonElement</h3>
+
+<edit:with element="polygon">
+<edit:interface name="::svg::SVGPolygonElement"/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/struct.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1386 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Document Structure</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Document Structure</h1>
+
+<h2 id="NewDocument">Defining an SVG document fragment: the <span class='element-name'>'svg'</span> element</h2>
+
+<edit:with element='svg'>
+
+<h3 id="NewDocumentOverview">Overview</h3>
+
+<p>An <a>SVG document fragment</a> consists of any number of SVG elements
+contained within an <a>'svg'</a> element.</p>
+
+<p>An SVG document fragment can range from an empty fragment (i.e.,
+no content inside of the <a>'svg'</a> element), to a very simple SVG
+document fragment containing a single SVG <a>graphics element</a>
+such as a <a>'rect'</a>, to a complex, deeply nested collection of
+<a>container elements</a> and <a>graphics elements</a>.</p>
+
+<p>An SVG document fragment can stand by itself as a self-contained
+file or resource, in which case the SVG document fragment is an <a>SVG
+document</a>, or it can be embedded inline as a fragment within a parent
+XML document.</p>
+
+<p id="EmbeddedSVGExample">The following example shows simple SVG
+content embedded inline as a fragment within a parent XML document.
+Note the use of XML namespaces to indicate that the <a>'svg'</a> and
+<a>'ellipse'</a> elements belong to the SVG namespace:</p>
+
+<pre class='xml'><![CDATA[
+<?xml version="1.0" standalone="yes"?>
+<parent xmlns="http://example.org"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <!-- parent contents here -->
+ <svg:svg width="4cm" height="8cm" version="1.1">
+ <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
+ </svg:svg>
+ <!-- ... -->
+</parent>
+]]></pre>
+
+<p>This example shows a slightly more complex (i.e., it contains
+multiple rectangles) stand-alone, self-contained SVG document:</p>
+
+<edit:example href='images/struct/StandAlone01.svg' image='no'/>
+
+<p><a>'svg'</a> elements can appear in the middle of SVG content. This
+is the mechanism by which SVG document fragments can be embedded within
+other SVG document fragments.</p>
+
+<p>Another use for <a>'svg'</a> elements within the middle
+of SVG content is to establish a new viewport. (See
+<a href="coords.html#EstablishingANewViewport">Establishing a new
+viewport</a>.)</p>
+
+<p>In all cases, for compliance with the
+<a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a> Recommendation
+[<a href="refs.html#ref-XML-NS">XML-NS</a>], an SVG namespace
+declaration must be provided so that all SVG elements are identified
+as belonging to the SVG namespace. The following are possible ways to
+provide a namespace declaration. An <span class='attr-name'>'xmlns'</span>
+attribute without a namespace prefix could be specified on an
+<a>'svg'</a> element, which means that SVG is the default namespace
+for all elements within the scope of the element with the <span class='attr-name'>'xmlns'</span> attribute:</p>
+
+<pre class='xml'><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg" …>
+ <rect …/>
+</svg>
+]]></pre>
+
+<p>If a namespace prefix is specified on the <span class='attr-name'>'xmlns'</span>
+attribute (e.g., <code class='xml'>xmlns:svg="http://www.w3.org/2000/svg"</code>),
+then the corresponding namespace is not the default namespace, so an
+explicit namespace prefix must be assigned to the elements:</p>
+
+<pre class='xml'><![CDATA[
+<svg:svg xmlns:svg="http://www.w3.org/2000/svg" …>
+ <svg:rect …/>
+</svg:svg>
+]]></pre>
+
+<p>Namespace prefixes can be specified on ancestor elements (illustrated
+in the <a href="#EmbeddedSVGExample">above example</a>). For more
+information, refer to the <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a> Recommendation
+[<a href="refs.html#ref-XML-NS">XML-NS</a>].</p>
+
+<h3 id="SVGElement">The <span class='element-name'>'svg'</span> element</h3>
+
+<edit:elementsummary name='svg'/>
+
+ <!--
+ <dt>DOM interface:</dt>
+ <dd>
+ <a>SVGSVGElement</a><span class="expanding">, which inherits from:
+ <a>DocumentCSS</a>,
+ <a>DocumentEvent</a>,
+ <a>Element</a>,
+ <a>EventTarget</a>,
+ <a>Node</a>,
+ <a>SVGElement</a>,
+ <a>SVGExternalResourcesRequired</a>,
+ <a>SVGFitToViewBox</a>,
+ <a>SVGLangSpace</a>,
+ <a>SVGLocatable</a>,
+ <a>SVGStylable</a>,
+ <a>SVGTests</a>,
+ <a>SVGZoomAndPan</a></span>
+ </dd>
+ -->
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="SVGElementVersionAttribute"><span
+ class="adef">version</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>Indicates the SVG language version to which this
+ document fragment conforms.<br />
+ In <a href='http://www.w3.org/TR/2001/REC-SVG-20010904/'>SVG 1.0</a> [<a href='refs.html#ref-SVG10'>SVG10</a>],
+ this attribute was fixed to the value <span class='attr-value'>'1.0'</span>.
+ For SVG 1.1, the attribute should have the value
+ <span class='attr-value'>'1.1'</span>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="SVGElementBaseProfileAttribute"><span
+ class="adef">baseProfile</span> = profile-name</dt>
+ <dd>Describes the minimum SVG language profile that the
+ author believes is necessary to correctly render the
+ content. The attribute does not specify any processing
+ restrictions; It can be considered metadata. For example,
+ the value of the attribute could be used by an authoring
+ tool to warn the user when they are modifying the document
+ beyond the scope of the specified base profile. Each SVG
+ profile should define the text that is appropriate for this
+ attribute.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'none'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="SVGElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>(Has no meaning or effect on <a>outermost svg
+ elements</a>.)<br />
+ The x-axis coordinate of one corner of the rectangular
+ region into which an embedded <a>'svg'</a> element is placed.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="SVGElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>(Has no meaning or effect on <a>outermost svg
+ elements</a>.)<br />
+ The y-axis coordinate of one corner of the rectangular
+ region into which an embedded <a>'svg'</a> element is placed.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="SVGElementWidthAttribute"><span
+ class="adef">width</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>For <a>outermost svg elements</a>,
+ the intrinsic width of the SVG document fragment.
+ For embedded <a>'svg'</a>
+ elements, the width of the rectangular region into which
+ the <a>'svg'</a> element is
+ placed.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'100%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="SVGElementHeightAttribute"><span
+ class="adef">height</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>For <a>outermost svg elements</a>,
+ the intrinsic height of the SVG document
+ fragment. For embedded <a>'svg'</a> elements, the height of
+ the rectangular region into which the <a>'svg'</a> element is placed.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'100%'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="SVGElementPreserveAspectRatioAttribute">
+ <span class="adef">preserveAspectRatio</span> = "<span class='attr-value'><a href="coords.html#PreserveAspectRatioAttribute">[defer] <align> [<meetOrSlice>]</a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'preserveAspectRatio'</a>.
+ </p>
+ <p>
+ If the attribute is not specified, then the effect is as if a value of <span class="attr-value">'xMidYMid meet'</span> were specified.
+ </p>
+ <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ </dd>
+ <dt id="SVGElementContentScriptTypeAttribute">
+ <span class="adef">contentScriptType</span> = "<span class='attr-value'><a href="script.html#ContentScriptTypeAttribute"><em>content-type</em></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <span class="attr"><a href="script.html#ContentScriptTypeAttribute">'contentScriptType'</a></span>.
+ </p>
+ </dd>
+ <dt id="SVGElementContentStyleTypeAttribute">
+ <span class="adef">contentStyleType</span> = "<span class='attr-value'><a href="styling.html#ContentStyleTypeAttribute"><em>content-type</em></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <span class="attr"><a href="styling.html#ContentStyleTypeAttribute">'contentStyleType'</a></span>.
+ </p>
+ </dd>
+ <dt id="SVGElementZoomAndPanAttribute">
+ <span class="adef">zoomAndPan</span> = "<span class='attr-value'><a href="interact.html#ZoomAndPanAttribute">disable | magnify</a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <span class="attr"><a href="interact.html#ZoomAndPanAttribute">'zoomAndPan'</a></span>.
+ </p>
+ </dd>
+ </dl>
+</div>
+
+<p>If an SVG document is likely to be referenced as a component
+of another document, the author will often want to include a
+<a>'viewBox'</a> attribute on the <a>outermost svg element</a> of the
+referenced document. This attribute provides a convenient way to design
+SVG documents to scale-to-fit into an arbitrary viewport.</p>
+
+</edit:with>
+
+<h2 id="Groups">Grouping: the <span class='element-name'>'g'</span> element</h2>
+
+<h3 id="GroupsOverview">Overview</h3>
+
+<p>The <a>'g'</a> element is a <a>container element</a> for grouping together
+related <a>graphics elements</a>.</p>
+
+<p>Grouping constructs, when used in conjunction with the <a>'desc'</a>
+and <a>'title'</a> elements, provide information about document
+structure and semantics. Documents that are rich in structure may be
+rendered graphically, as speech, or as braille, and thus promote
+<a href="access.html">accessibility</a>.</p>
+
+<p>A group of elements, as well as individual objects, can be given
+a name using the <a>'id'</a> attribute. Named groups are needed for
+several purposes such as animation and re-usable objects.</p>
+
+<p>An example:</p>
+
+<edit:example href='images/struct/grouping01.svg' image='no' link='yes'/>
+
+<p>A <a>'g'</a> element can contain other <a>'g'</a> elements nested
+within it, to an arbitrary depth. Thus, the following is possible:</p>
+
+<pre class='xml'><![CDATA[
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg"
+ version="1.1" width="4in" height="3in">
+ <desc>Groups can nest</desc>
+ <g>
+ <g>
+ <g>
+ </g>
+ </g>
+ </g>
+</svg>
+]]></pre>
+
+<p>Any element that is not contained within a <a>'g'</a> is treated (at
+least conceptually) as if it were in its own group.</p>
+
+<h3 id="GElement">The <span class='element-name'>'g'</span> element</h3>
+
+<edit:elementsummary name='g'/>
+
+<h2 id="Head">Defining content for reuse, and the <span class='element-name'>'defs'</span> element</h2>
+
+<h3 id="Overview">Overview</h3>
+
+<p>SVG allows graphical objects to be defined for later reuse.
+To do this, it makes extensive use of <a>IRI references</a>
+[<a href="refs.html#ref-RFC3987">RFC3987</a>] to these other objects.
+For example, to fill a rectangle with a linear gradient, you first
+define a <a>'linearGradient'</a> element and give it an ID, as in:</p>
+
+<pre class='xml'><![CDATA[
+<linearGradient id="MyGradient">...</linearGradient>
+]]></pre>
+
+<p>You then reference the linear gradient as the value of the
+<a>'fill'</a> property for the rectangle, as in:</p>
+
+<pre class='xml'><![CDATA[
+<rect style="fill:url(#MyGradient)"/>
+]]></pre>
+
+<p>Some types of element, such as gradients, will not by themselves produce a graphical result. They can therefore be placed anywhere convenient. However, sometimes it is desired to define a graphical object and prevent it from being directly rendered. it is only there to be referenced elsewhere. To do this, and to allow convenient grouping defined content, SVG provides the <span class='element-name'>'defs'</span> element.</p>
+
+<p>It is recommended that, wherever possible, referenced elements be defined
+inside of a <a>'defs'</a> element. Among the elements that are always
+referenced: <a>'altGlyphDef'</a>, <a>'clipPath'</a>, <a>'cursor element'</a>,
+<a>'filter element'</a>, <a>'linearGradient'</a>, <a>'marker element'</a>,
+<a>'mask element'</a>, <a>'pattern'</a>, <a>'radialGradient'</a> and
+<a>'symbol'</a>. Defining these elements inside of a <a>'defs'</a> element
+promotes understandability of the SVG content and thus promotes
+accessibility.</p>
+
+<h3 id="DefsElement">The <span class='element-name'>'defs'</span> element</h3>
+
+<edit:elementsummary name='defs'/>
+
+<p>The <a>'defs'</a> element is a container element for
+<a href="struct.html#Head">referenced elements</a>. For understandability and
+<a href="access.html">accessibility</a> reasons, it is recommended
+that, whenever possible, referenced elements be defined inside
+of a <a>'defs'</a>.</p>
+
+<p>The content model for <a>'defs'</a> is the same as for the
+<a>'g'</a> element; thus, any element that can be a child of a
+<a>'g'</a> can also be a child of a <a>'defs'</a>, and vice versa.</p>
+
+<p>Elements that are descendants of a <a>'defs'</a> are not rendered directly;
+they are prevented from becoming part of the rendering tree
+just as if the <a>'defs'</a> element were a <a>'g'</a> element and the
+<a>'display'</a> property were set to <span class="prop-value">none</span>.
+Note, however, that the descendants of a <a>'defs'</a> are
+always present in the source tree and thus can always be
+referenced by other elements; thus, the value of the <a>'display'</a>
+property on the <a>'defs'</a> element or any of its descendants does not
+prevent those elements from being referenced by other elements.</p>
+
+<p>To provide some SVG user agents with an opportunity to
+implement efficient implementations in streaming environments,
+creators of SVG content are encouraged to place all elements
+which are targets of local IRI references within a <a>'defs'</a>
+element which is a direct child of one of the ancestors of the
+referencing element. For example:</p>
+
+<edit:example href='images/struct/defs01.svg' link='yes'/>
+
+<p>In the document above, the linear gradient is defined within
+a <a>'defs'</a> element which is the direct child of the <a>'svg'</a>
+element, which in turn is an ancestor of the <a>'rect'</a> element which
+references the linear gradient. Thus, the above document conforms to the
+guideline.</p>
+
+<h2 id="DescriptionAndTitleElements">The <span class='element-name'>'desc'</span>
+and <span class='element-name'>'title'</span> elements</h2>
+
+<div id='DescElement'>
+<edit:elementsummary name='desc'/>
+</div>
+
+<div id='TitleElement'>
+<edit:elementsummary name='title'/>
+</div>
+
+<p>Each <a>container element</a> or <a>graphics element</a> in an SVG drawing
+can supply a <a>'desc'</a> and/or a <a>'title'</a> description string where
+the description is text-only. When the current SVG document fragment is
+rendered as SVG on visual media, <a>'desc'</a> and <a>'title'</a> elements are
+not rendered as part of the graphics. User agents may, however, for example,
+display the <a>'title'</a> element as a tooltip, as the pointing device moves
+over particular elements. Alternate presentations are possible, both visual and
+aural, which display the <a>'desc'</a> and <a>'title'</a> elements but do not
+display <a>'path'</a> elements or other <a>graphics elements</a>. This is
+readily achieved by using a different (perhaps user) style sheet. For deep
+hierarchies, and for following <a>'use'</a> element references, it is
+sometimes desirable to allow the user to control how deep they drill down into
+descriptive text.</p>
+
+<p>In conforming SVG document fragments, any <a>'title'</a> element should be
+the first child element of its parent. Note that those implementations that do
+use <a>'title'</a> to display a tooltip often will only do so if the
+<a>'title'</a> is indeed the first child element of its parent.</p>
+
+<p>The following is an example. In typical operation, the SVG user agent would
+not render the <a>'desc'</a> and <a>'title'</a> elements but would render the
+remaining contents of the <a>'g'</a> element.</p>
+
+<pre><![CDATA[
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg"
+ version="1.1" width="4in" height="3in">
+ <g>
+ <title>Company sales by region</title>
+ <desc>
+ This is a bar chart which shows
+ company sales by region.
+ </desc>
+ <!-- Bar chart defined as vector data -->
+ </g>
+</svg>
+]]></pre>
+
+<p>Description and title elements can contain marked-up text
+from other namespaces. Here is an example:</p>
+
+<pre><![CDATA[
+<?xml version="1.0" standalone="yes"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ version="1.1" width="4in" height="3in">
+ <desc xmlns:mydoc="http://example.org/mydoc">
+ <mydoc:title>This is an example SVG file</mydoc:title>
+ <mydoc:para>The global description uses markup from the
+ <mydoc:emph>mydoc</mydoc:emph> namespace.</mydoc:para>
+ </desc>
+ <g>
+ <!-- the picture goes here -->
+ </g>
+</svg>
+]]></pre>
+
+<p>Authors should always provide a <a>'title'</a> child element to the
+<a>outermost svg element</a> within a stand-alone SVG document. The
+<a>'title'</a> child element to an <a>'svg'</a> element serves the
+purposes of identifying the content of the given SVG document
+fragment. Since users often consult documents out of context,
+authors should provide context-rich titles. Thus, instead of a
+title such as "Introduction", which doesn't provide much
+contextual background, authors should supply a title such as
+"Introduction to Medieval Bee-Keeping" instead. For reasons of
+accessibility, user agents should always make the content of
+the <a>'title'</a> child element to the <a>outermost svg element</a>
+available to users. The mechanism for doing so depends on the user agent
+(e.g., as a caption, spoken).</p>
+
+<p>The DTD definitions of many of SVG's elements (particularly,
+container and text elements) place no restriction on the
+placement or number of the <a>'desc'</a> and <a>'title'</a> sub-elements.
+This flexibility is only present so that there will be a consistent
+content model for container elements, because some container
+elements in SVG allow for mixed content, and because
+<a href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-mixed-content">the mixed content rules for XML</a>
+([<a href="refs.html#ref-XML10">XML10</a>], section 3.2.2)
+do not permit the desired restrictions. Representations of
+future versions of the SVG language might use more expressive
+representations than DTDs which allow for more restrictive
+mixed content rules. It is strongly recommended that at most
+one <a>'desc'</a> and at most one <a>'title'</a> element appear as a
+child of any particular element, and that these elements appear
+before any other child elements (except possibly
+<a>'metadata'</a> elements) or character data content. If user agents need to
+choose among multiple <a>'desc'</a> or <a>'title'</a> elements for processing
+(e.g., to decide which string to use for a tooltip), the user
+agent shall choose the first one.</p>
+
+<h2 id="SymbolElement">The <span class='element-name'>'symbol'</span> element</h2>
+
+<edit:elementsummary name='symbol'/>
+
+<p>The <a>'symbol'</a> element is used to define graphical template objects
+which can be instantiated by a <a>'use'</a> element.</p>
+
+<p>The use of <a>'symbol'</a> elements for graphics that are used multiple
+times in the same document adds structure and semantics. Documents that are rich
+in structure may be rendered graphically, as speech, or as
+braille, and thus promote <a href="access.html">accessibility</a>.</p>
+
+<p>The key distinctions between a <a>'symbol'</a> and a <a>'g'</a> are:</p>
+
+<ul>
+ <li>A <a>'symbol'</a> element itself is not rendered. Only instances of a
+ <a>'symbol'</a> element (i.e., a reference to a <a>'symbol'</a> by
+ a <a>'use'</a> element) are rendered.</li>
+
+ <li>A <a>'symbol'</a> element has attributes <a>'viewBox'</a> and
+ <a>'preserveAspectRatio'</a> which allow a <a>'symbol'</a> to scale-to-fit
+ within a rectangular viewport defined by the referencing
+ <a>'use'</a> element.</li>
+</ul>
+
+<p>Closely related to the <a>'symbol'</a> element are the
+<a>'marker element'</a> and <a>'pattern'</a> elements.</p>
+
+<p><a>'symbol'</a> elements are never rendered directly; their only usage is
+as something that can be referenced using the
+<a>'use'</a> element. The <a>'display'</a> property does not apply
+to the <a>'symbol'</a> element; thus, <a>'symbol'</a> elements are
+not directly rendered even if the <a>'display'</a> property is set to a
+value other than <span class="prop-value">none</span>, and <a>'symbol'</a>
+elements are available for referencing even when the
+<a>'display'</a> property on the <a>'symbol'</a> element or any of its
+ancestors is set to <span class="prop-value">none</span>.</p>
+
+<h2 id="UseElement">The <span class='element-name'>'use'</span> element</h2>
+
+<edit:with element='use'>
+
+<edit:elementsummary name='use'/>
+
+ <p>Any <a>'svg'</a>, <a>'symbol'</a>, <a>'g'</a>, <a
+ href="intro.html#TermGraphicsElement">graphics element</a> or
+ other <a>'use'</a> is potentially a
+ template object that can be re-used (i.e., "instanced") in the
+ SVG document via a <a>'use'</a>
+ element. The <a>'use'</a> element
+ references another element and indicates that the graphical
+ contents of that element is included/drawn at that given point
+ in the document.</p>
+ <p>Unlike <a>'image'</a>, the <a>'use'</a> element cannot reference
+ entire files.</p>
+ <p>The <a>'use'</a> element has
+ optional attributes <a>'use/x'</a>, <a>'use/y'</a>, <a>'use/width'</a> and <a>'use/height'</a> which are used to map the
+ graphical contents of the referenced element onto a rectangular
+ region within the current coordinate system.</p>
+ <p>The effect of a <a>'use'</a>
+ element is as if the contents of the referenced element were
+ deeply cloned into a separate non-exposed DOM tree which had
+ the <a>'use'</a> element as its
+ parent and all of the <a>'use'</a>
+ element's ancestors as its higher-level ancestors. Because the
+ cloned DOM tree is non-exposed, the SVG Document Object Model
+ (DOM) only contains the <a>'use'</a>
+ element and its attributes. The SVG DOM does not show the
+ referenced element's contents as children of <a>'use'</a> element.</p>
+ <p>For user agents that support <a
+ href="styling.html#StylingWithCSS">Styling with CSS</a>, the
+ conceptual deep cloning of the referenced element into a
+ non-exposed DOM tree also copies any property values resulting
+ from <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html">the CSS cascade</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 6)
+ on the referenced element and its contents. CSS2 selectors can
+ be applied to the original (i.e., referenced) elements because
+ they are part of the formal document structure. CSS2 selectors
+ cannot be applied to the (conceptually) cloned DOM tree because
+ its contents are not part of the formal document structure.</p>
+ <p>Property inheritance, however, works as if the referenced
+ element had been textually included as a deeply cloned child of
+ the <a>'use'</a> element. The
+ referenced element inherits properties from the <a>'use'</a> element and the <a>'use'</a> element's ancestors. An
+ instance of a referenced element does not inherit properties
+ from the referenced element's original parents.</p>
+ <p>If event attributes are assigned to referenced elements,
+ then the actual target for the event will be the
+ <a>SVGElementInstance</a> object
+ within the "instance tree" corresponding to the given
+ referenced element.</p>
+ <p>The event handling for the non-exposed tree works as if the
+ referenced element had been textually included as a deeply
+ cloned child of the <a>'use'</a>
+ element, except that events are dispatched to the <a>SVGElementInstance</a> objects. The
+ event's target and currentTarget attributes are set to the
+ <a>SVGElementInstance</a> that
+ corresponds to the target and current target elements in the
+ referenced subtree. An event propagates through the exposed and
+ non-exposed portions of the tree in the same manner as it would
+ in the regular document tree: first going from the root element
+ to the <a>'use'</a> element and then
+ through non-exposed tree elements in the capture phase,
+ followed by the target phase at the target of the event, then
+ bubbling back through non-exposed tree to the use element and
+ then back through regular tree to the root element in bubbling
+ phase.</p>
+ <p>An element and all its corresponding <a>SVGElementInstance</a> objects
+ share an event listener list. The currentTarget attribute of
+ the event can be used to determine through which object an
+ event listener was invoked.</p>
+ <p>The behavior of the <a>'visibility'</a> property conforms to
+ this model of property inheritance. Thus, specifying <span
+ class="prop-value">'visibility:hidden'</span> on a <a>'use'</a> element does not guarantee
+ that the referenced content will not be rendered. If the <a>'use'</a> element specifies <span
+ class="prop-value">'visibility:hidden'</span> and the element
+ it references specifies <span
+ class="prop-value">'visibility:hidden'</span> or <span
+ class="prop-value">'visibility:inherit'</span>, then that one
+ element will be hidden. However, if the referenced element
+ instead specifies <span
+ class="prop-value">'visibility:visible'</span>, then that
+ element will be visible even if the <a>'use'</a> element specifies <span
+ class="prop-value">'visibility:hidden'</span>.</p>
+ <p>Animations on a referenced element will cause the instances
+ to also be animated.</p>
+ <p>A <a>'use'</a> element has the
+ same visual effect as if the <a>'use'</a> element were replaced by the
+ following generated content:</p>
+ <ul>
+ <li><strong>If the <a>'use'</a>
+ element references a <a>'symbol'</a>
+ element</strong>:<br />
+ <br />
+ In the generated content, the <a>'use'</a> will be replaced by <a>'g'</a>, where all attributes
+ from the <a>'use'</a> element
+ except for <a>'use/x'</a>, <a>'use/y'</a>, <a>'use/width'</a>, <a>'use/height'</a> and <a>'use/xlink:href'</a> are transferred to
+ the generated <a>'g'</a> element. An additional
+ transformation <span class="attr-value">translate(x,y)</span>
+ is appended to the end (i.e., right-side) of the <a>'transform'</a> attribute on the
+ generated <a>'g'</a>, where <span
+ class="attr-value">x</span> and <span
+ class="attr-value">y</span> represent the values of the <a>'use/x'</a> and <a>'use/y'</a> attributes on the <a>'use'</a> element. The referenced <a>'symbol'</a> and its contents are
+ deep-cloned into the generated tree, with the exception that
+ the <a>'symbol'</a> is replaced by an <a>'svg'</a>. This generated <a>'svg'</a> will always have
+ explicit values for attributes <a>'svg/width'</a> and <a>'svg/height'</a>. If attributes <a>'use/width'</a> and/or <a>'use/height'</a> are provided on the <a>'use'</a> element, then these
+ attributes will be transferred to the generated <a>'svg'</a>. If attributes <a>'use/width'</a> and/or <a>'use/height'</a> are not specified, the
+ generated <a>'svg'</a> element will use values
+ of <span class='attr-value'>'100%'</span> for these attributes.<br />
+ <br />
+ </li>
+ <li><strong>If the <a>'use'</a>
+ element references an <a>'svg'</a> element:</strong><br />
+ <br />
+ In the generated content, the <a>'use'</a> will be replaced by <a>'g'</a>, where all attributes
+ from the <a>'use'</a> element
+ except for <a>'use/x'</a>, <a>'use/y'</a>, <a>'use/width'</a>, <a>'use/height'</a> and <a>'use/xlink:href'</a> are transferred to
+ the generated <a>'g'</a> element. An additional
+ transformation <span class="attr-value">translate(x,y)</span>
+ is appended to the end (i.e., right-side) of the <a>'transform'</a> attribute on the
+ generated <a>'g'</a>, where <span
+ class="attr-value">x</span> and <span
+ class="attr-value">y</span> represent the values of the <a>'use/x'</a> and <a>'use/y'</a> attributes on the <a>'use'</a> element. The referenced <a>'svg'</a> and its contents are
+ deep-cloned into the generated tree. If attributes <a>'use/width'</a> and/or <a>'use/height'</a> are provided on the <a>'use'</a> element, then these values
+ will override the corresponding attributes on the <a>'svg'</a> in the generated
+ tree.<br />
+ <br />
+ </li>
+ <li><strong>Otherwise:</strong><br />
+ <br />
+ In the generated content, the <a>'use'</a> will be replaced by <a>'g'</a>, where all attributes
+ from the <a>'use'</a> element
+ except for <a>'use/x'</a>, <a>'use/y'</a>, <a>'use/width'</a>, <a>'use/height'</a> and <a>'use/xlink:href'</a> are transferred to
+ the generated <a>'g'</a> element. An additional
+ transformation <span class="attr-value">translate(x,y)</span>
+ is appended to the end (i.e., right-side) of the <a>'transform'</a> attribute on the
+ generated <a>'g'</a>, where <span
+ class="attr-value">x</span> and <span
+ class="attr-value">y</span> represent the values of the <a>'use/x'</a> and <a>'use/y'</a> attributes on the <a>'use'</a> element. The referenced
+ object and its contents are deep-cloned into the generated
+ tree.</li>
+ </ul>
+ <p>For user agents that support <a
+ href="styling.html#StylingWithCSS">Styling with CSS</a>, the
+ generated <a>'g'</a> element carries along with
+ it the "cascaded" property values on the <a>'use'</a> element which result from
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html">the CSS cascade</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 6).
+ Additionally, the copy (deep clone) of the referenced resource
+ carries along with it the "cascaded" property values resulting
+ from the CSS cascade on the original (i.e., referenced)
+ elements. Thus, the result of various CSS selectors in
+ combination with the <a>'class'</a> and <a>'style attribute'</a> attributes are, in effect,
+ replaced by the functional equivalent of a <a>'style attribute'</a> attribute in the generated
+ content which conveys the "cascaded" property values.</p>
+
+<p><span class="example-ref">Example Use01</span> below has a
+simple <a>'use'</a> on a <a>'rect'</a>.</p>
+
+<edit:example href='images/struct/Use01.svg' name='Use01' description="Simple case of 'use' on a 'rect'" link='yes' image='yes'/>
+
+<p>The visual effect would be equivalent to the following document:</p>
+
+<edit:example href='images/struct/Use01-GeneratedContent.svg' link='yes'/>
+
+<p><span class="example-ref">Example Use02</span> below has a
+<a>'use'</a> on a <a>'symbol'</a>.</p>
+
+<edit:example href='images/struct/Use02.svg' name='Use02' description="'use' on a 'symbol'" link='yes' image='yes'/>
+
+<p>The visual effect would be equivalent to the following document:</p>
+
+<edit:example href='images/struct/Use02-GeneratedContent.svg' link='yes'/>
+
+<p><span class="example-ref">Example Use03</span> illustrates
+what happens when a <a>'use'</a> has
+a <a>'transform'</a> attribute.</p>
+
+<edit:example href='images/struct/Use03.svg' name='Use03' description="'use' with a 'transform' attribute" link='yes' image='yes'/>
+
+<p>The visual effect would be equivalent to the following document:</p>
+
+<edit:example href='images/struct/Use03-GeneratedContent.svg' link='yes'/>
+
+<p><span class="example-ref">Example Use04</span> illustrates a
+<a>'use'</a> element with various
+methods of applying CSS styling.</p>
+
+<edit:example href='images/struct/Use04.svg' name='Use04' description="'use' with CSS styling" link='yes' image='yes'/>
+
+<p>The visual effect would be equivalent to the following
+document. Observe that some of the style rules above apply to
+the generated content (i.e., rules 1-6, 10-12), whereas others
+do not (i.e., rules 7-9). The rules which do not affect the
+generated content are:</p>
+
+<ul>
+ <li>Rules 7 and 8: CSS selectors only apply to the formal
+ document tree, not on the generated tree; thus, these
+ selectors will not yield a match.</li>
+
+ <li>Rule 9: The generated tree only inherits from the
+ ancestors of the <a>'use'</a>
+ element and does not inherit from the ancestors of the
+ referenced element; thus, this rule does not affect the
+ generated content.</li>
+</ul>
+
+<p>In the generated content below, the selectors that yield a
+match have been transferred into inline <a>'style attribute'</a> attributes for
+illustrative purposes.</p>
+
+<edit:example href='images/struct/Use04-GeneratedContent.svg' link='yes'/>
+
+<p>When a <a>'use'</a> references
+another element which is another <a>'use'</a> or whose content contains a
+<a>'use'</a> element, then the deep
+cloning approach described above is recursive. However, a set
+of references that directly or indirectly reference a element
+to create a circular dependency is an error, as described in <a
+href="#Head">References and the <span class='element-name'>'defs'</span> element</a>.</p>
+
+<div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="UseElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of one corner of the rectangular
+ region into which the referenced element is placed.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="UseElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of one corner of the rectangular
+ region into which the referenced element is placed.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="UseElementWidthAttribute"><span
+ class="adef">width</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The width of the rectangular region into which the
+ referenced element is placed. A negative value is an error
+ (see <a href="implnote.html#ErrorProcessing">Error
+ processing</a>). A value of zero disables rendering of this
+ element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="UseElementHeightAttribute"><span
+ class="adef">height</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The height of the rectangular region into which the
+ referenced element is placed. A negative value is an error
+ (see <a href="implnote.html#ErrorProcessing">Error
+ processing</a>). A value of zero disables rendering of this
+ element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="UseElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>A <a href="linking.html#IRIReference">IRI
+ reference</a> to an element/fragment within an SVG
+ document.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+</div>
+
+</edit:with>
+
+<h2 id="ImageElement">The <span class='element-name'>'image'</span> element</h2>
+
+<edit:with element='image'>
+
+<edit:elementsummary name='image'/>
+
+ <p>The <a>'image'</a> element
+ indicates that the contents of a complete file are to be
+ rendered into a given rectangle within the current user
+ coordinate system. The <a>'image'</a> element can refer to raster
+ image files such as PNG or JPEG or to files with MIME type of
+ "image/svg+xml". <a
+ href="conform.html#ConformingSVGViewers">Conforming SVG
+ viewers</a> need to support at least PNG, JPEG and SVG format
+ files.</p>
+ <p>The result of processing an <a>'image'</a> is always a four-channel
+ RGBA result. When an <a>'image'</a>
+ element references a raster image file such as PNG or JPEG
+ files which only has three channels (RGB), then the effect is
+ as if the object were converted into a 4-channel RGBA image
+ with the alpha channel uniformly set to 1. For a single-channel
+ raster image, the effect is as if the object were converted
+ into a 4-channel RGBA image, where the single channel from the
+ referenced object is used to compute the three color channels
+ and the alpha channel is uniformly set to 1.</p>
+ <p>An <a>'image'</a> element
+ establishes a new viewport for the referenced file as described
+ in <a href="coords.html#EstablishingANewViewport">Establishing
+ a new viewport</a>. The bounds for the new viewport are
+ defined by attributes <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>. The placement and scaling
+ of the referenced image are controlled by the <a>'preserveAspectRatio'</a> attribute on
+ the <a>'image'</a> element.</p>
+ <p>When an <a>'image'</a> element
+ references an SVG image, the <a>'clip'</a> and <a>'overflow'</a> properties on the root element in
+ the referenced SVG image are ignored (in the same manner as the
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> attributes are ignored). Unless the value of
+ <a>'preserveAspectRatio'</a> on the <a>'image'</a> element starts with 'defer',
+ the <a>'preserveAspectRatio'</a> attribute on the root element in
+ the referenced SVG image is also ignored (see <a>'preserveAspectRatio'</a>
+ for details).
+
+ Instead, the <a>'preserveAspectRatio'</a> attribute on
+ the referencing <a>'image'</a>
+ element defines how the SVG image content is fitted into the
+ viewport and the <a>'clip'</a> and <a>'overflow'</a> properties on the <a>'image'</a> element define how the SVG
+ image content is clipped (or not) relative to the viewport.</p>
+ <p>The value of the <a>'viewBox'</a> attribute to use when
+ evaluating the <a>'preserveAspectRatio'</a> attribute is
+ defined by the referenced content. For content that clearly
+ identifies a viewBox (e.g. an SVG file with the <a>'viewBox'</a> attribute on the
+ <a>outermost svg element</a>) that value should be used. For most
+ raster content (PNG, JPEG) the bounds of the image should be
+ used (i.e. the <a>'image'</a>
+ element has an implicit <a>'viewBox'</a> of <span class='attr-value'>'0 0 raster-image-width
+ raster-image-height'</span>). Where no value is readily available
+ (e.g. an SVG file with no <a>'viewBox'</a> attribute on the
+ <a>outermost svg element</a>) the <a>'preserveAspectRatio'</a> attribute is
+ ignored, and only the translation due to the <a>'x'</a> & <a>'y'</a> attributes of the viewport is
+ used to display the content.</p>
+ <p>For example, if the image element referenced a PNG or JPEG
+ and <span class="attr-value">preserveAspectRatio="xMinYMin
+ meet"</span>, then the aspect ratio of the raster would be
+ preserved (which means that the scale factor from image's
+ coordinates to current user space coordinates would be the same
+ for both X and Y), the raster would be sized as large as
+ possible while ensuring that the entire raster fits within the
+ viewport, and the top/left of the raster would be aligned with
+ the top/left of the viewport as defined by the attributes <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> on the <a>'image'</a> element. If the value
+ of <a>'preserveAspectRatio'</a> was <span class='attr-value'>'none'</span>
+ then aspect ratio of the image would not be preserved. The
+ image would be fitted such that the top/left corner of the
+ raster exactly aligns with coordinate (<a>'x'</a>, <a>'y'</a>) and the bottom/right corner of
+ the raster exactly aligns with coordinate (<a>'x'</a>+<a>'width'</a>, <a>'y'</a>+<a>'height'</a>).</p>
+
+ <p>The resource referenced by the <a>'image'</a> element represents a
+ separate document which generates its own parse tree and
+ document object model (if the resource is XML). Thus, there is
+ no inheritance of properties into the image.</p>
+ <p>Unlike <a>'use'</a>, the <a>'image'</a> element cannot reference
+ elements within an SVG file.</p>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="ImageElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The x-axis coordinate of one corner of the rectangular
+ region into which the referenced document is placed.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="ImageElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
+ <dd>The y-axis coordinate of one corner of the rectangular
+ region into which the referenced document is placed.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">'0'</span> were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="ImageElementWidthAttribute"><span
+ class="adef">width</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The width of the rectangular region into which the
+ referenced document is placed.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="ImageElementHeightAttribute"><span
+ class="adef">height</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The height of the rectangular region into which the
+ referenced document is placed.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="ImageElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>A <a href="linking.html#IRIReference">IRI
+ reference</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="ImageElementPreserveAspectRatioAttribute">
+ <span class="adef">preserveAspectRatio</span> = "<span class='attr-value'><a href="coords.html#PreserveAspectRatioAttribute">[defer] <align> [<meetOrSlice>]</a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'preserveAspectRatio'</a>.
+ </p>
+ <p>
+ If attribute <a>'preserveAspectRatio'</a> is not specified, then the effect is as if a value of <span class="attr-value">xMidYMid meet</span> were specified.
+ </p>
+ <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ </dd>
+ </dl>
+ </div>
+
+ <p>An example:</p>
+<pre>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4in" height="3in" version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <desc>This graphic links to an external image
+ </desc>
+ <image x="200" y="200" width="100px" height="100px"
+ xlink:href="myimage.png">
+ <title>My image</title>
+ </image>
+</svg>
+</pre>
+
+</edit:with>
+
+ <h2 id="ConditionalProcessing">Conditional processing</h2>
+
+ <!--
+ <a id="ConditionalProcessingConditional.attrib" name="ConditionalProcessingConditional.attrib" class="indexref-conditional_processing::test_attributes"></a>
+ <a id="Conditional.attrib" name="Conditional.attrib" class="indexref-test_attributes"></a>
+ -->
+ <h3 id="ConditionalProcessingOverview">Conditional processing overview</h3>
+ <p>SVG contains a <a>'switch'</a> element along with
+ attributes <a>'requiredFeatures'</a>, <a>'requiredExtensions'</a> and <a>'systemLanguage'</a> to provide an
+ ability to specify alternate viewing depending on the
+ capabilities of a given user agent or the user's language.</p>
+ <p>Attributes <a>'requiredFeatures'</a>, <a>'requiredExtensions'</a> and <a>'systemLanguage'</a> act as tests and
+ return either true or false results. The <a>'switch'</a> renders the first of
+ its children for which all of these attributes test true. If
+ the given attribute is not specified, then a true value is
+ assumed.</p>
+ <p>Similar to the <a>'display'</a> property, conditional processing
+ attributes only affect the direct rendering of elements and do
+ not prevent elements from being successfully referenced by
+ other elements (such as via a <a>'use'</a>).</p>
+ <p>In consequence:</p>
+ <ul>
+ <li><a>'requiredFeatures'</a>, <a>'requiredExtensions'</a> and <a>'systemLanguage'</a> attributes affect
+ <a>'a'</a>, <a>'altGlyph'</a>, <a>'foreignObject'</a>, <a>'textPath'</a>, <a>'tref'</a>, and <a>'tspan'</a> elements.</li>
+ <li><a>'requiredFeatures'</a>, <a>'requiredExtensions'</a> and <a>'systemLanguage'</a> attributes will
+ have no effect on <a>'mask element'</a>,
+ <a>'clipPath'</a>, and <a>'pattern'</a> elements.</li>
+ <li><a>'requiredFeatures'</a>, <a>'requiredExtensions'</a> and <a>'systemLanguage'</a> attributes do not
+ apply to the <a>'defs'</a>, and
+ <a>'cursor element'</a> elements because
+ they are not part of the rendering tree.</li>
+ <li><a>'requiredFeatures'</a>, <a>'requiredExtensions'</a> and <a>'systemLanguage'</a> attributes affect
+ <a>'animate'</a>, <a>'animateColor'</a>, <a>'animateMotion'</a>, <a>'animateTransform'</a>, and <a>'set'</a> elements. If the
+ conditional statement on these animation elements fails, the
+ animation will never be triggered.</li>
+ </ul>
+
+<h3 id="SwitchElement">The <span class='element-name'>'switch'</span> element</h3>
+
+<edit:elementsummary name='switch'/>
+
+<p>The <a>'switch'</a> element evaluates
+the <a>'requiredFeatures'</a>, <a>'requiredExtensions'</a> and
+<a>'systemLanguage'</a> attributes on its direct child elements in
+order, and then processes and renders the first child for which these
+attributes evaluate to true. All others will be bypassed and therefore
+not rendered. If the child element is a container element such as a
+<a>'g'</a>, then the entire subtree is either processed/rendered or
+bypassed/not rendered.</p>
+
+<p>Note that the values of properties <a>'display'</a> and
+<a>'visibility'</a> have no effect on <a>'switch'</a> element
+processing. In particular, setting <a>'display'</a> to
+<span class="prop-value">none</span> on a child of a <a>'switch'</a> element
+has no effect on true/false testing associated with <a>'switch'</a>
+element processing.</p>
+
+<p>For more information and an example, see
+<a href="extend.html#ForeignObjectElement">Embedding foreign
+object types</a>.</p>
+
+ <h3 id="ConditionalProcessingRequiredFeaturesAttribute">The <span class='attr-name'>'requiredFeatures'</span>
+ attribute</h3>
+ <div class="adef-list">
+ <p>Definition of <span
+ class="adef">requiredFeatures</span>:</p>
+ <dl>
+ <dt id="RequiredFeaturesAttribute"><span class="adef">requiredFeatures</span> =
+ <em>list-of-features</em></dt>
+ <dd>The value is a list of feature strings, with the
+ individual values separated by white space. Determines
+ whether all of the named <em>features</em> are supported by
+ the user agent. Only feature strings defined in the <a
+ href="feature.html">Feature String</a> appendix are
+ allowed. If all of the given features are supported, then
+ the attribute evaluates to true; otherwise, the current
+ element and its children are skipped and thus will not be
+ rendered.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+ <p>If the attribute is not present, then its implicit return
+ value is "true". If a null string or empty string value is
+ given to attribute <a>'requiredFeatures'</a>, the attribute
+ returns "false".</p>
+ <p><a>'requiredFeatures'</a> is often
+ used in conjunction with the <a>'switch'</a> element. If the <a>'requiredFeatures'</a> is used in other
+ situations, then it represents a simple switch on the given
+ element whether to render the element or not.</p>
+ <h3 id="ConditionalProcessingRequiredExtensionsAttribute">The <span class='attr-name'>'requiredExtensions'</span>
+ attribute</h3>
+ <p>The <a>'requiredExtensions'</a>
+ attribute defines a list of required language extensions.
+ Language extensions are capabilities within a user agent that
+ go beyond the feature set defined in this specification. Each
+ extension is identified by an <a
+ href="linking.html#IRIReference">IRI reference</a>.</p>
+ <div class="adef-list">
+ <p>Definition of <span
+ class="adef">requiredExtensions</span>:</p>
+ <dl>
+ <dt id="RequiredExtensionsAttribute"><span class="adef">requiredExtensions</span> =
+ <em>list-of-extensions</em></dt>
+ <dd>The value is a list of <a
+ href="linking.html#IRIReference">IRI reference</a>s which
+ identify the required extensions, with the individual
+ values separated by white space. Determines whether all of
+ the named <em>extensions</em> are supported by the user
+ agent. If all of the given extensions are supported, then
+ the attribute evaluates to true; otherwise, the current
+ element and its children are skipped and thus will not be
+ rendered.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+ <p>If a given <a href="linking.html#IRIReference">IRI
+ reference</a> contains white space within itself, that white
+ space must be escaped.</p>
+ <p>If the attribute is not present, then its implicit return
+ value is "true". If a null string or empty string value is
+ given to attribute <a>'requiredExtensions'</a>, the attribute
+ returns "false".</p>
+ <p><a>'requiredExtensions'</a> is often
+ used in conjunction with the <a>'switch'</a> element. If the <a>'requiredExtensions'</a> is used in other
+ situations, then it represents a simple switch on the given
+ element whether to render the element or not.</p>
+ <p>The IRI names for the extension should include versioning
+ information, such as "http://example.org/SVGExtensionXYZ/1.0",
+ so that script writers can distinguish between different
+ versions of a given extension.</p>
+
+ <h3 id="ConditionalProcessingSystemLanguageAttribute">The <span class="attr-name">'systemLanguage'</span> attribute</h3>
+ <p id="SystemLanguageAttribute">The attribute value is a comma-separated list of language
+ names as defined in <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a>
+ [<a href="refs.html#ref-BCP47">BCP47</a>].</p>
+ <p>Evaluates to "true" if one of the languages indicated by
+ user preferences exactly equals one of the languages given in
+ the value of this parameter, or if one of the languages
+ indicated by user preferences exactly equals a prefix of one of
+ the languages given in the value of this parameter such that
+ the first tag character following the prefix is "-".</p>
+ <p>Evaluates to "false" otherwise.</p>
+ <p>Note: This use of a prefix matching rule does not imply that
+ language tags are assigned to languages in such a way that it
+ is always true that if a user understands a language with a
+ certain tag, then this user will also understand all languages
+ with tags for which this tag is a prefix.</p>
+ <p>The prefix rule simply allows the use of prefix tags if this
+ is the case.</p>
+ <p>Implementation note: When making the choice of linguistic
+ preference available to the user, implementers should take into
+ account the fact that users are not familiar with the details
+ of language matching as described above, and should provide
+ appropriate guidance. As an example, users may assume that on
+ selecting "en-gb", they will be served any kind of English
+ document if British English is not available. The user
+ interface for setting user preferences should guide the user to
+ add "en" to get the best matching behavior.</p>
+ <p>Multiple languages MAY be listed for content that is
+ intended for multiple audiences. For example, content that is
+ presented simultaneously in the original Maori and English
+ versions, would call for:</p>
+ <center>
+ <code><text systemLanguage="mi, en"><!-- content
+ goes here --></text></code>
+ </center>
+ <p>However, just because multiple languages are present within
+ the object on which the <a>'systemLanguage'</a> test
+ attribute is placed, this does not mean that it is intended for
+ multiple linguistic audiences. An example would be a beginner's
+ language primer, such as "A First Lesson in Latin," which is
+ clearly intended to be used by an English-literate audience. In
+ this case, the <a>'systemLanguage'</a> test attribute
+ should only include "en".</p>
+ <p>Authoring note: Authors should realize that if several
+ alternative language objects are enclosed in a <a>'switch'</a>, and none of them
+ matches, this may lead to situations where no content is
+ displayed. It is thus recommended to include a "catch-all"
+ choice at the end of such a <a>'switch'</a> which is acceptable in
+ all cases.</p>
+ <p>For the <a>'systemLanguage'</a>
+ attribute: <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: no.</span></p>
+ <p>If the attribute is not present, then its implicit return
+ value is "true". If a null string or empty string value is
+ given to attribute <a>'systemLanguage'</a>, the attribute returns
+ "false".</p>
+ <p><a>'systemLanguage'</a> is often used
+ in conjunction with the <a>'switch'</a> element. If the <a>'systemLanguage'</a> is used in other
+ situations, then it represents a simple switch on the given
+ element whether to render the element or not.</p>
+
+ <h3 id="ApplicabilityOfTestAttributes">Applicability of test attributes</h3>
+ <p>The following list describes the applicability of the test
+ attributes to the elements that do not directly produce
+ rendering.</p>
+ <ul>
+ <li>the test attributes do not effect the
+ <a>'mask element'</a>, <a>'clipPath'</a>, <a>'linearGradient'</a>,
+ <a>'radialGradient'</a> and <a>'pattern'</a> elements. The
+ test attributes on a referenced element do not affect the
+ rendering of the referencing element.</li>
+ <li>the test attributes do not effect the <a>'defs'</a>, and <a>'cursor element'</a> elements as they are not
+ part of the rendering tree.</li>
+ <li>an animation element (<a>'animate'</a>, <a>'animateMotion'</a>, <a>'animateTransform'</a>, <a>'animateColor'</a> and <a>'set'</a>) will never be triggered if
+ it has a test attribute that evaluates to false.</li>
+ </ul>
+
+ <h2 id='ExternalResourcesRequired'>Specifying whether external resources are required for
+ proper rendering</h2>
+ <p>Documents often reference and use the contents of other
+ files (and other Web resources) as part of their rendering. In
+ some cases, authors want to specify that particular resources
+ are required for a document to be considered correct.</p>
+ <p>Attribute <a>'externalResourcesRequired'</a> is available
+ on all container elements and to all elements which potentially
+ can reference external resources. It specifies whether
+ referenced resources that are not part of the current document
+ are required for proper rendering of the given container
+ element or graphics element.</p>
+ <div class="adef-list">
+ <p>Attribute definition:</p>
+ <dl>
+ <dt id='ExternalResourcesRequiredAttribute'><span class="adef">externalResourcesRequired</span> =
+ "<span class="attr-value">false | true</span>"</dt>
+ <dd>
+ <dl>
+ <dt><span class="attr-value">false</span></dt>
+ <dd>(The default value.) Indicates that resources
+ external to the current document are optional. Document
+ rendering can proceed even if external resources are
+ unavailable to the current element and its
+ descendants.</dd>
+ <dt><span class="attr-value">true</span></dt>
+ <dd>Indicates that resources external to the current
+ document are required. If an external resource is not
+ available, progressive rendering is suspended, the
+ document's <a
+ href="interact.html#LoadEvent">SVGLoad</a> event is not
+ fired and the animation timeline does not begin until
+ that resource and all other required resources become
+ available, have been parsed and are ready to be
+ rendered. If a timeout event occurs on a required
+ resource, then the document goes into an error state
+ (see <a href="implnote.html#ErrorProcessing">Error
+ processing</a>). The document remains in an error state
+ until all required resources become available.</dd>
+ </dl>
+ </dd>
+ </dl>
+ </div>
+ <p>This attribute applies to all types of resource references,
+ including style sheets, color profiles (see <a
+ href="color.html#ColorProfileDescriptions">Color profile
+ descriptions</a>) and fonts specified by an <a
+ href="intro.html#TermIRIReference">IRI reference</a> using a <a>'font-face'</a> element or a CSS
+ @font-face specification. In particular, if an element sets
+ <span
+ class="attr-value">externalResourcesRequired="true"</span>,
+ then all style sheets must be available since any style sheet
+ might affect the rendering of that element.</p>
+ <p>Attribute <a>'externalResourcesRequired'</a> is not
+ inheritable (from a sense of attribute value inheritance), but
+ if set on a container element, its value will apply to all
+ elements within the container.</p>
+ <p>Because setting <span
+ class="attr-value">externalResourcesRequired="true"</span> on a
+ container element will have the effect of disabling progressive
+ display of the contents of that container, if that container
+ includes elements that reference external resources, tools that generate
+ SVG content are cautioned against simply setting <span
+ class="attr-value">externalResourcesRequired="true"</span> on
+ the <a>outermost svg element</a> on a universal
+ basis. Instead, it is better to specify <span
+ class="attr-value">externalResourcesRequired="true"</span> on
+ those particular graphics elements or container elements which
+ specifically need the availability of external resources in order to
+ render properly.</p>
+ <p>For <a>'externalResourcesRequired'</a>: <span
+ class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: no.</span></p>
+
+ <h2 id="CommonAttributes">Common attributes</h2>
+
+ <h3 id="Core.attrib">Attributes common to all elements: <span class='attr-name'>'id'</span> and <span class='attr-name'>'xml:base'</span></h3>
+ <p>The <a>'id'</a> and <a>'xml:base'</a> attributes are available on
+ all SVG elements:</p>
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="IDAttribute"><span
+ class="adef">id</span> = "<span
+ class="attr-value">name</span>"</dt>
+ <dd>Standard XML attribute for assigning a unique
+ <em>name</em> to an element. Refer to the <a href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible
+ Markup Language (XML) 1.0</cite></a> Recommendation [<a href="refs.html#ref-XML10">XML10</a>].<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="XMLBaseAttribute"><span
+ class="adef">xml:base</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>Specifies a base IRI other than the base IRI of the
+ document or external entity. Refer to the <a href="http://www.w3.org/TR/2009/REC-xmlbase-20090128/"><cite>XML Base</cite></a>
+ specification [<a href="refs.html#ref-XML-BASE">XML-BASE</a>].<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+
+ <h3 id="LangSpaceAttrs">The <span class='attr-name'>'xml:lang'</span> and
+ <span class='attr-name'>'xml:space'</span> attributes</h3>
+ Elements that might contain character data content have
+ attributes <a>'xml:lang'</a> and <a>'xml:space'</a>.
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="XMLLangAttribute"><span
+ class="adef">xml:lang</span> = "<span
+ class="attr-value">languageID</span>"</dt>
+ <dd>Standard XML attribute to specify the language (e.g.,
+ English) used in the contents and attribute values of
+ particular elements. Refer to the <a href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible Markup
+ Language (XML) 1.0</cite></a> Recommendation [<a href="refs.html#ref-XML10">XML10</a>].<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="XMLSpaceAttribute"> <span
+ class="adef">xml:space</span> = "<span
+ class="attr-value">{default | preserve}</span>"</dt>
+ <dd>Standard XML attribute to specify whether white space
+ is preserved in character data. The only possible values
+ are <span class='attr-value'>'default'</span> and <span class='attr-value'>'preserve'</span>. Refer to the
+ <a href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible Markup Language (XML) 1.0</cite></a>
+ Recommendation [<a href="refs.html#ref-XML10">XML10</a>] and to the
+ discussion <a href="text.html#WhiteSpace">white space
+ handling</a> in SVG.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGDocument">Interface SVGDocument</h3>
+
+<edit:interface name='::svg::SVGDocument'/>
+
+<h3 id="InterfaceSVGSVGElement">Interface SVGSVGElement</h3>
+
+<edit:with element='svg'>
+<edit:interface name='::svg::SVGSVGElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGGElement">Interface SVGGElement</h3>
+
+<edit:with element='g'>
+<edit:interface name='::svg::SVGGElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGDefsElement">Interface SVGDefsElement</h3>
+
+<edit:with element='defs'>
+<edit:interface name='::svg::SVGDefsElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGDescElement">Interface SVGDescElement</h3>
+
+<edit:with element='desc'>
+<edit:interface name='::svg::SVGDescElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGTitleElement">Interface SVGTitleElement</h3>
+
+<edit:with element='title'>
+<edit:interface name='::svg::SVGTitleElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGSymbolElement">Interface SVGSymbolElement</h3>
+
+<edit:with element='symbol'>
+<edit:interface name='::svg::SVGSymbolElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGUseElement">Interface SVGUseElement</h3>
+
+<edit:with element='use'>
+<edit:interface name='::svg::SVGUseElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGElementInstance">Interface SVGElementInstance</h3>
+
+<edit:interface name='::svg::SVGElementInstance'/>
+
+<h3 id="InterfaceSVGElementInstanceList">Interface SVGElementInstanceList</h3>
+
+<edit:interface name='::svg::SVGElementInstanceList'/>
+
+<h3 id="InterfaceSVGImageElement">Interface SVGImageElement</h3>
+
+<edit:with element='image'>
+<edit:interface name='::svg::SVGImageElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGSwitchElement">Interface SVGSwitchElement</h3>
+
+<edit:with element='switch'>
+<edit:interface name='::svg::SVGSwitchElement'/>
+</edit:with>
+
+<h3 id="InterfaceGetSVGDocument">Interface GetSVGDocument</h3>
+
+<edit:interface name='::svg::GetSVGDocument'/>
+
+</body>
+</html>
Binary file master/style/LinLibertineC_Re-4.0_.1_.ttf has changed
Binary file master/style/LinLibertine_BI-4.0_.3_.ttf has changed
Binary file master/style/LinLibertine_Bd-4.0_.2_.ttf has changed
Binary file master/style/LinLibertine_It-4.0_.3_.ttf has changed
Binary file master/style/LinLibertine_Re-4.1_.8_.ttf has changed
Binary file master/style/VeraMoBI.ttf has changed
Binary file master/style/VeraMoBd.ttf has changed
Binary file master/style/VeraMoIt.ttf has changed
Binary file master/style/VeraMono.ttf has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/style/expanders.js Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,32 @@
+function expand(e) {
+ e = e.parentNode;
+ e.parentNode.removeAttribute('class');
+ e.style.display = "none";
+ e.nextSibling.style.display = "inline";
+}
+
+(function() {
+ var i, a = [], e0, e1p, e1, e2, l = document.getElementsByTagName('span');
+ for (i = 0; i != l.length; i++) {
+ e0 = l[i];
+ if (e0.getAttribute('class') == 'expanding') {
+ a.push(e0);
+ }
+ }
+ for (i = 0; i != a.length; i++) {
+ e0 = a[i];
+ e1 = document.createElement('span');
+ e1.setAttribute('class', 'expander');
+ e1.setAttribute('onclick', 'expand(event.target)');
+ e1p = document.createElement('span');
+ e1p.textContent = ' ';
+ e1p.appendChild(e1);
+ e2 = document.createElement('span');
+ e2.style.display = 'none';
+ while (e0.firstChild) {
+ e2.appendChild(e0.firstChild);
+ }
+ e0.appendChild(e1p);
+ e0.appendChild(e2);
+ }
+})();
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/style/logo-ED-v.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 381" width="0.25in" height="3.66in">
+ <rect width="26" height="381" fill="red"/>
+ <g transform="matrix(0,-1,1,0,0,0)" fill="white">
+ <path d="m -198.077,4.5159997 -2.231,0 -4.278,10.8100003 -4.37,-10.8100003 -2.139,0 -4.347,10.8100003 -4.324,-10.8100003 -2.254,0 6.348,15.8240003 0.437,0 5.198,-12.8340003 5.152,12.8340003 0.437,0 6.371,-15.8240003"/>
+ <path d="m -196.16872,7.1149997 c 1.081,-0.4829996 1.817,-0.667 2.668,-0.667 1.656,0 2.714,0.8970014 2.714,2.346 0,1.4259983 -1.035,2.2770003 -3.105,2.2770003 l 0,2.07 c 2.231,-0.115 3.358,1.081001 3.358,2.622 0,1.517998 -0.989,2.507 -2.53,2.507 -1.15,0 -2.3,-0.391001 -3.496,-1.196 l 0,2.438 c 1.127,0.574999 2.254,0.897 3.335,0.897 2.898,0 4.945,-1.955003 4.945,-4.761 0,-1.609999 -0.69,-3.243001 -2.254,-3.726 1.426,-0.782 2.001,-1.771002 2.001,-3.5190003 0,-2.4839976 -1.817,-4.094 -4.623,-4.094 -1.173,0 -2.07,0.2070004 -3.013,0.667 l 0,2.139"/>
+ <path d="m -171.44372,5.5969997 c -2.139,-0.8969991 -3.772,-1.288 -5.382,-1.288 -4.99099,0 -8.602,3.4960047 -8.602,8.2800003 0,3.288996 2.57601,7.82 8.464,7.82 2.461,0 4.14,-0.575001 5.681,-1.38 l 0,-2.461 c -1.771,1.149999 -3.703,1.771 -5.474,1.771 -3.77199,0 -6.348,-2.438004 -6.348,-5.957 0,-3.4499969 2.668,-6.0030003 6.256,-6.0030003 1.817,0 3.473,0.5060011 5.405,1.633 l 0,-2.415"/>
+ <path d="m -153.22017,4.5159997 -8.901,0 0,15.6860003 9.108,0 0,-2.024 -6.854,0 0,-4.876 6.417,0 0,-2.024 -6.417,0 0,-4.7380003 6.647,0 0,-2.024"/>
+ <path d="m -141.97317,4.5159997 -2.047,0 0,5.5660003 c -0.828,-0.299 -1.472,-0.4140003 -2.162,-0.4140003 -3.013,0 -5.152,2.1390033 -5.152,5.1290003 0,3.311996 1.932,5.405 5.014,5.405 l 4.347,0 0,-15.6860003 m -2.047,13.9610003 -2.07,0 c -2.369,0 -3.151,-1.449002 -3.151,-3.381 0,-2.161998 1.334,-3.588 3.312,-3.588 0.69,0 1.219,0.115 1.909,0.391 l 0,6.578"/>
+ <path d="m -137.07956,9.8749997 -2.047,0 0,10.3270003 2.047,0 0,-10.3270003 m 0.207,-3.128 c 0,-0.6669994 -0.552,-1.219 -1.219,-1.219 -0.667,0 -1.219,0.5520006 -1.219,1.219 0,0.6669993 0.552,1.219 1.219,1.219 0.667,0 1.219,-0.5520007 1.219,-1.219"/>
+ <path d="m -131.74931,7.7359997 -3.841,3.7490003 0,0.23 1.794,0 0,5.451 c 0,1.862998 1.127,3.243 3.358,3.243 0.667,0 1.771,-0.299001 2.484,-0.69 l 0,-1.909 c -0.828,0.505999 -1.587,0.759 -2.323,0.759 -0.598,0 -1.472,-0.345002 -1.472,-1.564 l 0,-5.29 3.266,0 0,-1.8400003 -3.266,0 0,-2.139"/>
+ <path d="m -121.62967,9.6679997 c -3.082,0 -5.451,2.3000033 -5.451,5.2670003 0,3.173996 2.277,5.474 5.451,5.474 3.31199,0 5.589,-2.208004 5.589,-5.474 0,-3.058997 -2.34601,-5.2670003 -5.589,-5.2670003 m -0.023,1.8400003 c 2.047,0 3.519,1.449002 3.519,3.45 0,2.230997 -1.357,3.611 -3.519,3.611 -1.978,0 -3.335,-1.449003 -3.335,-3.634 0,-1.977998 1.403,-3.427 3.335,-3.427"/>
+ <path d="m -113.60878,9.8749997 0,10.3270003 2.047,0 0,-5.405 c 0,-1.770999 1.104,-3.174 2.507,-3.174 0.483,0 1.288,0.414 1.909,1.012 l 1.081,-1.771 c -0.851,-0.805 -1.633,-1.1960003 -2.461,-1.1960003 -0.966,0 -1.955,0.7590013 -2.99,2.5760003 l -0.046,0 0,-2.3690003 -2.047,0"/>
+ <path d="m -104.71964,9.9669997 c 1.702,-0.5059995 2.622,-1.8170017 2.622,-3.519 0,-1.1729989 -0.598,-2.139 -1.541,-2.139 -0.782,0 -1.38,0.4830009 -1.38,1.403 0,0.7359992 0.483,1.2650001 1.219,1.357 0.046,0.919999 0.023,1.6560008 -0.92,2.461 l 0,0.437"/>
+ <path d="m -95.425185,10.519 c -1.080999,-0.5749998 -2.070001,-0.8510003 -3.036,-0.8510003 -2.069995,0 -3.404005,1.0580013 -3.404005,2.8060003 0,2.782997 4.830005,3.542001 4.830005,4.968 0,0.735999 -0.690001,1.127 -1.518,1.173 -0.828,0 -2.047005,-0.437001 -3.381005,-1.357 l 0,2.208 c 1.334,0.689999 2.323006,0.943 3.588005,0.943 1.954998,0 3.404,-1.219002 3.404,-3.036 0,-1.057999 -0.621002,-1.771001 -2.323,-2.898 -1.816999,-1.057999 -2.507,-1.610001 -2.507,-2.07 0,-0.552 0.529,-0.943 1.357,-0.943 0.758999,0 1.840001,0.322 2.99,1.081 l 0,-2.024"/>
+ <path d="m -85.890668,20.202 6.118,0 c 5.174995,0 8.326,-3.818004 8.326,-7.843 0,-3.7029966 -2.553005,-7.8430003 -8.349,-7.8430003 l -6.095,0 0,15.6860003 m 2.254,-13.6620003 3.473,0 c 4.392996,0 6.394,2.6680031 6.394,5.8190003 0,1.931998 -1.173005,5.819 -6.279,5.819 l -3.588,0 0,-11.6380003"/>
+ <path d="m -68.801668,9.8749997 0,10.3270003 2.047,0 0,-5.405 c 0,-1.770999 1.104002,-3.174 2.507,-3.174 0.483,0 1.288001,0.414 1.909,1.012 l 1.081,-1.771 c -0.850999,-0.805 -1.633,-1.1960003 -2.461,-1.1960003 -0.965999,0 -1.955001,0.7590013 -2.99,2.5760003 l -0.046,0 0,-2.3690003 -2.047,0"/>
+ <path d="m -51.816527,18.362 c -0.46,0.344999 -0.874,0.552 -1.081,0.552 -0.253,0 -0.391,-0.138001 -0.391,-0.529 l 0,-5.313 c 0,-2.345998 -1.656002,-3.4040003 -3.749,-3.4040003 -1.494998,0 -2.622001,0.4600013 -3.427,1.4030003 l 0,2.231 c 0.988999,-1.172999 2.139001,-1.702 3.266,-1.702 1.241999,0 1.863,0.529001 1.863,1.817 l 0,0.552 -1.817,0.644 c -1.655998,0.597999 -3.519,1.219002 -3.519,3.266 0,1.333998 1.012002,2.53 2.53,2.53 0.942999,0 1.886001,-0.345001 2.783,-1.058 0.184,0.735999 0.667001,1.058 1.564,1.058 0.643999,0 1.035001,-0.184001 1.978,-0.805 l 0,-1.242 m -3.519,-0.253 c -0.551999,0.528999 -1.150001,0.851 -1.794,0.851 -0.850999,0 -1.472,-0.598001 -1.472,-1.449 0,-1.218999 1.518002,-1.817001 3.266,-2.415 l 0,3.013"/>
+ <path d="m -44.623636,4.5159997 c -1.793999,-0.5059995 -2.967001,-0.091999 -3.841,0.782 -0.828,0.8279991 -1.311,1.794002 -1.311,3.818 l 0,0.759 -1.449,0 0,1.8400003 1.449,0 0,8.487 2.047,0 0,-8.487 1.863,0 0,-1.8400003 -1.863,0 0,-0.989 c 0,-1.5869984 0.529001,-2.553 2.185,-2.553 0.367999,0 0.575,0.046 0.92,0.184 l 0,-2.001"/>
+ <path d="m -41.840636,7.7359997 -3.841,3.7490003 0,0.23 1.794,0 0,5.451 c 0,1.862998 1.127002,3.243 3.358,3.243 0.666999,0 1.771,-0.299001 2.484,-0.69 l 0,-1.909 c -0.828,0.505999 -1.587001,0.759 -2.323,0.759 -0.598,0 -1.472,-0.345002 -1.472,-1.564 l 0,-5.29 3.266,0 0,-1.8400003 -3.266,0 0,-2.139"/>
+ </g>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/style/logo-PR-v.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,40 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' version='1.1' overflow='visible' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 25 380' enable-background='new 0 0 25 380' width="0.25in" height="3.66in">
+ <g shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality'>
+ <g id='Background'>
+ </g>
+ <g id='Guides'>
+ </g>
+ <g id='Foreground'>
+ <rect fill-rule='evenodd' width='25' fill='#005A9C' clip-rule='evenodd' height='380'/>
+ <polygon fill-rule='evenodd' points='5.131,286.029 5.131,287.969 14.531,291.689 5.131,295.489 5.131,297.349 14.531,301.129 5.131,304.889 5.131,306.849 18.89,301.33 18.89,300.95 7.731,296.429 18.89,291.95 18.89,291.569 ' clip-rule='evenodd' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M7.391,284.592c-0.42-0.94-0.581-1.58-0.581-2.32 c0-1.439,0.78-2.36,2.04-2.36c1.24,0,1.98,0.9,1.98,2.7h1.8c-0.1-1.94,0.94-2.92,2.28-2.92c1.32,0,2.181,0.859,2.181,2.2 c0,1-0.34,2-1.04,3.04h2.12c0.5-0.98,0.779-1.961,0.779-2.9c0-2.52-1.699-4.3-4.14-4.3c-1.4,0-2.82,0.601-3.24,1.96 c-0.68-1.24-1.54-1.74-3.06-1.74c-2.16,0-3.56,1.58-3.56,4.02c0,1.021,0.18,1.801,0.58,2.621H7.391z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M6.071,263.292c-0.78,1.859-1.12,3.279-1.12,4.68 c0,4.34,3.04,7.479,7.2,7.479c2.859,0,6.8-2.239,6.8-7.359c0-2.141-0.5-3.6-1.199-4.94h-2.141c1,1.54,1.54,3.22,1.54,4.761 c0,3.279-2.12,5.52-5.18,5.52c-3,0-5.22-2.319-5.22-5.439c0-1.58,0.44-3.021,1.42-4.7H6.071z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M5.131,255.708h13.64v-1.961h-5.9v-2.039 c0-3.161-1.68-4.601-3.82-4.601c-2.16,0-3.92,1.36-3.92,4.34V255.708z M6.891,253.747v-2.3c0-1.78,1.08-2.319,2.08-2.319 c1.36,0,2.14,0.939,2.14,2.399v2.22H6.891z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,245.731h8.98v-1.78h-4.7c-1.54,0-2.76-0.959-2.76-2.18 c0-0.42,0.36-1.12,0.88-1.66l-1.54-0.939c-0.7,0.74-1.04,1.42-1.04,2.14c0,0.84,0.66,1.699,2.24,2.6v0.04h-2.06V245.731z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.611,234.437c0,2.68,2,4.739,4.58,4.739 c2.76,0,4.76-1.98,4.76-4.739c0-2.881-1.92-4.861-4.76-4.861C11.531,229.576,9.611,231.617,9.611,234.437z M11.211,234.456 c0-1.779,1.26-3.06,3-3.06c1.94,0,3.141,1.18,3.141,3.06c0,1.721-1.26,2.9-3.16,2.9C12.471,237.356,11.211,236.136,11.211,234.456z ' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M18.551,226.145c0.279-0.681,0.399-1.221,0.399-1.8 c0-2.661-1.899-4.562-4.6-4.562c-2.96,0-4.56,1.781-4.56,5.061v3.08h13.58v-1.779H18.551z M11.391,226.145v-1.62 c0-1.94,1.08-2.921,2.94-2.921c1.74,0,3.021,1.2,3.021,2.86c0,0.561-0.141,1.14-0.4,1.681H11.391z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.611,213.804c0,2.68,2,4.739,4.58,4.739 c2.76,0,4.76-1.979,4.76-4.739c0-2.881-1.92-4.86-4.76-4.86C11.531,208.944,9.611,210.984,9.611,213.804z M11.211,213.824 c0-1.78,1.26-3.061,3-3.061c1.94,0,3.141,1.181,3.141,3.061c0,1.72-1.26,2.899-3.16,2.899 C12.471,216.723,11.211,215.503,11.211,213.824z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M10.351,201.952c-0.5,0.94-0.74,1.801-0.74,2.641 c0,1.8,0.92,2.959,2.458,2.959c2.413,0,3.07-4.199,4.305-4.199c0.638,0,0.977,0.6,1.017,1.319c0,0.721-0.379,1.78-1.176,2.94h1.915 c0.601-1.16,0.82-2.02,0.82-3.12c0-1.7-1.061-2.96-2.636-2.96c-0.917,0-1.534,0.54-2.511,2.02 c-0.916,1.581-1.395,2.181-1.796,2.181c-0.49,0-0.837-0.461-0.837-1.181c0-0.659,0.286-1.6,0.96-2.6H10.351z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M16.171,192.175c0.68,1.041,1.08,2.061,1.08,3.141 c0,1.72-0.921,2.74-2.7,3.021v-6.32c-3.32,0-4.94,1.521-4.94,3.9c0,2.479,1.84,4.2,4.561,4.2c2.479,0,4.779-1.561,4.779-4.36 c0-1.521-0.34-2.5-1.061-3.581H16.171z M13.371,198.296c-1.42-0.24-2.22-1.061-2.22-2.421c0-1.259,0.86-2.039,2.22-2.1V198.296z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M5.131,182.545v1.78h4.84c-0.26,0.72-0.36,1.279-0.36,1.879 c0,2.621,1.86,4.48,4.46,4.48c2.88,0,4.7-1.68,4.7-4.359v-3.78H5.131z M17.271,184.326v1.8c0,2.06-1.261,2.74-2.94,2.74 c-1.879,0-3.12-1.16-3.12-2.881c0-0.6,0.1-1.06,0.34-1.659H17.271z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M5.131,174.674h13.64v-1.96h-5.92v-0.82c0-1,0.32-1.82,3.121-3.62 l2.8-1.8v-2.34c-1.301,0.94-1.761,1.28-2.7,1.86c-1.7,1.04-2.96,1.8-3.78,3.041c-0.58-1.46-1.76-2.28-3.34-2.28 c-2.36,0-3.82,1.72-3.82,4.48V174.674z M6.811,172.714v-1.26c0-1.9,0.78-2.66,2.061-2.68c1.14-0.02,2.22,0.58,2.22,2.68v1.26H6.811 z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M16.171,155.583c0.68,1.04,1.08,2.06,1.08,3.14 c0,1.72-0.921,2.74-2.7,3.02v-6.32c-3.32,0-4.94,1.52-4.94,3.9c0,2.48,1.84,4.2,4.561,4.2c2.479,0,4.779-1.56,4.779-4.36 c0-1.52-0.34-2.5-1.061-3.58H16.171z M13.371,161.703c-1.42-0.24-2.22-1.06-2.22-2.42c0-1.26,0.86-2.04,2.22-2.1V161.703z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M10.231,147.112c-0.38,0.86-0.62,1.56-0.62,2.6 c0,2.72,1.88,4.44,4.84,4.44c2.641,0,4.5-1.88,4.5-4.56c0-0.94-0.24-2.08-0.52-2.68h-1.76c0.399,0.9,0.6,1.62,0.6,2.38 c0,1.84-1.12,3.04-2.98,3.04c-1.82,0-3.04-1.12-3.04-2.74c0-0.78,0.2-1.46,0.88-2.48H10.231z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.611,140.955c0,2.68,2,4.74,4.58,4.74 c2.76,0,4.76-1.98,4.76-4.74c0-2.88-1.92-4.86-4.76-4.86C11.531,136.094,9.611,138.134,9.611,140.955z M11.211,140.974 c0-1.78,1.26-3.06,3-3.06c1.94,0,3.141,1.18,3.141,3.06c0,1.72-1.26,2.9-3.16,2.9C12.471,143.875,11.211,142.654,11.211,140.974z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,134.402h8.98v-1.78h-6.52c-0.86-0.74-1.14-1.34-1.14-2.24 c0-0.88,0.62-1.62,2.08-1.62h5.58v-1.78h-6.52c-0.66-0.64-1.16-1.42-1.14-2c0-1.02,0.74-1.86,2.1-1.86h5.56v-1.78h-5.64 c-2.12,0-3.52,1.16-3.52,2.98c0,1.28,0.74,2.22,1.62,3c-1.06,0.6-1.62,1.54-1.62,2.68c0,0.84,0.44,1.7,1.36,2.621h-1.18V134.402z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,119.188h8.98v-1.78h-6.52c-0.86-0.74-1.14-1.34-1.14-2.24 c0-0.88,0.62-1.62,2.08-1.62h5.58v-1.78h-6.52c-0.66-0.64-1.16-1.42-1.14-2c0-1.02,0.74-1.86,2.1-1.86h5.56v-1.78h-5.64 c-2.12,0-3.52,1.16-3.52,2.98c0,1.28,0.74,2.22,1.62,3c-1.06,0.6-1.62,1.54-1.62,2.68c0,0.84,0.44,1.7,1.36,2.62h-1.18V119.188z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M16.171,96.393c0.68,1.04,1.08,2.06,1.08,3.14 c0,1.72-0.921,2.74-2.7,3.02v-6.32c-3.32,0-4.94,1.521-4.94,3.9c0,2.48,1.84,4.2,4.561,4.2c2.479,0,4.779-1.56,4.779-4.36 c0-1.52-0.34-2.5-1.061-3.58H16.171z M13.371,102.513c-1.42-0.24-2.22-1.06-2.22-2.42c0-1.26,0.86-2.04,2.22-2.1V102.513z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,92.782v1.78h8.98v-1.78h-6.44 c-0.94-0.84-1.3-1.46-1.3-2.24c0-1.08,0.86-1.76,2.18-1.76h5.56v-1.78h-5.54c-2.46,0-3.62,1.36-3.62,3.06c0,1,0.5,2,1.36,2.68v0.04 H9.791z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M5.131,76.961v1.78h4.84c-0.26,0.72-0.36,1.28-0.36,1.88 c0,2.62,1.86,4.48,4.46,4.48c2.88,0,4.7-1.68,4.7-4.36v-3.78H5.131z M17.271,78.741v1.8c0,2.06-1.261,2.74-2.94,2.74 c-1.879,0-3.12-1.16-3.12-2.88c0-0.6,0.1-1.06,0.34-1.66H17.271z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M17.171,67.765c0.299,0.4,0.479,0.76,0.479,0.94 c0,0.22-0.12,0.34-0.46,0.34h-4.62c-2.04,0-2.96,1.44-2.96,3.26c0,1.3,0.4,2.28,1.22,2.98h1.94c-1.02-0.86-1.48-1.86-1.48-2.84 c0-1.08,0.46-1.62,1.58-1.62h0.48l0.56,1.58c0.521,1.44,1.06,3.06,2.841,3.06c1.159,0,2.199-0.88,2.199-2.2 c0-0.82-0.3-1.64-0.92-2.42c0.641-0.16,0.92-0.58,0.92-1.36c0-0.56-0.16-0.9-0.699-1.72H17.171z M16.951,70.825 c0.46,0.48,0.74,1,0.74,1.56c0,0.74-0.52,1.28-1.261,1.28c-1.059,0-1.579-1.32-2.1-2.84H16.951z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M7.931,64.313l3.26,3.34h0.2v-1.561h4.74 c1.621,0,2.82-0.979,2.82-2.92c0-0.58-0.26-1.54-0.6-2.16h-1.66c0.439,0.72,0.66,1.38,0.66,2.02c0,0.52-0.3,1.28-1.36,1.28h-4.6 v-2.84h-1.6v2.84H7.931z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,58.125v1.78h8.98v-1.78H9.791z M7.071,57.945 c-0.58,0-1.06,0.48-1.06,1.06s0.48,1.06,1.06,1.06s1.06-0.48,1.06-1.06S7.651,57.945,7.071,57.945z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.611,51.57c0,2.68,2,4.74,4.58,4.74c2.76,0,4.76-1.98,4.76-4.74 c0-2.88-1.92-4.86-4.76-4.86C11.531,46.709,9.611,48.75,9.611,51.57z M11.211,51.589c0-1.779,1.26-3.06,3-3.06 c1.94,0,3.141,1.18,3.141,3.06c0,1.72-1.26,2.9-3.16,2.9C12.471,54.49,11.211,53.27,11.211,51.589z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,43.198v1.78h8.98v-1.78h-6.44 c-0.94-0.84-1.3-1.46-1.3-2.24c0-1.08,0.86-1.76,2.18-1.76h5.56v-1.78h-5.54c-2.46,0-3.62,1.36-3.62,3.06c0,1,0.5,2,1.36,2.68v0.04 H9.791z' fill='#FFFFFF'/>
+ </g>
+ <g id='Calque_1'>
+ </g>
+ </g>
+</svg>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/style/logo-REC-v.svg Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,32 @@
+<?xml version='1.0' encoding='iso-8859-1'?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' version='1.1' overflow='visible' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 25 380' enable-background='new 0 0 25 380' width="0.25in" height="3.66in">
+ <g shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality'>
+ <g id='Background'>
+ </g>
+ <g id='Guides'>
+ </g>
+ <g id='Foreground'>
+ <rect fill-rule='evenodd' width='25' fill='#005A9C' clip-rule='evenodd' height='380'/>
+ <polygon fill-rule='evenodd' points='5.13,205.456 5.13,207.396 14.531,211.117 5.13,214.917 5.13,216.776 14.531,220.556 5.13,224.316 5.13,226.276 18.891,220.756 18.891,220.376 7.731,215.856 18.891,211.376 18.891,210.996 ' clip-rule='evenodd' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M7.391,204.019c-0.42-0.939-0.58-1.58-0.58-2.32 c0-1.439,0.78-2.36,2.04-2.36c1.24,0,1.98,0.9,1.98,2.701h1.8c-0.1-1.94,0.94-2.92,2.281-2.92c1.32,0,2.18,0.859,2.18,2.199 c0,1-0.34,2.001-1.04,3.04h2.12c0.5-0.979,0.78-1.96,0.78-2.9c0-2.52-1.7-4.3-4.14-4.3c-1.4,0-2.82,0.601-3.24,1.961 c-0.68-1.24-1.54-1.74-3.06-1.74c-2.16,0-3.56,1.579-3.56,4.02c0,1.02,0.18,1.801,0.58,2.62H7.391z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M6.071,182.718c-0.78,1.86-1.12,3.28-1.12,4.681 c0,4.339,3.04,7.479,7.2,7.479c2.86,0,6.8-2.24,6.8-7.36c0-2.14-0.5-3.6-1.2-4.939h-2.14c1,1.539,1.54,3.22,1.54,4.76 c0,3.279-2.12,5.521-5.18,5.521c-3,0-5.22-2.32-5.22-5.44c0-1.58,0.44-3.02,1.42-4.7H6.071z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M5.13,174.994h13.64v-1.96h-5.92v-0.82c0-1,0.32-1.82,3.12-3.62 l2.8-1.8v-2.34c-1.3,0.94-1.76,1.28-2.7,1.86c-1.7,1.04-2.96,1.8-3.78,3.04c-0.58-1.46-1.76-2.28-3.34-2.28 c-2.36,0-3.82,1.72-3.82,4.48V174.994z M6.811,173.034v-1.26c0-1.899,0.78-2.66,2.06-2.68c1.14-0.02,2.22,0.58,2.22,2.68v1.26 H6.811z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M16.171,155.903c0.68,1.04,1.08,2.06,1.08,3.14 c0,1.72-0.919,2.74-2.7,3.02v-6.32c-3.32,0-4.94,1.52-4.94,3.9c0,2.48,1.84,4.2,4.56,4.2c2.48,0,4.78-1.56,4.78-4.36 c0-1.52-0.34-2.5-1.06-3.58H16.171z M13.371,162.023c-1.42-0.24-2.22-1.06-2.22-2.42c0-1.26,0.86-2.04,2.22-2.1V162.023z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M10.231,147.432c-0.38,0.86-0.62,1.56-0.62,2.6 c0,2.72,1.88,4.44,4.84,4.44c2.64,0,4.5-1.879,4.5-4.56c0-0.94-0.24-2.08-0.52-2.68h-1.76c0.4,0.9,0.6,1.62,0.6,2.38 c0,1.84-1.12,3.04-2.98,3.04c-1.82,0-3.041-1.12-3.041-2.74c0-0.78,0.2-1.46,0.88-2.48H10.231z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.611,141.274c0,2.68,2,4.74,4.58,4.74 c2.76,0,4.76-1.98,4.76-4.74c0-2.88-1.92-4.86-4.76-4.86C11.531,136.414,9.611,138.454,9.611,141.274z M11.21,141.294 c0-1.78,1.26-3.06,3-3.06c1.94,0,3.14,1.18,3.14,3.06c0,1.72-1.26,2.9-3.16,2.9C12.471,144.194,11.21,142.974,11.21,141.294z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,134.722h8.98v-1.78h-6.52c-0.86-0.74-1.14-1.34-1.14-2.24 c0-0.88,0.62-1.62,2.08-1.62h5.58v-1.78h-6.52c-0.66-0.64-1.16-1.42-1.14-2c0-1.02,0.74-1.86,2.1-1.86h5.56v-1.78h-5.64 c-2.12,0-3.52,1.16-3.52,2.98c0,1.28,0.74,2.22,1.62,3c-1.06,0.6-1.62,1.54-1.62,2.68c0,0.84,0.44,1.7,1.36,2.621h-1.18V134.722z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,119.507h8.98v-1.78h-6.52c-0.86-0.74-1.14-1.34-1.14-2.24 c0-0.88,0.62-1.62,2.08-1.62h5.58v-1.78h-6.52c-0.66-0.64-1.16-1.42-1.14-2c0-1.02,0.74-1.86,2.1-1.86h5.56v-1.78h-5.64 c-2.12,0-3.52,1.16-3.52,2.98c0,1.28,0.74,2.22,1.62,3c-1.06,0.6-1.62,1.54-1.62,2.68c0,0.84,0.44,1.7,1.36,2.621h-1.18V119.507z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M16.171,96.712c0.68,1.04,1.08,2.06,1.08,3.14 c0,1.72-0.919,2.74-2.7,3.02v-6.32c-3.32,0-4.94,1.521-4.94,3.9c0,2.48,1.84,4.2,4.56,4.2c2.48,0,4.78-1.56,4.78-4.36 c0-1.52-0.34-2.5-1.06-3.58H16.171z M13.371,102.833c-1.42-0.24-2.22-1.06-2.22-2.42c0-1.26,0.86-2.04,2.22-2.1V102.833z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,93.102v1.78h8.98v-1.78h-6.44 c-0.94-0.84-1.3-1.46-1.3-2.24c0-1.08,0.86-1.76,2.18-1.76h5.56v-1.78h-5.54c-2.46,0-3.62,1.36-3.62,3.06c0,1,0.5,2,1.36,2.68v0.04 H9.791z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M5.13,77.281v1.78h4.84c-0.26,0.72-0.36,1.28-0.36,1.88 c0,2.62,1.86,4.48,4.46,4.48c2.88,0,4.7-1.68,4.7-4.36v-3.78H5.13z M17.271,79.061v1.8c0,2.06-1.26,2.74-2.94,2.74 c-1.88,0-3.12-1.16-3.12-2.88c0-0.6,0.1-1.06,0.34-1.66H17.271z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M17.171,68.085c0.3,0.4,0.48,0.76,0.48,0.94 c0,0.22-0.12,0.34-0.46,0.34h-4.62c-2.04,0-2.96,1.44-2.96,3.26c0,1.3,0.4,2.28,1.22,2.98h1.94c-1.02-0.86-1.479-1.86-1.479-2.84 c0-1.08,0.46-1.62,1.58-1.62h0.48l0.56,1.58c0.52,1.44,1.06,3.06,2.84,3.06c1.16,0,2.2-0.88,2.2-2.2c0-0.82-0.3-1.64-0.92-2.42 c0.64-0.16,0.92-0.58,0.92-1.36c0-0.56-0.16-0.9-0.7-1.72H17.171z M16.951,71.145c0.46,0.48,0.74,1,0.74,1.56 c0,0.74-0.52,1.28-1.26,1.28c-1.06,0-1.58-1.32-2.1-2.84H16.951z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M7.931,64.633l3.26,3.34h0.2v-1.56h4.74 c1.62,0,2.82-0.98,2.82-2.92c0-0.58-0.26-1.54-0.6-2.16h-1.66c0.44,0.72,0.66,1.38,0.66,2.02c0,0.52-0.3,1.28-1.36,1.28h-4.6v-2.84 h-1.6v2.84H7.931z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,58.445v1.78h8.98v-1.78H9.791z M7.071,58.265 c-0.58,0-1.06,0.48-1.06,1.06s0.48,1.06,1.06,1.06s1.06-0.48,1.06-1.06S7.651,58.265,7.071,58.265z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.611,51.89c0,2.68,2,4.74,4.58,4.74c2.76,0,4.76-1.98,4.76-4.74 c0-2.88-1.92-4.86-4.76-4.86C11.531,47.029,9.611,49.07,9.611,51.89z M11.21,51.91c0-1.78,1.26-3.06,3-3.06 c1.94,0,3.14,1.18,3.14,3.06c0,1.72-1.26,2.9-3.16,2.9C12.471,54.81,11.21,53.589,11.21,51.91z' fill='#FFFFFF'/>
+ <path fill-rule='evenodd' clip-rule='evenodd' d='M9.791,43.518v1.78h8.98v-1.78h-6.44 c-0.94-0.84-1.3-1.46-1.3-2.24c0-1.08,0.86-1.76,2.18-1.76h5.56v-1.78h-5.54c-2.46,0-3.62,1.36-3.62,3.06c0,1,0.5,2,1.36,2.68v0.04 H9.791z' fill='#FFFFFF'/>
+ </g>
+ <g id='Calque_1'>
+ </g>
+ </g>
+</svg>
Binary file master/style/luxisb.ttf has changed
Binary file master/style/luxisbi.ttf has changed
Binary file master/style/luxisr.ttf has changed
Binary file master/style/luxisri.ttf has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/style/svg-style-print.css Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,150 @@
+/* Print style sheet for SVG 1.1 Second Edition, designed to be used with Prince. */
+
+@font-face { font-family: "Linux Libertine"; src: url(../../master/style/LinLibertine_Re-4.1_.8_.ttf); }
+@font-face { font-family: "Linux Libertine"; font-weight: bold; src: url(../../master/style/LinLibertine_Bd-4.0_.2_.ttf); }
+@font-face { font-family: "Linux Libertine"; font-style: italic; src: url(../../master/style/LinLibertine_It-4.0_.3_.ttf); }
+@font-face { font-family: "Linux Libertine"; font-weight: bold; font-style: italic; src: url(../../master/style/LinLibertine_BI-4.0_.3_.ttf); }
+
+@font-face { font-family: "Luxi Sans"; src: url(../../master/style/luxisr.ttf); }
+@font-face { font-family: "Luxi Sans"; font-weight: bold; src: url(../../master/style/luxisb.ttf); }
+@font-face { font-family: "Luxi Sans"; font-style: italic; src: url(../../master/style/luxisri.ttf); }
+@font-face { font-family: "Luxi Sans"; font-weight: bold; font-style: italic; src: url(../../master/style/luxisbi.ttf); }
+
+@font-face { font-family: "Bitstream Vera Sans Mono"; src: url(../../master/style/VeraMono.ttf); }
+@font-face { font-family: "Bitstream Vera Sans Mono"; font-weight: bold; src: url(../../master/style/VeraMoBd.ttf); }
+@font-face { font-family: "Bitstream Vera Sans Mono"; font-style: italic; src: url(../../master/style/VeraMoIt.ttf); }
+@font-face { font-family: "Bitstream Vera Sans Mono"; font-weight: bold; font-style: italic; src: url(../../master/style/VeraMoBI.ttf); }
+
+@page {
+ size: letter;
+ padding: 0;
+ margin: 1.25in 1in 2in 1.25in;
+ background: url(../../master/style/logo-PR-v.svg);
+ background-position: top left;
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+}
+
+body {
+ font: 10pt/13pt "Linux Libertine", serif;
+ background: transparent;
+ margin: 0;
+ padding: 0;
+ hyphens: auto;
+ prince-hyphenate-lines: 2;
+ text-align: justify;
+ orphans: 1;
+ widows: 2;
+ font-variant: prince-opentype(calt, liga);
+}
+
+h1, h2, h3, h4, h5, h6, th, td, table.vert th, table.vert td { font-family: "Luxi Sans", sans-serif }
+th, td, table.vert th, table.vert td { font-size: 8.5pt }
+
+h1 { font: 19pt/24.7pt "Luxi Sans", sans-serif }
+
+.head dt { margin-top: 6.5pt }
+.head .authornote { font-size: 80%; float: right; prince-text-replace: "(" "" ")" "" }
+.copyright { float: bottom; margin: 0; font-size: 85% !important }
+.head dl { margin: 2em 0; prince-text-replace: "<" " · " ">" "" }
+.head + hr { display: none }
+abbr, acronym { text-decoration: none }
+
+a:link { text-decoration: none }
+a:link, a:visited { color: navy }
+
+#abstract { page-break-before: always }
+
+p { margin: 0 }
+p + p { text-indent: 2em }
+
+.head p,
+#status + p + p,
+pre + p,
+.view-as-svg + p,
+.filterformula + p,
+p.normativity + p
+{ text-indent: 0; margin-top: 13pt }
+
+#minitoc-section { display: none }
+
+.url { font: 8.5pt "Luxi Sans", sans-serif }
+
+hr.chapter-divider { height: 0; visibility: hidden; page-break-after: always }
+
+#chapter-expanded-toc h1 { prince-text-replace: "Expanded" "" }
+#chapter-expanded-toc h1 + ul { display: none }
+
+#chapter-expanded-toc ul { list-style-type: none; margin: 0 }
+#chapter-expanded-toc > ol ul { margin: 0; margin-left: 2em !important; }
+#chapter-expanded-toc > ol { margin-left: 0; font-variant: prince-opentype(lnum) }
+#chapter-expanded-toc > ol > li { margin-top: 13pt !important; }
+#chapter-expanded-toc > ol > li > ul { page-break-before: avoid }
+#chapter-expanded-toc > ol > li > a { font-weight: bold; }
+
+h2 + ul.toc,
+h2 + ul.toc ul.toc { margin: 0 0 0 2em !important; font-variant: prince-opentype(lnum) }
+
+/* #chapter-expanded-toc ul li.front-toc > a::after { font-weight: normal; content: leader('. ') target-counter(attr(href), page, lower-roman); } */
+#chapter-expanded-toc ul a::after { font-weight: normal; content: leader('. ') target-counter(attr(href), page) }
+
+code, tt, pre, pre.idl, pre.xml, pre.svgsamplecompressed, pre.dtd-fragment, #chapter-svgdtd pre, .adef, .filterformula { font: 8pt Bitstream Vera Sans Mono, monospace }
+pre.idl, pre.xml, pre.svgsamplecompressed, pre.dtd-fragment, #chapter-svgdtd pre { overflow: hidden; white-space: pre-wrap; font-size: 6pt }
+
+ul, ol, table { margin: 13pt 0 13pt 2em }
+dl { margin: 13pt 0 }
+dl.definitions > dt { display: run-in }
+dl.definitions > dt:after { content: " · " }
+dl.definitions > dd { margin-left: 0; margin-top: 13pt }
+
+dl.interface dl.exceptions > dt,
+dl.interface dl.attributes > dt,
+dl.interface dl.operations > dt,
+dl.interface dl.constants > dt,
+dl.interface ol.parameters,
+dl.interface ol.parameters > li { margin-left: 0; padding-left: 0 }
+
+dl.interface ol.parameters .parameter::after { content: "" }
+dl.interface dl.exceptions > dd { margin-top: 0 }
+dl.interface ol.parameters > li { margin-bottom: 1em }
+
+dl.interface dl.exceptions > dt::marker,
+dl.interface dl.attributes > dt::marker,
+dl.interface dl.operations > dt::marker,
+dl.interface dl.constants > dt::marker,
+dl.interface ol.parameters > li::marker { padding-right: 0.5em }
+
+.expanding { display: none }
+
+.element-summary { margin-bottom: 13pt }
+.element-summary dl,
+.element-summary ul { margin-top: 0; margin-bottom: 0; margin-left: 0 }
+.element-summary > dl > dt:first-child + dd + dt + dd ul { margin-left: 2em }
+
+.adef-list { margin-top: 13pt }
+
+.view-as-svg { display: none }
+
+table[summary="Example ViewBox"] { page-break-inside: avoid }
+
+ul > li > ul,
+ul > li > ol,
+ol > li > ul,
+ol > li > ol { margin-top: 0; margin-bottom: 0 }
+.propdef table { margin: 0 }
+.propdef table th { vertical-align: top }
+
+.event-table p { margin-top: 0 }
+.event-table p.event-name + p { text-indent: 0 }
+
+.vardefs { margin-left: 2em }
+
+tr { page-break-after: avoid }
+
+.adef-list > p:first-child + dl { page-break-before: avoid }
+
+p.normativity { margin-top: 13pt }
+
+table td, dl.references, #chapter-feature dl { hyphens: none; text-align: left }
+
+table.property-table td, table.property-table th { font-size: 6.5pt }
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/style/svg-style.css Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,465 @@
+@charset "UTF-8";
+
+/*
+ * Style sheet for SVG specification
+ */
+
+
+BODY {
+ color: black;
+ /* text-align: justify; */
+ font-family: helvetica, sans-serif;
+ background: white;
+ margin: 2em;
+}
+.navlinks {
+ text-align: center;
+}
+H2, H3, H4, H5, H6 {
+ text-align: left;
+}
+
+H1 {
+ clear: left;
+ margin-top: 1em;
+ text-align: center;
+}
+
+PRE { margin-left: 2em }
+PRE {
+ color: #A52A2A;
+ font-family: monospace;
+ font-size: 90%
+}
+PRE.svgsamplecompressed {
+ font-size: 75%;
+ letter-spacing: -.05em;
+ line-height: 95%
+}
+PRE strong {
+ color: #004400;
+ font-weight: bold
+}
+.filterformula {
+ color: #A52A2A;
+ font-family: monospace;
+ font-size: 90%;
+ margin-left: 2em
+}
+
+div.dtd-fragment {
+ background-color: #dddddd;
+ margin-left: 0;
+}
+.dtd-fragment {
+ background-color: #dddddd;
+ margin-left: 0;
+}
+.idl-code {
+ margin: 0;
+ font-family: monospace;
+ border: 1px solid black;
+ white-space: pre;
+ color: black;
+ background-color: #dfdfdf;
+}
+
+.adef {
+ font-family: monospace;
+ font-weight: bold;
+}
+
+
+ADDRESS {
+ text-align: right;
+ font-style: italic;
+}
+
+VAR {
+ font-style: normal;
+}
+IMG {
+ border: 0;
+}
+.toc {
+ text-indent: 0;
+}
+.toc2 {
+ text-indent: 2em;
+}
+.toc3 {
+ text-indent: 4em;
+}
+P.toc-line {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ text-indent: 0;
+}
+
+/* It should be 'inherit', but Netscape inserts a random color :-( */
+A.noxref:link, A.noxref:visited {color: black; /*color: inherit*/}
+DIV.example A:link, DIV.example A:visited {color: maroon; /*color: inherit*/}
+DIV.deprecated-html-example A:link,
+DIV.deprecated-html-example A:visited {color: red; /*color: inherit*/}
+.note A:link, .note A:visited {color: green; /*color: inherit*/}
+
+.propdef-title {
+ background: yellow;
+}
+
+.propdef .descdef-title {
+ color: yellow;
+ background: green
+}
+
+/* TABLE {margin-left: 1em} */
+DIV.propdef {margin: 1.2em 0}
+
+div.example { color: maroon }
+pre.example { color: maroon }
+pre.illegal-example { color: red }
+div.illegal-example { color: red }
+div.illegal-example p { color: black }
+
+
+div.html-example { color: maroon }
+pre.html-example { color: maroon }
+pre.illegal-html-example { color: red }
+div.illegal-html-example { color: red }
+div.illegal-html-example p { color: black }
+pre.deprecated-html-example { color: red }
+div.deprecated-html-example { color: red }
+div.deprecated-html-example p { color: black }
+
+div.xml-example { color: maroon }
+pre.xml-example { color: maroon }
+pre.illegal-xml-example { color: red }
+div.illegal-xml-example { color: red }
+div.illegal-xml-example p { color: black }
+
+div.dtd-example { color: maroon }
+pre.dtd-example { color: maroon }
+pre.illegal-dtd-example { color: red }
+div.illegal-dtd-example { color: red }
+div.illegal-dtd-example p { color: black }
+
+.note {
+ font-weight: bold;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ margin-left: 1em;
+ margin-right: 1em;
+ color: green
+}
+
+.normref {
+ color: red;
+}
+
+.informref {
+ color: green;
+}
+
+DIV.propdef TH {
+ text-align: right;
+}
+
+DIV.descdef TH {
+ text-align: right;
+}
+
+UL.toc, OL.toc {list-style: none}
+DIV.toc UL UL, DIV.toc OL OL {margin-left: 0}
+DIV.toc UL UL UL, DIV.toc OL OL OL {margin-left: 1em}
+DIV.toc UL UL UL UL, DIV.toc OL OL OL OL {margin-left: 0}
+LI.tocline1 {font-weight: bold}
+LI.tocline2 {font-weight: normal}
+LI.tocline4 {font-style: italic}
+/* DIV.subtoc UL, DIV.subtoc OL {list-style: none} */
+/* The border in the following rule crashes NN4 on fonts.html :-(
+DIV.subtoc {padding: 1em; border: solid black thin; margin: 1em 0;
+ background: #ddd}
+*/
+UL.index {list-style: none}
+
+S, DEL {text-decoration: line-through; color: red}
+U, INS {text-decoration: underline; background: #bfa}
+
+DIV.figure {
+ text-align: center;
+ /*border: solid thin;
+ width: 100%;*/
+ margin: 2.5em 0
+}
+P.caption, CAPTION {
+ text-align: center;
+ font-style: italic;
+ font-weight: bold;
+ font-size: 90%;
+ color: #088;
+ margin: 1.5em 25% 0 25%;
+}
+DIV.toc, UL.index, DT {
+ text-align: left
+}
+SUP {
+ vertical-align: super;
+ font-size: 80%
+}
+.code-fragment {
+ color: #A52A2A;
+ font-weight: bold;
+ font-size: 90%
+}
+.element-name {
+ color: #A52A2A;
+ font-weight: bold;
+ font-size: 90%
+}
+.attr-name {
+ color: #2A2AA5;
+ font-weight: bold;
+ font-size: 90%
+}
+.prop-name {
+ color: black;
+ font-weight: bold;
+ font-size: 90%
+}
+.attr-value, .prop-value {
+ font-weight: bold;
+ font-size: 90%
+}
+.SVG-Term {
+ color: red;
+ font-weight: bold
+}
+.SVG-TermDefine {
+ font-weight: bold
+}
+.example-ref {
+ color: green;
+}
+.anim-target {
+ font-style: italic
+}
+.DOMInterfaceName {
+ font-weight: bold
+}
+.dom-attr-name {
+ color: black;
+ background-color: #FFFFD2;
+}
+.dom-attr-type, .dom-attr-value {
+ color: black;
+ font-weight: bold;
+}
+.dom-method-name {
+ color: black;
+ background-color: #D9E6F8;
+}
+.dom-parameter-name {
+ margin-top: 1%;
+ background-color: #FEE6F8;
+ color: black;
+}
+.math-variable {
+ font-family:Times,serif
+}
+.color-keyword-value {
+ color: #A52A2A;
+}
+.view-as-svg {
+ font-style:italic
+}
+.table-heading-1 {
+ font-style:italic;
+ text-align:center
+}
+.PathDataTable {
+ background: #dddddd
+}
+.useRuleApplied {
+ font-style:normal;
+ font-weight:bold;
+ color:blue
+}
+.useRuleIgnored {
+ font-style:italic;
+ font-weight:bold;
+ color:#050;
+}
+
+.editor { text-decoration: underline; font-size: 85% }
+.editor-intro { color: red; font-weight: bold }
+.editor-rec { color: red; font-weight: bold }
+.DESIGNGOALS { list-style-type: upper-alpha }
+.REQT-LEVEL0 { list-style-type: decimal; font-weight: bold }
+.REQT-LEVEL1 { list-style-type: lower-alpha; font-weight: normal }
+.REQT-LEVEL2 { list-style-type: lower-roman; font-weight: normal }
+
+.b4NomFix { color: #A52A2A; text-decoration: line-through }
+.afNomFix { color: red; }
+
+/* new styles */
+
+body { line-height: 1.3; }
+
+.element-summary { background: #d9e8ff; padding: 1em; margin-top: 1em }
+.element-summary-name { float: right; font-size: 110% }
+.element-summary dl, .element-summary dt { margin-top: 0; margin-bottom: 0; }
+.element-summary * + dt { margin-top: 0.5em; }
+.element-summary dd { margin-top: 0; }
+.element-summary ul.no-bullets { list-style: none; margin-left: 0; padding-left: 0 }
+.element-summary ul.no-bullets li { padding-left: 2em; text-indent: -2em; }
+.expander { color: #888; text-decoration: underline; cursor: pointer; font-size: 85% }
+.expander { }
+.expander:active { color: #C00 }
+.expander:hover { background: #ffa }
+.expander:after { content: 'show »' }
+
+.xgrammar { color: #A52A2A; font-family: monospace; font-size: 90% }
+
+pre.idl, pre.dtd-fragment { color: black; padding: 1em; margin-top: 1em; margin-left: 0; font-size: 1em; overflow: auto; font-size: 14px }
+pre.idl { background: #d9e8ff }
+pre.idl a:link, pre.idl a:visited { color: black; }
+
+dl.interface dt {
+ margin-top: 1em;
+}
+
+dl.interface dt.attribute,
+dl.interface dt.constant,
+dl.interface dt.operation {
+ margin-top: 2em;
+}
+
+dl.interface dt.attribute,
+dl.interface dt.constant,
+dl.interface dt.operation,
+dl.interface li.parameter,
+dl.interface dt.exception {
+ font-weight: normal;
+ display: list-item;
+}
+
+dl.interface dt.attribute.first-child,
+dl.interface dt.constant.first-child,
+dl.interface dt.operation.first-child,
+dl.interface li.parameter.first-child,
+dl.interface dt.exception.first-child {
+ margin-top: 0;
+}
+
+dl.interface dd.attribute,
+dl.interface dd.constant,
+dl.interface dd.operation,
+dl.interface li.parameter,
+dl.interface dd.exception {
+ margin-top: 0.5em;
+ margin-left: 0;
+}
+
+.idlattr, .idlattr:link, .idlattr:visited {
+ background: #d9e8ff;
+ color: black;
+}
+
+ol.parameters {
+ list-style-type: disc;
+ padding-left: 0;
+ margin-left: 0;
+}
+
+var {
+ font-style: italic;
+}
+
+dl.definitions > dt,
+.adef-list dl > dt { margin-top: 1em; }
+
+dl.definitions > dt + dt,
+.adef-list dl > dt + dt { margin-top: 0; }
+
+dl.definitions > dd > :first-child,
+.adef-list dl > dd > :first-child { margin-top: 0; }
+
+.adef { font-size: 14px }
+
+table.vert {
+ border-collapse: collapse;
+ border-top: 2px solid #005a9c;
+ border-bottom: 2px solid #005a9c;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ margin-left: auto;
+ margin-right: auto;
+}
+table.vert td {
+ background: #f0f6ff;
+}
+table.vert th {
+ text-align: left;
+ vertical-align: bottom;
+ border-bottom: 2px solid #005a9c;
+ white-space: nowrap;
+ color: #d9e8ff;
+ background: #005a9c;
+}
+table.vert.compact { font-size: 90% }
+table.vert.compact td, table.vert.compact th { padding: 2px 8px }
+table.vert th a:link,
+table.vert th a:visited { color: #d9e8ff; }
+table.vert th a:hover { color: black; }
+table.vert th, table.vert td { padding: 0.5em 0.75em; }
+table.vert th .attr-name { color: white }
+table.vert th a:hover .element-name { color: #2A2AA5 }
+table.vert th .prop-name { color: white }
+table.vert th a:hover .element-name { color: black }
+table.vert th .element-name { color: white }
+table.vert th a:hover .element-name { color: #A52A2A }
+table.vert td { vertical-align: top; }
+table.offset { margin-left: 2em; margin-right: 2em; }
+table.graph > tbody > tr > td { vertical-align: top }
+table.graph > tbody > tr > td { padding-right: 1em }
+.indented {
+ margin-left: 2em;
+}
+.math var, .math sub, .math sup {
+ font-family: serif;
+}
+.separated {
+ word-spacing: 1em;
+}
+.familyname {
+ text-transform: uppercase;
+}
+
+dl.unemphasized-names > dt > a { font-weight: normal }
+
+.header { background: #eee; padding: 0.5em; font-size: 85%; text-align: right }
+.header.top { border-top: 1px solid #ccc }
+.header.bottom { border-bottom: 1px solid #ccc; margin-top: 1em }
+.header .namedate { display: block; float: left }
+
+table.property-table { font-size: 90%; border-collapse: collapse }
+table.vert td { border-top: 1px solid #005a9c; border-top-color: rgb(127, 172, 206) }
+.tocline1 { font-weight: bold }
+
+.idl-type-parenthetical { font-size: 90% }
+td > :first-child,
+th > :first-child { margin-top: 0 }
+td p {
+ margin-top: 1em;
+ margin-bottom: 0;
+}
+
+table.collection { border-collapse: collapse; background: #fff; font-size: 90%; margin-bottom: 1em; margin-left: 2em }
+table.collection th { background: #eee }
+table.collection td, table.collection th { border: 1px solid black; padding: 0.25em; vertical-align: baseline }
+
+ol.notes { list-style-type: none; padding-left: 0 }
+
+.colorpatch { width: 14px; height:14px; border: 1px solid black; }
+
+.top-editors { margin-top: 1em }
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/styling.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1063 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Styling</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Styling</h1>
+
+ <h2 id='SVGStylingProperties'>SVG's styling properties</h2>
+ <p>SVG uses <span class="SVG-Term">styling properties</span> 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>'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>
+ <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>
+ </ul>
+ <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 <span
+ class="SVG-Term">presentation attributes</span>. 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 <span
+ class="SVG-Term">presentation attribute</span>) 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>
+
+ <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"?>
+<xsl:stylesheet version="1.0"
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <xsl:output
+ method="xml"
+ encoding="utf-8"
+ doctype-public="-//W3C//DTD SVG 1.1//EN"
+ doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"/>
+ <!-- Add version to topmost 'svg' element -->
+ <xsl:template match="/svg:svg">
+ <xsl:copy>
+ <xsl:copy-of select="@*"/>
+ <xsl:attribute name="version">1.1</xsl:attribute>
+ <xsl:apply-templates/>
+ </xsl:copy>
+ </xsl:template>
+ <!-- Add styling to all 'rect' elements -->
+ <xsl:template match="svg:rect">
+ <xsl:copy>
+ <xsl:copy-of select="@*"/>
+ <xsl:attribute name="fill">red</xsl:attribute>
+ <xsl:attribute name="stroke">blue</xsl:attribute>
+ <xsl:attribute name="stroke-width">3</xsl:attribute>
+ </xsl:copy>
+ </xsl:template>
+</xsl:stylesheet>
+
+<strong>SVG file to be transformed by mystyle.xsl</strong>
+<?xml version="1.0" standalone="no"?>
+<?xml-stylesheet href="mystyle.xsl" type="application/xml"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="10cm" height="5cm">
+ <rect x="2cm" y="1cm" width="6cm" height="3cm"/>
+</svg>
+
+<strong>SVG content after applying mystyle.xsl</strong>
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="10cm" height="5cm" version="1.1">
+ <rect x="2cm" y="1cm" width="6cm" height="3cm" fill="red" stroke="blue" stroke-width="3"/>
+</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>
+<pre>
+<strong>mystyle.css</strong>
+rect {
+ fill: red;
+ stroke: blue;
+ stroke-width: 3
+}
+
+<strong>SVG file referencing mystyle.css</strong>
+<?xml version="1.0" standalone="no"?>
+<?xml-stylesheet href="mystyle.css" type="text/css"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="10cm" height="5cm" viewBox="0 0 1000 500">
+ <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>
+
+<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 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>
+
+ <h2 id='CaseSensitivity'>Case sensitivity of property names and values</h2>
+ <p>Property declarations via <a
+ href="intro.html#TermPresentationAttribute">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>
+
+ <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>
+ <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>
+ <dl>
+ <dt id='StyleElementTypeAttribute'><span
+ class="adef">type</span> = <em>content-type</em></dt>
+ <dd>This attribute specifies the style sheet language of
+ the element's contents. The style sheet language is
+ specified as a content type (e.g., "text/css"), as per <a href="http://www.ietf.org/rfc/rfc2046.txt">MIME Part Two: Media Types</a>
+ [<a href="refs.html#ref-RFC2046">RFC2046</a>].
+ If a <a>'style/type'</a> is not provided, the value of <a>'contentStyleType'</a>
+ on the <a>'svg'</a> element shall be used, which in turn defaults to "text/css"
+ [<a href="refs.html#ref-RFC2046">RFC2046</a>]. If a <a>'style'</a> element falls
+ outside of the <a>outermost svg element</a>
+ and the <a>'style/type'</a> is not
+ provided, the <a>'style/type'</a> must default to "text/css"
+ [<a href="refs.html#ref-RFC2046">RFC2046</a>]. <br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="StyleElementMediaAttribute"><span
+ class="adef">media</span> = <em>media-descriptors</em></dt>
+ <dd>This attribute specifies the intended destination
+ medium for style information. It may be a single media
+ descriptor or a comma-separated list. The default value for
+ this attribute is "all". The set of recognized
+ <em>media-descriptors</em> are the list of <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#media-types'>media types recognized by CSS2</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 7.3).<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="StyleElementTitleAttribute"><span
+ class="adef">title</span> = <em>advisory-title</em></dt>
+ <dd>(For compatibility with HTML 4 [<a
+ href="refs.html#ref-HTML4">HTML4</a>].) This
+ attribute specifies an advisory title for the <a>'style element'</a> element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ 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>
+ <div class="adef-list">
+ <p>Attribute definitions:</p>
+ <dl>
+ <dt><span class="adef">class</span> = <em>list</em></dt>
+ <dd>This attribute assigns a class name or set of class
+ names to an element. Any number of elements may be assigned
+ the same class name or names. Multiple class names must be
+ separated by white space characters.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ 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>
+<pre>
+<!-- English messages -->
+<text class="info" lang="en">Variable declared twice</text>
+<text class="warning" lang="en">Undeclared variable</text>
+<text class="error" lang="en">Bad syntax for variable name</text>
+<!-- French messages -->
+<text class="info" lang="fr">Variable déclarée deux fois</text>
+<text class="warning" lang="fr">Variable indéfinie</text>
+<text class="error" lang="fr">Erreur de syntaxe pour variable</text>
+</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>
+<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>
+
+ <div class="adef-list">
+ <p>Attribute definitions:</p>
+ <dl>
+ <dt><span class="adef">style</span> = <em>style</em></dt>
+ <dd>This attribute specifies style information for the
+ current element. The style attribute specifies style
+ information for a single element. The style sheet language
+ of inline style rules is given by the value of attribute
+ <a>'contentStyleType'</a> on the <a>'svg'</a> element.
+ The syntax of style data depends on the style sheet language.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ 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>
+ <div class="adef-list">
+ <dl>
+ <dt id="ContentStyleTypeAttribute"><span
+ class="adef">contentStyleType</span> = "<span
+ class="attr-value"><em>content-type</em></span>"</dt>
+ <dd>Identifies the default style sheet language for the
+ given document. That language must then be used for all instances of style that
+ do not specify their own style sheet language, such as the <a>'style attribute'</a>
+ attributes that are available on many elements. The value <span
+ class="attr-value"><em>content-type</em></span> specifies a media
+ type, per <a href="http://www.ietf.org/rfc/rfc2046.txt">MIME Part Two: Media Types</a>
+ [<a href="refs.html#ref-RFC2046">RFC2046</a>].
+ The default value is <span class="attr-value">"text/css"</span>
+ [<a href="refs.html#ref-RFC2318">RFC2318</a>].<br />
+ <span class="anim-target"><a
+ 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>
+
+ <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="prop-name"><a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#propdef-width">
+ 'width'</a></span> and <span class="prop-name"><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>
+ <th>Definition in [<a href='refs.html#ref-CSS2'>CSS2</a>]</th>
+ </tr>
+ <tr>
+ <td id="AzimuthProperty"><span class="attr-name">'azimuth'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-azimuth">Section 19.7</a></td>
+ </tr>
+ <tr>
+ <td id="CueProperty"><span class="attr-name">'cue'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-cue">Section 19.5</a></td>
+ </tr>
+ <tr>
+ <td id="CueAfterProperty"><span class="attr-name">'cue-after'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-cue-after">Section 19.5</a></td>
+ </tr>
+ <tr>
+ <td id="CueBeforeProperty"><span class="attr-name">'cue-before'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-cue-before">Section 19.5</a></td>
+ </tr>
+ <tr>
+ <td id="ElevationProperty"><span class="attr-name">'elevation'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-elevation">Section 19.7</a></td>
+ </tr>
+ <tr>
+ <td id="PauseProperty"><span class="attr-name">'pause'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-pause">Section 19.4</a></td>
+ </tr>
+ <tr>
+ <td id="PauseAfterProperty"><span class="attr-name">'pause-after'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-pause-after">Section 19.4</a></td>
+ </tr>
+ <tr>
+ <td id="PauseBeforeProperty"><span class="attr-name">'pause-before'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-pause-before">Section 19.4</a></td>
+ </tr>
+ <tr>
+ <td id="PitchProperty"><span class="attr-name">'pitch'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-pitch">Section 19.8</a></td>
+ </tr>
+ <tr>
+ <td id="PitchRangeProperty"><span class="attr-name">'pitch-range'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-pitch-range">Section 19.8</a></td>
+ </tr>
+ <tr>
+ <td id="PlayDuringProperty"><span class="attr-name">'play-during'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-play-during">Section 19.6</a></td>
+ </tr>
+ <tr>
+ <td id="RichnessProperty"><span class="attr-name">'richness'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-richness">Section 19.8</a></td>
+ </tr>
+ <tr>
+ <td id="SpeakProperty"><span class="attr-name">'speak'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-speak">Section 19.3</a></td>
+ </tr>
+ <tr>
+ <td id="SpeakHeaderProperty"><span class="attr-name">'speak-header'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/tables.html#propdef-speak-header">Section 17.7.1</a></td>
+ </tr>
+ <tr>
+ <td id="SpeakNumeralProperty"><span class="attr-name">'speak-numeral'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-speak-numeral">Section 19.9</a></td>
+ </tr>
+ <tr>
+ <td id="SpeakPunctuationProperty"><span class="attr-name">'speak-punctuation'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-speak-punctuation">Section 19.9</a></td>
+ </tr>
+ <tr>
+ <td id="SpeechRateProperty"><span class="attr-name">'speech-rate'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-speech-rate">Section 19.8</a></td>
+ </tr>
+ <tr>
+ <td id="StressProperty"><span class="attr-name">'stress'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-stress">Section 19.8</a></td>
+ </tr>
+ <tr>
+ <td id="VoiceFamilyProperty"><span class="attr-name">'voice-family'</span></td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html#propdef-voice-family">Section 19.8</a></td>
+ </tr>
+ <tr>
+ <td id="VolumeProperty"><span class="attr-name">'volume'</span></td>
+ <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>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGStyleElement">Interface SVGStyleElement</h3>
+
+<edit:with element='style'>
+<edit:interface name='::svg::SVGStyleElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/svg.idl Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,7641 @@
+// // File: svg.idl
+// #ifndef _SVG_IDL_
+// #define _SVG_IDL_
+//
+//
+// // For access to DOM2 core
+// #include "dom.idl"
+//
+// // For access to DOM2 events
+// #include "events.idl"
+//
+// // For access to those parts from DOM2 CSS OM used by SVG DOM.
+// #include "css.idl"
+//
+// // For access to those parts from DOM2 Views OM used by SVG DOM.
+// #include "views.idl"
+//
+// // For access to the SMIL OM used by SVG DOM.
+// #include "smil.idl"
+//
+// #pragma prefix "dom.w3c.org"
+// #pragma javaPackage "org.w3c.dom"
+
+module dom {
+ exception DOMException { };
+ interface Element { };
+ interface Document { };
+ interface NodeList { };
+};
+
+module events {
+ interface DocumentEvent { };
+ interface EventTarget { };
+ interface Event { };
+ interface UIEvent { };
+};
+
+module css {
+ interface CSSValue { };
+ interface RGBColor { };
+ interface CSSStyleDeclaration { };
+ interface CSSRule { };
+ interface ViewCSS { };
+ interface DocumentCSS { };
+};
+
+module views {
+ interface AbstractView { };
+};
+
+module smil {
+ typedef dom::DOMException DOMException;
+ typedef views::AbstractView AbstractView;
+
+ /**
+ * <p>SMIL Animation supports several methods for controlling the behavior of
+ * animation: <code>beginElement()</code>, <code>beginElementAt()</code>,
+ * <code>endElement()</code> and <code>endElementAt()</code>. These methods
+ * are used to begin and end the active duration of an element. Authors can
+ * (but are not required to) declare the timing to respond to the DOM using
+ * the following syntax:</p>
+ *
+ * <pre><animate begin="indefinite" end="indefinite" .../></pre>
+ *
+ * <p>If a DOM method call is made to begin or end the element (using
+ * <code>beginElement()</code>, <code>beginElementAt()</code>,
+ * <code>endElement()</code> or <code>endElementAt()</code>), each method call
+ * creates a single instance time (in the appropriate instance times list).
+ * These times are then interpreted as part of the semantics of lists of
+ * times, as described in
+ * <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists">Evaluation of begin and end time lists</a>.</p>
+ *
+ * <ul>
+ * <li>The instance time associated with a <code>beginElement()</code> or
+ * <code>endElement()</code> call is the current presentation time at the
+ * time of the DOM method call.</li>
+ *
+ * <li>The instance time associated with a <code>beginElementAt()</code> or
+ * <code>endElementAt()</code> call is the current presentation time at the
+ * time of the DOM method call, plus or minus the specified offset.</li>
+ *
+ * <li>Note that <code>beginElement()</code> is subject to the <a>'animate/restart'</a>
+ * attribute in the same manner that event-based begin timing is. Refer
+ * also to <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">SMIL Animation: Restarting animation</a>
+ * ([<a href='refs.html#ref-SMILANIM'>SMILANIM</a>], section 3.3.7).</li>
+ * </ul>
+ *
+ * <p>The expectation of the following interface is that an instance of the
+ * <a>ElementTimeControl</a> interface can be obtained by using binding-specific
+ * casting methods on an instance of an animation element. A DOM application
+ * can use the <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-5CED94D7">hasFeature</a>
+ * method of the <a>DOMImplementation</a> interface to determine whether the
+ * <a>ElementTimeControl</a> interface is supported or not. The feature string
+ * for this interface is "TimeControl".</p>
+ */
+ interface ElementTimeControl {
+
+ /**
+ * Creates a begin instance time for the current time. The new instance
+ * time is added to the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-InstanceTimesLists"><em>begin instance times list</em></a>.
+ * The behavior of this method is equivalent to <code>beginElementAt(0)</code>.
+ */
+ void beginElement();
+
+ /**
+ * Creates a begin instance time for the current time plus the specified
+ * offset. The new instance time is added to the
+ * <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-InstanceTimesLists"><em>begin instance times list</em></a>.
+ *
+ * @param offset The offset from the current document time, in seconds, at
+ * which to begin the element.
+ */
+ void beginElementAt(in float offset);
+
+ /**
+ * Creates an end instance time for the current time. The new instance time is added to the
+ * <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-InstanceTimesLists"><em>end instance times list</em></a>.
+ * The behavior of this method is equivalent to <code>endElementAt(0)</code>.
+ */
+ void endElement();
+
+ /**
+ * Creates a end instance time for the current time plus the specified
+ * offset. The new instance time is added to the
+ * <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-InstanceTimesLists"><em>end instance times list</em></a>.
+ *
+ * @param offset offset from the current document time, in seconds, at
+ * which to end the element.
+ */
+ void endElementAt(in float offset);
+ };
+
+ /**
+ * <p>The <a>TimeEvent</a>
+ * interface, defined in <a
+ * href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#DOMSupport">
+ * SMIL Animation: Supported interfaces</a>, provides specific
+ * contextual information associated with Time events.</p>
+ * <p>The different types of events that can occur are:</p>
+ * <dl>
+ * <dt><strong>beginEvent</strong></dt>
+ * <dd>
+ * This event is raised when the element local timeline begins
+ * to play. It will be raised each time the element begins the
+ * active duration (i.e. when it restarts, but not when it
+ * repeats). It may be raised both in the course of normal
+ * (i.e. scheduled or interactive) timeline play, as well as
+ * in the case that the element was begun with the
+ * <a>ElementTimeControl::beginElement</a> or
+ * <a>ElementTimeControl::beginElementAt</a> methods. Note that if an
+ * element is restarted while it is currently playing, the
+ * element will raise an end event and another begin event, as
+ * the element restarts.
+ * <ul>
+ * <li>Bubbles: No</li>
+ * <li>Cancelable: No</li>
+ * <li>Context Info: None</li>
+ * </ul>
+ * </dd>
+ * <dt><strong>endEvent</strong></dt>
+ * <dd>
+ * This event is raised at the active end of the element. Note
+ * that this event is not raised at the simple end of each
+ * repeat. This event may be raised both in the course of
+ * normal (i.e. scheduled or interactive) timeline play, as
+ * well as in the case that the element was ended with the
+ * <a>ElementTimeControl::endElement</a> or <a>ElementTimeControl::endElementAt</a>
+ * methods. Note that if an element is restarted while it is
+ * currently playing, the element will raise an end event and
+ * another begin event, as the element restarts.
+ * <ul>
+ * <li>Bubbles: No</li>
+ * <li>Cancelable: No</li>
+ * <li>Context Info: None</li>
+ * </ul>
+ * </dd>
+ * <dt><strong>repeatEvent</strong></dt>
+ * <dd>
+ * This event is raised when an element local timeline
+ * repeats. It will be raised each time the element repeats,
+ * after the first iteration.<br />
+ * The event provides a numerical indication of which repeat
+ * iteration is beginning. The value is a 0-based integer, but
+ * the repeat event is not raised for the first iteration and
+ * so the observed values of the detail attribute will be
+ * >= 1.
+ * <ul>
+ * <li>Bubbles: No</li>
+ * <li>Cancelable: No</li>
+ * <li>Context Info: detail (current iteration)</li>
+ * </ul>
+ * </dd>
+ * </dl>
+ */
+ interface TimeEvent : events::Event {
+
+ /**
+ * The <a>view</a> attribute identifies the <a>AbstractView</a>
+ * [<a href='refs.html#ref-DOM2VIEWS'>DOM2VIEWS</a>] from which the event
+ * was generated.
+ */
+ readonly attribute AbstractView view;
+
+ /**
+ * Specifies some detail information about the Event, depending on the type
+ * of the event. For this event type, indicates the repeat number for the
+ * animation.
+ */
+ readonly attribute long detail;
+
+ /**
+ * The <a>initTimeEvent</a> method is used to initialize the value of a
+ * <a>TimeEvent</a> created through the <a>DocumentEvent</a> interface. This
+ * method may only be called before the <a>TimeEvent</a> has been dispatched
+ * via the dispatchEvent method, though it may be called multiple times
+ * during that phase if necessary. If called multiple times, the final
+ * invocation takes precedence.
+ *
+ * @param typeArg Specifies the event type.
+ * @param viewArg Specifies the Event's <a>AbstractView</a>.
+ * @param detailArg Specifies the Event's detail.
+ */
+ void initTimeEvent(in DOMString typeArg, in AbstractView viewArg, in long detailArg);
+ };
+};
+
+module svg
+{
+ // typedef dom::DOMString DOMString;
+ typedef dom::DOMException DOMException;
+ typedef dom::Element Element;
+ typedef dom::Document Document;
+ typedef dom::NodeList NodeList;
+
+ // Predeclarations
+ interface SVGElement;
+ interface SVGLangSpace;
+ interface SVGExternalResourcesRequired;
+ interface SVGTests;
+ interface SVGFitToViewBox;
+ interface SVGZoomAndPan;
+ interface SVGViewSpec;
+ interface SVGURIReference;
+ interface SVGPoint;
+ interface SVGMatrix;
+ interface SVGPreserveAspectRatio;
+ interface SVGAnimatedPreserveAspectRatio;
+ interface SVGTransformList;
+ interface SVGAnimatedTransformList;
+ interface SVGTransform;
+ interface SVGICCColor;
+ interface SVGColor;
+ interface SVGPaint;
+ interface SVGTransformable;
+ interface SVGDocument;
+ interface SVGSVGElement;
+ interface SVGElementInstance;
+ interface SVGElementInstanceList;
+
+
+ /**
+ * This exception is raised when a specific SVG operation is impossible to
+ * perform.
+ */
+ exception SVGException {
+
+ /**
+ * A code identifying the reason why the requested operation could not be
+ * performed. The value of this member will be one of the constants
+ * in the <em>SVGException code</em> group.
+ */
+ unsigned short code;
+ };
+
+ /**
+ * <p>Raised when an object of the wrong type is passed to an operation.</p>
+ *
+ * <p>Note that no operation is defined to raise an <a>SVGException</a> with
+ * this code in SVG 1.1 Second Edition. The constant remains defined here
+ * for consistency with SVG 1.1 First Edition.</p>
+ *
+ * @associatedException SVGException
+ * @defgroup SVGException code
+ */
+ const unsigned short SVG_WRONG_TYPE_ERR = 0;
+
+ /**
+ * Raised when an invalid value is passed to an operation or assigned to an
+ * attribute.
+ *
+ * @associatedException SVGException
+ * @defgroup SVGException code
+ */
+ const unsigned short SVG_INVALID_VALUE_ERR = 1;
+
+ /**
+ * <p>Raised when an attempt is made to invert a matrix that is not
+ * invertible.</p>
+ *
+ * <p>Note the unusual spelling of this constant, which is necessary for
+ * compatibility with existing content.</p>
+ *
+ * @associatedException SVGException
+ * @defgroup SVGException code
+ */
+ const unsigned short SVG_MATRIX_NOT_INVERTABLE = 2;
+
+ /**
+ * All of the SVG DOM interfaces that correspond directly to elements in the
+ * SVG language (such as the <a>SVGPathElement</a> interface for the
+ * <a>'path'</a> element) derive from the <a>SVGElement</a> interface.
+ */
+ interface SVGElement : Element {
+
+ /**
+ * The value of the <a>'id'</a> attribute on the given element, or the
+ * empty string if <a>'id'</a> is not present.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString id setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'xml:base'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString xmlbase setraises(DOMException);
+
+ /**
+ * The nearest ancestor <a>'svg'</a> element. Null if the given element is
+ * the <a>outermost svg element</a>.
+ */
+ readonly attribute SVGSVGElement ownerSVGElement;
+
+ /**
+ * The element which established the current viewport. Often, the nearest
+ * ancestor <a>'svg'</a> element. Null if the given element is the
+ * <a>outermost svg element</a>.
+ */
+ readonly attribute SVGElement viewportElement;
+ };
+
+ /**
+ * Used for attributes of type boolean which can be animated.
+ */
+ interface SVGAnimatedBoolean {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an
+ * attempt to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute boolean baseVal setraises(DOMException);
+
+ /**
+ * If the given attribute or property is being animated, contains the
+ * current animated value of the attribute or property. If the given
+ * attribute or property is not currently being animated, contains the
+ * same value as <a>baseVal</a>.
+ */
+ readonly attribute boolean animVal;
+ };
+
+ /**
+ * Used for attributes of type DOMString which can be animated.
+ */
+ interface SVGAnimatedString {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an
+ * attempt to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString baseVal setraises(DOMException);
+
+ /**
+ * If the given attribute or property is being animated, contains the
+ * current animated value of the attribute or property. If the given
+ * attribute or property is not currently being animated, contains the
+ * same value as <a>baseVal</a>.
+ */
+ readonly attribute DOMString animVal;
+ };
+
+ /**
+ * <p>This interface defines a list of DOMString values.</p>
+ *
+ * <p><a>SVGStringList</a> has the same attributes and methods as other
+ * SVGxxxList interfaces. Implementers may consider using a single base class
+ * to implement the various SVGxxxList interfaces.</p>
+ */
+ interface SVGStringList {
+
+ /**
+ * The number of items in the list.
+ */
+ readonly attribute unsigned long numberOfItems;
+
+ /**
+ * Clears all existing current items from the list, with the result being
+ * an empty list.
+ *
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ void clear() raises(DOMException);
+
+ /**
+ * Clears all existing current items from the list and re-initializes the
+ * list to hold the single item specified by the parameter.
+ *
+ * @param newItem The item which should become the only member of the list.
+ * @return The item being inserted into the list.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ DOMString initialize(in DOMString newItem) raises(DOMException);
+
+ /**
+ * Returns the specified item from the list.
+ *
+ * @param index The index of the item from the list which is to be
+ * returned. The first item is number 0.
+ * @return The selected item.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ DOMString getItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item into the list at the specified position. The first
+ * item is number 0.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item before which the new item is to be
+ * inserted. The first item is number 0. If the index is equal to 0,
+ * then the new item is inserted at the front of the list. If the index
+ * is greater than or equal to <a>numberOfItems</a>, then the new item is
+ * appended to the end of the list.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ DOMString insertItemBefore(in DOMString newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Replaces an existing item in the list with a new item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item which is to be replaced. The first
+ * item is number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ DOMString replaceItem(in DOMString newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Removes an existing item from the list.
+ *
+ * @param index The index of the item which is to be removed. The first
+ * item is number 0.
+ * @return The removed item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ DOMString removeItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item at the end of the list.
+ *
+ * @param newItem The item which is to be inserted. The first item is
+ * number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ DOMString appendItem(in DOMString newItem) raises(DOMException);
+ };
+
+ /**
+ * Used for attributes whose value must be a constant from a particular
+ * enumeration and which can be animated.
+ */
+ interface SVGAnimatedEnumeration {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an
+ * attempt to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute unsigned short baseVal setraises(DOMException);
+
+ /**
+ * If the given attribute or property is being animated, contains the
+ * current animated value of the attribute or property. If the given
+ * attribute or property is not currently being animated, contains the
+ * same value as <a>baseVal</a>.
+ */
+ readonly attribute unsigned short animVal;
+ };
+
+ /**
+ * Used for attributes of basic type
+ * <a href='types.html#DataTypeInteger'><integer></a> which can be
+ * animated.
+ */
+ interface SVGAnimatedInteger {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an
+ * attempt to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute long baseVal setraises(DOMException);
+
+ /**
+ * If the given attribute or property is being animated, contains the
+ * current animated value of the attribute or property. If the given
+ * attribute or property is not currently being animated, contains the
+ * same value as <a>baseVal</a>.
+ */
+ readonly attribute long animVal;
+ };
+
+ /**
+ * Used for attributes of basic type
+ * <a href='types.html#DataTypeNumber'><number></a>.
+ */
+ interface SVGNumber {
+
+ /**
+ * The value of the given attribute.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an
+ * attempt to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float value setraises(DOMException);
+ };
+
+ /**
+ * Used for attributes of basic type
+ * <a href='types.html#DataTypeNumber'><number></a> which can be
+ * animated.
+ */
+ interface SVGAnimatedNumber {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an
+ * attempt to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float baseVal setraises(DOMException);
+
+ /**
+ * If the given attribute or property is being animated, contains the
+ * current animated value of the attribute or property. If the given
+ * attribute or property is not currently being animated, contains the
+ * same value as <a>baseVal</a>.
+ */
+ readonly attribute float animVal;
+ };
+
+ /**
+ * <p>This interface defines a list of SVGNumber objects.</p>
+ *
+ * <p><a>SVGNumberList</a> has the same attributes and methods as other
+ * SVGxxxList interfaces. Implementers may consider using a single base class
+ * to implement the various SVGxxxList interfaces.</p>
+ *
+ * <p id="ReadOnlyNumberList">An <a>SVGNumberList</a> object can be designated as <em>read only</em>,
+ * which means that attempts to modify the object will result in an exception
+ * being thrown, as described below.</p>
+ */
+ interface SVGNumberList {
+
+ /**
+ * The number of items in the list.
+ */
+ readonly attribute unsigned long numberOfItems;
+
+ /**
+ * Clears all existing current items from the list, with the result being
+ * an empty list.
+ *
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyNumberList">read only</a>.
+ */
+ void clear() raises(DOMException);
+
+ /**
+ * Clears all existing current items from the list and re-initializes the
+ * list to hold the single item specified by the parameter. If the inserted
+ * item is already in a list, it is removed from its previous list before
+ * it is inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which should become the only member of the list.
+ * @return The item being inserted into the list.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyNumberList">read only</a>.
+ */
+ SVGNumber initialize(in SVGNumber newItem) raises(DOMException);
+
+ /**
+ * Returns the specified item from the list. The returned item is the
+ * item itself and not a copy. Any changes made to the item are
+ * immediately reflected in the list.
+ *
+ * @param index The index of the item from the list which is to be
+ * returned. The first item is number 0.
+ * @return The selected item.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGNumber getItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item into the list at the specified position. The first
+ * item is number 0. If <var>newItem</var> is already in a list, it is
+ * removed from its previous list before it is inserted into this list.
+ * The inserted item is the item itself and not a copy. If the item is
+ * already in this list, note that the index of the item to insert
+ * before is <i>before</i> the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item before which the new item is to be
+ * inserted. The first item is number 0. If the index is equal to 0,
+ * then the new item is inserted at the front of the list. If the index
+ * is greater than or equal to <a>numberOfItems</a>, then the new item is
+ * appended to the end of the list.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyNumberList">read only</a>.
+ */
+ SVGNumber insertItemBefore(in SVGNumber newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Replaces an existing item in the list with a new item. If
+ * <var>newItem</var> is already in a list, it is removed from its
+ * previous list before it is inserted into this list. The inserted item
+ * is the item itself and not a copy. If the item is already in this
+ * list, note that the index of the item to replace is <i>before</i>
+ * the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item which is to be replaced. The first
+ * item is number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyNumberList">read only</a>.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGNumber replaceItem(in SVGNumber newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Removes an existing item from the list.
+ *
+ * @param index The index of the item which is to be removed. The first
+ * item is number 0.
+ * @return The removed item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGNumber removeItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item at the end of the list. If <var>newItem</var> is
+ * already in a list, it is removed from its previous list before it is
+ * inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which is to be inserted. The first item is
+ * number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ SVGNumber appendItem(in SVGNumber newItem) raises(DOMException);
+ };
+
+ /**
+ * Used for attributes which take a list of numbers and which can be animated.
+ */
+ interface SVGAnimatedNumberList {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ */
+ readonly attribute SVGNumberList baseVal;
+
+ /**
+ * A <a href="#ReadOnlyNumberList">read only</a> <a>SVGNumberList</a> representing the current animated value of
+ * the given attribute. If the given attribute is not currently being
+ * animated, then the <a>SVGNumberList</a> will have the same contents
+ * as <a>baseVal</a>. The object referenced by <a>animVal</a> will always
+ * be distinct from the one referenced by <a>baseVal</a>, even when
+ * the attribute is not animated.
+ */
+ readonly attribute SVGNumberList animVal;
+ };
+
+ /**
+ * <p>The <a>SVGLength</a> interface corresponds to the
+ * <a href='types.html#DataTypeLength'><length></a> basic data type.</p>
+ *
+ * <p id="ReadOnlyLength">An <a>SVGLength</a> object can be designated as <em>read only</em>,
+ * which means that attempts to modify the object will result in an exception
+ * being thrown, as described below.</p>
+ */
+ interface SVGLength {
+
+ /**
+ * The unit type is not one of predefined unit 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.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_UNKNOWN = 0;
+
+ /**
+ * No unit type was provided (i.e., a unitless value was specified), which
+ * indicates a value in user units.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_NUMBER = 1;
+
+ /**
+ * A percentage value was specified.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_PERCENTAGE = 2;
+
+ /**
+ * A value was specified using the em units defined in CSS2.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_EMS = 3;
+
+ /**
+ * A value was specified using the ex units defined in CSS2.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_EXS = 4;
+
+ /**
+ * A value was specified using the px units defined in CSS2.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_PX = 5;
+
+ /**
+ * A value was specified using the cm units defined in CSS2.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_CM = 6;
+
+ /**
+ * A value was specified using the mm units defined in CSS2.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_MM = 7;
+
+ /**
+ * A value was specified using the in units defined in CSS2.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_IN = 8;
+
+ /**
+ * A value was specified using the pt units defined in CSS2.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_PT = 9;
+
+ /**
+ * A value was specified using the pc units defined in CSS2.
+ *
+ * @defgroup Length Unit Types
+ */
+ const unsigned short SVG_LENGTHTYPE_PC = 10;
+
+ /**
+ * The type of the value as specified by one of the SVG_LENGTHTYPE_*
+ * constants defined on this interface.
+ */
+ readonly attribute unsigned short unitType;
+
+ /**
+ * The value as a floating point value, in user units. Setting this
+ * attribute will cause <a>valueInSpecifiedUnits</a> and
+ * <a>valueAsString</a> to be updated automatically to reflect this setting.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the length
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLength">read only</a>.
+ */
+ attribute float value setraises(DOMException);
+
+ /**
+ * The value as a floating point value, in the units expressed by
+ * <a>unitType</a>. Setting this attribute will cause <a>value</a> and
+ * <a>valueAsString</a> to be updated automatically to reflect this setting.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the length
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLength">read only</a>.
+ */
+ attribute float valueInSpecifiedUnits setraises(DOMException);
+
+ /**
+ * The value as a string value, in the units expressed by <a>unitType</a>.
+ * Setting this attribute will cause <a>value</a>,
+ * <a>valueInSpecifiedUnits</a> and <a>unitType</a>
+ * to be updated automatically to reflect this
+ * setting.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the length
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLength">read only</a>.
+ * @setraises DOMException(SYNTAX_ERR) Raised if the assigned string cannot
+ * be parsed as a valid <a><length></a>.
+ */
+ attribute DOMString valueAsString setraises(DOMException);
+
+ /**
+ * Reset the value as a number with an associated <a>unitType</a>, thereby
+ * replacing the values for all of the attributes on the object.
+ *
+ * @param unitType The unit type for the value (e.g., <a>SVG_LENGTHTYPE_MM</a>).
+ * @param valueInSpecifiedUnits The new value.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the length
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLength">read only</a>.
+ * @raises DOMException(NOT_SUPPORTED_ERR) Raised if unitType is SVG_LENGTHTYPE_UNKNOWN
+ * or not a valid unit type constant (one of the other SVG_LENGTHTYPE_* constants
+ * defined on this interface).
+ */
+ void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
+
+ /**
+ * Preserve the same underlying stored value, but reset the stored unit
+ * identifier to the given <var>unitType</var>. Object attributes
+ * <a>unitType</a>, <a>valueInSpecifiedUnits</a> and <a>valueAsString</a>
+ * might be modified as a result of this method. For example, if the
+ * original value were "0.5cm" and the method was invoked to convert to
+ * millimeters, then the <a>unitType</a> would be changed to
+ * <a>SVG_LENGTHTYPE_MM</a>, <a>valueInSpecifiedUnits</a> would be changed
+ * to the numeric value 5 and <a>valueAsString</a> would be changed to
+ * "5mm".
+ *
+ * @param unitType The unit type to switch to (e.g., <a>SVG_LENGTHTYPE_MM</a>).
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the length
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLength">read only</a>.
+ * @raises DOMException(NOT_SUPPORTED_ERR) Raised if unitType is SVG_LENGTHTYPE_UNKNOWN
+ * or not a valid unit type constant (one of the other SVG_LENGTHTYPE_* constants
+ * defined on this interface).
+ */
+ void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
+ };
+
+ /**
+ * Used for attributes of basic type
+ * <a href='types.html#DataTypeLength'><length></a> which can be
+ * animated.
+ */
+ interface SVGAnimatedLength {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ */
+ readonly attribute SVGLength baseVal;
+
+ /**
+ * A <a href="#ReadOnlyLength">read only</a> <a>SVGLength</a> representing the current animated value of
+ * the given attribute. If the given attribute is not currently being
+ * animated, then the <a>SVGLength</a> will have the same contents
+ * as <a>baseVal</a>. The object referenced by <a>animVal</a> will always
+ * be distinct from the one referenced by <a>baseVal</a>, even when
+ * the attribute is not animated.
+ */
+ readonly attribute SVGLength animVal;
+ };
+
+ /**
+ * <p>This interface defines a list of SVGLength objects.</p>
+ *
+ * <p><a>SVGLengthList</a> has the same attributes and methods as other
+ * SVGxxxList interfaces. Implementers may consider using a single base class
+ * to implement the various SVGxxxList interfaces.</p>
+ *
+ * <p id="ReadOnlyLengthList">An <a>SVGLengthList</a> object can be designated as <em>read only</em>,
+ * which means that attempts to modify the object will result in an exception
+ * being thrown, as described below.</p>
+ */
+ interface SVGLengthList {
+
+ /**
+ * The number of items in the list.
+ */
+ readonly attribute unsigned long numberOfItems;
+
+ /**
+ * Clears all existing current items from the list, with the result being
+ * an empty list.
+ *
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLengthList">read only</a>.
+ */
+ void clear() raises(DOMException);
+
+ /**
+ * Clears all existing current items from the list and re-initializes the
+ * list to hold the single item specified by the parameter. If the inserted
+ * item is already in a list, it is removed from its previous list before
+ * it is inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which should become the only member of the list.
+ * @return The item being inserted into the list.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLengthList">read only</a>.
+ */
+ SVGLength initialize(in SVGLength newItem) raises(DOMException);
+
+ /**
+ * Returns the specified item from the list. The returned item is the
+ * item itself and not a copy. Any changes made to the item are
+ * immediately reflected in the list.
+ *
+ * @param index The index of the item from the list which is to be
+ * returned. The first item is number 0.
+ * @return The selected item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLengthList">read only</a>.
+ */
+ SVGLength getItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item into the list at the specified position. The first
+ * item is number 0. If <var>newItem</var> is already in a list, it is
+ * removed from its previous list before it is inserted into this list.
+ * The inserted item is the item itself and not a copy. If the item is
+ * already in this list, note that the index of the item to insert
+ * before is <i>before</i> the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item before which the new item is to be
+ * inserted. The first item is number 0. If the index is equal to 0,
+ * then the new item is inserted at the front of the list. If the index
+ * is greater than or equal to <a>numberOfItems</a>, then the new item is
+ * appended to the end of the list.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLengthList">read only</a>.
+ */
+ SVGLength insertItemBefore(in SVGLength newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Replaces an existing item in the list with a new item. If
+ * <var>newItem</var> is already in a list, it is removed from its
+ * previous list before it is inserted into this list. The inserted item
+ * is the item itself and not a copy. If the item is already in this
+ * list, note that the index of the item to replace is <i>before</i>
+ * the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item which is to be replaced. The first
+ * item is number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLengthList">read only</a>.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGLength replaceItem(in SVGLength newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Removes an existing item from the list.
+ *
+ * @param index The index of the item which is to be removed. The first
+ * item is number 0.
+ * @return The removed item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLengthList">read only</a>.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGLength removeItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item at the end of the list. If <var>newItem</var> is
+ * already in a list, it is removed from its previous list before it is
+ * inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which is to be inserted. The first item is
+ * number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyLengthList">read only</a>.
+ */
+ SVGLength appendItem(in SVGLength newItem) raises(DOMException);
+ };
+
+ /**
+ * Used for attributes of type <a>SVGLengthList</a> which can be animated.
+ */
+ interface SVGAnimatedLengthList {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ */
+ readonly attribute SVGLengthList baseVal;
+
+ /**
+ * A <a href="#ReadOnlyLengthList">read only</a> <a>SVGLengthList</a> representing the current animated value of
+ * the given attribute. If the given attribute is not currently being
+ * animated, then the <a>SVGLengthList</a> will have the same contents
+ * as <a>baseVal</a>. The object referenced by <a>animVal</a> will always
+ * be distinct from the one referenced by <a>baseVal</a>, even when
+ * the attribute is not animated.
+ */
+ readonly attribute SVGLengthList animVal;
+ };
+
+ /**
+ * <p>The <a>SVGAngle</a> interface corresponds to the
+ * <a href='types.html#DataTypeAngle'><angle></a> basic data type.</p>
+ *
+ * <p id="ReadOnlyAngle">An <a>SVGAngle</a> object can be designated as <em>read only</em>,
+ * which means that attempts to modify the object will result in an exception
+ * being thrown, as described below.</p>
+ */
+ interface SVGAngle {
+
+ /**
+ * The unit type is not one of predefined unit 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.
+ *
+ * @defgroup Angle Unit Types
+ */
+ const unsigned short SVG_ANGLETYPE_UNKNOWN = 0;
+
+ /**
+ * No unit type was provided (i.e., a unitless value was specified). For
+ * angles, a unitless value is treated the same as if degrees were
+ * specified.
+ *
+ * @defgroup Angle Unit Types
+ */
+ const unsigned short SVG_ANGLETYPE_UNSPECIFIED = 1;
+
+ /**
+ * The unit type was explicitly set to degrees.
+ *
+ * @defgroup Angle Unit Types
+ */
+ const unsigned short SVG_ANGLETYPE_DEG = 2;
+
+ /**
+ * The unit type is radians.
+ *
+ * @defgroup Angle Unit Types
+ */
+ const unsigned short SVG_ANGLETYPE_RAD = 3;
+
+ /**
+ * The unit type is radians.
+ *
+ * @defgroup Angle Unit Types
+ */
+ const unsigned short SVG_ANGLETYPE_GRAD = 4;
+
+ /**
+ * The type of the value as specified by one of the SVG_ANGLETYPE_*
+ * constants defined on this interface.
+ */
+ readonly attribute unsigned short unitType;
+
+ /**
+ * The angle value as a floating point value, in degrees. Setting this
+ * attribute will cause <a>valueInSpecifiedUnits</a> and
+ * <a>valueAsString</a> to be updated automatically to reflect this setting.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the angle
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyAngle">read only</a>.
+ */
+ attribute float value setraises(DOMException);
+
+ /**
+ * The angle value as a floating point value, in the units expressed by
+ * <a>unitType</a>. Setting this attribute will cause <a>value</a> and
+ * <a>valueAsString</a> to be updated automatically to reflect this setting.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the angle
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyAngle">read only</a>.
+ */
+ attribute float valueInSpecifiedUnits setraises(DOMException);
+
+ /**
+ * The angle value as a string value, in the units expressed by
+ * <a>unitType</a>. Setting this attribute will cause <a>value</a>,
+ * <a>valueInSpecifiedUnits</a> and <a>unitType</a>
+ * to be updated automatically to reflect
+ * this setting.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the angle
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyAngle">read only</a>.
+ * @setraises DOMException(SYNTAX_ERR) Raised if the assigned string cannot
+ * be parsed as a valid <a><angle></a>.
+ */
+ attribute DOMString valueAsString setraises(DOMException);
+
+ /**
+ * Reset the value as a number with an associated <a>unitType</a>, thereby
+ * replacing the values for all of the attributes on the object.
+ *
+ * @param unitType The unit type for the value (e.g., <a>SVG_ANGLETYPE_DEG</a>).
+ * @param valueInSpecifiedUnits The angle value.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the angle
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyAngle">read only</a>.
+ * @raises DOMException(NOT_SUPPORTED_ERR) Raised if unitType is SVG_ANGLETYPE_UNKNOWN
+ * or not a valid unit type constant (one of the other SVG_ANGLETYPE_* constants
+ * defined on this interface).
+ */
+ void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
+
+ /**
+ * Preserve the same underlying stored value, but reset the stored unit
+ * identifier to the given <var>unitType</var>. Object attributes
+ * <a>unitType</a>, <a>valueInSpecifiedUnits</a> and <a>valueAsString</a>
+ * might be modified as a result of this method.
+ *
+ * @param unitType The unit type to switch to (e.g., <a>SVG_ANGLETYPE_DEG</a>).
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the angle
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyAngle">read only</a>.
+ * @raises DOMException(NOT_SUPPORTED_ERR) Raised if unitType is SVG_ANGLETYPE_UNKNOWN
+ * or not a valid unit type constant (one of the other SVG_ANGLETYPE_* constants
+ * defined on this interface).
+ */
+ void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
+ };
+
+ /**
+ * Used for attributes of basic data type <a href='types.html#DataTypeAngle'><angle></a>
+ * that can be animated.
+ */
+ interface SVGAnimatedAngle {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ */
+ readonly attribute SVGAngle baseVal;
+
+ /**
+ * A <a href="#ReadOnlyAngle">read only</a> <a>SVGAngle</a> representing the current animated value of
+ * the given attribute. If the given attribute is not currently being
+ * animated, then the <a>SVGAngle</a> will have the same contents
+ * as <a>baseVal</a>. The object referenced by <a>animVal</a> will always
+ * be distinct from the one referenced by <a>baseVal</a>, even when
+ * the attribute is not animated.
+ */
+ readonly attribute SVGAngle animVal;
+ };
+
+ /**
+ * <p>The <a>SVGColor</a> interface corresponds to color value definition for
+ * properties <a>'stop-color'</a>, <a>'flood-color'</a> and
+ * <a>'lighting-color'</a> and is a base class for interface <a>SVGPaint</a>.
+ * It incorporates SVG's extended notion of color, which incorporates
+ * ICC-based color specifications.</p>
+ *
+ * <p>Interface <a>SVGColor</a> does <em>not</em> correspond to the
+ * <a href='types.html#DataTypeColor'><color></a> basic data type. For
+ * the <a href='types.html#DataTypeColor'><color></a> basic data type,
+ * the applicable DOM interfaces are defined in
+ * <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/'>DOM Level 2 Style</a>;
+ * in particular, see the <a>RGBColor</a> interface
+ * ([<a href='refs.html#ref-DOM2STYLE'>DOM2STYLE</a>], section 2.2).</p>
+ *
+ * <p>Note: The <a>SVGColor</a> interface is deprecated, and may be dropped
+ * from future versions of the SVG specification.</p>
+ */
+ interface SVGColor : css::CSSValue {
+
+ /**
+ * The color 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.
+ *
+ * @defgroup Color Types
+ */
+ const unsigned short SVG_COLORTYPE_UNKNOWN = 0;
+
+ /**
+ * An sRGB color has been specified without an alternative ICC color
+ * specification.
+ *
+ * @defgroup Color Types
+ */
+ const unsigned short SVG_COLORTYPE_RGBCOLOR = 1;
+
+ /**
+ * An sRGB color has been specified along with an alternative ICC color
+ * specification.
+ *
+ * @defgroup Color Types
+ */
+ const unsigned short SVG_COLORTYPE_RGBCOLOR_ICCCOLOR = 2;
+
+ /**
+ * Corresponds to when keyword <span class='attr-value'>currentColor</span>
+ * has been specified.
+ *
+ * @defgroup Color Types
+ */
+ const unsigned short SVG_COLORTYPE_CURRENTCOLOR = 3;
+
+ /**
+ * The type of the value as specified by one of the SVG_COLORTYPE_*
+ * constants defined on this interface.
+ */
+ readonly attribute unsigned short colorType;
+
+ /**
+ * The color specified in the sRGB color space.
+ */
+ readonly attribute css::RGBColor rgbColor;
+
+ /**
+ * The alternate ICC color specification.
+ */
+ readonly attribute SVGICCColor iccColor;
+
+ /**
+ * Modifies the color value to be the specified sRGB color without an
+ * alternate ICC color specification.
+ *
+ * @param rgbColor A string that matches <a href='types.html#DataTypeColor'><color></a>,
+ * which specifies the new sRGB color value.
+ * @raises SVGException(SVG_INVALID_VALUE_ERR) Raised if <var>rgbColor</var>
+ * does not match <a href='types.html#DataTypeColor'><color></a>.
+ */
+ void setRGBColor(in DOMString rgbColor) raises(SVGException);
+
+ /**
+ * Modifies the color value to be the specified sRGB color with an
+ * alternate ICC color specification.
+ *
+ * @param rgbColor A string that matches <a href='types.html#DataTypeColor'><color></a>,
+ * which specifies the new sRGB color value.
+ * @param iccColor A string that matches <a href='types.html#DataTypeICCColor'><icccolor></a>,
+ * which specifies the alternate ICC color specification.
+ * @raises SVGException(SVG_INVALID_VALUE_ERR) Raised if <var>rgbColor</var>
+ * does not match <a href='types.html#DataTypeColor'><color></a>
+ * or if <var>iccColor</var> does not match
+ * <a href='types.html#DataTypeICCColor'><icccolor></a>.
+ */
+ void setRGBColorICCColor(in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
+
+ /**
+ * Sets the color value as specified by the parameters. If
+ * <var>colorType</var> requires an <a>RGBColor</a>, then
+ * <var>rgbColor</var> must be a string that matches
+ * <a href='types.html#DataTypeColor'><color></a>;
+ * otherwise, <var>rgbColor</var>. must be null. If <var>colorType</var>
+ * requires an <a>SVGICCColor</a>, then <var>iccColor</var> must be a string
+ * that matches <a href='types.html#DataTypeICCColor'><icccolor></a>;
+ * otherwise, <var>iccColor</var> must be null.
+ *
+ * @param colorType One of the defined constants for <a>colorType</a>.
+ * @param rgbColor The specification of an sRGB color, or null.
+ * @param iccColor The specification of an ICC color, or null.
+ * @raises SVGException(SVG_INVALID_VALUE_ERR) Raised if one of the
+ * parameters has an invalid value.
+ */
+ void setColor(in unsigned short colorType, in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
+ };
+
+ /**
+ * <p>The <a>SVGICCColor</a> interface expresses an ICC-based color
+ * specification.</p>
+ *
+ * <p>Note: The <a>SVGICCColor</a> interface is deprecated, and may be dropped
+ * from future versions of the SVG specification.</p>
+ */
+ interface SVGICCColor {
+
+ /**
+ * The name of the color profile, which is the first parameter of an ICC
+ * color specification.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString colorProfile setraises(DOMException);
+
+ /**
+ * The list of color values that define this ICC color. Each color value
+ * is an arbitrary floating point number.
+ */
+ readonly attribute SVGNumberList colors;
+ };
+
+ /**
+ * <p>Represents rectangular geometry. Rectangles are defined as consisting
+ * of a (x,y) coordinate pair identifying a minimum X value, a minimum Y
+ * value, and a width and height, which are usually constrained to be
+ * non-negative.</p>
+ *
+ * <p id="ReadOnlyRect">An <a>SVGRect</a> object can be designated as <em>read only</em>,
+ * which means that attempts to modify the object will result in an exception
+ * being thrown, as described below.</p>
+ */
+ interface SVGRect {
+
+ /**
+ * The <var>x</var> coordinate of the rectangle, in user units.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the rectangle
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyRect">read only</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The <var>y</var> coordinate of the rectangle, in user units.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the rectangle
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyRect">read only</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * The <var>width</var> coordinate of the rectangle, in user units.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the rectangle
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyRect">read only</a>.
+ */
+ attribute float width setraises(DOMException);
+
+ /**
+ * The <var>height</var> coordinate of the rectangle, in user units.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the rectangle
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyRect">read only</a>.
+ */
+ attribute float height setraises(DOMException);
+ };
+
+ /**
+ * Used for attributes of type <a>SVGRect</a> which can be animated.
+ */
+ interface SVGAnimatedRect {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ */
+ readonly attribute SVGRect baseVal;
+
+ /**
+ * A <a href="#ReadOnlyRect">read only</a> <a>SVGRect</a> representing the current animated value of
+ * the given attribute. If the given attribute is not currently being
+ * animated, then the <a>SVGRect</a> will have the same contents
+ * as <a>baseVal</a>. The object referenced by <a>animVal</a> will always
+ * be distinct from the one referenced by <a>baseVal</a>, even when
+ * the attribute is not animated.
+ */
+ readonly attribute SVGRect animVal;
+ };
+
+ /**
+ * The <a>SVGUnitTypes</a> interface defines a commonly used set of constants
+ * and is a base interface used by <a>SVGGradientElement</a>,
+ * <a>SVGPatternElement</a>, <a>SVGClipPathElement</a>, <a>SVGMaskElement</a>
+ * and <a>SVGFilterElement</a>.
+ */
+ interface SVGUnitTypes {
+
+ /**
+ * 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.
+ *
+ * @defgroup Unit Types
+ */
+ const unsigned short SVG_UNIT_TYPE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'userSpaceOnUse'</span>.
+ *
+ * @defgroup Unit Types
+ */
+ const unsigned short SVG_UNIT_TYPE_USERSPACEONUSE = 1;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'objectBoundingBox'</span>.
+ *
+ * @defgroup Unit Types
+ */
+ const unsigned short SVG_UNIT_TYPE_OBJECTBOUNDINGBOX = 2;
+ };
+
+ /**
+ * The <a>SVGStylable</a> interface is implemented on all objects
+ * corresponding to SVG elements that can have <a>'style attribute'</a>,
+ * <a>'class'</a> and <a>presentation attributes</a> specified on them. It
+ * is thus an ancestor interface for many of the interfaces defined in this
+ * specification.
+ */
+ interface SVGStylable {
+
+ /**
+ * Corresponds to attribute <a>'class'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedString className;
+
+ /**
+ * Corresponds to attribute <a>'style attribute'</a> on the given element. If the
+ * user agent does not support <a href='styling.html#StylingWithCSS'>styling
+ * with CSS</a>, then this attribute must always have the value of null.
+ */
+ readonly attribute css::CSSStyleDeclaration style;
+
+ /**
+ * Returns the base (i.e., static) value of a given <a>presentation
+ * attribute</a> as an object of type <a>CSSValue</a>. The returned object
+ * is live; changes to the objects represent immediate changes to the
+ * objects to which the <a>CSSValue</a> is attached.
+ *
+ * <p>Note: The <code>getPresentationAttribute</code> method is deprecated,
+ * and may be dropped from future versions of the SVG specification.</p>
+ *
+ * @param name The name of the presentation attribute whose value is to be
+ * returned.
+ * @return The static/base value of the given <a>presentation attribute</a>
+ * as a <a>CSSValue</a>, or null if the given attribute does not have a
+ * specified value.
+ */
+ css::CSSValue getPresentationAttribute(in DOMString name);
+ };
+
+ /**
+ * Interface <a>SVGLocatable</a> is for all elements which either have a
+ * <a>'transform'</a> attribute or don't have a <a>'transform'</a> attribute
+ * but whose content can have a bounding box in current user space.
+ */
+ interface SVGLocatable {
+
+ /**
+ * The element which established the current viewport. Often, the nearest
+ * ancestor <a>'svg'</a> element. Null if the current element is the
+ * <a>outermost svg element</a>.
+ */
+ readonly attribute SVGElement nearestViewportElement;
+
+ /**
+ * The farthest ancestor <a>'svg'</a> element. Null if the current element
+ * is the <a>outermost svg element</a>.
+ */
+ readonly attribute SVGElement farthestViewportElement;
+
+ /**
+ * Returns the tight bounding box in current user space (i.e., after
+ * application of the <a>'transform'</a> attribute, if any) on the
+ * geometry of all contained graphics elements, exclusive of stroking, clipping, masking and
+ * filter effects). Note that getBBox must return the actual bounding box
+ * at the time the method was called, even in case the element has not
+ * yet been rendered.
+ *
+ * @return An <a>SVGRect</a> object that defines the bounding box.
+ */
+ SVGRect getBBox();
+
+ /**
+ * Returns the transformation matrix from current user units (i.e., after
+ * application of the <a>'transform'</a> attribute, if any) to the viewport
+ * coordinate system for the <a>nearestViewportElement</a>.
+ *
+ * @return An <a>SVGMatrix</a> object that defines the CTM.
+ */
+ SVGMatrix getCTM();
+
+ /**
+ * Returns the transformation matrix from current user units (i.e., after
+ * application of the <a>'transform'</a> attribute, if any) to the parent
+ * user agent's notice of a "pixel". For display devices, ideally this
+ * represents a physical screen pixel. For other devices or environments
+ * where physical pixel sizes are not known, then an algorithm similar to
+ * the CSS2 definition of a "pixel" can be used instead. Note that null
+ * is returned if this element is not hooked into the document tree. This
+ * method would have been more aptly named as <code>getClientCTM</code>,
+ * but the name <code>getScreenCTM</code> is kept for historical reasons.
+ *
+ * @return An <a>SVGMatrix</a> object that defines the given
+ * transformation matrix.
+ */
+ SVGMatrix getScreenCTM();
+
+ /**
+ * Returns the transformation matrix from the user coordinate system on the
+ * current element (after application of the <a>'transform'</a> attribute,
+ * if any) to the user coordinate system on parameter <var>element</var>
+ * (after application of its <a>'transform'</a> attribute, if any).
+ *
+ * @param element The target element.
+ * @return An <a>SVGMatrix</a> object that defines the transformation.
+ * @raises SVGException(SVG_MATRIX_NOT_INVERTABLE) Raised if the currently
+ * defined transformation matrices make it impossible to compute the
+ * given matrix (e.g., because one of the transformations is singular).
+ */
+ SVGMatrix getTransformToElement(in SVGElement element) raises(SVGException);
+ };
+
+ /**
+ * Interface <a>SVGTransformable</a> contains properties and methods that
+ * apply to all elements which have attribute <a>'transform'</a>.
+ */
+ interface SVGTransformable : SVGLocatable {
+
+ /**
+ * Corresponds to attribute <a>'transform'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedTransformList transform;
+ };
+
+ /**
+ * Interface <a>SVGTests</a> defines an interface which applies to all
+ * elements which have attributes <a>'requiredFeatures'</a>,
+ * <a>'requiredExtensions'</a> and <a>'systemLanguage'</a>.
+ */
+ interface SVGTests {
+
+ /**
+ * Corresponds to attribute <a>'requiredFeatures'</a> on the given element.
+ */
+ readonly attribute SVGStringList requiredFeatures;
+
+ /**
+ * Corresponds to attribute <a>'requiredExtensions'</a> on the given element.
+ */
+ readonly attribute SVGStringList requiredExtensions;
+
+ /**
+ * Corresponds to attribute <a>'systemLanguage'</a> on the given element.
+ */
+ readonly attribute SVGStringList systemLanguage;
+
+ /**
+ * Returns true if the user agent supports the given extension, specified
+ * by a URI.
+ *
+ * @param extension The name of the extension, expressed as a URI.
+ * @return True or false, depending on whether the given extension is
+ * supported.
+ */
+ boolean hasExtension(in DOMString extension);
+ };
+
+ /**
+ * Interface <a>SVGLangSpace</a> defines an interface which applies to all
+ * elements which have attributes <a>'xml:lang'</a> and <a>'xml:space'</a>.
+ */
+ interface SVGLangSpace {
+
+ /**
+ * Corresponds to attribute <a>'xml:lang'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an
+ * attempt to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString xmllang setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'xml:space'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an
+ * attempt to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString xmlspace setraises(DOMException);
+ };
+
+ /**
+ * Interface <a>SVGExternalResourcesRequired</a> defines an interface which
+ * applies to all elements where this element or one of its descendants can
+ * reference an external resource.
+ */
+ interface SVGExternalResourcesRequired {
+
+ /**
+ * Corresponds to attribute <a>'externalResourcesRequired'</a> on the given
+ * element. Note that the SVG DOM defines the attribute
+ * <a>'externalResourcesRequired'</a> as being of type
+ * <a>SVGAnimatedBoolean</a>, whereas the SVG language definition says that
+ * <a>'externalResourcesRequired'</a> is not animated. Because the SVG
+ * language definition states that <a>'externalResourcesRequired'</a>
+ * cannot be animated, the <a>SVGAnimatedBoolean::animVal</a> will always be
+ * the same as the <a>SVGAnimatedBoolean::baseVal</a>.
+ */
+ readonly attribute SVGAnimatedBoolean externalResourcesRequired;
+ };
+
+ /**
+ * Interface <a>SVGFitToViewBox</a> defines DOM attributes that apply to
+ * elements which have XML attributes <a>'viewBox'</a> and
+ * <a>'preserveAspectRatio'</a>.
+ */
+ interface SVGFitToViewBox {
+
+ /**
+ * Corresponds to attribute <a>'viewBox'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedRect viewBox;
+
+ /**
+ * Corresponds to attribute <a>'preserveAspectRatio'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
+ };
+
+ /**
+ * The <a>SVGZoomAndPan</a> interface defines attribute <a>zoomAndPan</a> and
+ * associated constants.
+ */
+ interface SVGZoomAndPan {
+
+ /**
+ * The enumeration was set to a value that 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.
+ *
+ * @defgroup Zoom and Pan Types
+ */
+ const unsigned short SVG_ZOOMANDPAN_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'disable'</span>.
+ *
+ * @defgroup Zoom and Pan Types
+ */
+ const unsigned short SVG_ZOOMANDPAN_DISABLE = 1;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'magnify'</span>.
+ *
+ * @defgroup Zoom and Pan Types
+ */
+ const unsigned short SVG_ZOOMANDPAN_MAGNIFY = 2;
+
+ /**
+ * Corresponds to attribute <a>'zoomAndPan'</a> on the given element. The
+ * value must be one of the SVG_ZOOMANDPAN_* constants defined on this
+ * interface.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an
+ * attempt to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute unsigned short zoomAndPan setraises(DOMException);
+ };
+
+ /**
+ * The interface corresponds to an SVG View Specification.
+ */
+ interface SVGViewSpec :
+ SVGZoomAndPan,
+ SVGFitToViewBox {
+
+ /**
+ * Corresponds to the transform setting on the SVG View Specification.
+ */
+ readonly attribute SVGTransformList transform;
+
+ /**
+ * Corresponds to the viewTarget setting on the SVG View Specification.
+ */
+ readonly attribute SVGElement viewTarget;
+
+ /**
+ * Corresponds to the viewBox setting on the SVG View Specification.
+ */
+ readonly attribute DOMString viewBoxString;
+
+ /**
+ * Corresponds to the preserveAspectRatio setting on the SVG View Specification.
+ */
+ readonly attribute DOMString preserveAspectRatioString;
+
+ /**
+ * Corresponds to the transform setting on the SVG View Specification.
+ */
+ readonly attribute DOMString transformString;
+
+ /**
+ * Corresponds to the viewTarget setting on the SVG View Specification.
+ */
+ readonly attribute DOMString viewTargetString;
+ };
+
+ /**
+ * Interface <a>SVGURIReference</a> defines an interface which applies to all
+ * elements which have the collection of XLink attributes, such as
+ * <span class='attr-name'>'xlink:href'</span>, which define a URI reference.
+ */
+ interface SVGURIReference {
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'xlink:href'</span> on
+ * the given element.
+ */
+ readonly attribute SVGAnimatedString href;
+ };
+
+ /**
+ * <p>SVG extends interface <a>CSSRule</a> with interface <a>SVGCSSRule</a>
+ * by adding an <a>SVGColorProfileRule</a> rule to allow for specification of
+ * ICC-based color.</p>
+ *
+ * <p>It is likely that this extension will become part of a future version of
+ * CSS and DOM.</p>
+ */
+ interface SVGCSSRule : css::CSSRule {
+
+ /**
+ * The rule is an <a href='http://www.w3.org/TR/SVG/color.html#InterfaceSVGColorProfileRule'>@color-profile</a>.
+ */
+ const unsigned short COLOR_PROFILE_RULE = 7;
+ };
+
+ /**
+ * The <a>SVGRenderingIntent</a> interface defines the enumerated list of
+ * possible values for <a>'color-profile/rendering-intent'</a> attributes or descriptors.
+ */
+ interface SVGRenderingIntent {
+
+ /**
+ * 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.
+ *
+ * @defgroup Rendering Intent Types
+ */
+ const unsigned short RENDERING_INTENT_UNKNOWN = 0;
+
+ /**
+ * Corresponds to a value of <span class ='attr-value'>'auto'</span>.
+ *
+ * @defgroup Rendering Intent Types
+ */
+ const unsigned short RENDERING_INTENT_AUTO = 1;
+
+ /**
+ * Corresponds to a value of <span class ='attr-value'>'perceptual'</span>.
+ *
+ * @defgroup Rendering Intent Types
+ */
+ const unsigned short RENDERING_INTENT_PERCEPTUAL = 2;
+
+ /**
+ * Corresponds to a value of <span class ='attr-value'>'relative-colorimetric'</span>.
+ *
+ * @defgroup Rendering Intent Types
+ */
+ const unsigned short RENDERING_INTENT_RELATIVE_COLORIMETRIC = 3;
+
+ /**
+ * Corresponds to a value of <span class ='attr-value'>'saturation'</span>.
+ *
+ * @defgroup Rendering Intent Types
+ */
+ const unsigned short RENDERING_INTENT_SATURATION = 4;
+
+ /**
+ * Corresponds to a value of <span class='attr-value'>'absolute-colorimetric'</span>.
+ *
+ * @defgroup Rendering Intent Types
+ */
+ const unsigned short RENDERING_INTENT_ABSOLUTE_COLORIMETRIC = 5;
+ };
+
+ /**
+ * <p>When an <a>'svg'</a> element is embedded inline as
+ * a component of a document from another namespace, such as when an
+ * <a>'svg'</a> element is embedded inline within an
+ * XHTML document [<a href="refs.html#ref-XHTML">XHTML</a>], then an
+ * <a>SVGDocument</a> object will not exist; instead, the root object in
+ * the document object hierarchy will be a Document object of a different
+ * type, such as an HTMLDocument object.</p>
+ *
+ * <p>However, an <a>SVGDocument</a> object will indeed exist when the
+ * root element of the XML document hierarchy is an
+ * <a>'svg'</a> element, such as when viewing a stand-alone SVG file (i.e., a
+ * file with MIME type "image/svg+xml"). In this case, the <a>SVGDocument</a>
+ * object will be the root object of the document object model hierarchy.</p>
+ *
+ * <p>In the case where an SVG document is embedded by reference,
+ * such as when an XHTML document has an <span class="element-name">'object'</span>
+ * element whose <span class="attr-name">'href'</span> attribute references an SVG
+ * document (i.e., a document whose MIME type is "image/svg+xml"
+ * and whose root element is thus an <a>'svg'</a> element), there will exist
+ * two distinct DOM hierarchies. The first DOM hierarchy will be for the
+ * referencing document (e.g., an XHTML document). The second DOM hierarchy
+ * will be for the referenced SVG document. In this second DOM hierarchy, the
+ * root object of the document object model hierarchy is an
+ * <a>SVGDocument</a> object.</p>
+ *
+ * <p>The <a>SVGDocument</a> interface contains a similar list of attributes
+ * and methods to the HTMLDocument interface described in the
+ * <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html">Document
+ * Object Model (HTML) Level 1</a> chapter of the
+ * [<a href="refs.html#ref-DOM1">DOM1</a>] specification.</p>
+ */
+ interface SVGDocument :
+ Document,
+ events::DocumentEvent {
+
+ /**
+ * The title of a document as specified by the <a>'title'</a> sub-element of
+ * the <a>'svg'</a> root element (i.e.,
+ * <span class="code-fragment"><svg><title>Here is the title</title>...</svg></span>)
+ */
+ readonly attribute DOMString title;
+
+ /**
+ * Returns the URI of the page that linked to this page. The value is an
+ * empty string if the user navigated to the page directly (not through a
+ * link, but, for example, via a bookmark).
+ */
+ readonly attribute DOMString referrer;
+
+ /**
+ * The domain name of the server that served the document, or a null string
+ * if the server cannot be identified by a domain name.
+ */
+ readonly attribute DOMString domain;
+
+ /**
+ * The complete URI of the document.
+ */
+ readonly attribute DOMString URL;
+
+ /**
+ * The root <a>'svg'</a> in the document hierarchy.
+ */
+ readonly attribute SVGSVGElement rootElement;
+ };
+
+ /**
+ * <p>A key interface definition is the <a>SVGSVGElement</a> interface,
+ * which is the interface that corresponds to the <a>'svg'</a> element. This
+ * interface contains various miscellaneous commonly-used utility
+ * methods, such as matrix operations and the ability to control the
+ * time of redraw on visual rendering devices.</p>
+ *
+ * <p><a>SVGSVGElement</a> extends <a>ViewCSS</a> and <a>DocumentCSS</a> to
+ * provide access to the computed values of properties and the override style
+ * sheet as described in <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>DOM Level 2 Style</cite></a>
+ * [<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>].</p>
+ */
+ interface SVGSVGElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGLocatable,
+ SVGFitToViewBox,
+ SVGZoomAndPan,
+ events::DocumentEvent,
+ css::ViewCSS,
+ css::DocumentCSS {
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given <a>'svg'</a> element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given <a>'svg'</a> element.
+ */
+ readonly attribute SVGAnimatedLength y;
+
+ /**
+ * Corresponds to attribute <a>'width'</a> on the given <a>'svg'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength width;
+
+ /**
+ * Corresponds to attribute <a>'height'</a> on the given <a>'svg'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength height;
+
+ /**
+ * Corresponds to attribute <a>'contentScriptType'</a> on the given
+ * <a>'svg'</a> element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt to
+ * change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString contentScriptType setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'contentStyleType'</a> on the given
+ * <a>'svg'</a> element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt to
+ * change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString contentStyleType setraises(DOMException);
+
+ /**
+ * <p>The position and size of the viewport (implicit or explicit) that
+ * corresponds to this <a>'svg'</a> element. When the user agent is actually
+ * rendering the content, then the position and size values represent the
+ * actual values when rendering. The position and size values are unitless
+ * values in the coordinate system of the parent element. If no parent element
+ * exists (i.e., <a>'svg'</a> element represents the root of the document
+ * tree), if this SVG document is embedded as part of another document (e.g.,
+ * via the HTML <span class='element-name'>'object'</span> element), then the
+ * position and size are unitless values in the coordinate system of the parent
+ * document. (If the parent uses CSS or XSL layout, then unitless values
+ * represent pixel units for the current CSS or XSL viewport, as described in
+ * the CSS2 specification.) If the parent element does not have a coordinate
+ * system, then the user agent should provide reasonable default values for
+ * this attribute.</p>
+ *
+ * <p>The <a>SVGRect</a> object is <a href="types.html#ReadOnlyRect">read only</a>.</p>
+ */
+ readonly attribute SVGRect viewport;
+
+ /**
+ * Size of a pixel units (as defined by CSS2) along the x-axis of
+ * the viewport, which represents a unit somewhere in the range
+ * of 70dpi to 120dpi, and, on systems that support this, might
+ * actually match the characteristics of the target medium. On
+ * systems where it is impossible to know the size of a pixel, a
+ * suitable default pixel size is provided.
+ */
+ readonly attribute float pixelUnitToMillimeterX;
+
+ /**
+ * Corresponding size of a pixel unit along the y-axis of the viewport.
+ */
+ readonly attribute float pixelUnitToMillimeterY;
+
+ /**
+ * User interface (UI) events in DOM Level 2 indicate the screen
+ * positions at which the given UI event occurred. When the user
+ * agent actually knows the physical size of a "screen unit", this
+ * attribute will express that information; otherwise, user agents
+ * will provide a suitable default value such as .28mm.
+ */
+ readonly attribute float screenPixelToMillimeterX;
+
+ /**
+ * Corresponding size of a screen pixel along the y-axis of the viewport.
+ */
+ readonly attribute float screenPixelToMillimeterY;
+
+ /**
+ * The initial view (i.e., before magnification and panning) of
+ * the current innermost SVG document fragment can be either the
+ * "standard" view (i.e., based on attributes on the <a>'svg'</a>
+ * element such as <a>'svg/viewBox'</a>) or to a "custom" view (i.e., a
+ * hyperlink into a particular <a>'view'</a> or other element - see
+ * <a href="linking.html#LinksIntoSVG">Linking into SVG content:
+ * IRI fragments and SVG views</a>). If the initial view is the
+ * "standard" view, then this attribute is false. If the initial
+ * view is a "custom" view, then this attribute is true.
+ */
+ readonly attribute boolean useCurrentView;
+
+ /**
+ * <p>The definition of the initial view (i.e., before magnification
+ * and panning) of the current innermost SVG document fragment. The
+ * meaning depends on the situation:</p>
+ * <ul>
+ * <li>
+ * If the initial view was a "standard" view, then:
+ * <ul>
+ * <li>the values for <a>SVGFitToViewBox::viewBox</a>,
+ * <a>SVGFitToViewBox::preserveAspectRatio</a> and
+ * <a>SVGZoomAndPan::zoomAndPan</a> within <a>currentView</a>
+ * will match the values for the corresponding DOM attributes
+ * that are on SVGSVGElement directly</li>
+ *
+ * <li>the values for <a>SVGViewSpec::transform</a> and
+ * <a>SVGViewSpec::viewTarget</a> within <a>currentView</a>
+ * will be null</li>
+ * </ul>
+ * </li>
+ * <li>
+ * If the initial view was a link into a <a>'view'</a> element, then:
+ * <ul>
+ * <li>the values for <a>SVGFitToViewBox::viewBox</a>,
+ * <a>SVGFitToViewBox::preserveAspectRatio</a> and
+ * <a>SVGZoomAndPan::zoomAndPan</a> within <a>currentView</a>
+ * will correspond to the corresponding attributes for the
+ * given <a>'view'</a> element</li>
+ *
+ * <li>the values for <a>SVGViewSpec::transform</a> and
+ * <a>SVGViewSpec::viewTarget</a> within <a>currentView</a>
+ * will be null</li>
+ * </ul>
+ * </li>
+ * <li>
+ * If the initial view was a link into another element (i.e.,
+ * other than a <a>'view'</a>), then:
+ * <ul>
+ * <li>the values for <a>SVGFitToViewBox::viewBox</a>,
+ * <a>SVGFitToViewBox::preserveAspectRatio</a> and
+ * <a>SVGZoomAndPan::zoomAndPan</a> within <a>currentView</a>
+ * will match the values for the corresponding DOM attributes
+ * that are on SVGSVGElement directly for the closest ancestor
+ * <a>'svg'</a> element</li>
+ *
+ * <li>the values for <a>SVGViewSpec::transform</a> within
+ * <a>currentView</a> will be null</li>
+ *
+ * <li>the <a>SVGViewSpec::viewTarget</a> within
+ * <a>currentView</a> will represent the target of the
+ * link</li>
+ * </ul>
+ * </li>
+ * <li>
+ * If the initial view was a link into the SVG document fragment
+ * using an SVG view specification fragment identifier (i.e.,
+ * #svgView(...)), then:
+ * <ul>
+ * <li>the values for <a>SVGFitToViewBox::viewBox</a>,
+ * <a>SVGFitToViewBox::preserveAspectRatio</a>,
+ * <a>SVGZoomAndPan::zoomAndPan</a>,
+ * <a>SVGViewSpec::transform</a> and
+ * <a>SVGViewSpec::viewTarget</a> within <a>currentView</a>
+ * will correspond to the values from the SVG view
+ * specification fragment identifier</li>
+ * </ul>
+ * </li>
+ * </ul>
+ *
+ * <p>The object itself and its contents are both read only.</p>
+ */
+ readonly attribute SVGViewSpec currentView;
+
+ /**
+ * On an <a>outermost svg element</a>, this attribute indicates the
+ * current scale factor
+ * relative to the initial view to take into account user
+ * magnification and panning operations, as described under
+ * <a href='interact.html#ZoomAndPanAttribute'>Magnification
+ * and panning</a>. DOM attributes <a>currentScale</a> and
+ * <a>currentTranslate</a>
+ * are equivalent to the 2x3 matrix [a b c d e f] =
+ * [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y].
+ * If "magnification" is enabled (i.e., <span class='attr-value'>zoomAndPan="magnify"</span>),
+ * then the effect is as if an extra transformation were placed at the
+ * outermost level on the SVG document fragment (i.e., outside the
+ * <a>outermost svg element</a>).
+ * <p>When accessed on an <a>'svg'</a> element that is not an
+ * <a>outermost svg element</a>, it is undefined what behavior
+ * this attribute has.</p>
+ */
+ attribute float currentScale;
+
+ /**
+ * On an <a>outermost svg element</a>, the corresponding translation factor
+ * that takes into account user "magnification".
+ * <p>When accessed on an <a>'svg'</a> element that is not an
+ * <a>outermost svg element</a>, it is undefined what behavior
+ * this attribute has.</p>
+ */
+ readonly attribute SVGPoint currentTranslate;
+
+ /**
+ * Takes a time-out value which indicates that redraw shall not occur until:
+ * <ol>
+ * <li>the corresponding unsuspendRedraw() call has been made,</li>
+ * <li>an unsuspendRedrawAll() call has been made, or</li>
+ * <li>its timer has timed out.</li>
+ * </ol>
+ * <p>In environments that do not support interactivity (e.g., print media),
+ * then redraw shall not be suspended.
+ * Calls to suspendRedraw() and unsuspendRedraw() should, but need not be,
+ * made in balanced pairs.</p>
+ * <p>To suspend redraw actions as a collection of SVG DOM changes occur,
+ * precede the changes to the SVG DOM with a method call similar to:</p>
+ * <pre>suspendHandleID = suspendRedraw(maxWaitMilliseconds);</pre>
+ * <p>and follow the changes with a method call similar to:</p>
+ * <pre>unsuspendRedraw(suspendHandleID);</pre>
+ * <p>Note that multiple suspendRedraw calls can be used at once and that
+ * each such method call is treated independently of the other suspendRedraw
+ * method calls.</p>
+ *
+ * @param maxWaitMilliseconds The amount of time in milliseconds
+ * to hold off before redrawing the device. Values greater than 60 seconds
+ * will be truncated down to 60 seconds.
+ * @return A number which acts as a unique identifier for the given
+ * suspendRedraw() call. This value must be passed as the parameter to the
+ * corresponding unsuspendRedraw() method call.
+ */
+ unsigned long suspendRedraw(in unsigned long maxWaitMilliseconds);
+
+ /**
+ * Cancels a specified suspendRedraw() by providing a unique
+ * suspend handle ID that was returned by a previous suspendRedraw() call.
+ *
+ * @param suspendHandleID A number which acts as a unique identifier for
+ * the desired suspendRedraw() call. The number supplied must be a value
+ * returned from a previous call to suspendRedraw(). If an invalid
+ * handle ID value is provided then the request to unsuspendRedraw() is
+ * silently ignored.
+ */
+ void unsuspendRedraw(in unsigned long suspendHandleID);
+
+ /**
+ * Cancels all currently active suspendRedraw() method calls. This method
+ * is most useful at the very end of a set of SVG DOM calls to ensure that
+ * all pending suspendRedraw() method calls have been cancelled.
+ */
+ void unsuspendRedrawAll();
+
+ /**
+ * In rendering environments supporting interactivity, forces the user agent
+ * to immediately redraw all regions of the viewport that require updating.
+ */
+ void forceRedraw();
+
+ /**
+ * Suspends (i.e., pauses) all currently running animations that are defined
+ * within the SVG document fragment corresponding to this <a>'svg'</a>
+ * element, causing the animation clock corresponding to this document
+ * fragment to stand still until it is unpaused.
+ */
+ void pauseAnimations();
+
+ /**
+ * Unsuspends (i.e., unpauses) currently running animations that are defined
+ * within the SVG document fragment, causing the animation clock to continue
+ * from the time at which it was suspended.
+ */
+ void unpauseAnimations();
+
+ /**
+ * Returns true if this SVG document fragment is in a paused state.
+ *
+ * @return Boolean indicating whether this SVG document fragment is in a
+ * paused state.
+ */
+ boolean animationsPaused();
+
+ /**
+ * Returns the current time in seconds relative to the start time for the
+ * current SVG document fragment.
+ *
+ * If <span class="dom-method-name">getCurrentTime</span> is called before
+ * the document timeline has begun (for example, by script running in a
+ * <a>'script'</a> element before the document's
+ * <a href="interact.html#LoadEvent">SVGLoad</a> event is dispatched),
+ * then 0 is returned.
+ *
+ * @return The current time in seconds, or 0 if the document timeline has not yet begun.
+ */
+ float getCurrentTime();
+
+ /**
+ * Adjusts the clock for this SVG document fragment, establishing a new
+ * current time.
+ *
+ * If <span class="dom-method-name">setCurrentTime</span> is called
+ * before the document timeline has begun (for example, by script running
+ * in a <a>'script'</a> element before the document's
+ * <a href="interact.html#LoadEvent">SVGLoad</a> event is dispatched),
+ * then the value of <var>seconds</var> in the last invocation of the method
+ * gives the time that the document will seek to once the document
+ * timeline has begun.
+ *
+ * @param seconds The new current time in seconds relative to the start
+ * time for the current SVG document fragment.
+ */
+ void setCurrentTime(in float seconds);
+
+ /**
+ * Returns the list of graphics elements whose rendered content intersects
+ * the supplied rectangle. Each candidate graphics element is to
+ * be considered a match only if the same graphics element can be a
+ * <a href="interact.html#PointerEventsProperty">target of pointer events</a>
+ * as defined in <a>'pointer-events'</a> processing.
+ *
+ * @param rect The test rectangle. The values are in the <a>initial coordinate
+ * system</a> for the current <a>'svg'</a> element.
+ * @param referenceElement If not null, then any intersected element that
+ * doesn't have the referenceElement as ancestor must not be included
+ * in the returned NodeList.
+ * @return A list of Elements whose content intersects the supplied
+ * rectangle. This <a>NodeList</a> must be implemented identically to
+ * the <a>NodeList</a> interface as defined in DOM Level 2 Core
+ * ([<a href="refs.html#ref-DOM2">DOM2</a>], section 1.2) with the
+ * exception that the interface is not
+ * <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#td-live">live</a>.
+ */
+ NodeList getIntersectionList(in SVGRect rect, in SVGElement referenceElement);
+
+ /**
+ * Returns the list of graphics elements whose rendered content is entirely
+ * contained within the supplied rectangle. Each candidate graphics element is to
+ * be considered a match only if the same graphics element can be a
+ * <a href="interact.html#PointerEventsProperty">target of pointer events</a>
+ * as defined in <a>'pointer-events'</a> processing.
+ *
+ * @param rect The test rectangle. The values are in the <a>initial coordinate
+ * system</a> for the current <a>'svg'</a> element.
+ * @param referenceElement If not null, then any intersected element that
+ * doesn't have the referenceElement as ancestor must not be included
+ * in the returned NodeList.
+ * @return A list of Elements whose content is enclosed by the supplied
+ * rectangle. This <a>NodeList</a> must be implemented identically to
+ * the <a>NodeList</a> interface as defined in DOM Level 2 Core
+ * ([<a href="refs.html#ref-DOM2">DOM2</a>], section 1.2) with the
+ * exception that the interface is not
+ * <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#td-live">live</a>.
+ */
+ NodeList getEnclosureList(in SVGRect rect, in SVGElement referenceElement);
+
+ /**
+ * Returns true if the rendered content of the given element intersects the
+ * supplied rectangle. Each candidate graphics element is to
+ * be considered a match only if the same graphics element can be a
+ * <a href="interact.html#PointerEventsProperty">target of pointer events</a>
+ * as defined in <a>'pointer-events'</a> processing.
+ *
+ * @param element The element on which to perform the given test.
+ * @param rect The test rectangle. The values are in the <a>initial coordinate
+ * system</a> for the current <a>'svg'</a> element.
+ * @return True or false, depending on whether the given element intersects
+ * the supplied rectangle.
+ */
+ boolean checkIntersection(in SVGElement element, in SVGRect rect);
+
+ /**
+ * Returns true if the rendered content of the given element is entirely
+ * contained within the supplied rectangle. Each candidate graphics element is to
+ * be considered a match only if the same graphics element can be a
+ * <a href="interact.html#PointerEventsProperty">target of pointer events</a>
+ * as defined in <a>'pointer-events'</a> processing.
+ *
+ * @param element The element on which to perform the given test.
+ * @param rect The test rectangle. The values are in the <a>initial coordinate
+ * system</a> for the current <a>'svg'</a> element.
+ * @return True or false, depending on whether the given element is enclosed
+ * by the supplied rectangle.
+ */
+ boolean checkEnclosure(in SVGElement element, in SVGRect rect);
+
+ /**
+ * Unselects any selected objects, including any selections of text strings
+ * and type-in bars.
+ */
+ void deselectAll();
+
+ /**
+ * Creates an <a>SVGNumber</a> object outside of any document trees. The
+ * object is initialized to a value of zero.
+ *
+ * @return An <a>SVGNumber</a> object.
+ */
+ SVGNumber createSVGNumber();
+
+ /**
+ * Creates an <a>SVGLength</a> object outside of any document trees. The
+ * object is initialized to the value of 0 user units.
+ *
+ * @return An <a>SVGLength</a> object.
+ */
+ SVGLength createSVGLength();
+
+ /**
+ * Creates an <a>SVGAngle</a> object outside of any document trees. The
+ * object is initialized to the value 0 degrees (unitless).
+ *
+ * @return An <a>SVGAngle</a> object.
+ */
+ SVGAngle createSVGAngle();
+
+ /**
+ * Creates an <a>SVGPoint</a> object outside of any document trees. The
+ * object is initialized to the point (0,0) in the user coordinate system.
+ *
+ * @return An <a>SVGPoint</a> object.
+ */
+ SVGPoint createSVGPoint();
+
+ /**
+ * Creates an <a>SVGMatrix</a> object outside of any document trees. The
+ * object is initialized to the identity matrix.
+ *
+ * @return An <a>SVGMatrix</a> object.
+ */
+ SVGMatrix createSVGMatrix();
+
+ /**
+ * Creates an <a>SVGRect</a> object outside of any document trees. The
+ * object is initialized such that all values are set to 0 user units.
+ *
+ * @return An <a>SVGRect</a> object.
+ */
+ SVGRect createSVGRect();
+
+ /**
+ * Creates an <a>SVGTransform</a> object outside of any document trees. The
+ * object is initialized to an identity matrix transform
+ * (SVG_TRANSFORM_MATRIX).
+ *
+ * @return An <a>SVGTransform</a> object.
+ */
+ SVGTransform createSVGTransform();
+
+ /**
+ * <p xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+ * Creates an <a>SVGTransform</a> object outside of any document trees. The
+ * object is initialized to the given matrix transform (i.e.,
+ * SVG_TRANSFORM_MATRIX). The values from the parameter <var>matrix</var>
+ * are copied, the <var>matrix</var> parameter is not adopted as
+ * <a edit:format="expanded">SVGTransform::matrix</a>.
+ * </p>
+ *
+ * @param matrix The transform matrix.
+ * @return An <a>SVGTransform</a> object.
+ */
+ SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix);
+
+ /**
+ * Searches this SVG document fragment (i.e., the search is restricted to a
+ * subset of the document tree) for an Element whose id is given by
+ * <var>elementId</var>. If an Element is found, that Element is returned. If
+ * no such element exists, returns null. Behavior is not defined if more
+ * than one element has this id.
+ *
+ * @param elementId The unique id value for an element.
+ * @return The matching element.
+ */
+ Element getElementById(in DOMString elementId);
+ };
+
+ /**
+ * The <a>SVGSVGElement</a> interface corresponds to the <a>'g'</a> element.
+ */
+ interface SVGGElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {};
+
+ /**
+ * The <a>SVGDefsElement</a> interface corresponds to the <a>'defs'</a>
+ * element.
+ */
+ interface SVGDefsElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {};
+
+ /**
+ * The <a>SVGDescElement</a> interface corresponds to the <a>'desc'</a>
+ * element.
+ */
+ interface SVGDescElement :
+ SVGElement,
+ SVGLangSpace,
+ SVGStylable {};
+
+ /**
+ * The <a>SVGTitleElement</a> interface corresponds to the <a>'title'</a>
+ * element.
+ */
+ interface SVGTitleElement :
+ SVGElement,
+ SVGLangSpace,
+ SVGStylable {};
+
+ /**
+ * The <a>SVGSymbolElement</a> interface corresponds to the <a>'symbol'</a>
+ * element.
+ */
+ interface SVGSymbolElement :
+ SVGElement,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGFitToViewBox {};
+
+ /**
+ * The <a>SVGUseElement</a> interface corresponds to the <a>'use'</a> element.
+ */
+ interface SVGUseElement :
+ SVGElement,
+ SVGURIReference,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given <a>'use'</a> element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given <a>'use'</a> element.
+ */
+ readonly attribute SVGAnimatedLength y;
+
+ /**
+ * Corresponds to attribute <a>'width'</a> on the given <a>'use'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength width;
+
+ /**
+ * Corresponds to attribute <a>'height'</a> on the given <a>'use'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength height;
+
+ /**
+ * The root of the "instance tree". See description of
+ * <a>SVGElementInstance</a> for a discussion on the instance tree.
+ */
+ readonly attribute SVGElementInstance instanceRoot;
+
+ /**
+ * If the <a>'xlink:href'</a> attribute is being animated, contains the current
+ * animated root of the "instance tree". If the <a>'xlink:href'</a> attribute
+ * is not currently being animated, contains the same value as
+ * <a>instanceRoot</a>. See description of <a>SVGElementInstance</a>
+ * for a discussion on the instance tree.
+ */
+ readonly attribute SVGElementInstance animatedInstanceRoot;
+ };
+
+ /**
+ * <p>For each <a>'use'</a> element, the SVG DOM maintains a shadow tree (the
+ * "instance tree") of objects of type <a>SVGElementInstance</a>. An
+ * <a>SVGElementInstance</a> represents a single node in the instance tree.
+ * The root object in the instance tree is pointed to by the
+ * <a>SVGUseElement::instanceRoot</a> attribute on the
+ * <a>SVGUseElement</a> object for the corresponding <a>'use'</a> element.</p>
+ *
+ * <p>If the <a>'use'</a> element references a simple graphics element such as
+ * a <a>'rect'</a>, then there is only a single <a>SVGElementInstance</a>
+ * object, and the <a>correspondingElement</a> attribute on this
+ * <a>SVGElementInstance</a> object is the <a>SVGRectElement</a> that
+ * corresponds to the referenced <a>'rect'</a> element.</p>
+ *
+ * <p>If the <a>'use'</a> element references a <a>'g'</a> which contains two
+ * <a>'rect'</a> elements, then the instance tree contains three
+ * <a>SVGElementInstance</a> objects, a root <a>SVGElementInstance</a> object
+ * whose <a>correspondingElement</a> is the <a>SVGGElement</a> object for the
+ * <a>'g'</a>, and then two child <a>SVGElementInstance</a> objects, each of
+ * which has its <a>correspondingElement</a> that is an <a>SVGRectElement</a>
+ * object.</p>
+ *
+ * <p>If the referenced object is itself a <a>'use'</a>, or if there are
+ * <a>'use'</a> subelements within the referenced object, the instance tree
+ * will contain recursive expansion of the indirect references to form a
+ * complete tree. For example, if a <a>'use'</a> element references a
+ * <a>'g'</a>, and the <a>'g'</a> itself contains a <a>'use'</a>, and that
+ * <a>'use'</a> references a <a>'rect'</a>, then the instance tree for the
+ * original (outermost) <a>'use'</a> will consist of a hierarchy of
+ * <a>SVGElementInstance</a> objects, as follows:</p>
+ *
+<pre>SVGElementInstance #1 (parentNode=null, firstChild=#2, correspondingElement is the 'g')
+ SVGElementInstance #2 (parentNode=#1, firstChild=#3, correspondingElement is the other 'use')
+ SVGElementInstance #3 (parentNode=#2, firstChild=null, correspondingElement is the 'rect')
+</pre>
+ */
+ interface SVGElementInstance : events::EventTarget {
+
+ /**
+ * The corresponding element to which this object is an instance. For
+ * example, if a <a>'use'</a> element references a <a>'rect'</a> element,
+ * then an <a>SVGElementInstance</a> is created, with its
+ * <a>correspondingElement</a> being the <a>SVGRectElement</a> object
+ * for the <a>'rect'</a> element.
+ */
+ readonly attribute SVGElement correspondingElement;
+
+ /**
+ * The corresponding <a>'use'</a> element to which this
+ * <a>SVGElementInstance</a> object belongs. When <a>'use'</a> elements are
+ * nested (e.g., a <a>'use'</a> references another <a>'use'</a> which
+ * references a graphics element such as a <a>'rect'</a>), then the
+ * <a>correspondingUseElement</a> is the outermost <a>'use'</a> (i.e., the
+ * one which indirectly references the <a>'rect'</a>, not the one with the
+ * direct reference).
+ */
+ readonly attribute SVGUseElement correspondingUseElement;
+
+ /**
+ * The parent of this <a>SVGElementInstance</a> within the instance tree.
+ * All <a>SVGElementInstance</a> objects have a parent except the
+ * <a>SVGElementInstance</a> which corresponds to the element which was
+ * directly referenced by the <a>'use'</a> element, in which case
+ * <a>parentNode</a> is null.
+ */
+ readonly attribute SVGElementInstance parentNode;
+
+ /**
+ * An <a>SVGElementInstanceList</a> that contains all children of this
+ * <a>SVGElementInstance</a> within the instance tree. If there are no
+ * children, this is an <a>SVGElementInstanceList</a> containing no entries
+ * (i.e., an empty list).
+ */
+ readonly attribute SVGElementInstanceList childNodes;
+
+ /**
+ * The first child of this <a>SVGElementInstance</a> within the instance
+ * tree. If there is no such <a>SVGElementInstance</a>, this returns null.
+ */
+ readonly attribute SVGElementInstance firstChild;
+
+ /**
+ * The last child of this <a>SVGElementInstance</a> within the instance
+ * tree. If there is no such <a>SVGElementInstance</a>, this returns null.
+ */
+ readonly attribute SVGElementInstance lastChild;
+
+ /**
+ * The <a>SVGElementInstance</a> immediately preceding this
+ * <a>SVGElementInstance</a>. If there is no such <a>SVGElementInstance</a>,
+ * this returns null.
+ */
+ readonly attribute SVGElementInstance previousSibling;
+
+ /**
+ * The <a>SVGElementInstance</a> immediately following this
+ * <a>SVGElementInstance</a>. If there is no such <a>SVGElementInstance</a>,
+ * this returns null.
+ */
+ readonly attribute SVGElementInstance nextSibling;
+ };
+
+ /**
+ * The <a>SVGElementInstanceList</a> interface provides the abstraction of an
+ * ordered collection of <a>SVGElementInstance</a> objects, without defining
+ * or constraining how this collection is implemented.
+ */
+ interface SVGElementInstanceList {
+
+ /**
+ * The number of <a>SVGElementInstance</a> objects in the list. The range
+ * of valid child indices is 0 to <a>length</a>-1 inclusive.
+ */
+ readonly attribute unsigned long length;
+
+ /**
+ * Returns the <var>index</var>th item in the collection. If
+ * <var>index</var> is greater than or equal to the number of nodes in the
+ * list, this returns null.
+ *
+ * @param index Index into the collection.
+ * @return The <a>SVGElementInstance</a> object at the <var>index</var>th
+ * position in the <a>SVGElementInstanceList</a>, or null if that is not
+ * a valid index.
+ */
+ SVGElementInstance item(in unsigned long index);
+ };
+
+ /**
+ * The <a>SVGImageElement</a> interface corresponds to the <a>'image'</a>
+ * element.
+ */
+ interface SVGImageElement :
+ SVGElement,
+ SVGURIReference,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given <a>'image'</a> element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given <a>'image'</a> element.
+ */
+ readonly attribute SVGAnimatedLength y;
+
+ /**
+ * Corresponds to attribute <a>'width'</a> on the given <a>'image'</a> element.
+ */
+ readonly attribute SVGAnimatedLength width;
+
+ /**
+ * Corresponds to attribute <a>'height'</a> on the given <a>'image'</a> element.
+ */
+ readonly attribute SVGAnimatedLength height;
+
+ /**
+ * Corresponds to attribute <a>'preserveAspectRatio'</a> on the given <a>'image'</a> element.
+ */
+ readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
+ };
+
+ /**
+ * The <a>SVGSwitchElement</a> interface corresponds to the <a>'switch'</a>
+ * element.
+ */
+ interface SVGSwitchElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {};
+
+ /**
+ * <p>This interface provides access to an SVG document embedded by reference
+ * in another DOM-based language. The expectation is that the interface is
+ * implemented on DOM objects that allow such SVG document references, such as
+ * the DOM <a>Element</a> object that corresponds to an HTML
+ * <span class='element-name'>'object'</span> element. Such DOM objects are
+ * often also required to implement the <a>EmbeddingElement</a> defined in the
+ * Window specification [<a href="refs.html#ref-WINDOW">WINDOW</a>].</p>
+ *
+ * <p>This interface is deprecated and may be dropped from future versions of
+ * the SVG specification. Authors are suggested to use the
+ * <code>contentDocument</code> attribute on the <a>EmbeddingElement</a>
+ * interface to obtain a referenced SVG document, if that interface is
+ * available.</p>
+ */
+ interface GetSVGDocument {
+
+ /**
+ * <p> This method must return the <a>Document</a> object embedded content
+ * in an embedding element, or null if there is no document.</p>
+ *
+ * <p>Note that this is equivalent to fetching the value of the
+ * <code>EmbeddingElement::contentDocument</code> attribute of the embedding
+ * element, if the <a>EmbeddingElement</a> interface is also implemented.
+ * The author is advised to check that the document element of the returned
+ * <a>Document</a> is indeed an <a>'svg'</a> element instead of assuming
+ * that that will always be the case.</p>
+ *
+ * @return The <a>Document</a> object for the referenced document, or null
+ * if there is no document.
+ */
+ SVGDocument getSVGDocument();
+ };
+
+ /**
+ * The <a>SVGStyleElement</a> interface corresponds to the <a>'style element'</a>
+ * element.
+ */
+ interface SVGStyleElement : SVGElement,
+ SVGLangSpace {
+
+ /**
+ * Corresponds to attribute <a>'type'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString type setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'media'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString media setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'title attribute'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString title setraises(DOMException);
+ };
+
+ /**
+ * <p>Many of the SVG DOM interfaces refer to objects of class
+ * <a>SVGPoint</a>. An <a>SVGPoint</a> is an (x, y) coordinate pair. When
+ * used in matrix operations, an <a>SVGPoint</a> is treated as a vector of
+ * the form:</p>
+ *
+ * <pre>
+[x]
+[y]
+[1]</pre>
+ *
+ * <p>If an <a>SVGRect</a> object is designated as <em>read only</em>,
+ * then attempting to assign to one of its attributes will result in
+ * an exception being thrown.</p>
+ */
+ interface SVGPoint {
+
+ /**
+ * The x coordinate.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised if the
+ * <a>SVGPoint</a> object is read only, or corresponds to a DOM
+ * attribute that is read only.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The y coordinate.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised if the
+ * <a>SVGPoint</a> object is read only, or corresponds to a DOM
+ * attribute that is read only.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * <p>Applies a 2x3 matrix transformation on this <a>SVGPoint</a> object and
+ * returns a new, transformed <a>SVGPoint</a> object:</p>
+ *
+ * <pre>newpoint = matrix * thispoint</pre>
+ *
+ * @param matrix The matrix which is to be applied to this <a>SVGPoint</a>
+ * object.
+ * @return A new <a>SVGPoint</a> object.
+ */
+ SVGPoint matrixTransform(in SVGMatrix matrix);
+ };
+
+ /**
+ * <p>This interface defines a list of SVGPoint objects.</p>
+ *
+ * <p><a>SVGPointList</a> has the same attributes and methods as other
+ * SVGxxxList interfaces. Implementers may consider using a single base class
+ * to implement the various SVGxxxList interfaces.</p>
+ */
+ interface SVGPointList {
+
+ /**
+ * The number of items in the list.
+ */
+ readonly attribute unsigned long numberOfItems;
+
+ /**
+ * Clears all existing current items from the list, with the result being
+ * an empty list.
+ *
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ void clear() raises(DOMException);
+
+ /**
+ * Clears all existing current items from the list and re-initializes the
+ * list to hold the single item specified by the parameter. If the inserted
+ * item is already in a list, it is removed from its previous list before
+ * it is inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which should become the only member of the list.
+ * @return The item being inserted into the list.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ SVGPoint initialize(in SVGPoint newItem) raises(DOMException);
+
+ /**
+ * Returns the specified item from the list. The returned item is the
+ * item itself and not a copy. Any changes made to the item are
+ * immediately reflected in the list.
+ *
+ * @param index The index of the item from the list which is to be
+ * returned. The first item is number 0.
+ * @return The selected item.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGPoint getItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item into the list at the specified position. The first
+ * item is number 0. If <var>newItem</var> is already in a list, it is
+ * removed from its previous list before it is inserted into this list.
+ * The inserted item is the item itself and not a copy. If the item is
+ * already in this list, note that the index of the item to insert
+ * before is <i>before</i> the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item before which the new item is to be
+ * inserted. The first item is number 0. If the index is equal to 0,
+ * then the new item is inserted at the front of the list. If the index
+ * is greater than or equal to <a>numberOfItems</a>, then the new item is
+ * appended to the end of the list.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ SVGPoint insertItemBefore(in SVGPoint newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Replaces an existing item in the list with a new item. If
+ * <var>newItem</var> is already in a list, it is removed from its
+ * previous list before it is inserted into this list. The inserted item
+ * is the item itself and not a copy. If the item is already in this
+ * list, note that the index of the item to replace is <i>before</i>
+ * the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item which is to be replaced. The first
+ * item is number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGPoint replaceItem(in SVGPoint newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Removes an existing item from the list.
+ *
+ * @param index The index of the item which is to be removed. The first
+ * item is number 0.
+ * @return The removed item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGPoint removeItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item at the end of the list. If <var>newItem</var> is
+ * already in a list, it is removed from its previous list before it is
+ * inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which is to be inserted. The first item is
+ * number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ SVGPoint appendItem(in SVGPoint newItem) raises(DOMException);
+ };
+
+ /**
+ * <p>Many of SVG's graphics operations utilize 2x3 matrices of the form:</p>
+ *
+ * <pre>
+[a c e]
+[b d f]</pre>
+ *
+ * <p>which, when expanded into a 3x3 matrix for the purposes of matrix
+ * arithmetic, become:</p>
+ *
+ * <pre>
+[a c e]
+[b d f]
+[0 0 1]</pre>
+ */
+ interface SVGMatrix {
+
+ /**
+ * The <var>a</var> component of the matrix.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float a setraises(DOMException);
+
+ /**
+ * The <var>b</var> component of the matrix.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float b setraises(DOMException);
+
+ /**
+ * The <var>c</var> component of the matrix.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float c setraises(DOMException);
+
+ /**
+ * The <var>d</var> component of the matrix.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float d setraises(DOMException);
+
+ /**
+ * The <var>e</var> component of the matrix.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float e setraises(DOMException);
+
+ /**
+ * The <var>f</var> component of the matrix.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float f setraises(DOMException);
+
+ /**
+ * Performs matrix multiplication. This matrix is post-multiplied by
+ * another matrix, returning the resulting new matrix.
+ *
+ * @param secondMatrix The matrix which is post-multiplied to this matrix.
+ * @return The resulting matrix.
+ */
+ SVGMatrix multiply(in SVGMatrix secondMatrix);
+
+ /**
+ * Returns the inverse matrix.
+ *
+ * @return The inverse matrix.
+ * @raises SVGException(SVG_MATRIX_NOT_INVERTABLE) Raised if this matrix is
+ * not invertable.
+ */
+ SVGMatrix inverse() raises(SVGException);
+
+ /**
+ * Post-multiplies a translation transformation on the current matrix and
+ * returns the resulting matrix.
+ *
+ * @param x The distance to translate along the x-axis.
+ * @param y The distance to translate along the y-axis.
+ * @return The resulting matrix.
+ */
+ SVGMatrix translate(in float x, in float y);
+
+ /**
+ * Post-multiplies a uniform scale transformation on the current matrix
+ * and returns the resulting matrix.
+ *
+ * @param scaleFactor Scale factor in both X and Y.
+ * @return The resulting matrix.
+ */
+ SVGMatrix scale(in float scaleFactor);
+
+ /**
+ * Post-multiplies a non-uniform scale transformation on the current matrix
+ * and returns the resulting matrix.
+ *
+ * @param scaleFactorX Scale factor in X.
+ * @param scaleFactorY Scale factor in Y.
+ * @return The resulting matrix.
+ */
+ SVGMatrix scaleNonUniform(in float scaleFactorX, in float scaleFactorY);
+
+ /**
+ * Post-multiplies a rotation transformation on the current matrix and
+ * returns the resulting matrix.
+ *
+ * @param angle Rotation angle.
+ * @return The resulting matrix.
+ */
+ SVGMatrix rotate(in float angle);
+
+ /**
+ * Post-multiplies a rotation transformation on the current matrix and
+ * returns the resulting matrix. The rotation angle is determined by taking
+ * (+/-) atan(y/x). The direction of the vector (x, y) determines whether
+ * the positive or negative angle value is used.
+ *
+ * @param x The X coordinate of the vector (x,y). Must not be zero.
+ * @param y The Y coordinate of the vector (x,y). Must not be zero.
+ * @return The resulting matrix.
+ * @raises SVGException(SVG_INVALID_VALUE_ERR) Raised if one of the
+ * parameters has an invalid value.
+ */
+ SVGMatrix rotateFromVector(in float x, in float y) raises(SVGException);
+
+ /**
+ * Post-multiplies the transformation [-1 0 0 1 0 0] and returns the
+ * resulting matrix.
+ *
+ * @return The resulting matrix.
+ */
+ SVGMatrix flipX();
+
+ /**
+ * Post-multiplies the transformation [1 0 0 -1 0 0] and returns the
+ * resulting matrix.
+ *
+ * @return The resulting matrix.
+ */
+ SVGMatrix flipY();
+
+ /**
+ * Post-multiplies a skewX transformation on the current matrix and
+ * returns the resulting matrix.
+ *
+ * @param angle Skew angle.
+ * @return The resulting matrix.
+ */
+ SVGMatrix skewX(in float angle);
+
+ /**
+ * Post-multiplies a skewY transformation on the current matrix and
+ * returns the resulting matrix.
+ *
+ * @param angle Skew angle.
+ * @return The resulting matrix.
+ */
+ SVGMatrix skewY(in float angle);
+ };
+
+ /**
+ * <a>SVGTransform</a> is the interface for one of the component
+ * transformations within an <a>SVGTransformList</a>; thus, an
+ * <a>SVGTransform</a> object corresponds to a single component (e.g.,
+ * <span class='attr-value'>'scale(…)'</span> or
+ * <span class='attr-value'>'matrix(…)'</span>) within a <a>'transform'</a>
+ * attribute specification.
+ */
+ interface SVGTransform {
+
+ /**
+ * The unit 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.
+ *
+ * @defgroup Transform Types
+ */
+ const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
+
+ /**
+ * A <span class='attr-value'>'matrix(…)'</span> transformation.
+ *
+ * @defgroup Transform Types
+ */
+ const unsigned short SVG_TRANSFORM_MATRIX = 1;
+
+ /**
+ * A <span class='attr-value'>'translate(…)'</span> transformation.
+ *
+ * @defgroup Transform Types
+ */
+ const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
+
+ /**
+ * A <span class='attr-value'>'scale(…)'</span> transformation.
+ *
+ * @defgroup Transform Types
+ */
+ const unsigned short SVG_TRANSFORM_SCALE = 3;
+
+ /**
+ * A <span class='attr-value'>'rotate(…)'</span> transformation.
+ *
+ * @defgroup Transform Types
+ */
+ const unsigned short SVG_TRANSFORM_ROTATE = 4;
+
+ /**
+ * A <span class='attr-value'>'skewX(…)'</span> transformation.
+ *
+ * @defgroup Transform Types
+ */
+ const unsigned short SVG_TRANSFORM_SKEWX = 5;
+
+ /**
+ * A <span class='attr-value'>'skewY(…)'</span> transformation.
+ *
+ * @defgroup Transform Types
+ */
+ const unsigned short SVG_TRANSFORM_SKEWY = 6;
+
+ /**
+ * The type of the value as specified by one of the SVG_TRANSFORM_*
+ * constants defined on this interface.
+ */
+ readonly attribute unsigned short type;
+
+ /**
+ * <p>The matrix that represents this transformation. The matrix
+ * object is live, meaning that any changes made to the SVGTransform
+ * object are immediately reflected in the matrix object and vice
+ * versa. In case the matrix object is changed directly (i.e.,
+ * without using the methods on the SVGTransform interface itself)
+ * then the type of the SVGTransform changes to SVG_TRANSFORM_MATRIX.
+ * </p>
+ * <ul>
+ * <li>For SVG_TRANSFORM_MATRIX, the matrix contains the
+ * <a>SVGMatrix::a</a>, <a>SVGMatrix::b</a>, <a>SVGMatrix::c</a>, <a>SVGMatrix::d</a>, <a>SVGMatrix::e</a>,
+ * <a>SVGMatrix::f</a> values supplied by the user.</li>
+ * <li>For SVG_TRANSFORM_TRANSLATE, <a>SVGMatrix::e</a> and <a>SVGMatrix::f</a>
+ * represent the translation amounts (<a>SVGMatrix::a</a>=1, <a>SVGMatrix::b</a>=0,
+ * <a>SVGMatrix::c</a>=0 and <a>SVGMatrix::d</a>=1).</li>
+ * <li>For SVG_TRANSFORM_SCALE, <a>SVGMatrix::a</a> and <a>SVGMatrix::d</a>
+ * represent the scale amounts (<a>SVGMatrix::b</a>=0, <a>SVGMatrix::c</a>=0,
+ * <a>SVGMatrix::e</a>=0 and <a>SVGMatrix::f</a>=0).</li>
+ * <li>For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY,
+ * <a>SVGMatrix::a</a>, <a>SVGMatrix::b</a>, <a>SVGMatrix::c</a> and <a>SVGMatrix::d</a>
+ * represent the matrix which will result in the given skew
+ * (<a>SVGMatrix::e</a>=0 and <a>SVGMatrix::f</a>=0).</li>
+ * <li>For SVG_TRANSFORM_ROTATE,
+ * <a>SVGMatrix::a</a>, <a>SVGMatrix::b</a>, <a>SVGMatrix::c</a>, <a>SVGMatrix::d</a>,
+ * <a>SVGMatrix::e</a> and <a>SVGMatrix::f</a> together represent the matrix
+ * which will result in the given rotation. When the rotation is around
+ * the center point (0, 0), <a>SVGMatrix::e</a> and <a>SVGMatrix::f</a> will be zero.</li>
+ * </ul>
+ */
+ readonly attribute SVGMatrix matrix;
+
+ /**
+ * <p>A convenience attribute for SVG_TRANSFORM_ROTATE,
+ * SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds
+ * the angle that was specified.</p>
+ *
+ * <p>For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and
+ * SVG_TRANSFORM_SCALE, <a>angle</a> will be zero.</p>
+ */
+ readonly attribute float angle;
+
+ /**
+ * <p xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+ * Sets the transform type to SVG_TRANSFORM_MATRIX, with parameter
+ * <var>matrix</var> defining the new transformation. The values
+ * from the parameter <var>matrix</var> are copied, the <var>matrix</var>
+ * parameter does not replace <a edit:format="expanded">SVGTransform::matrix</a>.
+ * </p>
+ *
+ * @param matrix The new matrix for the transformation.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setMatrix(in SVGMatrix matrix) raises(DOMException);
+
+ /**
+ * Sets the transform type to SVG_TRANSFORM_TRANSLATE, with parameters
+ * <var>tx</var> and <var>ty</var> defining the translation amounts.
+ *
+ * @param tx The translation amount in X.
+ * @param ty The translation amount in Y.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setTranslate(in float tx, in float ty) raises(DOMException);
+
+ /**
+ * Sets the transform type to SVG_TRANSFORM_SCALE, with parameters
+ * <var>sx</var> and <var>sy</var> defining the scale amounts.
+ *
+ * @param sx The scale amount in X.
+ * @param sy The scale amount in Y.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setScale(in float sx, in float sy) raises(DOMException);
+
+ /**
+ * Sets the transform type to SVG_TRANSFORM_ROTATE, with parameter
+ * <var>angle</var> defining the rotation angle and parameters
+ * <var>cx</var> and <var>cy</var> defining the optional center of rotation.
+ *
+ * @param angle The rotation angle.
+ * @param cx The x coordinate of center of rotation.
+ * @param cy The y coordinate of center of rotation.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setRotate(in float angle, in float cx, in float cy) raises(DOMException);
+
+ /**
+ * Sets the transform type to SVG_TRANSFORM_SKEWX, with parameter
+ * <var>angle</var> defining the amount of skew.
+ *
+ * @param angle The skew angle.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setSkewX(in float angle) raises(DOMException);
+
+ /**
+ * Sets the transform type to SVG_TRANSFORM_SKEWY, with parameter
+ * <var>angle</var> defining the amount of skew.
+ *
+ * @param angle The skew angle.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setSkewY(in float angle) raises(DOMException);
+ };
+
+ /**
+ * <p>This interface defines a list of SVGTransform objects.</p>
+ *
+ * <p>The <a>SVGTransformList</a> and <a>SVGTransform</a> interfaces correspond
+ * to the various attributes which specify a set of transformations, such as
+ * the <a>'transform'</a> attribute which is available for many of SVG's elements.</p>
+ *
+ * <p><a>SVGTransformList</a> has the same attributes and methods as other
+ * SVGxxxList interfaces. Implementers may consider using a single base class
+ * to implement the various SVGxxxList interfaces.</p>
+ *
+ * <p id="ReadOnlyTransformList">An <a>SVGTransformList</a> object can be designated as <em>read only</em>,
+ * which means that attempts to modify the object will result in an exception
+ * being thrown, as described below.</p>
+ */
+ interface SVGTransformList {
+
+ /**
+ * The number of items in the list.
+ */
+ readonly attribute unsigned long numberOfItems;
+
+ /**
+ * Clears all existing current items from the list, with the result being
+ * an empty list.
+ *
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyTransformList">read only</a>.
+ */
+ void clear() raises(DOMException);
+
+ /**
+ * Clears all existing current items from the list and re-initializes the
+ * list to hold the single item specified by the parameter. If the inserted
+ * item is already in a list, it is removed from its previous list before
+ * it is inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which should become the only member of the list.
+ * @return The item being inserted into the list.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyTransformList">read only</a>.
+ */
+ SVGTransform initialize(in SVGTransform newItem) raises(DOMException);
+
+ /**
+ * Returns the specified item from the list. The returned item is the
+ * item itself and not a copy. Any changes made to the item are
+ * immediately reflected in the list.
+ *
+ * @param index The index of the item from the list which is to be
+ * returned. The first item is number 0.
+ * @return The selected item.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGTransform getItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item into the list at the specified position. The first
+ * item is number 0. If <var>newItem</var> is already in a list, it is
+ * removed from its previous list before it is inserted into this list.
+ * The inserted item is the item itself and not a copy. If the item is
+ * already in this list, note that the index of the item to insert
+ * before is <i>before</i> the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item before which the new item is to be
+ * inserted. The first item is number 0. If the index is equal to 0,
+ * then the new item is inserted at the front of the list. If the index
+ * is greater than or equal to <a>numberOfItems</a>, then the new item is
+ * appended to the end of the list.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyTransformList">read only</a>.
+ */
+ SVGTransform insertItemBefore(in SVGTransform newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Replaces an existing item in the list with a new item. If
+ * <var>newItem</var> is already in a list, it is removed from its
+ * previous list before it is inserted into this list. The inserted item
+ * is the item itself and not a copy. If the item is already in this
+ * list, note that the index of the item to replace is <i>before</i>
+ * the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item which is to be replaced. The first
+ * item is number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyTransformList">read only</a>.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGTransform replaceItem(in SVGTransform newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Removes an existing item from the list.
+ *
+ * @param index The index of the item which is to be removed. The first
+ * item is number 0.
+ * @return The removed item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyTransformList">read only</a>.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGTransform removeItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item at the end of the list. If <var>newItem</var> is
+ * already in a list, it is removed from its previous list before it is
+ * inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which is to be inserted. The first item is
+ * number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyTransformList">read only</a>.
+ */
+ SVGTransform appendItem(in SVGTransform newItem) raises(DOMException);
+
+ /**
+ * <p xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+ * Creates an <a>SVGTransform</a> object which is initialized to transform
+ * of type SVG_TRANSFORM_MATRIX and whose values are the given matrix.
+ * The values from the parameter <var>matrix</var> are copied, the
+ * <var>matrix</var> parameter is not adopted as
+ * <a edit:format="expanded">SVGTransform::matrix</a>.
+ * </p>
+ *
+ * @param matrix The matrix which defines the transformation.
+ * @return The returned <a>SVGTransform</a> object.
+ */
+ SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix);
+
+ /**
+ * Consolidates the list of separate <a>SVGTransform</a> objects by
+ * multiplying the equivalent transformation matrices together to result
+ * in a list consisting of a single <a>SVGTransform</a> object of type
+ * SVG_TRANSFORM_MATRIX. The consolidation operation creates new
+ * SVGTransform object as the first and only item in the list. The
+ * returned item is the item itself and not a copy. Any changes made
+ * to the item are immediately reflected in the list.
+ *
+ * @return The resulting <a>SVGTransform</a> object which becomes single
+ * item in the list. If the list was empty, then a value of null is
+ * returned.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyTransformList">read only</a>.
+ */
+ SVGTransform consolidate() raises(DOMException);
+ };
+
+ /**
+ * Used for the various attributes which specify a set of transformations,
+ * such as the <a>'transform'</a> attribute which is available for many of
+ * SVG's elements, and which can be animated.
+ */
+ interface SVGAnimatedTransformList {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ */
+ readonly attribute SVGTransformList baseVal;
+
+ /**
+ * A <a href="#ReadOnlyTransformList">read only</a> <a>SVGTransformList</a> representing the current animated value of
+ * the given attribute. If the given attribute is not currently being
+ * animated, then the <a>SVGTransformList</a> will have the same contents
+ * as <a>baseVal</a>. The object referenced by <a>animVal</a> will always
+ * be distinct from the one referenced by <a>baseVal</a>, even when
+ * the attribute is not animated.
+ */
+ readonly attribute SVGTransformList animVal;
+ };
+
+ /**
+ * The <a>SVGPreserveAspectRatio</a> interface corresponds to the
+ * <a>'preserveAspectRatio'</a> attribute, which is available for some of
+ * SVG's elements.
+ *
+ * <p id="ReadOnlyPreserveAspectRatio">An <a>SVGPreserveAspectRatio</a> object can be designated as <em>read only</em>,
+ * which means that attempts to modify the object will result in an exception
+ * being thrown, as described below.</p>
+ */
+ interface SVGPreserveAspectRatio {
+
+ /**
+ * The enumeration was set to a value that 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.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'none'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'xMinYMin'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'xMidYMin'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'xMaxYMin'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'XMinYMid'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'xMidYMid'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'xMaxYMid'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'xMinYMax'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'xMidYMax'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'xMaxYMax'</span> for attribute
+ * <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Alignment Types
+ */
+ const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;
+
+ /**
+ * The enumeration was set to a value that 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.
+ *
+ * @defgroup Meet-or-slice Types
+ */
+ const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'meet'</span> for
+ * attribute <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Meet-or-slice Types
+ */
+ const unsigned short SVG_MEETORSLICE_MEET = 1;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'slice'</span> for
+ * attribute <a>'preserveAspectRatio'</a>.
+ *
+ * @defgroup Meet-or-slice Types
+ */
+ const unsigned short SVG_MEETORSLICE_SLICE = 2;
+
+ /**
+ * The type of the alignment value as specified by one of the
+ * SVG_PRESERVEASPECTRATIO_* constants defined on this interface.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the object
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyPreserveAspectRatio">read only</a>.
+ *
+ * @raises SVGException(SVG_INVALID_VALUE_ERR) Raised if one of the
+ * parameters has an invalid value.
+ */
+ attribute unsigned short align setraises(DOMException);
+
+ /**
+ * The type of the meet-or-slice value as specified by one of the
+ * SVG_MEETORSLICE_* constants defined on this interface.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the object
+ * corresponds to a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a> or when the object itself is
+ * <a href="#ReadOnlyPreserveAspectRatio">read only</a>.
+ *
+ * @raises SVGException(SVG_INVALID_VALUE_ERR) Raised if one of the
+ * parameters has an invalid value.
+ */
+ attribute unsigned short meetOrSlice setraises(DOMException);
+ };
+
+ /**
+ * Used for attributes of type <a>SVGPreserveAspectRatio</a> which can be
+ * animated.
+ */
+ interface SVGAnimatedPreserveAspectRatio {
+
+ /**
+ * The base value of the given attribute before applying any animations.
+ */
+ readonly attribute SVGPreserveAspectRatio baseVal;
+
+ /**
+ * A <a href="#ReadOnlyPreserveAspectRatio">read only</a> <a>SVGPreserveAspectRatio</a> representing the current animated value of
+ * the given attribute. If the given attribute is not currently being
+ * animated, then the <a>SVGPreserveAspectRatio</a> will have the same contents
+ * as <a>baseVal</a>. The object referenced by <a>animVal</a> will always
+ * be distinct from the one referenced by <a>baseVal</a>, even when
+ * the attribute is not animated.
+ */
+ readonly attribute SVGPreserveAspectRatio animVal;
+ };
+
+ /**
+ * The <a>SVGPathSeg</a> interface is a base interface that corresponds to a
+ * single command within a path data specification.
+ */
+ interface SVGPathSeg {
+
+ /**
+ * The unit 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.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_UNKNOWN = 0;
+
+ /**
+ * Corresponds to a "closepath" (z) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_CLOSEPATH = 1;
+
+ /**
+ * Corresponds to a "absolute moveto" (M) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_MOVETO_ABS = 2;
+
+ /**
+ * Corresponds to a "relative moveto" (m) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_MOVETO_REL = 3;
+
+ /**
+ * Corresponds to a "absolute lineto" (L) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_LINETO_ABS = 4;
+
+ /**
+ * Corresponds to a "relative lineto" (l) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_LINETO_REL = 5;
+
+ /**
+ * Corresponds to a "absolute cubic Bézier curveto" (C) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_CURVETO_CUBIC_ABS = 6;
+
+ /**
+ * Corresponds to a "relative cubic Bézier curveto" (c) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_CURVETO_CUBIC_REL = 7;
+
+ /**
+ * Corresponds to a "absolute quadratic Bézier curveto" (Q) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_CURVETO_QUADRATIC_ABS = 8;
+
+ /**
+ * Corresponds to a "relative quadratic Bézier curveto" (q) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_CURVETO_QUADRATIC_REL = 9;
+
+ /**
+ * Corresponds to a "absolute arcto" (A) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_ARC_ABS = 10;
+
+ /**
+ * Corresponds to a "relative arcto" (a) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_ARC_REL = 11;
+
+ /**
+ * Corresponds to a "absolute horizontal lineto" (H) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_LINETO_HORIZONTAL_ABS = 12;
+
+ /**
+ * Corresponds to a "relative horizontal lineto" (h) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_LINETO_HORIZONTAL_REL = 13;
+
+ /**
+ * Corresponds to a "absolute vertical lineto" (V) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_LINETO_VERTICAL_ABS = 14;
+
+ /**
+ * Corresponds to a "relative vertical lineto" (v) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_LINETO_VERTICAL_REL = 15;
+
+ /**
+ * Corresponds to a "absolute smooth cubic curveto" (S) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16;
+
+ /**
+ * Corresponds to a "relative smooth cubic curveto" (s) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;
+
+ /**
+ * Corresponds to a "absolute smooth quadratic curveto" (T) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;
+
+ /**
+ * Corresponds to a "relative smooth quadratic curveto" (t) path data command.
+ *
+ * @defgroup Path Segment Types
+ */
+ const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;
+
+ /**
+ * The type of the path segment as specified by one of the constants
+ * defined on this interface.
+ */
+ readonly attribute unsigned short pathSegType;
+
+ /**
+ * The type of the path segment, specified by the corresponding one
+ * character command name.
+ */
+ readonly attribute DOMString pathSegTypeAsLetter;
+ };
+
+ /**
+ * The <a>SVGPathSegClosePath</a> interface corresponds to a
+ * "closepath" (z) path data command.
+ */
+ interface SVGPathSegClosePath : SVGPathSeg {
+ };
+
+ /**
+ * The <a>SVGPathSegMovetoAbs</a> interface corresponds to an
+ * "absolute moveto" (M) path data command.
+ */
+ interface SVGPathSegMovetoAbs : SVGPathSeg {
+
+ /**
+ * The absolute X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegMovetoRel</a> interface corresponds to a
+ * "relative moveto" (m) path data command.
+ */
+ interface SVGPathSegMovetoRel : SVGPathSeg {
+
+ /**
+ * The relative X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegLinetoAbs</a> interface corresponds to an
+ * "absolute lineto" (L) path data command.
+ */
+ interface SVGPathSegLinetoAbs : SVGPathSeg {
+
+ /**
+ * The absolute X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegLinetoRel</a> interface corresponds to a
+ * "relative lineto" (l) path data command.
+ */
+ interface SVGPathSegLinetoRel : SVGPathSeg {
+
+ /**
+ * The relative X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegCurvetoCubicAbs</a> interface corresponds to an
+ * "absolute cubic Bézier curveto" (C) path data command.
+ */
+ interface SVGPathSegCurvetoCubicAbs : SVGPathSeg {
+
+ /**
+ * The absolute X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * The absolute X coordinate for the first control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x1 setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the first control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y1 setraises(DOMException);
+
+ /**
+ * The absolute X coordinate for the second control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x2 setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the second control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y2 setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegCurvetoCubicRel</a> interface corresponds to a
+ * "relative cubic Bézier curveto" (c) path data command.
+ */
+ interface SVGPathSegCurvetoCubicRel : SVGPathSeg {
+
+ /**
+ * The relative X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * The relative X coordinate for the first control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x1 setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the first control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y1 setraises(DOMException);
+
+ /**
+ * The relative X coordinate for the second control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x2 setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the second control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y2 setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegCurvetoQuadraticAbs</a> interface corresponds to an
+ * "absolute quadratic Bézier curveto" (Q) path data command.
+ */
+ interface SVGPathSegCurvetoQuadraticAbs : SVGPathSeg {
+
+ /**
+ * The absolute X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * The absolute X coordinate for the first control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x1 setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the first control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y1 setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegCurvetoQuadraticRel</a> interface corresponds to a
+ * "relative quadratic Bézier curveto" (q) path data command.
+ */
+ interface SVGPathSegCurvetoQuadraticRel : SVGPathSeg {
+
+ /**
+ * The relative X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * The relative X coordinate for the first control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x1 setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the first control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y1 setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegArcAbs</a> interface corresponds to an
+ * "absolute arcto" (A) path data command.
+ */
+ interface SVGPathSegArcAbs : SVGPathSeg {
+
+ /**
+ * The absolute X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * The x-axis radius for the ellipse (i.e., r1).
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float r1 setraises(DOMException);
+
+ /**
+ * The y-axis radius for the ellipse (i.e., r2).
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float r2 setraises(DOMException);
+
+ /**
+ * The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float angle setraises(DOMException);
+
+ /**
+ * The value of the large-arc-flag parameter.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute boolean largeArcFlag setraises(DOMException);
+
+ /**
+ * The value of the sweep-flag parameter.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute boolean sweepFlag setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegArcRel</a> interface corresponds to a
+ * "relative arcto" (a) path data command.
+ */
+ interface SVGPathSegArcRel : SVGPathSeg {
+
+ /**
+ * The relative X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * The x-axis radius for the ellipse (i.e., r1).
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float r1 setraises(DOMException);
+
+ /**
+ * The y-axis radius for the ellipse (i.e., r2).
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float r2 setraises(DOMException);
+
+ /**
+ * The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float angle setraises(DOMException);
+
+ /**
+ * The value of the large-arc-flag parameter.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute boolean largeArcFlag setraises(DOMException);
+
+ /**
+ * The value of the sweep-flag parameter.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute boolean sweepFlag setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegLinetoHorizontalAbs</a> interface corresponds to an
+ * "absolute horizontal lineto" (H) path data command.
+ */
+ interface SVGPathSegLinetoHorizontalAbs : SVGPathSeg {
+
+ /**
+ * The absolute X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegLinetoHorizontalRel</a> interface corresponds to a
+ * "relative horizontal lineto" (h) path data command.
+ */
+ interface SVGPathSegLinetoHorizontalRel : SVGPathSeg {
+
+ /**
+ * The relative X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegLinetoVerticalAbs</a> interface corresponds to an
+ * "absolute vertical lineto" (V) path data command.
+ */
+ interface SVGPathSegLinetoVerticalAbs : SVGPathSeg {
+
+ /**
+ * The absolute Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegLinetoVerticalRel</a> interface corresponds to a
+ * "relative vertical lineto" (v) path data command.
+ */
+ interface SVGPathSegLinetoVerticalRel : SVGPathSeg {
+
+ /**
+ * The relative Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegCurvetoCubicSmoothAbs</a> interface corresponds to an
+ * "absolute smooth cubic curveto" (S) path data command.
+ */
+ interface SVGPathSegCurvetoCubicSmoothAbs : SVGPathSeg {
+
+ /**
+ * The absolute X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * The absolute X coordinate for the second control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x2 setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the second control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y2 setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegCurvetoCubicSmoothRel</a> interface corresponds to a
+ * "relative smooth cubic curveto" (s) path data command.
+ */
+ interface SVGPathSegCurvetoCubicSmoothRel : SVGPathSeg {
+
+ /**
+ * The relative X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * The relative X coordinate for the second control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x2 setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the second control point.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y2 setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegCurvetoQuadraticSmoothAbs</a> interface corresponds to an
+ * "absolute smooth cubic curveto" (T) path data command.
+ */
+ interface SVGPathSegCurvetoQuadraticSmoothAbs : SVGPathSeg {
+
+ /**
+ * The absolute X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The absolute Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGPathSegCurvetoQuadraticSmoothRel</a> interface corresponds to a
+ * "relative smooth cubic curveto" (t) path data command.
+ */
+ interface SVGPathSegCurvetoQuadraticSmoothRel : SVGPathSeg {
+
+ /**
+ * The relative X coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * The relative Y coordinate for the end point of this path segment.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+ };
+
+ /**
+ * <p>This interface defines a list of SVGPathSeg objects.</p>
+ *
+ * <p><a>SVGPathSegList</a> has the same attributes and methods as other
+ * SVGxxxList interfaces. Implementers may consider using a single base class
+ * to implement the various SVGxxxList interfaces.</p>
+ */
+ interface SVGPathSegList {
+
+ /**
+ * The number of items in the list.
+ */
+ readonly attribute unsigned long numberOfItems;
+
+ /**
+ * Clears all existing current items from the list, with the result being
+ * an empty list.
+ *
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ void clear() raises(DOMException);
+
+ /**
+ * Clears all existing current items from the list and re-initializes the
+ * list to hold the single item specified by the parameter. If the inserted
+ * item is already in a list, it is removed from its previous list before
+ * it is inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which should become the only member of the list.
+ * @return The item being inserted into the list.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ SVGPathSeg initialize(in SVGPathSeg newItem) raises(DOMException);
+
+ /**
+ * Returns the specified item from the list. The returned item is the
+ * item itself and not a copy. Any changes made to the item are
+ * immediately reflected in the list.
+ *
+ * @param index The index of the item from the list which is to be
+ * returned. The first item is number 0.
+ * @return The selected item.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGPathSeg getItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item into the list at the specified position. The first
+ * item is number 0. If <var>newItem</var> is already in a list, it is
+ * removed from its previous list before it is inserted into this list.
+ * The inserted item is the item itself and not a copy. If the item is
+ * already in this list, note that the index of the item to insert
+ * before is <i>before</i> the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item before which the new item is to be
+ * inserted. The first item is number 0. If the index is equal to 0,
+ * then the new item is inserted at the front of the list. If the index
+ * is greater than or equal to <a>numberOfItems</a>, then the new item is
+ * appended to the end of the list.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ SVGPathSeg insertItemBefore(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Replaces an existing item in the list with a new item. If
+ * <var>newItem</var> is already in a list, it is removed from its
+ * previous list before it is inserted into this list. The inserted item
+ * is the item itself and not a copy. If the item is already in this
+ * list, note that the index of the item to replace is <i>before</i>
+ * the removal of the item.
+ *
+ * @param newItem The item which is to be inserted into the list.
+ * @param index The index of the item which is to be replaced. The first
+ * item is number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGPathSeg replaceItem(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
+
+ /**
+ * Removes an existing item from the list.
+ *
+ * @param index The index of the item which is to be removed. The first
+ * item is number 0.
+ * @return The removed item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the index number is
+ * greater than or equal to <a>numberOfItems</a>.
+ */
+ SVGPathSeg removeItem(in unsigned long index) raises(DOMException);
+
+ /**
+ * Inserts a new item at the end of the list. If <var>newItem</var> is
+ * already in a list, it is removed from its previous list before it is
+ * inserted into this list. The inserted item is the item itself and
+ * not a copy.
+ *
+ * @param newItem The item which is to be inserted. The first item is
+ * number 0.
+ * @return The inserted item.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised when the list
+ * cannot be modified.
+ */
+ SVGPathSeg appendItem(in SVGPathSeg newItem) raises(DOMException);
+ };
+
+ /**
+ * <p>The SVGAnimatedPathData interface supports elements which have a <span class='attr-name'>'d'</span>
+ * attribute which holds SVG path data, and supports the ability to animate
+ * that attribute.</p>
+ *
+ * <p>The <a>SVGAnimatedPathData</a> interface provides two lists to access and
+ * modify the base (i.e., static) contents of the <span class='attr-name'>'d'</span> attribute:</p>
+ *
+ * <ul>
+ * <li>DOM attribute <a>pathSegList</a> provides access to the static/base
+ * contents of the <span class='attr-name'>'d'</span> attribute in a form which matches one-for-one
+ * with SVG's syntax.</li>
+ *
+ * <li>DOM attribute <a>normalizedPathSegList</a> provides normalized access
+ * to the static/base contents of the <span class='attr-name'>'d'</span> attribute where all path
+ * data commands are expressed in terms of the following subset of
+ * <a>SVGPathSeg</a> types:
+ * SVG_PATHSEG_MOVETO_ABS (M),
+ * SVG_PATHSEG_LINETO_ABS (L),
+ * SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and
+ * SVG_PATHSEG_CLOSEPATH (z).</li>
+ * </ul>
+ *
+ * <p>and two lists to access the current animated values of the <span class='attr-name'>'d'</span>
+ * attribute:</p>
+ *
+ * <ul>
+ * <li>DOM attribute <a>animatedPathSegList</a> provides access to the current
+ * animated contents of the <span class='attr-name'>'d'</span> attribute in a form which matches
+ * one-for-one with SVG's syntax.</li>
+ *
+ * <li>DOM attribute <a>animatedNormalizedPathSegList</a> provides
+ * normalized access to the current animated contents of the <span class='attr-name'>'d'</span>
+ * attribute where all path data commands are expressed in terms of the
+ * following subset of <a>SVGPathSeg</a> types:
+ * SVG_PATHSEG_MOVETO_ABS (M),
+ * SVG_PATHSEG_LINETO_ABS (L),
+ * SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and
+ * SVG_PATHSEG_CLOSEPATH (z).</li>
+ * </ul>
+ *
+ * <p>Each of the two lists are always kept synchronized. Modifications to one
+ * list will immediately cause the corresponding list to be modified.
+ * Modifications to <a>normalizedPathSegList</a> might cause entries in
+ * <a>pathSegList</a> to be broken into a set of normalized path segments.</p>
+ *
+ * <p>Additionally, the <a>'path/d'</a> attribute on the <a>'path'</a> element
+ * accessed via the XML DOM (e.g., using the <code>getAttribute()</code>
+ * method call) will reflect any changes made to <a>pathSegList</a> or
+ * <a>normalizedPathSegList</a>.</p>
+ */
+ interface SVGAnimatedPathData {
+
+ /**
+ * Provides access to the base (i.e., static) contents of the <span class='attr-name'>'d'</span>
+ * attribute in a form which matches one-for-one with SVG's syntax.
+ * Thus, if the <span class='attr-name'>'d'</span> attribute has an "absolute moveto (M)" and an
+ * "absolute arcto (A)" command, then <a>pathSegList</a> will have two
+ * entries: a SVG_PATHSEG_MOVETO_ABS and a SVG_PATHSEG_ARC_ABS.
+ */
+ readonly attribute SVGPathSegList pathSegList;
+
+ /**
+ * <p>Provides access to the base (i.e., static) contents of the
+ * <span class='attr-name'>'d'</span> attribute in a form where all path data commands are
+ * expressed in terms of the following subset of <a>SVGPathSeg</a>
+ * types: SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L),
+ * SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH
+ * (z). Thus, if the <span class='attr-name'>'d'</span> attribute has an "absolute moveto (M)"
+ * and an "absolute arcto (A)" command, then pathSegList will
+ * have one SVG_PATHSEG_MOVETO_ABS entry followed by a series of
+ * SVG_PATHSEG_LINETO_ABS entries which approximate the arc. This
+ * alternate representation is available to provide a simpler
+ * interface to developers who would benefit from a more limited set
+ * of commands.</p>
+ *
+ * <p>The only valid <a>SVGPathSeg</a> types are
+ * SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L),
+ * SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z).</p>
+ */
+ readonly attribute SVGPathSegList normalizedPathSegList;
+
+ /**
+ * Provides access to the current animated contents of the <span class='attr-name'>'d'</span>
+ * attribute in a form which matches one-for-one with SVG's syntax.
+ * If the given attribute or property is being animated, contains
+ * the current animated value of the attribute or property, and both
+ * the object itself and its contents are read only. If the given
+ * attribute or property is not currently being animated, contains
+ * the same value as <a>pathSegList</a>.
+ */
+ readonly attribute SVGPathSegList animatedPathSegList;
+
+ /**
+ * Provides access to the current animated contents of the
+ * <span class='attr-name'>'d'</span> attribute in a form where all path data commands
+ * are expressed in terms of the following subset of <a>SVGPathSeg</a>
+ * types: SVG_PATHSEG_MOVETO_ABS (M), SVG_PATHSEG_LINETO_ABS (L),
+ * SVG_PATHSEG_CURVETO_CUBIC_ABS (C) and SVG_PATHSEG_CLOSEPATH (z).
+ * If the given attribute or property is being animated, contains
+ * the current animated value of the attribute or property, and both
+ * the object itself and its contents are read only. If the given
+ * attribute or property is not currently being animated, contains
+ * the same value as <a>normalizedPathSegList</a>.
+ */
+ readonly attribute SVGPathSegList animatedNormalizedPathSegList;
+ };
+
+ /**
+ * The <a>SVGPathElement</a> interface corresponds to the <a>'path'</a>
+ * element.
+ */
+ interface SVGPathElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable,
+ SVGAnimatedPathData {
+
+ /**
+ * Corresponds to attribute <a>pathLength</a> on the given <a>'path'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber pathLength;
+
+ /**
+ * Returns the user agent's computed value for the total length of the path
+ * using the user agent's distance-along-a-path algorithm, as a distance
+ * in the current user coordinate system.
+ *
+ * @return The total length of the path.
+ */
+ float getTotalLength();
+
+ /**
+ * Returns the (x,y) coordinate in user space which is <var>distance</var>
+ * units along the path, utilizing the user agent's distance-along-a-path
+ * algorithm.
+ *
+ * @param distance The distance along the path, relative to the start of
+ * the path, as a distance in the current user coordinate system.
+ * @return The returned point in user space.
+ */
+ SVGPoint getPointAtLength(in float distance);
+
+ /**
+ * Returns the index into <a>SVGAnimatedPathData::pathSegList</a> which is <var>distance</var>
+ * units along the path, utilizing the user agent's distance-along-a-path
+ * algorithm.
+ *
+ * @param distance The distance along the path, relative to the start of
+ * the path, as a distance in the current user coordinate system.
+ * @return The index of the path segment, where the first path segment is
+ * number 0.
+ */
+ unsigned long getPathSegAtLength(in float distance);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegClosePath</a> object.
+ *
+ * @return A stand-alone, parentless <a>SVGPathSegClosePath</a> object.
+ */
+ SVGPathSegClosePath createSVGPathSegClosePath();
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegMovetoAbs</a> object.
+ *
+ * @param x The absolute X coordinate for the end point of this path segment.
+ * @param y The absolute Y coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegMovetoAbs</a> object.
+ */
+ SVGPathSegMovetoAbs createSVGPathSegMovetoAbs(in float x, in float y);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegMovetoRel</a> object.
+ *
+ * @param x The relative X coordinate for the end point of this path segment.
+ * @param y The relative Y coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegMovetoRel</a> object.
+ */
+ SVGPathSegMovetoRel createSVGPathSegMovetoRel(in float x, in float y);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegLinetoAbs</a> object.
+ *
+ * @param x The absolute X coordinate for the end point of this path segment.
+ * @param y The absolute Y coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegLinetoAbs</a> object.
+ */
+ SVGPathSegLinetoAbs createSVGPathSegLinetoAbs(in float x, in float y);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegLinetoRel</a> object.
+ *
+ * @param x The relative X coordinate for the end point of this path segment.
+ * @param y The relative Y coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegLinetoRel</a> object.
+ */
+ SVGPathSegLinetoRel createSVGPathSegLinetoRel(in float x, in float y);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegCurvetoCubicAbs</a> object.
+ *
+ * @param x The absolute X coordinate for the end point of this path segment.
+ * @param y The absolute Y coordinate for the end point of this path segment.
+ * @param x1 The absolute X coordinate for the first control point.
+ * @param y1 The absolute Y coordinate for the first control point.
+ * @param x2 The absolute X coordinate for the second control point.
+ * @param y2 The absolute Y coordinate for the second control point.
+ * @return A stand-alone, parentless <a>SVGPathSegCurvetoCubicAbs</a> object.
+ */
+ SVGPathSegCurvetoCubicAbs createSVGPathSegCurvetoCubicAbs(in float x, in float y, in float x1, in float y1, in float x2, in float y2);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegCurvetoCubicRel</a> object.
+ *
+ * @param x The relative X coordinate for the end point of this path segment.
+ * @param y The relative Y coordinate for the end point of this path segment.
+ * @param x1 The relative X coordinate for the first control point.
+ * @param y1 The relative Y coordinate for the first control point.
+ * @param x2 The relative X coordinate for the second control point.
+ * @param y2 The relative Y coordinate for the second control point.
+ * @return A stand-alone, parentless <a>SVGPathSegCurvetoCubicRel</a> object.
+ */
+ SVGPathSegCurvetoCubicRel createSVGPathSegCurvetoCubicRel(in float x, in float y, in float x1, in float y1, in float x2, in float y2);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegCurvetoQuadraticAbs</a> object.
+ *
+ * @param x The absolute X coordinate for the end point of this path segment.
+ * @param y The absolute Y coordinate for the end point of this path segment.
+ * @param x1 The absolute X coordinate for the first control point.
+ * @param y1 The absolute Y coordinate for the first control point.
+ * @return A stand-alone, parentless <a>SVGPathSegCurvetoQuadraticAbs</a> object.
+ */
+ SVGPathSegCurvetoQuadraticAbs createSVGPathSegCurvetoQuadraticAbs(in float x, in float y, in float x1, in float y1);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegCurvetoQuadraticRel</a> object.
+ *
+ * @param x The relative X coordinate for the end point of this path segment.
+ * @param y The relative Y coordinate for the end point of this path segment.
+ * @param x1 The relative X coordinate for the first control point.
+ * @param y1 The relative Y coordinate for the first control point.
+ * @return A stand-alone, parentless <a>SVGPathSegCurvetoQuadraticRel</a> object.
+ */
+ SVGPathSegCurvetoQuadraticRel createSVGPathSegCurvetoQuadraticRel(in float x, in float y, in float x1, in float y1);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegArcAbs</a> object.
+ *
+ * @param x The absolute X coordinate for the end point of this path segment.
+ * @param y The absolute Y coordinate for the end point of this path segment.
+ * @param r1 The x-axis radius for the ellipse (i.e., r1).
+ * @param r2 The y-axis radius for the ellipse (i.e., r2).
+ * @param angle The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
+ * @param largeArcFlag The value of the large-arc-flag parameter.
+ * @param sweepFlag The value of the large-arc-flag parameter.
+ * @return A stand-alone, parentless <a>SVGPathSegArcAbs</a> object.
+ */
+ SVGPathSegArcAbs createSVGPathSegArcAbs(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegArcRel</a> object.
+ *
+ * @param x The relative X coordinate for the end point of this path segment.
+ * @param y The relative Y coordinate for the end point of this path segment.
+ * @param r1 The x-axis radius for the ellipse (i.e., r1).
+ * @param r2 The y-axis radius for the ellipse (i.e., r2).
+ * @param angle The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
+ * @param largeArcFlag The value of the large-arc-flag parameter.
+ * @param sweepFlag The value of the large-arc-flag parameter.
+ * @return A stand-alone, parentless <a>SVGPathSegArcRel</a> object.
+ */
+ SVGPathSegArcRel createSVGPathSegArcRel(in float x, in float y, in float r1, in float r2, in float angle, in boolean largeArcFlag, in boolean sweepFlag);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegLinetoHorizontalAbs</a> object.
+ *
+ * @param x The absolute X coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegLinetoHorizontalAbs</a> object.
+ */
+ SVGPathSegLinetoHorizontalAbs createSVGPathSegLinetoHorizontalAbs(in float x);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegLinetoHorizontalRel</a> object.
+ *
+ * @param x The relative X coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegLinetoHorizontalRel</a> object.
+ */
+ SVGPathSegLinetoHorizontalRel createSVGPathSegLinetoHorizontalRel(in float x);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegLinetoVerticalAbs</a> object.
+ *
+ * @param y The absolute Y coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegLinetoVerticalAbs</a> object.
+ */
+ SVGPathSegLinetoVerticalAbs createSVGPathSegLinetoVerticalAbs(in float y);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegLinetoVerticalRel</a> object.
+ *
+ * @param y The relative Y coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegLinetoVerticalRel</a> object.
+ */
+ SVGPathSegLinetoVerticalRel createSVGPathSegLinetoVerticalRel(in float y);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegCurvetoCubicSmoothAbs</a> object.
+ *
+ * @param x The absolute X coordinate for the end point of this path segment.
+ * @param y The absolute Y coordinate for the end point of this path segment.
+ * @param x2 The absolute X coordinate for the second control point.
+ * @param y2 The absolute Y coordinate for the second control point.
+ * @return A stand-alone, parentless <a>SVGPathSegCurvetoCubicSmoothAbs</a> object.
+ */
+ SVGPathSegCurvetoCubicSmoothAbs createSVGPathSegCurvetoCubicSmoothAbs(in float x, in float y, in float x2, in float y2);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegCurvetoCubicSmoothRel</a> object.
+ *
+ * @param x The relative X coordinate for the end point of this path segment.
+ * @param y The relative Y coordinate for the end point of this path segment.
+ * @param x2 The relative X coordinate for the second control point.
+ * @param y2 The relative Y coordinate for the second control point.
+ * @return A stand-alone, parentless <a>SVGPathSegCurvetoCubicSmoothRel</a> object.
+ */
+ SVGPathSegCurvetoCubicSmoothRel createSVGPathSegCurvetoCubicSmoothRel(in float x, in float y, in float x2, in float y2);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegCurvetoQuadraticSmoothAbs</a> object.
+ *
+ * @param x The absolute X coordinate for the end point of this path segment.
+ * @param y The absolute Y coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegCurvetoQuadraticSmoothAbs</a> object.
+ */
+ SVGPathSegCurvetoQuadraticSmoothAbs createSVGPathSegCurvetoQuadraticSmoothAbs(in float x, in float y);
+
+ /**
+ * Returns a stand-alone, parentless <a>SVGPathSegCurvetoQuadraticSmoothRel</a> object.
+ *
+ * @param x The relative X coordinate for the end point of this path segment.
+ * @param y The relative Y coordinate for the end point of this path segment.
+ * @return A stand-alone, parentless <a>SVGPathSegCurvetoQuadraticSmoothRel</a> object.
+ */
+ SVGPathSegCurvetoQuadraticSmoothRel createSVGPathSegCurvetoQuadraticSmoothRel(in float x, in float y);
+ };
+
+ /**
+ * The <a>SVGRectElement</a> interface corresponds to the <a>'rect'</a>
+ * element.
+ */
+ interface SVGRectElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given <a>'rect'</a> element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given <a>'rect'</a> element.
+ */
+ readonly attribute SVGAnimatedLength y;
+
+ /**
+ * Corresponds to attribute <a>'width'</a> on the given <a>'rect'</a> element.
+ */
+ readonly attribute SVGAnimatedLength width;
+
+ /**
+ * Corresponds to attribute <a>'height'</a> on the given <a>'rect'</a> element.
+ */
+ readonly attribute SVGAnimatedLength height;
+
+ /**
+ * Corresponds to attribute <a>'rx'</a> on the given <a>'rect'</a> element.
+ */
+ readonly attribute SVGAnimatedLength rx;
+
+ /**
+ * Corresponds to attribute <a>'ry'</a> on the given <a>'rect'</a> element.
+ */
+ readonly attribute SVGAnimatedLength ry;
+ };
+
+ /**
+ * The <a>SVGCircleElement</a> interface corresponds to the <a>'circle'</a>
+ * element.
+ */
+ interface SVGCircleElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {
+
+ /**
+ * Corresponds to attribute <a>'cx'</a> on the given <a>'circle'</a> element.
+ */
+ readonly attribute SVGAnimatedLength cx;
+
+ /**
+ * Corresponds to attribute <a>'cy'</a> on the given <a>'circle'</a> element.
+ */
+ readonly attribute SVGAnimatedLength cy;
+
+ /**
+ * Corresponds to attribute <a>'r'</a> on the given <a>'circle'</a> element.
+ */
+ readonly attribute SVGAnimatedLength r;
+ };
+
+ /**
+ * The <a>SVGEllipseElement</a> interface corresponds to the <a>'ellipse'</a>
+ * element.
+ */
+ interface SVGEllipseElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {
+
+ /**
+ * Corresponds to attribute <a>'cx'</a> on the given <a>'ellipse'</a> element.
+ */
+ readonly attribute SVGAnimatedLength cx;
+
+ /**
+ * Corresponds to attribute <a>'cy'</a> on the given <a>'ellipse'</a> element.
+ */
+ readonly attribute SVGAnimatedLength cy;
+
+ /**
+ * Corresponds to attribute <a>'rx'</a> on the given <a>'ellipse'</a> element.
+ */
+ readonly attribute SVGAnimatedLength rx;
+
+ /**
+ * Corresponds to attribute <a>'ry'</a> on the given <a>'ellipse'</a> element.
+ */
+ readonly attribute SVGAnimatedLength ry;
+ };
+
+ /**
+ * The <a>SVGLineElement</a> interface corresponds to the <a>'line'</a>
+ * element.
+ */
+ interface SVGLineElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {
+
+ /**
+ * Corresponds to attribute <a>'x1'</a> on the given <a>'line'</a> element.
+ */
+ readonly attribute SVGAnimatedLength x1;
+
+ /**
+ * Corresponds to attribute <a>'y1'</a> on the given <a>'line'</a> element.
+ */
+ readonly attribute SVGAnimatedLength y1;
+
+ /**
+ * Corresponds to attribute <a>'x2'</a> on the given <a>'line'</a> element.
+ */
+ readonly attribute SVGAnimatedLength x2;
+
+ /**
+ * Corresponds to attribute <a>'y2'</a> on the given <a>'line'</a> element.
+ */
+ readonly attribute SVGAnimatedLength y2;
+ };
+
+ /**
+ * <p>The <a>SVGAnimatedPoints</a> interface supports elements which have a
+ * <span class='attr-name'>'points'</span> attribute which holds a list of
+ * coordinate values and which support the ability to animate that
+ * attribute.</p>
+ *
+ * <p>Additionally, the <span class='attr-name'>'points'</span> attribute on
+ * the original element accessed via the XML DOM (e.g., using the
+ * <code>getAttribute()</code> method call) will reflect any changes made to
+ * <a>points</a>.</p>
+ */
+ interface SVGAnimatedPoints {
+
+ /**
+ * Provides access to the base (i.e., static) contents of the
+ * <span class='attr-name'>'points'</span> attribute.
+ */
+ readonly attribute SVGPointList points;
+
+ /**
+ * Provides access to the current animated contents of the
+ * <span class='attr-name'>'points'</span> attribute. If the given attribute
+ * or property is being animated, contains the current animated value of
+ * the attribute or property. If the given attribute or property is not
+ * currently being animated, contains the same value as <a>points</a>.
+ */
+ readonly attribute SVGPointList animatedPoints;
+ };
+
+ /**
+ * The <a>SVGPolylineElement</a> interface corresponds to the <a>'polyline'</a>
+ * element.
+ */
+ interface SVGPolylineElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable,
+ SVGAnimatedPoints {};
+
+ /**
+ * The <a>SVGPolygonElement</a> interface corresponds to the <a>'polygon'</a>
+ * element.
+ */
+ interface SVGPolygonElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable,
+ SVGAnimatedPoints {};
+
+ /**
+ * <p>The <a>SVGTextContentElement</a> is inherited by various text-related
+ * interfaces, such as <a>SVGTextElement</a>, <a>SVGTSpanElement</a>,
+ * <a>SVGTRefElement</a>, <a>SVGAltGlyphElement</a> and
+ * <a>SVGTextPathElement</a>.</p>
+ *
+ * <p>For the methods on this interface that refer to an index to a character
+ * or a number of characters, these references are to be interpreted as an
+ * index to a UTF-16 code unit or a number of UTF-16 code units, respectively.
+ * This is for consistency with DOM Level 2 Core, where methods on the
+ * <a>CharacterData</a> interface use UTF-16 code units as indexes and counts
+ * within the character data. Thus for example, if the text content of a
+ * <a>'text'</a> element is a single non-BMP character, such as U+10000, then
+ * invoking <a>SVGTextContentElement::getNumberOfChars</a> on that element
+ * will return 2 since there are two UTF-16 code units (the surrogate pair)
+ * used to represent that one character.</p>
+ */
+ interface SVGTextContentElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable {
+
+ /**
+ * The enumeration was set to a value that 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.
+ *
+ * @defgroup lengthAdjust Types
+ */
+ const unsigned short LENGTHADJUST_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'spacing'</span>.
+ *
+ * @defgroup lengthAdjust Types
+ */
+ const unsigned short LENGTHADJUST_SPACING = 1;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'spacingAndGlyphs'</span>.
+ *
+ * @defgroup lengthAdjust Types
+ */
+ const unsigned short LENGTHADJUST_SPACINGANDGLYPHS = 2;
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'textLength'</span> on
+ * the given element.
+ */
+ readonly attribute SVGAnimatedLength textLength;
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'lengthAdjust'</span> on
+ * the given element. The value must be one of the length adjust constants
+ * defined on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration lengthAdjust;
+
+ /**
+ * Returns the total number of characters available for rendering within
+ * the current element, which includes referenced characters from
+ * <a>'tref'</a> reference, regardless of whether they will be rendered.
+ * Effectively, this is equivalent to the length of the
+ * <a href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">Node::textContent</a>
+ * attribute from DOM Level 3 Core ([<a href="refs.html#ref-DOM3">DOM3</a>],
+ * section 1.4), if that attribute also expanded <a>'tref'</a>
+ * elements.
+ *
+ * @return Total number of characters.
+ */
+ long getNumberOfChars();
+
+ /**
+ * The total sum of all of the advance values from rendering all of the
+ * characters within this element, including the advance value on the
+ * glyphs (horizontal or vertical), the effect of properties
+ * <a>'kerning'</a>, <a>'letter-spacing'</a> and <a>'word-spacing'</a> and
+ * adjustments due to attributes <a>'tspan/dx'</a> and <a>'tspan/dy'</a> on
+ * <a>'tspan'</a> elements. For non-rendering environments, the user agent
+ * shall make reasonable assumptions about glyph metrics.
+ *
+ * @return The text advance distance.
+ */
+ float getComputedTextLength();
+
+ /**
+ * The total sum of all of the advance values from rendering the specified
+ * substring of the characters, including the advance value on the glyphs
+ * (horizontal or vertical), the effect of properties <a>'kerning'</a>,
+ * <a>'letter-spacing'</a> and <a>'word-spacing'</a> and adjustments due to
+ * attributes <a>'tspan/dx'</a> and <a>'tspan/dy'</a> on <a>'tspan'</a> elements. For
+ * non-rendering environments, the user agent shall make reasonable
+ * assumptions about glyph metrics. If multiple consecutive characters are
+ * rendered inseparably (e.g., as a single glyph or a sequence of glyphs,
+ * or because the range encompasses half of a surrogate pair), and nchars
+ * is greater than 0 then the measured range shall be expanded so that each
+ * of the inseparable characters are included.
+ *
+ * @param charnum The index of the first character in the substring, where
+ * the first character has an index of 0.
+ * @param nchars The number of characters in the substring. If nchars
+ * specifies more characters than are available, then the substring will
+ * consist of all characters starting with charnum until the end of the
+ * list of characters.
+ * @return The text advance distance.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if <var>charnum</var> or
+ * <var>nchars</var> is negative or if <var>charnum</var> is greater than
+ * or equal to the number of characters at this node.
+ */
+ float getSubStringLength(in unsigned long charnum, in unsigned long nchars) raises(DOMException);
+
+ /**
+ * Returns the current text position before rendering the character in the
+ * user coordinate system for rendering the glyph(s) that correspond to
+ * the specified character. The current text position has already taken
+ * into account the effects of any inter-character adjustments due to
+ * properties <a>'kerning'</a>, <a>'letter-spacing'</a> and
+ * <a>'word-spacing'</a> and adjustments due to attributes
+ * <span class='attr-name'>'x'</span>, <span class='attr-name'>'y'</span>,
+ * <span class='attr-name'>'dx'</span> and
+ * <span class='attr-name'>'dy'</span>. If multiple consecutive characters
+ * are rendered inseparably (e.g., as a single glyph or a sequence of
+ * glyphs), then each of the inseparable characters will return the start
+ * position for the first glyph.
+ *
+ * @param charnum The index of the character, where the first character has
+ * an index of 0.
+ * @return The character's start position.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the <var>charnum</var> is
+ * negative or if <var>charnum</var> is greater than or equal to the
+ * number of characters at this node.
+ */
+ SVGPoint getStartPositionOfChar(in unsigned long charnum) raises(DOMException);
+
+ /**
+ * Returns the current text position after rendering the character in the
+ * user coordinate system for rendering the glyph(s) that correspond to
+ * the specified character. This current text position does <em>not</em> take into
+ * account the effects of any inter-character adjustments to prepare for
+ * the next character, such as properties <a>'kerning'</a>,
+ * <a>'letter-spacing'</a> and <a>'word-spacing'</a> and adjustments due to
+ * attributes <span class='attr-name'>'x'</span>,
+ * <span class='attr-name'>'y'</span>, <span class='attr-name'>'dx'</span>
+ * and <span class='attr-name'>'dy'</span>. If multiple consecutive
+ * characters are rendered inseparably (e.g., as a single glyph or a
+ * sequence of glyphs), then each of the inseparable characters will
+ * return the end position for the last glyph.
+ *
+ * @param charnum The index of the character, where the first character has
+ * an index of 0.
+ * @return The character's end position.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the <var>charnum</var> is
+ * negative or if <var>charnum</var> is greater than or equal to the
+ * number of characters at this node.
+ */
+ SVGPoint getEndPositionOfChar(in unsigned long charnum) raises(DOMException);
+
+ /**
+ * Returns a tightest rectangle which defines the minimum and maximum X and
+ * Y values in the user coordinate system for rendering the glyph(s) that
+ * correspond to the specified character. The calculations assume that all
+ * glyphs occupy the full standard glyph cell for the font. If multiple
+ * consecutive characters are rendered inseparably (e.g., as a single glyph
+ * or a sequence of glyphs), then each of the inseparable characters will
+ * return the same extent.
+ *
+ * @param charnum The index of the character, where the first character has
+ * an index of 0.
+ * @return The rectangle which encloses all of the rendered glyph(s).
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the <var>charnum</var> is
+ * negative or if <var>charnum</var> is greater than or equal to the
+ * number of characters at this node.
+ */
+ SVGRect getExtentOfChar(in unsigned long charnum) raises(DOMException);
+
+ /**
+ * Returns the rotation value relative to the current user coordinate
+ * system used to render the glyph(s) corresponding to the specified
+ * character. If multiple glyph(s) are used to render the given character
+ * and the glyphs each have different rotations (e.g., due to
+ * text-on-a-path), the user agent shall return an average value (e.g., the
+ * rotation angle at the midpoint along the path for all glyphs used to
+ * render this character). The rotation value represents the rotation that
+ * is supplemental to any rotation due to properties
+ * <a>'glyph-orientation-horizontal'</a> and
+ * <a>'glyph-orientation-vertical'</a>; thus, any glyph rotations due to
+ * these properties are not included into the returned rotation value. If
+ * multiple consecutive characters are rendered inseparably (e.g., as a
+ * single glyph or a sequence of glyphs), then each of the inseparable
+ * characters will return the same rotation value.
+ *
+ * @param charnum The index of the character, where the first character has
+ * an index of 0.
+ * @return The rotation angle.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if the <var>charnum</var> is
+ * negative or if <var>charnum</var> is greater than or equal to the
+ * number of characters at this node.
+ */
+ float getRotationOfChar(in unsigned long charnum) raises(DOMException);
+
+ /**
+ * Returns the index of the character whose corresponding glyph cell
+ * bounding box contains the specified point. The calculations assume that
+ * all glyphs occupy the full standard glyph cell for the font. If no such
+ * character exists, a value of -1 is returned. If multiple such
+ * characters exist, the character within the element whose glyphs were
+ * rendered last (i.e., take into account any reordering such as for
+ * bidirectional text) is used. If multiple consecutive characters are
+ * rendered inseparably (e.g., as a single glyph or a sequence of glyphs),
+ * then the user agent shall allocate an equal percentage of the text
+ * advance amount to each of the contributing characters in determining
+ * which of the characters is chosen.
+ *
+ * @param point A point in user space.
+ * @return The index of the character which is at the given point, where
+ * the first character has an index of 0.
+ */
+ long getCharNumAtPosition(in SVGPoint point);
+
+ /**
+ * Causes the specified substring to be selected just as if the user
+ * selected the substring interactively.
+ *
+ * @param charnum The index of the start character which is at the given
+ * point, where the first character has an index of 0.
+ * @param nchars The number of characters in the substring. If nchars
+ * specifies more characters than are available, then the substring
+ * will consist of all characters starting with charnum until the end
+ * of the list of characters.
+ * @raises DOMException(INDEX_SIZE_ERR) Raised if <var>charnum</var> or
+ * <var>nchars</var> is negative or if <var>charnum</var> is greater
+ * than or equal to the number of characters at this node.
+ */
+ void selectSubString(in unsigned long charnum, in unsigned long nchars) raises(DOMException);
+ };
+
+ /**
+ * The <a>SVGTextPositioningElement</a> interface is inherited by text-related
+ * interfaces: <a>SVGTextElement</a>, <a>SVGTSpanElement</a>,
+ * <a>SVGTRefElement</a> and <a>SVGAltGlyphElement</a>.
+ */
+ interface SVGTextPositioningElement : SVGTextContentElement {
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'x'</span> on the
+ * given element.
+ */
+ readonly attribute SVGAnimatedLengthList x;
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'y'</span> on the
+ * given element.
+ */
+ readonly attribute SVGAnimatedLengthList y;
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'dx'</span> on the
+ * given element.
+ */
+ readonly attribute SVGAnimatedLengthList dx;
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'dy'</span> on the
+ * given element.
+ */
+ readonly attribute SVGAnimatedLengthList dy;
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'rotate'</span> on the
+ * given element.
+ */
+ readonly attribute SVGAnimatedNumberList rotate;
+ };
+
+ /**
+ * The <a>SVGTextElement</a> interface corresponds to the <a>'text'</a>
+ * element.
+ */
+ interface SVGTextElement :
+ SVGTextPositioningElement,
+ SVGTransformable {};
+
+ /**
+ * The <a>SVGTSpanElement</a> interface corresponds to the <a>'tspan'</a>
+ * element.
+ */
+ interface SVGTSpanElement : SVGTextPositioningElement {};
+
+ /**
+ * The <a>SVGTRefElement</a> interface corresponds to the <a>'tref'</a>
+ * element.
+ */
+ interface SVGTRefElement :
+ SVGTextPositioningElement,
+ SVGURIReference {};
+
+ /**
+ * The <a>SVGTextPathElement</a> interface corresponds to the <a>'textPath'</a>
+ * element.
+ */
+ interface SVGTextPathElement :
+ SVGTextContentElement,
+ SVGURIReference {
+
+ /**
+ * The enumeration was set to a value that 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.
+ *
+ * @defgroup textPath Method Types
+ */
+ const unsigned short TEXTPATH_METHODTYPE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'align'</span>.
+ *
+ * @defgroup textPath Method Types
+ */
+ const unsigned short TEXTPATH_METHODTYPE_ALIGN = 1;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'stretch'</span>.
+ *
+ * @defgroup textPath Method Types
+ */
+ const unsigned short TEXTPATH_METHODTYPE_STRETCH = 2;
+
+ /**
+ * The enumeration was set to a value that 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.
+ *
+ * @defgroup textPath Spacing Types
+ */
+ const unsigned short TEXTPATH_SPACINGTYPE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'auto'</span>.
+ *
+ * @defgroup textPath Spacing Types
+ */
+ const unsigned short TEXTPATH_SPACINGTYPE_AUTO = 1;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'exact'</span>.
+ *
+ * @defgroup textPath Spacing Types
+ */
+ const unsigned short TEXTPATH_SPACINGTYPE_EXACT = 2;
+
+ /**
+ * Corresponds to attribute <a>'startOffset'</a> on the given
+ * <a>'textPath'</a> element.
+ */
+ readonly attribute SVGAnimatedLength startOffset;
+
+ /**
+ * Corresponds to attribute <a>'method'</a> on the given
+ * <a>'textPath'</a> element.
+ */
+ readonly attribute SVGAnimatedEnumeration method;
+
+ /**
+ * Corresponds to attribute <a>'spacing'</a> on the given
+ * <a>'textPath'</a> element.
+ */
+ readonly attribute SVGAnimatedEnumeration spacing;
+ };
+
+ /**
+ * The <a>SVGAltGlyphElement</a> interface corresponds to the
+ * <a>'altGlyph'</a> element.
+ */
+ interface SVGAltGlyphElement :
+ SVGTextPositioningElement,
+ SVGURIReference {
+
+ /**
+ * Corresponds to attribute <a>'glyphRef attribute'</a> on the given
+ * element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString glyphRef setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'format'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString format setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGAltGlyphDefElement</a> interface corresponds to the
+ * <a>'altGlyphDef'</a> element.
+ */
+ interface SVGAltGlyphDefElement : SVGElement {};
+
+ /**
+ * The <a>SVGAltGlyphItemElement</a> interface corresponds to the
+ * <a>'altGlyphItem'</a> element.
+ */
+ interface SVGAltGlyphItemElement : SVGElement {};
+
+ /**
+ * The <a>SVGGlyphRefElement</a> interface corresponds to the
+ * <a>'glyphRef element'</a> element.
+ */
+ interface SVGGlyphRefElement :
+ SVGElement,
+ SVGURIReference,
+ SVGStylable {
+
+ /**
+ * Corresponds to attribute <a>'glyphRef attribute'</a> on the given
+ * element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString glyphRef setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'format'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString format setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float x setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float y setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'dx'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float dx setraises(DOMException);
+
+ /**
+ * Corresponds to attribute <a>'dy'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute float dy setraises(DOMException);
+ };
+
+ /**
+ * <p>The <a>SVGPaint</a> interface corresponds to basic type
+ * <a href='painting.html#SpecifyingPaint'><paint></a> and represents
+ * the values of properties <a>'fill'</a> and <a>'stroke'</a>.</p>
+ *
+ * <p>Note: The <a>SVGPaint</a> interface is deprecated, and may be
+ * dropped from future versions of the SVG specification.</p>
+ */
+ interface SVGPaint : SVGColor {
+
+ /**
+ * The paint 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.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_UNKNOWN = 0;
+
+ /**
+ * An sRGB color has been specified without an alternative ICC color
+ * specification.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_RGBCOLOR = 1;
+
+ /**
+ * An sRGB color has been specified along with an alternative ICC color
+ * specification.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR = 2;
+
+ /**
+ * Corresponds to a <span class='prop-value'>none</span> value on a
+ * <a href='painting.html#SpecifyingPaint'><paint></a> specification.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_NONE = 101;
+
+ /**
+ * Corresponds to a <span class='prop-value'>currentColor</span> value on a
+ * <a href='painting.html#SpecifyingPaint'><paint></a> specification.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_CURRENTCOLOR = 102;
+
+ /**
+ * A URI has been specified, along with an explicit
+ * <span class='prop-value'>none</span> as the backup paint method in case
+ * the URI is unavailable or invalid.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_URI_NONE = 103;
+
+ /**
+ * A URI has been specified, along with an sRGB color as the backup paint
+ * method in case the URI is unavailable or invalid.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_URI_CURRENTCOLOR = 104;
+
+ /**
+ * A URI has been specified, along with an sRGB color as the backup paint
+ * method in case the URI is unavailable or invalid.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR = 105;
+
+ /**
+ * A URI has been specified, along with both an sRGB color and alternate
+ * ICC color as the backup paint method in case the URI is unavailable or
+ * invalid.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR = 106;
+
+ /**
+ * Only a URI has been specified.
+ *
+ * @defgroup Paint Types
+ */
+ const unsigned short SVG_PAINTTYPE_URI = 107;
+
+ /**
+ * The type of paint, identified by one of the SVG_PAINTTYPE_* constants
+ * defined on this interface.
+ */
+ readonly attribute unsigned short paintType;
+
+ /**
+ * When the <a>paintType</a> specifies a URI, this attribute holds the URI
+ * string. When the <a>paintType</a> does not specify a URI, this attribute
+ * is null.
+ */
+ readonly attribute DOMString uri;
+
+ /**
+ * Sets the <a>paintType</a> to SVG_PAINTTYPE_URI_NONE and sets <a>uri</a>
+ * to the specified value.
+ *
+ * @param uri The URI for the desired paint server.
+ */
+ void setUri(in DOMString uri);
+
+ /**
+ * Sets the paint as specified by the parameters. If
+ * <var>paintType</var> requires a URI, then <var>uri</var> must be non-null;
+ * otherwise, <var>uri</var> must be null. If
+ * <var>paintType</var> requires an <a>RGBColor</a>, then <var>rgbColor</var> must
+ * be a string that matches <a href='types.html#DataTypeColor'><color></a>;
+ * otherwise, <var>rgbColor</var> must be null. If <var>paintType</var>
+ * requires an <a>SVGICCColor</a>, then <var>iccColor</var> must be a
+ * string that matches <a href='types.html#DataTypeICCColor'><icccolor></a>;
+ * otherwise, <var>iccColor</var> must be null.
+ *
+ * @param paintType One of the defined constants for <a>paintType</a>.
+ * @param uri The URI for the desired paint server, or null.
+ * @param rgbColor The specification of an sRGB color, or null.
+ * @param iccColor The specification of an ICC color, or null.
+ * @raises SVGException(SVG_INVALID_VALUE_ERR) Raised if one of the
+ * parameters has an invalid value.
+ */
+ void setPaint(in unsigned short paintType, in DOMString uri, in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
+ };
+
+ /**
+ * The <a>SVGMarkerElement</a> interface corresponds to the
+ * <a>'marker element'</a> element.
+ */
+ interface SVGMarkerElement :
+ SVGElement,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGFitToViewBox {
+
+ /**
+ * The marker unit 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.
+ *
+ * @defgroup Marker Unit Types
+ */
+ const unsigned short SVG_MARKERUNITS_UNKNOWN = 0;
+
+ /**
+ * The value of attribute <a>'markerUnits'</a> is
+ * <span class='attr-value'>'userSpaceOnUse'</span>.
+ *
+ * @defgroup Marker Unit Types
+ */
+ const unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 1;
+
+ /**
+ * The value of attribute <a>'markerUnits'</a> is
+ * <span class='attr-value'>'strokeWidth'</span>.
+ *
+ * @defgroup Marker Unit Types
+ */
+ const unsigned short SVG_MARKERUNITS_STROKEWIDTH = 2;
+
+ /**
+ * The marker orientation 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.
+ *
+ * @defgroup Marker Orientation Types
+ */
+ const unsigned short SVG_MARKER_ORIENT_UNKNOWN = 0;
+
+ /**
+ * Attribute <a>'orient'</a> has value
+ * <span class='attr-value'>'auto'</span>.
+ *
+ * @defgroup Marker Orientation Types
+ */
+ const unsigned short SVG_MARKER_ORIENT_AUTO = 1;
+
+ /**
+ * Attribute <a>'orient'</a> has an angle value.
+ *
+ * @defgroup Marker Orientation Types
+ */
+ const unsigned short SVG_MARKER_ORIENT_ANGLE = 2;
+
+ /**
+ * Corresponds to attribute <a>'refX'</a> on the given
+ * <a>'marker element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength refX;
+
+ /**
+ * Corresponds to attribute <a>'refY'</a> on the given
+ * <a>'marker element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength refY;
+
+ /**
+ * Corresponds to attribute <a>'markerUnits'</a> on the given
+ * <a>'marker element'</a> element. One of the Marker Unit Types
+ * defined on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration markerUnits;
+
+ /**
+ * Corresponds to attribute <a>'markerWidth'</a> on the given
+ * <a>'marker element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength markerWidth;
+
+ /**
+ * Corresponds to attribute <a>'markerHeight'</a> on the given
+ * <a>'marker element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength markerHeight;
+
+ /**
+ * Corresponds to attribute <a>'orient'</a> on the given
+ * <a>'marker element'</a> element. One of the Marker Orientation
+ * Types defined on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration orientType;
+
+ /**
+ * Corresponds to attribute <a>'orient'</a> on the given
+ * <a>'marker element'</a> element. If <a>markerUnits</a> is
+ * SVG_MARKER_ORIENT_ANGLE, the angle value for attribute <a>'orient'</a>;
+ * otherwise, it will be set to zero.
+ */
+ readonly attribute SVGAnimatedAngle orientAngle;
+
+ /**
+ * Sets the value of attribute <a>'orient'</a> to
+ * <span class='attr-value'>'auto'</span>.
+ *
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setOrientToAuto() raises(DOMException);
+
+ /**
+ * Sets the value of attribute <a>'orient'</a> to the given angle.
+ *
+ * @param angle The angle value to use for attribute <a>'orient'</a>.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setOrientToAngle(in SVGAngle angle) raises(DOMException);
+ };
+
+ /**
+ * The <a>SVGColorProfileElement</a> interface corresponds to the
+ * <a>'color-profile element'</a> element.
+ */
+ interface SVGColorProfileElement :
+ SVGElement,
+ SVGURIReference,
+ SVGRenderingIntent {
+
+ /**
+ * Corresponds to attribute <a>'local'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString local;
+
+ /**
+ * Corresponds to attribute <a>'name'</a> on the given element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString name;
+
+ /**
+ * Corresponds to attribute <a>'rendering-intent'</a> on the given element.
+ * The value of this attribute is the value of the the RENDERING_INTENT_*
+ * constant defined on <a>SVGRenderingIntent</a> that corresponds to the
+ * value of the <a>'rendering-intent'</a> attribute.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute unsigned short renderingIntent;
+ };
+
+ /**
+ * <p>The <a>SVGColorProfileRule</a> 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.</p>
+ *
+ * <p>Support for the <a>SVGColorProfileRule</a> interface is only required
+ * in user agents that support <a href='styling.html#StylingWithCSS'>styling with CSS</a>.</p>
+ */
+ interface SVGColorProfileRule :
+ SVGCSSRule,
+ SVGRenderingIntent {
+
+ /**
+ * Corresponds to descriptor <span class='prop-name'>src</span> within an
+ * @color-profile rule.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString src setraises(DOMException);
+
+ /**
+ * Corresponds to descriptor <span class='prop-name'>'name'</span> within an
+ * @color-profile rule.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString name setraises(DOMException);
+
+ /**
+ * The type of rendering intent, identified by one of the
+ * <a>SVGRenderingIntent</a> constants.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute unsigned short renderingIntent setraises(DOMException);
+ };
+
+ /**
+ * The <a>SVGGradientElement</a> interface is a base interface used by
+ * <a>SVGLinearGradientElement</a> and <a>SVGRadialGradientElement</a>.
+ */
+ interface SVGGradientElement :
+ SVGElement,
+ SVGURIReference,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGUnitTypes {
+
+ /**
+ * 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.
+ *
+ * @defgroup Spread Method Types
+ */
+ const unsigned short SVG_SPREADMETHOD_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'pad'</span>.
+ *
+ * @defgroup Spread Method Types
+ */
+ const unsigned short SVG_SPREADMETHOD_PAD = 1;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'reflect'</span>.
+ *
+ * @defgroup Spread Method Types
+ */
+ const unsigned short SVG_SPREADMETHOD_REFLECT = 2;
+
+ /**
+ * Corresponds to value <span class='attr-value'>'repeat'</span>.
+ *
+ * @defgroup Spread Method Types
+ */
+ const unsigned short SVG_SPREADMETHOD_REPEAT = 3;
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'gradientUnits'</span>
+ * on the given element. Takes one of the constants defined in
+ * <a>SVGUnitTypes</a>.
+ */
+ readonly attribute SVGAnimatedEnumeration gradientUnits;
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'gradientTransform'</span>
+ * on the given element.
+ */
+ readonly attribute SVGAnimatedTransformList gradientTransform;
+
+ /**
+ * Corresponds to attribute <span class='attr-name'>'spreadMethod'</span>
+ * on the given element. One of the Spread Method Types defined on
+ * this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration spreadMethod;
+ };
+
+ /**
+ * The <a>SVGLinearGradientElement</a> interface corresponds to the
+ * <a>'linearGradient'</a> element.
+ */
+ interface SVGLinearGradientElement : SVGGradientElement {
+
+ /**
+ * Corresponds to attribute <a>'x1'</a> on the given
+ * <a>'linearGradient'</a> element.
+ */
+ readonly attribute SVGAnimatedLength x1;
+
+ /**
+ * Corresponds to attribute <a>'y1'</a> on the given
+ * <a>'linearGradient'</a> element.
+ */
+ readonly attribute SVGAnimatedLength y1;
+
+ /**
+ * Corresponds to attribute <a>'x2'</a> on the given
+ * <a>'linearGradient'</a> element.
+ */
+ readonly attribute SVGAnimatedLength x2;
+
+ /**
+ * Corresponds to attribute <a>'y2'</a> on the given
+ * <a>'linearGradient'</a> element.
+ */
+ readonly attribute SVGAnimatedLength y2;
+ };
+
+ /**
+ * The <a>SVGRadialGradientElement</a> interface corresponds to the
+ * <a>'radialGradient'</a> element.
+ */
+ interface SVGRadialGradientElement : SVGGradientElement {
+
+ /**
+ * Corresponds to attribute <a>'cx'</a> on the given
+ * <a>'radialGradient'</a> element.
+ */
+ readonly attribute SVGAnimatedLength cx;
+
+ /**
+ * Corresponds to attribute <a>'cy'</a> on the given
+ * <a>'radialGradient'</a> element.
+ */
+ readonly attribute SVGAnimatedLength cy;
+
+ /**
+ * Corresponds to attribute <a>'r'</a> on the given
+ * <a>'radialGradient'</a> element.
+ */
+ readonly attribute SVGAnimatedLength r;
+
+ /**
+ * Corresponds to attribute <a>'fx'</a> on the given
+ * <a>'radialGradient'</a> element.
+ */
+ readonly attribute SVGAnimatedLength fx;
+
+ /**
+ * Corresponds to attribute <a>'fy'</a> on the given
+ * <a>'radialGradient'</a> element.
+ */
+ readonly attribute SVGAnimatedLength fy;
+ };
+
+ /**
+ * The <a>SVGStopElement</a> interface corresponds to the <a>'stop'</a>
+ * element.
+ */
+ interface SVGStopElement :
+ SVGElement,
+ SVGStylable {
+
+ /**
+ * Corresponds to attribute <a>'offset'</a> on the given <a>'stop'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber offset;
+ };
+
+ /**
+ * The <a>SVGPatternElement</a> interface corresponds to the <a>'pattern'</a>
+ * element.
+ */
+ interface SVGPatternElement :
+ SVGElement,
+ SVGURIReference,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGFitToViewBox,
+ SVGUnitTypes {
+
+ /**
+ * Corresponds to attribute <a>'patternUnits'</a> on the given
+ * <a>'pattern'</a> element. Takes one of the constants defined in
+ * <a>SVGUnitTypes</a>.
+ */
+ readonly attribute SVGAnimatedEnumeration patternUnits;
+
+ /**
+ * Corresponds to attribute <a>'patternContentUnits'</a> on the given
+ * <a>'pattern'</a> element. Takes one of the constants defined in
+ * <a>SVGUnitTypes</a>.
+ */
+ readonly attribute SVGAnimatedEnumeration patternContentUnits;
+
+ /**
+ * Corresponds to attribute <a>'patternTransform'</a> on the given
+ * <a>'pattern'</a> element.
+ */
+ readonly attribute SVGAnimatedTransformList patternTransform;
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given <a>'pattern'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given <a>'pattern'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength y;
+
+ /**
+ * Corresponds to attribute <a>'width'</a> on the given <a>'pattern'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength width;
+
+ /**
+ * Corresponds to attribute <a>'height'</a> on the given <a>'pattern'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength height;
+ };
+
+ /**
+ * The <a>SVGClipPathElement</a> interface corresponds to the
+ * <a>'clipPath'</a> element.
+ */
+ interface SVGClipPathElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable,
+ SVGUnitTypes {
+
+ /**
+ * Corresponds to attribute <a>'clipPathUnits'</a> on the given
+ * <a>'clipPath'</a> element. Takes one of the constants defined in
+ * <a>SVGUnitTypes</a>.
+ */
+ readonly attribute SVGAnimatedEnumeration clipPathUnits;
+ };
+
+
+ /**
+ * The <a>SVGMaskElement</a> interface corresponds to the
+ * <a>'mask element'</a> element.
+ */
+ interface SVGMaskElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGUnitTypes {
+
+ /**
+ * Corresponds to attribute <a>'maskUnits'</a> on the given
+ * <a>'mask element'</a> element. Takes one of the constants defined in
+ * <a>SVGUnitTypes</a>.
+ */
+ readonly attribute SVGAnimatedEnumeration maskUnits;
+
+ /**
+ * Corresponds to attribute <a>'maskContentUnits'</a> on the given
+ * <a>'mask element'</a> element. Takes one of the constants defined in
+ * <a>SVGUnitTypes</a>.
+ */
+ readonly attribute SVGAnimatedEnumeration maskContentUnits;
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given <a>'mask element'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given <a>'mask element'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength y;
+
+ /**
+ * Corresponds to attribute <a>'width'</a> on the given
+ * <a>'mask element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength width;
+
+ /**
+ * Corresponds to attribute <a>'height'</a> on the given
+ * <a>'mask element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength height;
+ };
+
+ /**
+ * The <a>SVGFilterElement</a> interface corresponds to the <a>'filter element'</a>
+ * element.
+ */
+ interface SVGFilterElement :
+ SVGElement,
+ SVGURIReference,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGUnitTypes {
+
+ /**
+ * Corresponds to attribute <a>'filterUnits'</a> on the given <a>'filter element'</a>
+ * element. Takes one of the constants defined in <a>SVGUnitTypes</a>.
+ */
+ readonly attribute SVGAnimatedEnumeration filterUnits;
+
+ /**
+ * Corresponds to attribute <a>'primitiveUnits'</a> on the given <a>'filter element'</a>
+ * element. Takes one of the constants defined in <a>SVGUnitTypes</a>.
+ */
+ readonly attribute SVGAnimatedEnumeration primitiveUnits;
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given <a>'filter element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given <a>'filter element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength y;
+
+ /**
+ * Corresponds to attribute <a>'width'</a> on the given <a>'filter element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength width;
+
+ /**
+ * Corresponds to attribute <a>'height'</a> on the given <a>'filter element'</a> element.
+ */
+ readonly attribute SVGAnimatedLength height;
+
+ /**
+ * Corresponds to attribute <a>'filterRes'</a> on the given <a>'filter element'</a>
+ * element. Contains the X component of attribute <a>'filterRes'</a>.
+ */
+ readonly attribute SVGAnimatedInteger filterResX;
+
+ /**
+ * Corresponds to attribute <a>'filterRes'</a> on the given <a>'filter element'</a>
+ * element. Contains the Y component (possibly computed automatically) of
+ * attribute <a>'filterRes'</a>.
+ */
+ readonly attribute SVGAnimatedInteger filterResY;
+
+ /**
+ * Sets the values for attribute <a>'filterRes'</a>.
+ *
+ * @param filterResX The X component of attribute <a>'filterRes'</a>.
+ * @param filterResY The Y component of attribute <a>'filterRes'</a>.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setFilterRes(in unsigned long filterResX, in unsigned long filterResY) raises(DOMException);
+ };
+
+ /**
+ * This interface defines the set of DOM attributes that are common across
+ * the filter primitive interfaces.
+ */
+ interface SVGFilterPrimitiveStandardAttributes : SVGStylable {
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedLength y;
+
+ /**
+ * Corresponds to attribute <a>'width'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedLength width;
+
+ /**
+ * Corresponds to attribute <a>'height'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedLength height;
+
+ /**
+ * Corresponds to attribute <a>'result'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedString result;
+ };
+
+ /**
+ * The <a>SVGFEBlendElement</a> interface corresponds to the <a>'feBlend'</a>
+ * element.
+ */
+ interface SVGFEBlendElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * 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.
+ *
+ * @defgroup Blend Mode Types
+ */
+ const unsigned short SVG_FEBLEND_MODE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class="attr-value">'normal'</span>.
+ *
+ * @defgroup Blend Mode Types
+ */
+ const unsigned short SVG_FEBLEND_MODE_NORMAL = 1;
+
+ /**
+ * Corresponds to value <span class="attr-value">'multiply'</span>.
+ *
+ * @defgroup Blend Mode Types
+ */
+ const unsigned short SVG_FEBLEND_MODE_MULTIPLY = 2;
+
+ /**
+ * Corresponds to value <span class="attr-value">'screen'</span>.
+ *
+ * @defgroup Blend Mode Types
+ */
+ const unsigned short SVG_FEBLEND_MODE_SCREEN = 3;
+
+ /**
+ * Corresponds to value <span class="attr-value">'darken'</span>.
+ *
+ * @defgroup Blend Mode Types
+ */
+ const unsigned short SVG_FEBLEND_MODE_DARKEN = 4;
+
+ /**
+ * Corresponds to value <span class="attr-value">'lighten'</span>.
+ *
+ * @defgroup Blend Mode Types
+ */
+ const unsigned short SVG_FEBLEND_MODE_LIGHTEN = 5;
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feBlend'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'in2'</a> on the given <a>'feBlend'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in2;
+
+ /**
+ * Corresponds to attribute <a>'mode'</a> on the given <a>'feBlend'</a>
+ * element. Takes one of the SVG_FEBLEND_MODE_* constants defined on
+ * this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration mode;
+ };
+
+ /**
+ * The <a>SVGFEColorMatrixElement</a> interface corresponds to the
+ * <a>'feColorMatrix'</a> element.
+ */
+ interface SVGFEColorMatrixElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * 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.
+ *
+ * @defgroup Color Matrix Types
+ */
+ const unsigned short SVG_FECOLORMATRIX_TYPE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class="attr-value">'matrix'</span>.
+ *
+ * @defgroup Color Matrix Types
+ */
+ const unsigned short SVG_FECOLORMATRIX_TYPE_MATRIX = 1;
+
+ /**
+ * Corresponds to value <span class="attr-value">'saturate'</span>.
+ *
+ * @defgroup Color Matrix Types
+ */
+ const unsigned short SVG_FECOLORMATRIX_TYPE_SATURATE = 2;
+
+ /**
+ * Corresponds to value <span class="attr-value">'hueRotate'</span>.
+ *
+ * @defgroup Color Matrix Types
+ */
+ const unsigned short SVG_FECOLORMATRIX_TYPE_HUEROTATE = 3;
+
+ /**
+ * Corresponds to value <span class="attr-value">'luminanceToAlpha'</span>.
+ *
+ * @defgroup Color Matrix Types
+ */
+ const unsigned short SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA = 4;
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feColorMatrix'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'type'</a> on the given <a>'feColorMatrix'</a>
+ * element. Takes one of the SVG_FECOLORMATRIX_TYPE_* constants defined
+ * on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration type;
+
+ /**
+ * Corresponds to attribute <a>'values'</a> on the given <a>'feColorMatrix'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumberList values;
+ };
+
+ /**
+ * The <a>SVGFEComponentTransferElement</a> interface corresponds to the
+ * <a>'feComponentTransfer'</a> element.
+ */
+ interface SVGFEComponentTransferElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feComponentTransfer'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+ };
+
+ /**
+ * This interface defines a base interface used by the component transfer
+ * function interfaces.
+ */
+ interface SVGComponentTransferFunctionElement : SVGElement {
+
+ /**
+ * 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.
+ *
+ * @defgroup Component Transfer Types
+ */
+ const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class="attr-value">'identity'</span>.
+ *
+ * @defgroup Component Transfer Types
+ */
+ const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY = 1;
+
+ /**
+ * Corresponds to value <span class="attr-value">'table'</span>.
+ *
+ * @defgroup Component Transfer Types
+ */
+ const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_TABLE = 2;
+
+ /**
+ * Corresponds to value <span class="attr-value">'discrete'</span>.
+ *
+ * @defgroup Component Transfer Types
+ */
+ const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE = 3;
+
+ /**
+ * Corresponds to value <span class="attr-value">'linear'</span>.
+ *
+ * @defgroup Component Transfer Types
+ */
+ const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_LINEAR = 4;
+
+ /**
+ * Corresponds to value <span class="attr-value">'gamma'</span>.
+ *
+ * @defgroup Component Transfer Types
+ */
+ const unsigned short SVG_FECOMPONENTTRANSFER_TYPE_GAMMA = 5;
+
+ /**
+ * Corresponds to attribute <a>'type'</a> on the given
+ * element. Takes one of the SVG_FECOMPONENTTRANSFER_TYPE_* constants defined
+ * on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration type;
+
+ /**
+ * Corresponds to attribute <a>'tableValues'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedNumberList tableValues;
+
+ /**
+ * Corresponds to attribute <a>'slope'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedNumber slope;
+
+ /**
+ * Corresponds to attribute <a>'intercept'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedNumber intercept;
+
+ /**
+ * Corresponds to attribute <a>'amplitude'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedNumber amplitude;
+
+ /**
+ * Corresponds to attribute <a>'exponent'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedNumber exponent;
+
+ /**
+ * Corresponds to attribute <a>'offset'</a> on the given element.
+ */
+ readonly attribute SVGAnimatedNumber offset;
+ };
+
+ /**
+ * The <a>SVGFEFuncRElement</a> interface corresponds to the <a>'feFuncR'</a>
+ * element.
+ */
+ interface SVGFEFuncRElement : SVGComponentTransferFunctionElement {};
+
+ /**
+ * The <a>SVGFEFuncRElement</a> interface corresponds to the <a>'feFuncG'</a>
+ * element.
+ */
+ interface SVGFEFuncGElement : SVGComponentTransferFunctionElement {};
+
+ /**
+ * The <a>SVGFEFuncBElement</a> interface corresponds to the <a>'feFuncB'</a>
+ * element.
+ */
+ interface SVGFEFuncBElement : SVGComponentTransferFunctionElement {};
+
+ /**
+ * The <a>SVGFEFuncAElement</a> interface corresponds to the <a>'feFuncA'</a>
+ * element.
+ */
+ interface SVGFEFuncAElement : SVGComponentTransferFunctionElement {};
+
+ /**
+ * The <a>SVGFECompositeElement</a> interface corresponds to the
+ * <a>'feComposite'</a> element.
+ */
+ interface SVGFECompositeElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * 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.
+ *
+ * @defgroup Composite Operators
+ */
+ const unsigned short SVG_FECOMPOSITE_OPERATOR_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class="attr-value">'over'</span>.
+ *
+ * @defgroup Composite Operators
+ */
+ const unsigned short SVG_FECOMPOSITE_OPERATOR_OVER = 1;
+
+ /**
+ * Corresponds to value <span class="attr-value">'in'</span>.
+ *
+ * @defgroup Composite Operators
+ */
+ const unsigned short SVG_FECOMPOSITE_OPERATOR_IN = 2;
+
+ /**
+ * Corresponds to value <span class="attr-value">'out'</span>.
+ *
+ * @defgroup Composite Operators
+ */
+ const unsigned short SVG_FECOMPOSITE_OPERATOR_OUT = 3;
+
+ /**
+ * Corresponds to value <span class="attr-value">'atop'</span>.
+ *
+ * @defgroup Composite Operators
+ */
+ const unsigned short SVG_FECOMPOSITE_OPERATOR_ATOP = 4;
+
+ /**
+ * Corresponds to value <span class="attr-value">'xor'</span>.
+ *
+ * @defgroup Composite Operators
+ */
+ const unsigned short SVG_FECOMPOSITE_OPERATOR_XOR = 5;
+
+ /**
+ * Corresponds to value <span class="attr-value">'arithmetic'</span>.
+ *
+ * @defgroup Composite Operators
+ */
+ const unsigned short SVG_FECOMPOSITE_OPERATOR_ARITHMETIC = 6;
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feComposite'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'in2'</a> on the given <a>'feComposite'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in2;
+
+ /**
+ * Corresponds to attribute <a>'operator'</a> on the given <a>'feComposite'</a>
+ * element. Takes one of the SVG_FECOMPOSITE_OPERATOR_* constants defined
+ * on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration operator;
+
+ /**
+ * Corresponds to attribute <a>'k1'</a> on the given <a>'feComposite'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber k1;
+
+ /**
+ * Corresponds to attribute <a>'k2'</a> on the given <a>'feComposite'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber k2;
+
+ /**
+ * Corresponds to attribute <a>'k3'</a> on the given <a>'feComposite'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber k3;
+
+ /**
+ * Corresponds to attribute <a>'k4'</a> on the given <a>'feComposite'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber k4;
+ };
+
+ /**
+ * The <a>SVGFEConvolveMatrixElement</a> interface corresponds to the
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ interface SVGFEConvolveMatrixElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * 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.
+ *
+ * @defgroup Edge Mode Values
+ */
+ const unsigned short SVG_EDGEMODE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class="attr-value">'duplicate'</span>.
+ *
+ * @defgroup Edge Mode Values
+ */
+ const unsigned short SVG_EDGEMODE_DUPLICATE = 1;
+
+ /**
+ * Corresponds to value <span class="attr-value">'wrap'</span>.
+ *
+ * @defgroup Edge Mode Values
+ */
+ const unsigned short SVG_EDGEMODE_WRAP = 2;
+
+ /**
+ * Corresponds to value <span class="attr-value">'none'</span>.
+ *
+ * @defgroup Edge Mode Values
+ */
+ const unsigned short SVG_EDGEMODE_NONE = 3;
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'order'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedInteger orderX;
+
+ /**
+ * Corresponds to attribute <a>'order'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedInteger orderY;
+
+ /**
+ * Corresponds to attribute <a>'kernelMatrix'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedNumberList kernelMatrix;
+
+ /**
+ * Corresponds to attribute <a>'divisor'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber divisor;
+
+ /**
+ * Corresponds to attribute <a>'bias'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber bias;
+
+ /**
+ * Corresponds to attribute <a>'targetX'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedInteger targetX;
+
+ /**
+ * Corresponds to attribute <a>'targetY'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedInteger targetY;
+
+ /**
+ * Corresponds to attribute <a>'edgeMode'</a> on the given
+ * <a>'feConvolveMatrix'</a> element. Takes one of the SVG_EDGEMODE_*
+ * constants defined on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration edgeMode;
+
+ /**
+ * Corresponds to attribute <a>'kernelUnitLength'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber kernelUnitLengthX;
+
+ /**
+ * Corresponds to attribute <a>'kernelUnitLength'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber kernelUnitLengthY;
+
+ /**
+ * Corresponds to attribute <a>'preserveAlpha'</a> on the given
+ * <a>'feConvolveMatrix'</a> element.
+ */
+ readonly attribute SVGAnimatedBoolean preserveAlpha;
+ };
+
+ /**
+ * The <a>SVGFEDiffuseLightingElement</a> interface corresponds to the
+ * <a>'feDiffuseLighting'</a> element.
+ */
+ interface SVGFEDiffuseLightingElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feDiffuseLighting'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'surfaceScale'</a> on the given
+ * <a>'feDiffuseLighting'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber surfaceScale;
+
+ /**
+ * Corresponds to attribute <a>'diffuseConstant'</a> on the given
+ * <a>'feDiffuseLighting'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber diffuseConstant;
+
+ /**
+ * Corresponds to attribute <a>'kernelUnitLength'</a> on the given
+ * <a>'feDiffuseLighting'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber kernelUnitLengthX;
+
+ /**
+ * Corresponds to attribute <a>'kernelUnitLength'</a> on the given
+ * <a>'feDiffuseLighting'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber kernelUnitLengthY;
+ };
+
+ /**
+ * The <a>SVGFEDistantLightElement</a> interface corresponds to the
+ * <a>'feDistantLight'</a> element.
+ */
+ interface SVGFEDistantLightElement : SVGElement {
+
+ /**
+ * Corresponds to attribute <a>'azimuth'</a> on the given
+ * <a>'feDistantLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber azimuth;
+
+ /**
+ * Corresponds to attribute <a>'elevation'</a> on the given
+ * <a>'feDistantLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber elevation;
+ };
+
+ /**
+ * The <a>SVGFEPointLightElement</a> interface corresponds to the
+ * <a>'fePointLight'</a> element.
+ */
+ interface SVGFEPointLightElement : SVGElement {
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given
+ * <a>'fePointLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given
+ * <a>'fePointLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber y;
+
+ /**
+ * Corresponds to attribute <a>'z'</a> on the given
+ * <a>'fePointLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber z;
+ };
+
+ /**
+ * The <a>SVGFESpotLightElement</a> interface corresponds to the
+ * <a>'feSpotLight'</a> element.
+ */
+ interface SVGFESpotLightElement : SVGElement {
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given
+ * <a>'feSpotLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given
+ * <a>'feSpotLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber y;
+
+ /**
+ * Corresponds to attribute <a>'z'</a> on the given
+ * <a>'feSpotLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber z;
+
+ /**
+ * Corresponds to attribute <a>'pointsAtX'</a> on the given
+ * <a>'feSpotLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber pointsAtX;
+
+ /**
+ * Corresponds to attribute <a>'pointsAtY'</a> on the given
+ * <a>'feSpotLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber pointsAtY;
+
+ /**
+ * Corresponds to attribute <a>'pointsAtZ'</a> on the given
+ * <a>'feSpotLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber pointsAtZ;
+
+ /**
+ * Corresponds to attribute <a>'specularExponent'</a> on the given
+ * <a>'feSpotLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber specularExponent;
+
+ /**
+ * Corresponds to attribute <a>'limitingConeAngle'</a> on the given
+ * <a>'feSpotLight'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber limitingConeAngle;
+ };
+
+ /**
+ * The <a>SVGFEDisplacementMapElement</a> interface corresponds to the
+ * <a>'feDisplacementMap'</a> element.
+ */
+ interface SVGFEDisplacementMapElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * 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.
+ *
+ * @defgroup Channel Selectors
+ */
+ const unsigned short SVG_CHANNEL_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class="attr-value">'R'</span>.
+ *
+ * @defgroup Channel Selectors
+ */
+ const unsigned short SVG_CHANNEL_R = 1;
+
+ /**
+ * Corresponds to value <span class="attr-value">'G'</span>.
+ *
+ * @defgroup Channel Selectors
+ */
+ const unsigned short SVG_CHANNEL_G = 2;
+
+ /**
+ * Corresponds to value <span class="attr-value">'B'</span>.
+ *
+ * @defgroup Channel Selectors
+ */
+ const unsigned short SVG_CHANNEL_B = 3;
+
+ /**
+ * Corresponds to value <span class="attr-value">'A'</span>.
+ *
+ * @defgroup Channel Selectors
+ */
+ const unsigned short SVG_CHANNEL_A = 4;
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feDisplacementMap'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'in2'</a> on the given <a>'feDisplacementMap'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in2;
+
+ /**
+ * Corresponds to attribute <a>'scale'</a> on the given <a>'feDisplacementMap'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber scale;
+
+ /**
+ * Corresponds to attribute <a>'xChannelSelector'</a> on the given
+ * <a>'feDisplacementMap'</a> element. Takes one of the SVG_CHANNEL_*
+ * constants defined on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration xChannelSelector;
+
+ /**
+ * Corresponds to attribute <a>'yChannelSelector'</a> on the given
+ * <a>'feDisplacementMap'</a> element. Takes one of the SVG_CHANNEL_*
+ * constants defined on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration yChannelSelector;
+ };
+
+ /**
+ * The <a>SVGFEFloodElement</a> interface corresponds to the
+ * <a>'feFlood'</a> element.
+ */
+ interface SVGFEFloodElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+ };
+
+ /**
+ * The <a>SVGFEGaussianBlurElement</a> interface corresponds to the
+ * <a>'feGaussianBlur'</a> element.
+ */
+ interface SVGFEGaussianBlurElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given
+ * <a>'feGaussianBlur'</a> element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'stdDeviation'</a> on the given
+ * <a>'feGaussianBlur'</a> element. Contains the X component
+ * of attribute <a>'stdDeviation'</a>.
+ */
+ readonly attribute SVGAnimatedNumber stdDeviationX;
+
+ /**
+ * Corresponds to attribute <a>'stdDeviation'</a> on the given
+ * <a>'feGaussianBlur'</a> element. Contains the Y component
+ * (possibly computed automatically) of attribute <a>'stdDeviation'</a>.
+ */
+ readonly attribute SVGAnimatedNumber stdDeviationY;
+
+ /**
+ * Sets the values for attribute <a>'stdDeviation'</a>.
+ *
+ * @param stdDeviationX The X component of attribute <a>'stdDeviation'</a>.
+ * @param stdDeviationY The Y component of attribute <a>'stdDeviation'</a>.
+ * @raises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ void setStdDeviation(in float stdDeviationX, in float stdDeviationY) raises(DOMException);
+ };
+
+ /**
+ * The <a>SVGFEImageElement</a> interface corresponds to the
+ * <a>'feImage'</a> element.
+ */
+ interface SVGFEImageElement :
+ SVGElement,
+ SVGURIReference,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * Corresponds to attribute <a>'preserveAspectRatio'</a> on the given
+ * <a>'feImage'</a> element.
+ */
+ readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
+ };
+
+ /**
+ * The <a>SVGFEMergeElement</a> interface corresponds to the
+ * <a>'feMerge'</a> element.
+ */
+ interface SVGFEMergeElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {};
+
+ /**
+ * The <a>SVGFEMergeNodeElement</a> interface corresponds to the
+ * <a>'feMergeNode'</a> element.
+ */
+ interface SVGFEMergeNodeElement : SVGElement {
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feMergeNode'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+ };
+
+ /**
+ * The <a>SVGFEMorphologyElement</a> interface corresponds to the
+ * <a>'feMorphology'</a> element.
+ */
+ interface SVGFEMorphologyElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * 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.
+ *
+ * @defgroup Morphology Operators
+ */
+ const unsigned short SVG_MORPHOLOGY_OPERATOR_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class="attr-value">'erode'</span>.
+ *
+ * @defgroup Morphology Operators
+ */
+ const unsigned short SVG_MORPHOLOGY_OPERATOR_ERODE = 1;
+
+ /**
+ * Corresponds to value <span class="attr-value">'dilate'</span>.
+ *
+ * @defgroup Morphology Operators
+ */
+ const unsigned short SVG_MORPHOLOGY_OPERATOR_DILATE = 2;
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feMorphology'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'operator'</a> on the given <a>'feMorphology'</a>
+ * element. Takes one of the SVG_MORPHOLOGY_OPERATOR_* constants
+ * defined on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration operator;
+
+ /**
+ * Corresponds to attribute <a>'radius'</a> on the given <a>'feMorphology'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber radiusX;
+
+ /**
+ * Corresponds to attribute <a>'radius'</a> on the given <a>'feMorphology'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber radiusY;
+ };
+
+ /**
+ * The <a>SVGFEOffsetElement</a> interface corresponds to the
+ * <a>'feOffset'</a> element.
+ */
+ interface SVGFEOffsetElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feOffset'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'dx'</a> on the given <a>'feOffset'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber dx;
+
+ /**
+ * Corresponds to attribute <a>'dy'</a> on the given <a>'feOffset'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedNumber dy;
+ };
+
+ /**
+ * The <a>SVGFESpecularLightingElement</a> interface corresponds to the
+ * <a>'feSpecularLighting'</a> element.
+ */
+ interface SVGFESpecularLightingElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feSpecularLighting'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+
+ /**
+ * Corresponds to attribute <a>'surfaceScale'</a> on the given
+ * <a>'feSpecularLighting'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber surfaceScale;
+
+ /**
+ * Corresponds to attribute <a>'specularConstant'</a> on the given
+ * <a>'feSpecularLighting'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber specularConstant;
+
+ /**
+ * Corresponds to attribute <a>'specularExponent'</a> on the given
+ * <a>'feSpecularLighting'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber specularExponent;
+
+ /**
+ * Corresponds to attribute <a>'kernelUnitLength'</a> on the given
+ * <a>'feSpecularLighting'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber kernelUnitLengthX;
+
+ /**
+ * Corresponds to attribute <a>'kernelUnitLength'</a> on the given
+ * <a>'feSpecularLighting'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber kernelUnitLengthY;
+ };
+
+ /**
+ * The <a>SVGFETileElement</a> interface corresponds to the
+ * <a>'feTile'</a> element.
+ */
+ interface SVGFETileElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * Corresponds to attribute <a>'in'</a> on the given <a>'feTile'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedString in1;
+ };
+
+ /**
+ * The <a>SVGFETurbulenceElement</a> interface corresponds to the
+ * <a>'feTurbulence'</a> element.
+ */
+ interface SVGFETurbulenceElement :
+ SVGElement,
+ SVGFilterPrimitiveStandardAttributes {
+
+ /**
+ * 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.
+ *
+ * @defgroup Turbulence Types
+ */
+ const unsigned short SVG_TURBULENCE_TYPE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class="attr-value">'fractalNoise'</span>.
+ *
+ * @defgroup Turbulence Types
+ */
+ const unsigned short SVG_TURBULENCE_TYPE_FRACTALNOISE = 1;
+
+ /**
+ * Corresponds to value <span class="attr-value">'turbulence'</span>.
+ *
+ * @defgroup Turbulence Types
+ */
+ const unsigned short SVG_TURBULENCE_TYPE_TURBULENCE = 2;
+
+ /**
+ * 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.
+ *
+ * @defgroup Stitch Options
+ */
+ const unsigned short SVG_STITCHTYPE_UNKNOWN = 0;
+
+ /**
+ * Corresponds to value <span class="attr-value">'stitch'</span>.
+ *
+ * @defgroup Stitch Options
+ */
+ const unsigned short SVG_STITCHTYPE_STITCH = 1;
+
+ /**
+ * Corresponds to value <span class="attr-value">'noStitch'</span>.
+ *
+ * @defgroup Stitch Options
+ */
+ const unsigned short SVG_STITCHTYPE_NOSTITCH = 2;
+
+ /**
+ * Corresponds to attribute <a>'baseFrequency'</a> on the given
+ * <a>'feTurbulence'</a> element. Contains the X component of the
+ * <a>'baseFrequency'</a> attribute.
+ */
+ readonly attribute SVGAnimatedNumber baseFrequencyX;
+
+ /**
+ * Corresponds to attribute <a>'baseFrequency'</a> on the given
+ * <a>'feTurbulence'</a> element. Contains the Y component of the
+ * (possibly computed automatically) <a>'baseFrequency'</a> attribute.
+ */
+ readonly attribute SVGAnimatedNumber baseFrequencyY;
+
+ /**
+ * Corresponds to attribute <a>'numOctaves'</a> on the given
+ * <a>'feTurbulence'</a> element.
+ */
+ readonly attribute SVGAnimatedInteger numOctaves;
+
+ /**
+ * Corresponds to attribute <a>'seed'</a> on the given
+ * <a>'feTurbulence'</a> element.
+ */
+ readonly attribute SVGAnimatedNumber seed;
+
+ /**
+ * Corresponds to attribute <a>'stitchTiles'</a> on the given
+ * <a>'feTurbulence'</a> element. Takes one of the SVG_STITCHTYPE_*
+ * constants defined on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration stitchTiles;
+
+ /**
+ * Corresponds to attribute <a>'type'</a> on the given
+ * <a>'feTurbulence'</a> element. Takes one of the SVG_TURBULENCE_TYPE_*
+ * constants defined on this interface.
+ */
+ readonly attribute SVGAnimatedEnumeration type;
+ };
+
+ /**
+ * The <a>SVGCursorElement</a> interface corresponds to the
+ * <a>'cursor element'</a> element.
+ */
+ interface SVGCursorElement :
+ SVGElement,
+ SVGURIReference,
+ SVGTests,
+ SVGExternalResourcesRequired {
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given <a>'cursor element'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given <a>'cursor element'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength y;
+ };
+
+ /**
+ * The <a>SVGAElement</a> interface corresponds to the <a>'a'</a> element.
+ */
+ interface SVGAElement :
+ SVGElement,
+ SVGURIReference,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {
+
+ /**
+ * Corresponds to attribute <a>'target'</a> on the given <a>'a'</a> element.
+ */
+ readonly attribute SVGAnimatedString target;
+ };
+
+ /**
+ * The <a>SVGViewElement</a> interface corresponds to the <a>'view'</a> element.
+ */
+ interface SVGViewElement :
+ SVGElement,
+ SVGExternalResourcesRequired,
+ SVGFitToViewBox,
+ SVGZoomAndPan {
+
+ /**
+ * Corresponds to attribute <a>'viewTarget'</a> on the given <a>'view'</a>
+ * element. A list of DOMString values which contain the names listed in
+ * the <a>'viewTarget'</a> attribute. Each of the DOMString values can be
+ * associated with the corresponding element using the getElementById()
+ * method call.
+ */
+ readonly attribute SVGStringList viewTarget;
+ };
+
+ /**
+ * The <a>SVGScriptElement</a> interface corresponds to the <a>'script'</a>
+ * element.
+ */
+ interface SVGScriptElement :
+ SVGElement,
+ SVGURIReference,
+ SVGExternalResourcesRequired {
+
+ /**
+ * Corresponds to attribute <a>'type'</a> on the given <a>'script'</a>
+ * element.
+ *
+ * @setraises DOMException(NO_MODIFICATION_ALLOWED_ERR) Raised on an attempt
+ * to change the value of a <a href="svgdom.html#ReadOnlyNodes">read only attribute</a>.
+ */
+ attribute DOMString type setraises(DOMException);
+ };
+
+ /**
+ * <p>A DOM consumer can use the hasFeature of the DOMImplementation interface
+ * to determine whether the SVG zoom event set has been implemented by a DOM
+ * implementation. The feature string for this event set is "SVGZoomEvents".
+ * This string is also used with the createEvent method.</p>
+ *
+ * <p>The zoom event handler occurs before the zoom event is processed. The
+ * remainder of the DOM represents the previous state of the document. The
+ * document will be updated upon normal return from the event handler.</p>
+ *
+ * <p>The UI event type for a zoom event is:</p>
+ *
+ * <dl>
+ * <dt><strong>SVGZoom</strong></dt>
+ * <dd>
+ * The zoom event occurs when the user initiates an action
+ * which causes the current view of the SVG document fragment
+ * to be rescaled. Event handlers are only recognized on <a>'svg'</a> elements. See <a href="interact.html#ZoomEvent">SVGZoom event</a>.
+ * <ul>
+ * <li>Bubbles: Yes</li>
+ * <li>Cancelable: No</li>
+ * <li>Context Info: zoomRectScreen, previousScale,
+ * previousTranslate, newScale, newTranslate, screenX,
+ * screenY, clientX, clientY, altKey, ctrlKey, shiftKey,
+ * metaKey, relatedNode.<br/>
+ * (screenX, screenY, clientX and clientY indicate the
+ * center of the zoom area, with clientX and clientY in
+ * viewport coordinates for the corresponding <a>'svg'</a> element. relatedNode is
+ * the corresponding <a>'svg'</a>
+ * element.)</li>
+ * </ul>
+ * </dd>
+ * </dl>
+ */
+ interface SVGZoomEvent : events::UIEvent {
+
+ /**
+ * <p>The specified zoom rectangle in screen units.</p>
+ *
+ * <p>The <a>SVGRect</a> object is read only.</p>
+ */
+ readonly attribute SVGRect zoomRectScreen;
+
+ /**
+ * The scale factor from previous zoom operations that was in place before
+ * the zoom operation occurred.
+ */
+ readonly attribute float previousScale;
+
+ /**
+ * <p>The translation values from previous zoom operations that were in
+ * place before the zoom operation occurred.</p>
+ *
+ * <p>The <a>SVGPoint</a> object is read only.</p>
+ */
+ readonly attribute SVGPoint previousTranslate;
+
+ /**
+ * The scale factor that will be in place after the zoom operation has been processed.
+ */
+ readonly attribute float newScale;
+
+ /**
+ * <p>The translation values that will be in place after the zoom
+ * operation has been processed.</p>
+ *
+ * <p>The <a>SVGPoint</a> object is read only.</p>
+ */
+ readonly attribute SVGPoint newTranslate;
+ };
+
+ /**
+ * <p>The <a>SVGAnimationElement</a> interface is the base interface for all
+ * of the animation element interfaces: <a>SVGAnimateElement</a>,
+ * <a>SVGSetElement</a>, <a>SVGAnimateColorElement</a>,
+ * <a>SVGAnimateMotionElement</a> and <a>SVGAnimateTransformElement</a>.</p>
+ *
+ * <p>Unlike other SVG DOM interfaces, the SVG DOM does not specify
+ * convenience DOM properties corresponding to the various language
+ * attributes on SVG's animation elements. Specification of these
+ * convenience properties in a way that will be compatible with future
+ * versions of SMIL Animation is expected in a future version of SVG. The
+ * current method for accessing and modifying the attributes on the
+ * animation elements is to use the standard <code>getAttribute</code>,
+ * <code>setAttribute</code>, <code>getAttributeNS</code> and
+ * <code>setAttributeNS</code> defined in
+ * <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>].</p>
+ */
+ interface SVGAnimationElement :
+ SVGElement,
+ SVGTests,
+ SVGExternalResourcesRequired,
+ smil::ElementTimeControl {
+
+ /**
+ * The element which is being animated.
+ */
+ readonly attribute SVGElement targetElement;
+
+ /**
+ * Returns the begin time, in seconds, for this animation element's current
+ * interval, if it exists, regardless of whether the interval has begun yet.
+ * If there is no current interval, then a DOMException with code
+ * INVALID_STATE_ERR is thrown.
+ *
+ * @return The start time, in seconds, of this animation element's current
+ * interval.
+ * @raises DOMException(INVALID_STATE_ERR) The animation element does not
+ * have a current interval.
+ */
+ float getStartTime()
+ raises(DOMException);
+
+ /**
+ * Returns the current time in seconds relative to time zero for the given
+ * time container.
+ *
+ * @return The current time in seconds relative to time zero for the given
+ * time container.
+ */
+ float getCurrentTime();
+
+ /**
+ * Returns the number of seconds for the simple duration for this animation.
+ * If the simple duration is undefined (e.g., the end time is indefinite),
+ * then an exception is raised.
+ *
+ * @return number of seconds for the simple duration for this animation.
+ * @raises DOMException(NOT_SUPPORTED_ERR) The simple duration is not
+ * determined on the given element.
+ */
+ float getSimpleDuration() raises(DOMException);
+ };
+
+ /**
+ * <p>The <a>SVGAnimateElement</a> interface corresponds to the <a>'animate'</a>
+ * element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'animate'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGAnimateElement : SVGAnimationElement, SVGStylable {};
+
+ /**
+ * <p>The <a>SVGSetElement</a> interface corresponds to the <a>'set'</a>
+ * element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'set'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGSetElement : SVGAnimationElement {};
+
+ /**
+ * <p>The <a>SVGAnimateMotionElement</a> interface corresponds to the
+ * <a>'animateMotion'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'animateMotion'</a>
+ * element via the SVG DOM is not available.</p>
+ */
+ interface SVGAnimateMotionElement : SVGAnimationElement {};
+
+ /**
+ * <p>The <a>SVGMPathElement</a> interface corresponds to the <a>'mpath'</a>
+ * element.</p>
+ */
+ interface SVGMPathElement :
+ SVGElement,
+ SVGURIReference,
+ SVGExternalResourcesRequired {};
+
+ /**
+ * <p>The <a>SVGAnimateColorElement</a> interface corresponds to the
+ * <a>'animateColor'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'animateColor'</a>
+ * element via the SVG DOM is not available.</p>
+ */
+ interface SVGAnimateColorElement : SVGAnimationElement, SVGStylable {};
+
+ /**
+ * <p>The <a>SVGAnimateTransformElement</a> interface corresponds to the
+ * <a>'animateTransform'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the
+ * <a>'animateTransform'</a> element via the SVG DOM is not available.</p>
+ */
+ interface SVGAnimateTransformElement : SVGAnimationElement {};
+
+ /**
+ * <p>The <a>SVGFontElement</a> interface corresponds to the
+ * <a>'font element'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'font element'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGFontElement :
+ SVGElement,
+ SVGExternalResourcesRequired,
+ SVGStylable {};
+
+ /**
+ * <p>The <a>SVGGlyphElement</a> interface corresponds to the
+ * <a>'glyph'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'glyph'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGGlyphElement :
+ SVGElement,
+ SVGStylable {};
+
+ /**
+ * <p>The <a>SVGMissingGlyphElement</a> interface corresponds to the
+ * <a>'missing-glyph'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'missing-glyph'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGMissingGlyphElement :
+ SVGElement,
+ SVGStylable {};
+
+ /**
+ * <p>The <a>SVGHKernElement</a> interface corresponds to the
+ * <a>'hkern'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'hkern'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGHKernElement : SVGElement {};
+
+ /**
+ * <p>The <a>SVGVKernElement</a> interface corresponds to the
+ * <a>'vkern'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'vkern'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGVKernElement : SVGElement {};
+
+ /**
+ * <p>The <a>SVGFontFaceElement</a> interface corresponds to the
+ * <a>'font-face'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'font-face'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGFontFaceElement : SVGElement {};
+
+ /**
+ * <p>The <a>SVGFontFaceSrcElement</a> interface corresponds to the
+ * <a>'font-face-src'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'font-face-src'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGFontFaceSrcElement : SVGElement {};
+
+ /**
+ * <p>The <a>SVGFontFaceUriElement</a> interface corresponds to the
+ * <a>'font-face-uri'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'font-face-uri'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGFontFaceUriElement : SVGElement {};
+
+ /**
+ * <p>The <a>SVGFontFaceFormatElement</a> interface corresponds to the
+ * <a>'font-face-format'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'font-face-format'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGFontFaceFormatElement : SVGElement {};
+
+ /**
+ * <p>The <a>SVGFontFaceNameElement</a> interface corresponds to the
+ * <a>'font-face-name'</a> element.</p>
+ *
+ * <p>Object-oriented access to the attributes of the <a>'font-face-name'</a> element
+ * via the SVG DOM is not available.</p>
+ */
+ interface SVGFontFaceNameElement : SVGElement {};
+
+ /**
+ * The <a>SVGMetadataElement</a> interface corresponds to the <a>'metadata'</a>
+ * element.
+ */
+ interface SVGMetadataElement : SVGElement {};
+
+ /**
+ * The <a>SVGForeignObjectElement</a> interface corresponds to the
+ * <a>'foreignObject'</a> element.
+ */
+ interface SVGForeignObjectElement :
+ SVGElement,
+ SVGTests,
+ SVGLangSpace,
+ SVGExternalResourcesRequired,
+ SVGStylable,
+ SVGTransformable {
+
+ /**
+ * Corresponds to attribute <a>'x'</a> on the given <a>'foreignObject'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength x;
+
+ /**
+ * Corresponds to attribute <a>'y'</a> on the given <a>'foreignObject'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength y;
+
+ /**
+ * Corresponds to attribute <a>'width'</a> on the given <a>'foreignObject'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength width;
+
+ /**
+ * Corresponds to attribute <a>'height'</a> on the given <a>'foreignObject'</a>
+ * element.
+ */
+ readonly attribute SVGAnimatedLength height;
+ };
+};
+
+// #endif // _SVG_IDL_
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/svgdom.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,803 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>SVG Document Object Model (DOM)</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>SVG Document Object Model (DOM)</h1>
+
+ <p class="normativity"><strong>This appendix is normative.</strong></p>
+
+<h2 id="SVGDOMOverview">SVG DOM overview</h2>
+
+ <p>This appendix provides an introduction to the SVG DOM and
+ discusses the relationship of the SVG DOM with the
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/"><cite>Document Object Model (DOM) Level 2 Core Specification</cite></a>
+ [<a href="refs.html#ref-DOM2">DOM2</a>]. The
+ specific SVG DOM interfaces that correspond to particular
+ sections of the SVG specification are defined at the end of
+ corresponding chapters in this specification, as follows:</p>
+ <ul>
+ <li><a href="types.html#BasicDOMInterfaces">Basic DOM interfaces</a></li>
+ <li><a href="styling.html#DOMInterfaces">Styling interfaces</a></li>
+ <li><a href="struct.html#DOMInterfaces">Document Structure interfaces</a></li>
+ <li><a href="coords.html#DOMInterfaces">Coordinate Systems, Transformations and Units interfaces</a></li>
+ <li><a href="paths.html#DOMInterfaces">Paths interfaces</a></li>
+ <li><a href="shapes.html#DOMInterfaces">Basic Shapes interfaces</a></li>
+ <li><a href="text.html#DOMInterfaces">Text interfaces</a></li>
+ <li><a href="painting.html#DOMInterfaces">Painting: Filling, Stroking and Marker Symbols interfaces</a></li>
+ <li><a href="color.html#DOMInterfaces">Color interfaces</a></li>
+ <li><a href="pservers.html#DOMInterfaces">Gradients and Patterns interfaces</a></li>
+ <li><a href="masking.html#DOMInterfaces">Clipping, Masking and Compositing interfaces</a></li>
+ <li><a href="filters.html#DOMInterfaces">Filter Effects interfaces</a></li>
+ <li><a href="interact.html#DOMInterfaces">Interactivity interfaces</a></li>
+ <li><a href="linking.html#DOMInterfaces">Linking interfaces</a></li>
+ <li><a href="script.html#DOMInterfaces">Scripting interfaces</a></li>
+ <li><a href="animate.html#DOMInterfaces">Animation interfaces</a></li>
+ <li><a href="fonts.html#DOMInterfaces">Fonts interfaces</a></li>
+ <li><a href="metadata.html#DOMInterfaces">Metadata interfaces</a></li>
+ <li><a href="extend.html#DOMInterfaces">Extensibility interfaces</a></li>
+ </ul>
+ <p>The SVG DOM builds upon and is compatible with
+ DOM Level 2. In particular:</p>
+ <ul>
+ <li>The SVG DOM requires complete support for
+ <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>]</li>
+
+ <li>Wherever appropriate, the SVG DOM is modeled after and
+ maintains consistency with the
+ <a href="http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html">Document Object Model HTML</a>
+ ([<a href="refs.html#ref-DOM1">DOM1</a>], chapter 2).</li>
+
+ <li>The SVG DOM requires complete support for
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Views-20001113/">DOM Level 2 Views</a>
+ [<a href="refs.html#ref-DOM2VIEWS">DOM2VIEWS</a>].</li>
+
+ <li>The SVG DOM requires support for relevant aspects of
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/">DOM Level 2 Events</a>
+ [<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>].
+ (For the specific features from DOM 2 Events that are required, see
+ see <a href="svgdom.html#RelationshipWithDOM2Events">Relationship with DOM Level 2 Events</a>.)</li>
+
+ <li>For implementations that support CSS, the SVG DOM requires complete
+ support for
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html">DOM Level 2 Style Sheets</a>
+ ([<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>], chapter 1)
+ and relevant aspects of
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html">DOM Level 2 CSS</a>
+ ([<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>], chapter 2).
+ (For the specific features from DOM 2 CSS that are required, see
+ <a href="svgdom.html#RelationshipWithCSSOM">Relationship with DOM Level 2 CSS</a>.)</li>
+ </ul>
+ <p>A DOM application can use the <strong>hasFeature</strong> method of
+ the <a>DOMImplementation</a> interface to
+ verify that the interfaces listed in this section are
+ supported. The list of available interfaces is provided in
+ section <a href="svgdom.html#FeatureStrings">Feature strings
+ for the <strong>hasFeature</strong> method call</a>.
+ </p>
+ <p>All SVG DOM objects that directly correspond to an attribute, e.g.
+ the <a>SVGAnimatedLength</a> <a>SVGRectElement::ry</a> in an
+ <a>SVGRectElement</a>, are live.
+ This means that any changes made to the attribute are immediately
+ reflected in the corresponding SVG DOM object.
+ </p>
+ <h3 id="SVGObjectInitialization">SVG DOM object initialization</h3>
+ <p>
+ The SVG DOM allows attributes to be accessed even though they haven't been
+ specified explicitly in the document markup. When this happens an appropriate object
+ is created, initialized and returned. This newly constructed object does not affect rendering until
+ it is modified for the first time. After the first modification the object
+ becomes live, such that any modifications made to the corresponding
+ attribute are immediately reflected in the object.
+ </p>
+ <p>
+ For example, if <code>rectElement.x.baseVal</code> is accessed
+ and the <a>'rect/x'</a> attribute was not specified in the document, the
+ returned SVG DOM object would represent the value <span class="attr-value">0 user units</span>.
+ </p>
+ <p>
+ For cases where an attribute has a default value the returned SVG DOM object that must reflect that value,
+ and for all other cases the object is initialized as described below.
+ If a particular SVG DOM interface is not listed below that means
+ that the object initialization shall be done using the values for the
+ objects that the interface contains, e.g <span class="DOMInterfaceName">DOMString</span> in the
+ case of <a>SVGAnimatedString</a>, or four <span class="DOMInterfaceName">floats</span> in the case of <a>SVGRect</a>.
+ </p>
+ <dl id="SVGObjectInitValues">
+ <dt class="DOMInterfaceName"><a href="text.html#__svg__SVGTextContentElement__textLength">SVGTextContentElement.textLength</a></dt>
+ <dd>
+ Initialized with the return-value of <a>SVGTextContentElement::getComputedTextLength</a> on the same element.
+ </dd>
+ <dt class="DOMInterfaceName">DOMString</dt>
+ <dd>
+ Initialized as the empty string (<span class="attr-value">""</span>).
+ </dd>
+ <dt class="DOMInterfaceName">float</dt>
+ <dt class="DOMInterfaceName">long</dt>
+ <dt class="DOMInterfaceName">short</dt>
+ <dd>
+ Initialized as <span class="attr-value">0</span>.
+ </dd>
+ <dt class="DOMInterfaceName">boolean</dt>
+ <dd>
+ Initialized as <span class="attr-value">false</span>.
+ </dd>
+ <dt class="DOMInterfaceName"><a>SVGLength</a></dt>
+ <dd>
+ Initialized as <span class="attr-value">0 user units</span> (<a href="types.html#__svg__SVGLength__SVG_LENGTHTYPE_NUMBER">SVG_LENGTHTYPE_NUMBER</a>).
+ </dd>
+ <dt class="DOMInterfaceName"><a>SVGLengthList</a></dt>
+ <dt class="DOMInterfaceName"><a>SVGNumberList</a></dt>
+ <dt class="DOMInterfaceName"><a>SVGPointList</a></dt>
+ <dt class="DOMInterfaceName"><a>SVGStringList</a></dt>
+ <dt class="DOMInterfaceName"><a>SVGTransformList</a></dt>
+ <dd>
+ Initialized as the empty list.
+ </dd>
+ <dt class="DOMInterfaceName"><a>SVGAngle</a></dt>
+ <dd>
+ Initialized as <span class="attr-value">0 in unspecified units</span> (<a href="types.html#__svg__SVGAngle__SVG_ANGLETYPE_UNSPECIFIED">SVG_ANGLETYPE_UNSPECIFIED</a>).
+ </dd>
+ <dt class="DOMInterfaceName"><a>SVGZoomAndPan</a></dt>
+ <dd>
+ Initialized as <span class="attr-value">0</span> (<a href="types.html#__svg__SVGZoomAndPan__SVG_ZOOMANDPAN_UNKNOWN">SVG_ZOOMANDPAN_UNKNOWN</a>).
+ </dd>
+ <dt class="DOMInterfaceName"><a>SVGPreserveAspectRatio</a></dt>
+ <dd>
+ Initialized as <span class="attr-value">'xMidYMid meet'</span>.
+ </dd>
+ </dl>
+
+<h2 id="ElementsInTheSVGDOM">Elements in the SVG DOM</h2>
+
+<p>Every <a>Element</a> object that corresponds to an SVG element (that is,
+an element with namespace URI "http://www.w3.org/2000/svg" and a
+local name that is one of the elements defined in this specification)
+must also implement the DOM interface identified in element definition.
+For example, in <a href="shapes.html#RectElement">The <span class="element-name">'rect'</span> element</a>,
+the <a>SVGRectElement</a> interface is identified. This means that every
+<a>Element</a> object whose namespace URI is "http://www.w3.org/2000/svg"
+and whose local name is "rect" must also implement <a>SVGRectElement</a>.</p>
+
+<h2 id="SVGDOMNamingConventions">Naming conventions</h2>
+
+ <p>The SVG DOM follows similar naming conventions to the
+ <a href="http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html">Document Object Model HTML</a>
+ ([<a href="refs.html#ref-DOM1">DOM1</a>], chapter 2).</p>
+ <p>All names are defined as one or more English words
+ concatenated together to form a single string. Property or
+ method names start with the initial keyword in lowercase, and
+ each subsequent word starts with a capital letter. For example,
+ a property that returns document meta information such as the
+ date the file was created might be named "fileDateCreated". In
+ the ECMAScript binding, properties are exposed as properties of
+ a given object. In Java, properties are exposed with get and
+ set methods.</p>
+ <p>For attributes with the CDATA data type, the case of the
+ return value is that given in the source document.</p>
+
+<h2 id="ExceptionSVGException">Exception SVGException</h2>
+
+<edit:interface name='::svg::SVGException'/>
+
+<h2 id="FeatureStrings">Feature strings for the <strong>hasFeature</strong> method call</h2>
+
+ <p>The feature strings that are available for the
+ <strong>hasFeature</strong> method call that is part of the SVG
+ DOM's support for the <a>DOMImplementation</a> interface
+ defined in
+ <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>]
+ are the same features strings available for the <a>'requiredFeatures'</a> attribute that is
+ available for many SVG elements.</p>
+ <p>For all features that correspond to the SVG language and are
+ documented in this specification (see appendix <a
+ href="feature.html">Feature Strings</a> for a list of features
+ in the SVG language), the <strong>version</strong> number for
+ the <strong>hasFeature</strong> method call is "1.1". For
+ features that correspond to other languages, refer to the
+ relevant other specifications to determine the appropriate
+ version number for the given feature.</p>
+
+<h2 id="RelationshipWithDOM2Events">Relationship with DOM Level 2 Events</h2>
+
+<p>The SVG DOM supports all of the interfaces defined in, and
+the following event types from,
+<a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/">DOM Level 2 Events</a>
+[<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>]:</p>
+
+ <ul>
+ <li>
+ These <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-uievents">User Interface events</a>
+ ([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], section 1.6.1):
+ <ul>
+ <li><a href="interact.html#FocusInEvent">DOMFocusIn</a></li>
+ <li><a href="interact.html#FocusOutEvent">DOMFocusOut</a></li>
+ <li><a href="interact.html#ActivateEvent">DOMActivate</a></li>
+ </ul>
+ </li>
+ <li>
+ These <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-mouseevents">mouse events</a>
+ ([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], section 1.6.2):
+ <ul>
+ <li><a href="interact.html#ClickEvent">click</a></li>
+ <li><a href="interact.html#MouseDownEvent">mousedown</a></li>
+ <li><a href="interact.html#MouseUpEvent">mouseup</a></li>
+ <li><a href="interact.html#MouseOverEvent">mouseover</a></li>
+ <li><a href="interact.html#MouseMoveEvent">mousemove</a></li>
+ <li><a href="interact.html#MouseOutEvent">mouseout</a></li>
+ </ul>
+ <em>clientX</em> and <em>clientY</em> parameters for mouse
+ events represent the mouse coordinates at which the event
+ occurred relative to the DOM Implementation's client area.
+ <em>relatedTarget</em> is used to identify a secondary
+ EventTarget related to a UI event. Currently this attribute
+ is used with the mouseover event to indicate the
+ EventTarget which the pointing device exited and with the
+ mouseout event to indicate the EventTarget which the
+ pointing device entered.
+ </li>
+ <li>
+ These <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-mutationevents">mutation events</a>
+ ([<a href="refs.html#ref-DOM2EVENTS">DOM2EVENTS</a>], section 1.6.4):
+ <ul>
+ <li><a href="interact.html#DOMSubtreeModifiedEvent">DOMSubtreeModified</a></li>
+ <li><a href="interact.html#DOMNodeInsertedEvent">DOMNodeInserted</a></li>
+ <li><a href="interact.html#DOMNodeRemovedEvent">DOMNodeRemoved</a></li>
+ <li><a href="interact.html#DOMNodeRemovedFromDocumentEvent">DOMNodeRemovedFromDocument</a></li>
+ <li><a href="interact.html#DOMNodeInsertedIntoDocumentEvent">DOMNodeInsertedIntoDocument</a></li>
+ <li><a href="interact.html#DOMAttrModifiedEvent">DOMAttrModified</a></li>
+ <li><a href="interact.html#DOMCharacterDataModifiedEvent">DOMCharacterDataModified</a></li>
+ </ul>
+ </li>
+ <li>
+ The SVG DOM defines the following SVG-specific custom event
+ interfaces. These event interfaces are mandatory for SVG
+ user agents:
+ <ul>
+ <li><a href="interact.html#LoadEvent">SVGLoad</a></li>
+ <li><a href="interact.html#UnloadEvent">SVGUnload</a></li>
+ <li><a href="interact.html#AbortEvent">SVGAbort</a></li>
+ <li><a href="interact.html#ErrorEvent">SVGError</a></li>
+ <li><a href="interact.html#ResizeEvent">SVGResize</a></li>
+ <li><a href="interact.html#ScrollEvent">SVGScroll</a>
+ (triggered by either scroll or pan user actions)</li>
+ </ul>
+ Note that the SVGLoad event does not fire until the
+ document is fully loaded and is therefore subject to the
+ processing of any <a>'externalResourcesRequired'</a>
+ attributes.
+ </li>
+ <li>
+ The SVG DOM defines an additional custom event interface:
+ <ul>
+ <li><a href="interact.html#ZoomEvent">SVGZoom</a>
+ (definition can be found in the description of the <a>SVGZoomEvent</a> interface)</li>
+ </ul>
+ </li>
+ <li>
+ The following event types are triggered due to state
+ changes in animations. (The definitions for these events
+ can be found in the description of the <a>TimeEvent</a> interface.)
+ <ul>
+ <li><a href="interact.html#BeginEvent">beginEvent</a></li>
+ <li><a href="interact.html#EndEvent">endEvent</a></li>
+ <li><a href="interact.html#RepeatEvent">repeatEvent</a></li>
+ </ul>
+ </li>
+ </ul>
+
+<p id="EventListeners">While event listeners can be registered using an
+<code>addEventListener</code> call on any element in the DOM,
+the use of <a href="script.html#EventAttributes">event attributes</a>
+on elements where those attributes are disallowed will not result in their
+being invoked if the relevant event is dispatched to the element.
+For example, if the <a>'onclick'</a> attribute were specified on
+a <a>'title'</a> element, its contents would never be run in
+response to a <span class='attr-value'>click</span> event:</p>
+
+<pre class='example'><![CDATA[<svg xmlns="http://www.w3.org/2000/svg">
+ <title onclick="alert('Hello')">Invalid event attribute</title>
+ <script>
+ // Find the 'title' element.
+ var title = document.getElementsByTagNameNS("http://www.w3.org/2000/svg", "title")[0];
+
+ // Create and initialize a 'click' event.
+ var event = document.createEvent("MouseEvent");
+ event.initMouseEvent("click", true, false, this, 1, 0, 0, 0, 0, false,
+ false, false, false, 0, null);
+
+ // Dispatch the event to the 'title' element. Since onclick="" is not
+ // allowed on 'title', the alert will not show.
+ title.dispatchEvent(event);
+ </script>
+</svg>]]></pre>
+
+<p>See the <a href='attindex.html'>Attribute Index</a> for details on
+which elements a given event attribute is allowed to be specified on.</p>
+
+<p>Implementors may view the setting of event attributes as the
+creation and registration of an <a>EventListener</a> on the
+<a>EventTarget</a>. Such event listeners are invoked only for
+the "bubbling" and "at target" phases, as if false were specified
+for the <code>useCapture</code> argument to <code>addEventListener</code>.
+This <a>EventListener</a> behaves in the same manner as any other
+which may be registered on the <a>EventTarget</a>.</p>
+
+<p>If the attribute representing the event listener is changed,
+this may be viewed as the removal of the previously registered
+<a>EventListener</a> and the registration of a new one. Futhermore, no
+specification is made as to the order in which event attributes
+will receive the event with regards to the other EventListeners
+on the <a>EventTarget</a>.</p>
+
+<p>In Java, one way that event listeners can be established is
+to define a class which implements the <a>EventListener</a> interface,
+such as:</p>
+
+<pre>
+class MyAction1 implements EventListener {
+ public void handleEvent(Event evt) {
+ // process the event
+ }
+}
+// ... later ...
+MyAction1 mc1 = new MyAction1();
+myElement.addEventListener("DOMActivate", mc1, false);
+</pre>
+
+<p>In ECMAScript, one way to establish an event listener is to
+define a function and pass that function to the <code>addEventListener</code> method:</p>
+
+<pre>
+function myAction1(evt) {
+ // process the event
+}
+// ... later ...
+myElement.addEventListener("DOMActivate", myAction1, false)
+</pre>
+
+<p>In ECMAScript, the character data content of an
+<a href="script.html#EventAttributes">event attribute</a> becomes
+the definition of the ECMAScript function which gets invoked in
+response to the event. As with all registered ECMAScript event
+listener functions, this function receives an <a>Event</a> object as a
+parameter, and the name of the Event object is
+<strong>evt</strong>. For example, it is possible to write:</p>
+
+<pre>
+<rect onactivate="MyActivateHandler(evt)" .../>
+</pre>
+
+<p>which will pass the <a>Event</a> object <strong>evt</strong> into
+function <code>MyActivateHandler</code>.</p>
+
+<h2 id="RelationshipWithCSSOM">Relationship with DOM Level 2 CSS</h2>
+
+<h3 id="CSSDOMIntro">Introduction</h3>
+
+<p>The section describes the facilities from
+<a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html">DOM Level 2 CSS</a>
+([<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>], chapter 2)
+that are part of the SVG DOM.</p>
+
+<h3 id="CSSDOMFeaturesNoCSSSupport">User agents that do not support styling with CSS</h3>
+
+<p>User agents that do not support <a href="styling.html#StylingWithCSS">styling with CSS</a>
+are only required to support the following interfaces from
+<a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html">DOM Level 2 CSS</a>
+([<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>], chapter 2), along with
+any interfaces necessary to implement the interfaces, such as
+<a>CSSPrimitiveValue</a> and <a>CSSValueList</a>. These interfaces are used in
+conjunction with the <a>SVGStylable::getPresentationAttribute</a> method call
+on interface <a>SVGStylable</a>, which must be supported on all implementations
+of the SVG DOM.</p>
+
+<ul>
+ <li>Interface <a>RGBColor</a></li>
+ <li>Interface <a>CSSValue</a></li>
+</ul>
+
+<h3 id="CSSDOMFeaturesWithCSSSupport">User agents that support styling with CSS</h3>
+
+<p>User agents that support <a href="styling.html#StylingWithCSS">Styling with CSS</a>,
+the SVG DOM, and <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/aural.html">aural styling</a>
+([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 19)
+must support all of the interfaces defined in
+<a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html">DOM Level 2 CSS</a>
+([<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>], chapter 2)
+which apply to aural properties.</p>
+
+<p>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),
+user agents must support all of the required interfaces defined in
+DOM Level 2 CSS. All of the interfaces that are optional for DOM Level 2 CSS
+are also optional for user agents implementing the SVG DOM.</p>
+
+<h3 id="ExtendedInterfaces">Extended interfaces</h3>
+
+<p>Note: the <a>SVGStylable::getPresentationAttribute</a> method and the interfaces that extend <a>CSSValue</a> are deprecated, and may be dropped from future versions of the SVG specification.</p>
+
+<p>Whether or not a user agent supports <a href="styling.html#StylingWithCSS">styling with CSS</a>,
+a user agent still must support interface <a>CSSValue</a>, as this is the type
+that is returned from the <a>SVGStylable::getPresentationAttribute</a>
+method call on interface <a>SVGStylable</a>.</p>
+
+<p>DOM Level 2 CSS defines a set of
+<a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-extended">extended interfaces</a>
+([<a href="refs.html#ref-DOM2STYLE">DOM2STYLE</a>], section 2.3) for use in
+conjunction with interface <a>CSSValue</a>. The table below specifies the type
+of <a>CSSValue</a> used to represent each SVG property that applies to
+<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 expectation is that the <a>CSSValue</a> returned from the
+<span class="dom-method-name">getPropertyCSSValue</span> method on the
+<a>CSSStyleDeclaration</a> interface or the <a>SVGStylable::getPresentationAttribute</a>
+method on the <a>SVGStylable</a> interface can be cast down, using
+binding-specific casting methods, to the specific derived interface.</p>
+
+<p>For properties that are represented by a custom interface
+(the <span class='dom-attr-name'>cssValueType</span> of the <a>CSSValue</a> is CSS_CUSTOM),
+the name of the derived interface is specified in the table. For these
+properties, the table below indicates which extended interfaces
+are mandatory and which are not.</p>
+
+<p>For properties that consist of lists of values (the
+<span class='dom-attr-name'>cssValueType</span> of the <a>CSSValue</a> is
+CSS_VALUE_LIST), the derived interface is <a>CSSValueList</a>. For all other
+properties (the <span class='dom-attr-name'>cssValueType</span> of the <a>CSSValue</a>
+is CSS_PRIMITIVE_VALUE), the derived interface is <a>CSSPrimitiveValue</a>.</p>
+
+<p>For shorthand properties, a <a>CSSValue</a> always will have a value
+of null. Shorthand property values can only be accessed and modified as
+strings.</p>
+
+<p>The SVG DOM defines the following SVG-specific custom property
+interfaces, all of which are mandatory for SVG user agents:</p>
+
+<ul>
+ <li><a>SVGColor</a></li>
+ <li><a>SVGICCColor</a></li>
+ <li><a>SVGPaint</a></li>
+</ul>
+
+ <table class='vert property-table' summary="type representations for properties">
+ <tr>
+ <th>Property Name</th>
+ <th>Representation</th>
+ <th>Mandatory?<br/>(Extended interfaces only)</th>
+ </tr>
+ <tr>
+ <td><a>'alignment-baseline'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'baseline-shift'</a></td>
+ <td>ident, length, percentage</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'clip'</a></td>
+ <td>rect, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'clip-path'</a></td>
+ <td>uri, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'clip-rule'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'color'</a></td>
+ <td>rgbcolor, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'color-interpolation'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'color-profile property'</a></td>
+ <td>list of strings, uri's and idents</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'color-rendering'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'cursor property'</a></td>
+ <td>uri, ident</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><a>'direction'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'display'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'dominant-baseline'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'enable-background'</a></td>
+ <td>list of idents and numbers</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'fill'</a></td>
+ <td><a>SVGPaint</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'fill-opacity'</a></td>
+ <td>number</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'fill-rule'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'filter property'</a></td>
+ <td>uri, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'flood-color'</a></td>
+ <td><a>SVGColor</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'flood-opacity'</a></td>
+ <td>number</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'font property'</a></td>
+ <td>null</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'font-family'</a></td>
+ <td>list of strings and idents</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'font-size'</a></td>
+ <td>ident, length, percentage</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'font-size-adjust'</a></td>
+ <td>number, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'font-stretch'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'font-style'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'font-variant'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'font-weight'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'glyph-orientation-horizontal'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'glyph-orientation-vertical'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'image-rendering'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'kerning'</a></td>
+ <td>ident, length</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'letter-spacing'</a></td>
+ <td>ident, length</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'lighting-color'</a></td>
+ <td><a>SVGColor</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'marker property'</a></td>
+ <td>null</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'marker-end'</a></td>
+ <td>uri, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'marker-mid'</a></td>
+ <td>uri, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'marker-start'</a></td>
+ <td>uri, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'mask property'</a></td>
+ <td>uri, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'opacity'</a></td>
+ <td>number</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'overflow'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'pointer-events'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'shape-rendering'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'stop-color'</a></td>
+ <td><a>SVGColor</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stop-opacity'</a></td>
+ <td>number</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'stroke'</a></td>
+ <td><a>SVGPaint</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td><a>'stroke-dasharray'</a></td>
+ <td>ident or list of lengths</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'stroke-dashoffset'</a></td>
+ <td>length</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'stroke-linecap'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'stroke-linejoin'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'stroke-miterlimit'</a></td>
+ <td>length</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'stroke-opacity'</a></td>
+ <td>number</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'stroke-width'</a></td>
+ <td>length</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'text-anchor'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'text-decoration'</a></td>
+ <td>list of ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'text-rendering'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'unicode-bidi'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'visibility'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'word-spacing'</a></td>
+ <td>length, ident</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a>'writing-mode'</a></td>
+ <td>ident</td>
+ <td> </td>
+ </tr>
+ </table>
+
+<h2 id="ReadOnlyNodes">Read only nodes in the DOM</h2>
+
+<p>Some operations and attributes in the SVG DOM are defined to raise an
+exception when an attempt is made to modify a node in the DOM that
+is read only. Such read only nodes are not related to attributes declared
+in IDL with the <code>readonly</code> keyword. Rather, they are nodes
+that cannot be modified by virtue of being defined as
+<a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/glossary.html#dt-readonly-node">readonly nodes</a>
+by <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>], Glossary appendix).
+Specifically, <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-527DCFF2">Entity</a>
+and <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-11C98490">EntityReference</a>
+nodes and their descendants are read only ([<a href="refs.html#ref-DOM2">DOM2</a>], section 1.3).</p>
+
+ <h2 id="InvalidValues">Invalid values</h2>
+ <p>If a script sets a DOM attribute to an invalid value (e.g.,
+ a negative number for an attribute that requires a non-negative
+ number or an out-of-range value for an enumeration), unless
+ this specification indicates otherwise, no exception shall be
+ raised on setting, but the given document fragment shall become
+ technically <span class="SVG-Term">in error</span> as described
+ in <a href="implnote.html#ErrorProcessing">Error
+ processing</a>.</p>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/text.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,4378 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Text</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+</head>
+<body>
+
+<h1>Text</h1>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>Text that is to be rendered as part of an SVG document fragment is
+specified using the <a>'text'</a> element. The characters to be drawn are
+expressed as <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#syntax">XML character data</a>
+([<a href="refs.html#ref-XML10">XML10</a>], section 2.4)
+inside the <a>'text'</a> element.</p>
+
+<p>SVG's <a>'text'</a> elements are rendered like other graphics elements.
+Thus, <a href="coords.html">coordinate system transformations</a>,
+<a href="painting.html">painting</a>, <a href="masking.html">clipping</a> and
+<a href="masking.html">masking</a> features apply to <a>'text'</a> elements in
+the same way as they apply to <a href="intro.html#TermShape">shapes</a> such as
+<a href="paths.html">paths</a> and <a href="shapes.html#RectElement">rectangles</a>.</p>
+
+<p>Each <a>'text'</a> element causes a single string of text to be rendered.
+SVG performs no automatic line breaking or word wrapping. To achieve the
+effect of multiple lines of text, use one of the following methods:</p>
+
+<ul>
+ <li>The author or authoring package needs to pre-compute the line breaks and
+ use multiple <a>'text'</a> elements (one for each line of text).</li>
+
+ <li>The author or authoring package needs to pre-compute the line breaks and
+ use a single <a>'text'</a> element with one or more <a>'tspan'</a> child
+ elements with appropriate values for attributes <a>'tspan/x'</a>, <a>'tspan/y'</a>,
+ <a>'tspan/dx'</a> and <a>'tspan/dy'</a> to set new start positions for those characters
+ which start new lines. (This approach allows user text selection across
+ multiple lines of text -- see
+ <a href="text.html#TextSelection">Text selection and clipboard operations</a>.)</li>
+
+ <li>Express the text to be rendered in another XML namespace such as XHTML
+ [<a href="refs.html#ref-XHTML">XHTML</a>] embedded inline within a
+ <a>'foreignObject'</a> element. (Note: the exact semantics of this approach
+ are not completely defined at this time.)</li>
+</ul>
+
+<p>The text strings within <a>'text'</a> elements can be rendered in a
+straight line or rendered along the outline of a <a>'path'</a> element.
+SVG supports the following international text processing features for
+both straight line text and text on a path:</p>
+
+<ul>
+ <li>horizontal and vertical orientation of text</li>
+
+ <li>left-to-right or bidirectional text (i.e., languages
+ which intermix right-to-left and left-to-right text, such as
+ Arabic and Hebrew)</li>
+
+ <li>when <a href="fonts.html#SVGFonts">SVG fonts</a> are
+ used, automatic selection of the correct glyph corresponding
+ to the current form for
+ <a href="fonts.html#GlyphElementArabicFormAttribute">Arabic</a>
+ and <a href="fonts.html#GlyphElementLangAttribute">Han</a>
+ text</li>
+</ul>
+
+<p>(The layout rules for straight line text are described in
+<a href="text.html#TextLayout">Text layout</a>. The layout rules for text on a
+path are described in <a href="text.html#TextpathLayoutRules">Text on a path
+layout rules</a>.)</p>
+
+<p>Because SVG text is packaged as XML character data:</p>
+
+<ul>
+ <li>Text data in SVG content is readily accessible to the visually impaired
+ (see <a href="access.html">Accessibility Support</a>)</li>
+
+ <li>In many viewing scenarios, the user will be able to search for and select
+ text strings and copy selected text strings to the system clipboard (see
+ <a href="text.html#TextSelection">Text selection and clipboard operations</a>)</li>
+
+ <li>XML-compatible Web search engines will find text strings in SVG
+ content with no additional effort over what they need to do to find
+ text strings in other XML documents</li>
+</ul>
+
+<p>Multi-language SVG content is possible by <a href="i18n.html#I18nTextSubstitution">substituting
+different text strings based on the user's preferred language</a>.</p>
+
+<p>For accessibility reasons, it is recommended that text which is
+included in a document have appropriate semantic markup to indicate
+its function. See <a href="access.html#SVGAccessibilityGuidelines">SVG
+accessibility guidelines</a> for more information.</p>
+
+<h2 id="CharactersAndGlyphs">Characters and their corresponding glyphs</h2>
+
+<p>In XML [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>], textual content
+is defined in terms of a sequence of XML <span class="SVG-Term">characters</span>,
+where each character is defined by a particular Unicode code point
+[<a href="refs.html#ref-UNICODE">UNICODE</a>].
+Fonts, on the other hand, consist of a collection of
+<span class="SVG-Term">glyphs</span> and other associated information, such as
+<a href="text.html#FontsTablesBaselines">font tables</a>. A glyph is a
+presentable form of one or more characters (or a part of a character in some
+cases). Each glyph consists of some sort of identifier (in some cases a string,
+in other cases a number) along with drawing instructions for rendering that
+particular glyph.</p>
+
+ <p>In many cases, there is a one-to-one mapping of Unicode
+ characters (i.e., Unicode code points) to glyphs in a font. For
+ example, it is common for a font designed for Latin languages
+ (where the term <em>Latin</em> is used for European languages
+ such as English with alphabets similar to and/or derivative to
+ the Latin language) to contain a single glyph for each of the
+ standard ASCII characters (i.e., A-to-Z, a-to-z, 0-to-9, plus
+ the various punctuation characters found in ASCII). Thus, in
+ most situations, the string "XML", which consists of three
+ Unicode characters, would be rendered by the three glyphs
+ corresponding to "X", "M" and "L", respectively.</p>
+ <p>In various other cases, however, there is not a strict
+ one-to-one mapping of Unicode characters to glyphs. Some of the
+ circumstances when the mapping is not one-to-one:</p>
+ <ul>
+ <li>Ligatures - For best looking typesetting, it is often
+ desirable that particular sequences of characters are
+ rendered as a single glyph. An example is the word "office".
+ Many fonts will define an "ffi" ligature. When the word
+ "office" is rendered, sometimes the user agent will render
+ the glyph for the "ffi" ligature instead of rendering
+ distinct glyphs (i.e., "f", "f" and "i") for each of the
+ three characters. Thus, for ligatures, multiple Unicode
+ characters map to a single glyph. (Note that for proper
+ rendering of some languages, ligatures are required for
+ certain character combinations.)</li>
+ <li>Composite characters - In various situations, commonly
+ used adornments such as diacritical marks will be stored once
+ in a font as a particular glyph and then composed with one or
+ more other glyphs to result in the desired character. For
+ example, it is possible that a font engine might render the
+ <span class="code-fragment">é</span> character by
+ first rendering the glyph for <span
+ class="code-fragment">e</span> and then rendering the glyph
+ for <span class="code-fragment">´</span> (the accent
+ mark) such that the accent mark will appear over the <span
+ class="code-fragment">e</span>. In this situation, a single
+ Unicode character maps to multiple glyphs.</li>
+ <li>Glyph substitution - Some typography systems examine the
+ nature of the textual content and utilize different glyphs in
+ different circumstances. For example, in Arabic, the same
+ Unicode character might render as any of four different
+ glyphs, depending on such factors as whether the character
+ appears at the start, the end or the middle of a sequence of
+ cursively joined characters. Different glyphs might be used
+ for a punctuation character depending on
+ inline-progression-direction (e.g., horizontal vs. vertical).
+ In these situations, a single Unicode character might map to
+ one of several alternative glyphs.</li>
+ <li>In some languages, particular sequences of characters
+ will be converted into multiple glyphs such that parts of a
+ particular character are in one glyph and the remainder of
+ that character is in another glyph.</li>
+ <li>Alternative glyph specification - SVG contains a facility
+ for the author to explicitly specify that a particular
+ sequence of Unicode characters is to be rendered using a
+ particular glyph. (See <a
+ href="text.html#AlternateGlyphs">Alternate glyphs</a>.) When
+ this facility is used, multiple Unicode characters map to a
+ single glyph.</li>
+ </ul>
+ <p>In many situations, the algorithms for mapping from
+ characters to glyphs are system-dependent, resulting in the
+ possibility that the rendering of text might be (usually
+ slightly) different when viewed in different user environments.
+ If the author of SVG content requires precise selection of
+ fonts and glyphs, then the recommendation is that the necessary
+ fonts (potentially subsetted to include only the glyphs needed
+ for the given document) be available either as <a
+ href="fonts.html#SVGFonts">SVG fonts</a> embedded within the
+ SVG content or as <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#q1">WebFonts</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.1)
+ posted at the same Web location as the SVG content.</p>
+ <p>Throughout this chapter, the term <span
+ class="SVG-Term">character</span> shall be equivalent to the
+ definition of a character in XML [<a
+ href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>].</p>
+
+<h2 id="FontsTablesBaselines">Fonts, font tables and baselines</h2>
+
+ <p>A font consists of a collection of glyphs together with the
+ information (the font tables) necessary to use those glyphs to
+ present characters on some medium. The combination of the
+ collection of glyphs and the font tables is called the <em>font
+ data</em>. The font tables include the information necessary to
+ map characters to glyphs, to determine the size of glyph areas
+ and to position the glyph area. Each font table consists of one
+ or more font characteristics, such as the font-weight and
+ font-style.</p>
+ <p>The geometric font characteristics are expressed in a
+ coordinate system based on the EM box. (The EM is a relative
+ measure of the height of the glyphs in the font; see <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#emsq">Coordinate units on the em square</a>;
+ in [<a href="refs.html#ref-CSS2">CSS2</a>], section 15.4.3.)
+ The box 1 EM high and 1 EM wide is called the
+ <em>design space</em>. This space is given a geometric
+ coordinates by sub-dividing the EM into a number of <em>units
+ per em</em>.</p>
+ <p>Note: Units per em is a font characteristic. A typical value
+ for units per em is 1000 or 2048.</p>
+ <p>The coordinate space of the EM box is called the <em>design
+ space coordinate system</em>. For scalable fonts, the curves
+ and lines that are used to draw a glyph are represented using
+ this coordinate system.</p>
+ <p>Note: Most often, the (0,0) point in this coordinate system
+ is positioned on the left edge of the EM box, but not at the
+ bottom left corner. The Y coordinate of the bottom of a roman
+ capital letter is usually zero. And the descenders on lowercase
+ roman letters have negative coordinate values.</p>
+ <p>SVG assumes that the font tables will provide at least three
+ font characteristics: an ascent, a descent and a set of
+ baseline-tables. The ascent is the distance to the top of the
+ EM box from the (0,0) point of the font; the descent is the
+ distance to the bottom of the EM box from the (0.0) point of
+ the font. The baseline-table is explained below.</p>
+ <p>Note: Within an OpenType font, for horizontal writing-modes,
+ the ascent and descent are given by the sTypoAscender and
+ sTypoDescender entries in the OS/2 table. For vertical
+ writing-modes, the descent (the distance, in this case from the
+ (0,0) point to the left edge of the glyph) is normally zero
+ because the (0,0) point is on the left edge. The ascent for
+ vertical writing-modes is either 1 em or is specified by the
+ ideographic top baseline value in the OpenType Base table for
+ vertical writing-modes.</p>
+ <p>In horizontal writing-modes, the glyphs of a given script
+ are positioned so that a particular point on each glyph, the
+ <em><a
+ href="text.html#AlignmentPoint">alignment-point</a></em>, is
+ aligned with the alignment-points of the other glyphs in that
+ script. The glyphs of different scripts, for example, Western,
+ Northern Indic and Far-Eastern scripts, are typically aligned
+ at different points on the glyph. For example, Western glyphs
+ are aligned on the bottoms of the capital letters, northern
+ indic glyphs are aligned at the top of a horizontal stroke near
+ the top of the glyphs and far-eastern glyphs are aligned either
+ at the bottom or center of the glyph. Within a script and
+ within a line of text having a single font-size, the sequence
+ of alignment-points defines, in the inline-
+ progression-direction, a geometric line called a
+ <em>baseline</em>. Western and most other alphabetic and
+ syllabic glyphs are aligned to an "alphabetic" baseline, the
+ northern indic glyphs are aligned to a "hanging" baseline and
+ the far-eastern glyphs are aligned to an "ideographic"
+ baseline.</p>
+ <p>A <em>baseline-table</em> specifies the position of one or
+ more baselines in the design space coordinate system. The
+ function of the baseline table is to facilitate the alignment
+ of different scripts with respect to each other when they are
+ mixed on the same text line. Because the desired relative
+ alignments may depend on which script is dominant in a line (or
+ block), there may be a different baseline table for each
+ script. In addition, different alignment positions are needed
+ for horizontal and vertical writing modes. Therefore, the font
+ may have a set of baseline tables: typically, one or more for
+ horizontal writing-modes and zero or more for vertical
+ writing-modes.</p>
+ <p>Note: Some fonts may not have values for the baseline
+ tables. Heuristics are suggested for approximating the baseline
+ tables when a given font does not supply baseline tables.</p>
+ <p>SVG further assumes that for each glyph in the font data for
+ a font, there are two width values, two alignment-baselines and
+ two alignment-points, one each for horizontal writing-modes and
+ the other for vertical writing-modes. (Even though it is
+ specified as a width, for vertical writing-modes the width is
+ used in the vertical direction.) The script to which a glyph
+ belongs determines an alignment-baseline to which the glyph is
+ to be aligned. The <a
+ href="text.html#InlineProgressionDirection">inline-progression-direction</a>
+ position of the alignment-point is on the start-edge of the
+ glyph.</p>
+ <p>Properties related to baselines are described below under <a
+ href="text.html#BaselineAlignmentProperties">Baseline alignment
+ properties</a>.</p>
+ <p>In addition to the font characteristics required above, a
+ font may also supply substitution and positioning tables that
+ can be used by a formatter to re-order, combine and position a
+ sequence of glyphs to make one or more composite glyphs. The
+ combination may be as simple as a ligature, or as complex as an
+ indic syllable which combines, usually with some re-ordering,
+ multiple consonants and vowel glyphs.</p>
+
+<h2 id="TextElement">The <span class="element-name">'text'</span> element</h2>
+
+<edit:with element='text'>
+
+<p>The <a>'text'</a> element defines
+a graphics element consisting of text. The XML
+character data within the <a>'text'</a> element, along with relevant attributes
+and properties and character-to-glyph mapping tables within
+the font itself, define the glyphs to be rendered. (See
+<a href="text.html#CharactersAndGlyphs">Characters and their corresponding
+glyphs</a>.) The attributes and properties on the <a>'text'</a>
+element indicate such things as the writing direction, font
+specification and painting attributes which describe how exactly
+to render the characters. Subsequent sections of this chapter
+describe the relevant text-specific attributes and properties,
+particular <a href="text.html#TextLayout">text layout</a> and
+<a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>.</p>
+
+<p>Since <a>'text'</a> elements are
+rendered using the same rendering methods as other graphics
+elements, all of the same <a href="coords.html">coordinate
+system transformations</a>, <a
+href="painting.html">painting</a>, <a
+href="masking.html">clipping</a> and <a
+href="masking.html">masking</a> features that apply to <a
+href="intro.html#TermShape">shapes</a> such as <a
+href="paths.html">paths</a> and <a href="shapes.html#RectElement">rectangles</a> also apply to
+<a>'text'</a> elements.</p>
+
+<p id="ObjectBoundingBoxUnitsTextObjects">It is possible to apply
+a gradient, pattern, clipping path, mask or filter to text. When
+one of these facilities is applied to text and keyword
+<span class="attr-value">'objectBoundingBox'</span> is used (see
+<a href="coords.html#ObjectBoundingBox">Object bounding box units</a>)
+to specify a graphical effect relative to the "object bounding box",
+then the object bounding box units are computed relative to the entire
+<a>'text'</a> element in all cases, even when different effects
+are applied to different <a>'tspan'</a> elements within the same
+<a>'text'</a> element.</p>
+
+<p>The <a>'text'</a> element renders its first glyph (after
+<a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
+reordering) at the initial <a href="text.html#CurrentTextPosition">current
+text position</a>, which is established by the <a>'x'</a> and <a>'y'</a>
+attributes on the <a>'text'</a> element (with possible adjustments
+due to the value of the <a>'text-anchor'</a> property, the presence
+of a <a>'textPath'</a> element containing the first character,
+and/or an <a>'tspan/x'</a>, <a>'tspan/y'</a>, <a>'tspan/dx'</a> or
+<a>'tspan/dy'</a> attributes on a <a>'tspan'</a>, <a>'tref'</a> or
+<a>'altGlyph'</a> element which contains the first character). After
+the glyph(s) corresponding to the given character is(are) rendered, the
+current text position is updated for the next character. In the simplest
+case, the new current text position is the previous current text
+position plus the glyphs' advance value (horizontal or vertical). See
+<a href="text.html#TextLayout">text layout</a> for a description of glyph
+placement and glyph advance.</p>
+
+<edit:elementsummary name='text'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="TextElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinates"><list-of-coordinates></a></span>"</dt>
+ <dd>If a single <a
+ href="types.html#DataTypeCoordinate"><coordinate></a>
+ is provided, then the value represents the new absolute X
+ coordinate for the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> for rendering the glyphs that correspond to
+ the first character within this element or any of its
+ descendants.<br />
+ If a comma- or space-separated list of <var>n</var> <a
+ href="types.html#DataTypeCoordinate"><coordinate></a>s
+ is provided, then the values represent new absolute X
+ coordinates for the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> for rendering the glyphs corresponding to each
+ of the first <var>n</var> characters within this element or
+ any of its descendants.<br />
+ For additional processing rules, refer to the description
+ of the <a>'tspan/x'</a> attribute on the <a>'tspan'</a> element.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TextElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinates"><list-of-coordinates></a></span>"</dt>
+ <dd>The corresponding list of absolute Y coordinates for
+ the glyphs corresponding to the characters within this
+ element. The processing rules for the <a>'y'</a> attribute parallel the
+ processing rules for the <a>'x'</a> attribute.<br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TextElementDXAttribute"><span
+ class="adef">dx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
+ <dd>Shifts in the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> along the x-axis for the characters within
+ this element or any of its descendants.<br />
+ Refer to the description of the <a>'tspan/dx'</a> attribute on the
+ <a>'tspan'</a> element.<br />
+ If the attribute is not specified on this element or any
+ of its descendants, no supplemental shifts along the x-axis
+ will occur.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TextElementDYAttribute"><span
+ class="adef">dy</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
+ <dd>Shifts in the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> along the y-axis for the characters within
+ this element or any of its descendants.<br />
+ Refer to the description of the <a>'tspan/dy'</a> attribute on the
+ <a>'tspan'</a> element.<br />
+ If the attribute is not specified on this element or any
+ of its descendants, no supplemental shifts along the y-axis
+ will occur.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TextElementRotateAttribute"><span
+ class="adef">rotate</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumbers"><list-of-numbers></a></span>"</dt>
+ <dd>The supplemental rotation about the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> that will be applied to all of the glyphs
+ corresponding to each character within this element.<br />
+ Refer to the description of the <a>'tspan/rotate'</a> attribute on the
+ <a>'tspan'</a> element.<br />
+ If the attribute is not specified on this element or any
+ of its descendants, no supplemental rotations will
+ occur.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: yes
+ (non-additive).</span></dd>
+ <dt id="TextElementTextLengthAttribute"><span
+ class="adef">textLength</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The author's computation of the total sum of all of the
+ advance values that correspond to character data within
+ this element, including the advance value on the glyph
+ (horizontal or vertical), the effect of properties
+ <a>'kerning'</a>, <a>'letter-spacing'</a> and <a>'word-spacing'</a>
+ and adjustments due to attributes <a>'tspan/dx'</a> and
+ <a>'tspan/dy'</a> on <a>'tspan'</a> elements. This
+ value is used to calibrate the user agent's own
+ calculations with that of the author.<br />
+ The purpose of this attribute is to allow the author to
+ achieve exact alignment, in visual rendering order after
+ any <a
+ href="text.html#RelationshipWithBiDirectionality">bidirectional
+ reordering</a>, for the first and last rendered glyphs that
+ correspond to this element; thus, for the last rendered
+ character (in visual rendering order after any <a
+ href="text.html#RelationshipWithBiDirectionality">bidirectional
+ reordering</a>), any supplemental inter-character spacing
+ beyond normal glyph advances are ignored (in most cases)
+ when the user agent determines the appropriate amount to
+ expand/compress the text string to fit within a length of
+ <a>'textLength'</a>.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).<br />
+ If the attribute is not specified, the effect is as if the
+ author's computation exactly matched the value calculated
+ by the user agent; thus, no advance adjustments are
+ made.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TextElementLengthAdjustAttribute"><span
+ class="adef">lengthAdjust</span> = "<span
+ class="attr-value">spacing|spacingAndGlyphs</span>"</dt>
+ <dd>Indicates the type of adjustments which the user agent
+ shall make to make the rendered length of the text match
+ the value specified on the <a>'textLength'</a> attribute.<br />
+ <span class="attr-value">'spacing'</span> indicates that
+ only the advance values are adjusted. The glyphs themselves
+ are not stretched or compressed.<br />
+ <span class="attr-value">'spacingAndGlyphs'</span> indicates
+ that the advance values are adjusted and the glyphs
+ themselves stretched or compressed in one axis (i.e., a
+ direction parallel to the
+ inline-progression-direction).<br />
+ The user agent is required to achieve correct start and
+ end positions for the text strings, but the locations of
+ intermediate glyphs are not predictable because user agents
+ might employ advanced algorithms to stretch or compress
+ text strings in order to balance correct start and end
+ positioning with optimal typography.<br />
+ Note that, for a text string that contains <var>n</var>
+ characters, the adjustments to the advance values often
+ occur only for <var>n</var>−1 characters (see description of
+ attribute <a>'textLength'</a>), whereas
+ stretching or compressing of the glyphs will be applied to
+ all <var>n</var> characters.<br />
+ If the attribute is not specified, the effect is as a
+ value of <span class="attr-value">'spacing'</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p id="ExampleText01"><span class="example-ref">Example text01</span> below
+ contains the text string "Hello, out there" which will be
+ rendered onto the canvas using the Verdana font family with the
+ glyphs filled with the color blue.</p>
+
+<edit:example href='images/text/text01.svg' name='test01' description="'Hello, out there' in blue" image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="TSpanElement">The <span class="element-name">'tspan'</span> element</h2>
+
+<p>Within a <a>'text'</a> element, text and font properties and the
+<a href="text.html#CurrentTextPosition">current text position</a> can be
+adjusted with absolute or relative coordinate values by including a
+<span class="element-name">'tspan'</span> element.</p>
+
+<edit:with element='tspan'>
+
+<edit:elementsummary name='tspan'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="TSpanElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinates"><list-of-coordinates></a></span>"</dt>
+ <dd>If a single <a
+ href="types.html#DataTypeCoordinate"><coordinate></a>
+ is provided, then the value represents the new absolute X
+ coordinate for the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> for rendering the glyphs that correspond to
+ the first character within this element or any of its
+ descendants.<br />
+ If a comma- or space-separated list of <var>n</var> <a
+ href="types.html#DataTypeCoordinate"><coordinate></a>s
+ is provided, then the values represent new absolute X
+ coordinates for the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> for rendering the glyphs corresponding to each
+ of the first <var>n</var> characters within this element or
+ any of its descendants.<br />
+ If more <a
+ href="types.html#DataTypeCoordinate"><coordinate></a>s
+ are provided than characters, then the extra <a
+ href="types.html#DataTypeCoordinate"><coordinate></a>s
+ will have no effect on glyph positioning.<br />
+ If more characters exist than <a
+ href="types.html#DataTypeCoordinate"><coordinate></a>s,
+ then for each of these extra characters: (a) if an ancestor
+ <a>'text'</a> or <a>'tspan'</a> element specifies
+ an absolute X coordinate for the given character via an
+ <span class="attr-name">'x'</span> attribute, then that
+ absolute X coordinate is used as the starting X coordinate
+ for that character (nearest ancestor has precedence), else
+ (b) the starting X coordinate for rendering the glyphs
+ corresponding to the given character is the X coordinate of
+ the resulting <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> from the most recently rendered glyph for the
+ current <a>'text'</a> element.<br />
+ If the attribute is not specified: (a) if an ancestor <a>'text'</a>
+ or <a>'tspan'</a> element specifies
+ an absolute X coordinate for a given character via an
+ <span class="attr-name">'x'</span> attribute, then that absolute X
+ coordinate is used (nearest ancestor has precedence), else
+ (b) the starting X coordinate for rendering the glyphs
+ corresponding to a given character is the X coordinate of
+ the resulting <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> from the most recently rendered glyph for the
+ current <a>'text'</a> element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TSpanElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinates"><list-of-coordinates></a></span>"</dt>
+ <dd>The corresponding list of absolute Y coordinates for
+ the glyphs corresponding to the characters within this
+ element. The processing rules for the <a>'y'</a> attribute parallel the
+ processing rules for the <a>'x'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TSpanElementDXAttribute"><span
+ class="adef">dx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
+ <dd>If a single <a
+ href="types.html#DataTypeLength"><length></a> is
+ provided, this value represents the new relative X
+ coordinate for the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> for rendering the glyphs corresponding to the
+ first character within this element or any of its
+ descendants. The <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> is shifted along the x-axis of the current
+ user coordinate system by <a
+ href="types.html#DataTypeLength"><length></a> before
+ the first character's glyphs are rendered.<br />
+ If a comma- or space-separated list of <var>n</var> <a
+ href="types.html#DataTypeLength"><length></a>s is
+ provided, then the values represent incremental shifts
+ along the x-axis for the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> before rendering the glyphs corresponding to
+ the first <var>n</var> characters within this element or any
+ of its descendants. Thus, before the glyphs are rendered
+ corresponding to each character, the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> resulting from drawing the glyphs for the
+ previous character within the current <a>'text'</a> element is shifted
+ along the X axis of the current user coordinate system by
+ <a
+ href="types.html#DataTypeLength"><length></a>.<br />
+ If more <a
+ href="types.html#DataTypeLength"><length></a>s are
+ provided than characters, then any extra <a
+ href="types.html#DataTypeLength"><length></a>s will
+ have no effect on glyph positioning.<br />
+ If more characters exist than <a
+ href="types.html#DataTypeLength"><length></a>s, then
+ for each of these extra characters: (a) if an ancestor
+ <a>'text'</a> or <a>'tspan'</a> element specifies a
+ relative X coordinate for the given character via a
+ <span class="attr-name">'dx'</span> attribute, then the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> is shifted along the x-axis of the current
+ user coordinate system by that amount (nearest ancestor has
+ precedence), else (b) no extra shift along the x-axis
+ occurs.<br />
+ If the attribute is not specified: (a) if an ancestor <a>'text'</a>
+ or <a>'tspan'</a> element specifies a
+ relative X coordinate for a given character via a
+ <span class="attr-name">'dx'</span> attribute, then the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> is shifted along the x-axis of the current
+ user coordinate system by that amount (nearest ancestor has
+ precedence), else (b) no extra shift along the x-axis
+ occurs.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TSpanElementDYAttribute"><span
+ class="adef">dy</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
+ <dd>The corresponding list of relative Y coordinates for
+ the characters within the <a>'tspan'</a> element. The processing
+ rules for the <a>'dy'</a> attribute
+ parallel the processing rules for the
+ <a>'dx'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TSpanElementRotateAttribute"><span
+ class="adef">rotate</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumbers"><list-of-numbers></a></span>"</dt>
+ <dd>The supplemental rotation about the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> that will be applied to all of the glyphs
+ corresponding to each character within this element.<br />
+ If a comma- or space-separated list of <a
+ href="types.html#DataTypeNumber"><number></a>s is
+ provided, then the first <a
+ href="types.html#DataTypeNumber"><number></a>
+ represents the supplemental rotation for the glyphs
+ corresponding to the first character within this element or
+ any of its descendants, the second <a
+ href="types.html#DataTypeNumber"><number></a>
+ represents the supplemental rotation for the glyphs that
+ correspond to the second character, and so on.<br />
+ If more <a
+ href="types.html#DataTypeNumber"><number></a>s are
+ provided than there are characters, then the extra <a
+ href="types.html#DataTypeNumber"><number></a>s will
+ be ignored.<br />
+ If more characters are provided than <a
+ href="types.html#DataTypeNumber"><number></a>s, then
+ for each of these extra characters the rotation value specified by the
+ last number must be used.
+ <br />
+ If the attribute is not specified and if an ancestor <a>'text'</a> or
+ <a>'tspan'</a> element specifies a supplemental rotation for a given
+ character via a <a>'rotate'</a> attribute, then the given supplemental
+ rotation is applied to the given character (nearest ancestor has
+ precedence). If there are more characters than <a
+ href="types.html#DataTypeNumber"><number></a>s specified in the
+ ancestor's <a>'rotate'</a> attribute, then for each of these extra
+ characters the rotation value specified by the last number must be used.
+ <br />
+ This supplemental rotation has no impact on the rules by
+ which <a href="text.html#CurrentTextPosition">current text
+ position</a> is modified as glyphs get rendered and is
+ supplemental to any rotation due to <a
+ href="text.html#TextOnAPath">text on a path</a> and to
+ <a>'glyph-orientation-horizontal'</a>
+ or <a>'glyph-orientation-vertical'</a>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: yes
+ (non-additive).</span>
+ </dd>
+ <dt id="TSpanElementTextLengthAttribute"><span
+ class="adef">textLength</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>The author's computation of the total sum of all of the
+ advance values that correspond to character data within
+ this element, including the advance value on the glyph
+ (horizontal or vertical), the effect of properties <a>'kerning'</a>,
+ <a>'letter-spacing'</a> and <a>'word-spacing'</a> and adjustments due
+ to attributes <a>'dx'</a> and <a>'dy'</a> on this <a>'tspan'</a>
+ element or any descendants. This value is used to calibrate the user
+ agent's own calculations with that of the author.<br />
+ The purpose of this attribute is to allow the author to
+ achieve exact alignment, in visual rendering order after
+ any <a
+ href="text.html#RelationshipWithBiDirectionality">bidirectional
+ reordering</a>, for the first and last rendered glyphs that
+ correspond to this element; thus, for the last rendered
+ character (in visual rendering order after any <a
+ href="text.html#RelationshipWithBiDirectionality">bidirectional
+ reordering</a>), any supplemental inter-character spacing
+ beyond normal glyph advances are ignored (in most cases)
+ when the user agent determines the appropriate amount to
+ expand/compress the text string to fit within a length of
+ <a>'textLength'</a>.<br />
+ If attribute <a>'textLength'</a> is
+ specified on a given element and also specified on an
+ ancestor, the adjustments on all character data within this
+ element are controlled by the value of <a>'textLength'</a> on this element
+ exclusively, with the possible side-effect that the
+ adjustment ratio for the contents of this element might be
+ different than the adjustment ratio used for other content
+ that shares the same ancestor. The user agent must assume
+ that the total advance values for the other content within
+ that ancestor is the difference between the advance value
+ on that ancestor and the advance value for this
+ element.<br />
+ A negative value is an error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).<br />
+ If the attribute is not specified anywhere within a
+ <a>'text'</a> element, the effect
+ is as if the author's computation exactly matched the value
+ calculated by the user agent; thus, no advance adjustments
+ are made.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p>The <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and
+ <a>'rotate'</a> on the <a>'tspan'</a> element are useful in
+ high-end typography scenarios where individual glyphs require
+ exact placement. These attributes are useful for minor
+ positioning adjustments between characters or for major
+ positioning adjustments, such as moving the <a
+ href="text.html#CurrentTextPosition">current text position</a>
+ to a new location to achieve the visual effect of a new line of
+ text. Multi-line <a>'text'</a> elements are possible by
+ defining different <a>'tspan'</a>
+ elements for each line of text, with attributes <a>'x'</a>, <a>'y'</a>,
+ <a>'dx'</a> and/or <a>'dy'</a> defining the position of each
+ <a>'tspan'</a>. (An advantage of
+ such an approach is that users will be able to perform
+ multi-line <a href="text.html#TextSelection">text
+ selection</a>.)</p>
+ <p>In situations where micro-level positioning adjustment are
+ necessary for advanced typographic control, the SVG content
+ designer needs to ensure that the necessary font will be
+ available for all viewers of the document (e.g., package up the
+ necessary font data in the form of an SVG font or an
+ alternative WebFont
+ format which is stored at the same Web site as the SVG content)
+ and that the viewing software will process the font in the
+ expected way (the capabilities, characteristics and font layout
+ mechanisms vary greatly from system to system). If the SVG
+ content contains <a>'x'</a>, <a>'y'</a>, <a>'dx'</a> or
+ <a>'dy'</a> attribute values which are
+ meant to correspond to a particular font processed by a
+ particular set of viewing software and either of these
+ requirements is not met, then the text might display with poor
+ quality.</p>
+ <p>The following additional rules apply to attributes <a>'x'</a>,
+ <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a> when they
+ contain a list of numbers:</p>
+ <ul>
+ <li>When a single XML character maps to a single glyph - In
+ this case, the <span class="code-fragment">i</span>-th value for the
+ <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a>
+ attributes is applied to the glyph that corresponds to the <span
+ class="code-fragment">i</span>-th character.</li>
+ <li>When a single XML character maps to multiple glyphs (e.g., when an
+ accent glyph is placed on top of a base glyph) - In this case, the
+ <span class="code-fragment">i</span>-th value for the <a>'x'</a>,
+ <a>'y'</a>, <a>'dx'</a> and <a>'dy'</a> values are applied (i.e., the
+ <a href="text.html#CurrentTextPosition">current text position</a> is
+ adjusted) before rendering the first glyph. The rotation transformation
+ corresponding to the <span class="code-fragment">i</span>-th <a>'rotate'</a>
+ value is applied to the glyphs and to the inter-glyph advance values
+ corresponding to this character on a group basis (i.e., the rotation
+ value creates a temporary new rotated coordinate system, and the glyphs
+ orresponding to the character are rendered into this rotated coordinate
+ system).</li>
+ <li>When multiple XML characters map to a single
+ glyph (e.g., when a ligature is used) - Suppose
+ that the <span class="code-fragment">i</span>-th
+ and <span class="code-fragment">(i+1)</span>-th XML
+ characters map to a single glyph. In this case, the <span
+ class="code-fragment">i</span>-th value for the <a>'x'</a>,
+ <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a>
+ attributes all apply when rendering the glyph. The <span
+ class="code-fragment">(i+1)</span>-th values, however, for
+ <a>'x'</a>, <a>'y'</a> and <a>'rotate'</a> are ignored (exception:
+ the final <a>'rotate'</a> value in the list would still apply to
+ subsequent characters), whereas the <a>'dx'</a> and <a>'dy'</a>
+ are applied to the subsequent XML character (i.e., the <span
+ class="code-fragment">(i+2)</span>-th character), if one exists,
+ by translating the <a href="text.html#CurrentTextPosition">current
+ text position</a> by the given amounts before rendering the first
+ glyph associated with that character.</li>
+ <li>When there is a many-to-many mapping of characters to
+ glyphs (e.g., when three characters map to two glyphs, such as
+ when the first glyph expresses the first character and half
+ of the second character, and the second glyph expresses the
+ other half of the second character plus the third character)
+ - Suppose that the <span class="code-fragment">i</span>-th,
+ <span class="code-fragment">(i+1)</span>-th and <span
+ class="code-fragment">(i+2)</span>-th XML characters map to two
+ glyphs. In this case, the <span class="code-fragment">i</span>-th
+ value for the <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>
+ and <a>'dy'</a> values are applied (i.e., the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> is adjusted) before rendering the first glyph.
+ The rotation transformation corresponding to the <span
+ class="code-fragment">i</span>-th <a>'rotate'</a> value is
+ applied to both the two glyphs and the glyph advance values
+ for the first glyph on a group basis (i.e., the rotation value
+ creates a temporary new rotated coordinate system, and the
+ two glyphs are rendered into the temporary rotated coordinate
+ system). The <span class="code-fragment">(i+1)</span>-th and
+ <span class="code-fragment">(i+2)</span>-th values, however,
+ for the <a>'x'</a>, <a>'y'</a> and <a>'rotate'</a> attributes
+ are not applied (exception: the final <a>'rotate'</a> value in
+ the list would still apply to subsequent characters), whereas
+ the <span class="code-fragment">(i+1)</span>-th and <span
+ class="code-fragment">(i+2)</span>-th values for the <a>'dx'</a>
+ and <a>'dy'</a> attributes are applied to the subsequent XML
+ character (i.e., the <span class="code-fragment">(i+3)</span>-th
+ character), if one exists, by translating the <a
+ href="text.html#CurrentTextPosition">current text position</a> by
+ the given amounts before rendering the first glyph associated with
+ that character.</li>
+ <li>Relationship to <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
+ - As described below in the discussion on
+ <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>,
+ text is laid out in a two-step process, where any
+ bidirectional text is first re-ordered into a left-to-right
+ string, and then text layout occurs with the re-ordered
+ text string. Whenever the character data within a <a>'tspan'</a> element is re-ordered,
+ the corresponding elements within the <a>'x'</a>, <a>'y'</a>,
+ <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a> are also re-ordered
+ to maintain the correspondence. For example, suppose that you have
+ the following <a>'tspan'</a> element:
+<pre>
+<tspan dx="11 12 13 14 15 0 21 22 23 0 31 32 33 34 35 36">Latin and Hebrew</tspan>
+</pre>
+ and that the word "Hebrew" will be drawn right-to-left. First, the
+ character data and the corresponding values in the <a>'dx'</a>
+ list will be reordered, such that the text string will be "Latin
+ and werbeH" and the list of values for the <a>'dx'</a> attribute
+ will be "11 12 13 14 15 0 21 22 23 0 36 35 34 33 32 31". After
+ this re-ordering, the glyphs corresponding to the characters will
+ be positioned using standard left-to-right layout rules.</li>
+ </ul>
+ <p>The following examples show basic use of the <a>'tspan'</a> element.</p>
+ <p id="ExampleTSpan01"><span class="example-ref">Example tspan01</span> uses a
+ <a>'tspan'</a> element to indicate
+ that the word "not" is to use a bold font and have red
+ fill.</p>
+
+<edit:example href='images/text/tspan01.svg' name='tspan01' description='using tspan to change visual attributes' image='yes' link='yes'/>
+
+ <p id="ExampleTSpan02"><span class="example-ref">Example tspan02</span>
+ uses the <a>'dx'</a> and <a>'dy'</a> attributes on the <a>'tspan'</a>
+ element to adjust the <a href="text.html#CurrentTextPosition">current text position</a>
+ horizontally and vertically for particular text strings within a
+ <a>'text'</a> element.</p>
+
+<edit:example href='images/text/tspan02.svg' name='tspan02' description="using tspan's dx and dy attributes for incremental positioning adjustments" image='yes' link='yes'/>
+
+ <p id="ExampleTSpan03"><span class="example-ref">Example tspan03</span>
+ uses the <a>'x'</a> and <a>'y'</a> attributes on the
+ <a>'tspan'</a> element to establish a new absolute
+ <a href="text.html#CurrentTextPosition">current text position</a> for each
+ glyph to be rendered. The example shows two lines of text within a single
+ <a>'text'</a> element. Because both lines of text are within the same
+ <a>'text'</a> element, the user will be able to select through both lines
+ of text and copy the text to the system clipboard in user agents that
+ support <a href="text.html#TextSelection">text selection and clipboard operations</a>.</p>
+
+<edit:example href='images/text/tspan03.svg' name='tspan03' description="using tspan's x and y attributes for multiline text and precise glyph positioning" image='yes' link='yes'/>
+
+ <p>
+ <span class="example-ref">Example tspan04</span> uses the
+ <a>'rotate'</a> attribute on the <a>'tspan'</a> element to rotate the
+ glyphs to be rendered. This example shows a single text string in a
+ <a>'tspan'</a> element that contains more characters than the number
+ of values specified in the <a>'rotate'</a> attribute. In this case the
+ last value specified in the <a>'rotate'</a> attribute of the
+ <a>'tspan'</a> must be applied to the remaining characters in the
+ string.
+ </p>
+
+<edit:example href='images/text/tspan04.svg' name='tspan04' description="simple rotation of characters in a tspan element" image='yes' link='yes'/>
+
+ <p>
+ <span class="example-ref">Example tspan05</span> specifies the
+ <a>'rotate'</a> attribute on the <a>'text'</a> element and on all but
+ one of the child <a>'tspan'</a> elements to rotate the glyphs to be
+ rendered. The example demonstrates the propagation of the
+ <a>'rotate'</a> attribute.
+ </p>
+
+<edit:example href='images/text/tspan05.svg' name='tspan05' description="propagation of rotation values to nested tspan elements" image='yes' link='yes'/>
+
+ <p>
+ Rotation of red text inside the <a>'text'</a> element:
+ </p>
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate the characters in the text
+ <em>"Not "</em> by 5, 15, 25 and 35 degrees respectively.
+ </li>
+ <li>
+ A <a>'rotate'</a> value is applied to the space that follows the
+ text <em>"Not"</em>, to the space in between the text in the
+ "child1" and "child5" <a>'tspan'</a> elements, and to the space
+ before the text <em>"rotation"</em>.
+ </li>
+ <li>
+ The next current <a>'rotate'</a> value specified is 45 followed
+ by 55. The current <a>'rotate'</a> value in the <a>'text'</a>
+ element is incremented as subsequent characters in the text of the
+ child <a>'tspan'</a> elements are processed.
+ </li>
+ <li>
+ The next immediate <a>'tspan'</a> element specifies rotate values
+ for the text, hence the current <a>'rotate'</a> value will change to
+ the next value in the list (but is not used) as each character is
+ processed until the last value of 55 degrees is reached.
+ </li>
+ <li>
+ The last <a>'rotate'</a> value of 55 degrees will be applied to all
+ the characters in the text <em>"rotation"</em>.
+ </li>
+ </ul>
+ <p>
+ Rotation of the orange text inside the "child1" <a>'tspan'</a>
+ element:
+ </p>
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate the first 4 characters in the
+ text <em>"all characters "</em> by -10, -20, -30 and -40
+ respectively.
+ </li>
+ <li>
+ The last <a>'rotate'</a> value of -40 becomes the current
+ <a>'rotate'</a> value and will be applied to all subsequent
+ characters in the <a>'tspan'</a> element and to any child
+ <a>'tspan'</a> elements that do not specify <a>'rotate'</a>
+ values.
+ </li>
+ <li>
+ The "child4" <a>'tspan'</a> element does not specify any
+ <a>'rotate'</a> values and thus uses the current <a>'rotate'</a> of
+ its ancestor ("child1" <a>'tspan'</a> element). All the characters
+ in the text <em>"text"</em> specified within the "child4"
+ <a>'tspan'</a> element will be rotated by -40 degrees.
+ </li>
+ <li>
+ The last <a>'rotate'</a> value of -40 degrees will be applied to all
+ the characters in the text <em>"have a"</em>.
+ </li>
+ <li>
+ A <a>'rotate'</a> value is applied to the space in between the text
+ in the "child2" and "child4" <a>'tspan'</a> elements, and to the
+ space before the text <em>"have a"</em>.
+ </li>
+ </ul>
+ <p>
+ Rotation of the yellow text inside the "child2" <a>'tspan'</a>
+ element:
+ </p>
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate the characters in the (yellow)
+ text <em>"in "</em> by 70, 60, and 50 degrees respectively.
+ </li>
+ <li>
+ A <a>'rotate'</a> value is applied to the space that follows the
+ text <em>"in"</em>.
+ </li>
+ <li>
+ There are more <a>'rotate'</a> values specified than characters,
+ thus the additional <a>'rotate'</a> values will be applied to the
+ "child3" <a>'tspan'</a> element which does not specified any
+ <a>'rotate'</a> values.
+ </li>
+ <li>
+ The characters in the text <em>"the"</em> specified within the
+ "child3" <a>'tspan'</a> element will be rotated 40, 30 and 20
+ degrees respectively.
+ </li>
+ </ul>
+ <p>
+ Rotation of the blue text inside the "child5" <a>'tspan'</a> element:
+ </p>
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate all the characters in text
+ <em>"specified"</em> by -10 degrees.
+ </li>
+ <li>
+ Only one <a>'rotate'</a> value is specified and is thus
+ applied to all characters in the <a>'tspan'</a> element.
+ </li>
+ </ul>
+ <p>
+ The following diagram illustrates how the rotation values propagate to
+ <a>'tspan'</a> elements nested withing a <a>'text'</a> element
+ </p>
+ <img alt="Image that shows propagation of rotation values"
+ src="images/text/tspan05-diagram.png" width="528" height="918" />
+
+</edit:with>
+
+<h2 id="TRefElement">The <span class="element-name">'tref'</span> element</h2>
+
+<edit:with element='tref'>
+
+ <p>The textual content for a <a>'text'</a> can be either character data
+ directly embedded within the <a>'text'</a> element or the character data
+ content of a referenced element, where the referencing is specified with a
+ <a>'tref'</a> element.</p>
+
+<edit:elementsummary name='tref'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="TRefElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="intro.html#TermIRIReference">IRI
+ reference</a> to an element
+ whose character data content shall be used as
+ character data for this <a>'tref'</a> element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p>All character data within the referenced element, including
+ character data enclosed within additional markup, will be
+ rendered.</p>
+ <p>The <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a>
+ attributes have the same meanings as for the <a>'tspan'</a> element. The
+ attributes are applied as if the <a>'tref'</a> element was replaced by a
+ <a>'tspan'</a> with the referenced character data (stripped of all
+ supplemental markup) embedded within the hypothetical <a>'tspan'</a> element.</p>
+
+ <p id="ExampleTRef01"><span class="example-ref">Example tref01</span> shows
+ how to use character data from a different element as the character data
+ for a given <a>'tspan'</a> element. The first <a>'text'</a> element (with
+ <span class='attr-value'>id="ReferencedText"</span>) will not draw because
+ it is part of a <a>'defs'</a> element. The second <a>'text'</a> element
+ draws the string "Inline character data". The third <a>'text'</a> element
+ draws the string "Reference character data" because it includes a
+ <a>'tref'</a> element which is a reference to element "ReferencedText",
+ and that element's character data is "Referenced character data".</p>
+
+<edit:example href='images/text/tref01.svg' name='tref01' description="inline vs reference text content" image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="TextLayout">Text layout</h2>
+
+<h3 id="TextLayoutIntroduction">Text layout introduction</h3>
+
+ <p>This section describes the text layout features supported by
+ SVG, which includes support for various international writing
+ directions, such as left-to-right (e.g., Latin scripts) and
+ bidirectional (e.g., Hebrew or Arabic) and vertical (e.g.,
+ Asian scripts). The descriptions in this section assume
+ straight line text (i.e., text that is either strictly
+ horizontal or vertical with respect to the current user
+ coordinate system). Subsequent sections describe the
+ supplemental layout rules for <a
+ href="text.html#TextOnAPath">text on a path</a>.</p>
+ <p>SVG does not provide for automatic line breaks or word
+ wrapping, which makes internationalized text layout for SVG
+ relatively simpler than it is for languages which support
+ formatting of multi-line text blocks.</p>
+ <p id="ReferenceOrientation">For each <a>'text'</a> element, the SVG user
+ agent determines the current <span class="SVG-Term">reference
+ orientation</span>. For standard horizontal or vertical text
+ (i.e., no text-on-a-path), the reference orientation is the
+ vector pointing towards negative infinity in Y within the
+ current user coordinate system. (Note: in the <a
+ href="coords.html#InitialCoordinateSystem">initial coordinate
+ system</a>, the reference orientation is up.) For <a
+ href="text.html#TextOnAPath">text on a path</a>, the reference
+ orientation is reset with each character.</p>
+ <p id="InlineProgressionDirection">Based on the reference orientation and the value for
+ property <a>'writing-mode'</a>, the SVG user agent
+ determines the current <span
+ class="SVG-Term">inline-progression-direction</span>. For
+ left-to-right text, the inline-progression-direction points 90
+ degrees clockwise from the reference orientation vector. For
+ right-to-left text, the inline progression points 90 degrees
+ counter-clockwise from the reference orientation vector. For
+ top-to-bottom text, the inline-progression-direction points 180
+ degrees from the reference orientation vector.</p>
+ <p id="BlockProgressionDirection">Based on the reference orientation and the value for
+ property <a>'writing-mode'</a>, the SVG user agent
+ determines the current <span
+ class="SVG-Term">block-progression-direction</span>. For
+ left-to-right and right-to-left text, the
+ block-progression-direction points 180 degrees from the
+ reference orientation vector because the only available
+ horizontal <a>'writing-mode'</a>s are <span
+ class="prop-value">lr-tb</span> and <span
+ class="prop-value">rl-tb</span>. For top-to-bottom text, the
+ block-progression-direction always points 90 degrees
+ counter-clockwise from the reference orientation vector because
+ the only available top-to-bottom <a>'writing-mode'</a> is <span
+ class="prop-value">tb-rl</span>.</p>
+ <p id="ShiftDirection">The <span class="SVG-Term">shift direction</span> is the
+ direction towards which the <a
+ href="#FontsTablesBaselines">baseline table</a> moves
+ due to positive values for property <a>'baseline-shift'</a>. The shift
+ direction is such that a positive value shifts the baseline
+ table towards the topmost entry in the parent's <a
+ href="#FontsTablesBaselines">baseline table</a>.</p>
+ <p id="CurrentTextPosition">In processing a given <a>'text'</a> element, the SVG user
+ agent keeps track of the <span class="SVG-Term">current text
+ position</span>. The initial current text position is
+ established by the <a>'text/x'</a> and <a>'text/y'</a> attributes on the <a>'text'</a> element.</p>
+ <p>The current text position is adjusted after each glyph to
+ establish a new current text position at which the next glyph
+ shall be rendered. The adjustment to the current text position
+ is based on the current <a
+ href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>,
+ glyph-specific advance values corresponding to the <a
+ href="text.html#GlyphOrientation">glyph orientation</a> of the
+ glyph just rendered, kerning tables in the font and the current
+ values of various attributes and properties, such as the <a
+ href="text.html#SpacingProperties">spacing properties</a> and
+ any <a>'tspan/x'</a>, <a>'tspan/y'</a>, <a>'tspan/dx'</a> and
+ <a>'tspan/dy'</a> attributes on <a>'text'</a>, <a>'tspan'</a>,
+ <a>'tref'</a> or <a>'altGlyph'</a> elements. If a glyph
+ does not provide explicit advance values corresponding to the
+ current <a href="text.html#GlyphOrientation">glyph
+ orientation</a>, then an appropriate approximation should be
+ used. For vertical text, a suggested approximation is the sum
+ of the ascent and descent values for the glyph. Another
+ suggested approximation for an advance value for both
+ horizontal and vertical text is the size of an <em>em</em> (see
+ <a
+ href="fonts.html#FontFaceElementUnitsPerEmAttribute">units-per-em</a>).</p>
+ <p id="AlignmentPoint">For each glyph to be rendered, the SVG user agent determines
+ an appropriate <span class="SVG-Term">alignment-point</span> on
+ the glyph which will be placed exactly at the current text
+ position. The alignment-point is determined based on glyph cell
+ metrics in the glyph itself, the current <a
+ href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>
+ and the <a href="text.html#GlyphOrientation">glyph
+ orientation</a> relative to the inline-progression-direction.
+ For most uses of Latin text (i.e.,
+ <span class='attr-value'>writing-mode:lr</span>,
+ <span class='attr-value'>text-anchor:start</span> and
+ <span class='attr-value'>alignment-baseline:baseline</span>)
+ the alignment-point in the glyph will be the intersection of
+ left edge of the glyph cell (or some other glyph-specific
+ x-axis coordinate indicating a left-side origin point) with the
+ Latin baseline of the glyph. For many cases with top-to-bottom
+ vertical text layout, the reference point will be either a
+ glyph-specific origin point based on the set of vertical
+ baselines for the font or the intersection of the center of the
+ glyph with its <em>top line</em> (see
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#tline">Top Baseline</a>;
+ in [<a href="refs.html#ref-CSS2">CSS2</a>], section 15.4.18). If a glyph does not
+ provide explicit origin points corresponding to the current <a
+ href="text.html#GlyphOrientation">glyph orientation</a>, then
+ an appropriate approximation should be used, such as the
+ intersection of the left edge of the glyph with the appropriate
+ horizontal baseline for the glyph or intersection of the top
+ edge of the glyph with the appropriate vertical baseline. If
+ baseline tables are not available, user agents should establish
+ baseline tables that reflect common practice.</p>
+ <p id="TextChunks">Adjustments to the current text position are either <span
+ class="SVG-Term">absolute position adjustments</span> or <span
+ class="SVG-Term">relative position adjustments</span>. An
+ absolute position adjustment occurs in the following
+ circumstances:</p>
+ <ul>
+ <li>At the start of a <a>'text'</a> element</li>
+ <li>At the start of each <a>'textPath'</a> element</li>
+ <li>For each character within a <a>'text'</a>, <a>'tspan'</a>,
+ <a>'tref'</a> and <a>'altGlyph'</a> element which has an
+ <span class='attr-name'>'x'</span> or <span class='attr-name'>'y'</span>
+ attribute value assigned to it explicitly</li>
+ </ul>
+ <p>All other position adjustments to the current text position
+ are relative position adjustments.</p>
+ <p id="TextChunk">Each absolute position adjustment defines a new <span
+ class="SVG-Term">text chunk</span>. Absolute position
+ adjustments impact text layout in the following ways:</p>
+ <ul>
+ <li>Ligatures only occur when a set of characters which might
+ map to a ligature are all in the same text chunk.</li>
+ <li>Each text chunk represents a separate block of text for
+ alignment due to <a>'text-anchor'</a> property
+ values.</li>
+ <li>Reordering of characters due to <a
+ href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
+ only occurs within a text chunk. Reordering does <em>not</em>
+ happen across text chunks.</li>
+ </ul>
+ <p>The following additional rules apply to ligature
+ formation:</p>
+ <ul>
+ <li>As <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#spacing-props">defined in CSS2</a>,
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 16.4),
+ when the resultant space between two characters is not the
+ same as the default space, user agents should not use
+ ligatures; thus, if there are non-default values for
+ properties <a>'kerning'</a> or <a>'letter-spacing'</a>, the user agent
+ should not use ligatures.</li>
+ <li>Ligature formation should not be enabled for the glyphs
+ corresponding to characters within different DOM text nodes;
+ thus, characters separated by markup should not use
+ ligatures.</li>
+ <li>As mentioned above, ligature formation should not be
+ enabled for the glyphs corresponding to characters within
+ different text chunks.</li>
+ </ul>
+
+<h3 id="SettingInlineProgressionDirection">Setting the inline-progression-direction</h3>
+
+ <p>The <a>'writing-mode'</a> property specifies whether the initial
+ inline-progression-direction for a <a>'text'</a> element shall be
+ left-to-right, right-to-left, or top-to-bottom. The <a>'writing-mode'</a>
+ property applies only to <a>'text'</a> elements; the property is ignored for
+ <a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a> and <a>'textPath'</a>
+ sub-elements. (Note that the inline-progression-direction can change within
+ a <a>'text'</a> element due to the Unicode bidirectional algorithm and
+ properties <a>'direction'</a> and <a>'unicode-bidi'</a>. For more on
+ bidirectional text, see
+ <a href="text.html#RelationshipWithBiDirectionality">Relationship with bidirectionality</a>.)</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id='WritingModeProperty'><span class="propdef-title prop-name">'writing-mode'</span></dt>
+ <dd>
+ <table summary="writing-mode property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>lr-tb | rl-tb | tb-rl | lr | rl | tb | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>lr-tb</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'text'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <dl>
+ <dt><span class="attr-value">lr-tb | lr</span></dt>
+ <dd>Sets the initial inline-progression-direction to
+ left-to-right, as is common in most Latin-based documents.
+ For most characters, the <em>current text position</em> is
+ advanced from left to right after each glyph is rendered.
+ (When the character data includes characters which are
+ subject to the Unicode bidirectional algorithm, the text
+ advance rules are more complex. See <a
+ href="text.html#RelationshipWithBiDirectionality">Relationship
+ with bidirectionality</a>).</dd>
+ <dt><span class="attr-value">rl-tb | rl</span></dt>
+ <dd>Sets the initial inline-progression-direction to
+ right-to-left, as is common in Arabic or Hebrew scripts. (See
+ <a
+ href="text.html#RelationshipWithBiDirectionality">Relationship
+ with bidirectionality</a>.)</dd>
+ <dt><span class="attr-value">tb-rl | tb</span></dt>
+ <dd>Sets the initial inline-progression-direction to
+ top-to-bottom, as is common in some Asian scripts, such as
+ Chinese and Japanese. Though hardly as frequent as
+ horizontal, this type of vertical layout also occurs in Latin
+ based documents, particularly in table column or row labels.
+ In most cases, the vertical baselines running through the
+ middle of each glyph are aligned.</dd>
+ </dl>
+
+<h3 id="GlyphOrientation">Glyph orientation within a text run</h3>
+
+ <p>In some cases, it is required to alter the orientation of a
+ sequence of characters relative to the
+ inline-progression-direction. The requirement is particularly
+ applicable to vertical layouts of East Asian documents, where
+ sometimes narrow-cell Latin text is to be displayed
+ horizontally and other times vertically.</p>
+ <p>Two properties control the glyph orientation relative to the
+ reference orientation for each of the two possible
+ inline-progression-directions. <a>'glyph-orientation-vertical'</a> controls
+ glyph orientation when the inline-progression-direction is
+ vertical. <a>'glyph-orientation-horizontal'</a>
+ controls glyph orientation when the
+ inline-progression-direction is horizontal.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="GlyphOrientationVerticalProperty"><span class="propdef-title prop-name">'glyph-orientation-vertical'</span></dt>
+ <dd>
+ <table summary="glyph-orientation-vertical property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | <a
+ href="types.html#DataTypeAngle"><angle></a> |
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <dl>
+ <dt><span class="prop-value">auto</span></dt>
+ <dd>
+ <ul>
+ <li>
+ <p>Fullwidth ideographic and fullwidth Latin text will
+ be set with a glyph-orientation of 0-degrees.</p>
+ <p>Ideographic punctuation and other ideographic
+ characters having alternate horizontal and vertical
+ forms will use the vertical form of the glyph.</p>
+ </li>
+ <li>
+ <p>Text which is not fullwidth will be set with a
+ glyph-orientation of 90-degrees.</p>
+ <p>This reorientation rule applies only to the
+ first-level non-ideographic text. All further embedding
+ of writing-modes or bidi processing will be based on
+ the first-level rotation.</p>
+ <blockquote>
+ <b>NOTE:</b>
+ <ul>
+ <li>
+ <p>This is equivalent to having set the
+ non-ideographic text string horizontally honoring
+ the bidi-rule, then rotating the resultant
+ sequence of inline-areas (one area for each
+ change of glyph direction) 90-degrees
+ clockwise.</p>
+ <p>It should be noted that text set in this
+ "rotated" manner may contain ligatures or other
+ glyph combining and reordering common to the
+ language and script. (This "rotated" presentation
+ form does not disable auto-ligature formation or
+ similar context-driven variations.)</p>
+ </li>
+ <li>
+ <p>The determination of which characters should
+ be auto-rotated may vary across user agents. The
+ determination is based on a complex interaction
+ between country, language, script, character
+ properties, font, and character context. It is
+ suggested that one consult the Unicode TR 11 and
+ the various JIS or other national standards.</p>
+ </li>
+ </ul>
+ </blockquote>
+ </li>
+ </ul>
+ </dd>
+ <dt><span class="prop-value"><a
+ href="types.html#DataTypeAngle"><angle></a></span></dt>
+ <dd>The value of the angle is restricted to 0, 90, 180, and
+ 270 degrees. The user agent shall round the value of the
+ angle to the closest of the permitted values.<br />
+ A value of <span class="prop-value">0deg</span> indicates
+ that all glyphs are set with the top of the glyphs oriented
+ towards the <a
+ href="text.html#ReferenceOrientation">reference
+ orientation</a>. A value of <span
+ class="prop-value">90deg</span> indicates an orientation of
+ 90 degrees clockwise from the <a
+ href="text.html#ReferenceOrientation">reference
+ orientation</a>.</dd>
+ </dl>
+ <p>This property is applied only to text written in a vertical
+ <a>'writing-mode'</a>.</p>
+ <p>The glyph orientation affects the amount that the current
+ text position advances as each glyph is rendered. When the
+ inline-progression-direction is vertical and the <a>'glyph-orientation-vertical'</a> results
+ in an orientation angle that is a multiple of 180 degrees, then
+ the current text position is incremented according to the
+ vertical metrics of the glyph. Otherwise, if the <a>'glyph-orientation-vertical'</a> results
+ in an orientation angle that is not a multiple of 180 degrees,
+ then the current text position is incremented according to the
+ horizontal metrics of the glyph.</p>
+ <p>The text layout diagrams in this section use the following
+ symbols:</p>
+ <table>
+ <tr><th><img alt="Symbolic wide-cell glyph representation" class="example" width="39" height="39" src="images/fullwidth.png" /></th>
+ <td>wide-cell glyph (e.g. Han) which is the <em>n</em>-th glyph in the text run</td></tr>
+ <tr><th><img alt="Symbolic narrow-cell glyph representation" class="example" width="19" height="39" src="images/halfwidth.png" /></th>
+ <td>narrow-cell glyph (e.g. Latin) which is the <em>n</em>-th glyph in the text run</td></tr>
+ </table>
+ <p>The orientation which the above symbols assume in the
+ diagrams corresponds to the orientation that the Unicode
+ characters they represent are intended to assume when rendered
+ in the user agent. Spacing between the glyphs in the diagrams
+ is usually symbolic, unless intentionally changed to make a
+ point.</p>
+ <p>The diagrams below illustrate different uses of <a>'glyph-orientation-vertical'</a>. The
+ diagram on the left shows the result of the mixing of
+ full-width ideographic glyphs with narrow-cell Latin glyphs
+ when <a>'glyph-orientation-vertical'</a> for the
+ Latin characters is either <span class="prop-value">auto</span>
+ or <span class="prop-value">90</span>. The diagram on the right
+ show the result of mixing full-width ideographic glyphs with
+ narrow-cell Latin glyphs when Latin glyphs are specified to
+ have a <a>'glyph-orientation-vertical'</a> of <span
+ class="prop-value">0</span>.</p>
+ <p><img
+ alt="Layout of mixed glyphs in vertical-ideographic mode. Wide-cell glyphs are upright, Non-wide-cell glyphs are rotated by 90 degrees."
+ class="example" align="top" width="45" height="262"
+ src="images/text/lf-vi.png" /><img
+ alt="Example of mixed Japanese and English in vertical-ideographic layout. Japanese glyphs are upright, English rotated."
+ class="example" align="top" width="40" height="260"
+ src="images/text/GlyphOrientAuto.png" />
+
+ <img
+ alt="Layout of mixed glyphs in vertical mode. All glyphs are upright."
+ class="example" align="top" width="42" height="342"
+ src="images/text/lf-v.png" /><img
+ alt="Example of mixed Japanese and English in vertical layout. All glyphs are upright."
+ class="example" align="top" width="38" height="340"
+ src="images/text/GlyphOrientZero.png" /></p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="GlyphOrientationHorizontalProperty"><span class="propdef-title prop-name">'glyph-orientation-horizontal'</span></dt>
+ <dd>
+ <table summary="glyph-orientation-horizontal property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><a
+ href="types.html#DataTypeAngle"><angle></a> |
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>0deg</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <dl>
+ <dt><span class="prop-value"><a
+ href="types.html#DataTypeAngle"><angle></a></span></dt>
+ <dd>The value of the angle is restricted to 0, 90, 180, and
+ 270 degrees. The user agent shall round the value of the
+ angle to the closest of the permitted values.<br />
+ A value of <span class="prop-value">0deg</span> indicates
+ that all glyphs are set with the top of the glyphs oriented
+ towards the <a
+ href="text.html#ReferenceOrientation">reference
+ orientation</a>. A value of <span
+ class="prop-value">90deg</span> indicates an orientation of
+ 90 degrees clockwise from the <a
+ href="text.html#ReferenceOrientation">reference
+ orientation</a>.</dd>
+ </dl>
+ <p>This property is applied only to text written in a
+ horizontal <a>'writing-mode'</a>.</p>
+ <p>The glyph orientation affects the amount that the current
+ text position advances as each glyph is rendered. When the
+ reference orientation direction is horizontal and the <a>'glyph-orientation-horizontal'</a> results
+ in an orientation angle that is a multiple of 180 degrees, then
+ the current text position is incremented according to the
+ horizontal metrics of the glyph. Otherwise, if the <a>'glyph-orientation-horizontal'</a> results
+ in an orientation angle that is not a multiple of 180 degrees,
+ then the current text position is incremented according to the
+ vertical metrics of the glyph.</p>
+
+<h3 id="RelationshipWithBiDirectionality">Relationship with bidirectionality</h3>
+ <p>
+ The characters in certain scripts are written from right to
+ left. In some documents, in particular those written with the
+ Arabic or Hebrew script, and in some mixed-language contexts,
+ text in a single line may appear with mixed directionality.
+ This phenomenon is called bidirectionality, or "bidi" for
+ short.
+ </p>
+ <p>
+ The Unicode standard ([<a href="refs.html#ref-UNICODE">UNICODE</a>],
+ specifically [<a href="refs.html#ref-UAX9">UAX9</a>]) defines a
+ complex algorithm for determining the proper directionality of
+ text. The algorithm consists of an implicit part based on
+ character properties, as well as explicit controls for
+ embeddings and overrides. The
+ <a href="intro.html#TermSVGUserAgent"><span class="svg-term">SVG user agent</span></a>
+ applies this bidirectional algorithm when determining the layout of characters within a
+ <a href="intro.html#TermTextContentBlockElement"><span class="svg-term">text content block element</span></a>.
+ </p>
+
+ <p>The <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
+ and
+ <a href="text.html#DirectionProperty"><span class="attr-name">'unicode-bidi'</span></a>
+ properties allow authors to override the inherent directionality
+ of the content characters and thus explicitly control how the
+ elements and attributes of a document language map to this algorithm. These
+ two properties are applicable to all characters whose glyphs are
+ perpendicular to the inline-progression-direction.
+ </p>
+
+ <p> In many cases, the bidirectional algorithm from Unicode
+ [<a href="refs.html#ref-UNICODE">UNICODE</a>] produces the desired
+ result automatically, and in such cases the author does not need
+ to use these properties. For other cases, such as when using
+ right-to-left languages, it may be sufficient to add the
+ <a>'direction'</a> property to the <a>rootmost 'svg' element</a>,
+ and allow that direction to inherit to all text elements,
+ as in the following example (which may be used as a template):
+ </p>
+ <edit:example href="images/text/rtl-text.svg" link="yes" image="yes"/>
+
+ <p>Below is another example, where where implicit bidi reordering is not sufficient:</p>
+ <edit:example href="images/text/rtl-complex.svg" link="yes" image="yes"/>
+
+ <p>
+ Within
+ <a href="intro.html#TermTextContentElement"><span class="svg-term">text content elements</span></a>,
+ the alignment of text with regards to the
+ <a href="#TextAnchorProperty"><span class="prop-name">'text-anchor'</span></a> property
+ is determined by the value of the
+ <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
+ property. For example, given a
+ <a href="text.html#TextElement"><span class="element-name">'text'</span></a>
+ element with a
+ <a href="#TextAnchorProperty"><span class="prop-name">'text-anchor'</span></a>
+ value of <span class="prop-value">"end"</span>, for a
+ <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
+ value of <span class="prop-value">"ltr"</span>, the text will
+ extend to the left of the position of the
+ <a href="text.html#TextElement"><span class="element-name">'text'</span></a>
+ element's
+ <a href="text.html#TextElementXAttribute"><span class="attr-name">'x'</span></a>
+ attribute value, while for
+ <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
+ value of <span class="prop-value">"rtl"</span>, the text will
+ extend to the right of the position of the
+ <a href="text.html#TextElement"><span class="element-name">'text'</span></a>
+ element's
+ <a href="text.html#TextElementXAttribute"><span class="attr-name">'x'</span></a>
+ attribute value.
+ </p>
+
+ <p>A more complete discussion of bidirectionality can be found
+ in the <a href="http://www.w3.org/TR/CSS2/visuren.html#direction">Text direction</a>
+ section of CSS 2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 9.10).</p>
+ <p>The processing model for bidirectional text is as follows.
+ The user agent processes the characters which are provided in
+ <span class="SVG-Term">logical order</span> (i.e., the order
+ the characters appear in the original document, either via
+ direct inclusion or via indirect reference due a <a href="text.html#TRefElement"><span class="element-name">'tref'</span></a> element). The user agent
+ determines the set of independent blocks within each of which
+ it should apply the Unicode bidirectional algorithm. Each <a href="text.html#TextChunk">text chunk</a> represents an
+ independent block of text. Additionally, any change in glyph
+ orientation due to processing of properties <a href="text.html#GlyphOrientationHorizontalProperty"><span class="prop-name">'glyph-orientation-horizontal'</span></a> or
+ <a href="text.html#GlyphOrientationVerticalProperty"><span class="prop-name">'glyph-orientation-vertical'</span></a> will
+ subdivide the independent blocks of text further. After
+ processing the Unicode bidirectional algorithm and properties
+ <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a> and <a href="text.html#UnicodeBidiProperty"><span class="attr-name">'unicode-bidi'</span></a> on each of the
+ independent text blocks, the user agent will have a potentially
+ re-ordered list of characters which are now in left-to-right
+ rendering order. Simultaneous with re-ordering of the
+ characters, the <a href="text.html#TSpanElementDXAttribute"><span class="attr-name">dx</span></a>, <a href="text.html#TSpanElementDYAttribute"><span class="attr-name">dy</span></a> and <a href="text.html#TSpanElementRotateAttribute"><span class="attr-name">rotate</span></a> attributes on the <a href="text.html#TSpanElement"><span class="element-name">'tspan'</span></a> and <a href="text.html#TRefElement"><span class="element-name">'tref'</span></a> elements are also
+ re-ordered to maintain the original correspondence between
+ characters and attribute values. While kerning or ligature
+ processing might be font-specific, the preferred model is that
+ kerning and ligature processing occurs between combinations of
+ characters or glyphs after the characters have been
+ re-ordered.</p>
+
+
+ <div class="propdef">
+ <dl>
+ <dt id="DirectionProperty"><span class="propdef-title prop-name">'direction'</span></dt>
+ <dd>
+ <table summary="direction property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>ltr | rtl | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>ltr</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property specifies the base writing direction of text
+ and the direction of embeddings and overrides (see <a>'unicode-bidi'</a>) for the Unicode
+ bidirectional algorithm. For the <a>'direction'</a> property to have any
+ effect on an element that does not by itself establish a new <a href="text.html#TextChunks">text chunk</a>
+ (such as a <a>'tspan'</a> element without absolute position adjustments due to <a>'tspan/x'</a> or <a>'tspan/y'</a> attributes),
+ the <a>'unicode-bidi'</a> property's value
+ must be <span class='prop-value'>embed</span> or <span class='prop-value'>bidi-override</span>.</p>
+ <p>Except for any additional information provided in this
+ specification, the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-direction">normative definition</a>
+ of the <a>'direction'</a> property is in CSS2
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 9.10).</p>
+ <p>The <a>'direction'</a> property
+ applies only to glyphs oriented perpendicular to the <a
+ href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>,
+ which includes the usual case of horizontally-oriented Latin or
+ Arabic text and the case of narrow-cell Latin or Arabic
+ characters rotated 90 degrees clockwise relative to a
+ top-to-bottom inline-progression-direction.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="UnicodeBidiProperty"><span class='propdef-title prop-name'>'unicode-bidi'</span></dt>
+ <dd>
+ <table summary="unicode-bidi property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>normal | embed | bidi-override | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>normal</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>Except for any additional information provided in this
+ specification, the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-unicode-bidi">normative definition</a>
+ of the <a>'unicode-bidi'</a> property is in CSS2
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 9.10).</p>
+
+<h2 id="TextRenderingOrder">Text rendering order</h2>
+
+ <p>The glyphs associated with the characters within a <a>'text'</a> element are rendered in
+ the logical order of the characters in the original document,
+ independent of any re-ordering necessary to implement
+ bidirectionality. Thus, for text that goes right-to-left
+ visually, the glyphs associated with the rightmost character
+ are rendered before the glyphs associated with the other
+ characters.</p>
+ <p>Additionally, each distinct glyph is rendered in its
+ entirety (i.e., it is filled and stroked as specified by the <a>'fill'</a>
+ and <a>'stroke'</a> properties) before the
+ next glyph gets rendered.</p>
+
+<h2 id='AlignmentProperties'>Alignment properties</h2>
+
+<h3 id='TextAlignmentProperties'>Text alignment properties</h3>
+
+<p>The <a>'text-anchor'</a> property is used to align (start-, middle- or
+end-alignment) a string of text relative to a given point.</p>
+
+<p>The <a>'text-anchor'</a> property is applied to each individual
+<a href="text.html#TextChunks">text chunk</a> within a given <a>'text'</a>
+element. Each text chunk has an initial current text position, which represents
+the point in the user coordinate system resulting from (depending on context)
+application of the <a>'text/x'</a> and <a>'text/y'</a> attributes on the <a>'text'</a>
+element, any <a>'tspan/x'</a> or <a>'tspan/y'</a> attribute values on a <a>'tspan'</a>,
+<a>'tref'</a> or <a>'altGlyph'</a> element assigned explicitly to the first
+rendered character in a text chunk, or determination of the initial current
+text position for a <a>'textPath'</a> element.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id='TextAnchorProperty'><span class="propdef-title prop-name">'text-anchor'</span></dt>
+ <dd>
+ <table summary="text-anchor property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>start | middle | end | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>start</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>Values have the following meanings:</p>
+ <dl>
+ <dt><span class="attr-value">start</span></dt>
+ <dd>The rendered characters are aligned such that the start
+ of the resulting rendered text is at the initial current text position.
+ For an element with a
+ <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
+ property value of <span class="prop-value">"ltr"</span>
+ (typical for most European languages),
+ the left side of the text is rendered at the initial text
+ position. For an element with a
+ <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
+ property value of <span class="prop-value">"rtl"</span>
+ (typical for Arabic and Hebrew),
+ the right side of the text is rendered at the initial text
+ position. For an element with a vertical primary text
+ direction (often typical for Asian text),
+ the top side of the text is rendered at the initial text position.
+ </dd>
+ <dt><span class="attr-value">middle</span></dt>
+ <dd>The rendered characters are aligned such that the geometric middle
+ of the resulting rendered text is at the initial current text position.</dd>
+ <dt><span class="attr-value">end</span></dt>
+ <dd>The rendered characters are aligned such that the end of
+ the resulting rendered text is at the initial current text position.
+ For an element with a
+ <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
+ property value of <span class="prop-value">"ltr"</span>
+ (typical for most European languages),
+ the right side of the text is rendered at the initial text
+ position. For an element with a
+ <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
+ property value of <span class="prop-value">"rtl"</span>
+ (typical for Arabic and Hebrew),
+ the left side of the text is rendered at the initial text
+ position. For an element with a vertical primary text
+ direction (often typical for Asian text),
+ the bottom of the text is rendered at the initial text position.
+ </dd>
+ </dl>
+
+<h3 id="BaselineAlignmentProperties">Baseline alignment properties</h3>
+
+ <p>An overview of baseline alignment and baseline tables can be
+ found above in <a href="text.html#FontsTablesBaselines">Fonts,
+ font tables and baselines</a>.</p>
+ <p>One of the characteristics of international text is that
+ there are different baselines (different alignment points) for
+ glyphs in different scripts. For example, in horizontal
+ writing, ideographic scripts, such as Han Ideographs, Katakana,
+ Hiragana, and Hangul, alignment occurs with a baseline near the
+ bottoms of the glyphs; alphabetic based scripts, such as Latin,
+ Cyrillic, Hebrew, Arabic, align a point that is the bottom of
+ most glyphs, but some glyphs descend below the baseline; and
+ Indic based scripts are aligned at a point that is near the top
+ of the glyphs.</p>
+ <p>When different scripts are mixed on a line of text, an
+ adjustment must be made to ensure that the glyphs in the
+ different scripts are aligned correctly with one another.
+ OpenType [<a
+ href="http://www.microsoft.com/typography/otspec/">OPENTYPE</a>]
+ fonts have a Baseline table (BASE) [<a
+ href="http://www.microsoft.com/typography/otspec/base.htm">OPENTYPE-BASETABLE</a>]
+ that specifies the offsets of the alternative baselines from
+ the current baseline.</p>
+ <p>SVG uses a similar baseline table model that assumes one
+ script (at one font-size) is the "dominant run" during
+ processing of a <a>'text'</a> element; that is, all
+ other baselines are defined in relation to this dominant run.
+ The baseline of the script with the dominant run is called the
+ <span class="SVG-Term">dominant baseline</span>. So, for
+ example, if the dominant baseline is the alphabetic baseline,
+ there will be offsets in the baseline table for the alternate
+ baselines, such as the ideographic baseline and the Indic
+ baseline. There will also be an offset for the math baseline
+ which is used for some math fonts. Note that there are separate
+ baseline tables for horizontal and vertical writing-modes. The
+ offsets in these tables may be different for horizontal and
+ vertical writing.</p>
+ <p>The baseline table established at the start of processing of
+ a <a>'text'</a> element is called the
+ <span class="SVG-Term">dominant baseline table</span>.</p>
+ <p>Because the value of the <a>'font-family'</a> property is a list
+ of fonts, to insure a consistent choice of baseline table we
+ define the <em>nominal font</em> in a font list as the first
+ font in the list for which a glyph is available. This is the
+ first font that could contain a glyph for each character
+ encountered. (For this definition, glyph data is assumed to be
+ present if a font substitution is made or if the font is
+ synthesized.) This definition insures a content independent
+ determination of the font and baseline table that is to be
+ used.</p>
+ <p>The value of the <a>'font-size'</a> property on the <a>'text'</a> element establishes the
+ <span class="SVG-Term">dominant baseline table font
+ size</span>.</p>
+ <p>The model assumes that each glyph has a 'alignment-baseline'
+ value which specifies the baseline with which the glyph is to
+ be aligned. (The 'alignment-baseline' is called the "Baseline
+ Tag" in the OpenType baseline table description.) The initial
+ value of the <a
+ href="text.html#AlignmentBaselineProperty"><span
+ class="prop-name">'alignment-baseline'</span></a> property uses
+ the baseline identifier associated with the given glyph.
+ Alternate values for <a
+ href="text.html#AlignmentBaselineProperty"><span
+ class="prop-name">'alignment-baseline'</span></a> can be useful
+ for glyphs such as a "*" which are ambiguous with respect to
+ script membership.</p>
+ <p>The model assumes that the font from which the glyph is
+ drawn also has a baseline table, the <span
+ class="SVG-Term">font baseline table</span>. This baseline
+ table has offsets in units-per-em from the (0,0) point to each
+ of the baselines the font knows about. In particular, it has
+ the offset from the glyph's (0,0) point to the baseline
+ identified by the 'alignment-baseline'.</p>
+ <p>The offset values in the baseline table are in "design
+ units" which means fractional units of the EM. CSS calls these
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#unitsperem">"units-per-em"</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.4).
+ Thus, the current <a>'font-size'</a> is used to determine
+ the actual offset from the dominant baseline to the alternate
+ baselines.</p>
+ <p>The glyph is aligned so that its baseline identified by its
+ 'alignment-baseline' is aligned with the baseline with the same
+ name from the dominant baseline table.</p>
+ <p>The offset from the dominant baseline of the parent to the
+ baseline identified by the 'alignment-baseline' is computed
+ using the dominant baseline table and dominant baseline table
+ font size. The font baseline table and font size applicable to
+ the glyph are used to compute the offset from the identified
+ baseline to the (0,0) point of the glyph. This second offset is
+ subtracted from the first offset to get the position of the
+ (0,0) point in the <a href="text.html#ShiftDirection">shift
+ direction</a>. Both offsets are computed by multiplying the
+ baseline value from the baseline table times the appropriate
+ font size value.</p>
+ <p>If the 'alignment-baseline' identifies the dominant
+ baseline, then the first offset is zero and the glyph is
+ aligned with the dominant baseline; otherwise, the glyph is
+ aligned with the chosen alternate baseline.</p>
+ <p>The baseline-identifiers below are used in this
+ specification. Some of these are determined by baseline-tables
+ contained in a font
+ <a href="http://www.w3.org/TR/2006/REC-xsl11-20061205/#font-model">as described in XSL</a>
+ ([<a href="refs.html#ref-XSL">XSL</a>], section 7.9.1). Others
+ are computed from other font characteristics as described
+ below.</p>
+ <dl>
+ <dt><b>alphabetic</b></dt>
+ <dd>
+ <p>This identifies the baseline used by most alphabetic and
+ syllabic scripts. These include, but are not limited to,
+ many Western, Southern Indic, Southeast Asian
+ (non-ideographic) scripts.</p>
+ </dd>
+ <dt><b>ideographic</b></dt>
+ <dd>
+ <p>This identifies the baseline used by ideographic
+ scripts. For historical reasons, this baseline is at the
+ bottom of the ideographic EM box and not in the center of
+ the ideographic EM box. See the "central" baseline. The
+ ideographic scripts include Chinese, Japanese, Korean, and
+ Vietnamese Chu Nom.</p>
+ </dd>
+ <dt><b>hanging</b></dt>
+ <dd>
+ <p>This identifies the baseline used by certain Indic
+ scripts. These scripts include Devanagari, Gurmukhi and
+ Bengali.</p>
+ </dd>
+ <dt><b>mathematical</b></dt>
+ <dd>
+ <p>This identifies the baseline used by mathematical
+ symbols.</p>
+ </dd>
+ <dt><b>central</b></dt>
+ <dd>
+ <p>This identifies a computed baseline that is at the
+ center of the EM box. This baseline lies halfway between
+ the text-before-edge and text-after-edge baselines.</p>
+ <blockquote>
+ <b>NOTE:</b>
+ <p>For ideographic fonts, this baseline is often used to
+ align the glyphs; it is an alternative to the ideographic
+ baseline.</p>
+ </blockquote>
+ </dd>
+ <dt><b>middle</b></dt>
+ <dd>
+ <p>This identifies a baseline that is offset from the
+ alphabetic baseline in the <b>shift-direction</b> by 1/2
+ the value of the x-height font characteristic. The position
+ of this baseline may be obtained from the font data or, for
+ fonts that have a font characteristic for "x-height", it
+ may be computed using 1/2 the "x-height". Lacking either of
+ these pieces of information, the position of this baseline
+ may be approximated by the "central" baseline.</p>
+ </dd>
+ <dt><b>text-before-edge</b></dt>
+ <dd>
+ <p>This identifies the before-edge of the EM box. The
+ position of this baseline may be specified in the
+ baseline-table or it may be calculated.</p>
+ <blockquote>
+ <b>NOTE:</b>
+ <p>The position of this baseline is normally around or at
+ the top of the ascenders, but it may not encompass all
+ accents that can appear above a glyph. For these fonts
+ the value of the "ascent" font characteristic is used.
+ For ideographic fonts, the position of this baseline is
+ normally 1 EM in the <b>shift-direction</b> from the
+ "ideographic" baseline. However, some ideographic fonts
+ have a reduced width in the inline-progression-direction
+ to allow tighter setting. When such a font, designed only
+ for vertical writing-modes, is used in a horizontal
+ writing-mode, the "text-before-edge" baseline may be less
+ than 1 EM from the text-after-edge.</p>
+ </blockquote>
+ </dd>
+ <dt><b>text-after-edge</b></dt>
+ <dd>
+ <p>This identifies the after-edge of the EM box. The
+ position of this baseline may be specified in the
+ baseline-table or it may be calculated.</p>
+ <blockquote>
+ <b>NOTE:</b>
+ <p>For fonts with descenders, the position of this
+ baseline is normally around or at the bottom of the
+ descenders. For these fonts the value of the "descent"
+ font characteristic is used. For ideographic fonts, the
+ position of this baseline is normally at the
+ "ideographic" baseline.</p>
+ </blockquote>
+ </dd>
+ </dl>
+ <p>There are, in addition, two computed baselines that are only
+ defined for line areas. Since SVG does not support the notion
+ of computations based on line areas, the two computed baselines
+ are mapped as follows:</p>
+ <dl>
+ <dt><b>before-edge</b></dt>
+ <dd>For SVG, this is equivalent to
+ <b>text-before-edge</b>.</dd>
+ <dt><b>after-edge</b></dt>
+ <dd>For SVG, this is equivalent to
+ <b>text-after-edge</b>.</dd>
+ </dl>
+ <p>There are also four baselines that are defined only for
+ horizontal writing-modes.</p>
+ <dl>
+ <dt><b>top</b></dt>
+ <dd>
+ <p>This baseline is the same as the "before-edge" baseline
+ in a horizontal writing-mode and is undefined in a vertical
+ writing mode.</p>
+ </dd>
+ <dt id="TextTopBaselineDefinition"><b>text-top</b></dt>
+ <dd>
+ <p>This baseline is the same as the "text-before-edge"
+ baseline in a horizontal writing-mode and is undefined in a
+ vertical writing mode.</p>
+ </dd>
+ <dt><b>bottom</b></dt>
+ <dd>
+ <p>This baseline is the same as the "after-edge" baseline
+ in a horizontal writing-mode and is undefined in a vertical
+ writing mode.</p>
+ </dd>
+ <dt id="TextBottomBaselineDefinition"><b>text-bottom</b></dt>
+ <dd>
+ <p>This baseline is the same as the "text-after-edge"
+ baseline in a horizontal writing-mode and is undefined in a
+ vertical writing mode.</p>
+ </dd>
+ </dl>
+ <p>The baseline-alignment properties follow.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="DominantBaselineProperty"><span class="propdef-title prop-name">'dominant-baseline'</span></dt>
+ <dd>
+ <table summary="dominant-baseline property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | use-script | no-change | reset-size |
+ ideographic | alphabetic | hanging |
+ mathematical | central | middle | text-after-edge |
+ text-before-edge | <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ inherit</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>The "dominant-baseline" property is used to determine or
+ re-determine a scaled-baseline-table. A scaled-baseline-table
+ is a compound value with three components: a
+ baseline-identifier for the dominant-baseline, a baseline-table
+ and a baseline-table font-size. Some values of the property
+ re-determine all three values; other only re-establish the
+ baseline-table font-size. When the initial value, <span class='prop-value'>auto</span>, would
+ give an undesired result, this property can be used to
+ explicitly set the desire scaled-baseline-table.</p>
+ <p>Values for the property have the following meaning:</p>
+ <dl>
+ <dt><span class="attr-value">auto</span></dt>
+ <dd>
+ <p>If this property occurs on a <a>'text'</a> element, then the
+ computed value depends on the value of the <a>'writing-mode'</a> property. If
+ the 'writing-mode' is horizontal, then the value of the
+ dominant-baseline component is 'alphabetic', else if the
+ 'writing-mode' is vertical, then the value of the
+ dominant-baseline component is 'central'.</p>
+ <p>If this property occurs on a <a>'tspan'</a>, <a>'tref'</a>,
+ <a>'altGlyph'</a> or <a>'textPath'</a> element, then
+ the dominant-baseline and the baseline-table components
+ remain the same as those of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>. If the computed <a>'baseline-shift'</a> value
+ actually shifts the baseline, then the baseline-table
+ font-size component is set to the value of the <a>'font-size'</a> property on the
+ element on which the <a>'dominant-baseline'</a> property
+ occurs, otherwise the baseline-table font-size remains the
+ same as that of the element. If there is no parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>, the scaled-baseline-table value is constructed
+ as above for <a>'text'</a> elements.</p>
+ </dd>
+ <dt><span class="attr-value">use-script</span></dt>
+ <dd>The dominant-baseline and the baseline-table components
+ are set by determining the predominant script of the
+ character data content. The <a>'writing-mode'</a>, whether
+ horizontal or vertical, is used to select the appropriate set
+ of baseline-tables and the dominant baseline is used to
+ select the baseline-table that corresponds to that baseline.
+ The baseline-table font-size component is set to the value of
+ the <a>'font-size'</a> property on the
+ element on which the <a>'dominant-baseline'</a> property
+ occurs.</dd>
+ <dt><span class="attr-value">no-change</span></dt>
+ <dd>The dominant-baseline, the baseline-table, and the
+ baseline-table font-size remain the same as that of the
+ parent <a href="intro.html#TermTextContentElement">text
+ content element</a>.</dd>
+ <dt><span class="attr-value">reset-size</span></dt>
+ <dd>The dominant-baseline and the baseline-table remain the
+ same, but the baseline-table font-size is changed to the
+ value of the <a>'font-size'</a> property on this
+ element. This re-scales the baseline-table for the current <a>'font-size'</a>.</dd>
+ <dt><span class="attr-value">ideographic</span></dt>
+ <dd>The baseline-identifier for the dominant-baseline is set
+ to be 'ideographic', the derived baseline-table is
+ constructed using the 'ideographic' baseline-table in the
+ nominal font, and the baseline-table font-size is changed to
+ the value of the <a>'font-size'</a> property on this
+ element.</dd>
+ <dt><span class="attr-value">alphabetic</span></dt>
+ <dd>The baseline-identifier for the dominant-baseline is set
+ to be 'alphabetic', the derived baseline-table is constructed
+ using the 'alphabetic' baseline-table in the nominal font,
+ and the baseline-table font-size is changed to the value of
+ the <a>'font-size'</a> property on this
+ element.</dd>
+ <dt><span class="attr-value">hanging</span></dt>
+ <dd>The baseline-identifier for the dominant-baseline is set
+ to be 'hanging', the derived baseline-table is constructed
+ using the 'hanging' baseline-table in the nominal font, and
+ the baseline-table font-size is changed to the value of the
+ <a>'font-size'</a> property on this
+ element.</dd>
+ <dt><span class="attr-value">mathematical</span></dt>
+ <dd>The baseline-identifier for the dominant-baseline is set
+ to be 'mathematical', the derived baseline-table is
+ constructed using the 'mathematical' baseline-table in the
+ nominal font, and the baseline-table font-size is changed to
+ the value of the <a>'font-size'</a> property on this
+ element.</dd>
+ <dt><span class="attr-value">central</span></dt>
+ <dd>The baseline-identifier for the dominant-baseline is set
+ to be 'central'. The derived baseline-table is constructed
+ from the defined baselines in a baseline-table in the nominal
+ font. That font baseline-table is chosen using the following
+ priority order of baseline-table names: 'ideographic',
+ 'alphabetic', 'hanging', 'mathematical'. The baseline-table
+ font-size is changed to the value of the <a>'font-size'</a> property on this
+ element.</dd>
+ <dt><span class="attr-value">middle</span></dt>
+ <dd>The baseline-identifier for the dominant-baseline is set
+ to be 'middle'. The derived baseline-table is constructed
+ from the defined baselines in a baseline-table in the nominal
+ font. That font baseline -table is chosen using the following
+ priority order of baseline-table names: 'alphabetic',
+ 'ideographic', 'hanging', 'mathematical'. The baseline-table
+ font-size is changed to the value of the <a>'font-size'</a> property on this
+ element.</dd>
+ <dt><span class="attr-value">text-after-edge</span></dt>
+ <dd>The baseline-identifier for the dominant-baseline is set
+ to be 'text-after-edge'. The derived baseline-table is
+ constructed from the defined baselines in a baseline-table in
+ the nominal font. The choice of which font baseline-table to
+ use from the baseline-tables in the nominal font is
+ implementation defined. The baseline-table font-size is
+ changed to the value of the <a>'font-size'</a> property on this
+ element.<br />
+ <br />
+ NOTE: using the following priority order of baseline-table
+ names: 'alphabetic', 'ideographic', 'hanging', 'mathematical'
+ is probably a reasonable strategy for determining which font
+ baseline-table to use.</dd>
+ <dt><span class="attr-value">text-before-edge</span></dt>
+ <dd>The baseline-identifier for the dominant-baseline is set
+ to be 'text-before-edge'. The derived baseline-table is
+ constructed from the defined baselines in a baseline-table in
+ the nominal font. The choice of which baseline-table to use
+ from the baseline-tables in the nominal font is
+ implementation defined. The baseline-table font-size is
+ changed to the value of the <a>'font-size'</a> property on this
+ element.<br />
+ <br />
+ NOTE: Using the following priority order of baseline-table
+ names: 'alphabetic', 'ideographic', 'hanging', 'mathematical'
+ is probably a reasonable strategy for determining which font
+ baseline-table to use.</dd>
+ </dl>
+ <p>If there is no baseline table in the nominal font or if the
+ baseline table lacks an entry for the desired baseline, then
+ the user agent may use heuristics to determine the position of
+ the desired baseline.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="AlignmentBaselineProperty"><span class="propdef-title prop-name">'alignment-baseline'</span></dt>
+ <dd>
+ <table summary="alignment-baseline property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | baseline | before-edge | text-before-edge
+ | middle | central | after-edge | text-after-edge |
+ ideographic | alphabetic | hanging | mathematical |
+ <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ inherit</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property specifies how an object is aligned with
+ respect to its parent. This property specifies which baseline
+ of this element is to be aligned with the corresponding
+ baseline of the parent. For example, this allows alphabetic
+ baselines in Roman text to stay aligned across font size
+ changes. It defaults to the baseline with the same name as the
+ computed value of the alignment-baseline property. That is, the
+ position of "ideographic" alignment-point in the
+ <b>block-progression-direction</b> is the position of the
+ "ideographic" baseline in the baseline-table of the object
+ being aligned.</p>
+ <p>Values have the following meanings:</p>
+ <dl>
+ <dt><b>auto</b></dt>
+ <dd>The value is the dominant-baseline of the script to which
+ the character belongs - i.e., use the dominant-baseline of
+ the parent.</dd>
+ <dt><b>baseline</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the dominant-baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>before-edge</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "before-edge" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>text-before-edge</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "text-before-edge" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>middle</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "middle" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>central</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "central" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>after-edge</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "after-edge" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>text-after-edge</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "text-after-edge" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>ideographic</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "ideographic" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>alphabetic</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "alphabetic" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>hanging</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "hanging" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ <dt><b>mathematical</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "mathematical" baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>.</dd>
+ </dl>
+
+ <div class="propdef">
+ <dl>
+ <dt id="BaselineShiftProperty"><span class="propdef-title prop-name">'baseline-shift'</span></dt>
+ <dd>
+ <table summary="baseline-shift property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>baseline | sub | super | <a
+ href="types.html#DataTypePercentage"><percentage></a>
+ | <a
+ href="types.html#DataTypeLength"><length></a> |
+ <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ inherit</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>baseline</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>refers to the "line-height" of the <a>'text'</a> element, which
+ in the case of SVG is defined to be equal to the <a>'font-size'</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>The <a>'baseline-shift'</a> property
+ allows repositioning of the dominant-baseline relative to the
+ dominant-baseline of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>. The shifted object might be a sub- or superscript.
+ Within the shifted object, the whole baseline-table is offset;
+ not just a single baseline. The amount of the shift is
+ determined from information from the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>, the sub- or superscript offset from the nominal
+ font of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a>, percent of the "line-height" of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a> or an absolute value.</p>
+ <p>In SVG, the <a>'baseline-shift'</a>
+ property represents a supplemental adjustment to the baseline
+ tables. The <a>'baseline-shift'</a>
+ property shifts the baseline tables for each glyph to temporary
+ new positions, for example to lift the glyph into superscript
+ or subscript position, but it does not effect the current text
+ position. When the current text position is adjusted after
+ rendering a glyph to take into account glyph advance values,
+ the adjustment happens as if there were no baseline shift.</p>
+ <p><a>'baseline-shift'</a> properties
+ can nest. Each nested <a>'baseline-shift'</a> is added to previous
+ baseline shift values.</p>
+ <p>Values for the property have the following meaning:</p>
+ <dl>
+ <dt><strong>baseline</strong></dt>
+ <dd>There is no baseline shift; the dominant-baseline remains
+ in its original position.</dd>
+ <dt><strong>sub</strong></dt>
+ <dd>The dominant-baseline is shifted to the default position
+ for subscripts. The offset to this position is determined
+ using the font data for the nominal font. Because in most
+ fonts the subscript position is normally given relative to
+ the "alphabetic" baseline, the user agent may compute the
+ effective position for subscripts for superscripts when some
+ other baseline is dominant. The suggested computation is to
+ subtract the difference between the position of the dominant
+ baseline and the position of the "alphabetic" baseline from
+ the position of the subscript. The resulting offset is
+ determined by multiplying the effective subscript position by
+ the dominant baseline-table font-size. If there is no
+ applicable font data the user agent may use heuristics to
+ determine the offset.</dd>
+ <dt><strong>super</strong></dt>
+ <dd>The dominant-baseline is shifted to the default position
+ for superscripts. The offset to this position is determined
+ using the font data for the nominal font. Because in most
+ fonts the superscript position is normally given relative to
+ the "alphabetic" baseline, the user agent may compute the
+ effective position for superscripts when some other baseline
+ is dominant. The suggested computation is to subtract the
+ difference between the position of the dominant baseline and
+ the position of the "alphabetic" baseline from the position
+ of the superscript. The resulting offset is determined by
+ multiplying the effective superscript position by the
+ dominant baseline-table font-size. If there is no applicable
+ font data the user agent may use heuristics to determine the
+ offset.</dd>
+ <dt><strong><percentage></strong></dt>
+ <dd>The computed value of the property is this percentage
+ multiplied by the computed "line-height" of the <a>'text'</a> element. The
+ dominant-baseline is shifted in the <a
+ href="text.html#ShiftDirection">shift direction</a> (positive
+ value) or opposite to the <a
+ href="text.html#ShiftDirection">shift direction</a> (negative
+ value) of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a> by the computed value. A value of "0%" is
+ equivalent to "baseline".</dd>
+ <dt><strong><length></strong></dt>
+ <dd>The dominant-baseline is shifted in the <a
+ href="text.html#ShiftDirection">shift direction</a> (positive
+ value) or opposite to the <a
+ href="text.html#ShiftDirection">shift direction</a> (negative
+ value) of the parent <a
+ href="intro.html#TermTextContentElement">text content
+ element</a> by the <length> value. A value of "0cm" is
+ equivalent to "baseline".</dd>
+ </dl>
+
+<h2 id="FontPropertiesUsedBySVG">Font selection properties</h2>
+
+ <p>SVG uses the following font specification properties. Except
+ for any additional information provided in this specification,
+ the <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-specification">normative definition of these properties</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter section 15.2).
+ Any SVG-specific notes about these properties are contained in
+ the descriptions below.</p>
+ <p>Note also <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/about.html#property-defs">the rules for expressing the syntax of CSS property values</a>
+ ([<a href="refs.html#ref-CSS2">CSS2</a>], section 1.3.2).</p>
+ <div class="propdef">
+ <dl>
+ <dt id="FontFamilyProperty"><span class="propdef-title prop-name">'font-family'</span></dt>
+ <dd>
+ <table summary="font-family property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>[[ <family-name> |<br />
+ <generic-family> ],]* [<family-name>
+ |<br />
+ <generic-family>] | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>depends on user agent</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property indicates which font family is to be used to
+ render the text, specified as a prioritized list of font family
+ names and/or generic family names.
+ Unless the family name corresponds to a CSS IDENT, it must be quoted.
+ Except for any additional
+ information provided in this specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font-family">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.2.2).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FontStyleProperty"><span class="propdef-title prop-name">'font-style'</span></dt>
+ <dd>
+ <table summary="font-style property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>normal | italic | oblique | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>normal</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property specifies whether the text is to be rendered
+ using a normal, italic or oblique face. Except for any
+ additional information provided in this specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font-style">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.2.3).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FontVariantProperty"><span class="propdef-title prop-name">'font-variant'</span></dt>
+ <dd>
+ <table summary="font-variant property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>normal | small-caps | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>normal</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property indicates whether the text is to be rendered
+ using the normal glyphs for lowercase characters or using
+ small-caps glyphs for lowercase characters. Except for any
+ additional information provided in this specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font-variant">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.2.3).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FontWeightProperty"><span class="propdef-title prop-name">'font-weight'</span></dt>
+ <dd>
+ <table summary="font-weight property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>normal | bold | bolder | lighter | 100 | 200 |
+ 300<br />
+ | 400 | 500 | 600 | 700 | 800 | 900 | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>normal</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property refers to the boldness or lightness of the
+ glyphs used to render the text, relative to other fonts in the
+ same font family. Except for any additional information
+ provided in this specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font-weight">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.2.3).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FontStretchProperty"><span class="propdef-title prop-name">'font-stretch'</span></dt>
+ <dd>
+ <table summary="font-stretch property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>normal | wider | narrower |<br />
+ ultra-condensed | extra-condensed |<br />
+ condensed | semi-condensed |<br />
+ semi-expanded | expanded |<br />
+ extra-expanded | ultra-expanded | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>normal</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property indicates the desired amount of condensing or
+ expansion in the glyphs used to render the text. Except for any
+ additional information provided in this specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font-stretch">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.2.3).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FontSizeProperty"><span class="propdef-title prop-name">'font-size'</span></dt>
+ <dd>
+ <table summary="font-size property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><absolute-size> | <relative-size>
+ |<br />
+ <length> | <percentage> | <a
+ class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>medium</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes, the computed value is inherited</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>refer to parent element's font size</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property refers to the size of the font from baseline
+ to baseline when multiple lines of text are set solid in a
+ multiline layout environment. For SVG, if a <span
+ class="prop-value"><length></span> is provided without a
+ unit identifier (e.g., an unqualified number such as <span
+ class="attr-value">128</span>), the SVG user agent processes
+ the <span class="prop-value"><length></span> as a height
+ value in the current user coordinate system.</p>
+ <p>If a <span class="prop-value"><length></span> is
+ provided with one of the <a
+ href="coords.html#Units">unit identifiers</a> (e.g.,
+ <span class="attr-value">12pt</span> or <span
+ class="attr-value">10%</span>), then the SVG user agent
+ converts the <span class="prop-value"><length></span>
+ into a corresponding value in the current user coordinate
+ system by applying the rules described in <a
+ href="coords.html#Units">Units</a>.</p>
+ <p>Except for any additional information provided in this
+ specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font-size">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.2.4).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FontSizeAdjustProperty"><span class="propdef-title prop-name">'font-size-adjust'</span></dt>
+ <dd>
+ <table summary="font-size-adjust property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><number> | none | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>none</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes (non-additive)</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property allows authors to specify an aspect value for
+ an element that will preserve the x-height of the first choice
+ font in a substitute font. Except for any additional
+ information provided in this specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font-size-adjust">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.2.4).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="FontProperty"><span class="propdef-title prop-name">'font'</span></dt>
+ <dd>
+ <table summary="font property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>[ [ <span
+ class="propinst-font-style"><'font-style'></span>
+ || <span
+ class="propinst-font-variant"><'font-variant'></span>
+ || <span
+ class="propinst-font-weight"><'font-weight'></span>
+ ]?<br />
+ <'font-size'> [ / <'line-height'> ]?
+ <'font-family'> ] |<br />
+ caption | icon | menu | message-box |<br />
+ small-caption | status-bar | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>see individual properties</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>allowed on 'font-size' and 'line-height' (Note:
+ for the purposes of processing the <a>'font property'</a> property in
+ SVG, 'line-height' is assumed to be equal the value
+ for property <a>'font-size'</a>)</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes (non-additive)</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>Shorthand property for setting <a>'font-style'</a>, <a>'font-variant'</a>,
+ <a>'font-weight'</a>, <a>'font-size'</a>, <span class='prop-name'>'line-height'</span> and <a>'font-family'</a>.
+ The <span class='prop-name'>'line-height'</span> property has no effect on text layout in SVG.
+ For the purposes of the <a>'font property'</a>
+ property, <span class='prop-name'>'line-height'</span> is assumed to be equal to the value of
+ the <a>'font-size'</a> property. <a
+ href="conform.html#ConformingSVGViewers">Conforming SVG
+ Viewers</a> are not required to support the various system font
+ options (caption, icon, menu, message-box, small-caption and
+ status-bar) and can use a system font or one of the generic
+ fonts instead.</p>
+ <p>Except for any additional information provided in this
+ specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.2.5).</p>
+
+<h2 id="SpacingProperties">Spacing properties</h2>
+
+ <p>Three properties affect the space between characters and
+ words:</p>
+ <ul>
+ <li><a>'kerning'</a> indicates whether the
+ user agent should adjust inter-glyph spacing based on kerning
+ tables that are included in the relevant font (i.e., enable
+ auto-kerning) or instead disable auto-kerning and instead set
+ inter-character spacing to a specific length (typically,
+ zero).</li>
+ <li><a>'letter-spacing'</a> indicates an
+ amount of space that is to be added between text characters
+ supplemental to any spacing due to the <a>'kerning'</a> property.</li>
+ <li><a>'word-spacing'</a> indicates the
+ spacing behavior between words.</li>
+ </ul>
+
+ <div class="propdef">
+ <dl>
+ <dt id="KerningProperty"><span class="propdef-title prop-name">'kerning'</span></dt>
+ <dd>
+ <table summary="kerning property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>auto | <length> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>The value of <span class="prop-value">auto</span> indicates
+ that the user agent should adjust inter-glyph spacing based on
+ kerning tables that are included in the font that will be used
+ (i.e., enable auto-kerning).</p>
+ <p>If a <span class="prop-value"><length></span> is
+ provided, then auto-kerning is disabled. Instead,
+ inter-character spacing is set to the given <span
+ class="prop-value"><length></span>. The most common
+ scenario, other than <span class="prop-value">auto</span>, is
+ to set <a>'kerning'</a> to a value of
+ <span class="prop-value">0</span> so that auto-kerning is
+ disabled.</p>
+ <p>If a <span class="prop-value"><length></span> is
+ provided without a unit identifier (e.g., an unqualified number
+ such as <span class="attr-value">128</span>), the SVG user
+ agent processes the <span
+ class="prop-value"><length></span> as a width value in
+ the current user coordinate system.</p>
+ <p>If a <span class="prop-value"><length></span> is
+ provided with one of the <a
+ href="coords.html#Units">unit identifiers</a> (e.g.,
+ <span class="attr-value">.25em</span> or <span
+ class="attr-value">1%</span>), then the SVG user agent converts
+ the <span class="prop-value"><length></span> into a
+ corresponding value in the current user coordinate system by
+ applying the rules described in <a
+ href="coords.html#Units">Units</a>.</p>
+ <p>When a <span class="prop-value"><length></span> is
+ provided, its value is added to the inter-character spacing
+ value specified by the <a>'letter-spacing'</a> property.</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="LetterSpacingProperty"><span class="propdef-title prop-name">'letter-spacing'</span></dt>
+ <dd>
+ <table summary="letter-spacing property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>normal | <length> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>normal</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property specifies spacing behavior between text
+ characters supplemental to any spacing due to the <a>'kerning'</a> property.</p>
+ <p>For SVG, if a <span class="prop-value"><length></span>
+ is provided without a unit identifier (e.g., an unqualified
+ number such as <span class="attr-value">128</span>), the SVG
+ user agent processes the <span
+ class="prop-value"><length></span> as a width value in
+ the current user coordinate system.</p>
+ <p>If a <span class="prop-value"><length></span> is
+ provided with one of the <a
+ href="coords.html#Units">unit identifiers</a> (e.g.,
+ <span class="attr-value">.25em</span> or <span
+ class="attr-value">1%</span>), then the SVG user agent converts
+ the <span class="prop-value"><length></span> into a
+ corresponding value in the current user coordinate system by
+ applying the rules described in <a
+ href="coords.html#Units">Units</a>.</p>
+ <p>Except for any additional information provided in this
+ specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#propdef-letter-spacing">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 16.4).</p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="WordSpacingProperty"><span class="propdef-title prop-name">'word-spacing'</span></dt>
+ <dd>
+ <table summary="word-spacing property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>normal | <length> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>normal</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>yes</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property specifies spacing behavior between words. For
+ SVG, if a <span class="prop-value"><length></span> is
+ provided without a unit identifier (e.g., an unqualified number
+ such as <span class="attr-value">128</span>), the SVG user
+ agent processes the <span
+ class="prop-value"><length></span> as a width value in
+ the current user coordinate system.</p>
+ <p>If a <span class="prop-value"><length></span> is
+ provided with one of the <a
+ href="coords.html#Units">unit identifiers</a> (e.g.,
+ <span class="attr-value">.25em</span> or <span
+ class="attr-value">1%</span>), then the SVG user agent converts
+ the <span class="prop-value"><length></span> into a
+ corresponding value in the current user coordinate system by
+ applying the rules described in <a
+ href="coords.html#Units">Units</a>.</p>
+ <p>Except for any additional information provided in this
+ specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#propdef-word-spacing">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 16.4).</p>
+
+<h2 id="TextDecorationProperties">Text decoration</h2>
+
+ <div class="propdef">
+ <dl>
+ <dt id="TextDecorationProperty"><span class="propdef-title prop-name">'text-decoration'</span></dt>
+ <dd>
+ <table summary="text-decoration property"
+ class="propinfo" cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>none | [ underline || overline || line-through ||
+ blink ] | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>none</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a href="intro.html#TermTextContentElement">text
+ content elements</a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no (see prose)</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+ <p>This property describes decorations that are added to the
+ text of an element. <a
+ href="conform.html#ConformingSVGViewers">Conforming SVG
+ Viewers</a> are not required to support the
+ <strong>blink</strong> value.</p>
+ <p>Except for any additional information provided in this
+ specification, the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#propdef-text-decoration">normative definition of the property</a>
+ is in CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], section 16.3.1).</p>
+ <p>The CSS2 specification defines the
+ behavior of the <a>'text-decoration'</a> property using the
+ terminology "block-level elements" and "inline elements". For
+ the purposes of the <a>'text-decoration'</a> property and SVG, a
+ <a>'text'</a> element represents a
+ block-level element and any of the potential children of a <a>'text'</a>
+ element (e.g., a <a>'tspan'</a>) represent inline elements.</p>
+ <p>Also, the CSS2 definition of <a>'text-decoration'</a> specifies that the
+ "color of the decorations" remain the same on descendant
+ elements. Since SVG offers a painting model consisting of the
+ ability to apply various types of paint (see <a
+ href="painting.html">Painting: Filling, Stroking and Marker
+ Symbols</a>) to both the interior (i.e., the "fill") and the
+ outline (i.e., the "stroke") of text, for SVG the <a>'text-decoration'</a> property is defined
+ such that, for an element which has a specified value for the
+ <a>'text-decoration'</a> property, all
+ decorations on its content and that of its descendants are
+ rendered using the same fill and stroke properties as are
+ present on the given element. If the <a>'text-decoration'</a> property is
+ specified on a descendant, then that overrides the
+ ancestor.</p>
+ <p>Because SVG allows text to be both filled and stroked,
+ drawing order matters in some circumstances with text
+ decorations. Text decoration drawing order should be as
+ follows:</p>
+ <ul>
+ <li>All text decorations except line-through should be drawn
+ before the text is filled and stroked; thus, the text is
+ rendered on top of these decorations.</li>
+ <li>Line-through should be drawn after the text is filled and
+ stroked; thus, the line-through is rendered on top of the
+ text.</li>
+ </ul>
+ <a id="ExampleTextDecoration01"
+ name="ExampleTextDecoration01"></a>
+ <p><span class="example-ref">Example textdecoration01</span>
+ provides examples for <a>'text-decoration'</a>. The first line of
+ text has no value for <a>'text-decoration'</a>, so the initial
+ value of <span class="prop-value">text-decoration:none</span>
+ is used. The second line shows <span
+ class="prop-value">text-decoration:line-through</span>. The
+ third line shows <span
+ class="prop-value">text-decoration:underline</span>. The
+ fourth line illustrates the rule whereby decorations are
+ rendered using the same fill and stroke properties as are
+ present on the element for which the <a>'text-decoration'</a> is specified. Since
+ <a>'text-decoration'</a> is specified
+ on the <a>'text'</a> element, all text within
+ the <a>'text'</a> element has its
+ underline rendered with the same fill and stroke properties as
+ exist on the <a>'text'</a> element (i.e., blue
+ fill, red stroke), even though the various words have different
+ fill and stroke property values. However, the word "different"
+ explicitly specifies a value for <a>'text-decoration'</a>; thus, its underline
+ is rendered using the fill and stroke properties as the <a>'tspan'</a> element that surrounds
+ the word "different" (i.e., yellow fill, darkgreen stroke):</p>
+
+<edit:example href='images/text/textdecoration01.svg' name='textdecoration01' description="behavior of 'text-decoration' property" image='yes' link='yes'/>
+
+<h2 id="TextOnAPath">Text on a path</h2>
+
+<edit:with element='textPath'>
+
+<h3 id="TextOnAPathIntroduction">Introduction to text on a path</h3>
+
+<p>In addition to text drawn in a straight line, SVG also includes the ability
+to place text along the shape of a <a>'path'</a> element. To specify that a
+block of text is to be rendered along the shape of a <a>'path'</a>, include
+the given text within a <a>'textPath'</a> element which includes an
+<a>'xlink:href'</a> attribute with an <a href="intro.html#TermIRIReference">IRI reference</a>
+to a <a>'path'</a> element.</p>
+
+<h3 id="TextPathElement">The <span class="element-name">'textPath'</span> element</h3>
+
+<edit:elementsummary name='textPath'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="TextPathElementStartOffsetAttribute"><span
+ class="adef">startOffset</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeLength"><length></a></span>"</dt>
+ <dd>An offset from the start of the <a>'path'</a> for the initial
+ current text position, calculated using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm.<br />
+ If a <a
+ href="types.html#DataTypeLength"><length></a> other
+ than a percentage is given, then the <a>'startOffset'</a> represents a distance
+ along the path measured in the current user coordinate
+ system.<br />
+ If a percentage is given, then the <a>'startOffset'</a> represents a
+ percentage distance along the entire path. Thus, <span
+ class="attr-value">startOffset="0%"</span> indicates the
+ start point of the <a>'path'</a> and <span
+ class="attr-value">startOffset="100%"</span> indicates the
+ end point of the <a>'path'</a>.<br />
+ <br />
+ If the attribute is not specified, the effect is as if a
+ value of "0" were specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt><a id="TextPathElementMethodAttribute"
+ name="TextPathElementMethodAttribute"></a> <span
+ class="adef">method</span> = "<span
+ class="attr-value">align | stretch</span>"</dt>
+ <dd>Indicates the method by which text should be rendered
+ along the path.<br />
+ A value of <span class="attr-value">align</span> indicates
+ that the glyphs should be rendered using simple 2x3
+ transformations such that there is no stretching/warping of
+ the glyphs. Typically, supplemental rotation, scaling and
+ translation transformations are done for each glyph to be
+ rendered. As a result, with <span
+ class="attr-value">align</span>, fonts where the glyphs are
+ designed to be connected (e.g., cursive fonts), the
+ connections may not align properly when text is rendered
+ along a path.<br />
+ A value of <span class="attr-value">stretch</span>
+ indicates that the glyph outlines will be converted into
+ paths, and then all end points and control points will be
+ adjusted to be along the perpendicular vectors from the
+ path, thereby stretching and possibly warping the glyphs.
+ With this approach, connected glyphs, such as in cursive
+ scripts, will maintain their connections.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">align</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt><a id="TextPathElementSpacingAttribute"
+ name="TextPathElementSpacingAttribute"></a> <span
+ class="adef">spacing</span> = "<span
+ class="attr-value">auto | exact</span>"</dt>
+ <dd>Indicates how the user agent should determine the
+ spacing between glyphs that are to be rendered along a
+ path.<br />
+ A value of <span class="attr-value">exact</span> indicates
+ that the glyphs should be rendered exactly according to the
+ spacing rules as specified in <a
+ href="text.html#TextpathLayoutRules">Text on a path layout
+ rules</a>.<br />
+ A value of <span class="attr-value">auto</span> indicates
+ that the user agent should use text-on-a-path layout
+ algorithms to adjust the spacing between glyphs in order to
+ achieve visually appealing results.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">exact</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt><a id="TextPathElementHrefAttribute"
+ name="TextPathElementHrefAttribute"></a> <span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="linking.html#IRIReference">IRI
+ reference</a> to the <a>'path'</a> element onto which
+ the glyphs will be rendered. If <iri> is an invalid
+ reference (e.g., no such element exists, or the referenced
+ element is not a <a>'path'</a>), then the <a>'textPath'</a> element is
+ in error and its entire contents shall not be rendered by the user
+ agent.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ </dl>
+ </div>
+ <p>The path data coordinates within the referenced <a>'path'</a>
+ element are assumed to be in the same coordinate system as the
+ current <a>'text'</a> element, not in the coordinate system where
+ the <a>'path'</a> element is defined. The <a>'transform'</a>
+ attribute on the referenced <a>'path'</a> element represents a
+ supplemental transformation relative to the current user coordinate
+ system for the current <a>'text'</a> element, including any
+ adjustments to the current user coordinate system due to a possible
+ <a>'transform'</a> attribute on the current <a>'text'</a> element.
+ For example, the following fragment of SVG content:</p>
+<pre>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+ <g <span
+style="font-weight:bold; color:red">transform="translate(25,25)"</span>>
+ <defs>
+ <path id="path1" <span
+style="font-weight:bold; color:green">transform="scale(2)"</span> d="..." fill="none" stroke="red"/>
+ </defs>
+ </g>
+ <text <span
+style="font-weight:bold; color:blue">transform="rotate(45)"</span>>
+ <textPath xlink:href="#path1">Text along path1</textPath>
+ </text>
+</svg>
+</pre>
+ <p>should have the same effect as the following:</p>
+<pre>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+ <g <span
+style="font-weight:bold; color:blue">transform="rotate(45)"</span>>
+ <defs>
+ <path id="path1" <span
+style="font-weight:bold; color:green">transform="scale(2)"</span> d="..." fill="none" stroke="red"/>
+ </defs>
+ <text>
+ <textPath xlink:href="#path1">Text along path1</textPath>
+ </text>
+ </g>
+</svg>
+</pre>
+ <p>Note that the <code
+ style="font-weight:bold; color:red">transform="translate(25,25)"</code>
+ has no effect on the <a>'textPath'</a> element, whereas the
+ <code
+ style="font-weight:bold; color:blue">transform="rotate(45)"</code>
+ applies to both the <a>'text'</a>
+ and the use of the <a>'path'</a>
+ element as the referenced shape for text on a path.</p>
+
+ <p id="ExampleToap01"><span class="example-ref">Example toap01</span> provides a
+ simple example of text on a path:</p>
+
+<edit:example href='images/text/toap01.svg' name='toap01' description="simple text on a path" image='yes' link='yes'/>
+
+ <p id="ExampleToap02"><span class="example-ref">Example toap02</span> shows how <a>'tspan'</a> elements can be
+ included within <a>'textPath'</a>
+ elements to adjust styling attributes and adjust the current
+ text position before rendering a particular glyph. The first
+ occurrence of the word "up" is filled with the color red.
+ Attribute <a>'tspan/dy'</a> is used to lift the word "up"
+ from the baseline.</p>
+
+<edit:example href='images/text/toap02.svg' name='toap02' description="tspan within textPath" image='yes' link='yes'/>
+
+ <p id="ExampleToap03"><span class="example-ref">Example toap03</span> demonstrates
+ the use of the <a>'startOffset'</a>
+ attribute on the <a>'textPath'</a>
+ element to specify the start position of the text string as a
+ particular position along the path. Notice that glyphs that
+ fall off the end of the path are not rendered (see <a
+ href="text.html#TextpathLayoutRules">text on a path layout
+ rules</a>).</p>
+
+<edit:example href='images/text/toap03.svg' name='toap03' description="text on a path with startOffset attribute" image='yes' link='yes'/>
+
+<h3 id="TextpathLayoutRules">Text on a path layout rules</h3>
+
+ <p>Conceptually, for text on a path the target path is
+ stretched out into either a horizontal or vertical straight
+ line segment. For horizontal text layout flows, the path is
+ stretched out into a hypothetical horizontal line segment such
+ that the start of the path is mapped to the left of the line
+ segment. For vertical text layout flows, the path is stretched
+ out into a hypothetical vertical line segment such that the
+ start of the path is mapped to the top of the line segment. The
+ standard <a href="text.html#TextLayout">text layout</a> rules
+ are applied to the hypothetical straight line segment and the
+ result is mapped back onto the target path. Vertical and
+ bidirectional <a href="text.html#TextLayout">text layout</a>
+ rules also apply to text on a path.</p>
+ <p>The <a href="text.html#ReferenceOrientation">reference
+ orientation</a> is determined individually for each glyph that
+ is rendered along the path. For horizontal text layout flows,
+ the reference orientation for a given glyph is the vector that
+ starts at the intersection point on the path to which the glyph
+ is attached and which points in the direction 90 degrees
+ counter-clockwise from the angle of the curve at the
+ intersection point. For vertical text layout flows, the
+ reference orientation for a given glyph is the vector that
+ starts at the intersection point on the path to which the glyph
+ is attached and which points in the direction 180 degrees from
+ the angle of the curve at the intersection point.</p>
+
+ <p id="ExampleToap04"><span class="example-ref">Example toap04</span> will be used
+ to illustrate the particular layout rules for text on a path
+ that supplement the basic <a href="text.html#TextLayout">text
+ layout</a> rules for straight line horizontal or vertical
+ text.</p>
+
+<edit:example href='images/text/toap04.svg' name='toap04' description="text on a path layout rules" image='yes' link='yes'/>
+
+ <p>The following picture does an initial zoom in on the first
+ glyph in the <a>'text'</a> element.</p>
+ <img alt="Image that shows text on a path"
+ src="images/text/toap05.png" width="288" height="91" />
+ <p>The small dot above shows the point at which the glyph is
+ attached to the path. The box around the glyph shows the glyph
+ is rotated such that its horizontal axis is parallel to the
+ tangent of the curve at the point at which the glyph is
+ attached to the path. The box also shows the glyph's
+ <span id="CharWidth" class="SVG-Term">charwidth</span> (i.e., the amount which
+ the current text position advances horizontally when the glyph
+ is drawn using horizontal text layout).</p>
+ <p>The next picture zooms in further to demonstrate the
+ detailed layout rules.</p>
+ <img alt="Image that shows text on a path"
+ src="images/text/toap06.png" width="288" height="176" />
+ <p>For left-to-right horizontal text layout along a path (i.e.,
+ when the glyph orientation is perpendicular to the <a
+ href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>),
+ the layout rules are as follows:</p>
+ <ul>
+ <li>Determine the <span id="StartPointOnPath" class="SVG-Term">startpoint-on-the-path</span> for the
+ first glyph using attribute <a>'startOffset'</a> and property
+ <a>'text-anchor'</a>. For <span class='prop-value'>text-anchor:start</span>,
+ startpoint-on-the-path is the point on the path which
+ represents the point on the path which is <a>'startOffset'</a> distance along the
+ path from the start of the path, calculated using the user
+ agent's <a href="paths.html#DistanceAlongAPath">distance
+ along the path</a> algorithm. For <span class="prop-value">text-anchor:middle</span>,
+ startpoint-on-the-path is the point on the path which
+ represents the point on the path which is [ <a>'startOffset'</a> minus half of the
+ total advance values for all of the glyphs in the <a>'textPath'</a> element ] distance
+ along the path from the start of the path, calculated using
+ the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm. For <span class="prop-value">text-anchor:end</span>,
+ startpoint-on-the-path is the point on the path which
+ represents the point on the path which is [ <a>'startOffset'</a> minus the total
+ advance values for all of the glyphs in the <a>'textPath'</a> element ]. Before
+ rendering the first glyph, the horizontal component of the
+ startpoint-on-the-path is adjusted to take into account
+ various horizontal alignment text properties and attributes,
+ such as a <a>'tspan/dx'</a> attribute value on a <a>'tspan'</a> element. (In the
+ picture above, the startpoint-on-the-path is the leftmost dot
+ on the path.)</li>
+ <li>Determine the glyph's charwidth (i.e., the amount which
+ the current text position advances horizontally when the
+ glyph is drawn using horizontal text layout). (In the picture
+ above, the charwidth is the distance between the two dots at
+ the side of the box.)</li>
+ <li>Determine the point on the curve which is charwidth
+ distance along the path from the startpoint-on-the-path for
+ this glyph, calculated using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm. This point is the <span id="EndPointOnPath" class="SVG-Term">endpoint-on-the-path</span> for the
+ glyph. (In the picture above, the endpoint-on-the-path for
+ the glyph is the rightmost dot on the path.)</li>
+ <li>Determine the <span id="MidPointOnPath" class="SVG-Term">midpoint-on-the-path</span>, which is
+ the point on the path which is "halfway" (user agents can
+ choose either a distance calculation or a parametric
+ calculation) between the startpoint-on-the-path and the
+ endpoint-on-the-path. (In the picture above, the
+ midpoint-on-the-path is shown as a white dot.)</li>
+ <li>Determine the <span id="GlyphMidline" class="SVG-Term">glyph-midline</span>, which is the
+ vertical line in the glyph's coordinate system that goes
+ through the glyph's x-axis midpoint. (In the picture above,
+ the glyph-midline is shown as a dashed line.)</li>
+ <li>Position the glyph such that the glyph-midline passes
+ through the midpoint-on-the-path and is perpendicular to the
+ line through the startpoint-on-the-path and the
+ endpoint-on-the-path.</li>
+ <li>Align the glyph vertically relative to the
+ midpoint-on-the-path based on property <a>'alignment-baseline'</a> and any
+ specified values for attribute <a>'tspan/dy'</a> on a <a>'tspan'</a> element. In the
+ example above, the <a>'alignment-baseline'</a> property is
+ unspecified, so the initial value of <span class="prop-value">alignment-baseline:baseline</span>
+ will be used. There are no <a>'tspan'</a> elements; thus, the
+ baseline of the glyph is aligned to the
+ midpoint-on-the-path.</li>
+ <li>For each subsequent glyph, set a new
+ startpoint-on-the-path as the previous endpoint-on-the-path,
+ but with appropriate adjustments taking into account
+ horizontal kerning tables in the font and current values of
+ various attributes and properties, including <a
+ href="text.html#SpacingProperties">spacing properties</a> and
+ <a>'tspan'</a> elements with values
+ provided for attributes <a>'tspan/dx'</a> and <a>'tspan/dy'</a>. All adjustments are
+ calculated as distance adjustments along the path, calculated
+ using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm.</li>
+ <li>Glyphs whose midpoint-on-the-path are off either end of
+ the path are not rendered.</li>
+ <li>Continue rendering glyphs until there are no more
+ glyphs.</li>
+ </ul>
+ <p>Comparable rules are used for top-to-bottom vertical text
+ layout along a path (i.e., when the glyph orientation is
+ parallel with the <a
+ href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>),
+ the layout rules are as follows:</p>
+ <ul>
+ <li>Determine the startpoint-on-the-path using the same
+ method as for horizontal text layout along a path, except
+ that before rendering the first glyph, the horizontal
+ component of the startpoint-on-the-path is adjusted to take
+ into account various vertical alignment text properties and
+ attributes, such as a <a>'tspan/dy'</a> attribute value on a <a>'tspan'</a> element.</li>
+ <li>Determine the glyph's charheight (i.e., the amount which
+ the current text position advances vertically when the glyph
+ is drawn using vertical text layout).</li>
+ <li>Determine the point on the curve which is charheight
+ distance along the path from the startpoint-on-the-path for
+ this glyph, calculated using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm. This point is the endpoint-on-the-path
+ for the glyph.</li>
+ <li>Determine the midpoint-on-the-path, which is the point on
+ the path which is "halfway" (user agents can choose either a
+ distance calculation or a parametric calculation) between the
+ startpoint-on-the-path and the endpoint-on-the-path.</li>
+ <li>Determine the glyph-midline, which is the horizontal line
+ in the glyph's coordinate system that goes through the
+ glyph's y-axis midpoint.</li>
+ <li>Position the glyph such that the glyph-midline passes
+ through the midpoint-on-the-path and is perpendicular to the
+ line through the startpoint-on-the-path and the
+ endpoint-on-the-path.</li>
+ <li>Align the glyph horizontally (where horizontal is
+ relative to the glyph's coordinate system) relative to the
+ midpoint-on-the-path based on property <a>'alignment-baseline'</a> and any
+ specified values for attribute <a>'tspan/dx'</a> on a <a>'tspan'</a> element.</li>
+ <li>For each subsequent glyph, set a new
+ startpoint-on-the-path as the previous endpoint-on-the-path,
+ but with appropriate adjustments taking into account vertical
+ kerning tables in the font and current values of various
+ attributes and properties, including <a
+ href="text.html#SpacingProperties">spacing properties</a> and
+ <a>'tspan'</a> elements with values
+ provided for attributes <a>'tspan/dx'</a> and <a>'tspan/dy'</a>. All adjustments are
+ calculated as distance adjustments along the path, calculated
+ using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm.</li>
+ <li>Glyphs whose midpoint-on-the-path are off either end of
+ the path are not rendered.</li>
+ <li>Continue rendering glyphs until there are no more
+ glyphs.</li>
+ </ul>
+ <p>In the calculations above, if either the
+ startpoint-on-the-path or the endpoint-on-the-path is off the
+ end of the path, then extend the path beyond its end points
+ with a straight line that is parallel to the tangent at the
+ path at its end point so that the midpoint-on-the-path can
+ still be calculated.</p>
+ <p>When the <a
+ href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>
+ is horizontal, then any <span class="attr-name">'x'</span> attributes on
+ <a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> elements represent
+ new absolute offsets along the path, thus providing explicit
+ new values for startpoint-on-the-path. Any <span class="attr-name">'y'</span> attributes on
+ <a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> elements are
+ ignored. When the <a
+ href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>
+ is vertical, then any <span class="attr-name">'y'</span> attributes on
+ <a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> elements represent
+ new absolute offsets along the path, thus providing explicit
+ new values for startpoint-on-the-path. Any <span class="attr-name">'x'</span>
+ attributes on <a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or
+ <a>'altGlyph'</a> elements are ignored.</p>
+
+</edit:with>
+
+<h2 id="AlternateGlyphs">Alternate glyphs</h2>
+
+<p>There are situations such as ligatures, special-purpose fonts (e.g.,
+a font for music symbols) or alternate glyphs for Asian text strings
+where it is required that a different set of glyphs is used than the
+glyph(s) which normally corresponds to the given character data.</p>
+
+<h3 id="AltGlyphElement">The <span class="element-name">'altGlyph'</span> element</h3>
+
+<edit:with element='altGlyph'>
+
+<p>The <a>'altGlyph'</a> element provides control over the glyphs used to
+render particular character data.</p>
+
+<edit:elementsummary name='altGlyph'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="AltGlyphElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="linking.html#IRIReference">IRI
+ reference</a> either to a <a>'glyph'</a> element in an SVG
+ document fragment or to an <a>'altGlyphDef'</a>
+ element.<br />
+ <br />
+ If the reference is to a <a>'glyph'</a> element and that glyph
+ is available, then that glyph is rendered instead of the
+ character(s) that are inside of the <a>'altGlyph'</a> element.<br />
+ <br />
+ If the reference is to an <a>'altGlyphDef'</a> element, then
+ if an appropriate set of alternate glyphs is located from
+ processing the <a>'altGlyphDef'</a> element, then
+ those alternate glyphs are rendered instead of the
+ character(s) that are inside of the <a>'altGlyph'</a> element.<br />
+ <br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span><br />
+ <br />
+ </dd>
+ <dt id="AltGlyphElementGlyphRefAttribute"><span
+ class="adef">glyphRef</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>The glyph identifier, the format of which is dependent
+ on the <a>'format'</a> of the given font.
+ (Same meaning as the <a>'glyphRef/glyphRef'</a> attribute on the
+ <a>'glyphRef element'</a> element.)<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="AltGlyphElementFormatAttribute"><span
+ class="adef">format</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>The format of the given font. If the font is in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#referencing">one of
+ the formats listed in CSS2</a> ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.5),
+ such as <em>TrueDoc™ Portable Font Resource</em> or <em>Embedded OpenType</em>,
+ then the <string> must contain the corresponding font
+ format string, such as <em>truedoc-pfr</em> or
+ <em>embedded-opentype</em>. (This attribute has the same meaning as the <a>'glyphRef/format'</a>
+ attribute on the <a>'glyphRef element'</a> element.)<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="AltGlyphElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinates"><list-of-coordinates></a></span>"</dt>
+ <dd>The <a
+ href="types.html#DataTypeCoordinate"><coordinate></a>
+ values are processed in the same manner as the <a>'tspan/x'</a>
+ attribute on the <a>'tspan'</a> element, with the
+ following exception: If the referenced alternate glyphs are
+ rendered instead of the Unicode characters inside the <a>'altGlyph'</a> element, then any
+ absolute X coordinates specified via an <a>'x'</a>
+ attribute on this element or any ancestor
+ <a>'text'</a> or <a>'tspan'</a> elements for
+ Unicode characters 2 through <var>n</var> within the <a>'altGlyph'</a> element are ignored.
+ Any absolute X coordinate specified via an <a>'x'</a> attribute on this
+ element or any ancestor <a>'text'</a> or <a>'tspan'</a> elements for the
+ first Unicode character within the <a>'altGlyph'</a> element sets a new
+ absolute X coordinate for the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> before rendering the first alternate
+ glyph.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="AltGlyphElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeCoordinates"><list-of-coordinates></a></span>"</dt>
+ <dd>The corresponding absolute Y coordinates for rendering
+ the <a>'altGlyph'</a>
+ element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="AltGlyphElementDXAttribute"><span
+ class="adef">dx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
+ <dd>The <a
+ href="types.html#DataTypeLength"><length></a> values
+ are processed in the same manner as the <a>'tspan/dx'</a> attribute on
+ the <a>'tspan'</a> element, with the
+ following exception: If the referenced alternate glyphs are
+ rendered instead of the Unicode characters inside the <a>'altGlyph'</a> element, then any
+ relative X coordinates specified via an <a>'dx'</a> attribute on this element or
+ any ancestor <a>'text'</a> or <a>'tspan'</a> elements for
+ Unicode characters 2 through <var>n</var> within the <a>'altGlyph'</a> element are ignored.
+ Any relative X coordinate specified via an <a>'dx'</a> attribute on this element or
+ any ancestor <a>'text'</a> or <a>'tspan'</a> elements for the
+ first Unicode character within the <a>'altGlyph'</a> element sets a new
+ relative X coordinate for the <a
+ href="text.html#CurrentTextPosition">current text
+ position</a> before rendering the first alternate
+ glyph.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="AltGlyphElementDYAttribute"><span
+ class="adef">dy</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
+ <dd>The corresponding relative Y coordinates for rendering
+ the <a>'altGlyph'</a>
+ element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="AltGlyphElementRotateAttribute"><span
+ class="adef">rotate</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumbers"><list-of-numbers></a></span>"</dt>
+ <dd>The <a
+ href="types.html#DataTypeNumber"><number></a> values
+ are processed in the same manner as the <a>'tspan/rotate'</a>
+ attribute on the <a>'tspan'</a> element, with the
+ following exception: If the referenced alternate glyphs are
+ rendered instead of the Unicode characters inside the <a>'altGlyph'</a>
+ element, then any supplemental rotation values specified via an
+ <a>'rotate'</a> attribute on this element or any ancestor
+ <a>'text'</a> or <a>'tspan'</a> elements for
+ Unicode characters 2 through <var>n</var> within the <a>'altGlyph'</a>
+ element are ignored.
+ Supplemental rotation values specified via an <a>'rotate'</a>
+ attribute on this element
+ or any ancestor <a>'text'</a> or <a>'tspan'</a> elements for the
+ first Unicode character within the <a>'altGlyph'</a> element sets a new
+ supplemental rotation angle before rendering the alternate
+ glyphs.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>: yes
+ (non-additive).</span></dd>
+ </dl>
+ </div>
+
+<p>If the references to alternate glyphs do not result in successful
+identification of alternate glyphs to use, then the character(s)
+that are inside of the <a>'altGlyph'</a> element are rendered as
+if the <a>'altGlyph'</a> element were a <a>'tspan'</a> element
+instead.</p> <p>An <a>'altGlyph'</a> element either references a
+<a>'glyph'</a> element or an <a>'altGlyphDef'</a> element via its
+<a>'xlink:href'</a> attribute or identifies a glyph by means of
+<a href="text.html#FontPropertiesUsedBySVG">font selection properties</a>,
+a glyph identifier and a font format. If the <a>'xlink:href'</a>
+attribute is specified, it takes precedence, and the other glyph
+identification attributes and properties are ignored.</p>
+
+</edit:with>
+
+<h3 id="AlternateGlyphDefinitions">The <span class="element-name">'altGlyphDef'</span>,
+<span class="element-name">'altGlyphItem'</span> and
+<span class="element-name">'glyphRef'</span> elements</h3>
+
+<p id="AltGlyphDefElement">The <a>'altGlyphDef'</a> element defines a set of possible glyph
+substitutions.</p>
+
+<edit:elementsummary name='altGlyphDef'/>
+
+<p>An <a>'altGlyphDef'</a> can contain either of the following:</p>
+
+<ul>
+ <li>In the simplest case, an <a>'altGlyphDef'</a> contains one or more
+ <a>'glyphRef'</a> elements. Each <a>'glyphRef'</a> element references
+ a single glyph within a particular font. If all of the referenced
+ glyphs are available, then these glyphs are rendered instead of the
+ character(s) inside of the referencing <a>'altGlyph'</a> element. If
+ any of the referenced glyphs are unavailable, then the character(s)
+ that are inside of the <a>'altGlyph'</a> element are rendered as
+ if there were not an <a>'altGlyph'</a> element surrounding those
+ characters.</li>
+
+ <li>In the more complex case, an <a>'altGlyphDef'</a> contains one
+ or more <a>'altGlyphItem'</a> elements. Each <a>'altGlyphItem'</a>
+ represents a candidate set of substitute glyphs. Each
+ <a>'altGlyphItem'</a> contains one or more <a>'glyphRef'</a> elements.
+ Each <a>'glyphRef'</a> element references a single glyph within
+ a particular font. The first <a>'altGlyphItem'</a> in which all
+ referenced glyphs are available is chosen. The glyphs referenced from
+ this <a>'altGlyphItem'</a> are rendered instead of the character(s)
+ that are inside of the referencing <a>'altGlyph'</a> element. If none
+ of the <a>'altGlyphItem'</a> elements result in a successful match
+ (i.e., none of the <a>'altGlyphItem'</a> elements has all of its
+ referenced glyphs available), then the character(s) that are inside
+ of the <a>'altGlyph'</a> element are rendered as if there were not an
+ <a>'altGlyph'</a> element surrounding those characters.</li>
+</ul>
+
+<p id="AltGlyphItemElement">The <a>'altGlyphItem'</a> element
+defines a candidate set of possible glyph substitutions. The first
+<a>'altGlyphItem'</a> element whose referenced glyphs are all available
+is chosen. Its glyphs are rendered instead of the character(s) that are
+inside of the referencing <a>'altGlyph'</a> element.</p>
+
+<edit:elementsummary name='altGlyphItem'/>
+
+<edit:with element='glyphRef'>
+
+<p id="GlyphRefElement">The <a>'glyphRef element'</a> element defines a
+possible glyph to use.</p>
+
+<edit:elementsummary name='glyphRef'/>
+
+ <div class="adef-list">
+ <p><em>Attribute definitions:</em></p>
+ <dl>
+ <dt id="GlyphRefElementHrefAttribute"><span
+ class="adef">xlink:href</span> = "<span
+ class="attr-value"><a
+ href="types.html#DataTypeIRI"><iri></a></span>"</dt>
+ <dd>An <a href="linking.html#IRIReference">IRI
+ reference</a> to a <a>'glyph'</a> element in an SVG
+ document fragment. The referenced <a>'glyph'</a> is rendered as an
+ alternate glyph.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphRefElementGlyphRefAttribute"><span
+ class="adef">glyphRef</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>The glyph identifier, the format of which is dependent
+ on the <a>'format'</a> of the given
+ font.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphRefElementFormatAttribute"><span
+ class="adef">format</span> = "<span
+ class="attr-value"><string></span>"</dt>
+ <dd>The format of the given font. If the font is in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#referencing">one of
+ the formats listed in CSS2</a> ([<a href="refs.html#ref-CSS2">CSS2</a>], section 15.3.5),
+ such as <em>TrueDoc™ Portable Font Resource</em> or <em>Embedded OpenType</em>,
+ then the <string> must contain the corresponding font
+ format string, such as <em>truedoc-pfr</em> or
+ <em>embedded-opentype</em>.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphRefElementXAttribute"><span
+ class="adef">x</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>This value represents the new absolute X coordinate
+ within the font's coordinate system for this glyph.<br />
+ The font coordinate system is based on the <em>em
+ square</em> model described in the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html">Fonts chapter</a>
+ of CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 15).<br />
+ If the attribute is not specified, for the first <a>'glyphRef element'</a> child element, the
+ effect is as if the attribute were set to "0", whereas for
+ subsequent <a>'glyphRef element'</a>
+ child elements, the effect is as if the attribute were set
+ to the end X coordinate from the previous <a>'glyphRef element'</a> element.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphRefElementYAttribute"><span
+ class="adef">y</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>The corresponding new absolute Y coordinate within the
+ font's coordinate system for this glyph.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphRefElementDXAttribute"><span
+ class="adef">dx</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>This value represents the relative X coordinate within
+ the font's coordinate system for this glyph. The glyph is
+ thus shifted by <span
+ class="attr-value"><number></span> units along the
+ positive X axis within the font's coordinate system
+ supplemental to the absolute X coordinate established by
+ the <a>'x'</a> attribute (either due to an
+ explicit <a>'x'</a> attribute or due to default
+ value processing for the <a>'x'</a> attribute).<br />
+ The font coordinate system is based on the <em>em
+ square</em> model described in the <a
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html">Fonts chapter</a>
+ of CSS2 ([<a href="refs.html#ref-CSS2">CSS2</a>], chapter 15).<br />
+ If the attribute is not specified, the effect is as if the
+ attribute were set to "0".<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ <dt id="GlyphRefElementDYAttribute"><span
+ class="adef">dy</span> = "<span class="attr-value"><a
+ href="types.html#DataTypeNumber"><number></a></span>"</dt>
+ <dd>The corresponding number of units within the font's
+ coordinate system to shift the glyph along the positive Y
+ axis relative to the absolute Y coordinate established by
+ the <a>'y'</a> attribute.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ no.</span></dd>
+ </dl>
+ </div>
+
+<p>A <a>'glyphRef element'</a> either references a
+<a>'glyph'</a> element in an SVG document fragment via its
+<a>'xlink:href'</a> attribute or identifies a glyph by means of <a
+href="text.html#FontPropertiesUsedBySVG">font selection properties</a>,
+a glyph identifier and a font format. If insufficient attributes
+and properties have been specified to identify a glyph, then the
+<a>'glyphRef element'</a> is processed in the same manner as when
+a glyph reference is fully specified, but the given glyph is not
+available. If the <a>'xlink:href'</a> attribute is specified, it takes
+precedence, and the other glyph identification attributes and properties
+are ignored.</p>
+
+</edit:with>
+
+<h2 id="WhiteSpace">White space handling</h2>
+
+<p id="XMLSpaceAttribute">SVG supports the standard XML attribute
+<a>'xml:space'</a> to specify the handling of white space characters
+within a given <a>'text'</a> element's character data.
+ Note that any child element of a <a>'text'</a> element may also
+ have an <a>'xml:space'</a> attribute which will apply to that
+ child element's text content.
+The SVG user
+agent has special processing rules associated with this attribute
+as described below. These are behaviors that occur subsequent to
+XML parsing [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>]
+and any construction of a DOM.</p>
+
+<p><a>'xml:space'</a> is an inheritable attribute which can have one of
+two values:</p>
+
+<dl>
+ <dt><span class='attr-value'>'default'</span></dt>
+ <dd>(The initial/default value for <a>'xml:space'</a>.) When
+ <span class='attr-value'>xml:space="default"</span>, the SVG user
+ agent will do the following using a copy of the original character
+ data content. First, it will remove all newline characters. Then
+ it will convert all tab characters into space characters. Then, it
+ will strip off all leading and trailing space characters. Then, all
+ contiguous space characters will be consolidated.</dd>
+
+ <dt><span class='attr-value'>'preserve'</span></dt>
+ <dd>When <span class='attr-value'>xml:space="preserve"</span>,
+ the SVG user agent will do the following using a copy of the
+ original character data content. It will convert all newline
+ and tab characters into space characters. Then, it will draw
+ all space characters, including leading, trailing and multiple
+ contiguous space characters. Thus, when drawn with
+ <span class='attr-value'>xml:space="preserve"</span>, the string
+ <code>"a b"</code> (three spaces between "a" and
+ "b") will produce a larger separation between "a" and "b" than
+ <code>"a b"</code> (one space between "a" and "b").</dd>
+</dl>
+
+<p>The following example illustrates that line
+indentation can be important when using
+<span class='attr-value'>xml:space="default"</span>. The fragment below
+show two pairs of similar <a>'text'</a> elements, with both <a>'text'</a>
+elements using <span class="attr-value">xml:space="default"</span>. For
+these examples, there is no extra white space at the end of any of the
+lines (i.e., the line break occurs immediately after the last visible
+character).</p>
+
+<pre>
+[01] <text xml:space='default'>
+[02] WS example
+[03] indented lines
+[04] </text>
+[05] <text xml:space='preserve'>WS example indented lines</text>
+[06]
+[07] <text xml:space='default'>
+[08]WS example
+[09]non-indented lines
+[10] </text>
+[11] <text xml:space='preserve'>WS examplenon-indented lines</text>
+</pre>
+
+<p>The first pair of <a>'text'</a> elements above show the
+effect of indented character data. The attribute
+<span class="attr-value">xml:space="default"</span> in the first
+<a>'text'</a> element instructs the user agent to:</p>
+
+<ul>
+ <li>convert all tabs (if any) to space characters,</li>
+ <li>strip out all line breaks (i.e., strip out the line
+ breaks at the end of lines [01], [02] and [03]),</li>
+ <li>strip out all leading space characters (i.e., strip out
+ space characters before "WS example" on line [02]),</li>
+ <li>strip out all trailing space characters (i.e., strip out
+ space characters before "</text>" on line [04]),</li>
+ <li>consolidate all intermediate space characters (i.e., the
+ space characters before "indented lines" on line [03]) into a
+ single space character.</li>
+</ul>
+
+<p>The second pair of <a>'text'</a> elements above show the
+effect of non-indented character data. The attribute
+<span class="attr-value">xml:space="default"</span> in the third
+<a>'text'</a> element instructs the user agent to:</p>
+
+<ul>
+ <li>convert all tabs (if any) to space characters,</li>
+ <li>strip out all line breaks (i.e., strip out the line
+ breaks at the end of lines [07], [08] and [09]),</li>
+ <li>strip out all leading space characters (there are no
+ leading space characters in this example),</li>
+ <li>strip out all trailing space characters (i.e., strip out
+ space characters before "</text>" on line [10]),</li>
+ <li>consolidate all intermediate space characters into a
+ single space character (in this example, there are no
+ intermediate space characters).</li>
+</ul>
+
+<p>Note that XML parsers are required to convert the standard
+representations for a newline indicator (e.g., the literal
+two-character sequence "#xD#xA" or the stand-alone literals #xD
+or #xA) into the single character #xA before passing character
+data to the application. Thus, each newline in SVG will be
+represented by the single character #xA, no matter what
+representation for newlines might have been used in the
+original resource. (See
+<a href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-line-ends">XML end-of-line handling</a>.)</p>
+
+<p>Any features in the SVG language or the SVG DOM that are based
+on character position number, such as the <a>'tspan/x'</a>,
+<a>'tspan/y'</a>, <a>'tspan/dx'</a>, <a>'tspan/dy'</a> and
+<a>'tspan/rotate'</a> attributes on the <a>'text'</a>, <a>'tspan'</a>,
+<a>'tref'</a> and <a>'altGlyph'</a> elements, are based on character
+position after applying the white space handling rules described here.
+In particular, if <span class='attr-value'>xml:space="default"</span>,
+it is often the case that white space characters are removed as part
+of processing. Character position numbers index into the text string
+after the white space characters have been removed per the rules in this
+section.</p>
+
+<p>
+Note that a glyph corresponding to a whitespace character should only be displayed as a visible but blank space, even if the glyph itself happens to be non-blank.
+See <a href="http://www.unicode.org/faq/unsup_char.html">display of unsupported characters</a> [<a href="refs.html#ref-UNICODE">UNICODE</a>].
+</p>
+
+<p>The <a>'xml:space'</a> attribute is:</p>
+<p> <span class="anim-target"><a
+href="animate.html#Animatable">Animatable</a>: no.</span></p>
+
+<h2 id="TextSelection">Text selection and clipboard operations</h2>
+
+<p><a href="conform.html#ConformingSVGViewers">Conforming SVG
+viewers</a> on systems which have the capacity for text selection (e.g.,
+systems which are equipped with a pointer device such as a mouse) and
+which have system clipboards for copy/paste operations are required to
+support:</p>
+
+<ul>
+ <li>user selection of text strings in SVG content</li>
+ <li>the ability to copy selected text strings to the system clipboard</li>
+</ul>
+
+<p>A text selection operation starts when all of the following occur:</p>
+
+<ul>
+ <li>the user positions the pointing device over a glyph that has
+ been rendered as part of a <a>'text'</a> element, initiates a
+ <em>select</em> operation (e.g., pressing the standard system mouse
+ button for select operations) and then moves the pointing device while
+ continuing the <em>select</em> operation (e.g., continuing to press
+ the standard system mouse button for select operations)</li>
+
+ <li>no other visible graphics element has been painted above the glyph
+ at the point at which the pointing device was clicked</li>
+
+ <li>no <a href="linking.html#Links">links</a> or
+ <a href="script.html#EventHandling">events</a> have been assigned to the
+ <a>'text'</a>, <a>'tspan'</a> or <a>'textPath'</a> element(s) (or
+ their ancestors) associated with the given glyph.</li>
+</ul>
+
+<p>As the text selection operation proceeds (e.g., the user continues to
+press the given mouse button), all associated events with other graphics
+elements are ignored (i.e., the text selection operation is modal) and
+the SVG user agent shall dynamically indicate which characters are
+selected by an appropriate highlighting technique, such as redrawing the
+selected glyphs with inverse colors. As the pointer is moved during the
+text selection process, the end glyph for the text selection operation
+is the glyph within the same <a>'text'</a> element whose glyph cell is
+closest to the pointer. All characters within the <a>'text'</a> element
+whose position within the <a>'text'</a> element is between the start
+of selection and end of selection shall be highlighted, regardless of
+position on the canvas and regardless of any graphics elements that
+might be above the end of selection point.</p>
+
+<p>Once the text selection operation ends (e.g., the user releases the
+given mouse button), the selected text will stay highlighted until an
+event occurs which cancels text selection, such as a pointer device
+activation event (e.g., pressing a mouse button).</p>
+
+<p>Detailed rules for determining which characters to
+highlight during a text selection operation are provided in
+<a href="implnote.html#TextSelectionImplementationNotes">Text selection
+implementation notes</a>.</p>
+
+<p>For systems which have system clipboards, the SVG user agent is
+required to provide a user interface for initiating a copy of the
+currently selected text to the system clipboard. It is sufficient for
+the SVG user agent to post the selected text string in the system's
+appropriate clipboard format for plain text, but it is preferable if the
+SVG user agent also posts a rich text alternative which captures the
+various <a href="text.html#FontPropertiesUsedBySVG">font properties</a>
+associated with the given text string.</p>
+
+<p>For bidirectional text, the user agent must support text
+selection in logical order, which will result in discontinuous
+highlighting of glyphs due to the bidirectional reordering of
+characters. User agents can provide an alternative ability to
+select bidirectional text in visual rendering order (i.e., after
+<a href="text.html#RelationshipWithBiDirectionality">bidirectional</a> text
+layout algorithms have been applied), with the result that selected
+character data might be discontinuous logically. In this case, if the
+user requests that bidirectional text be copied to the clipboard, then
+the user agent is required to make appropriate adjustments to copy only
+the visually selected characters to the clipboard.</p>
+
+<p>When feasible, it is recommended that generators of SVG attempt to
+order their text strings to facilitate properly ordered text selection
+within SVG viewing applications such as Web browsers.</p>
+
+<h2 id="DOMInterfaces">DOM interfaces</h2>
+
+<h3 id="InterfaceSVGTextContentElement">Interface SVGTextContentElement</h3>
+
+<edit:interface name='::svg::SVGTextContentElement'/>
+
+<h3 id="InterfaceSVGTextPositioningElement">Interface SVGTextPositioningElement</h3>
+
+<edit:interface name='::svg::SVGTextPositioningElement'/>
+
+<h3 id="InterfaceSVGTextElement">Interface SVGTextElement</h3>
+
+<edit:with element='text'>
+<edit:interface name='::svg::SVGTextElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGTSpanElement">Interface SVGTSpanElement</h3>
+
+<edit:with element='tspan'>
+<edit:interface name='::svg::SVGTSpanElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGTRefElement">Interface SVGTRefElement</h3>
+
+<edit:with element='tref'>
+<edit:interface name='::svg::SVGTRefElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGTextPathElement">Interface SVGTextPathElement</h3>
+
+<edit:with element='textPath'>
+<edit:interface name='::svg::SVGTextPathElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGAltGlyphElement">Interface SVGAltGlyphElement</h3>
+
+<edit:with element='altGlyph'>
+<edit:interface name='::svg::SVGAltGlyphElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGAltGlyphDefElement">Interface SVGAltGlyphDefElement</h3>
+
+<edit:with element='altGlyphDef'>
+<edit:interface name='::svg::SVGAltGlyphDefElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGAltGlyphItemElement">Interface SVGAltGlyphItemElement</h3>
+
+<edit:with element='altGlyphItem'>
+<edit:interface name='::svg::SVGAltGlyphItemElement'/>
+</edit:with>
+
+<h3 id="InterfaceSVGGlyphRefElement">Interface SVGGlyphRefElement</h3>
+
+<edit:with element='glyphRef'>
+<edit:interface name='::svg::SVGGlyphRefElement'/>
+</edit:with>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/types.html Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1535 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
+<head>
+ <title>Basic Data Types and Interfaces</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet" type="text/css" media="screen" href="style/svg-style.css"/>
+
+ <style type="text/css">
+ .aliceblue { background: rgb(240, 248, 255) }
+ .antiquewhite { background: rgb(250, 235, 215) }
+ .aqua { background: rgb( 0, 255, 255); }
+ .aquamarine { background: rgb(127, 255, 212) }
+ .azure { background: rgb(240, 255, 255) }
+ .beige { background: rgb(245, 245, 220) }
+ .bisque { background: rgb(255, 228, 196) }
+ .black { background: rgb( 0, 0, 0) }
+ .blanchedalmond { background: rgb(255, 235, 205) }
+ .blue { background: rgb( 0, 0, 255) }
+ .blueviolet { background: rgb(138, 43, 226) }
+ .brown { background: rgb(165, 42, 42) }
+ .burlywood { background: rgb(222, 184, 135) }
+ .cadetblue { background: rgb( 95, 158, 160) }
+ .chartreuse { background: rgb(127, 255, 0) }
+ .chocolate { background: rgb(210, 105, 30) }
+ .coral { background: rgb(255, 127, 80) }
+ .cornflowerblue { background: rgb(100, 149, 237) }
+ .cornsilk { background: rgb(255, 248, 220) }
+ .crimson { background: rgb(220, 20, 60) }
+ .cyan { background: rgb( 0, 255, 255) }
+ .darkblue { background: rgb( 0, 0, 139) }
+ .darkcyan { background: rgb( 0, 139, 139) }
+ .darkgoldenrod { background: rgb(184, 134, 11) }
+ .darkgray { background: rgb(169, 169, 169) }
+ .darkgreen { background: rgb( 0, 100, 0) }
+ .darkgrey { background: rgb(169, 169, 169) }
+ .darkkhaki { background: rgb(189, 183, 107) }
+ .darkmagenta { background: rgb(139, 0, 139) }
+ .darkolivegreen { background: rgb( 85, 107, 47) }
+ .darkorange { background: rgb(255, 140, 0) }
+ .darkorchid { background: rgb(153, 50, 204) }
+ .darkred { background: rgb(139, 0, 0) }
+ .darksalmon { background: rgb(233, 150, 122) }
+ .darkseagreen { background: rgb(143, 188, 143) }
+ .darkslateblue { background: rgb( 72, 61, 139) }
+ .darkslategray { background: rgb( 47, 79, 79) }
+ .darkslategrey { background: rgb( 47, 79, 79) }
+ .darkturquoise { background: rgb( 0, 206, 209) }
+ .darkviolet { background: rgb(148, 0, 211) }
+ .deeppink { background: rgb(255, 20, 147) }
+ .deepskyblue { background: rgb( 0, 191, 255) }
+ .dimgray { background: rgb(105, 105, 105) }
+ .dimgrey { background: rgb(105, 105, 105) }
+ .dodgerblue { background: rgb( 30, 144, 255) }
+ .firebrick { background: rgb(178, 34, 34) }
+ .floralwhite { background: rgb(255, 250, 240) }
+ .forestgreen { background: rgb( 34, 139, 34) }
+ .fuchsia { background: rgb(255, 0, 255) }
+ .gainsboro { background: rgb(220, 220, 220) }
+ .ghostwhite { background: rgb(248, 248, 255) }
+ .gold { background: rgb(255, 215, 0) }
+ .goldenrod { background: rgb(218, 165, 32) }
+ .gray { background: rgb(128, 128, 128) }
+ .grey { background: rgb(128, 128, 128) }
+ .green { background: rgb( 0, 128, 0) }
+ .greenyellow { background: rgb(173, 255, 47) }
+ .honeydew { background: rgb(240, 255, 240) }
+ .hotpink { background: rgb(255, 105, 180) }
+ .indianred { background: rgb(205, 92, 92) }
+ .indigo { background: rgb( 75, 0, 130) }
+ .ivory { background: rgb(255, 255, 240) }
+ .khaki { background: rgb(240, 230, 140) }
+ .lavender { background: rgb(230, 230, 250) }
+ .lavenderblush { background: rgb(255, 240, 245) }
+ .lawngreen { background: rgb(124, 252, 0) }
+ .lemonchiffon { background: rgb(255, 250, 205) }
+ .lightblue { background: rgb(173, 216, 230) }
+ .lightcoral { background: rgb(240, 128, 128) }
+ .lightcyan { background: rgb(224, 255, 255) }
+ .lightgoldenrodyellow { background: rgb(250, 250, 210) }
+ .lightgray { background: rgb(211, 211, 211) }
+ .lightgreen { background: rgb(144, 238, 144) }
+ .lightgrey { background: rgb(211, 211, 211) }
+ .lightpink { background: rgb(255, 182, 193) }
+ .lightsalmon { background: rgb(255, 160, 122) }
+ .lightseagreen { background: rgb( 32, 178, 170) }
+ .lightskyblue { background: rgb(135, 206, 250) }
+ .lightslategray { background: rgb(119, 136, 153) }
+ .lightslategrey { background: rgb(119, 136, 153) }
+ .lightsteelblue { background: rgb(176, 196, 222) }
+ .lightyellow { background: rgb(255, 255, 224) }
+ .lime { background: rgb( 0, 255, 0) }
+ .limegreen { background: rgb( 50, 205, 50) }
+ .linen { background: rgb(250, 240, 230) }
+ .magenta { background: rgb(255, 0, 255) }
+ .maroon { background: rgb(128, 0, 0) }
+ .mediumaquamarine { background: rgb(102, 205, 170) }
+ .mediumblue { background: rgb( 0, 0, 205) }
+ .mediumorchid { background: rgb(186, 85, 211) }
+ .mediumpurple { background: rgb(147, 112, 219) }
+ .mediumseagreen { background: rgb( 60, 179, 113) }
+ .mediumslateblue { background: rgb(123, 104, 238) }
+ .mediumspringgreen { background: rgb( 0, 250, 154) }
+ .mediumturquoise { background: rgb( 72, 209, 204) }
+ .mediumvioletred { background: rgb(199, 21, 133) }
+ .midnightblue { background: rgb( 25, 25, 112) }
+ .mintcream { background: rgb(245, 255, 250) }
+ .mistyrose { background: rgb(255, 228, 225) }
+ .moccasin { background: rgb(255, 228, 181) }
+ .navajowhite { background: rgb(255, 222, 173) }
+ .navy { background: rgb( 0, 0, 128) }
+ .oldlace { background: rgb(253, 245, 230) }
+ .olive { background: rgb(128, 128, 0) }
+ .olivedrab { background: rgb(107, 142, 35) }
+ .orange { background: rgb(255, 165, 0) }
+ .orangered { background: rgb(255, 69, 0) }
+ .orchid { background: rgb(218, 112, 214) }
+ .palegoldenrod { background: rgb(238, 232, 170) }
+ .palegreen { background: rgb(152, 251, 152) }
+ .paleturquoise { background: rgb(175, 238, 238) }
+ .palevioletred { background: rgb(219, 112, 147) }
+ .papayawhip { background: rgb(255, 239, 213) }
+ .peachpuff { background: rgb(255, 218, 185) }
+ .peru { background: rgb(205, 133, 63) }
+ .pink { background: rgb(255, 192, 203) }
+ .plum { background: rgb(221, 160, 221) }
+ .powderblue { background: rgb(176, 224, 230) }
+ .purple { background: rgb(128, 0, 128) }
+ .red { background: rgb(255, 0, 0) }
+ .rosybrown { background: rgb(188, 143, 143) }
+ .royalblue { background: rgb( 65, 105, 225) }
+ .saddlebrown { background: rgb(139, 69, 19) }
+ .salmon { background: rgb(250, 128, 114) }
+ .sandybrown { background: rgb(244, 164, 96) }
+ .seagreen { background: rgb( 46, 139, 87) }
+ .seashell { background: rgb(255, 245, 238) }
+ .sienna { background: rgb(160, 82, 45) }
+ .silver { background: rgb(192, 192, 192) }
+ .skyblue { background: rgb(135, 206, 235) }
+ .slateblue { background: rgb(106, 90, 205) }
+ .slategray { background: rgb(112, 128, 144) }
+ .slategrey { background: rgb(112, 128, 144) }
+ .snow { background: rgb(255, 250, 250) }
+ .springgreen { background: rgb( 0, 255, 127) }
+ .steelblue { background: rgb( 70, 130, 180) }
+ .tan { background: rgb(210, 180, 140) }
+ .teal { background: rgb( 0, 128, 128) }
+ .thistle { background: rgb(216, 191, 216) }
+ .tomato { background: rgb(255, 99, 71) }
+ .turquoise { background: rgb( 64, 224, 208) }
+ .violet { background: rgb(238, 130, 238) }
+ .wheat { background: rgb(245, 222, 179) }
+ .white { background: rgb(255, 255, 255) }
+ .whitesmoke { background: rgb(245, 245, 245) }
+ .yellow { background: rgb(255, 255, 0) }
+ .yellowgreen { background: rgb(154, 205, 50) }
+ </style>
+</head>
+<body>
+
+<h1>Basic Data Types and Interfaces</h1>
+
+<h2 id="syntax">Syntax</h2>
+
+ <p>The EBNF grammar is as used in the <a href="http://www.w3.org/TR/REC-xml/#sec-notation">XML specification</a>,
+ with the addition of <strong>~</strong>, a <em>case-insensitive literal</em>: characters in the ASCII range (only) are declared to be case-insensitive. For example, ~"Hello" will match (H|h)(e|e)(l|L)(l|L)(o|O). This makes the productions much easier to read.</p>
+ <table>
+ <tr><td>?</td><td>optional, zero or one</td></tr>
+ <tr><td>+</td><td>one or more</td></tr>
+ <tr><td>*</td><td>zero or more</td></tr>
+ <tr><td>|</td><td>alternation</td></tr>
+ <tr><td>"string"</td><td>literal</td></tr>
+ <tr><td>~"string"</td><td>case-insensitive literal</td></tr>
+ <tr><td>[]</td><td>a character range</td></tr>
+ <tr><td>[^]</td><td>excluded character range</td></tr>
+ <tr><td>()</td><td>grouping</td></tr>
+ </table>
+
+<h2 id="BasicDataTypes">Basic data types</h2>
+
+<p>This section defines a number of common data types used in the definitions
+of SVG properties and attributes. Some data types that are not referenced by
+multiple properties and attributes are defined inline in subsequent chapters.</p>
+
+ <p>Note that, as noted below, the specification of some types is different for CSS property values in style sheets (in the <a>'style attribute'</a> attribute,
+ <a>'style element'</a> element or an external style sheet) than it is for for XML attribute values (including <a>presentation attribute</a>s). This is due to restrictions in the CSS grammar. For example, scientific notation is allowed in attributes, including presentation attributes, but not in style sheets.</p>
+
+<dl class='definitions'>
+
+ <dt id='DataTypeAngle'><span class='SVG-Term'><angle></span></dt>
+ <dd>
+ <p>Angles are specified in one of two ways depending upon whether
+ they are used in CSS <a>property</a> syntax or SVG <a>presentation attribute</a>
+ syntax:</p>
+ <ul>
+ <li>
+ <p>When an <angle> is used in a style sheet or with a
+ <a>property</a> in a <a>'style attribute'</a> attribute, the
+ syntax must match the following pattern:</p>
+ <pre class='grammar'><span id='Angle'>angle</span> ::= <a href='#DataTypeNumber'>number</a> (~"deg" | ~"grad" | ~"rad")?</pre>
+ <p>where <span class='prop-value'>deg</span> indicates degrees,
+ <span class='prop-value'>grad</span> indicates grads and
+ <span class='prop-value'>rad</span> indicates radians.
+ The unit identifier may be in lower (recommended) or upper case.</p>
+ <p>For properties defined in CSS2
+ [<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a>],
+ an angle unit identifier must be provided (for non-zero
+ values). For SVG-specific <a>properties</a> the angle unit
+ identifier is optional. If a unit is not provided, the angle
+ value is assumed to be in degrees.</p>
+ </li>
+ <li>
+ <p>When an <angle> is used in an SVG <a>presentation attribute</a>,
+ the syntax must match the following pattern:</p>
+ <pre class='grammar'>angle ::= <a href='#DataTypeNumber'>number</a> ("deg" | "grad" | "rad")?</pre>
+ <p>The unit identifier, if present, must be in lower case; if
+ not present, the angle value is assumed to be in degrees.</p>
+ </li>
+ </ul>
+ <p>In the SVG DOM, <angle> values are represented using
+ <a>SVGAngle</a> or <a>SVGAnimatedAngle</a> objects.</p>
+ </dd>
+
+ <dt id='DataTypeAnything'><span class='SVG-Term'><anything></span></dt>
+ <dd>
+ <p>The basic type <anything> is a sequence of zero or more characters.
+ Specifically:</p>
+ <pre class='grammar'><span id='Anything'>anything</span> ::= <a href='http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char'>Char</a>*</pre>
+ <p>where <a href='http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char'>Char</a> is the
+ production for a character, as defined in XML 1.0
+ ([<a href='refs.html#ref-XML10'>XML10</a>], section 2.2).</p>
+ </dd>
+
+ <dt id='DataTypeColor'><span class='SVG-Term'><color></span></dt>
+ <dd>
+ <p>The basic type <color> is a CSS2 compatible specification for a
+ color in the sRGB color space [<a href="refs.html#ref-SRGB">SRGB</a>].
+ <color> applies to SVG's use of the <a>'color'</a> property and
+ is a component of the definitions of properties <a>'fill'</a>,
+ <a>'stroke'</a>, <a>'stop-color'</a>, <a>'flood-color'</a> and
+ <a>'lighting-color'</a>, which also offer optional ICC-based color
+ specifications.</p>
+ <p>SVG supports all of the syntax alternatives for <color> defined in
+ <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color'>CSS2
+ syntax and basic data types</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>],
+ section 4.3.6), with the exception that SVG allows an expanded list of
+ <a href="types.html#ColorKeywords">recognized color keywords names</a>.</p>
+ <p>A <color> is either a keyword (see
+ <a href="types.html#ColorKeywords">Recognized color keyword names</a>) or a
+ numerical RGB specification.</p>
+ <p>In addition to these color keywords, users may specify
+ keywords that correspond to the colors used by objects in the
+ user's environment. The normative definition of these
+ keywords is found in
+ <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors'>User preferences
+ for colors</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 18.2).</p>
+ <p>The format of an RGB value in hexadecimal notation is a "#"
+ immediately followed by either three or six hexadecimal
+ characters. The three-digit RGB notation (#rgb) is converted
+ into six-digit form (#rrggbb) by replicating digits, not by
+ adding zeros. For example, <span class='attr-value'>#fb0</span>
+ expands to <span class='attr-value'>#ffbb00</span>. This
+ ensures that white (<span class='attr-value'>#ffffff</span>) can be
+ specified with the short notation (<span class='attr-value'>#fff</span>)
+ and removes any dependencies on the color depth of the display.
+
+ The format of an RGB value in the
+ functional notation is an RGB start-function followed by a comma-separated
+ list of three numerical values (either three integer values
+ or three percentage values) followed by ")".
+ An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(".
+ For compatibility, the all-lowercase form "rgb(" is preferred.
+
+ The integer
+ value 255 corresponds to 100%, and to F or FF in the
+ hexadecimal notation: <span class='attr-value'>rgb(255,255,255)</span>
+ = <span class='attr-value'>rgb(100%,100%,100%)</span>
+ = <span class='attr-value'>#FFF</span>. White space characters are allowed
+ around the numerical values. All RGB colors are specified in the sRGB
+ color space [<a href="refs.html#ref-SRGB">SRGB</a>]. Using
+ sRGB provides an unambiguous and objectively measurable definition
+ of the color, which can be related to international standards
+ (see [<a href="refs.html#ref-COLORIMETRY">COLORIMETRY</a>]).</p>
+ <pre class='grammar'><span id='Color'>color</span> ::= "#" <a href='#HexDigit'>hexdigit</a> <a href='#HexDigit'>hexdigit</a> <a href='#HexDigit'>hexdigit</a> (<a href='#HexDigit'>hexdigit</a> <a href='#HexDigit'>hexdigit</a> <a href='#HexDigit'>hexdigit</a>)?
+ | "rgb(" <a href='#WSP'>wsp</a>* <a href='#Integer'>integer</a> <a href='#Comma'>comma</a> <a href='#Integer'>integer</a> <a href='#Comma'>comma</a> <a href='#Integer'>integer</a> <a href='#WSP'>wsp</a>* ")"
+ | "rgb(" <a href='#WSP'>wsp</a>* <a href='#Integer'>integer</a> "%" <a href='#Comma'>comma</a> <a href='#Integer'>integer</a> "%" <a href='#Comma'>comma</a> <a href='#Integer'>integer</a> "%" <a href='#WSP'>wsp</a>* ")"
+ | <var>color-keyword</var>
+<span id='HexDigit'>hexdigit</span> ::= [0-9A-Fa-f]
+<span id='Comma'>comma</span> ::= <a href='#WSP'>wsp</a>* "," <a href='#WSP'>wsp</a>*
+ </pre>
+ <p>where <var>color-keyword</var> matches (case insensitively) one of the
+ color keywords listed in <a href="#ColorKeywords">Recognized color keyword names</a>
+ below, or one of the system color keywords listed in
+ <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors'>User preferences
+ for colors</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 18.2).</p>
+ <p>The corresponding SVG DOM interface definitions for
+ <color> are defined in
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html">Document Object Model CSS</a>;
+ in particular, see <a>RGBColor</a>
+ ([<a href='refs.html#ref-DOM2STYLE'>DOM2STYLE</a>], section 2.2).
+ SVG's extension to color, including the ability to specify ICC-based colors,
+ are represented using DOM interface <a>SVGColor</a>.</p>
+ </dd>
+
+ <dt id='DataTypeCoordinate'><span class='SVG-Term'><coordinate></span></dt>
+ <dd>
+ <p>A <coordinate> is a length in the user coordinate system that is
+ the given distance from the origin of the user coordinate system along the
+ relevant axis (the x-axis for X coordinates, the y-axis for Y
+ coordinates). Its syntax is the same as that for
+ <a href='#DataTypeLength'><length></a>.</p>
+ <pre>coordinate ::= <a href='#Length'>length</a></pre>
+ <p>Within the SVG DOM, a <coordinate> is represented as
+ an <a>SVGLength</a> or an <a>SVGAnimatedLength</a>.</p>
+ </dd>
+
+
+ <dt id="DataTypeFrequency"><span class='SVG-Term'><frequency></span></dt>
+ <dd>
+ <p>Frequency values are used with aural properties. As defined in
+ CSS2, a frequency value is a <number> immediately followed
+ by a frequency unit identifier. The frequency unit identifiers
+ are:</p>
+ <ul>
+ <li><span class="attr-value">Hz</span>: Hertz</li>
+ <li><span class="attr-value">kHz</span>: kilo Hertz</li>
+ </ul>
+ <p>Frequency values may not be negative.</p>
+ <p>In the SVG DOM, <frequency> values are represented
+ using the <a>CSSPrimitiveValue</a>
+ interface 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>], section 2.2).</p>
+ </dd>
+
+ <dt id='DataTypeFuncIRI'><span class="SVG-Term"><FuncIRI></span></dt>
+ <dd>Functional notation for an <a>IRI</a>: "url(" <a href="#DataTypeIRI"><IRI></a> ")".
+ </dd>
+
+ <dt id='DataTypeICCColor'><span class='SVG-Term'><icccolor></span></dt>
+ <dd>
+ <p>An <icccolor> is an ICC color specification. In SVG 1.1,
+ an ICC color specification is given by a name, which references
+ a <a>'color-profile element'</a> element, and one or more color component
+ values. The grammar is as follows:</p>
+ <pre class='grammar'><span id='ICCColor'>icccolor</span> ::= "icc-color(" <a href='#Name'>name</a> (<a href='#CommaWSP'>comma-wsp</a> <a href='#Number'>number</a>)+ ")"
+name ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */</pre>
+ <p>The corresponding SVG DOM interface for <icccolor> is
+ <a>SVGICCColor</a>.</p>
+ </dd>
+
+ <dt id='DataTypeInteger'><span class='SVG-Term'><integer></span></dt>
+ <dd>
+ <p>An <integer> is specified as an optional sign character ("+" or
+ "-") followed by one or more digits "0" to "9":</p>
+ <pre class='grammar'><span id='Integer'>integer</span> ::= [+-]? [0-9]+</pre>
+ <p>If the sign character is not present, the number is non-negative.</p>
+ <p>Unless stated otherwise for a particular attribute or
+ <a>property</a>, the range for an <integer> encompasses (at a
+ minimum) -2147483648 to 2147483647.</p>
+ <p>Within the SVG DOM, an <integer> is represented as a
+ <span class="DOMInterfaceName">long</span> or an
+ <a>SVGAnimatedInteger</a>.</p>
+ </dd>
+
+ <dt id='DataTypeIRI'><span class="SVG-Term"><IRI></span></dt>
+ <dd>
+ <p>
+ An Internationalized Resource Identifier (see <a>IRI</a>).
+ For the specification of <a>IRI</a> references in SVG, see
+ <a href="linking.html#IRIReference">IRI references</a>.
+ </p>
+ </dd>
+
+
+ <dt id="DataTypeLength"><span class="SVG-Term"><length></span></dt>
+ <dd>
+
+ <p>A length is a distance measurement, given as a number along with a unit
+ which may be optional. Lengths are specified in one of two ways depending
+ upon whether they are used in CSS <a>property</a> syntax or SVG
+ <a>presentation attribute</a> syntax:</p>
+ <ul>
+ <li>
+ <p>When a <length> is used in a style sheet or with a
+ <a>property</a> in a <a>'style attribute'</a> attribute, the
+ syntax must match the following pattern:</p>
+ <pre class='grammar'><span id='Length'>length</span> ::= <a href='#DataTypeNumber'>number</a> (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?</pre>
+ <p><a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units'>See
+ the CSS2 specification</a> for the meanings of the unit
+ identifiers. The unit identifier may be in lower (recommended)
+ or upper case.</p>
+
+ <p>For properties defined in CSS2
+ [<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a>],
+ a length unit identifier must be provided (for non-zero values).
+ For SVG-specific <a>properties</a>, the length unit identifier
+ is optional. If a unit is not provided, the length value
+ represents a distance in the current user coordinate system.</p>
+ </li>
+ <li>
+ <p>When a <length> is used in an SVG <a>presentation attribute</a>,
+ the syntax must match the following pattern:</p>
+ <pre class='grammar'>length ::= <a href='#DataTypeNumber'>number</a> ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?</pre>
+ <p>The unit identifier, if present, must be in lower case; if
+ not present, the length value represents a distance in the
+ current user coordinate system.</p>
+
+ <p>Note that the non-property <length> definition also
+ allows a percentage unit identifier. The meaning of a
+ percentage length value depends on the attribute for which the
+ percentage length value has been specified. Two common cases
+ are: (a) when a percentage length value represents a percentage
+ of the viewport width or height (refer to <a
+ href='coords.html#Units'>the section that discusses units in
+ general</a>), and (b) when a percentage length value represents
+ a percentage of the bounding box width or height on a given
+ object (refer to <a href='coords.html#ObjectBoundingBox'>the
+ section that describes object bounding box units</a>).</p>
+
+ </li>
+ </ul>
+
+ <p>In the SVG DOM, <length> values are represented using
+ <a>SVGLength</a> or <a>SVGAnimatedLength</a> objects.</p>
+ </dd>
+
+
+ <dt id="DataTypeListOfFamilyNames"><span class="SVG-Term"><list-of-family-names></span></dt>
+ <dd>
+ <p>
+ A <list-of-family-names> is a list of font family names using the same syntax
+ as the <a href='text.html#FontFamilyProperty'><span class='prop-name'>'font-family'</span></a>
+ property, excluding the <generic-family> and <span class='attr-value'>'inherit'</span>
+ values.
+ </p>
+ </dd>
+
+<!--
+ <dt id="DataTypeListOfLanguageIDs"><span class="SVG-Term"><list-of-language-ids></span></dt>
+ <dd>
+ <p>
+ A <list-of-language-ids> is a comma separated list of
+ non-empty <a href='#DataTypeLanguageID'><language-id></a> values. White space
+ may be used before or after the commas.
+ </p>
+ </dd>
+-->
+
+ <dt id="DataTypeListOfStrings"><span class="SVG-Term"><list-of-strings></span></dt>
+ <dd>
+ <p>
+ A <list-of-strings> consists of a separated sequence of <string>s.
+ String lists are white space-separated, where white space is defined as one or more of the
+ following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A) and
+ "carriage return" (U+000D).
+ </p>
+ <p>
+ The following is an EBNF grammar describing the <list-of-strings>
+ syntax:
+ </p>
+<pre>
+list-of-strings ::= string
+ | string wsp list-of-strings
+string ::= [^#x9#xA#xD#x20]*
+wsp ::= [#x9#xA#xD#x20]+
+</pre>
+ </dd>
+
+ <dt id='DataTypeList'>
+ <span id='DataTypeListOfIRI'>
+ <span id='DataTypeNumbers'>
+ <span id='DataTypeCoordinates'>
+ <span id='DataTypeLengths'>
+ <span class='SVG-Term'><list-of-<var>T</var>s></span>
+ </span>
+ </span>
+ </span>
+ </span>
+ </dt>
+ <dd>
+ <p>(Where <var>T</var> is a type other than
+ <string><!--,
+ <a href='#DataTypeLanguageID'><language-id></a>--> and
+ <family-name>.)
+ A list consists of a
+ separated sequence of values. Unless explicitly described
+ differently, lists within SVG's XML attributes can be either
+ comma-separated, with optional white space before or after the comma,
+ or white space-separated.</p>
+ <p>White space in lists is defined as one or more of the
+ following consecutive characters: "space" (U+0020), "tab" (U+0009),
+ "line feed" (U+000A), "carriage return" (U+000D)
+ and "form-feed" (U+000C).</p>
+ <p>The following is a template for an EBNF grammar describing the
+ <list-of-<var>T</var>s> syntax:</p>
+ <pre class='grammar'><span id='ListOfTs'>list-of-<var>T</var>s</span> ::= <var>T</var>
+ | <var>T</var> <a href='#CommaWSP'>comma-wsp</a> <a href='#ListOfTs'>list-of-<var>T</var>s</a>
+<span id='CommaWSP'>comma-wsp</span> ::= (<a href='#WSP'>wsp</a>+ ","? <a href='#WSP'>wsp</a>*) | ("," <a href='#WSP'>wsp</a>*)
+<span id='WSP'>wsp</span> ::= (#x20 | #x9 | #xD | #xA)</pre>
+ <p>Within the SVG DOM, values of a <list-of-<var>T</var>s>
+ type are represented by an interface specific for the
+ particular type <var>T</var>. For example, a <list-of-lengths>
+ is represented in the SVG DOM using an <a>SVGLengthList</a>
+ or <a>SVGAnimatedLengthList</a> object.</p>
+ </dd>
+
+ <dt id="DataTypeName"><span class="SVG-Term"><name></span></dt>
+ <dd>
+ <p>A name, which is a string where a few characters of syntactic significance are disallowed.</p>
+ <pre class="grammar"><span id="Name">name</span> ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */</pre></dd>
+
+ <dt id='DataTypeNumber'><span class='SVG-Term'><number></span></dt>
+ <dd>
+ <p>Real numbers are specified in one of two ways. When used in a style sheet,
+ a <number> is defined as follows:</p>
+ <pre class='grammar'><span id='Number'>number</span> ::= <a href='#Integer'>integer</a>
+ | [+-]? [0-9]* "." [0-9]+</pre>
+ <p>This syntax is the same as the definition in CSS
+ ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 4.3.1).</p>
+ <p>When used in an SVG attribute,
+ a <number> is defined differently, to allow numbers with large magnitudes
+ to be specified more concisely:</p>
+ <pre class='grammar'>number ::= <a href='#Integer'>integer</a> ([Ee] <a href='#DataTypeInteger'>integer</a>)?
+ | [+-]? [0-9]* "." [0-9]+ ([Ee] <a href='#DataTypeInteger'>integer</a>)?</pre>
+ <p>Within the SVG DOM, a <number> is represented as a
+ <span class="DOMInterfaceName">float</span>, <a>SVGNumber</a> or a
+ <a>SVGAnimatedNumber</a>.</p>
+ </dd>
+
+ <dt id='DataTypeNumberOptionalNumber'><span class='SVG-Term'><number-optional-number></span></dt>
+ <dd>
+ <p>A pair of <a><number></a>s, where the second
+ <a><number></a> is optional.</p>
+ <pre class='grammar'>
+number-optional-number ::= <a href='#DataTypeNumber'>number</a>
+ | <a href='#DataTypeNumber'>number</a> <a href='#CommaWSP'>comma-wsp</a> <a href='#DataTypeNumber'>number</a></pre>
+ <p>In the SVG DOM, a <number-optional-number> is represented
+ using a pair of <a>SVGAnimatedInteger</a> or <a>SVGAnimatedNumber</a>
+ objects.</p>
+ </dd>
+
+ <dt id="DataTypePaint"><span class='SVG-Term'><paint></span></dt>
+ <dd>
+ <p>The values for properties <a>'fill'</a> and <a>'stroke'</a>
+ are specifications of the type of paint to use when filling or stroking
+ a given graphics element. The available options and syntax for
+ <paint> are described in
+ <a href="painting.html#SpecifyingPaint">Specifying paint</a>.</p>
+ <p>Within the SVG DOM, <paint> values are represented using
+ <a>SVGPaint</a> objects.</p>
+ </dd>
+
+ <dt id="DataTypePercentage"><span class='SVG-Term'><percentage></span></dt>
+ <dd>
+ <p>Percentages are specified as a number followed by a "%" character:</p>
+ <pre class='grammar'><span id='Percentage'>percentage</span> ::= <a href='#Number'>number</a> "%"</pre>
+ <p>Note that the definition of <a href='#Number'><number></a> depends
+ on whether the percentage is specified in a style sheet or in an
+ attribute that is not also a <a>presentation attribute</a>.</p>
+ <p>Percentage values are always relative to another value, for example a
+ length. Each attribute or <a>property</a> that allows percentages also
+ defines the reference distance measurement to which the percentage
+ refers.</p>
+ <p>Within the SVG DOM, a <percentage> is
+ represented using an <a>SVGNumber</a> or <a>SVGAnimatedNumber</a>
+ object.</p>
+ </dd>
+
+ <dt id='DataTypeTime'><span class='SVG-Term'><time></span></dt>
+ <dd>
+ <p>A time value is a <number> immediately followed by a time unit
+ identifier. The time unit identifiers are: </p>
+ <ul>
+ <li><span class="attr-value">ms</span>: milliseconds</li>
+ <li><span class="attr-value">s</span>: seconds</li>
+ </ul>
+ <p>In the SVG DOM, <time> values are represented
+ using the <a>CSSPrimitiveValue</a>
+ interface 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>], section 2.2).</p>
+ </dd>
+
+ <dt id="DataTypeTransformList"><span class='SVG-Term'><transform-list></span></dt>
+ <dd>
+ <p>A <transform-list> is used to specify a list of coordinate system
+ transformations. A detailed description of the possible values for a
+ <transform-list> is given in
+ <a href="coords.html#TransformAttribute">Modifying the User Coordinate
+ System: the transform attribute</a>.</p>
+ <p>Within the SVG DOM, a <transform-list> value is represented using
+ an <a>SVGTransformList</a> or <a>SVGAnimatedTransformList</a>
+ object.</p>
+ </dd>
+
+<!--
+ <dt id="DataTypeURI"><span class='SVG-Term'><uri></span></dt>
+ <dd>
+ <p>A <uri> is a Uniform Resource Identifier reference.
+ A URI is the address of a resource on the Web. For the specification of
+ URI references in SVG, see
+ <a href="struct.html#URIReference">URI references</a>.</p>
+ <p>Within the SVG DOM, a <uri> value is represented using a
+ <span class="DOMInterfaceName">DOMString</span> value or an
+ <a>SVGAnimatedString</a> object.</p>
+ </dd>
+-->
+
+ <dt id="DataTypeXML-Name"><span class="SVG-Term"><XML-Name></span></dt>
+ <dd>
+ <p>
+ An XML name, as defined by the
+ <a href="http://www.w3.org/TR/2006/REC-xml-20060816/#NT-Name">Name</a>
+ production in
+ <a href="http://www.w3.org/TR/2006/REC-xml-20060816/"><cite>Extensible Markup Language (XML) 1.0</cite></a> ([<a href="refs.html#ref-XML10">XML10</a>], section 2.3).
+ </p>
+ </dd>
+
+</dl>
+
+<h2 id="Precision">Real number precision</h2>
+
+<p>Unless stated otherwise for a particular attribute or <a>property</a>, a
+<a><number></a> has the capacity
+for at least a single-precision floating point number and has a range (at a
+minimum) of -3.4e+38F to +3.4e+38F.</p>
+
+<p>It is recommended that higher precision floating point
+storage and computation be performed on operations such as
+coordinate system transformations to provide the best
+possible precision and to prevent round-off errors.</p>
+
+<p><a href="conform.html#ConformingHighQualitySVGViewers">Conforming
+High-Quality SVG Viewers</a> are required to use at least double-precision
+floating point for intermediate calculations on certain numerical operations.</p>
+
+ <h2 id="ColorKeywords">Recognized color keyword names</h2>
+ <p>The following is the list of recognized color keywords that
+ can be used as a keyword value for data type <a
+ href="types.html#DataTypeColor"><color></a>:</p>
+ <table class="color-keywords" summary="color keywords">
+ <tr>
+ <td>
+ <table summary="color keywords part 1">
+ <tr>
+ <td><div class="colorpatch aliceblue"></div></td>
+ <td><span class="prop-value">aliceblue</span></td>
+ <td><span class="color-keyword-value">rgb(240, 248, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch antiquewhite"></div></td>
+ <td><span class="prop-value">antiquewhite</span></td>
+ <td><span class="color-keyword-value">rgb(250, 235, 215)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch aqua"></div></td>
+ <td><span class="prop-value">aqua</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch aquamarine"></div></td>
+ <td><span class="prop-value">aquamarine</span></td>
+ <td><span class="color-keyword-value">rgb(127, 255, 212)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch azure"></div></td>
+ <td><span class="prop-value">azure</span></td>
+ <td><span class="color-keyword-value">rgb(240, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch beige"></div></td>
+ <td><span class="prop-value">beige</span></td>
+ <td><span class="color-keyword-value">rgb(245, 245, 220)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch bisque"></div></td>
+ <td><span class="prop-value">bisque</span></td>
+ <td><span class="color-keyword-value">rgb(255, 228, 196)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch black"></div></td>
+ <td><span class="prop-value">black</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch blanchedalmond"></div></td>
+ <td><span class="prop-value">blanchedalmond</span></td>
+ <td><span class="color-keyword-value">rgb(255, 235, 205)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch blue"></div></td>
+ <td><span class="prop-value">blue</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch blueviolet"></div></td>
+ <td><span class="prop-value">blueviolet</span></td>
+ <td><span class="color-keyword-value">rgb(138, 43, 226)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch brown"></div></td>
+ <td><span class="prop-value">brown</span></td>
+ <td><span class="color-keyword-value">rgb(165, 42, 42)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch burlywood"></div></td>
+ <td><span class="prop-value">burlywood</span></td>
+ <td><span class="color-keyword-value">rgb(222, 184, 135)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch cadetblue"></div></td>
+ <td><span class="prop-value">cadetblue</span></td>
+ <td><span class="color-keyword-value">rgb( 95, 158, 160)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch chartreuse"></div></td>
+ <td><span class="prop-value">chartreuse</span></td>
+ <td><span class="color-keyword-value">rgb(127, 255, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch chocolate"></div></td>
+ <td><span class="prop-value">chocolate</span></td>
+ <td><span class="color-keyword-value">rgb(210, 105, 30)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch coral"></div></td>
+ <td><span class="prop-value">coral</span></td>
+ <td><span class="color-keyword-value">rgb(255, 127, 80)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch cornflowerblue"></div></td>
+ <td><span class="prop-value">cornflowerblue</span></td>
+ <td><span class="color-keyword-value">rgb(100, 149, 237)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch cornsilk"></div></td>
+ <td><span class="prop-value">cornsilk</span></td>
+ <td><span class="color-keyword-value">rgb(255, 248, 220)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch crimson"></div></td>
+ <td><span class="prop-value">crimson</span></td>
+ <td><span class="color-keyword-value">rgb(220, 20, 60)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch cyan"></div></td>
+ <td><span class="prop-value">cyan</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkblue"></div></td>
+ <td><span class="prop-value">darkblue</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 139)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkcyan"></div></td>
+ <td><span class="prop-value">darkcyan</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 139, 139)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkgoldenrod"></div></td>
+ <td><span class="prop-value">darkgoldenrod</span></td>
+ <td><span class="color-keyword-value">rgb(184, 134, 11)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkgray"></div></td>
+ <td><span class="prop-value">darkgray</span></td>
+ <td><span class="color-keyword-value">rgb(169, 169, 169)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkgreen"></div></td>
+ <td><span class="prop-value">darkgreen</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 100, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkgrey"></div></td>
+ <td><span class="prop-value">darkgrey</span></td>
+ <td><span class="color-keyword-value">rgb(169, 169, 169)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkkhaki"></div></td>
+ <td><span class="prop-value">darkkhaki</span></td>
+ <td><span class="color-keyword-value">rgb(189, 183, 107)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkmagenta"></div></td>
+ <td><span class="prop-value">darkmagenta</span></td>
+ <td><span class="color-keyword-value">rgb(139, 0, 139)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkolivegreen"></div></td>
+ <td><span class="prop-value">darkolivegreen</span></td>
+ <td><span class="color-keyword-value">rgb( 85, 107, 47)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkorange"></div></td>
+ <td><span class="prop-value">darkorange</span></td>
+ <td><span class="color-keyword-value">rgb(255, 140, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkorchid"></div></td>
+ <td><span class="prop-value">darkorchid</span></td>
+ <td><span class="color-keyword-value">rgb(153, 50, 204)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkred"></div></td>
+ <td><span class="prop-value">darkred</span></td>
+ <td><span class="color-keyword-value">rgb(139, 0, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darksalmon"></div></td>
+ <td><span class="prop-value">darksalmon</span></td>
+ <td><span class="color-keyword-value">rgb(233, 150, 122)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkseagreen"></div></td>
+ <td><span class="prop-value">darkseagreen</span></td>
+ <td><span class="color-keyword-value">rgb(143, 188, 143)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkslateblue"></div></td>
+ <td><span class="prop-value">darkslateblue</span></td>
+ <td><span class="color-keyword-value">rgb( 72, 61, 139)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkslategray"></div></td>
+ <td><span class="prop-value">darkslategray</span></td>
+ <td><span class="color-keyword-value">rgb( 47, 79, 79)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkslategrey"></div></td>
+ <td><span class="prop-value">darkslategrey</span></td>
+ <td><span class="color-keyword-value">rgb( 47, 79, 79)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkturquoise"></div></td>
+ <td><span class="prop-value">darkturquoise</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 206, 209)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkviolet"></div></td>
+ <td><span class="prop-value">darkviolet</span></td>
+ <td><span class="color-keyword-value">rgb(148, 0, 211)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch deeppink"></div></td>
+ <td><span class="prop-value">deeppink</span></td>
+ <td><span class="color-keyword-value">rgb(255, 20, 147)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch deepskyblue"></div></td>
+ <td><span class="prop-value">deepskyblue</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 191, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch dimgray"></div></td>
+ <td><span class="prop-value">dimgray</span></td>
+ <td><span class="color-keyword-value">rgb(105, 105, 105)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch dimgrey"></div></td>
+ <td><span class="prop-value">dimgrey</span></td>
+ <td><span class="color-keyword-value">rgb(105, 105, 105)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch dodgerblue"></div></td>
+ <td><span class="prop-value">dodgerblue</span></td>
+ <td><span class="color-keyword-value">rgb( 30, 144, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch firebrick"></div></td>
+ <td><span class="prop-value">firebrick</span></td>
+ <td><span class="color-keyword-value">rgb(178, 34, 34)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch floralwhite"></div></td>
+ <td><span class="prop-value">floralwhite</span></td>
+ <td><span class="color-keyword-value">rgb(255, 250, 240)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch forestgreen"></div></td>
+ <td><span class="prop-value">forestgreen</span></td>
+ <td><span class="color-keyword-value">rgb( 34, 139, 34)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch fuchsia"></div></td>
+ <td><span class="prop-value">fuchsia</span></td>
+ <td><span class="color-keyword-value">rgb(255, 0, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch gainsboro"></div></td>
+ <td><span class="prop-value">gainsboro</span></td>
+ <td><span class="color-keyword-value">rgb(220, 220, 220)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch ghostwhite"></div></td>
+ <td><span class="prop-value">ghostwhite</span></td>
+ <td><span class="color-keyword-value">rgb(248, 248, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch gold"></div></td>
+ <td><span class="prop-value">gold</span></td>
+ <td><span class="color-keyword-value">rgb(255, 215, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch goldenrod"></div></td>
+ <td><span class="prop-value">goldenrod</span></td>
+ <td><span class="color-keyword-value">rgb(218, 165, 32)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch gray"></div></td>
+ <td><span class="prop-value">gray</span></td>
+ <td><span class="color-keyword-value">rgb(128, 128, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch grey"></div></td>
+ <td><span class="prop-value">grey</span></td>
+ <td><span class="color-keyword-value">rgb(128, 128, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch green"></div></td>
+ <td><span class="prop-value">green</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 128, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch greenyellow"></div></td>
+ <td><span class="prop-value">greenyellow</span></td>
+ <td><span class="color-keyword-value">rgb(173, 255, 47)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch honeydew"></div></td>
+ <td><span class="prop-value">honeydew</span></td>
+ <td><span class="color-keyword-value">rgb(240, 255, 240)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch hotpink"></div></td>
+ <td><span class="prop-value">hotpink</span></td>
+ <td><span class="color-keyword-value">rgb(255, 105, 180)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch indianred"></div></td>
+ <td><span class="prop-value">indianred</span></td>
+ <td><span class="color-keyword-value">rgb(205, 92, 92)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch indigo"></div></td>
+ <td><span class="prop-value">indigo</span></td>
+ <td><span class="color-keyword-value">rgb( 75, 0, 130)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch ivory"></div></td>
+ <td><span class="prop-value">ivory</span></td>
+ <td><span class="color-keyword-value">rgb(255, 255, 240)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch khaki"></div></td>
+ <td><span class="prop-value">khaki</span></td>
+ <td><span class="color-keyword-value">rgb(240, 230, 140)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lavender"></div></td>
+ <td><span class="prop-value">lavender</span></td>
+ <td><span class="color-keyword-value">rgb(230, 230, 250)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lavenderblush"></div></td>
+ <td><span class="prop-value">lavenderblush</span></td>
+ <td><span class="color-keyword-value">rgb(255, 240, 245)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lawngreen"></div></td>
+ <td><span class="prop-value">lawngreen</span></td>
+ <td><span class="color-keyword-value">rgb(124, 252, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lemonchiffon"></div></td>
+ <td><span class="prop-value">lemonchiffon</span></td>
+ <td><span class="color-keyword-value">rgb(255, 250, 205)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightblue"></div></td>
+ <td><span class="prop-value">lightblue</span></td>
+ <td><span class="color-keyword-value">rgb(173, 216, 230)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightcoral"></div></td>
+ <td><span class="prop-value">lightcoral</span></td>
+ <td><span class="color-keyword-value">rgb(240, 128, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightcyan"></div></td>
+ <td><span class="prop-value">lightcyan</span></td>
+ <td><span class="color-keyword-value">rgb(224, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightgoldenrodyellow"></div></td>
+ <td><span class="prop-value">lightgoldenrodyellow</span></td>
+ <td><span class="color-keyword-value">rgb(250, 250, 210)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightgray"></div></td>
+ <td><span class="prop-value">lightgray</span></td>
+ <td><span class="color-keyword-value">rgb(211, 211, 211)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightgreen"></div></td>
+ <td><span class="prop-value">lightgreen</span></td>
+ <td><span class="color-keyword-value">rgb(144, 238, 144)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightgrey"></div></td>
+ <td><span class="prop-value">lightgrey</span></td>
+ <td><span class="color-keyword-value">rgb(211, 211, 211)</span></td>
+ </tr>
+ </table>
+ </td>
+ <td> </td>
+ <td>
+ <table summary="color keywords part 2">
+ <tr>
+ <td><div class="colorpatch lightpink"></div></td>
+ <td><span class="prop-value">lightpink</span></td>
+ <td><span class="color-keyword-value">rgb(255, 182, 193)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightsalmon"></div></td>
+ <td><span class="prop-value">lightsalmon</span></td>
+ <td><span class="color-keyword-value">rgb(255, 160, 122)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightseagreen"></div></td>
+ <td><span class="prop-value">lightseagreen</span></td>
+ <td><span class="color-keyword-value">rgb( 32, 178, 170)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightskyblue"></div></td>
+ <td><span class="prop-value">lightskyblue</span></td>
+ <td><span class="color-keyword-value">rgb(135, 206, 250)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightslategray"></div></td>
+ <td><span class="prop-value">lightslategray</span></td>
+ <td><span class="color-keyword-value">rgb(119, 136, 153)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightslategrey"></div></td>
+ <td><span class="prop-value">lightslategrey</span></td>
+ <td><span class="color-keyword-value">rgb(119, 136, 153)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightsteelblue"></div></td>
+ <td><span class="prop-value">lightsteelblue</span></td>
+ <td><span class="color-keyword-value">rgb(176, 196, 222)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightyellow"></div></td>
+ <td><span class="prop-value">lightyellow</span></td>
+ <td><span class="color-keyword-value">rgb(255, 255, 224)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lime"></div></td>
+ <td><span class="prop-value">lime</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 255, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch limegreen"></div></td>
+ <td><span class="prop-value">limegreen</span></td>
+ <td><span class="color-keyword-value">rgb( 50, 205, 50)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch linen"></div></td>
+ <td><span class="prop-value">linen</span></td>
+ <td><span class="color-keyword-value">rgb(250, 240, 230)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch magenta"></div></td>
+ <td><span class="prop-value">magenta</span></td>
+ <td><span class="color-keyword-value">rgb(255, 0, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch maroon"></div></td>
+ <td><span class="prop-value">maroon</span></td>
+ <td><span class="color-keyword-value">rgb(128, 0, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumaquamarine"></div></td>
+ <td><span class="prop-value">mediumaquamarine</span></td>
+ <td><span class="color-keyword-value">rgb(102, 205, 170)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumblue"></div></td>
+ <td><span class="prop-value">mediumblue</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 205)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumorchid"></div></td>
+ <td><span class="prop-value">mediumorchid</span></td>
+ <td><span class="color-keyword-value">rgb(186, 85, 211)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumpurple"></div></td>
+ <td><span class="prop-value">mediumpurple</span></td>
+ <td><span class="color-keyword-value">rgb(147, 112, 219)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumseagreen"></div></td>
+ <td><span
+ class="prop-value">mediumseagreen</span></td>
+ <td><span class="color-keyword-value">rgb( 60, 179, 113)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumslateblue"></div></td>
+ <td><span
+ class="prop-value">mediumslateblue</span></td>
+ <td><span class="color-keyword-value">rgb(123, 104, 238)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumspringgreen"></div></td>
+ <td><span class="prop-value">mediumspringgreen</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 250, 154)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumturquoise"></div></td>
+ <td><span class="prop-value">mediumturquoise</span></td>
+ <td><span class="color-keyword-value">rgb( 72, 209, 204)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumvioletred"></div></td>
+ <td><span class="prop-value">mediumvioletred</span></td>
+ <td><span class="color-keyword-value">rgb(199, 21, 133)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch midnightblue"></div></td>
+ <td><span class="prop-value">midnightblue</span></td>
+ <td><span class="color-keyword-value">rgb( 25, 25, 112)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mintcream"></div></td>
+ <td><span class="prop-value">mintcream</span></td>
+ <td><span class="color-keyword-value">rgb(245, 255, 250)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mistyrose"></div></td>
+ <td><span class="prop-value">mistyrose</span></td>
+ <td><span class="color-keyword-value">rgb(255, 228, 225)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch moccasin"></div></td>
+ <td><span class="prop-value">moccasin</span></td>
+ <td><span class="color-keyword-value">rgb(255, 228, 181)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch navajowhite"></div></td>
+ <td><span class="prop-value">navajowhite</span></td>
+ <td><span class="color-keyword-value">rgb(255, 222, 173)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch navy"></div></td>
+ <td><span class="prop-value">navy</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch oldlace"></div></td>
+ <td><span class="prop-value">oldlace</span></td>
+ <td><span class="color-keyword-value">rgb(253, 245, 230)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch olive"></div></td>
+ <td><span class="prop-value">olive</span></td>
+ <td><span class="color-keyword-value">rgb(128, 128, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch olivedrab"></div></td>
+ <td><span class="prop-value">olivedrab</span></td>
+ <td><span class="color-keyword-value">rgb(107, 142, 35)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch orange"></div></td>
+ <td><span class="prop-value">orange</span></td>
+ <td><span class="color-keyword-value">rgb(255, 165, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch orangered"></div></td>
+ <td><span class="prop-value">orangered</span></td>
+ <td><span class="color-keyword-value">rgb(255, 69, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch orchid"></div></td>
+ <td><span class="prop-value">orchid</span></td>
+ <td><span class="color-keyword-value">rgb(218, 112, 214)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch palegoldenrod"></div></td>
+ <td><span class="prop-value">palegoldenrod</span></td>
+ <td><span class="color-keyword-value">rgb(238, 232, 170)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch palegreen"></div></td>
+ <td><span class="prop-value">palegreen</span></td>
+ <td><span class="color-keyword-value">rgb(152, 251, 152)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch paleturquoise"></div></td>
+ <td><span class="prop-value">paleturquoise</span></td>
+ <td><span class="color-keyword-value">rgb(175, 238, 238)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch palevioletred"></div></td>
+ <td><span class="prop-value">palevioletred</span></td>
+ <td><span class="color-keyword-value">rgb(219, 112, 147)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch papayawhip"></div></td>
+ <td><span class="prop-value">papayawhip</span></td>
+ <td><span class="color-keyword-value">rgb(255, 239, 213)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch peachpuff"></div></td>
+ <td><span class="prop-value">peachpuff</span></td>
+ <td><span class="color-keyword-value">rgb(255, 218, 185)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch peru"></div></td>
+ <td><span class="prop-value">peru</span></td>
+ <td><span class="color-keyword-value">rgb(205, 133, 63)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch pink"></div></td>
+ <td><span class="prop-value">pink</span></td>
+ <td><span class="color-keyword-value">rgb(255, 192, 203)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch plum"></div></td>
+ <td><span class="prop-value">plum</span></td>
+ <td><span class="color-keyword-value">rgb(221, 160, 221)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch powderblue"></div></td>
+ <td><span class="prop-value">powderblue</span></td>
+ <td><span class="color-keyword-value">rgb(176, 224, 230)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch purple"></div></td>
+ <td><span class="prop-value">purple</span></td>
+ <td><span class="color-keyword-value">rgb(128, 0, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch red"></div></td>
+ <td><span class="prop-value">red</span></td>
+ <td><span class="color-keyword-value">rgb(255, 0, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch rosybrown"></div></td>
+ <td><span class="prop-value">rosybrown</span></td>
+ <td><span class="color-keyword-value">rgb(188, 143, 143)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch royalblue"></div></td>
+ <td><span class="prop-value">royalblue</span></td>
+ <td><span class="color-keyword-value">rgb( 65, 105, 225)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch saddlebrown"></div></td>
+ <td><span class="prop-value">saddlebrown</span></td>
+ <td><span class="color-keyword-value">rgb(139, 69, 19)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch salmon"></div></td>
+ <td><span class="prop-value">salmon</span></td>
+ <td><span class="color-keyword-value">rgb(250, 128, 114)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch sandybrown"></div></td>
+ <td><span class="prop-value">sandybrown</span></td>
+ <td><span class="color-keyword-value">rgb(244, 164, 96)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch seagreen"></div></td>
+ <td><span class="prop-value">seagreen</span></td>
+ <td><span class="color-keyword-value">rgb( 46, 139, 87)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch seashell"></div></td>
+ <td><span class="prop-value">seashell</span></td>
+ <td><span class="color-keyword-value">rgb(255, 245, 238)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch sienna"></div></td>
+ <td><span class="prop-value">sienna</span></td>
+ <td><span class="color-keyword-value">rgb(160, 82, 45)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch silver"></div></td>
+ <td><span class="prop-value">silver</span></td>
+ <td><span class="color-keyword-value">rgb(192, 192, 192)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch skyblue"></div></td>
+ <td><span class="prop-value">skyblue</span></td>
+ <td><span class="color-keyword-value">rgb(135, 206, 235)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch slateblue"></div></td>
+ <td><span class="prop-value">slateblue</span></td>
+ <td><span class="color-keyword-value">rgb(106, 90, 205)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch slategray"></div></td>
+ <td><span class="prop-value">slategray</span></td>
+ <td><span class="color-keyword-value">rgb(112, 128, 144)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch slategrey"></div></td>
+ <td><span class="prop-value">slategrey</span></td>
+ <td><span class="color-keyword-value">rgb(112, 128, 144)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch snow"></div></td>
+ <td><span class="prop-value">snow</span></td>
+ <td><span class="color-keyword-value">rgb(255, 250, 250)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch springgreen"></div></td>
+ <td><span class="prop-value">springgreen</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 255, 127)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch steelblue"></div></td>
+ <td><span class="prop-value">steelblue</span></td>
+ <td><span class="color-keyword-value">rgb( 70, 130, 180)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch tan"></div>
+ </td>
+ <td><span class="prop-value">tan</span></td>
+ <td><span class="color-keyword-value">rgb(210, 180, 140)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch teal"></div></td>
+ <td><span class="prop-value">teal</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 128, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch thistle"></div></td>
+ <td><span class="prop-value">thistle</span></td>
+ <td><span class="color-keyword-value">rgb(216, 191, 216)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch tomato"></div></td>
+ <td><span class="prop-value">tomato</span></td>
+ <td><span class="color-keyword-value">rgb(255, 99, 71)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch turquoise"></div></td>
+ <td><span class="prop-value">turquoise</span></td>
+ <td><span class="color-keyword-value">rgb( 64, 224, 208)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch violet"></div></td>
+ <td><span class="prop-value">violet</span></td>
+ <td><span class="color-keyword-value">rgb(238, 130, 238)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch wheat"></div></td>
+ <td><span class="prop-value">wheat</span></td>
+ <td><span class="color-keyword-value">rgb(245, 222, 179)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch white"></div></td>
+ <td><span class="prop-value">white</span></td>
+ <td><span class="color-keyword-value">rgb(255, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch whitesmoke"></div>
+ </td>
+ <td><span class="prop-value">whitesmoke</span></td>
+ <td><span class="color-keyword-value">rgb(245, 245, 245)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch yellow"></div>
+ </td>
+ <td><span class="prop-value">yellow</span></td>
+ <td><span class="color-keyword-value">rgb(255, 255, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch yellowgreen"></div>
+ </td>
+ <td><span class="prop-value">yellowgreen</span></td>
+ <td><span class="color-keyword-value">rgb(154, 205, 50)</span></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td><span class="prop-value"> </span></td>
+ <td> </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+ </table>
+
+<h2 id="BasicDOMInterfaces">Basic DOM interfaces</h2>
+
+<h3 id="InterfaceSVGElement">Interface SVGElement</h3>
+
+<edit:interface name='::svg::SVGElement'/>
+
+<h3 id="InterfaceSVGAnimatedBoolean">Interface SVGAnimatedBoolean</h3>
+
+<edit:interface name='::svg::SVGAnimatedBoolean'/>
+
+<h3 id="InterfaceSVGAnimatedString">Interface SVGAnimatedString</h3>
+
+<edit:interface name='::svg::SVGAnimatedString'/>
+
+<h3 id="InterfaceSVGStringList">Interface SVGStringList</h3>
+
+<edit:interface name='::svg::SVGStringList'/>
+
+<h3 id="InterfaceSVGAnimatedEnumeration">Interface SVGAnimatedEnumeration</h3>
+
+<edit:interface name='::svg::SVGAnimatedEnumeration'/>
+
+<h3 id="InterfaceSVGAnimatedInteger">Interface SVGAnimatedInteger</h3>
+
+<edit:interface name='::svg::SVGAnimatedInteger'/>
+
+<h3 id="InterfaceSVGNumber">Interface SVGNumber</h3>
+
+<edit:interface name='::svg::SVGNumber'/>
+
+<h3 id="InterfaceSVGAnimatedNumber">Interface SVGAnimatedNumber</h3>
+
+<edit:interface name='::svg::SVGAnimatedNumber'/>
+
+<h3 id="InterfaceSVGNumberList">Interface SVGNumberList</h3>
+
+<edit:interface name='::svg::SVGNumberList'/>
+
+<h3 id="InterfaceSVGAnimatedNumberList">Interface SVGAnimatedNumberList</h3>
+
+<edit:interface name='::svg::SVGAnimatedNumberList'/>
+
+<h3 id="InterfaceSVGLength">Interface SVGLength</h3>
+
+<edit:interface name='::svg::SVGLength'/>
+
+<h3 id="InterfaceSVGAnimatedLength">Interface SVGAnimatedLength</h3>
+
+<edit:interface name='::svg::SVGAnimatedLength'/>
+
+<h3 id="InterfaceSVGLengthList">Interface SVGLengthList</h3>
+
+<edit:interface name='::svg::SVGLengthList'/>
+
+<h3 id="InterfaceSVGAnimatedLengthList">Interface SVGAnimatedLengthList</h3>
+
+<edit:interface name='::svg::SVGAnimatedLengthList'/>
+
+<h3 id="InterfaceSVGAngle">Interface SVGAngle</h3>
+
+<edit:interface name='::svg::SVGAngle'/>
+
+<h3 id="InterfaceSVGAnimatedAngle">Interface SVGAnimatedAngle</h3>
+
+<edit:interface name='::svg::SVGAnimatedAngle'/>
+
+<h3 id="InterfaceSVGColor">Interface SVGColor</h3>
+
+<edit:interface name='::svg::SVGColor'/>
+
+<h3 id="InterfaceSVGICCColor">Interface SVGICCColor</h3>
+
+<edit:interface name='::svg::SVGICCColor'/>
+
+<h3 id="InterfaceSVGRect">Interface SVGRect</h3>
+
+<edit:interface name='::svg::SVGRect'/>
+
+<h3 id="InterfaceSVGAnimatedRect">Interface SVGAnimatedRect</h3>
+
+<edit:interface name='::svg::SVGAnimatedRect'/>
+
+<h3 id="InterfaceSVGUnitTypes">Interface SVGUnitTypes</h3>
+
+<edit:interface name='::svg::SVGUnitTypes'/>
+
+<h3 id="InterfaceSVGStylable">Interface SVGStylable</h3>
+
+<edit:interface name='::svg::SVGStylable'/>
+
+<h3 id="InterfaceSVGLocatable">Interface SVGLocatable</h3>
+
+<edit:interface name='::svg::SVGLocatable'/>
+
+<h3 id="InterfaceSVGTransformable">Interface SVGTransformable</h3>
+
+<edit:interface name='::svg::SVGTransformable'/>
+
+<h3 id="InterfaceSVGTests">Interface SVGTests</h3>
+
+<edit:interface name='::svg::SVGTests'/>
+
+<h3 id="InterfaceSVGLangSpace">Interface SVGLangSpace</h3>
+
+<edit:interface name='::svg::SVGLangSpace'/>
+
+<h3 id="InterfaceSVGExternalResourcesRequired">Interface SVGExternalResourcesRequired</h3>
+
+<edit:interface name='::svg::SVGExternalResourcesRequired'/>
+
+<h3 id="InterfaceSVGFitToViewBox">Interface SVGFitToViewBox</h3>
+
+<edit:interface name='::svg::SVGFitToViewBox'/>
+
+<h3 id="InterfaceSVGZoomAndPan">Interface SVGZoomAndPan</h3>
+
+<edit:interface name='::svg::SVGZoomAndPan'/>
+
+<h3 id="InterfaceSVGViewSpec">Interface SVGViewSpec</h3>
+
+<edit:interface name='::svg::SVGViewSpec'/>
+
+<h3 id="InterfaceSVGURIReference">Interface SVGURIReference</h3>
+
+<edit:interface name='::svg::SVGURIReference'/>
+
+<h3 id="InterfaceSVGCSSRule">Interface SVGCSSRule</h3>
+
+<edit:interface name='::svg::SVGCSSRule'/>
+
+<h3 id="InterfaceSVGRenderingIntent">Interface SVGRenderingIntent</h3>
+
+<edit:interface name='::svg::SVGRenderingIntent'/>
+
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/xhtml1-transitional+edit.dtd Thu Jul 28 16:19:09 2011 +0100
@@ -0,0 +1,1400 @@
+<!--
+ Extensible HTML version 1.0 Transitional plus edit DTD
+
+ This is the same as HTML 4 Transitional except for
+ changes due to the differences between XML and SGML.
+
+ ** and except for adding funky xmlns:edit stuff **
+ ** and the inclusion of the entities from xhtml-lat1.ent **
+
+ Namespace = http://www.w3.org/1999/xhtml
+
+ For further information, see: http://www.w3.org/TR/xhtml1
+
+ Copyright (c) 1998-2002 W3C (MIT, INRIA, Keio),
+ All Rights Reserved.
+
+ This DTD module is identified by the PUBLIC and SYSTEM identifiers:
+
+ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN"
+ SYSTEM "xhtml1-transitional+edit.dtd"
+
+ $Revision: 1.1 $
+ $Date: 2009/03/30 22:26:32 $
+
+-->
+
+<!--================ Character mnemonic entities =========================-->
+
+<!ENTITY nbsp " "> <!-- no-break space = non-breaking space,
+ U+00A0 ISOnum -->
+<!ENTITY iexcl "¡"> <!-- inverted exclamation mark, U+00A1 ISOnum -->
+<!ENTITY cent "¢"> <!-- cent sign, U+00A2 ISOnum -->
+<!ENTITY pound "£"> <!-- pound sign, U+00A3 ISOnum -->
+<!ENTITY curren "¤"> <!-- currency sign, U+00A4 ISOnum -->
+<!ENTITY yen "¥"> <!-- yen sign = yuan sign, U+00A5 ISOnum -->
+<!ENTITY brvbar "¦"> <!-- broken bar = broken vertical bar,
+ U+00A6 ISOnum -->
+<!ENTITY sect "§"> <!-- section sign, U+00A7 ISOnum -->
+<!ENTITY uml "¨"> <!-- diaeresis = spacing diaeresis,
+ U+00A8 ISOdia -->
+<!ENTITY copy "©"> <!-- copyright sign, U+00A9 ISOnum -->
+<!ENTITY ordf "ª"> <!-- feminine ordinal indicator, U+00AA ISOnum -->
+<!ENTITY laquo "«"> <!-- left-pointing double angle quotation mark
+ = left pointing guillemet, U+00AB ISOnum -->
+<!ENTITY not "¬"> <!-- not sign = angled dash,
+ U+00AC ISOnum -->
+<!ENTITY shy "­"> <!-- soft hyphen = discretionary hyphen,
+ U+00AD ISOnum -->
+<!ENTITY reg "®"> <!-- registered sign = registered trade mark sign,
+ U+00AE ISOnum -->
+<!ENTITY macr "¯"> <!-- macron = spacing macron = overline
+ = APL overbar, U+00AF ISOdia -->
+<!ENTITY deg "°"> <!-- degree sign, U+00B0 ISOnum -->
+<!ENTITY plusmn "±"> <!-- plus-minus sign = plus-or-minus sign,
+ U+00B1 ISOnum -->
+<!ENTITY sup2 "²"> <!-- superscript two = superscript digit two
+ = squared, U+00B2 ISOnum -->
+<!ENTITY sup3 "³"> <!-- superscript three = superscript digit three
+ = cubed, U+00B3 ISOnum -->
+<!ENTITY acute "´"> <!-- acute accent = spacing acute,
+ U+00B4 ISOdia -->
+<!ENTITY micro "µ"> <!-- micro sign, U+00B5 ISOnum -->
+<!ENTITY para "¶"> <!-- pilcrow sign = paragraph sign,
+ U+00B6 ISOnum -->
+<!ENTITY middot "·"> <!-- middle dot = Georgian comma
+ = Greek middle dot, U+00B7 ISOnum -->
+<!ENTITY cedil "¸"> <!-- cedilla = spacing cedilla, U+00B8 ISOdia -->
+<!ENTITY sup1 "¹"> <!-- superscript one = superscript digit one,
+ U+00B9 ISOnum -->
+<!ENTITY ordm "º"> <!-- masculine ordinal indicator,
+ U+00BA ISOnum -->
+<!ENTITY raquo "»"> <!-- right-pointing double angle quotation mark
+ = right pointing guillemet, U+00BB ISOnum -->
+<!ENTITY frac14 "¼"> <!-- vulgar fraction one quarter
+ = fraction one quarter, U+00BC ISOnum -->
+<!ENTITY frac12 "½"> <!-- vulgar fraction one half
+ = fraction one half, U+00BD ISOnum -->
+<!ENTITY frac34 "¾"> <!-- vulgar fraction three quarters
+ = fraction three quarters, U+00BE ISOnum -->
+<!ENTITY iquest "¿"> <!-- inverted question mark
+ = turned question mark, U+00BF ISOnum -->
+<!ENTITY Agrave "À"> <!-- latin capital letter A with grave
+ = latin capital letter A grave,
+ U+00C0 ISOlat1 -->
+<!ENTITY Aacute "Á"> <!-- latin capital letter A with acute,
+ U+00C1 ISOlat1 -->
+<!ENTITY Acirc "Â"> <!-- latin capital letter A with circumflex,
+ U+00C2 ISOlat1 -->
+<!ENTITY Atilde "Ã"> <!-- latin capital letter A with tilde,
+ U+00C3 ISOlat1 -->
+<!ENTITY Auml "Ä"> <!-- latin capital letter A with diaeresis,
+ U+00C4 ISOlat1 -->
+<!ENTITY Aring "Å"> <!-- latin capital letter A with ring above
+ = latin capital letter A ring,
+ U+00C5 ISOlat1 -->
+<!ENTITY AElig "Æ"> <!-- latin capital letter AE
+ = latin capital ligature AE,
+ U+00C6 ISOlat1 -->
+<!ENTITY Ccedil "Ç"> <!-- latin capital letter C with cedilla,
+ U+00C7 ISOlat1 -->
+<!ENTITY Egrave "È"> <!-- latin capital letter E with grave,
+ U+00C8 ISOlat1 -->
+<!ENTITY Eacute "É"> <!-- latin capital letter E with acute,
+ U+00C9 ISOlat1 -->
+<!ENTITY Ecirc "Ê"> <!-- latin capital letter E with circumflex,
+ U+00CA ISOlat1 -->
+<!ENTITY Euml "Ë"> <!-- latin capital letter E with diaeresis,
+ U+00CB ISOlat1 -->
+<!ENTITY Igrave "Ì"> <!-- latin capital letter I with grave,
+ U+00CC ISOlat1 -->
+<!ENTITY Iacute "Í"> <!-- latin capital letter I with acute,
+ U+00CD ISOlat1 -->
+<!ENTITY Icirc "Î"> <!-- latin capital letter I with circumflex,
+ U+00CE ISOlat1 -->
+<!ENTITY Iuml "Ï"> <!-- latin capital letter I with diaeresis,
+ U+00CF ISOlat1 -->
+<!ENTITY ETH "Ð"> <!-- latin capital letter ETH, U+00D0 ISOlat1 -->
+<!ENTITY Ntilde "Ñ"> <!-- latin capital letter N with tilde,
+ U+00D1 ISOlat1 -->
+<!ENTITY Ograve "Ò"> <!-- latin capital letter O with grave,
+ U+00D2 ISOlat1 -->
+<!ENTITY Oacute "Ó"> <!-- latin capital letter O with acute,
+ U+00D3 ISOlat1 -->
+<!ENTITY Ocirc "Ô"> <!-- latin capital letter O with circumflex,
+ U+00D4 ISOlat1 -->
+<!ENTITY Otilde "Õ"> <!-- latin capital letter O with tilde,
+ U+00D5 ISOlat1 -->
+<!ENTITY Ouml "Ö"> <!-- latin capital letter O with diaeresis,
+ U+00D6 ISOlat1 -->
+<!ENTITY times "×"> <!-- multiplication sign, U+00D7 ISOnum -->
+<!ENTITY Oslash "Ø"> <!-- latin capital letter O with stroke
+ = latin capital letter O slash,
+ U+00D8 ISOlat1 -->
+<!ENTITY Ugrave "Ù"> <!-- latin capital letter U with grave,
+ U+00D9 ISOlat1 -->
+<!ENTITY Uacute "Ú"> <!-- latin capital letter U with acute,
+ U+00DA ISOlat1 -->
+<!ENTITY Ucirc "Û"> <!-- latin capital letter U with circumflex,
+ U+00DB ISOlat1 -->
+<!ENTITY Uuml "Ü"> <!-- latin capital letter U with diaeresis,
+ U+00DC ISOlat1 -->
+<!ENTITY Yacute "Ý"> <!-- latin capital letter Y with acute,
+ U+00DD ISOlat1 -->
+<!ENTITY THORN "Þ"> <!-- latin capital letter THORN,
+ U+00DE ISOlat1 -->
+<!ENTITY szlig "ß"> <!-- latin small letter sharp s = ess-zed,
+ U+00DF ISOlat1 -->
+<!ENTITY agrave "à"> <!-- latin small letter a with grave
+ = latin small letter a grave,
+ U+00E0 ISOlat1 -->
+<!ENTITY aacute "á"> <!-- latin small letter a with acute,
+ U+00E1 ISOlat1 -->
+<!ENTITY acirc "â"> <!-- latin small letter a with circumflex,
+ U+00E2 ISOlat1 -->
+<!ENTITY atilde "ã"> <!-- latin small letter a with tilde,
+ U+00E3 ISOlat1 -->
+<!ENTITY auml "ä"> <!-- latin small letter a with diaeresis,
+ U+00E4 ISOlat1 -->
+<!ENTITY aring "å"> <!-- latin small letter a with ring above
+ = latin small letter a ring,
+ U+00E5 ISOlat1 -->
+<!ENTITY aelig "æ"> <!-- latin small letter ae
+ = latin small ligature ae, U+00E6 ISOlat1 -->
+<!ENTITY ccedil "ç"> <!-- latin small letter c with cedilla,
+ U+00E7 ISOlat1 -->
+<!ENTITY egrave "è"> <!-- latin small letter e with grave,
+ U+00E8 ISOlat1 -->
+<!ENTITY eacute "é"> <!-- latin small letter e with acute,
+ U+00E9 ISOlat1 -->
+<!ENTITY ecirc "ê"> <!-- latin small letter e with circumflex,
+ U+00EA ISOlat1 -->
+<!ENTITY euml "ë"> <!-- latin small letter e with diaeresis,
+ U+00EB ISOlat1 -->
+<!ENTITY igrave "ì"> <!-- latin small letter i with grave,
+ U+00EC ISOlat1 -->
+<!ENTITY iacute "í"> <!-- latin small letter i with acute,
+ U+00ED ISOlat1 -->
+<!ENTITY icirc "î"> <!-- latin small letter i with circumflex,
+ U+00EE ISOlat1 -->
+<!ENTITY iuml "ï"> <!-- latin small letter i with diaeresis,
+ U+00EF ISOlat1 -->
+<!ENTITY eth "ð"> <!-- latin small letter eth, U+00F0 ISOlat1 -->
+<!ENTITY ntilde "ñ"> <!-- latin small letter n with tilde,
+ U+00F1 ISOlat1 -->
+<!ENTITY ograve "ò"> <!-- latin small letter o with grave,
+ U+00F2 ISOlat1 -->
+<!ENTITY oacute "ó"> <!-- latin small letter o with acute,
+ U+00F3 ISOlat1 -->
+<!ENTITY ocirc "ô"> <!-- latin small letter o with circumflex,
+ U+00F4 ISOlat1 -->
+<!ENTITY otilde "õ"> <!-- latin small letter o with tilde,
+ U+00F5 ISOlat1 -->
+<!ENTITY ouml "ö"> <!-- latin small letter o with diaeresis,
+ U+00F6 ISOlat1 -->
+<!ENTITY divide "÷"> <!-- division sign, U+00F7 ISOnum -->
+<!ENTITY oslash "ø"> <!-- latin small letter o with stroke,
+ = latin small letter o slash,
+ U+00F8 ISOlat1 -->
+<!ENTITY ugrave "ù"> <!-- latin small letter u with grave,
+ U+00F9 ISOlat1 -->
+<!ENTITY uacute "ú"> <!-- latin small letter u with acute,
+ U+00FA ISOlat1 -->
+<!ENTITY ucirc "û"> <!-- latin small letter u with circumflex,
+ U+00FB ISOlat1 -->
+<!ENTITY uuml "ü"> <!-- latin small letter u with diaeresis,
+ U+00FC ISOlat1 -->
+<!ENTITY yacute "ý"> <!-- latin small letter y with acute,
+ U+00FD ISOlat1 -->
+<!ENTITY thorn "þ"> <!-- latin small letter thorn,
+ U+00FE ISOlat1 -->
+<!ENTITY yuml "ÿ"> <!-- latin small letter y with diaeresis,
+ U+00FF ISOlat1 -->
+
+<!--================== Imported Names ====================================-->
+
+<!ENTITY % ContentType "CDATA">
+ <!-- media type, as per [RFC2045] -->
+
+<!ENTITY % ContentTypes "CDATA">
+ <!-- comma-separated list of media types, as per [RFC2045] -->
+
+<!ENTITY % Charset "CDATA">
+ <!-- a character encoding, as per [RFC2045] -->
+
+<!ENTITY % Charsets "CDATA">
+ <!-- a space separated list of character encodings, as per [RFC2045] -->
+
+<!ENTITY % LanguageCode "NMTOKEN">
+ <!-- a language code, as per [RFC3066] -->
+
+<!ENTITY % Character "CDATA">
+ <!-- a single character, as per section 2.2 of [XML] -->
+
+<!ENTITY % Number "CDATA">
+ <!-- one or more digits -->
+
+<!ENTITY % LinkTypes "CDATA">
+ <!-- space-separated list of link types -->
+
+<!ENTITY % MediaDesc "CDATA">
+ <!-- single or comma-separated list of media descriptors -->
+
+<!ENTITY % URI "CDATA">
+ <!-- a Uniform Resource Identifier, see [RFC2396] -->
+
+<!ENTITY % UriList "CDATA">
+ <!-- a space separated list of Uniform Resource Identifiers -->
+
+<!ENTITY % Datetime "CDATA">
+ <!-- date and time information. ISO date format -->
+
+<!ENTITY % Script "CDATA">
+ <!-- script expression -->
+
+<!ENTITY % StyleSheet "CDATA">
+ <!-- style sheet data -->
+
+<!ENTITY % Text "CDATA">
+ <!-- used for titles etc. -->
+
+<!ENTITY % FrameTarget "NMTOKEN">
+ <!-- render in this frame -->
+
+<!ENTITY % Length "CDATA">
+ <!-- nn for pixels or nn% for percentage length -->
+
+<!ENTITY % MultiLength "CDATA">
+ <!-- pixel, percentage, or relative -->
+
+<!ENTITY % Pixels "CDATA">
+ <!-- integer representing length in pixels -->
+
+<!-- these are used for image maps -->
+
+<!ENTITY % Shape "(rect|circle|poly|default)">
+
+<!ENTITY % Coords "CDATA">
+ <!-- comma separated list of lengths -->
+
+<!-- used for object, applet, img, input and iframe -->
+<!ENTITY % ImgAlign "(top|middle|bottom|left|right)">
+
+<!-- a color using sRGB: #RRGGBB as Hex values -->
+<!ENTITY % Color "CDATA">
+
+<!-- There are also 16 widely known color names with their sRGB values:
+
+ Black = #000000 Green = #008000
+ Silver = #C0C0C0 Lime = #00FF00
+ Gray = #808080 Olive = #808000
+ White = #FFFFFF Yellow = #FFFF00
+ Maroon = #800000 Navy = #000080
+ Red = #FF0000 Blue = #0000FF
+ Purple = #800080 Teal = #008080
+ Fuchsia= #FF00FF Aqua = #00FFFF
+-->
+
+<!--=================== Generic Attributes ===============================-->
+
+<!-- core attributes common to most elements
+ id document-wide unique id
+ class space separated list of classes
+ style associated style info
+ title advisory title/amplification
+-->
+<!ENTITY % coreattrs
+ "id ID #IMPLIED
+ class CDATA #IMPLIED
+ style %StyleSheet; #IMPLIED
+ title %Text; #IMPLIED"
+ >
+
+<!-- internationalization attributes
+ lang language code (backwards compatible)
+ xml:lang language code (as per XML 1.0 spec)
+ dir direction for weak/neutral text
+-->
+<!ENTITY % i18n
+ "lang %LanguageCode; #IMPLIED
+ xml:lang %LanguageCode; #IMPLIED
+ dir (ltr|rtl) #IMPLIED"
+ >
+
+<!-- attributes for common UI events
+ onclick a pointer button was clicked
+ ondblclick a pointer button was double clicked
+ onmousedown a pointer button was pressed down
+ onmouseup a pointer button was released
+ onmousemove a pointer was moved onto the element
+ onmouseout a pointer was moved away from the element
+ onkeypress a key was pressed and released
+ onkeydown a key was pressed down
+ onkeyup a key was released
+-->
+<!ENTITY % events
+ "onclick %Script; #IMPLIED
+ ondblclick %Script; #IMPLIED
+ onmousedown %Script; #IMPLIED
+ onmouseup %Script; #IMPLIED
+ onmouseover %Script; #IMPLIED
+ onmousemove %Script; #IMPLIED
+ onmouseout %Script; #IMPLIED
+ onkeypress %Script; #IMPLIED
+ onkeydown %Script; #IMPLIED
+ onkeyup %Script; #IMPLIED"
+ >
+
+<!-- attributes for elements that can get the focus
+ accesskey accessibility key character
+ tabindex position in tabbing order
+ onfocus the element got the focus
+ onblur the element lost the focus
+-->
+<!ENTITY % focus
+ "accesskey %Character; #IMPLIED
+ tabindex %Number; #IMPLIED
+ onfocus %Script; #IMPLIED
+ onblur %Script; #IMPLIED"
+ >
+
+<!ENTITY % attrs "%coreattrs; %i18n; %events;">
+
+<!-- text alignment for p, div, h1-h6. The default is
+ align="left" for ltr headings, "right" for rtl -->
+
+<!ENTITY % TextAlign "align (left|center|right|justify) #IMPLIED">
+
+<!--=================== Text Elements ====================================-->
+
+<!ENTITY % editstuff
+ "edit:example | edit:schema | edit:thisversion | edit:date |
+ edit:previousversion | edit:latestversion | edit:toc | edit:copyright">
+
+<!ENTITY % special.extra
+ "object | applet | img | map | iframe">
+
+<!ENTITY % special.basic
+ "br | span | bdo">
+
+<!ENTITY % special
+ "%special.basic; | %special.extra;">
+
+<!ENTITY % fontstyle.extra "big | small | font | basefont">
+
+<!ENTITY % fontstyle.basic "tt | i | b | u
+ | s | strike ">
+
+<!ENTITY % fontstyle "%fontstyle.basic; | %fontstyle.extra;">
+
+<!ENTITY % phrase.extra "sub | sup">
+<!ENTITY % phrase.basic "em | strong | dfn | code | q |
+ samp | kbd | var | cite | abbr | acronym">
+
+<!ENTITY % phrase "%phrase.basic; | %phrase.extra;">
+
+<!ENTITY % inline.forms "input | select | textarea | label | button">
+
+<!-- these can occur at block or inline level -->
+<!ENTITY % misc.inline "ins | del | script">
+
+<!-- these can only occur at block level -->
+<!ENTITY % misc "noscript | %misc.inline;">
+
+<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">
+
+<!-- %Inline; covers inline or "text-level" elements -->
+<!ENTITY % Inline "(#PCDATA | %inline; | %misc.inline;| %editstuff;)*">
+
+<!--================== Block level elements ==============================-->
+
+<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
+<!ENTITY % lists "ul | ol | dl | menu | dir">
+<!ENTITY % blocktext "pre | hr | blockquote | address | center | noframes | %editstuff;">
+
+<!ENTITY % block
+ "p | %heading; | div | %lists; | %blocktext; | isindex |fieldset | table">
+
+<!-- %Flow; mixes block and inline and is used for list items etc. -->
+<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc; )*">
+
+<!--================== Content models for exclusions =====================-->
+
+<!-- a elements use %Inline; excluding a -->
+
+<!ENTITY % a.content
+ "(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc.inline;)*">
+
+<!-- pre uses %Inline excluding img, object, applet, big, small,
+ font, or basefont -->
+
+<!ENTITY % pre.content
+ "(#PCDATA | a | %special.basic; | %fontstyle.basic; | %phrase.basic; |
+ %inline.forms; | %misc.inline;)*">
+
+<!-- form uses %Flow; excluding form -->
+
+<!ENTITY % form.content "(#PCDATA | %block; | %inline; | %misc;)*">
+
+<!-- button uses %Flow; but excludes a, form, form controls, iframe -->
+
+<!ENTITY % button.content
+ "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
+ table | br | span | bdo | object | applet | img | map |
+ %fontstyle; | %phrase; | %misc;)*">
+
+<!--================ Document Structure ==================================-->
+
+<!-- the namespace URI designates the document profile -->
+
+<!ELEMENT html (head, body)>
+<!ATTLIST html
+ %i18n;
+ id ID #IMPLIED
+ xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml'
+ xmlns:edit %URI; #FIXED 'http://xmlns.grorg.org/SVGT12NG/'
+ >
+
+<!--================ Document Head =======================================-->
+
+<!ENTITY % head.misc "(script|style|meta|link|object|isindex)*">
+
+<!-- content model is %head.misc; combined with a single
+ title and an optional base element in any order -->
+
+<!ELEMENT head (%head.misc;,
+ ((title, %head.misc;, (base, %head.misc;)?) |
+ (base, %head.misc;, (title, %head.misc;))))>
+
+<!ATTLIST head
+ %i18n;
+ id ID #IMPLIED
+ profile %URI; #IMPLIED
+ >
+
+<!-- The title element is not considered part of the flow of text.
+ It should be displayed, for example as the page header or
+ window title. Exactly one title is required per document.
+ -->
+<!ELEMENT title (#PCDATA)>
+<!ATTLIST title
+ %i18n;
+ id ID #IMPLIED
+ >
+
+<!-- document base URI -->
+
+<!ELEMENT base EMPTY>
+<!ATTLIST base
+ id ID #IMPLIED
+ href %URI; #IMPLIED
+ target %FrameTarget; #IMPLIED
+ >
+
+<!-- generic metainformation -->
+<!ELEMENT meta EMPTY>
+<!ATTLIST meta
+ %i18n;
+ id ID #IMPLIED
+ http-equiv CDATA #IMPLIED
+ name CDATA #IMPLIED
+ content CDATA #REQUIRED
+ scheme CDATA #IMPLIED
+ >
+
+<!--
+ Relationship values can be used in principle:
+
+ a) for document specific toolbars/menus when used
+ with the link element in document head e.g.
+ start, contents, previous, next, index, end, help
+ b) to link to a separate style sheet (rel="stylesheet")
+ c) to make a link to a script (rel="script")
+ d) by stylesheets to control how collections of
+ html nodes are rendered into printed documents
+ e) to make a link to a printable version of this document
+ e.g. a PostScript or PDF version (rel="alternate" media="print")
+-->
+
+<!ELEMENT link EMPTY>
+<!ATTLIST link
+ %attrs;
+ charset %Charset; #IMPLIED
+ href %URI; #IMPLIED
+ hreflang %LanguageCode; #IMPLIED
+ type %ContentType; #IMPLIED
+ rel %LinkTypes; #IMPLIED
+ rev %LinkTypes; #IMPLIED
+ media %MediaDesc; #IMPLIED
+ target %FrameTarget; #IMPLIED
+ >
+
+<!-- style info, which may include CDATA sections -->
+<!ELEMENT style (#PCDATA)>
+<!ATTLIST style
+ %i18n;
+ id ID #IMPLIED
+ type %ContentType; #REQUIRED
+ media %MediaDesc; #IMPLIED
+ title %Text; #IMPLIED
+ xml:space (preserve) #FIXED 'preserve'
+ >
+
+<!-- script statements, which may include CDATA sections -->
+<!ELEMENT script (#PCDATA)>
+<!ATTLIST script
+ id ID #IMPLIED
+ charset %Charset; #IMPLIED
+ type %ContentType; #REQUIRED
+ language CDATA #IMPLIED
+ src %URI; #IMPLIED
+ defer (defer) #IMPLIED
+ xml:space (preserve) #FIXED 'preserve'
+ >
+
+<!-- alternate content container for non script-based rendering -->
+
+<!ELEMENT noscript %Flow;>
+<!ATTLIST noscript
+ %attrs;
+ >
+
+<!--======================= Frames =======================================-->
+
+<!-- inline subwindow -->
+
+<!ELEMENT iframe %Flow;>
+<!ATTLIST iframe
+ %coreattrs;
+ longdesc %URI; #IMPLIED
+ name NMTOKEN #IMPLIED
+ src %URI; #IMPLIED
+ frameborder (1|0) "1"
+ marginwidth %Pixels; #IMPLIED
+ marginheight %Pixels; #IMPLIED
+ scrolling (yes|no|auto) "auto"
+ align %ImgAlign; #IMPLIED
+ height %Length; #IMPLIED
+ width %Length; #IMPLIED
+ >
+
+<!-- alternate content container for non frame-based rendering -->
+
+<!ELEMENT noframes %Flow;>
+<!ATTLIST noframes
+ %attrs;
+ >
+
+<!--=================== Document Body ====================================-->
+
+<!ELEMENT body %Flow;>
+<!ATTLIST body
+ %attrs;
+ onload %Script; #IMPLIED
+ onunload %Script; #IMPLIED
+ background %URI; #IMPLIED
+ bgcolor %Color; #IMPLIED
+ text %Color; #IMPLIED
+ link %Color; #IMPLIED
+ vlink %Color; #IMPLIED
+ alink %Color; #IMPLIED
+ >
+
+<!ELEMENT div %Flow;> <!-- generic language/style container -->
+<!ATTLIST div
+ %attrs;
+ %TextAlign;
+ >
+
+ <!--================Special edit inclusions =========================-->
+
+ <!ELEMENT edit:example %Flow;>
+ <!ATTLIST edit:example
+ href CDATA #IMPLIED
+ link CDATA #IMPLIED
+ image CDATA #IMPLIED
+ >
+
+ <!ELEMENT edit:schema %Flow;>
+ <!ATTLIST edit:schema
+ element CDATA #IMPLIED
+ >
+
+ <!ELEMENT edit:date EMPTY>
+ <!ELEMENT edit:thisversion EMPTY>
+ <!ELEMENT edit:previousversion EMPTY>
+ <!ELEMENT edit:latestversion EMPTY>
+ <!ELEMENT edit:toc EMPTY>
+ <!ELEMENT edit:copyright EMPTY>
+
+<!--=================== Paragraphs =======================================-->
+
+<!ELEMENT p %Inline;>
+<!ATTLIST p
+ %attrs;
+ %TextAlign;
+ >
+
+<!--=================== Headings =========================================-->
+
+<!--
+ There are six levels of headings from h1 (the most important)
+ to h6 (the least important).
+-->
+
+<!ELEMENT h1 %Inline;>
+<!ATTLIST h1
+ %attrs;
+ %TextAlign;
+ >
+
+<!ELEMENT h2 %Inline;>
+<!ATTLIST h2
+ %attrs;
+ %TextAlign;
+ >
+
+<!ELEMENT h3 %Inline;>
+<!ATTLIST h3
+ %attrs;
+ %TextAlign;
+ >
+
+<!ELEMENT h4 %Inline;>
+<!ATTLIST h4
+ %attrs;
+ %TextAlign;
+ >
+
+<!ELEMENT h5 %Inline;>
+<!ATTLIST h5
+ %attrs;
+ %TextAlign;
+ >
+
+<!ELEMENT h6 %Inline;>
+<!ATTLIST h6
+ %attrs;
+ %TextAlign;
+ >
+
+<!--=================== Lists ============================================-->
+
+<!-- Unordered list bullet styles -->
+
+<!ENTITY % ULStyle "(disc|square|circle)">
+
+<!-- Unordered list -->
+
+<!ELEMENT ul (li)+>
+<!ATTLIST ul
+ %attrs;
+ type %ULStyle; #IMPLIED
+ compact (compact) #IMPLIED
+ >
+
+<!-- Ordered list numbering style
+
+ 1 arabic numbers 1, 2, 3, ...
+ a lower alpha a, b, c, ...
+ A upper alpha A, B, C, ...
+ i lower roman i, ii, iii, ...
+ I upper roman I, II, III, ...
+
+ The style is applied to the sequence number which by default
+ is reset to 1 for the first list item in an ordered list.
+-->
+<!ENTITY % OLStyle "CDATA">
+
+<!-- Ordered (numbered) list -->
+
+<!ELEMENT ol (li)+>
+<!ATTLIST ol
+ %attrs;
+ type %OLStyle; #IMPLIED
+ compact (compact) #IMPLIED
+ start %Number; #IMPLIED
+ >
+
+<!-- single column list (DEPRECATED) -->
+<!ELEMENT menu (li)+>
+<!ATTLIST menu
+ %attrs;
+ compact (compact) #IMPLIED
+ >
+
+<!-- multiple column list (DEPRECATED) -->
+<!ELEMENT dir (li)+>
+<!ATTLIST dir
+ %attrs;
+ compact (compact) #IMPLIED
+ >
+
+<!-- LIStyle is constrained to: "(%ULStyle;|%OLStyle;)" -->
+<!ENTITY % LIStyle "CDATA">
+
+<!-- list item -->
+
+<!ELEMENT li %Flow;>
+<!ATTLIST li
+ %attrs;
+ type %LIStyle; #IMPLIED
+ value %Number; #IMPLIED
+ >
+
+<!-- definition lists - dt for term, dd for its definition -->
+
+<!ELEMENT dl (dt|dd)+>
+<!ATTLIST dl
+ %attrs;
+ compact (compact) #IMPLIED
+ >
+
+<!ELEMENT dt %Inline;>
+<!ATTLIST dt
+ %attrs;
+ >
+
+<!ELEMENT dd %Flow;>
+<!ATTLIST dd
+ %attrs;
+ >
+
+<!--=================== Address ==========================================-->
+
+<!-- information on author -->
+
+<!ELEMENT address (#PCDATA | %inline; | %misc.inline; | p)*>
+<!ATTLIST address
+ %attrs;
+ >
+
+<!--=================== Horizontal Rule ==================================-->
+
+<!ELEMENT hr EMPTY>
+<!ATTLIST hr
+ %attrs;
+ align (left|center|right) #IMPLIED
+ noshade (noshade) #IMPLIED
+ size %Pixels; #IMPLIED
+ width %Length; #IMPLIED
+ >
+
+<!--=================== Preformatted Text ================================-->
+
+<!-- content is %Inline; excluding
+ "img|object|applet|big|small|sub|sup|font|basefont" -->
+
+<!ELEMENT pre %pre.content;>
+<!ATTLIST pre
+ %attrs;
+ width %Number; #IMPLIED
+ xml:space (preserve) #FIXED 'preserve'
+ >
+
+<!--=================== Block-like Quotes ================================-->
+
+<!ELEMENT blockquote %Flow;>
+<!ATTLIST blockquote
+ %attrs;
+ cite %URI; #IMPLIED
+ >
+
+<!--=================== Text alignment ===================================-->
+
+<!-- center content -->
+<!ELEMENT center %Flow;>
+<!ATTLIST center
+ %attrs;
+ >
+
+<!--=================== Inserted/Deleted Text ============================-->
+
+<!--
+ ins/del are allowed in block and inline content, but its
+ inappropriate to include block content within an ins element
+ occurring in inline content.
+-->
+<!ELEMENT ins %Flow;>
+<!ATTLIST ins
+ %attrs;
+ cite %URI; #IMPLIED
+ datetime %Datetime; #IMPLIED
+ >
+
+<!ELEMENT del %Flow;>
+<!ATTLIST del
+ %attrs;
+ cite %URI; #IMPLIED
+ datetime %Datetime; #IMPLIED
+ >
+
+<!--================== The Anchor Element ================================-->
+
+<!-- content is %Inline; except that anchors shouldn't be nested -->
+
+<!ELEMENT a %a.content;>
+<!ATTLIST a
+ %attrs;
+ %focus;
+ charset %Charset; #IMPLIED
+ type %ContentType; #IMPLIED
+ name NMTOKEN #IMPLIED
+ href %URI; #IMPLIED
+ hreflang %LanguageCode; #IMPLIED
+ rel %LinkTypes; #IMPLIED
+ rev %LinkTypes; #IMPLIED
+ shape %Shape; "rect"
+ coords %Coords; #IMPLIED
+ target %FrameTarget; #IMPLIED
+ >
+
+<!--===================== Inline Elements ================================-->
+
+<!ELEMENT span %Inline;> <!-- generic language/style container -->
+<!ATTLIST span
+ %attrs;
+ >
+
+<!ELEMENT bdo %Inline;> <!-- I18N BiDi over-ride -->
+<!ATTLIST bdo
+ %coreattrs;
+ %events;
+ lang %LanguageCode; #IMPLIED
+ xml:lang %LanguageCode; #IMPLIED
+ dir (ltr|rtl) #REQUIRED
+ >
+
+<!ELEMENT br EMPTY> <!-- forced line break -->
+<!ATTLIST br
+ %coreattrs;
+ clear (left|all|right|none) "none"
+ >
+
+<!ELEMENT em %Inline;> <!-- emphasis -->
+<!ATTLIST em %attrs;>
+
+<!ELEMENT strong %Inline;> <!-- strong emphasis -->
+<!ATTLIST strong %attrs;>
+
+<!ELEMENT dfn %Inline;> <!-- definitional -->
+<!ATTLIST dfn %attrs;>
+
+<!ELEMENT code %Inline;> <!-- program code -->
+<!ATTLIST code %attrs;>
+
+<!ELEMENT samp %Inline;> <!-- sample -->
+<!ATTLIST samp %attrs;>
+
+<!ELEMENT kbd %Inline;> <!-- something user would type -->
+<!ATTLIST kbd %attrs;>
+
+<!ELEMENT var %Inline;> <!-- variable -->
+<!ATTLIST var %attrs;>
+
+<!ELEMENT cite %Inline;> <!-- citation -->
+<!ATTLIST cite %attrs;>
+
+<!ELEMENT abbr %Inline;> <!-- abbreviation -->
+<!ATTLIST abbr %attrs;>
+
+<!ELEMENT acronym %Inline;> <!-- acronym -->
+<!ATTLIST acronym %attrs;>
+
+<!ELEMENT q %Inline;> <!-- inlined quote -->
+<!ATTLIST q
+ %attrs;
+ cite %URI; #IMPLIED
+ >
+
+<!ELEMENT sub %Inline;> <!-- subscript -->
+<!ATTLIST sub %attrs;>
+
+<!ELEMENT sup %Inline;> <!-- superscript -->
+<!ATTLIST sup %attrs;>
+
+<!ELEMENT tt %Inline;> <!-- fixed pitch font -->
+<!ATTLIST tt %attrs;>
+
+<!ELEMENT i %Inline;> <!-- italic font -->
+<!ATTLIST i %attrs;>
+
+<!ELEMENT b %Inline;> <!-- bold font -->
+<!ATTLIST b %attrs;>
+
+<!ELEMENT big %Inline;> <!-- bigger font -->
+<!ATTLIST big %attrs;>
+
+<!ELEMENT small %Inline;> <!-- smaller font -->
+<!ATTLIST small %attrs;>
+
+<!ELEMENT u %Inline;> <!-- underline -->
+<!ATTLIST u %attrs;>
+
+<!ELEMENT s %Inline;> <!-- strike-through -->
+<!ATTLIST s %attrs;>
+
+<!ELEMENT strike %Inline;> <!-- strike-through -->
+<!ATTLIST strike %attrs;>
+
+<!ELEMENT basefont EMPTY> <!-- base font size -->
+<!ATTLIST basefont
+ id ID #IMPLIED
+ size CDATA #REQUIRED
+ color %Color; #IMPLIED
+ face CDATA #IMPLIED
+ >
+
+<!ELEMENT font %Inline;> <!-- local change to font -->
+<!ATTLIST font
+ %coreattrs;
+ %i18n;
+ size CDATA #IMPLIED
+ color %Color; #IMPLIED
+ face CDATA #IMPLIED
+ >
+
+<!--==================== Object ======================================-->
+<!--
+ object is used to embed objects as part of HTML pages.
+ param elements should precede other content. Parameters
+ can also be expressed as attribute/value pairs on the
+ object element itself when brevity is desired.
+-->
+
+<!ELEMENT object (#PCDATA | param | %block; | form | %inline; | %misc;)*>
+<!ATTLIST object
+ %attrs;
+ declare (declare) #IMPLIED
+ classid %URI; #IMPLIED
+ codebase %URI; #IMPLIED
+ data %URI; #IMPLIED
+ type %ContentType; #IMPLIED
+ codetype %ContentType; #IMPLIED
+ archive %UriList; #IMPLIED
+ standby %Text; #IMPLIED
+ height %Length; #IMPLIED
+ width %Length; #IMPLIED
+ usemap %URI; #IMPLIED
+ name NMTOKEN #IMPLIED
+ tabindex %Number; #IMPLIED
+ align %ImgAlign; #IMPLIED
+ border %Pixels; #IMPLIED
+ hspace %Pixels; #IMPLIED
+ vspace %Pixels; #IMPLIED
+ >
+
+<!--
+ param is used to supply a named property value.
+ In XML it would seem natural to follow RDF and support an
+ abbreviated syntax where the param elements are replaced
+ by attribute value pairs on the object start tag.
+-->
+<!ELEMENT param EMPTY>
+<!ATTLIST param
+ id ID #IMPLIED
+ name CDATA #REQUIRED
+ value CDATA #IMPLIED
+ valuetype (data|ref|object) "data"
+ type %ContentType; #IMPLIED
+ >
+
+<!--=================== Java applet ==================================-->
+<!--
+ One of code or object attributes must be present.
+ Place param elements before other content.
+-->
+<!ELEMENT applet (#PCDATA | param | %block; | form | %inline; | %misc;)*>
+<!ATTLIST applet
+ %coreattrs;
+ codebase %URI; #IMPLIED
+ archive CDATA #IMPLIED
+ code CDATA #IMPLIED
+ object CDATA #IMPLIED
+ alt %Text; #IMPLIED
+ name NMTOKEN #IMPLIED
+ width %Length; #REQUIRED
+ height %Length; #REQUIRED
+ align %ImgAlign; #IMPLIED
+ hspace %Pixels; #IMPLIED
+ vspace %Pixels; #IMPLIED
+ >
+
+<!--=================== Images ===========================================-->
+
+<!--
+ To avoid accessibility problems for people who aren't
+ able to see the image, you should provide a text
+ description using the alt and longdesc attributes.
+ In addition, avoid the use of server-side image maps.
+-->
+
+<!ELEMENT img EMPTY>
+<!ATTLIST img
+ %attrs;
+ src %URI; #REQUIRED
+ alt %Text; #REQUIRED
+ name NMTOKEN #IMPLIED
+ longdesc %URI; #IMPLIED
+ height %Length; #IMPLIED
+ width %Length; #IMPLIED
+ usemap %URI; #IMPLIED
+ ismap (ismap) #IMPLIED
+ align %ImgAlign; #IMPLIED
+ border %Length; #IMPLIED
+ hspace %Pixels; #IMPLIED
+ vspace %Pixels; #IMPLIED
+ >
+
+<!-- usemap points to a map element which may be in this document
+ or an external document, although the latter is not widely supported -->
+
+<!--================== Client-side image maps ============================-->
+
+<!-- These can be placed in the same document or grouped in a
+ separate document although this isn't yet widely supported -->
+
+<!ELEMENT map ((%block; | form | %misc;)+ | area+)>
+<!ATTLIST map
+ %i18n;
+ %events;
+ id ID #REQUIRED
+ class CDATA #IMPLIED
+ style %StyleSheet; #IMPLIED
+ title %Text; #IMPLIED
+ name CDATA #IMPLIED
+ >
+
+<!ELEMENT area EMPTY>
+<!ATTLIST area
+ %attrs;
+ %focus;
+ shape %Shape; "rect"
+ coords %Coords; #IMPLIED
+ href %URI; #IMPLIED
+ nohref (nohref) #IMPLIED
+ alt %Text; #REQUIRED
+ target %FrameTarget; #IMPLIED
+ >
+
+<!--================ Forms ===============================================-->
+
+<!ELEMENT form %form.content;> <!-- forms shouldn't be nested -->
+
+<!ATTLIST form
+ %attrs;
+ action %URI; #REQUIRED
+ method (get|post) "get"
+ name NMTOKEN #IMPLIED
+ enctype %ContentType; "application/x-www-form-urlencoded"
+ onsubmit %Script; #IMPLIED
+ onreset %Script; #IMPLIED
+ accept %ContentTypes; #IMPLIED
+ accept-charset %Charsets; #IMPLIED
+ target %FrameTarget; #IMPLIED
+ >
+
+<!--
+ Each label must not contain more than ONE field
+ Label elements shouldn't be nested.
+-->
+<!ELEMENT label %Inline;>
+<!ATTLIST label
+ %attrs;
+ for IDREF #IMPLIED
+ accesskey %Character; #IMPLIED
+ onfocus %Script; #IMPLIED
+ onblur %Script; #IMPLIED
+ >
+
+<!ENTITY % InputType
+ "(text | password | checkbox |
+ radio | submit | reset |
+ file | hidden | image | button)"
+ >
+
+<!-- the name attribute is required for all but submit & reset -->
+
+<!ELEMENT input EMPTY> <!-- form control -->
+<!ATTLIST input
+ %attrs;
+ %focus;
+ type %InputType; "text"
+ name CDATA #IMPLIED
+ value CDATA #IMPLIED
+ checked (checked) #IMPLIED
+ disabled (disabled) #IMPLIED
+ readonly (readonly) #IMPLIED
+ size CDATA #IMPLIED
+ maxlength %Number; #IMPLIED
+ src %URI; #IMPLIED
+ alt CDATA #IMPLIED
+ usemap %URI; #IMPLIED
+ onselect %Script; #IMPLIED
+ onchange %Script; #IMPLIED
+ accept %ContentTypes; #IMPLIED
+ align %ImgAlign; #IMPLIED
+ >
+
+<!ELEMENT select (optgroup|option)+> <!-- option selector -->
+<!ATTLIST select
+ %attrs;
+ name CDATA #IMPLIED
+ size %Number; #IMPLIED
+ multiple (multiple) #IMPLIED
+ disabled (disabled) #IMPLIED
+ tabindex %Number; #IMPLIED
+ onfocus %Script; #IMPLIED
+ onblur %Script; #IMPLIED
+ onchange %Script; #IMPLIED
+ >
+
+<!ELEMENT optgroup (option)+> <!-- option group -->
+<!ATTLIST optgroup
+ %attrs;
+ disabled (disabled) #IMPLIED
+ label %Text; #REQUIRED
+ >
+
+<!ELEMENT option (#PCDATA)> <!-- selectable choice -->
+<!ATTLIST option
+ %attrs;
+ selected (selected) #IMPLIED
+ disabled (disabled) #IMPLIED
+ label %Text; #IMPLIED
+ value CDATA #IMPLIED
+ >
+
+<!ELEMENT textarea (#PCDATA)> <!-- multi-line text field -->
+<!ATTLIST textarea
+ %attrs;
+ %focus;
+ name CDATA #IMPLIED
+ rows %Number; #REQUIRED
+ cols %Number; #REQUIRED
+ disabled (disabled) #IMPLIED
+ readonly (readonly) #IMPLIED
+ onselect %Script; #IMPLIED
+ onchange %Script; #IMPLIED
+ >
+
+<!--
+ The fieldset element is used to group form fields.
+ Only one legend element should occur in the content
+ and if present should only be preceded by whitespace.
+-->
+<!ELEMENT fieldset (#PCDATA | legend | %block; | form | %inline; | %misc;)*>
+<!ATTLIST fieldset
+ %attrs;
+ >
+
+<!ENTITY % LAlign "(top|bottom|left|right)">
+
+<!ELEMENT legend %Inline;> <!-- fieldset label -->
+<!ATTLIST legend
+ %attrs;
+ accesskey %Character; #IMPLIED
+ align %LAlign; #IMPLIED
+ >
+
+<!--
+ Content is %Flow; excluding a, form, form controls, iframe
+-->
+<!ELEMENT button %button.content;> <!-- push button -->
+<!ATTLIST button
+ %attrs;
+ %focus;
+ name CDATA #IMPLIED
+ value CDATA #IMPLIED
+ type (button|submit|reset) "submit"
+ disabled (disabled) #IMPLIED
+ >
+
+<!-- single-line text input control (DEPRECATED) -->
+<!ELEMENT isindex EMPTY>
+<!ATTLIST isindex
+ %coreattrs;
+ %i18n;
+ prompt %Text; #IMPLIED
+ >
+
+<!--======================= Tables =======================================-->
+
+<!-- Derived from IETF HTML table standard, see [RFC1942] -->
+
+<!--
+ The border attribute sets the thickness of the frame around the
+ table. The default units are screen pixels.
+
+ The frame attribute specifies which parts of the frame around
+ the table should be rendered. The values are not the same as
+ CALS to avoid a name clash with the valign attribute.
+-->
+<!ENTITY % TFrame "(void|above|below|hsides|lhs|rhs|vsides|box|border)">
+
+<!--
+ The rules attribute defines which rules to draw between cells:
+
+ If rules is absent then assume:
+ "none" if border is absent or border="0" otherwise "all"
+-->
+
+<!ENTITY % TRules "(none | groups | rows | cols | all)">
+
+<!-- horizontal placement of table relative to document -->
+<!ENTITY % TAlign "(left|center|right)">
+
+<!-- horizontal alignment attributes for cell contents
+
+ char alignment char, e.g. char=':'
+ charoff offset for alignment char
+-->
+<!ENTITY % cellhalign
+ "align (left|center|right|justify|char) #IMPLIED
+ char %Character; #IMPLIED
+ charoff %Length; #IMPLIED"
+ >
+
+<!-- vertical alignment attributes for cell contents -->
+<!ENTITY % cellvalign
+ "valign (top|middle|bottom|baseline) #IMPLIED"
+ >
+
+<!ELEMENT table
+ (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
+<!ELEMENT caption %Inline;>
+<!ELEMENT thead (tr)+>
+<!ELEMENT tfoot (tr)+>
+<!ELEMENT tbody (tr)+>
+<!ELEMENT colgroup (col)*>
+<!ELEMENT col EMPTY>
+<!ELEMENT tr (th|td)+>
+<!ELEMENT th %Flow;>
+<!ELEMENT td %Flow;>
+
+<!ATTLIST table
+ %attrs;
+ summary %Text; #IMPLIED
+ width %Length; #IMPLIED
+ border %Pixels; #IMPLIED
+ frame %TFrame; #IMPLIED
+ rules %TRules; #IMPLIED
+ cellspacing %Length; #IMPLIED
+ cellpadding %Length; #IMPLIED
+ align %TAlign; #IMPLIED
+ bgcolor %Color; #IMPLIED
+ >
+
+<!ENTITY % CAlign "(top|bottom|left|right)">
+
+<!ATTLIST caption
+ %attrs;
+ align %CAlign; #IMPLIED
+ >
+
+<!--
+colgroup groups a set of col elements. It allows you to group
+several semantically related columns together.
+-->
+<!ATTLIST colgroup
+ %attrs;
+ span %Number; "1"
+ width %MultiLength; #IMPLIED
+ %cellhalign;
+ %cellvalign;
+ >
+
+<!--
+ col elements define the alignment properties for cells in
+ one or more columns.
+
+ The width attribute specifies the width of the columns, e.g.
+
+ width=64 width in screen pixels
+ width=0.5* relative width of 0.5
+
+ The span attribute causes the attributes of one
+ col element to apply to more than one column.
+-->
+<!ATTLIST col
+ %attrs;
+ span %Number; "1"
+ width %MultiLength; #IMPLIED
+ %cellhalign;
+ %cellvalign;
+ >
+
+<!--
+ Use thead to duplicate headers when breaking table
+ across page boundaries, or for static headers when
+ tbody sections are rendered in scrolling panel.
+
+ Use tfoot to duplicate footers when breaking table
+ across page boundaries, or for static footers when
+ tbody sections are rendered in scrolling panel.
+
+ Use multiple tbody sections when rules are needed
+ between groups of table rows.
+-->
+<!ATTLIST thead
+ %attrs;
+ %cellhalign;
+ %cellvalign;
+ >
+
+<!ATTLIST tfoot
+ %attrs;
+ %cellhalign;
+ %cellvalign;
+ >
+
+<!ATTLIST tbody
+ %attrs;
+ %cellhalign;
+ %cellvalign;
+ >
+
+<!ATTLIST tr
+ %attrs;
+ %cellhalign;
+ %cellvalign;
+ bgcolor %Color; #IMPLIED
+ >
+
+<!-- Scope is simpler than headers attribute for common tables -->
+<!ENTITY % Scope "(row|col|rowgroup|colgroup)">
+
+<!-- th is for headers, td for data and for cells acting as both -->
+
+<!ATTLIST th
+ %attrs;
+ abbr %Text; #IMPLIED
+ axis CDATA #IMPLIED
+ headers IDREFS #IMPLIED
+ scope %Scope; #IMPLIED
+ rowspan %Number; "1"
+ colspan %Number; "1"
+ %cellhalign;
+ %cellvalign;
+ nowrap (nowrap) #IMPLIED
+ bgcolor %Color; #IMPLIED
+ width %Length; #IMPLIED
+ height %Length; #IMPLIED
+ >
+
+<!ATTLIST td
+ %attrs;
+ abbr %Text; #IMPLIED
+ axis CDATA #IMPLIED
+ headers IDREFS #IMPLIED
+ scope %Scope; #IMPLIED
+ rowspan %Number; "1"
+ colspan %Number; "1"
+ %cellhalign;
+ %cellvalign;
+ nowrap (nowrap) #IMPLIED
+ bgcolor %Color; #IMPLIED
+ width %Length; #IMPLIED
+ height %Length; #IMPLIED
+ >
+