--- 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 <<a href="mailto:cam@mcc.id.au" class='url'>cam@mcc.id.au</a>></dd>
<dd>Doug Schepers, W3C <<a href="mailto:schepers@w3.org" class='url'>schepers@w3.org</a>></dd>
+ <dd>Dirk Schulze, Adobe Systems Inc. <<a href="mailto:dschulze@adboe.com" class='url'>dschulze@adobe.com</a>></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 & 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'><image></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'><image></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">‘xlink:href’</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">‘audio’</span></a>,
- <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/multimedia.html#AnimationElement"><span class="element-name">‘animation’</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">‘prefetch’</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">‘xhtml:link’</span>,
- <span class="element-name">‘xhtml:script’</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">‘a’</span> or
- <span class="element-name">‘map’</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">‘a’</span>
- element, such that a mouse event on that
- <span class="element-name">‘a’</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">‘object’</span>,
-<span class="element-name">‘iframe’</span>, and
-<span class="element-name">‘embed’</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">‘img’</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 – 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 @@
<myapp:pieslice label="Eastern Region" value="2.53"/>
<myapp:pieslice label="Southern Region" value="3.89"/>
<myapp:pieslice label="Western Region" value="2.04"/>
- <!-- Other private data goes here -->
+ <!_- Other private data goes here -_>
</myapp:piechart>
</defs>
<desc>This chart includes private data in another namespace</desc>
- <!-- In here would be the actual SVG graphics elements which
- draw the pie chart -->
+ <!_- In here would be the actual SVG graphics elements which
+ draw the pie chart -_>
</svg></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/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; }