First shot at simplifying SVG Integration.
authorCameron McCormack <cam@mcc.id.au>
Fri, 11 Apr 2014 01:14:53 +1000
changeset 655 fb27a036fff0
parent 654 52cad72e3144
child 656 c4a2bca84e81
First shot at simplifying SVG Integration.
specs/integration/master/Overview.html
specs/integration/master/definitions.xml
specs/integration/master/style/default_no_issues.css
specs/integration/master/style/default_no_maturity.css
specs/integration/master/style/default_svg.css
--- a/specs/integration/master/Overview.html	Thu Apr 10 17:16:14 2014 +0200
+++ b/specs/integration/master/Overview.html	Fri Apr 11 01:14:53 2014 +1000
@@ -2,7 +2,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
 <head>
-  <title>SVG Integration 1.0</title>
+  <title>SVG Integration</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <link rel="stylesheet" title="Default" type="text/css" href="style/default_svg.css"/>
   <link rel="alternate stylesheet" title="No issues/annotations" type="text/css" href="style/default_no_issues.css"/>
@@ -82,6 +82,8 @@
 #element-index dl, #element-index dt, #element-index dd { margin-top: 0; margin-bottom: 0; }
 #element-index ul, #element-index li { display: inline; margin: 0; padding: 0; }
 #element-index li::before { content: "\25cf  "; }
