Seed the SVG 2 repository with the current SVG 1.1 2nd Edition files. See the following lines for more. r=WG.
authorSVG WG <www-svg@w3.org>
Thu, 28 Jul 2011 16:19:09 +0100
changeset 1 cbc4f3f708e9
parent 0 7ca8f1950679
child 2 7287a5350439
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
master/Makefile
master/access.html
master/animate.html
master/attindex.html
master/backward.html
master/changes.html
master/color.html
master/concepts.html
master/conform.html
master/coords.html
master/definitions.xml
master/eltindex.html
master/escript.html
master/expanded-toc.html
master/extend.html
master/feature.html
master/filters.html
master/fonts.html
master/i18n.html
master/idl.html
master/idl2java.xsl
master/images/animate/anim01.svg
master/images/animate/anim01a.png
master/images/animate/anim01a.svg
master/images/animate/anim01b.png
master/images/animate/anim01b.svg
master/images/animate/anim01c.png
master/images/animate/anim01c.svg
master/images/animate/anim01d.png
master/images/animate/anim01d.svg
master/images/animate/animMotion01.svg
master/images/animate/animMotion01a.png
master/images/animate/animMotion01a.svg
master/images/animate/animMotion01b.png
master/images/animate/animMotion01b.svg
master/images/animate/animMotion01c.png
master/images/animate/animMotion01c.svg
master/images/animate/animns01.svg
master/images/animate/dom01.svg
master/images/animate/dom01a.png
master/images/animate/dom01a.svg
master/images/animate/dom01b.png
master/images/animate/dom01b.svg
master/images/animate/dom01c.png
master/images/animate/dom01c.svg
master/images/animate/keySplines01.png
master/images/animate/keySplines02.png
master/images/animate/keySplines03.png
master/images/animate/keySplines04.png
master/images/autosp-0.png
master/images/autosp-1.png
master/images/bopomofo.png
master/images/coords/CTM-orig.png
master/images/coords/CTM.png
master/images/coords/InitialCoords.png
master/images/coords/InitialCoords.svg
master/images/coords/Matrix.png
master/images/coords/MatrixMultiply.png
master/images/coords/MatrixNested.png
master/images/coords/MatrixRotate.png
master/images/coords/MatrixScale.png
master/images/coords/MatrixSkewX.png
master/images/coords/MatrixSkewY.png
master/images/coords/MatrixTranslate.png
master/images/coords/Nested.png
master/images/coords/Nested.svg
master/images/coords/NestedCalcs.png
master/images/coords/NewCoordSys.png
master/images/coords/NewCoordSys.svg
master/images/coords/OrigCoordSys.png
master/images/coords/OrigCoordSys.svg
master/images/coords/PreserveAspectRatio.png
master/images/coords/PreserveAspectRatio.svg
master/images/coords/RotateScale.png
master/images/coords/RotateScale.svg
master/images/coords/Skew.png
master/images/coords/Skew.svg
master/images/coords/Units.png
master/images/coords/Units.svg
master/images/coords/ViewBox-Width150.png
master/images/coords/ViewBox-Width150.svg
master/images/coords/ViewBox.png
master/images/coords/ViewBox.svg
master/images/coords/geocoord1.svg
master/images/coords/geocoord2.svg
master/images/coords/geocoord3.svg
master/images/cumulative-transform-graph-1.png
master/images/cumulative-transform-graph-1.svg
master/images/fe-aa-ex.png
master/images/fe-db-ex.png
master/images/filters/azimuth-elevation.png
master/images/filters/enable-background-01.png
master/images/filters/enable-background-01.svg
master/images/filters/feBlend.png
master/images/filters/feBlend.svg
master/images/filters/feColorMatrix.png
master/images/filters/feColorMatrix.svg
master/images/filters/feComponentTransfer.png
master/images/filters/feComponentTransfer.svg
master/images/filters/feComposite.png
master/images/filters/feComposite.svg
master/images/filters/feImage-01.png
master/images/filters/feImage-01.svg
master/images/filters/feMorphology.png
master/images/filters/feMorphology.svg
master/images/filters/feTurbulence.png
master/images/filters/feTurbulence.svg
master/images/filters/filters00.png
master/images/filters/filters00.svg
master/images/filters/filters01-0.png
master/images/filters/filters01-0.svg
master/images/filters/filters01-1.png
master/images/filters/filters01-1.svg
master/images/filters/filters01-2.png
master/images/filters/filters01-2.svg
master/images/filters/filters01-3.png
master/images/filters/filters01-3.svg
master/images/filters/filters01-4.png
master/images/filters/filters01-4.svg
master/images/filters/filters01-5.png
master/images/filters/filters01-5.svg
master/images/filters/filters01-6.png
master/images/filters/filters01-6.svg
master/images/filters/filters01.png
master/images/filters/filters01.svg
master/images/filters/primitive-subregion-01.png
master/images/filters/primitive-subregion-01.svg
master/images/filters/smiley.png
master/images/fullwidth.png
master/images/halfwidth.png
master/images/implnote/arcs/Makefile
master/images/implnote/arcs/cx.png
master/images/implnote/arcs/cxcyrxrypsitheta.png
master/images/implnote/arcs/cy.png
master/images/implnote/arcs/delta-theta.png
master/images/implnote/arcs/equal.png
master/images/implnote/arcs/fa.png
master/images/implnote/arcs/fs.png
master/images/implnote/arcs/image002.mml
master/images/implnote/arcs/image004.mml
master/images/implnote/arcs/image006.mml
master/images/implnote/arcs/image008.mml
master/images/implnote/arcs/image010.mml
master/images/implnote/arcs/image012.mml
master/images/implnote/arcs/image014.mml
master/images/implnote/arcs/image016.mml
master/images/implnote/arcs/image018.mml
master/images/implnote/arcs/image020.mml
master/images/implnote/arcs/image022.mml
master/images/implnote/arcs/image024.mml
master/images/implnote/arcs/image026.mml
master/images/implnote/arcs/image028.mml
master/images/implnote/arcs/notequal.png
master/images/implnote/arcs/plus.png
master/images/implnote/arcs/psi.png
master/images/implnote/arcs/rx.png
master/images/implnote/arcs/ry.png
master/images/implnote/arcs/theta.png
master/images/implnote/arcs/theta1.png
master/images/implnote/arcs/theta2.png
master/images/implnote/arcs/x1.png
master/images/implnote/arcs/x1y1x2y2fafs.png
master/images/implnote/arcs/x2.png
master/images/implnote/arcs/y1.png
master/images/implnote/arcs/y2.png
master/images/kashida.png
master/images/lf-h-ex.png
master/images/lf-h.png
master/images/lf-hi-ex.png
master/images/lf-hi.png
master/images/lf-tny.png
master/images/lf-v-ex.png
master/images/lf-v.png
master/images/lf-vi.png
master/images/lg-f-ex.png
master/images/lg-f.png
master/images/lg-l-ex.png
master/images/lg-l.png
master/images/lg-s-ex.png
master/images/lg-s.png
master/images/lg-s2.png
master/images/lgc-exh.png
master/images/lgc-exvi.png
master/images/lgl-exh.png
master/images/lgl-exvi.png
master/images/lgl.png
master/images/linking/05_07.xml
master/images/linking/05_08.xml
master/images/linking/link01.png
master/images/linking/link01.svg
master/images/linking/target.xml
master/images/logo-PR.png
master/images/masking/compop01.png
master/images/masking/compop02.png
master/images/masking/compops.png
master/images/masking/compregion.png
master/images/masking/mask01.png
master/images/masking/mask01.svg
master/images/masking/opacity01.png
master/images/masking/opacity01.svg
master/images/painting/fillrule-evenodd.png
master/images/painting/fillrule-evenodd.svg
master/images/painting/fillrule-nonzero.png
master/images/painting/fillrule-nonzero.svg
master/images/painting/inheritance.png
master/images/painting/inheritance.svg
master/images/painting/linecap.png
master/images/painting/linecap.svg
master/images/painting/linejoin.png
master/images/painting/linejoin.svg
master/images/painting/marker-simulated.svg
master/images/painting/marker.png
master/images/painting/marker.svg
master/images/paths/arcs01.png
master/images/paths/arcs01.svg
master/images/paths/arcs02.png
master/images/paths/arcs02.svg
master/images/paths/cubic01.png
master/images/paths/cubic01.svg
master/images/paths/cubic02.png
master/images/paths/cubic02.svg
master/images/paths/quad01.png
master/images/paths/quad01.svg
master/images/paths/triangle01.png
master/images/paths/triangle01.svg
master/images/pservers/gradient_vector_and_normal.png
master/images/pservers/lingrad01.png
master/images/pservers/lingrad01.svg
master/images/pservers/pattern01.png
master/images/pservers/pattern01.svg
master/images/pservers/radgrad01.png
master/images/pservers/radgrad01.svg
master/images/pt-l.png
master/images/pt-n.png
master/images/ptrim0.png
master/images/ptrim1.png
master/images/pw-h-ex.png
master/images/pw-h.png
master/images/pw-s-ex.png
master/images/r-box-t.png
master/images/ra-c-h.png
master/images/ra-c-rb-h.png
master/images/ra-c-rb.png
master/images/ra-c.png
master/images/ra-dl-rb.png
master/images/ra-dl.png
master/images/ra-ds-rb.png
master/images/ra-ds.png
master/images/ra-l-rb.png
master/images/ra-l.png
master/images/ra-le-l.png
master/images/ra-le-r.png
master/images/ra-r-rb.png
master/images/ra-r.png
master/images/ro-a.png
master/images/ro-e.png
master/images/ro-n.png
master/images/ro-s.png
master/images/rp-b-vi-ex.png
master/images/rp-b-vi.png
master/images/rp-b.png
master/images/rp-t-vi-ex.png
master/images/rp-t-vi.png
master/images/rp-t.png
master/images/ruby-jp-b-ex.png
master/images/ruby-jp-ex.png
master/images/script/script01-AfterClick.png
master/images/script/script01-AfterClick.svg
master/images/script/script01.png
master/images/script/script01.svg
master/images/shapes/circle01.png
master/images/shapes/circle01.svg
master/images/shapes/ellipse01.png
master/images/shapes/ellipse01.svg
master/images/shapes/line01.png
master/images/shapes/line01.svg
master/images/shapes/polygon01.png
master/images/shapes/polygon01.svg
master/images/shapes/polyline01.png
master/images/shapes/polyline01.svg
master/images/shapes/rect01.png
master/images/shapes/rect01.svg
master/images/shapes/rect02.png
master/images/shapes/rect02.svg
master/images/struct/StandAlone01.svg
master/images/struct/Use01-GeneratedContent.svg
master/images/struct/Use01.png
master/images/struct/Use01.svg
master/images/struct/Use02-GeneratedContent.svg
master/images/struct/Use02.png
master/images/struct/Use02.svg
master/images/struct/Use03-GeneratedContent.svg
master/images/struct/Use03.png
master/images/struct/Use03.svg
master/images/struct/Use04-GeneratedContent.svg
master/images/struct/Use04.png
master/images/struct/Use04.svg
master/images/struct/defs01.svg
master/images/struct/grouping01.svg
master/images/styling/ExternalCSSStyleSheet.svg
master/images/styling/InternalCSSStyleSheet.svg
master/images/styling/PresentationAttributes.svg
master/images/styling/StyleAttribute.svg
master/images/styling/mystyle.css
master/images/ta-i.png
master/images/ta-n.png
master/images/tc-l2.png
master/images/tc-l3.png
master/images/tc-l4.png
master/images/tc-l5.png
master/images/tc-le-ex.png
master/images/tc-li-ex.png
master/images/tc-li.png
master/images/text/GlyphOrientAuto.png
master/images/text/GlyphOrientZero.png
master/images/text/lf-h-ex.png
master/images/text/lf-h.png
master/images/text/lf-v-ex.png
master/images/text/lf-v-ex.small.png
master/images/text/lf-v.png
master/images/text/lf-vi-ex.png
master/images/text/lf-vi-ex.small.png
master/images/text/lf-vi.png
master/images/text/rtl-complex.png
master/images/text/rtl-complex.svg
master/images/text/rtl-text.png
master/images/text/rtl-text.svg
master/images/text/text01.png
master/images/text/text01.svg
master/images/text/textdecoration01-patch.svg
master/images/text/textdecoration01.png
master/images/text/textdecoration01.svg
master/images/text/toap01.png
master/images/text/toap01.svg
master/images/text/toap02.png
master/images/text/toap02.svg
master/images/text/toap03.png
master/images/text/toap03.svg
master/images/text/toap04.png
master/images/text/toap04.svg
master/images/text/toap05.png
master/images/text/toap06.png
master/images/text/tref01.png
master/images/text/tref01.svg
master/images/text/tspan01.png
master/images/text/tspan01.svg
master/images/text/tspan02.png
master/images/text/tspan02.svg
master/images/text/tspan03.png
master/images/text/tspan03.svg
master/images/text/tspan04.png
master/images/text/tspan04.svg
master/images/text/tspan05-diagram.png
master/images/text/tspan05.png
master/images/text/tspan05.svg
master/images/tj-d-ex.png
master/images/tj-d.png
master/images/tj-dal-ex.png
master/images/tj-dal.png
master/images/tj-ii-ex.png
master/images/tj-ii.png
master/images/tj-iw-ex.png
master/images/tj-iw.png
master/images/tj-n.png
master/images/tjt-n.png
master/images/tjt-p.png
master/images/tjt-pak.png
master/images/tny.png
master/images/vcss.png
master/images/vxhtml10.png
master/images/w3c_home.png
master/implnote.html
master/index.html
master/interact.html
master/intro.html
master/java.html
master/linking.html
master/masking.html
master/metadata.html
master/mimereg.html
master/minimize.html
master/painting.html
master/paths.html
master/propidx.html
master/pservers.html
master/publish.xml
master/refs.html
master/render.html
master/script.html
master/shapes.html
master/struct.html
master/style/LinLibertineC_Re-4.0_.1_.ttf
master/style/LinLibertine_BI-4.0_.3_.ttf
master/style/LinLibertine_Bd-4.0_.2_.ttf
master/style/LinLibertine_It-4.0_.3_.ttf
master/style/LinLibertine_Re-4.1_.8_.ttf
master/style/VeraMoBI.ttf
master/style/VeraMoBd.ttf
master/style/VeraMoIt.ttf
master/style/VeraMono.ttf
master/style/expanders.js
master/style/logo-ED-v.svg
master/style/logo-PR-v.svg
master/style/logo-REC-v.svg
master/style/luxisb.ttf
master/style/luxisbi.ttf
master/style/luxisr.ttf
master/style/luxisri.ttf
master/style/svg-style-print.css
master/style/svg-style.css
master/styling.html
master/svg.idl
master/svgdom.html
master/text.html
master/types.html
master/xhtml1-transitional+edit.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>
+&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="8cm" height="3cm"  viewBox="0 0 800 300"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;desc&gt;Example anim01 - demonstrate animation elements&lt;/desc&gt;
+  &lt;rect x="1" y="1" width="798" height="298" 
+        fill="none" stroke="blue" stroke-width="2" /&gt;
+  &lt;!-- 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. --&gt;
+  &lt;rect id="RectElement" x="300" y="100" width="300" height="100"
+        fill="rgb(255,255,0)"  &gt;
+    &lt;animate attributeName="x" attributeType="XML"
+             begin="0s" dur="9s" fill="freeze" from="300" to="0" /&gt;
+    &lt;animate attributeName="y" attributeType="XML"
+             begin="0s" dur="9s" fill="freeze" from="100" to="0" /&gt;
+    &lt;animate attributeName="width" attributeType="XML"
+             begin="0s" dur="9s" fill="freeze" from="300" to="800" /&gt;
+    &lt;animate attributeName="height" attributeType="XML"
+             begin="0s" dur="9s" fill="freeze" from="100" to="300" /&gt;
+  &lt;/rect&gt;
+  &lt;!-- 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 --&gt;
+  &lt;g transform="translate(100,100)" &gt;
+    &lt;!-- 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. --&gt;
+    &lt;text id="TextElement" x="0" y="0"
+          font-family="Verdana" font-size="35.27" visibility="hidden"  &gt; 
+      It's alive!
+      &lt;set attributeName="visibility" attributeType="CSS" to="visible"
+           begin="3s" dur="6s" fill="freeze" /&gt;
+      &lt;animateMotion path="M 0 0 L 100 100" 
+           begin="3s" dur="6s" fill="freeze" /&gt;
+      &lt;animate attributeName="fill" attributeType="CSS"
+           from="rgb(0,0,255)" to="rgb(128,0,0)"
+           begin="3s" dur="6s" fill="freeze" /&gt;
+      &lt;animateTransform attributeName="transform" attributeType="XML"
+           type="rotate" from="-30" to="0"
+           begin="3s" dur="6s" fill="freeze" /&gt;
+      &lt;animateTransform attributeName="transform" attributeType="XML"
+           type="scale" from="1" to="3" additive="sum"
+           begin="3s" dur="6s" fill="freeze" /&gt;
+    &lt;/text&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;
+</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">&nbsp;</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">&nbsp;</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">&lt;iri&gt;</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>&lt;iri&gt; must point to exactly one target element which
+        is capable of being the target of the given animation. If
+        &lt;iri&gt; 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'>&lt;attributeName&gt;</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">&lt;length&gt;</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">&lt;length&gt;</a> value is a scalar
+      value, and a <a href="types.html#DataTypeColor">&lt;color&gt;</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">&lt;list-of-length&gt;</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">&lt;list-of-points&gt;</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">&lt;coordinate&gt;</a>,
+        <a href="types.html#DataTypeInteger">&lt;integer&gt;</a>,
+        <a href="types.html#DataTypeLength">&lt;length&gt;</a> and
+        <a href="types.html#DataTypeNumber">&lt;number&gt;</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">&lt;color&gt;</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">&lt;color&gt;</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">&lt;transform-list&gt;</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.&nbsp;<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:&nbsp;<code><br />
+       &nbsp; 02:30:03&nbsp;&nbsp;&nbsp;</code> = 2 hours, 30
+      minutes and 3 seconds<br />
+       <code>&nbsp; 50:00:10.25</code> = 50 hours, 10 seconds and
+      250 milliseconds</li>
+      <li>Partial clock value:&nbsp;<code><br />
+       &nbsp; 02:33&nbsp;&nbsp;</code> = 2 minutes and 33
+      seconds<br />
+       <code>&nbsp; 00:10.5</code> = 10.5 seconds = 10 seconds and
+      500 milliseconds</li>
+      <li>Timecount values:<br />
+       <code>&nbsp; 3.2h&nbsp;&nbsp;&nbsp;</code> = 3.2 hours = 3
+      hours and 12 minutes<br />
+       <code>&nbsp; 45min&nbsp;&nbsp;</code> = 45 minutes<br />
+       <code>&nbsp; 30s&nbsp;&nbsp;&nbsp;&nbsp;</code> = 30
+      seconds<br />
+       <code>&nbsp; 5ms&nbsp;&nbsp;&nbsp;&nbsp;</code> = 5
+      milliseconds<br />
+       <code>&nbsp; 12.467&nbsp;</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&eacute;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'>"&lt;list&gt;"</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'>"&lt;list&gt;"</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,&nbsp;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'>"&lt;list&gt;"</span></dt>
+        <dd><p>A set of B&eacute;zier control points associated with
+        the <a>'keyTimes'</a> list, defining a cubic
+        B&eacute;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&eacute;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&eacute;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'>"&lt;value&gt;"</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'>"&lt;value&gt;"</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'>"&lt;value&gt;"</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">&nbsp;</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&nbsp;0&nbsp;1&nbsp;1"
+          (the default)</span></td>
+          <td width="20">&nbsp;</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&nbsp;0&nbsp;.5&nbsp;1"<br />
+           &nbsp;</span></td>
+        </tr>
+        <tr>
+          <td width="10">&nbsp;</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&nbsp;.75&nbsp;.25&nbsp;1"</span></td>
+          <td width="20">&nbsp;</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&nbsp;0&nbsp;.25&nbsp;.25"</span></td>
+        </tr>
+      </table>
+      <p>To illustrate the calculations, consider the simple
+      example:</p>
+<pre>
+&lt;animate dur="4s" values="10; 20" keyTimes="0; 1"
+     calcMode="spline" <strong>keySplines</strong>=<em>{as in table}</em> /&gt;
+</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&eacute;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>
+&lt;rect width="20px" ...&gt;
+  &lt;animate attributeName="width" from="0px" to="10px" dur="10s"
+           additive="sum"/&gt;
+&lt;/rect&gt;
+</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>
+&lt;rect width="20px" ...&gt;
+  &lt;animate attributeName="width" from="0px" to="10px" dur="10s"
+           additive="sum" accumulate="sum" repeatCount="5"/&gt;
+&lt;/rect&gt;
+</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>
+&lt;rect&gt;
+  &lt;animate attributeType="CSS" attributeName="opacity" 
+         from="1" to="0" dur="5s" repeatCount="indefinite" /&gt;
+&lt;/rect&gt;
+</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">&lt;value&gt;</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">&lt;path-data&gt;</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">&lt;list-of-numbers&gt;</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>&lt;number&gt;</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>&lt;number&gt;</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">&lt;iri&gt;</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>
+&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;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" &gt;
+  &lt;desc&gt;Example animMotion01 - demonstrate motion animation computations&lt;/desc&gt;
+  &lt;rect x="1" y="1" width="498" height="298"
+        fill="none" stroke="blue" stroke-width="2" /&gt;
+  &lt;!-- Draw the outline of the motion path in blue, along
+          with three small circles at the start, middle and end. --&gt;
+  &lt;path id="path1" d="M100,250 C 100,50 400,50 400,250"
+        fill="none" stroke="blue" stroke-width="7.06"  /&gt;
+  &lt;circle cx="100" cy="250" r="17.64" fill="blue"  /&gt;
+  &lt;circle cx="250" cy="100" r="17.64" fill="blue"  /&gt;
+  &lt;circle cx="400" cy="250" r="17.64" fill="blue"  /&gt;
+  &lt;!-- 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. --&gt;
+  &lt;path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+        fill="yellow" stroke="red" stroke-width="7.06"  &gt;
+    &lt;!-- Define the motion path animation --&gt;
+    &lt;animateMotion dur="6s" repeatCount="indefinite" rotate="auto" &gt;
+       &lt;mpath xlink:href="#path1"/&gt;
+    &lt;/animateMotion&gt;
+  &lt;/path&gt;
+&lt;/svg&gt;
+</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">&nbsp;</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">&nbsp;</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">&lt;color&gt;</a> <a href="types.html#DataTypeICCColor">&lt;icccolor&gt;</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">&lt;tx&gt; [,&lt;ty&gt;]</span>.</li>
+
+  <li>For a <span class="attr-value">type="scale"</span>, each individual
+  value is expressed as <span class="attr-value">&lt;sx&gt; [,&lt;sy&gt;]</span>.</li>
+
+  <li>For a <span class="attr-value">type="rotate"</span>, each individual
+  value is expressed as <span class="attr-value">&lt;rotate-angle&gt; [&lt;cx&gt; &lt;cy&gt;]</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">&lt;skew-angle&gt;</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>
+&lt;rect transform="skewX(30)"...&gt;
+  &lt;animateTransform attributeName="transform" attributeType="XML"
+                    type="rotate" from="0" to="90" dur="5s"
+                    additive="replace" fill="freeze"/&gt;
+  &lt;animateTransform attributeName="transform" attributeType="XML"
+                    type="scale" from="1" to="2" dur="5s"
+                    additive="replace" fill="freeze"/&gt;
+&lt;/rect&gt;
+</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>
+&lt;rect transform="scale(2)" ... /&gt;
+</pre>
+
+<p>whereas in the following example:</p>
+
+<pre>
+&lt;rect transform="skewX(30)"...&gt;
+  &lt;animateTransform attributeName="transform" attributeType="XML"
+                    type="rotate" from="0" to="90" dur="5s" 
+                    additive="sum" fill="freeze"/&gt;
+  &lt;animateTransform attributeName="transform" attributeType="XML"
+                    type="scale" from="1" to="2" dur="5s"
+                    additive="sum" fill="freeze"/&gt;
+&lt;/rect&gt;
+</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>
+&lt;rect transform="skewX(30) rotate(90) scale(2)" ... /&gt;
+</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'>&lt;sy&gt;</span> component of a <span class='attr-value'>'scale'</span>
+and <span class='attr-value'>0</span> for the <span class='attr-value'>&lt;tx&gt;</span> component
+of a <span class='attr-value'>'translate'</span> and the <span class='attr-value'>&lt;cx cy&gt;</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>&lt;angle&gt;</a></td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td><a
+        href="types.html#DataTypeColor">&lt;color&gt;</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">&lt;coordinate&gt;</a></td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td><a
+        href="types.html#DataTypeFrequency">&lt;frequency&gt;</a></td>
+        <td>no</td>
+        <td>no</td>
+        <td>no</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td><a
+        href="types.html#DataTypeInteger">&lt;integer&gt;</a></td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td><a>&lt;length&gt;</a></td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td><a href="types.html#DataTypeList">&lt;list-of-<var>T</var>s&gt;</a></td>
+        <td>no</td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td><a>&lt;number&gt;</a></td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td><a
+        href="types.html#DataTypePaint">&lt;paint&gt;</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>&lt;percentage&gt;</a></td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td><a href="types.html#DataTypeTime">&lt;time&gt;</a></td>
+        <td>no</td>
+        <td>no</td>
+        <td>no</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td><a
+        href="types.html#DataTypeTransformList">&lt;transform-list&gt;</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">&lt;iri&gt;</a></td>
+        <td>no</td>
+        <td>yes</td>
+        <td>yes</td>
+        <td>no</td>
+        <td>no</td>
+        <td>&nbsp;</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>&nbsp;</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>
+&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="4cm" height="2cm" viewBox="0 0 400 200"
+     xmlns="http://www.w3.org/2000/svg"
+     onload="StartAnimation(evt)" version="1.1"&gt;
+  &lt;script type="application/ecmascript"&gt;&lt;![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 &gt; 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 &lt;timer_increment&gt; milliseconds later.
+      setTimeout("ShowAndGrowElement()", timer_increment)
+    }
+    window.ShowAndGrowElement = ShowAndGrowElement
+  ]]&gt;&lt;/script&gt;
+  &lt;rect x="1" y="1" width="398" height="198"
+        fill="none" stroke="blue" stroke-width="2"/&gt;
+  &lt;g transform="translate(50,150)" fill="red" font-size="7"&gt;
+    &lt;text id="TextElement"&gt;SVG&lt;/text&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;
+</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">&nbsp;</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">&nbsp;</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>
+&lt;?xml version="1.0" standalone="yes"?&gt;
+&lt;smil&gt;
+  &lt;body&gt;
+    &lt;!-- 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. --&gt;
+    &lt;switch&gt;
+      &lt;!-- Render the SVG if possible. --&gt;
+      &lt;ref type="image/svg+xml" src="drawing.svg" /&gt;
+      &lt;!-- Else, render the alternate image. --&gt;
+      &lt;img src="alternate_image.jpg" /&gt;
+    &lt;/switch&gt;
+  &lt;/body&gt;
+&lt;/smil&gt;
+</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>
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;object type="image/svg+xml" data="drawing.svg"&gt;
+      &lt;!-- The contents of the 'object' element (i.e., an alternate
+         image) are drawn in the event the user agent cannot process 
+         the SVG drawing. --&gt;
+      &lt;img src="alternate_image.jpg" alt="alternate description"&gt;
+    &lt;/object&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</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>&nbsp;&nbsp;</td>
+              <td><a
+              href="types.html#DataTypeColor">&lt;color&gt;</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>&nbsp;&nbsp;</td>
+              <td>depends on user agent</td>
+            </tr>
+            <tr valign="baseline">
+              <td><em>Applies to:</em>&nbsp;&nbsp;</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>&nbsp;&nbsp;</td>
+              <td>yes</td>
+            </tr>
+            <tr valign="baseline">
+              <td><em>Percentages:</em>&nbsp;&nbsp;</td>
+              <td>N/A</td>
+            </tr>
+            <tr valign="baseline">
+              <td><em>Media:</em>&nbsp;&nbsp;</td>
+              <td>visual</td>
+            </tr>
+            <tr valign="baseline">
+              <td><em><a
+              href="animate.html#Animatable">Animatable</a>:</em>&nbsp;&nbsp;</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">&lt;iri&gt;</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">&lt;string&gt;</span>"</dt>
+        <dd>The unique ID for a locally stored color profile.
+        &lt;string&gt; 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">&lt;name&gt;</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 &lt;name&gt; 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">&lt;name&gt;</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 { &lt;color-profile-description&gt; }
+</pre>
+    where the &lt;color-profile-description&gt; 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 &lt;color-profile-description&gt;:</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 | &lt;local-profile&gt; | <a
+              href="types.html#DataTypeIRI">&lt;iri&gt;</a> |
+              (&lt;local-profile&gt; <a
+              href="types.html#DataTypeIRI">&lt;iri&gt;</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'>&lt;local-profile&gt;</span></dt>
+      <dd>
+        The source profile is a locally-stored profile. The syntax
+        for &lt;local-profile&gt; is: 
+<pre>
+"local(" + &lt;string&gt; + ")"
+</pre>
+        where &lt;string&gt; 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">&lt;iri&gt;</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'>&lt;local-profile&gt; <a
+      href="types.html#DataTypeIRI">&lt;iri&gt;</a>)</span></dt>
+      <dd>Two profiles are specified. If &lt;local-profile&gt;
+      cannot be found on the local system, then the <a
+      href="types.html#DataTypeIRI">&lt;iri&gt;</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>&lt;name&gt;</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'>&lt;name&gt;</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 &lt;name&gt; 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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</td>
+              <td>auto | sRGB | &lt;name&gt; | <a
+              href="types.html#DataTypeIRI">&lt;iri&gt;</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>&nbsp;&nbsp;</td>
+              <td>auto</td>
+            </tr>
+            <tr valign="baseline">
+              <td><em>Applies to:</em>&nbsp;&nbsp;</td>
+              <td><a>'image'</a> elements that
+              refer to raster images</td>
+            </tr>
+            <tr valign="baseline">
+              <td><em>Inherited:</em>&nbsp;&nbsp;</td>
+              <td>yes</td>
+            </tr>
+            <tr valign="baseline">
+              <td><em>Percentages:</em>&nbsp;&nbsp;</td>
+              <td>N/A</td>
+            </tr>
+            <tr valign="baseline">
+              <td><em>Media:</em>&nbsp;&nbsp;</td>
+              <td>visual</td>
+            </tr>
+            <tr valign="baseline">
+              <td><em><a
+              href="animate.html#Animatable">Animatable</a>:</em>&nbsp;&nbsp;</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'>&lt;name&gt;</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
+  &lt;name&gt; 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">&lt;iri&gt;</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>&lt;?xml-stylesheet?&gt;</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>&lt;?xml version="<var>V</var>" encoding="<var>E</var>"?&gt;</code>),</li>
+          <li>the DOCTYPE declaration <code>&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;</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>&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd"&gt;
+&lt;ParentXML&gt;
+  &lt;!-- Elements from ParentXML go here --&gt;
+  &lt;!-- The following is <strong>not</strong> conforming --&gt;
+  &lt;z:rect xmlns:z="http://www.w3.org/2000/svg"
+          x="0" y="0" width="10" height="10" /&gt;
+  &lt;!-- More elements from ParentXML go here --&gt;
+&lt;/ParentXML&gt;</pre>
+
+<p>Instead, for the SVG part to become a Conforming SVG Document Fragment,
+the file could be modified as follows:</p>
+
+<pre>
+&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd"&gt;
+&lt;ParentXML&gt;
+  &lt;!-- Elements from ParentXML go here --&gt;
+  &lt;!-- The following is conforming --&gt;
+  &lt;z:svg xmlns:z="http://www.w3.org/2000/svg"
+         width="100px" height="100px"&gt;
+    &lt;z:rect x="0" y="0" width="10" height="10"/&gt;
+  &lt;/z:svg&gt;
+  &lt;!-- More elements from ParentXML go here --&gt;
+&lt;/ParentXML&gt;
+</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:&nbsp;gzip" or "Transfer-Encoding:&nbsp;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:&nbsp;gzip" or 
+     "Content-Encoding:&nbsp;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>
+&lt;?xml version="1.0" standalone="yes"?&gt;
+&lt;parent xmlns="http://some.url"&gt;
+   
+   &lt;!-- SVG graphic --&gt;
+   &lt;svg xmlns='http://www.w3.org/2000/svg'
+      width="100px" height="200px" version="1.1"&gt;
+      &lt;path d="M100,100 Q200,400,300,100"/&gt;
+      &lt;!-- rest of SVG graphic would go here --&gt;
+   &lt;/svg&gt;   
+   
+&lt;/parent&gt;
+</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 />
+     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 />
+     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 />
+       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 />
+       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 />
+       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 />
+       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 />
+       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 />
+     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 &lt;transform-list&gt;, 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(&lt;a&gt; &lt;b&gt;
+      &lt;c&gt; &lt;d&gt; &lt;e&gt; &lt;f&gt;)</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 />
+       &nbsp;</li>
+      <li><span class="attr-value">translate(&lt;tx&gt;
+      [&lt;ty&gt;])</span>, which specifies a <a
+      href="coords.html#TranslationDefined">translation</a> by
+      <em>tx</em> and <em>ty</em>. If <em>&lt;ty&gt;</em> is not
+      provided, it is assumed to be zero.<br />
+       &nbsp;</li>
+      <li><span class="attr-value">scale(&lt;sx&gt;
+      [&lt;sy&gt;])</span>, which specifies a <a
+      href="coords.html#ScalingDefined">scale</a> operation by
+      <em>sx</em> and <em>sy</em>. If <em>&lt;sy&gt;</em> is not
+      provided, it is assumed to be equal to
+      <em>&lt;sx&gt;</em>.<br />
+       &nbsp;</li>
+      <li><span class="attr-value">rotate(&lt;rotate-angle&gt;
+      [&lt;cx&gt; &lt;cy&gt;])</span>, which specifies a <a
+      href="coords.html#RotationDefined">rotation</a> by <span
+      class="attr-value">&lt;rotate-angle&gt;</span> degrees about
+      a given point.<br />
+       If optional parameters <span
+      class="attr-value">&lt;cx&gt;</span> and <span
+      class="attr-value">&lt;cy&gt;</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">&lt;cx&gt;</span> and <span
+      class="attr-value">&lt;cy&gt;</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(&lt;cx&gt;, &lt;cy&gt;)
+      rotate(&lt;rotate-angle&gt;) translate(-&lt;cx&gt;,
+      -&lt;cy&gt;)</span>.<br />
+       &nbsp;</li>
+      <li><span
+      class="attr-value">skewX(&lt;skew-angle&gt;)</span>, which
+      specifies a <a href="coords.html#SkewXDefined">skew
+      transformation along the x-axis</a>.<br />
+       &nbsp;</li>
+      <li><span
+      class="attr-value">skewY(&lt;skew-angle&gt;)</span>, which
+      specifies a <a href="coords.html#SkewYDefined">skew
+      transformation along the y-axis</a>.<br />
+       &nbsp;</li>
+    </ul>
+    <p>All numeric values are <a>&lt;number&gt;</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>
+&lt;g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)"&gt;
+  &lt;!-- graphics elements go here --&gt;
+&lt;/g&gt;
+</pre>
+    <p>is functionally equivalent to:</p>
+<pre>
+&lt;g transform="translate(-10,-20)"&gt;
+  &lt;g transform="scale(2)"&gt;
+    &lt;g transform="rotate(45)"&gt;
+      &lt;g transform="translate(5,10)"&gt;
+        &lt;!-- graphics elements go here --&gt;
+      &lt;/g&gt;
+    &lt;/g&gt;
+  &lt;/g&gt;
+&lt;/g&gt;
+</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>
+&lt;rect x="10" y="10" width="20" height="20" transform="scale(2)"/&gt;
+</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>
+&lt;g transform="scale(2)"&gt;
+  &lt;rect x="10" y="10" width="20" height="20"/&gt;
+&lt;/g&gt;
+</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>&nbsp;&nbsp;&nbsp;&nbsp;<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">&lt;min-x&gt;</span>, <span
+    class="attr-value">&lt;min-y&gt;</span>, <span
+    class="attr-value">&lt;width&gt;</span> and <span
+    class="attr-value">&lt;height&gt;</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">&lt;width&gt;</span> or <span
+    class="attr-value">&lt;height&gt;</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>
+&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="300px" height="200px" version="1.1"
+     viewBox="0 0 1500 1000" preserveAspectRatio="none"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;desc&gt;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.&lt;/desc&gt;
+  &lt;!-- 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. --&gt;
+  &lt;rect x="0" y="0" width="1500" height="1000" 
+        fill="yellow" stroke="blue" stroke-width="12"  /&gt;
+  &lt;!-- A large, red triangle --&gt;
+  &lt;path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/&gt;
+  &lt;!-- A text string that spans most of the viewport --&gt;
+  &lt;text x="100" y="600" font-size="200" font-family="Verdana" &gt;
+    Stretch to fit
+  &lt;/text&gt;
+&lt;/svg&gt;
+</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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 />
+     &nbsp;</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>
+&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="300px" height="200px" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  <strong>&lt;g transform="scale(0.2)"&gt;</strong>
+    &lt;!-- Rest of document goes here --&gt;
+  <strong>&lt;/g&gt;</strong>
+&lt;/svg&gt;
+</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>
+&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="150px" height="200px" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  <strong>&lt;g transform="scale(0.1 0.2)"&gt;</strong>
+    &lt;!-- Rest of document goes here --&gt;
+  <strong>&lt;/g&gt;</strong>
+&lt;/svg&gt;
+</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">&lt;min-x&gt;</span> or <span
+    class="attr-value">&lt;min-y&gt;</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>&nbsp;&nbsp;&nbsp;&nbsp;<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] &lt;align&gt;
+    [&lt;meetOrSlice&gt;]"</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">&lt;align&gt;</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">&lt;align&gt;</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">&lt;align&gt;</span> is
+      <span class="attr-value">none</span>, then the optional <span
+      class="attr-value">&lt;meetOrSlice&gt;</span> value is
+      ignored.)</li>
+      <li><span class="attr-value">xMinYMin</span> - Force uniform
+      scaling.<br />
+       Align the <span class="attr-value">&lt;min-x&gt;</span> of
+      the element's <a>'viewBox'</a> with the smallest X
+      value of the viewport.<br />
+       Align the <span class="attr-value">&lt;min-y&gt;</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">&lt;min-y&gt;</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">&lt;min-x&gt;+&lt;width&gt;</span> of the
+      element's <a>'viewBox'</a> with the maximum X value
+      of the viewport.<br />
+       Align the <span class="attr-value">&lt;min-y&gt;</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">&lt;min-x&gt;</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">&lt;min-x&gt;+&lt;width&gt;</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">&lt;min-x&gt;</span> of
+      the element's <a>'viewBox'</a> with the smallest X
+      value of the viewport.<br />
+       Align the <span
+      class="attr-value">&lt;min-y&gt;+&lt;height&gt;</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">&lt;min-y&gt;+&lt;height&gt;</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">&lt;min-x&gt;+&lt;width&gt;</span> of the
+      element's <a>'viewBox'</a> with the maximum X value
+      of the viewport.<br />
+       Align the <span
+      class="attr-value">&lt;min-y&gt;+&lt;height&gt;</span> of the
+      element's <a>'viewBox'</a> with the maximum Y value
+      of the viewport.</li>
+    </ul>
+    <p>The <span class="attr-value">&lt;meetOrSlice&gt;</span>
+    parameter is optional and, if provided, is separated from the
+    <span class="attr-value">&lt;align&gt;</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>&nbsp;&nbsp;&nbsp;&nbsp;<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>
+&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="4in" height="3in" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;desc&gt;This SVG drawing embeds another one,
+    thus establishing a new viewport
+  &lt;/desc&gt;
+  &lt;!-- The following statement establishing a new viewport
+       and renders SVG drawing B into that viewport --&gt;
+  &lt;svg x="25%" y="25%" width="50%" height="50%"&gt;
+     &lt;!-- drawing B goes here --&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;
+</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>
+&lt;text font-size="50"&gt;Text size is 50 user units&lt;/text&gt;
+</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>&lt;length&gt;</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>&nbsp;</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">&lt;transform&gt;</a>" | "none"</span></dt>
+    <dd>
+      <dl>
+        <dt><span class="attr-value"><a href="#TransformAttribute">&lt;transform&gt;</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>
+&lt;?xml version="1.0" standalone="yes"?&gt;
+&lt;svg width="4in" height="3in" version="1.1"
+     xmlns = 'http://www.w3.org/2000/svg'&gt;
+  &lt;defs&gt;
+    &lt;myapp:piechart xmlns:myapp="http://example.org/myapp"
+                    title="Sales by Region"&gt;
+      &lt;myapp:pieslice label="Northern Region" value="1.23"/&gt;
+      &lt;myapp:pieslice label="Eastern Region" value="2.53"/&gt;
+      &lt;myapp:pieslice label="Southern Region" value="3.89"/&gt;
+      &lt;myapp:pieslice label="Western Region" value="2.04"/&gt;
+      &lt;!-- Other private data goes here --&gt;
+    &lt;/myapp:piechart&gt;
+  &lt;/defs&gt;
+  &lt;desc&gt;This chart includes private data in another namespace
+  &lt;/desc&gt;
+  &lt;!-- In here would be the actual SVG graphics elements which
+       draw the pie chart --&gt;
+&lt;/svg&gt;
+</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">&lt;coordinate&gt;</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">&lt;coordinate&gt;</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">&lt;length&gt;</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">&lt;length&gt;</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>
+&lt;?xml version="1.0" standalone="yes"?&gt;
+&lt;svg width="4in" height="3in" version="1.1"
+ xmlns = 'http://www.w3.org/2000/svg'&gt;
+  &lt;desc&gt;This example uses the 'switch' element to provide a 
+        fallback graphical representation of an paragraph, if 
+        XMHTML is not supported.&lt;/desc&gt;
+  &lt;!-- The 'switch' element will process the first child element
+       whose testing attributes evaluate to true.--&gt;
+  &lt;switch&gt;
+    &lt;!-- Process the embedded XHTML if the requiredExtensions attribute
+         evaluates to true (i.e., the user agent supports XHTML
+         embedded within SVG). --&gt;
+    &lt;foreignObject width="100" height="50"
+                   requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML"&gt;
+      &lt;!-- XHTML content goes here --&gt;
+      &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
+        &lt;p&gt;Here is a paragraph that requires word wrap&lt;/p&gt;
+      &lt;/body&gt;
+    &lt;/foreignObject&gt;
+    &lt;!-- 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.--&gt;
+    &lt;text font-size="10" font-family="Verdana"&gt;
+      &lt;tspan x="10" y="10"&gt;Here is a paragraph that&lt;/tspan&gt;
+      &lt;tspan x="10" y="20"&gt;requires word wrap.&lt;/tspan&gt;
+    &lt;/text&gt;
+  &lt;/switch&gt;
+&lt;/svg&gt;
+</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 -->]]>]]&gt;<![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 -->]]>]]&gt;
+</pre>
+
+    <p