+
+div.issue { margin-top: 1em; }
   </style>
 <script>
 function overButton(event) {
@@ -117,7 +119,7 @@
 
 <div class="head">
   <p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
-  <h1 id="pagetitle">SVG Integration 1.0</h1>
+  <h1 id="pagetitle">SVG Integration</h1>
   <h2 id="pagesubtitle">W3C <edit:maturity/> <em><edit:date/></em></h2>
   <dl>
     <dt>This version:</dt>
@@ -132,7 +134,9 @@
     <dt>Public comments:</dt>
     <dd><a href="mailto:www-svg@w3.org" class='url'>www-svg@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/www-svg/">archive</a>)</dd>
     <dt class="top-editors">Editor:</dt>
+    <dd>Cameron McCormack, Mozilla Corporation &lt;<a href="mailto:cam@mcc.id.au" class='url'>cam@mcc.id.au</a>&gt;</dd>
     <dd>Doug Schepers, W3C &lt;<a href="mailto:schepers@w3.org" class='url'>schepers@w3.org</a>&gt;</dd>
+    <dd>Dirk Schulze, Adobe Systems Inc. &lt;<a href="mailto:dschulze@adboe.com" class='url'>dschulze@adobe.com</a>&gt;</dd>
   </dl>
   <edit:copyright/>
 </div>
@@ -141,16 +145,13 @@
 
 <h2 id="abstract">Abstract</h2>
 
-<p>The SVG Integration Module is intended as a guide to other markup
-and programming on how to best integrate SVG, within the context of
-that language's constraints. SVG may be integrated in whole or in part,
-and may be included in another language by reference or by inclusion
-(that is, through linking or inline). This specification contains
-normatively referenceable material, and discusses default behaviors
-and best practices, but is not intended to override the design of the
-referencing language.</p>
-
-<p>This specification contains references to other SVG specifications.</p>
+<p>This specification details requirements on how SVG documents must be
+processed when used in various contexts, such as CSS background images,
+HTML <span class='element-name'>'iframe'</span> elements, and so on.
+These requirements include which features are restricted or disabled,
+such as scripting and animation.  A number of referencing modes are defined,
+which other specifications that allow the embedding or referencing of
+SVG documents can normatively reference.</p>
 
 <h2 id="status">Status of This Document</h2>
 
@@ -200,6 +201,7 @@
 <a href="http://www.w3.org/TR/" class='url'>http://www.w3.org/TR/</a>. W3C publications
 may be updated, replaced, or obsoleted by other documents at any time.</p>
 
+<!--
 <h2 id="feedback" edit:toc="no">How to read this document and give feedback</h2>
 
 <p>This draft of SVG Integration introduces new normative prose for
@@ -211,6 +213,7 @@
 backwards compatible with older SVG User Agents, and the use of this
 syntax should be accompanied by a fallback using the <a>'switch'</a>
 element.</p>
+-->
 
 <h2 id="toc">Table of Contents</h2>
 
@@ -218,181 +221,339 @@
 
 <h2 id="intro">Introduction</h2>
 
-<p><em>Describe the technology and specification here.</em></p>
-
-<p>Note that even though this specification references parts of
-<a href="#ref-svg11">SVG 1.1</a> and <a href="#ref-svgt12">SVG Tiny 1.2</a>
-it does not require a complete implementation of those specifications.</p>
-
-<p>This document is normative.</p>
-
-<p>This document contains explicit conformance criteria that overlap
-with some RNG definitions in requirements. If there is any conflict
-between the two, the explicit conformance criteria are the definitive
-reference.</p>
-
-<h3 id="use-cases">Use Cases and Requirements</h3>
-
-<p><em>This section is informative.</em></p>
-
-<p>Here are some of the use cases and requirements for this specification.</p>
+<p><em>This section is non-normative.</em></p>
 
-<ul>
-  <li>must have clear tables that integrate all known SVG elements, attributes, attribute values, and methods</li>
-  <li>should link back to normative definitions for all the above</li>
-  <li>should be automated (derive lists from SVG 1.1, SVG Tiny 1.2, Vector Effects, Filters, Compositing, Transforms, etc. via script)</li>
-  <li>must be normatively referenceable, e.g. by HTML5, CSS, ODF, IPTV, and other languages where we expect SVG might be reused as a whole, or even referenced in part, as in the Widgets specs</li>
-  <li>should have revision history [1]</li>
-  <li>may have case-insensitive string equivalents [2]</li>
-  <li>must cover different embedding and referencing scenarios (may work with HTML &amp; CSS WGs here), with different expected capabilities</li>
-  <li>must explain how to extend SVG properly (copying the chapter from SVG Tiny 1.2) [4]</li>
-  <li>must address potential security issues (external references, circular references, that weird thing ROC brought up with pixel-sniffing)</li>
-  <li>must address passed in parameters, fragment identifiers, etc.</li>
-  <li>should cover other specific odds and ends with various elements</li>
-  <li>must address focus navigation across embedding boundaries</li>
-  <li>must address fragment identifiers behavior for compound documents</li>
-  <li>must address link traversal in compound documents</li>
-  <li>must discuss transparency and compositing</li>
-  <li>should discuss embedding size and dimensions (including script access to rendered dimensions)</li>
-  <li>may introduce new integration features</li>
-  <li>may define parameter defaulting syntax</li>
-  <li>may define or reference a data binding mechanism</li>
-</ul>
-
-<h2 id="referencing-modes">Referencing Modes for SVG</h2>
+<p>SVG is a vector graphics markup language used both for artwork and
+to create interactive, rich content applications.  In addition to being
+able to render graphical primitives such as shapes, text and images,
+SVG also supports a number of more complex features, including declarative
+animation, scripting using ECMAScript, and the ability to reference
+external resources.</p>
 
-<p>There are many different ways in which an external SVG file may be referenced
-in a host language.  These different scenarios are known as
-<dfn id="TermReferencingMode">referencing modes</dfn>,
-and each <a>referencing mode</a> is suited to a different set of
-constraints, in terms of security, performance optimization, intended usage,
-and legacy considerations.  Each <a>referencing mode</a> defines whether
-such features as script execution, external references, declarative animation,
-interactivity, and linking must or must not be supported.  Different
-<a>referencing modes</a> may be specified for different aspects of the same
-language, or a language may use a single <a>referencing mode</a>, depending on
-the complexity of the language.  A conforming User Agent must support the full
-feature set defined for each <a>referencing mode</a> for all languages that
-that User Agent supports, and must not permit behavior disallowed by the
-relevant <a>referencing mode</a>.  Where multiple <a>referencing modes</a> are
-permitted, authors should choose the most restricted <a>referencing modes</a>
-that meets their needs.</p>
+<p>For SVG to adhere to the security model of the Web platform, certain
+SVG features are required to be disabled depending on how the SVG document
+is being used.  For example, SVG documents referenced by an HTML
+<span class='element-name'>'img'</span> element are required to have
+scripting disabled.</p>
 
-<p>A DOM must be produced and maintained for SVG images using all
-<a>referencing modes</a> except <a href="#immediate_mode">Immediate Mode</a>,
-and the DOM must be exposed to Accessibility Technology User Agents.</p>
+<p>The primary purpose of this document, SVG Integration, is to define a number
+of <em>referencing modes</em> for SVG documents, which detail the requirements
+for processing an SVG document when it is used in a certain context.
+These requirements include the set of features that must be disabled,
+any user agent style sheet rules to apply, and more.</p>
 
-<p class="issue">Should we have an Immediate Mode?</p>
+<p>Normative requirements are given for contexts in other SVG documents,
+such as how an SVG <a>'image'</a> element must treat a referenced SVG
+documents.  Non-normative recommendations are given for other languages,
+including HTML and CSS, with the expectation that these other specifications
+will normatively reference the referencing mode definitions in this document.</p>
 
-<p class="issue">Should we talk about CORS here?</p>
+<div class="issue">
+  <p>There are other things we may wish to include in this document, including:</p>
+  <ul>
+    <li>Recommendations for how SVG can be used and responsibly extended in other,
+      non-Web markup languages.</li>
+    <li>Recommendations for how to embed data in SVG documents, and how
+      to use foreign namespace elements and attributes in SVG documents
+      using the XML serialization.</li>
+    <li>Requirements on how the sizing of SVG documents in CSS and other
+      contexts is performed.</li>
+    <li>Requirements on how the sizing of HTML content within <a>'foreignObject'</a>
+      elements is performed.</li>
+    <li>A table of all SVG elements, attributes and properties from all
+      published versions of SVG.</li>
+    <li>A table of element and attribute name case folding rules that can be
+      used by the HTML parser.</li>
+    <!-- from the old Use Cases and Requirements section:
+    <li>must address focus navigation across embedding boundaries</li>
+    <li>must address fragment identifiers behavior for compound documents</li>
+    <li>must address link traversal in compound documents</li>
+    <li>must discuss transparency and compositing</li>
+    <li>may define parameter defaulting syntax</li>
+    <li>may define or reference a data binding mechanism</li>
+    -->
+  </ul>
+</div>
 
+<h2 id="referencing-modes">Referencing modes</h2>
 
-<h3 id="definitions">Feature Definitions</h3>
+<p>There are various ways that an SVG document fragment can be
+referenced by or included in other documents and then as a consequence
+be processed by a user agent.  SVG documents can also be viewed as a
+top-level document.  Each different method by which an SVG document fragment
+can be used implies a certain set of requirements on how the SVG document
+fragment is to be processed.</p>
+
+<p>This section defines a number of <dfn id="referencing-mode">referencing
+modes</dfn> that encompass the different ways SVG document fragments can
+be used on the Web platform and which specify how the SVG document fragments must be
+processed.  Each referencing mode is defined by requiring the SVG document fragment
+be processed in a given <a href="#processing-mode">processing mode</a>.
+Processing modes are introduced in <a href="#processing-modes">section 3</a> below
+and define which features are enabled or disabled in the document.</p>
+
+<p class="note">This document does not place normative requirements on
+other specifications that can reference or include SVG documents, such as
+HTML and various CSS specifications.  The intention is for these other
+specifications to normatively point to the appropriate referencing mode
+from this document.</p>
+
+<p>The available <a href="#referencing-mode">referencing modes</a> are as follows:</p>
 
 <dl>
-  <dt><dfn id="def-declarative_animation">declarative animation</dfn></dt>
-  <dd>Declarative animation is a change or set of changes
-  to the presentation of the SVG image through the use of
-  predefined elements or properties, as with the animation elements
-  <a>'animate'</a>, <a>'set'</a>, etc., as
-  opposed to procedural script. Declarative animation may be triggered
-  by either a event timeline or by user-generated events (see
-  <a href="#def-interaction"><span class="svg-term">interaction</span></a>).
-  Because it has a bounded set of functionality, declarative animation may
-  pose less of a security risk than
-  <a href="#def-script_execution"><span class="svg-term">script execution</span></a>.
-  Complex animations may be computationally intensive, and thus may not be
-  suitable for all devices or <a>referencing modes</a>.</dd>
+  <dt><dfn id="top-level-document-mode">top-level document</dfn></dt>
+  <dd>
+    <p>This referencing mode is for SVG documents that are loaded as a top-level
+    document in a user agent.</p>
+    <p>SVG documents processed with the
+    <a href="#top-level-document-mode">top-level document</a>
+    <a href="#referencing-mode">referencing mode</a> must use the
+    <a href="#dynamic-interactive-mode">dynamic interactive</a>
+    <a href="#processing-mode">processing mode</a>.</p>
 
-  <dt><dfn id="def-external_reference">external reference</dfn></dt>
+    <p class="note">This referencing mode is intended to be used when
+    an SVG document is loaded in a browser's
+    <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#top-level-browsing-context">top-level browsing context</a>.</p>
+  </dd>
+
+  <dt><dfn id="embedded-document-mode">embedded document</dfn></dt>
   <dd>
-    <p>An external reference is any link from the current file to
-    another file for inclusion, rendering, or processing in the context
-    of the current file. In some situations, external references may
-    constitute a security concern; because it is difficult to detect
-    when the use of an external resource is safe and when it is not,
-    under secure circumstances, all external references should be
-    disabled, unless there is an appropriate security mechanism in place
-    (<span class="issue">CORS?</span>). External references include, but
-    are not limited to:</p>
+    <p>This referencing mode is for SVG documents that are externally referenced
+    and embedded for presentation in a host document.  SVG documents referenced by the
+    <a>'iframe'</a> element from SVG 2 or the
+    <a>'animation'</a> element from SVG Tiny 1.2 must use the
+    <a href="#embedded-document">embedded document</a>
+    <a href="#referencing-mode">referencing mode</a>.</p>
+
+    <p>SVG documents processed with the
+    <a href="#embedded-document-mode">embedded document</a>
+    <a href="#referencing-mode">referencing mode</a> must use the
+    <a href="#dynamic-interactive-mode">dynamic interactive</a>
+    <a href="#processing-mode">processing mode</a>.</p>
+
+    <p class="note">This referencing mode is intended to be used when
+    an SVG document is loaded in an HTML
+    <span class='element-name'>'embed'</span>,
+    <span class='element-name'>'iframe'</span> or
+    <span class='element-name'>'object'</span> element.</p>
+  </dd>
+
+  <dt><dfn id="animated-image-document-mode">animated image document</dfn></dt>
+  <dd>
+    <p>This referencing mode is for SVG documents that are used as images,
+    where the context would typically be expecting a raster image that can
+    animate.  SVG documents referenced by the SVG <a>'image'</a> element must
+    use the <a href="#animated-image-document-mode">animated image document</a>
+    <a href="#referencing-mode">referencing mode</a> if
+    the referencing SVG document is using the
+    <a href='#top-level-document-mode'>top-level document</a>,
+    <a href='#embedded-document-mode'>embedded document</a> or
+    <a href='#animated-image-document-mode'>animated image document mode</a>.</p>
+
+    <p>SVG documents processed with the
+    <a href="#animated-image-document-mode">animated image document</a>
+    <a href="#referencing-mode">referencing mode</a> must use the
+    <a href="#secure-animated-mode">secure animated</a>
+    <a href="#processing-mode">processing mode</a>.</p>
+
+    <p class="note">This referencing mode is intended to be used when
+    an SVG document is referenced by an HTML
+    <span class='element-name'>'img'</span> element or
+    by any CSS property that takes an
+    <a href='http://www.w3.org/TR/css3-values/#images'>&lt;image&gt;</a>
+    value, and if animations can be run.</p>
+  </dd>
+
+  <dt><dfn id="static-image-document-mode">static image document</dfn></dt>
+  <dd>
+    <p>This referencing mode is for SVG documents that are used as images,
+    where the context would typically be expecting a raster image but where
+    animations are unable to run.  SVG documents
+    referenced by the SVG <a>'image'</a> element must use the
+    <a href="#static-image-document-mode">static image document</a>
+    <a href="#referencing-mode">referencing mode</a> if
+    the referencing SVG document is using the
+    <a href='#static-image-document-mode'>static image document mode</a>.</p>
+
+    <p>SVG documents processed with the
+    <a href="#static-image-document-mode">static image document</a>
+    <a href="#referencing-mode">referencing mode</a> must use the
+    <a href="#secure-static-mode">secure static</a>
+    <a href="#processing-mode">processing mode</a>.</p>
+
+    <p class="note">This referencing mode is intended to be used when
+    an SVG document is referenced by an HTML
+    <span class='element-name'>'img'</span> element or
+    by any CSS property that takes an
+    <a href='http://www.w3.org/TR/css3-values/#images'>&lt;image&gt;</a>
+    value, and if animations cannot be run.</p>
+  </dd>
+
+  <dt><dfn id="resource-document-mode">resource document</dfn></dt>
+  <dd>
+    <p>This referencing mode is for SVG documents that are loaded
+    as resource documents in order to use their <a>'mask element'</a>,
+    <a>'pattern element'</a>, gradient, or other resource elements.
+    SVG documents loaded due to a reference to an external document from any
+    of the following features must use the 
+    <a href="#resource-document-mode">resource document</a>
+    <a href="#referencing-mode">referencing mode</a>:</p>
 
     <ul>
-      <li><span class="attr-name">&#x2018;xlink:href&#x2019;</span> attribute
-      targets for elements, such as <a>'image'</a>, <a>'use'</a>,
-      <a>'feImage'</a>, <a>'tref'</a>, <a>'video'</a>
-      <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/multimedia.html#AudioElement"><span class="element-name">&#x2018;audio&#x2019;</span></a>,
-      <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/multimedia.html#AnimationElement"><span class="element-name">&#x2018;animation&#x2019;</span></a>,
-      <a>'font-face-uri'</a>, <a>'textPath'</a>, <a>'mpath'</a>,
-      <a>'script'</a>, <a>'cursor element'</a>, <a>'altGlyph'</a>, <a>'glyphRef'</a>,
-      <a>'color-profile element'</a>, <a>'foreignObject'</a>,
-      <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/struct.html#PrefetchElement"><span class="element-name">&#x2018;prefetch&#x2019;</span></a></li>
-
-      <li>external stylesheets (XSL or CSS)</li>
+      <li>the <a>'clip-path'</a>, <a>'cursor property'</a>, <a>'fill'</a>,
+      <a>'filter property'</a> <a>'stroke'</a>, <a>'marker-mid'</a>,
+      <a>'marker-start'</a>, <a>'marker-end'</a> and <a>'mask property'</a>
+      properties</li>
 
-      <li>external references for CSS properties: <a>'fill'</a>,
-      <a>'stroke'</a>, <a>'mask property'</a>, <a>'marker property'</a>, <a>'marker-mid'</a>,
-      <a>'marker-start'</a>, <a>'marker-end'</a>, <a>'clip-path'</a>,
-      <a>'filter property'</a></li>
-
-      <li>CSS @import rule</li>
+      <li>the <a>'altGlyph'</a>, <a>'cursor element'</a>, <a>'feImage'</a>,
+      <a>'filter element'</a>, <a>'linearGradient'</a>, <a>'mpath'</a>,
+      <a>'pattern'</a>, <a>'radialGradient'</a>, <a>'textPath'</a>,
+      <a>'tref'</a> and <a>'use'</a> elements</li>
+    </ul>
 
-      <li>@font-face with external src</li>
+    <p>SVG documents processed with the
+    <a href="#resource-document-mode">resource document</a>
+    <a href="#referencing-mode">referencing mode</a> must use the
+    <a href="#secure-animated-mode">secure animated</a>
+    <a href="#processing-mode">processing mode</a>.</p>
 
-      <li><a>'foreignObject'</a> may contain external resources (depends on
-      the content inside, for html e.g. iframe, object etc)</li>
-
-      <li>elements in other namespaces that load external resources (e.g.
-      <span class="element-name">&#x2018;xhtml:link&#x2019;</span>,
-      <span class="element-name">&#x2018;xhtml:script&#x2019;</span>, etc)</li>
-    </ul>
+    <p class='issue'>Should animations run in the resource document?</p>
   </dd>
 
-  <dt><dfn id="def-link_traversal">link traversal</dfn></dt>
-  <dd>Link traversal refers to changing of the user agent's
-  current active document view by user activation of a hyperlink.
-  In the context of <a>referencing modes</a>, link traversal
-  only pertains to hyperlinks defined within the referenced SVG
-  file. A host language may allow all or part of an SVG image to
-  serve as a link in the host language's context and using that
-  language's conventions and mechanisms, such as using HTML's
-  <span class="element-name">&#x2018;a&#x2019;</span> or
-  <span class="element-name">&#x2018;map&#x2019;</span> elements.</dd>
+  <dt><dfn id="font-document-mode">font document</dfn></dt>
+  <dd>
+    <p>This referencing mode is for SVG documents that are being used
+    to define font glyphs.</p>
 
-  <dt><dfn id="def-script_execution">script execution</dfn></dt>
-  <dd>Script execution is the processing and application of
-  procedural (as opposed to declarative) code and events. Where a
-  <a>referencing mode</a> does not allow script execution, this
-  prohibition must apply to scripted events or changes to the SVG
-  DOM whether the script is contained inside the referenced SVG file
-  or in the host language file. In the context of
-  <a>referencing modes</a>, script execution only pertains to the DOM of
-  the SVG image, not to events or changes to the host language's DOM.
-  For example, an SVG image would act the same as a PNG image in
-  an HTML <span class="element-name">&#x2018;a&#x2019;</span>
-  element, such that a mouse event on that
-  <span class="element-name">&#x2018;a&#x2019;</span> element would fire and
-  bubble up the HTML DOM, but would not be available to a script in the
-  SVG DOM.</dd>
+    <p>SVG documents processed with the
+    <a href="#font-document-mode">font document</a>
+    <a href="#referencing-mode">referencing mode</a> must use the
+    <a href="#secure-animated-mode">secure animated</a>
+    <a href="#processing-mode">processing mode</a>.</p>
 
-  <dt><dfn id="def-interaction">interaction</dfn></dt>
-  <dd>Interaction means receiving and processing user-generated events,
-  such as mouse or keyboard activity. Where a <a>referencing mode</a>
-  does not allow interactivity, such as for performance or security
-  reasons, the interactivity is prohibited in the SVG DOM only, and may
-  trigger events normally in the the host language's context.</dd>
+    <p>Additionally, SVG documents processed with the 
+    <a href="#font-document-mode">font document</a>
+    <a href="#referencing-mode">referencing mode</a> must apply the
+    following user agent style sheet:</p>
+
+    <pre style="background-color: #eee; padding: 0.5em">@namespace svg url(http://www.w3.org/2000/svg);
+
+svg|text, svg|foreignObject {
+  display: none !important;
+}
+
+:root {
+  fill: context-fill;
+  fill-opacity: context-fill-opacity;
+  stroke: context-stroke;
+  stroke-opacity: context-stroke-opacity;
+  stroke-width: context-value;
+  stroke-dasharray: context-value;
+  stroke-dashoffset: context-value;
+}</pre>
+    <p class="note">This referencing mode is intended to used by the
+    OpenType specification for processing documents from the "SVG"
+    table.</p>
+    <p class="issue">Should the CSS Variables that map the palette
+    colors into the document be defined here too?  It probably makes
+    sense to keep that in the OpenType specification.</p>
+  </dd>
 </dl>
 
-<h3 id="dynamic_interactive_mode">Dynamic Interactive Mode</h3>
+<p>SVG document fragments that are included inline in a host document
+use a <a href='#referencing-mode'>referencing mode</a> that matches
+that of the host document.  SVG document fragments included as
+children of an SVG <a>'foreignObject'</a> element must use the
+<a href='#referencing-mode'>referencing mode</a> of the referencing
+SVG document.</p>
 
-<p>This <a>referencing mode</a> imposes no restrictions on any
-feature of the SVG language. This is the <a>referencing mode</a>
-that must be used for standalone SVG files in normal circumstances.
-This specification recommends that this <a>referencing mode</a>
-apply to those elements that are referred to in HTML5 as a
-<a href="http://www.w3.org/TR/html5/browsers.html#browsing-context">browsin g context</a>,
-such as the <span class="element-name">&#x2018;object&#x2019;</span>,
-<span class="element-name">&#x2018;iframe&#x2019;</span>, and
-<span class="element-name">&#x2018;embed&#x2019;</span> elements.</p>
+<p class='note'>For example, if an SVG document is being used in
+<a href='#animated-image-document-mode'>animated image document mode</a>
+due to being referenced by an HTML <a>'image'</a> element, then any
+inline SVG fragment that is a child of a <a>'foreignObject'</a> element
+within that document is also processed using 
+<a href='#animated-image-document-mode'>animated image document mode</a>.</p>
+
+
+<h2 id="processing-modes">Processing modes</h2>
+
+<p>This section defines a number of <dfn id="processing-mode">processing modes</dfn>
+for SVG documents.  Each processing mode specifies whether certain high level
+SVG features are enabled.</p>
+
+<h3 id="features">Features</h3>
+
+<p>The features that can be enabled or disabled depending
+on the processing mode are as follows:</p>
+
+<dl>
+  <dt>declarative animation</dt>
+  <dd>
+    <p>Declarative animation includes both the SMIL animation elements in SVG –
+    <a>'animate'</a>, <a>'animateColor'</a>, <a>'animateMotion'</a>,
+    <a>'animateTransform'</a> and <a>'set'</a> – and CSS Transitions and Animations.
+    When declarative animations are disabled in an SVG document, any SMIL
+    animations or CSS Transitions or Animations must not be applied or run.</p>
+    <p class='note'>This is not the same as pausing the document's animated
+    state at 0s document time; if a SMIL animation is defined to begin at 0s,
+    it still will not be applied.</p>
+  </dd>
+
+  <dt>external references</dt>
+  <dd>
+    <p>External references are URLs specified when using any of the following
+    SVG features, where any of the URL's components, ignoring the fragment,
+    do not match the document's URL:</p>
+    <ul>
+      <li>the <a>'clip-path'</a>, <a>'cursor property'</a>, <a>'fill'</a>,
+      <a>'filter property'</a> <a>'stroke'</a>, <a>'marker-mid'</a>,
+      <a>'marker-start'</a>, <a>'marker-end'</a> and <a>'mask property'</a>
+      properties</li>
+
+      <li>the <a>'altGlyph'</a>, <a>'audio'</a>, <a>'color-profile element'</a>,
+      <a>'cursor element'</a>, <a>'feImage'</a>, <a>'filter element'</a>,
+      <a>'font-face-uri'</a>, <a>'foreignObject'</a>, <a>'glyphRef'</a>,
+      <a>'image'</a>, <a>'linearGradient'</a>, <a>'mpath'</a>, <a>'pattern'</a>,
+      <a>'radialGradient'</a>, <a>'script'</a>, <a>'textPath'</a>,
+      <a>'tref'</a>, <a>'use'</a> and <a>'video'</a> elements</li>
+
+      <li>any other network requests made by script, HTML, CSS or other
+      Web platform features used in the document</li>
+    </ul>
+    <p>When external references are disabled in an SVG document, any attempt to
+    fetch a document through an external reference must instead be treated as
+    if a network error occurred and no data was received.</p>
+    <p class='issue'>This is all too handwavy.  And we perhaps shouldn't try
+    to make an exhaustive list.  This needs to be defined in
+    terms of Fetch, probably.  And the URL Standard for comparing the URLs.</p>
+  </dd>
+
+  <dt>script execution</dt>
+  <dd>
+    <p>Script execution is the execution of any SVG <a>'script'</a> elements,
+    script found in event listener attributes (such as <a>'onclick'</a> on 
+    SVG elements), or any other script defined by other Web platform features
+    used in the document such as any HTML <a>'script'</a> elements.
+    When script execution is disabled in an SVG document, no script in the
+    document must be run.</p>
+  </dd>
+
+  <dt>interaction</dt>
+  <dd>
+    <p>Interaction refers to the delivery of DOM Events or the invocation of
+    any user agent specific UI behaviors such as text selection, focus changing,
+    link traversal, or animation or transition triggering that is done in
+    response to user input such as mouse or keyboard activity.  When
+    interaction is disabled in an SVG document, any user input events that would
+    be targetted at the document or any elements within the document must have
+    no effect.</p>
+  </dd>
+</dl>
+
+<h3 id="dynamic-interactive-mode">Dynamic interactive Mode</h3>
+
+<p>This <a>processing mode</a> imposes no restrictions on any
+feature of the SVG language.</p>
 
 <table class="features" border="0" cellpadding="2" cellspacing="2">
   <thead>
@@ -417,25 +578,20 @@
       <th>interactivity</th>
       <td>yes</td>
     </tr>
-    <tr>
-      <th>link traversal</th>
-      <td>yes</td>
-    </tr>
   </tbody>
 </table>
 
-<h3 id="animated_mode">Animated Mode</h3>
+<h3 id="animated-mode">Animated mode</h3>
 
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance may be an issue, where there are limited security
-concerns, or where image support has traditionally been limited
-to raster images (such as JPEG or PNG), but where animation is
-desired. Animated mode allows declarative animation, but permits
-no script execution, interactivity, or link traversal. This is
-the <a>referencing mode</a> that must be supported for the SVG
-<a>'image'</a> element and is recommended to apply to the HTML
-<span class="element-name">&#x2018;img&#x2019;</span> element and for
-use as a Widget icon.</p>
+<p>This <a>processing mode</a> is intended for circumstances where
+an SVG document is to be used as an animated image that is allowed
+to resolve external references, but which is not intended to be used
+as an interactive document.</p>
+
+<p class='note'>Note that this <a>processing mode</a> is not used
+by any of the <a>referencing modes</a> defined in this specification.</p>
+
+<p class='issue'>Should we remove this processing mode?</p>
 
 <table class="features" border="0" cellpadding="2" cellspacing="2">
   <thead>
@@ -460,21 +616,17 @@
       <th>interactivity</th>
       <td>no</td>
     </tr>
-    <tr>
-      <th>link traversal</th>
-      <td>no</td>
-    </tr>
   </tbody>
 </table>
 
-<h3 id="secure_animated_mode">Secure Animated Mode</h3>
+<h3 id="secure-animated-mode">Secure animated mode</h3>
 
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance may be an issue, where there are strict security concerns,
-or where image support has traditionally been limited to raster images
-(such as JPEG or PNG), but where animation is desired. Secure animated
-mode allows declarative animation, but permits no script execution,
-external references, interactivity, or link traversal.</p>
+<p>This <a>processing mode</a> is intended for circumstances where
+an SVG document is to be used as an animated image that is not allowed
+to resolve external references, and which is not intended to be used
+as an interactive document.  This mode might be used where image support
+has traditionally been limited to raster images (such as JPEG, PNG and
+GIF).</p>
 
 <table class="features" border="0" cellpadding="2" cellspacing="2">
   <thead>
@@ -499,20 +651,20 @@
       <th>interactivity</th>
       <td>no</td>
     </tr>
-    <tr>
-      <th>link traversal</th>
-      <td>no</td>
-    </tr>
   </tbody>
 </table>
 
-<h3 id="static_mode">Static Mode</h3>
+<h3 id="static-mode">Static mode</h3>
 
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance may be an issue, or where there are limited security
-concerns. Static mode permits no script execution, declarative
-animation, interactivity, or link traversal. This is the
-<a>referencing mode</a> that is recommended to apply to CSS background images.</p>
+<p>This <a>processing mode</a> is intended for circumstances where
+an SVG document is to be used as a non-animated image that is allowed
+to resolve external references, but which is not intended to be used
+as an interactive document.</p>
+
+<p class='note'>Note that this <a>processing mode</a> is not used
+by any of the <a>referencing modes</a> defined in this specification.</p>
+
+<p class='issue'>Should we remove this processing mode?</p>
 
 <table class="features" border="0" cellpadding="2" cellspacing="2">
   <thead>
@@ -537,19 +689,17 @@
       <th>interactivity</th>
       <td>no</td>
     </tr>
-    <tr>
-      <th>link traversal</th>
-      <td>no</td>
-    </tr>
   </tbody>
 </table>
 
-<h3 id="secure_static_mode">Secure Static Mode</h3>
+<h3 id="secure-static-mode">Secure static mode</h3>
 
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance may be an issue, or where there are strict security
-concerns. Secure static mode permits no script execution, external
-references, declarative animation, interactivity, or link traversal.</p>
+<p>This <a>processing mode</a> is intended for circumstances where
+an SVG document is to be used as a non-animated image that is not allowed
+to resolve external references, and which is not intended to be used
+as an interactive document.  This mode might be used where image support
+has traditionally been limited to non-animated raster images (such as JPEG
+and PNG.)</p>
 
 <table class="features" border="0" cellpadding="2" cellspacing="2">
   <thead>
@@ -574,56 +724,14 @@
       <th>interactivity</th>
       <td>no</td>
     </tr>
-    <tr>
-      <th>link traversal</th>
-      <td>no</td>
-    </tr>
-  </tbody>
-</table>
-
-<h3 id="immediate_mode">Immediate Mode</h3>
-
-<p>This <a>referencing mode</a> is intended for circumstances where
-performance is a major concern. Immediate mode permits no script
-execution, external references, declarative animation, interactivity,
-or link traversal. In addition, a User Agent may to discard the DOM
-representation from memory after rendering. This is only to be used
-in extreme circumstances, as it severely limits the usability and
-accessibility of SVG. <span class="issue">Should we have an Immediate
-Mode?</span></p>
-
-<table class="features" border="0" cellpadding="2" cellspacing="2">
-  <thead>
-    <tr>
-      <th colspan="2">Immediate Features</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th>script execution</th>
-      <td>no</td>
-    </tr>
-    <tr>
-      <th>external references</th>
-      <td>no</td>
-    </tr>
-    <tr>
-      <th>declarative animation</th>
-      <td>no</td>
-    </tr>
-    <tr>
-      <th>interactivity</th>
-      <td>no</td>
-    </tr>
-    <tr>
-      <th>link traversal</th>
-      <td>no</td>
-    </tr>
   </tbody>
 </table>
 
 <h3 id="examples">Examples</h3>
 
+<p><em>This section is non-normative.</em></p>
+
+<div class="example">
 <p>Below are various methods of embedding SVG in an HTML page by
 reference. Each <a>referencing mode</a> element should display a yellow
 smiley face. In each example below, clicking on the eyes tests link
@@ -666,16 +774,16 @@
     </tr>
   </tbody>
 </table>
-
-<h2 id="foreign-content">Foreign Content in SVG</h2>
+</div>
 
-<p>SVG is designed to be used as a standalone format, or in combination with
-other formats such as X/HTML.  These different formats can be used in SVG, by
-reference or by inclusion (inline), as with the
-<a>'foreignObject'</a> element described in
-<a href="http://www.w3.org/TR/SVGTiny12/extend.html#ForeignObjectElement">embedding foreign object types</a>.</p>
+<h2 id="foreign-content">Embedding foreign content in SVG</h2>
 
-<h3 id="foreignobject">The <span class="element-name">'foreignObject'</span> Element</h3>
+<p>The SVG <a>'foreignObject'</a> element is an extension point that
+can be used to include document fragments from other languages to
+be rendered in an SVG document.  This section defines how HTML and
+SVG elements are handled as children of <a>'foreignObject'</a>.</p>
+
+<h3 id="foreign-content-html">Using HTML in <span class='element-name'>'foreignObject'</span></h3>
 
 <p>When <a>'foreignObject'</a> is used to contain content which is styled by
 CSS, the viewport establishes the initial containing block (as defined in CSS
@@ -691,34 +799,18 @@
   <span class="element-name">'div'</span> element with those dimensions.</p>
 </div>
 
-<p class="issue">@@ What should we say about when to rasterize the
+<p class="issue">What should we say about when to rasterize the
 foreign content? In existing implementations, HTML form controls in
-'foreignObject' often look pixelated</p>
+<a>'foreignObject'</a> often look pixelated.</p>
 
-<p class="issue">@@ Add examples of HTML in foreignObject, by reference
+<p class="issue">Add examples of HTML in foreignObject, by reference
 and inline.</p>
 
-<p class="issue">@@ Link to CDR\WICD specs.</p>
-
-<h2 id="inline-svg">SVG in Foreign Content</h2>
-
-<p>SVG is designed to be used as a standalone format, or in combination
-with other formats such as X/HTML. SVG can be used in these different
-formats, by reference or by inclusion (inline).</p>
+<h3 id="foreign-content-svg">Using SVG in <span class='element-name'>'foreignObject'</span></h3>
 
-<p>When used as a reference, SVG content falls into one of the
-categories detailed in <a href="referencing_modes">Referencing Modes
-for SVG</a>. When used as inline, SVG must be used with the constraints
-established by that host language (such as HTML5).</p>
+<p class='issue'>TODO</p>
 
-<p class="issue">@@ Add examples of referenced and inline SVG.</p>
-
-<p class="issue">@@ Give details about
-<a href="http://www.w3.org/TR/SVGTiny12/linking.html#AElementTargetAttribute" title="Linking &#x2013; SVG Tiny 1.2">link target keywords</a>
-in inline and referenced modes.</p>
-
-<p class="issue">@@ Link to CDR\WICD specs.</p>
-
+<!--
 <h2 id="extend">Extending SVG</h2>
 
 <h3 id="ConformingSVGExtensions">Extension conformance requirements</h3>
@@ -757,14 +849,14 @@
 
 <p>Extension elements in the SVG namespace must not be used.</p>
 
-<p>Additionally, SVG allows inclusion of attributes from
-foreign namespaces on any 
-<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermSVGElement"><span class="svg-term">SVG element</span></a>.
-Extensions of SVG-namespaced elements in the form of attributes must be bound to 
-a namespace by a prefix.  Any unbound attributes not defined by an SVG
-specification must be treated as unknown attributes.  The SVG user 
-agent must include unknown attributes in the DOM, but may
-otherwise ignore unknown attributes.  Attributes bound to a foreign
+<p>Additionally, SVG allows inclusion of attributes from foreign namespaces
+on any SVG element.
+Extensions of SVG-namespaced elements in the form of attributes must be
+in a namespace other than the SVG namespace.  Any attributes which are not
+in a namespace and which are not defined by an SVG specification must be
+treated as unknown attributes.  The SVG user agent must include unknown
+attributes in the DOM, but may otherwise ignore unknown attributes.
+Attributes bound to a foreign
 namespace may extend the semantics or behavior of SVG elements
 in user agents that support that foreign namespace.</p>
 
@@ -810,15 +902,15 @@
       &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;!_- 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;!_- In here would be the actual SVG graphics elements which
+       draw the pie chart -_&gt;
 &lt;/svg&gt;</pre>
   </div>
 </div>
@@ -854,6 +946,7 @@
 or elements not included in the <a>rendering tree</a> through use of 
 <a>conditional processing attributes</a>.</p>
 
+
 <h2 id="svg-tokens">SVG Elements, Attributes, and Properties</h2>
 
 <p>This is a comprehensive list of all SVG elements from the SVG 1.1 [SVG11]
@@ -1099,6 +1192,8 @@
 available at this time. They have not yet been integrated into a functional
 schema. The individual RNG files are available <a href="rng">here</a>.</p>
 
+-->
+
 <h2 id="refs">References</h2>
 
 <h3 id="normrefs">Normative References</h3>
@@ -1122,6 +1217,13 @@
   World Wide Web Consortium, 22 December 2008.
   <br />This edition of SVG Tiny 1.2 is http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/.
   <br />The <a href="http://www.w3.org/TR/SVGTiny12/">latest edition of SVG Tiny 1.2</a> is available at http://www.w3.org/TR/SVGTiny12/.</dd>
+
+  <dt id="ref-SVG2"><strong class="normref">[SVG2]</strong></dt>
+  <dd><cite class="w3cwd"><a href="http://www.w3.org/TR/2014/WD-SVG2-20140211/">Scalable Vector Graphics (SVG) 2</a></cite>,
+  N. Anrdronikos, T. Bah, B. Birtles, C. Concolato, E. Dahlström, C. Lilley, C. McCormack, D. Schepers, D. Schulze, R. Schwerdtfeger, S. Takagi, J. Watt, eds.
+  World Wide Web Consortium, 11 February 2014.
+  <br />This edition of SVG 2 is http://www.w3.org/TR/2014/WD-SVG2-20140211/.
+  <br />The <a href="http://www.w3.org/TR/SVG2/">latest edition of SVG 2</a> is available at http://www.w3.org/TR/SVG2/.</dd>
 </dl>
 
 <h3 id="informrefs">Informative References</h3>
--- a/specs/integration/master/definitions.xml	Thu Apr 10 17:16:14 2014 +0200
+++ b/specs/integration/master/definitions.xml	Fri Apr 11 01:14:53 2014 +1000
@@ -6,8 +6,10 @@
 
   <!-- ... -->
 
-  <term name='referencing mode' href='#TermReferencingMode'/>
-  <term name='referencing modes' href='#TermReferencingMode'/>
+  <term name='processing mode' href='#processing-mode'/>
+  <term name='processing modes' href='#processing-mode'/>
+  <term name='referencing mode' href='#referencing-mode'/>
+  <term name='referencing modes' href='#referencing-mode'/>
 
   <!-- === defined in other specifications ================================ -->
 
--- a/specs/integration/master/style/default_no_issues.css	Thu Apr 10 17:16:14 2014 +0200
+++ b/specs/integration/master/style/default_no_issues.css	Fri Apr 11 01:14:53 2014 +1000
@@ -2,7 +2,7 @@
  * Turns off issues and annotations.
  */
 
-@import url(default_svg.css);
+@import url(default_no_maturity.css);
 
 p.issue, div.issue, p.annotation, div.annotation {
 	display:none;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/specs/integration/master/style/default_no_maturity.css	Fri Apr 11 01:14:53 2014 +1000
@@ -0,0 +1,23 @@
+@import url(default_svg.css);
+
+body, h1, h2, h3 {
+    background-color: white ! important;
+}
+
+body.ready-for-wg-review,
+h1.ready-for-wg-review,
+h2.ready-for-wg-review,
+h3.ready-for-wg-review,
+.ready-for-wg-review > h1,
+.ready-for-wg-review > h2,
+.ready-for-wg-review > h3,
+.ready-for-wg-review {
+    background-color: white ! important;
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+p.annotation, div.annotation { display: none }
+div.annotation.svg2-requirement { display: block }
--- a/specs/integration/master/style/default_svg.css	Thu Apr 10 17:16:14 2014 +0200
+++ b/specs/integration/master/style/default_svg.css	Fri Apr 11 01:14:53 2014 +1000
@@ -84,6 +84,7 @@
 
 /*.element-summary { background: #d9e8ff; padding: 1em; margin-top: 1em }*/
 .element-summary-name { float: right; font-size: 110% }
+.element-summary-name dfn { font-style: normal; }
 .element-summary dl, .element-summary dt { margin-top: 0; margin-bottom: 0; }
 .element-summary * + dt { margin-top: 0.5em; }
 .element-summary dd { margin-top: 0; }
@@ -100,6 +101,7 @@
 pre.idl, pre.dtd-fragment { color: black; padding: 1em; margin-top: 1em; margin-left: 0; font-size: 1em; overflow: auto; font-size: 14px }
 pre.idl { background: #d9e8ff }
 pre.idl a:link, pre.idl a:visited { color: black; }
+pre.idl .comment { color: #005A9C; }
 
 dl.interface dt {
   margin-top: 1em;
@@ -255,6 +257,68 @@
 /* Make issue and example counters work correctly. */
 body { counter-reset: exampleno figure issue example; }
 
+/*
+ * Temporary styles for use only while the spec is in development:
+ */
+
+body, h1, h2, h3 {
+    /* mark everything as not yet reviewed */
+    background-color: #FFEEEE ! important;
+}
+
+body.ready-for-wg-review,
+h1.ready-for-wg-review,
+h2.ready-for-wg-review,
+h3.ready-for-wg-review,
+.ready-for-wg-review > h1,
+.ready-for-wg-review > h2,
+.ready-for-wg-review > h3,
+.ready-for-wg-review {
+    background-color: #FBFBB6 ! important;
+}
+
+body.ready-for-wg-review,
+h1.ready-for-wg-review,
+h2.ready-for-wg-review,
+h3.ready-for-wg-review,
+.ready-for-wg-review > h1,
+.ready-for-wg-review > h2,
+.ready-for-wg-review > h3,
+div.ready-for-wg-review {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
+.chapter-Overview,
+.chapter-Overview h1,
+.chapter-Overview h2,
+.chapter-Overview h3,
+body.ready-for-wider-review,
+h1.ready-for-wider-review,
+h2.ready-for-wider-review,
+h3.ready-for-wider-review,
+.ready-for-wider-review > h1,
+.ready-for-wider-review > h2,
+.ready-for-wider-review > h3,
+.ready-for-wider-review {
+    background-color: white ! important;
+}
+
+h1.ready-for-wider-review,
+h2.ready-for-wider-review,
+h3.ready-for-wider-review,
+.ready-for-wider-review > h1,
+.ready-for-wider-review > h2,
+.ready-for-wider-review > h3,
+div.ready-for-wider-review {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
 .svg2-requirement table { border-collapse: collapse; width: 100% }
 .svg2-requirement table th { font-weight: normal; font-style: italic; padding-right: 1em; white-space: nowrap; width: 1px }
 .svg2-requirement tr:first-child td,
@@ -310,6 +374,15 @@
 table.propdef.attrdef th:first-child + th + th + th,
 table.propdef.attrdef td:first-child + td + td + td { width: 6em; padding-right: 0 !important }
 
+ol.algorithm ol {
+  border-left: 1px solid #90b8de;
+  margin-left: 1em;
+}
+ol.algorithm ol.algorithm {
+  border-left: none;
+  margin-left: 0;
+}
+
 /* HTML5-like switch statements. */
 dl.switch > dd > ol.only {
   margin-left: 0;
@@ -335,3 +408,51 @@
   text-align: right;
   line-height: 0.5em;
 }
+
+table.vert {
+  border-collapse: collapse;
+  border-top: 2px solid #005a9c;
+  border-bottom: 2px solid #005a9c;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: auto;
+  margin-right: auto;
+}
+table.vert td {
+  background: #f0f6ff;
+}
+table.vert th {
+  text-align: left;
+  vertical-align: bottom;
+  border-bottom: 2px solid #005a9c;
+  white-space: nowrap;
+  color: #d9e8ff;
+  background: #005a9c;
+}
+table.vert.compact { font-size: 90% }
+table.vert.compact td, table.vert.compact th { padding: 2px 8px }
+table.vert th a:link,
+table.vert th a:visited { color: #d9e8ff; }
+table.vert th a:hover { color: black; }
+table.vert th, table.vert td { padding: 0.5em 0.75em; }
+table.vert th .attr-name { color: white }
+table.vert th a:hover .element-name { color: #2A2AA5 }
+table.vert th .prop-name { color: white }
+table.vert th a:hover .element-name { color: black }
+table.vert th .element-name { color: white }
+table.vert th a:hover .element-name { color: #A52A2A }
+table.vert td { vertical-align: top; border-top: 1px solid #005a9c; border-top-color: rgb(127, 172, 206) } 
+table.offset { margin-left: 2em; margin-right: 2em; }
+table.graph > tbody > tr > td { vertical-align: top }
+table.graph > tbody > tr > td { padding-right: 1em }
+.indented {
+  margin-left: 2em;
+}
+.math var, .math sub, .math sup {
+  font-family: serif;
+}
+.separated {
+  word-spacing: 1em;
+}
+
+.definitions > dt > dfn { font-style: normal; }