Scalable Vector Graphics (SVG) 2

Acknowledgments

The SVG Working Group would like to thank the following people for contributing to this specification with patches or by participating in discussions that resulted in changes to the document: David Dailey, Eric Eastwood, Jarek Foksa, Daniel Holbert, Paul LeBeau, Robert Longson, Henri Manson, Ms2ger, Kari Pihkala, Philip Rogers, David Zbarsky.

In addition, the SVG Working Group would like to acknowledge the contributions of the editors and authors of the previous versions of SVG – as much of the text in this document derives from these earlier specifications – including:

• Patrick Dengler, Microsoft Corporation (Version 1.1 Second Edition)
• Jon Ferraiolo, ex Adobe Systems (Versions 1.0 and 1.1 First Edition; until 10 May 2006)
• Anthony Grasso, ex Canon Inc. (Version 1.1 Second Edition)
• Dean Jackson, ex W3C (Version 1.1 First Edition; until February 2007)
• 藤沢 淳 (FUJISAWA Jun), Canon Inc. (Version 1.1 First Edition)

Finally, the SVG Working Group would like to acknowledge the great many people outside of the SVG Working Group who help with the process of developing the SVG specifications. These people are too numerous to list individually. They include but are not limited to the early implementers of the SVG 1.0 and 1.1 languages (including viewers, authoring tools, and server-side transcoders), developers of SVG content, people who have contributed on the www-svg@w3.org and svg-developers@yahoogroups.com email lists, other Working Groups at the W3C, and the W3C Team. SVG 1.1 is truly a cooperative effort between the SVG Working Group, the rest of the W3C, and the public and benefits greatly from the pioneering work of early implementers and content developers, feedback from the public, and help from the W3C team.

1. Introduction

1.1. About SVG

This specification defines the features and syntax for Scalable Vector Graphics (SVG).

SVG is a language for describing two-dimensional graphics. As a standalone format or when mixed with other XML, it uses the XML syntax [xml]. SVG code used inside HTML documents uses the HTML syntax [HTML]. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.

SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (i.e., by embedding SVG animation elements in SVG content) or via scripting.

Sophisticated applications of SVG are possible by use of a supplemental scripting language which accesses SVG Document Object Model (DOM), which provides complete access to all elements, attributes and properties. A rich set of event handlers can be assigned to any SVG graphical object. Within a web page, the same scripts can work on both HTML and SVG elements. Scripting.

SVG is useful for rich graphical presentation of information, including a number of accessibility features that, used correctly, ensure the content can be used by the widest possible audience. But a direct link to source data, where possible, is helpful for many people to understand the content provided.

1.2. Compatibility with other standards efforts

SVG leverages and integrates with other W3C specifications and standards efforts, as described in the following:

• SVG can be integrated with HTML either by using SVG in HTML or by using HTML in SVG, in both cases either by inclusion or reference.
• SVG is an application of XML and is compatible with XML 1.0 and with the Namespaces in XML specification. However, when SVG content is included in HTML document, the HTML syntax applies and may not be compatible with XML. See SVG Integration for details.
• SVG content is styled with CSS. See Styling with CSS for details.
• SVG includes a complete Document Object Model (DOM) and extends DOM4. The SVG DOM has a high level of compatibility and consistency with the HTML DOM. Additionally, the SVG DOM supports and incorporates many of the facilities described in the CSS object model and event handling [dom-level-2-style] [uievents].
• SVG incorporates some features and approaches that are part of SMIL 3, including the ‘switch’ element and the ‘systemLanguage’ attribute.
• SVG is compatible with W3C work on internationalization. References (W3C and otherwise) include: [UNICODE] and [charmod].
• SVG is compatible with W3C work on Web Accessibility. See Accessibility Support.

1.3. Relationship to previous versions of this standard

1.4. Normative Terminology

Within this specification, the key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" are to be interpreted as described in Key words for use in RFCs to Indicate Requirement Levels [rfc2119]. However, for readability, these words do not appear in all uppercase letters in this specification.

At times, this specification recommends good practice for authors and user agents.

2. Conformance Criteria

2.1. Overview

Graphics defined with SVG have many different applications. As a result, not all software that uses SVG will have the same features. Conformance to the SVG specification is therefore not a binary matter; software may be conforming within a restricted feature set.

Furthermore, SVG is designed to be integrated into other types of documents; depending on the type of integration, only a limited feature-set may be appropriate. There are various ways that an SVG document fragment can be referenced by or included in other documents and thereby be processed by a user agent. SVG documents can also be viewed directly, as the primary 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 must be processed.

This chapter therefore defines a number of processing modes that encompass the different combinations of features which may be enabled or disabled in the document. In addition, it specifies normative requirements for which processing mode must be used when SVG documents reference or embed other SVG documents. The same set of processing modes may be used by reference in other specifications to describe how SVG documents should be processed.

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 processing mode from this document.

This chapter also outlines specific conformance requirements for different types of SVG content, and different classes of software that use or create SVG.

2.2. Processing modes

This section defines a standard set of processing modes for SVG documents. Each processing mode specifies whether certain high level SVG features are enabled.

2.2.1. Features

The features that can be enabled or disabled depending on the processing mode are as follows:

declarative animation

Declarative animation includes both the animation elements in SVG – ‘animate’, ‘animateMotion’, ‘animateTransform’ and ‘set’ – and CSS Transitions and Animations (see the Animation appendix for details). When declarative animations are disabled in an SVG document, any animation elements or CSS Transitions or Animations must not be applied or run.

This is not the same as pausing the document’s animated state at 0s document time; if an animation is defined to begin at 0s, it still will not be applied.

references to external resources

References to external resources are URLs references or network access requests made by markup, style properties, script or other Web platform features used in the document, except for:

• same-document URL references, as defined in the Linking chapter
• data URL references, as defined by the "data" URL scheme [rfc2397]

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.

When external references are enabled, user agents that support external file requests from the Internet must adhere to the restrictions on cross-origin resource fetching, as outlined in the Linking chapter.

script execution

Script execution is the execution of any SVG ‘script’ elements, script found in event attributes (such as ‘onclick’ on SVG elements), or any other script defined by other Web platform features used in the document, such as any HTML ‘script’ elements. When script execution is disabled in an SVG document, no script in the document must be run.

interaction

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.

2.2.2. Dynamic interactive mode

This processing mode imposes no restrictions on any feature of the SVG language.

2.2.3. Animated mode

This processing mode 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.

2.2.4. Secure animated mode

This processing mode 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).

2.2.5. Static mode

This processing mode 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. For example, an SVG viewer that processes graphics for inclusion in print documents would likely use static mode.

2.2.6. Secure static mode

This processing mode 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.)

2.3. Processing modes for SVG sub-resource documents

When an SVG document is viewed directly, it is expected to be displayed using the most comprehensive processing mode supported by the user agent. However, when an SVG is processed as a sub-resource or embedded document, the following restrictions must apply:

‘image’ references

An SVG embedded within an ‘image’ element must be processed in secure animated mode if the embedding document supports declarative animation, or in secure static mode otherwise.

The same processing modes are expected to be used for other cases where SVG is used in place of a raster image, such as an HTML ‘img’ element or in any CSS property that takes an <image> data type. This is consistent with HTML’s requirement that image sources must reference "a non-interactive, optionally animated, image resource that is neither paged nor scripted" [HTML]

‘use’ element and other 'href' references

When SVG documents are loaded through ‘use’ element references or paint server element cross-references they must be processed in secure static mode.

Note that animations do not run while processing the sub-resource document, for both performance reasons and because there is currently no context defined for resource documents to reference their timeline against. However, when elements from a sub-resource document are cloned into the current document because of a ‘use’ element reference or paint-server cross-reference, the cloned element instances may be animated in the current document’s timeline, as described in Animations in use-element shadow trees, and may trigger the loading of additional sub-resource files.

Graphical effects references

When SVG documents are loaded through any style property references that target specific elements in the document (as opposed to SVG as an image format), they must be processed in secure static mode.

Note that animations do not run in sub-resource documents, for both performance reasons and because there is currently no context defined for resource documents to reference their timeline against.

Some style properties may reference either specific elements or entire image files; the processing mode is more restrictive in the first case. For example, a reference to an SVG ‘mask’ element will not be animated, but an entire SVG file used as an image mask can be.

SVG in fonts

When SVG files are processed as part of a font reference, they must use the secure animated mode if animated glyphs are supported, or secure static mode otherwise.

These restrictions are included in the OpenType specification for processing documents from the "SVG" table. OpenType also applies additional restrictions, in the form of a user agent style sheet that prevents rendering of text and foreign objects [OPENTYPE].

SVG document fragments that are included inline in a host document must use a processing mode that matches that of the host document. SVG document fragments included as children of an SVG ‘foreignObject’ element must use the processing mode of the surrounding SVG document; non-SVG foreign content must be processed with equivalent restrictions.

For example, if an SVG document is being used in secure animated mode due to being referenced by an HTML ‘img’ or SVG ‘image’ element, then any content within a ‘foreignObject’ element must have scripts, interactivity, and external file references disabled, but should have declarative animation enabled.

2.3.1. Examples

Below are various methods of embedding SVG in an HTML page by reference, along with the expected processing mode and allowed features for each.

Each cell in the "Live Example" row should display a yellow smiley face. In each example below, clicking on the eyes tests link traversal, and clicking on the face tests declarative interactivity and script execution. The link should replace the image with a blue square (clicking it will revert it to the original image). The declarative interactivity uses the ‘set’ element to change the face from shades of yellow to shades of green, and uses CSS pseudoclasses to add a stroke to the interactive elements. The script should fill in the smile. Time-based (as opposed to interactivity-based) declarative animation is supported if the left eye is winking (using the ‘animate’ element) and if the eyes are dark blue with regular flashes of light blue (using CSS keyframe animation).

The expected processing modes and features outlined here are subject to any future changes in the corresponding HTML or CSS specification.

Embedding method	object without sandboxing	img	CSS background
Expected processing mode	dynamic interactive	dynamic interactive, with restrictions	secure animated	secure animated
Declarative, time-based animation (winking left eye, color-change in both eyes)	allowed	allowed	allowed	allowed
Declarative, interactive animation and style changes (face color changes when clicked, face/eyes outlined when hovered or focused)	allowed	allowed	disabled	disabled
Link navigation within the same browsing context, to the same domain (image changes when clicking eyes)	allowed	allowed	disabled	disabled
Scripted interaction (smile widens when clicking face)	allowed	disabled (because of sandboxing)	disabled	disabled
Live example

2.4. Document Conformance Classes

SVG is defined in terms of a document object model (DOM), rather than a particular file format or document type. For SVG content, therefore, conformance with this specification is defined by whether the content is or can generate a conforming DOM. Some of the following conformance classes depend on whether the content is well-formed XML [xml].

2.4.1. Conforming SVG DOM Subtrees

A DOM node tree or subtree rooted at a given element is a conforming SVG DOM subtree if it forms a SVG document fragment that adheres to the specification described in this document (Scalable Vector Graphics (SVG) Specification). Specifically, it:

• is rooted by an ‘svg’ element in the SVG namespace,
• conforms to the content model and attributes rules for the elements defined in this document (Scalable Vector Graphics (SVG) Specification), and
• conforms to the content model and attributes rules defined by other specifications for any elements in the SVG namespace defined by those specifications (including: [filter-effects-1], [css-masking-1], [svg-animation]).

SVG document fragments can be included within parent XML documents using the XML namespace facilities described in Namespaces in XML [xml-names]. Note, however, that since a conforming SVG DOM subtree must have an ‘svg’ element as its root, the use of an individual non-‘svg’ element from the SVG namespace is disallowed. Thus, the SVG part of the following document is not conforming:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
<ParentXML>
  <!-- Elements from ParentXML go here -->
  <!-- The following is not conforming -->
  <z:rect xmlns:z="http://www.w3.org/2000/svg"
          x="0" y="0" width="10" height="10" />
  <!-- More elements from ParentXML go here -->
</ParentXML>

Instead, for the SVG part to become a conforming SVG DOM subtree, the file could be modified as follows:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
<ParentXML>
  <!-- Elements from ParentXML go here -->
  <!-- The following is conforming -->
  <z:svg xmlns:z="http://www.w3.org/2000/svg"
         width="100px" height="100px">
    <z:rect x="0" y="0" width="10" height="10"/>
  </z:svg>
  <!-- More elements from ParentXML go here -->
</ParentXML>

The SVG language and these conformance criteria provide no designated size limits on any aspect of SVG content. There are no maximum values on the number of elements, the amount of character data, or the number of characters in attribute values.

2.4.2. Conforming SVG Markup Fragments

A document or part of a document is a conforming SVG markup fragment if it can be parsed without error (other than network errors) by the appropriate parser for the document MIME type to form a conforming SVG DOM subtree, and in addition if:

• any CSS stylesheets included in the document conform to the core grammar of Cascading Style Sheets, level 2 revision 1 [CSS2].

2.4.3. Conforming XML-Compatible SVG Markup Fragments

A conforming SVG markup fragment is also a conforming XML-compatible SVG markup fragment if it:

• meets all XML well-formedness constraints ([xml]),
• conforms to the Namespaces in XML specification [xml-names],
• all ‘id’ attributes are valid XML IDs ([xml], section 3.3.1), and
• any <?xml-stylesheet?> processing instruction conforms to Associating stylesheets with XML documents [xml-stylesheet].

2.4.4. Conforming XML-Compatible SVG DOM Subtrees

A DOM node tree or subtree rooted at a given element is an conforming XML-compatible SVG DOM subtree if, once serialized to XML, it could form a conforming XML-compatible SVG markup fragment.

If the DOM subtree cannot be serialized to conforming XML without altering it, such as when an ‘id’ value is not a valid XML name, or when a Comment node’s data contains the substring "--", then the subtree is not a conforming XML-compatible SVG DOM subtree.

2.4.5. Conforming SVG Stand-Alone Files

A document is a conforming SVG stand-alone file if:

• it is a well-formed XML document,
• its root element is an ‘svg’ element,
• the SVG document fragment rooted at the document element is a conforming XML-compatible SVG markup fragment, and
• any other SVG document fragments within the document (such as those within a ‘foreignObject’) form a conforming XML-compatible SVG markup fragment.

2.4.6. Error processing

There are various scenarios where an SVG document fragment is technically in error:

• The document or DOM subtree is not-conforming for its document type, as described in the previous sections.
• Other situations that are described as being in error in this specification, such as incorrect attribute values.

A dynamic document can go in and out of error over time. For example, document changes from the SVG DOM or from animation can cause a document to become in error and a further change can cause the document to become correct again.

User agents must use the following error processing rules whenever a document is in error, unless other sections of this specification define more specific rules for handling the particular error type:

• The document rendering shall continue after encountering element which has an error. The element or its part that is in error won’t be rendered.
• If the user agent has access to an error reporting capability such as status bar or console, it is recommended that the user agent provide whatever additional detail it can to enable the user or developer to quickly find the source of the error. For example, the user agent might provide an error message along with a line number and character number at which the error was encountered.

Because of situations where a block of scripting changes might cause a given SVG document fragment to go into and out of error, the user agent should only apply error processing at times when document presentation (e.g., rendering to the display device) is updated.

2.5. Software Conformance Classes

For software, the requirements for conformance depend on the category of program:

SVG generators

Any software that creates or makes available SVG content, either as markup or as a DOM (as is the case with client-side JavaScript libraries).

SVG authoring tools

Any software that provides an interface for human content creators to manipulate graphics or code that will be used to generate SVG. SVG authoring tools are implicitly also SVG generators.

SVG servers

Any network or file server that makes available SVG content in response to requests from other software. SVG servers are implicitly also SVG generators.

SVG interpreters

Any software that parses or processes SVG documents or markup fragments. An SVG interpreter is an SVG user agent for the purpose of any sections of this specification that relate to the parsing or processing steps undertaken by the interpreter.

SVG viewers

Any software that creates a rendered graphical representation after parsing or processing an SVG document or SVG markup fragment. SVG viewers are implicitly also SVG interpreters. An SVG viewer is always an SVG user agent for the purpose of this specification.

SVG user agent

An SVG user agent is a user agent that is able to retrieve and render SVG content.

user agent

The general definition of a user agent is an application that retrieves and renders Web content, including text, graphics, sounds, video, images, and other content types. A user agent may require additional user agents that handle some types of content. For instance, a browser may run a separate program or plug-in to render sound or video. User agents include graphical desktop browsers, multimedia players, text browsers, voice browsers, and assistive technologies such as screen readers, screen magnifiers, speech synthesizers, onscreen keyboards, and voice input software.

In general terms, a "user agent" may or may not have the ability to retrieve and render SVG content; however, unless the context requires an alternative interpretation, all references to a "user agent" in this specification are assumed to be references to an SVG user agent that retrieves and renders SVG content.

Many programs will fall under multiple software classes. For example, a graphical editor that can import and display SVG files, allow the user to modify them, and then export the modified graphic to file, is an SVG interpreter, an SVG viewer, an SVG authoring tool, and an SVG generator.

2.5.1. Conforming SVG Generators

A conforming SVG generator is a SVG generator that:

• always creates a conforming SVG DOM subtree, a conforming SVG markup fragment, or a conforming SVG stand-alone file;
• does not create documents containing non-conforming SVG document fragments;
• meets all normative requirements in this specification for SVG authors, as well as specific normative requirements for SVG generators.

SVG generators are strongly encouraged to use a Unicode character encoding by default, and to follow the other guidelines of the Character Model for the World Wide Web [UNICODE] [charmod].

SVG generators handling high-precision data are encouraged to follow the guidelines in the section Notes on generating high-precision geometry.

2.5.2. Conforming SVG Authoring Tools

An authoring tool, as defined in the Authoring Tool Accessibility Guidelines 2.0, is a conforming SVG authoring tool if it is a conforming SVG generator and it also conforms to all relevant Level A requirements from that document [atag20]. Level AA and Level AAA requirements are encouraged but not required for conformance.

2.5.3. Conforming SVG Servers

A conforming SVG server must meet all the requirements of a conforming SVG generator. In addition, conforming SVG servers using HTTP or other protocols that use Internet Media types must serve SVG stand-alone files with the media type "image/svg+xml".

Also, if the SVG file is compressed with gzip or deflate, conforming SVG Servers must indicate this with the appropriate header, according to what the protocol supports. Specifically, for content compressed by the server immediately prior to transfer, the server must use the "Transfer-Encoding: gzip" or "Transfer-Encoding: deflate" headers as appropriate. For content stored in a compressed format on the server (e.g. with the file extension .svgz), the server must use the "Content-Encoding: gzip" or "Content-Encoding: deflate" headers as appropriate.

2.5.4. Conforming SVG Interpreters

An SVG interpreter is a program which can parse and process SVG document fragments. Examples of SVG interpreters are server-side transcoding tools or optimizers (e.g., a tool which converts SVG content into modified SVG content) or analysis tools (e.g., a tool which extracts the text content from SVG content, or a validity checker). A transcoder from SVG into another graphics representation, such as an SVG-to-raster transcoder, represents a viewer, and thus viewer conformance criteria also apply.

A conforming SVG interpreter must be able to parse and process all XML constructs defined in XML 1.0 [xml] and Namespaces in XML [xml-names].

A conforming SVG interpreter must parse any conforming XML-compatible SVG markup fragment in a manner that correctly respects the DOM structure (elements, attributes, text content, comments, etc.) of the content. The interpreter is not required to interpret the semantics of all features correctly.

If the SVG interpreter supports non-XML syntaxes (such as HTML), it must correctly parse any conforming SVG markup fragment in that syntax.

If the SVG interpreter runs scripts or fetches external resource files as a consequence of processing the SVG content, it must follow the restrictions described for user agents in Processing modes for SVG sub-resource documents and in the Linking chapter.

2.5.5. Conforming SVG Viewers

An SVG viewer is a program which can parse and process an SVG document fragment and render the contents of the document onto some sort of graphical output medium such as a display, printer, or engraver. Thus, an SVG viewer is also an SVG interpreter (in that it can parse and process SVG document fragments), but with the additional requirement of correct rendering.

A conforming SVG viewer must be a conforming SVG interpreter, and must be able to support rendering output in at least one of the processing modes defined in this chapter:

• dynamic interactive mode
• animated mode
• secure animated mode
• static mode
• secure static mode

A conforming SVG viewer must meet all normative requirements indicated in this specification for user agents, for all features supported by its processing mode(s).

Specific criteria that must apply to all conforming SVG viewers:

• The viewer must be able to parse all CSS syntax features defined in Cascading Style Sheets, level 2 revision 1 [CSS2], and must support CSS styling of SVG content including all required properties and required features listed in the Styling chapter. The viewer may support other CSS language features, and any other properties that are defined by the corresponding specification to apply to SVG elements. The supported features from CSS 2.1 must be implemented in accordance with the conformance definitions from the CSS 2.1 specification ([CSS2], section 3.2).
• The viewer must be able to apply styling properties to SVG content using presentation attributes.
• Areas of an image of SVG content may have opacity less than 100%. The viewer must at least support Simple Alpha Compositing of the image of the SVG content onto the target canvas, as described in the Compositing and Blending Specification [compositing-1].
• The viewer must support data URL references containing base64-encoded or URL-encoded content, in conformance with the "data:" URL scheme [rfc2397], wherever a URI reference to another document is permitted within SVG content. When the encoded document is of MIME type image/svg+xml, it must be a well-formed, complete SVG document in order to be processed.
• The viewer must support JPEG and PNG image formats [JPEG] [PNG].

  Even if the viewer only supports secure processing modes, it is still required to support these image formats, in order to process data URL references.

• Resampling of image data must be consistent with the specification of property image-rendering.
• Whenever possible in the parent environment, the viewer must use information about physical device resolution and expected viewing conditions in order to accurately determine the initial scale in conformance with the rules described in CSS 2.1 ([CSS2], section 4.3.2). In situations where this information is impossible to determine, the viewer or the parent environment must make a reasonable approximation for common target devices.
• All visual rendering must be accurate to within one device pixel or point of the mathematically correct result at the initial 1:1 zoom ratio. It is suggested that viewers attempt to keep a high degree of accuracy when zooming.

  On lower-resolution display devices, support for anti-aliasing or other smoothing methods is highly recommended. It is a requirement for conforming high-quality SVG viewers.

• If printing devices are supported, SVG content must be printable at printer resolutions with the same graphics features available as required for display (e.g., the specified colors must be rendered on color printers).
• On systems which support accurate sRGB [SRGB] color, all sRGB color computations and all resulting color values must be accurate to within one sRGB color component value, where sRGB color component values range from 0 to 255.
• SVG implementations must correctly support gzip-encoded [rfc1952] and deflate-encoded [rfc1951] data streams, for any content type (including SVG, script files, images). SVG implementations that support HTTP must support these encodings according to the HTTP 1.1 specification [rfc2616]; in particular, the client must specify with an "Accept-Encoding:" request header [HTTP-ACCEPT-ENCODING] those encodings that it accepts, including at minimum gzip and deflate, and then decompress any gzip-encoded and deflate-encoded data streams that are downloaded from the server. When an SVG viewer retrieves compressed content (e.g., an .svgz file) over HTTP, if the "Content-Encoding" and "Transfer-Encoding" response headers are missing or specify a value that does not match the compression method that has been applied to the content, then the SVG viewer must not render the content and must treat the document as being in error.
• The viewer must use at least single-precision floating point for intermediate calculations on any numerical operations for conversion of coordinates. However, in order to prevent the rounding error on coordinate transformation, at least double-precision floating point computation must be used on CTM generation processing. Such minimum typical computation way is expressed with following formulas.
  $$(\mathrm{single})\mathrm{CTM}=(\mathrm{single})((\mathrm{double})\left[\begin{array}{ccc}{a}_1& c_1& e_1\\ b_1& d_1& f_1\\ 0& 0& 1\end{array}\right]\cdot (\mathrm{double})\left[\begin{array}{ccc}{a}_2& c_2& e_2\\ b_2& d_2& f_2\\ 0& 0& 1\end{array}\right])$$

  
  
  $$
  (single)
  {\large \rm CTM} =
  (single)
  \left(
    (double)
    \left[
      \begin{matrix}
         a_1 & c_1 & e_1 \\
         b_1 & d_1 & f_1 \\
         0 &   0 &   1
      \end{matrix}
    \right]
    \cdot
    (double)
    \left[
      \begin{matrix}
         a_2 & c_2 & e_2 \\
         b_2 & d_2 & f_2 \\
         0 &   0 &   1
      \end{matrix}
    \right]
  \right)
  $$
  
  

  $$(\mathrm{single})\left[\begin{array}{c}{x}_{\mathrm{viewport}}\\ y_{\mathrm{viewport}}\\ 1\end{array}\right]=\mathrm{CTM}\cdot (\mathrm{single})\left[\begin{array}{c}{x}_{\mathrm{userspace}}\\ y_{\mathrm{userspace}}\\ 1\end{array}\right]$$

  
  $$
  (single)
  \left[
  \begin{matrix}
  x_{\rm viewport} \\
  y_{\rm viewport} \\
  1
  \end{matrix}
  \right]
  =
  {\large \rm CTM} \cdot (single)
  \left[
  \begin{matrix}
  x_{\rm userspace} \\
  y_{\rm userspace} \\
  1
  \end{matrix}
  \right]
  $$
  

  Furthermore, when it has nested viewport coordinate systems, the ScreenCTM which is a transformation matrix produced by nested CTM for transforming user coordinates into the coordinates of an output device also must be generated by double-precision floating point computation.

A conforming SVG viewer that supports processing modes that include interaction must support the following additional features:

• For interactive user environments, facilities must exist for zooming and panning of stand-alone SVG documents or SVG document fragments embedded within parent XML documents.
• In environments that have appropriate user interaction facilities, the viewer must support the ability to activate hyperlinks.
• In Web browser environments, the viewer must have the ability to search and select text strings within SVG content.
• If display devices are supported, the viewer must have the ability to select and copy text from SVG content to the system clipboard.
• The viewer must meet all applicable Level A requirements of the User Agent Accessibility Guidelines 2.0 [UAAG20]. Level AA and level AAA features are encouraged, but not required.

A conforming SVG viewer that supports processing modes that include script execution must support the following additional features:

• The viewer must be a conforming ECMAScript implementation of all the IDL fragments in this specification. [WebIDL]

If the user agent includes an HTML or XHTML viewing capability, or can apply CSS styling properties to XML documents, then a conforming SVG viewer must support resources of MIME type "image/svg+xml" wherever raster image external resources can be used, such as in the HTML or XHTML ‘img’ element and in CSS properties that can refer to raster image resources (e.g., ‘background-image’).

2.5.5.1. Printing implementation notes

For user agents which support both zooming on display devices and printing, it is recommended that the default printing option produce printed output that reflects the display device’s current view of the current SVG document fragment (assuming there is no media-specific styling), taking into account any zooming and panning done by the user, the current state of animation, and any document changes due to DOM and scripting.

Thus, if the user zooms into a particular area of a map on the display device and then requests a hardcopy, the hardcopy should show the same view of the map as appears on the display device. If a user pauses an animation and prints, the hardcopy should show the same graphics as the currently paused picture on the display device. If scripting has added or removed elements from the document, then the hardcopy should reflect the same changes that would be reflected on the display.

When an SVG document is rendered on a static-only device such as a printer which does not support SVG’s animation and scripting and facilities, then the user agent shall ignore any animation and scripting elements in the document and render the remaining graphics elements according to the rules in this specification.

2.5.6. Conforming High-Quality SVG Viewer

In order for a conforming SVG viewer to be considered a conforming high-quality SVG viewer, it must support the following additional features:

• Professional-quality results with good processing and rendering performance and smooth, flicker-free animations.
• On low-resolution devices such as display devices at 150dpi or less, support for smooth edges on lines, curves and text. (Smoothing is often accomplished using anti-aliasing techniques.)
• Color management via ICC profile support [ICC] (i.e., the ability to support colors defined using ICC profiles) [css-color-4]
• Resampling of image data must conform to the requirements for conforming high-quality SVG viewers as specified in the description of property image-rendering.
• At least double-precision floating point computation on coordinate system transformation numerical calculations.

A conforming high-quality SVG viewer that supports processing modes that include script execution, declarative animation, or interaction must support the following additional features:

• Progressive rendering and animation effects (i.e., the start of the document will start appearing and animations will start running in parallel with downloading the rest of the document).
• Restricted screen updates (i.e., only required areas of the display are updated in response to redraw events).

A conforming high-quality SVG viewer that supports processing modes that include interaction must support the following additional features:

• Background downloading of images and fonts retrieved from a Web server, with updating of the display once the downloads are complete.

3. Rendering Model

3.1. Introduction

Implementations of SVG must implement the rendering model as described in this chapter, as modified in the appendix on conformance requirements which describes situations where an implementation may deviate. In practice variability is allowed based on limitations of the output device (e.g. only a limited range of colors might be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves are approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements).

The appendix on conformance requirements describes the extent to which an actual implementation may deviate from this description. In practice an actual implementation may deviate slightly because of limitations of the output device (e.g. only a limited range of colors might be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves are approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements).

With the exception of the ‘foreignObject’ element, the back to front stacking order for a stacking context created by an SVG element is:

1. the background and borders of the element forming the stacking context, if any
2. descendants, in tree order

Since the ‘foreignObject’ element creates a "fixed position containing block" in CSS terms, the normative rules for the stacking order of the stacking context created by ‘foreignObject’ elements are the rules in Appendix E of CSS 2.1.

3.4.1. Establishing a stacking context in SVG

A new stacking context must be established at an SVG element for its descendants if any of the following conditions are met. For the property-based conditions, the property must apply to the element and have the given computed value.

3.5. How elements are rendered

3.6. How groups are rendered

3.6.1. Object and group opacity: the effect of the ‘opacity’ property

See the CSS Color Module Level 3 for the definition of opacity. [css-color-3]

The opacity property specifies how opaque a given graphical element or container element will be when it is painted to the canvas. When applied to a container element, this is known as group opacity, and when applied to an individual rendering element, it is known as object opacity. The principle for these two operations however is the same.

There are several other opacity-related properties in SVG:

• fill-opacity, which specifies the opacity of a fill operation;
• stroke-opacity, which specifies the opacity of a stroking operation; and
• stop-opacity, which specifies the opacity of a gradient stop.

These four opacity properties are involved in intermediate rendering operations. Object and group opacity however can be thought of as a post-processing operation. Conceptually, the object or group to which opacity applies is rendered into an RGBA offscreen image. The offscreen image as whole is then blended into the canvas with the specified opacity value used uniformly across the offscreen image. Thus, the presence of opacity causes the group to be isolated.

The opacity property applies to the following SVG elements: ‘svg’, ‘g’, ‘symbol’, ‘marker’, ‘a’, ‘switch’, ‘use’ and graphics elements.

The following example illustrates various usage of the opacity property on objects and groups.

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="175" viewBox="0 0 1200 350">

  <!-- Background blue rectangle -->
  <rect x="100" y="100" width="1000" height="150" fill="blue"/>

  <!-- Red circles going from opaque to nearly transparent -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1"/>
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"/>
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"/>
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"/>
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"/>

  <!-- Opaque group, opaque circles -->
  <g opacity="1">
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- Group opacity: .5, opacity circles -->
  <g opacity=".5">
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- Opaque group, semi-transparent green over red -->
  <g opacity="1">
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
  <!-- Opaque group, semi-transparent red over green -->
  <g opacity="1">
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"/>
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"/>
  </g>
  <!-- Group opacity .5, semi-transparent green over red -->
  <g opacity=".5">
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
</svg>

Each group of red and green circles is first rendered to an offscreen image before being blended with the background blue rectangle as a whole, with the given opacity values.

In the example, the top row of circles have differing opacities, ranging from 1.0 to 0.2. The bottom row illustrates five ‘g’ elements, each of which contains overlapping red and green circles, as follows:

• The first group shows the opaque case for reference. The group has opacity of 1, as do the circles.
• The second group shows group opacity when the elements in the group are opaque.
• The third and fourth group show that opacity is not commutative. In the third group (which has opacity of 1), a semi-transparent green circle is drawn on top of a semi-transparent red circle, whereas in the fourth group a semi-transparent red circle is drawn on top of a semi-transparent green circle. Note that area where the two circles intersect display different colors. The third group shows more green color in the intersection area, whereas the fourth group shows more red color.
• The fifth group shows the multiplicative effect of opacity settings. Both the circles and the group itself have opacity settings of .5. The result is that the portion of the red circle which does not overlap with the green circle (i.e., the top/right of the red circle) will blend into the blue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, after blending into the blue rectangle, results in a blended color which is 25% red and 75% blue.

3.7. Types of graphics elements

SVG supports three fundamental types of graphics elements that can be rendered onto the canvas:

• Shapes, which represent some combination of straight line and curves
• Text, which represents some combination of character glyphs
• Raster images, which represent an array of values that specify the paint color and opacity (often termed alpha) at a series of points on a rectangular grid. (SVG requires support for specified raster image formats under conformance requirements.)

3.7.1. Painting shapes and text

Shapes and text can be filled (i.e., apply paint to the interior of the shape) and stroked (i.e., apply paint along the outline of the shape).

For certain types of shapes, marker symbols (which themselves can consist of any combination of shapes, text and images) can be drawn at positions along the shape boundary. Each marker symbol is painted as if its graphical content were expanded into the SVG document tree just after the shape object which is using the given marker symbol. The graphical contents of a marker symbol are rendered using the same methods as graphics elements. Marker symbols are not applicable to text.

The order in which fill, stroke and markers are painted is determined by the paint-order property. The default is that fill is painted first, then the stroke, and then the marker symbols. The marker symbols are rendered in order along the outline of the shape, from the start of the shape to the end of the shape.

The fill and stroke operations are entirely independent; for instance, each fill or stroke operation has its own opacity setting.

SVG supports numerous built-in types of paint which can be used in fill and stroke operations. These are described in Paint Servers.

3.7.2. Painting raster images

When a raster image is rendered, the original samples are "resampled" using standard algorithms to produce samples at the positions required on the output device. Resampling requirements are discussed under conformance requirements.

As in HTML [HTML, 10.4.2], all animated images with the same absolute URL and the same image data are expected to be rendered synchronised to the same timeline as a group, with the timeline starting at the time of the least recent addition to the group.

When a user agent is to restart the animation for an img element showing an animated image, all animated images with the same absolute URL and the same image data in that img element’s node document are expected to restart their animation from the beginning.

3.8. Filtering painted regions

SVG allows any painting operation to be filtered. (See Filter Effects.)

In this case the result must be as though the paint operations had been applied to an intermediate canvas initialized to transparent black, of a size determined by the rules given in Filter Effects then filtered by the processes defined in Filter Effects.

3.10. Parent compositing

SVG document fragments can be semi-opaque.

In accordance with the Compositing and Blending specification, the ‘svg’ element always creates an isolated group. When an SVG document is a top-level document, meaning it is not embedded in another document, the root ‘svg’ element is considered to be the page group and is composited with a backdrop of white with 100% opacity. In all other cases, the SVG document or document fragment is composited into the parent document with opacity preserved.

3.11. The effect of the ‘overflow’ property

See the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification [CSS2] for the definition of overflow.

4. Basic Data Types and Interfaces

4.1. Definitions

initial value

The initial value of an attribute or property is the value used when that attribute or property is not specified, or when it has an invalid value. This value is to be used for the purposes of rendering, calculating animation values, and when accessing the attribute or property via DOM interfaces.

invalid value

An invalid value specified for a property, either in a style sheet or a presentation attribute, is one that is either not allowed according to the grammar defining the property’s values, or is allowed by the grammar but subsequently disallowed in prose. A CSS declaration with an invalid value is ignored.

4.2. Attribute syntax

4.2.1. Real number precision

Unless stated otherwise, numeric values in SVG attributes and in properties that are defined to have an effect on SVG elements must support at least all finite single-precision values supported by the host architecture.

It is recommended that higher precision floating point storage and computation be performed on operations such as coordinate system transformations to provide the best possible precision and to prevent round-off errors.

conforming SVG viewers are required to perform numerical computation in accordance with their conformance class, as described in Conformance Criteria.

4.2.2. Clamping values which are restricted to a particular range

Some numeric attribute and property values have restricted ranges. Other values will be restricted by the capabilities of the device. If not otherwise specified, the user agent shall defer any out-of-range error checking until as late as possible in the rendering process. This is particularly important for device limitations, as compound operations might produce intermediate values which are out-of-range but final values which are within range.

4.3. SVG DOM overview

Conforming SVG viewers or SVG interpreters that support script execution must implement SVG DOM interfaces as defined throughout this specification, with the specific requirements and dependencies listed in this section.

4.3.1. Dependencies for SVG DOM support

The SVG DOM is defined in terms of Web IDL interfaces. All IDL fragments in this specification must be interpreted as required for conforming IDL fragments, as described in the Web IDL specification. [WebIDL]

The SVG DOM builds upon a number of DOM specifications. In particular:

• The SVG DOM requires full support for the DOM, as defined by the most recent Review Draft of the DOM living standard at the time this specification was published, except for any features that have been removed or deprecated since. SVG software with DOM support should implement the latest DOM standard wherever possible [DOM]
• The SVG DOM requires support for relevant aspects of UI Events and Clipboard API and events ([uievents], [clipboard-apis]). (For the specific features that are required, see Relationship with UI Events.)
• The SVG DOM requires, at a minimum, complete support for all interfaces from DOM Level 2 Style ([dom-level-2-style]) that have not been dropped in the CSS Object Model (CSSOM) specification. SVG software should implement the latest version of CSS Object Model (CSSOM) wherever possible ([cssom-1])
• The SVG DOM requires complete support for Geometry Interfaces Module Level 1 ([geometry-1]).

4.3.2. Naming conventions

The SVG DOM follows similar naming conventions to HTML and DOM standards ([HTML], [DOM]).

All names are defined as one or more English words concatenated together to form a single string. Property or method names start with the initial keyword in lowercase, and each subsequent word starts with a capital letter. For example, a property that returns document meta information such as the date the file was created might be named "fileDateCreated".

Interface names defined in this specification nearly all start with "SVG". Interfaces that represent the DOM Element object for an SVG-namespaced element follow the format SVGElementNameElement, where ElementName is the element’s tag name with the initial letter capitalized. So SVGRadialGradientElement is the interface for an ‘radialGradient’ element.

An exception to this casing convention is SVGSVGElement, in which the entire tag name is capitalized.

4.3.3. Elements in the SVG DOM

Any SVG software that is required to support the SVG DOM must enhance the DOM elements created for SVG document fragments as follows:

• Every Element object that corresponds to a supported SVG element (that is, an element with namespace URI "http://www.w3.org/2000/svg" and a local name that is one of the elements defined in this specification or another specification implemented by the software) must also implement the DOM interface identified in the element definition.

• Elements in the SVG namespace whose local name does not match an element defined in any specification supported by the software must nonetheless implement the SVGElement interface.

In The ‘rect’ element, the SVGRectElement interface is identified. This means that every Element object whose namespace URI is "http://www.w3.org/2000/svg" and whose local name is "rect" must also implement SVGRectElement.

4.3.4. Reflecting content attributes in the DOM

Many SVG DOM properties (IDL attributes) reflect a content attribute or property on the corresponding element, meaning that content and IDL attributes represent the same underlying data. For example, the SVGAnimatedLength ry in an SVGRectElement reflects the ry presentation attribute on the associated ‘rect’ element.

The way this reflection is done depends on the type of the IDL attribute:

• If the type of the reflecting IDL attribute is a primitive type (such as long, as used by tabIndex on SVGElement) or DOMString (as used by title on SVGStyleElement), then the rules for reflecting content attributes in IDL attributes in HTML are used.
• If the type of the reflecting IDL attribute is an SVGAnimatedBoolean, SVGAnimatedString, SVGAnimatedEnumeration, SVGAnimatedNumber, SVGAnimatedNumberList, SVGAnimatedLength, SVGAnimatedLengthList, SVGAnimatedAngle, SVGAnimatedRect or SVGAnimatedPreserveAspectRatio, then the rules in the corresponding section defining the reflecting interface are used.

  At a high level, the object’s baseVal is used to reflect the value of the content attribute. For objects that reflect a CSS property, the baseVal is used to reflect the presentation attribute.

This relationship is live, and values must be synchronized (following the rules in Synchronizing reflected values) when either the attribute or its reflected property is modified.

If the attribute hasn’t been specified explicitly in the document markup, the reflected object is nonetheless initialized upon access, to the attribute’s initial value. If the attribute’s initial value is (none), the object is initialized as defined in Reflecting an empty initial value. This newly constructed object does not generate an attribute on the element until it is modified for the first time. Modifications made to the corresponding attribute are immediately reflected in the object.

If lineElement.x1.baseVal is accessed (where lineElement is an instance of SVGLineElement) and the ‘x1’ attribute was not specified in the document, the returned SVGLength object would represent the value 0 user units, because the initial value for the attribute is 0.

4.3.5. Synchronizing reflected values

Whenever a reflected content attribute’s base value changes, then the reflecting object must be synchronized, immediately after the value changed, by running the following steps:

1. If the reflecting object is a list interface object, then run the steps for synchronizing a list interface object.
2. Otherwise, update the object’s value to be the base value of the reflected content attribute (using the attribute’s initial value if it is not present or invalid).

   This will, for example, update the value of an SVGLength object.

When a reflected content attribute is to be reserialized, optionally using a specific value, the following steps must be performed:

1. Let value be the specific value given, or the value of the content attribute’s reflecting IDL attribute if a specific value was not provided.
2. Depending on value’s type:

   SVGAnimatedBoolean

   SVGAnimatedNumber

   SVGAnimatedLength

   SVGAnimatedAngle

   SVGAnimatedRect

   SVGAnimatedString

   SVGAnimatedNumberList

   SVGAnimatedLengthList

   SVGAnimatedTransformList

   Reserialize the content attribute using value’s baseVal member.

   SVGAnimatedEnumeration

   1. Let number be the value of value’s baseVal member.
   2. Let keyword be the content attribute’s keyword value corresponding to number, or the empty string if number is 0.

      This means that if the enumeration value is somehow set to the "unknown" value, the content attribute will be set to the empty string. However, this unknown value can never be set directly on the SVGAnimatedEnumeration object; it represents an unknown attribute value set in the markup.

   3. Set the content attribute to keyword.

   boolean

   Set the content attribute to "true" if value is true, and "false" otherwise.

   float

   double

   Set the content attribute to an implementation specific string that, if parsed as a <number> using CSS syntax, would return the number value closest to value, given the implementation’s supported real number precision.

   SVGLength

   Set the content attribute to the value that would be returned from getting value’s valueAsString member.

   SVGAngle

   Set the content attribute to the value that would be returned from getting value’s valueAsString member.

   SVGRect

   1. Let components be a list of four values, being the values of the x, y, width and height members of value.
   2. Let serialized components be a list of four strings, where each is an implementation specific string that, if parsed as a <number> using CSS syntax, would return the number value closest to the corresponding value in components, given the implementation’s supported real number precision.
   3. Set the content attribute to a string consisting of the strings in serialized components joined and separated by single U+0020 SPACE characters.

   DOMString

   Set the content attribute to value.

   SVGNumberList

   SVGLengthList

   SVGPointList

   SVGTransformList

   SVGStringList

   1. Let elements be the list of values in value.

      The values will be SVGNumber, SVGLength, SVGPoint or SVGTransform objects, or DOMString values, depending on value’s type.

   2. Let serialized elements be a list of strings, where each string is formed based on the corresponding value in elements and its type:

      an SVGNumber object

      The string is an implementation specific string that, if parsed as a <number> using CSS syntax, would return the number value closest to the SVGNumber object’s value member, given the implementation’s supported real number precision.

      an SVGLength object

      The string is the value that would be returned from getting the value’s valueAsString member.

      a SVGPoint object

      The string value is computed as follows:

      1. Let string be an empty string.
      2. Let x and y be the values of the SVGPoint object’s x and y coordinates, respectively.
      3. Append to string an implementation specific string that, if parsed as <number> using CSS syntax, would return the number value closest to x, given the implementation’s supported real number precision.
      4. Append a single U+002C COMMA character to string.
      5. Append to string an implementation specific string that, if parsed as <number> using CSS syntax, would return the number value closest to y, given the implementation’s supported real number precision.
      6. The string is string.

      a SVGTransform object

      The string is the serialization of the SVGTransform object’s matrix object.

      a DOMString

      The string is the DOMString’s value itself.

   3. Set the content attribute to a string consisting of the strings in serialized elements joined and separated by single U+0020 SPACE characters.

4.3.6. Reflecting an empty initial value

When initializing an SVG DOM attribute that reflects a null or empty initial value, then the property must be initialized according to its data type, as defined in this section. This occurs only if there is no explicit value for the reflected content attribute, and the initial value in the attribute’s definition table is (none).

If an interface is not listed below that means that the object initialization shall be done using the values for the objects that the interface contains, e.g., an SVGAnimatedString consists of two DOMString members, while a SVGRect consists of many doubles.

DOMString

Initialized as the empty string ("").

float

long

short

Any other numeric type defined in WebIDL

Initialized as 0.

boolean

Initialized as false.

SVGLength

Initialized as 0 user units (SVG_LENGTHTYPE_NUMBER).

SVGLengthList

SVGNumberList

SVGPointList

SVGStringList

SVGTransformList

Initialized as the empty list.

SVGAngle

Initialized as 0 in unspecified units (SVG_ANGLETYPE_UNSPECIFIED).

SVGPreserveAspectRatio

Initialized as 'xMidYMid meet'.

If textElement.dx.baseVal is accessed (where textElement is an instance of SVGTextElement) and the ‘dx’ attribute was not specified in the document, the returned SVGLengthList object would be empty.

4.3.7. Invalid values

If a script sets a reflected DOM attribute to an invalid value for the content attribute (e.g., a negative number for an attribute that requires a non-negative number), unless this specification indicates otherwise, no exception shall be raised on setting, but the given document fragment shall become technically in error as described in Error processing.

DOM attributes that reflect enumerated values using integer constants are an exception: these throw a TypeError when set to an out-of-range integer, or to the constant (0) that represents an unknown attribute value. This is consistent with the behavior of the WebIDL enumeration type [WebIDL].

4.4. DOM interfaces for SVG elements

[Exposed=Window]
interface SVGElement : Element {

  [SameObject] readonly attribute SVGAnimatedString className;

  readonly attribute SVGSVGElement? ownerSVGElement;
  readonly attribute SVGElement? viewportElement;
};

SVGElement includes GlobalEventHandlers;
SVGElement includes HTMLOrSVGOrMathMLElement;

dictionary SVGBoundingBoxOptions {
  boolean fill = true;
  boolean stroke = false;
  boolean markers = false;
  boolean clipped = false;
};

[Exposed=Window]
interface SVGGraphicsElement : SVGElement {
  [SameObject] readonly attribute SVGAnimatedTransformList transform;

  SVGRect getBBox(optional SVGBoundingBoxOptions options = {});
  SVGMatrix? getCTM();
  SVGMatrix? getScreenCTM();
};

SVGGraphicsElement includes SVGTests;

[Exposed=Window]
interface SVGGeometryElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedNumber pathLength;

  boolean isPointInFill(optional DOMPointInit point = {});
  boolean isPointInStroke(optional DOMPointInit point = {});
  float getTotalLength();
  SVGPoint getPointAtLength(float distance);
};

4.5. DOM interfaces for basic data types

4.5.1. Interface SVGNumber

The SVGNumber interface is used primarily to represent a <number> value that is a part of an SVGNumberList. Individual SVGNumber objects can also be created by script.

An SVGNumber object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below. SVGNumber objects reflected through the animVal IDL attribute are always read only.

An SVGNumber object can be associated with a particular element. The associated element is used to determine which element’s content attribute to update if the object reflects an attribute. Unless otherwise described, an SVGNumber object is not associated with any element.

An SVGNumber object maintains an internal number value, which is called its value.

[Exposed=Window]
interface SVGNumber {
  attribute float value;
};

The value IDL attribute represents the number. On getting value, the SVGNumber’s value is returned.

On setting value, the following steps are run:

1. If the SVGNumber is read only, then throw a NoModificationAllowedError.
2. Set the SVGNumber’s value to the value being assigned to the value member.
3. If the SVGNumber reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

4.5.2. Interface SVGLength

The SVGLength interface is used to represent a value that can be a <length>, <percentage> or <number> value.

An SVGLength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below. SVGLength objects reflected through the animVal IDL attribute are always read only.

An SVGLength object can be associated with a particular element, as well as being designated with a directionality: horizontal, vertical or unspecified. The associated element and the directionality of the length are used to resolve percentage values to user units and is also used to determine which element’s content attribute to update if the object reflects an attribute. Unless otherwise described, an SVGLength object is not associated with any element and has unspecified directionality.

An SVGLength object maintains an internal <length> or <percentage> or <number> value, which is called its value.

[Exposed=Window]
interface SVGLength {

  // Length Unit Types
  const unsigned short SVG_LENGTHTYPE_UNKNOWN = 0;
  const unsigned short SVG_LENGTHTYPE_NUMBER = 1;
  const unsigned short SVG_LENGTHTYPE_PERCENTAGE = 2;
  const unsigned short SVG_LENGTHTYPE_EMS = 3;
  const unsigned short SVG_LENGTHTYPE_EXS = 4;
  const unsigned short SVG_LENGTHTYPE_PX = 5;
  const unsigned short SVG_LENGTHTYPE_CM = 6;
  const unsigned short SVG_LENGTHTYPE_MM = 7;
  const unsigned short SVG_LENGTHTYPE_IN = 8;
  const unsigned short SVG_LENGTHTYPE_PT = 9;
  const unsigned short SVG_LENGTHTYPE_PC = 10;

  readonly attribute unsigned short unitType;
           attribute float value;
           attribute float valueInSpecifiedUnits;
           attribute DOMString valueAsString;

  undefined newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
  undefined convertToSpecifiedUnits(unsigned short unitType);
};

The numeric length unit type constants defined on SVGLength are used to represent the type of an SVGLength’s value. Their meanings are as follows:

The use of numeric length unit type constants is an anti-pattern and new constant values will not be introduced for any other units or length types supported by SVGLength. If other types of lengths are supported and used, the SVGLength uses the SVG_LENGTHTYPE_UNKNOWN unit type. See below for details on how the other properties of an SVGLength operate with these types of lengths.

The unitType IDL attribute represents the type of value that the SVGLength’s value is. On getting unitType, the following steps are run:

1. If the SVGLength’s value is a unitless <number>, a <percentage>, or a <length> with an em, ex, px, cm, mm, in, pt or pc unit, then return the corresponding constant value from the length unit type table above.
2. Otherwise, return SVG_LENGTHTYPE_UNKNOWN.

   For example, for a <length> with a ch unit or one that has a non-scalar value such as calc(), SVG_LENGTHTYPE_UNKNOWN would be returned.

The value IDL attribute represents the SVGLength’s value in user units. On getting value, the following steps are run:

1. Let value be the SVGLength’s value.
2. If value is a <number>, return that number.
3. Let viewport size be a basis to resolve percentages against, based on the SVGLength’s associated element and directionality:

   has no associated element

   viewport size is 100

   has an associated element and horizontal directionality

   viewport size is the width of the associated element’s SVG viewport

   has an associated element and vertical directionality

   viewport size is the height of the associated element’s SVG viewport

   has an associated element and unspecified directionality

   viewport size is the length of the associated element’s SVG viewport diagonal (see Units)

4. Let font size be a basis to resolve font size values against, based on the SVGLength’s associated element:

   has no associated element

   font size is the absolute length of the initial value of the font-size property

   has an associated element

   font size is the computed value of the associated element’s font-size property

5. Return the result of converting value to an absolute length, using viewport size and font size as percentage and font size bases. If the conversion is not possible due to the lack of an associated element, return 0.

On setting value, the following steps are run:

1. If the SVGLength object is read only, then throw a NoModificationAllowedError.
2. Let value be the value being assigned to value.
3. Set the SVGLength’s value to a <number> whose value is value.
4. If the SVGLength reflects the base value of a reflected attribute, reflects a presentation attribute, or reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

The valueInSpecifiedUnits IDL attribute represents the numeric factor of the SVGLength’s value. On getting valueInSpecifiedUnits, the following steps are run:

1. Let value be the SVGLength’s value.
2. If value is a <number>, return that number.
3. Otherwise, if value is a <percentage> or any scalar <length> value, return the numeric factor before its unit.
4. Otherwise, return 0.

   Thus valueInSpecifiedUnits would return 12 for both '12%' and 12em, but 0 would be returned for non-scalar values like calc(12px + 5%).

On setting valueInSpecifiedUnits, the following steps are run:

1. If the SVGLength object is read only, then throw a NoModificationAllowedError.
2. Let value be the value being assigned to valueInSpecifiedUnits.
3. If the SVGLength’s value is a <number>, then update its value to value.
4. Otherwise, if the SVGLength’s value is a <percentage> or a scalar-valued <length>, then update its numeric factor to value.
5. Otherwise, the SVGLength’s value is of some other type. Set it to a <number> whose value is value.
6. If the SVGLength reflects the base value of a reflected attribute or reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

The valueAsString IDL attribute represents the SVGLength’s value as a string. On getting valueAsString, the following steps are run:

1. Let value be the SVGLength’s value.
2. Let string be an empty string.
3. If value is a <number>, <percentage> or scalar <length> value, then:
   1. Let factor be value’s numeric factor, if it is a <percentage> or <length>, or value itself it is a <number>.
   2. Append to string an implementation specific string that, if parsed as a <number> using CSS syntax, would return the number value closest to factor, given the implementation’s supported real number precision.
   3. If value is a <percentage> then append to string a single U+0025 PERCENT SIGN character.
   4. Otherwise, if value is a <length>, then append to string the canonical spelling of value’s unit.
   5. Return string.
4. Otherwise, return an implementation specific string that, if parsed as a <length>, would return the closest length value to value, given the implementation’s supported real number precision.

On setting valueAsString, the following steps are run:

1. If the SVGLength object is read only, then throw a NoModificationAllowedError.
2. Let value be the value being assigned to valueAsString.
3. Parse value using the CSS syntax [ <number> | <length> | <percentage> ].
4. If parsing failed, then throw a SyntaxError.
5. Otherwise, parsing succeeded. Set SVGLength’s value to the parsed value.
6. If the SVGLength reflects the base value of a reflected attribute or reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

The newValueSpecifiedUnits method is used to set the SVGLength’s value in a typed manner. When newValueSpecifiedUnits(unitType, valueInSpecifiedUnits) is called, the following steps are run:

1. If the SVGLength object is read only, then throw a NoModificationAllowedError.
2. If unitType is SVG_LENGTHTYPE_UNKNOWN or is a value that does not appear in the length unit type table above, then throw a NotSupportedError.
3. Set SVGLength’s value depending on the value of unitType:

   SVG_LENGTHTYPE_NUMBER

   a <number> whose value is valueInSpecifiedUnits

   SVG_LENGTHTYPE_PERCENTAGE

   a <percentage> whose numeric factor is valueInSpecifiedUnits

   anything else

   a <length> whose numeric factor is valueInSpecifiedUnits and whose unit is as indicated by the length unit type table above

4. If the SVGLength reflects the base value of a reflected attribute or reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

The convertToSpecifiedUnits method is used to convert the SVGLength’s value to a specific type. When convertToSpecifiedUnits(unitType) is called, the following steps are run:

1. If the SVGLength object is read only, then throw a NoModificationAllowedError.
2. If unitType is SVG_LENGTHTYPE_UNKNOWN or is a value that does not appear in the length unit type table above, then throw a NotSupportedError.
3. Let absolute be the value that would be returned from the value member.
4. If unitType is SVG_LENGTHTYPE_NUMBER, then:
   1. Set the SVGLength’s value to a <number> whose value is absolute.
5. Otherwise, if unitType is SVG_LENGTHTYPE_PERCENTAGE, then:
   1. Let viewport size be a basis to resolve percentages against, based on the SVGLength’s associated element and directionality:

      has no associated element

      viewport size is 100

      has an associated element and horizontal directionality

      viewport size is the width of the associated element’s SVG viewport

      has an associated element and vertical directionality

      viewport size is the height of the associated element’s SVG viewport

      has an associated element and unspecified directionality

      viewport size is the length of the associated element’s SVG viewport diagonal (see Units)

   2. Set the SVGLength’s value to the result of converting absolute to a <percentage>, using viewport size as the percentage basis.
6. Otherwise, if unitType is SVG_LENGTHTYPE_EMS or SVG_LENGTHTYPE_EXS, then:
   1. Let font size be a basis to resolve font size values against, based on the SVGLength’s associated element:

      has no associated element

      font size is the absolute length of the initial value of the font-size property

      has an associated element

      font size is the computed value of the associated element’s font-size property

   2. Set the SVGLength’s value to the result of converting absolute to a <length> with an em or ex unit (depending on unitType), using font size as the font-size basis.
7. Otherwise:
   1. Set the SVGLength’s value to the result of converting absolute to a <length> with the unit found by looking up unitType in the length unit type table above.
8. If the SVGLength reflects the base value of a reflected attribute or reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

4.5.3. Interface SVGAngle

The SVGAngle interface is used to represent a value that can be an <angle> or <number> value.

An SVGAngle object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below. An SVGAngle reflected through the animVal attribute is always read only.

An SVGAngle object can be associated with a particular element. The associated element is used to determine which element’s content attribute to update if the object reflects an attribute. Unless otherwise described, an SVGAngle object is not associated with any element.

An SVGAngle object maintains an internal <angle> or <number> value, which is called its value.

[Exposed=Window]
interface SVGAngle {

  // Angle Unit Types
  const unsigned short SVG_ANGLETYPE_UNKNOWN = 0;
  const unsigned short SVG_ANGLETYPE_UNSPECIFIED = 1;
  const unsigned short SVG_ANGLETYPE_DEG = 2;
  const unsigned short SVG_ANGLETYPE_RAD = 3;
  const unsigned short SVG_ANGLETYPE_GRAD = 4;

  readonly attribute unsigned short unitType;
           attribute float value;
           attribute float valueInSpecifiedUnits;
           attribute DOMString valueAsString;

  undefined newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
  undefined convertToSpecifiedUnits(unsigned short unitType);
};

The numeric angle unit type constants defined on SVGAngle are used to represent the type of an SVGAngle’s value. Their meanings are as follows:

The use of numeric angle unit type constants is an anti-pattern and new constant values will not be introduced for any other units or angle types supported by SVGAngle. If other types of angles are supported and used, the SVGAngle uses the SVG_ANGLETYPE_UNKNOWN unit type. See below for details on how the other properties of an SVGAngle operate with these types of angles.

The unitType IDL attribute represents the type of value that the SVGAngle’s value is. On getting unitType, the following steps are run:

1. If the SVGAngle’s value is a unitless <number> or a <angle> with a deg, rad or grad unit, then return the corresponding constant value from the angle unit type table above.
2. Otherwise, return SVG_ANGLETYPE_UNKNOWN.

   For example, for an <angle> with a turn unit, SVG_ANGLETYPE_UNKNOWN would be returned.

The value IDL attribute represents the SVGAngle’s value in degrees. On getting value, the following steps are run:

1. Let value be the SVGAngle’s value.
2. If value is a <number>, return that number.
3. Return the result of converting value to an angle in degrees.

On setting value, the following steps are run:

1. If the SVGAngle object is read only, then throw a NoModificationAllowedError.
2. Let value be the value being assigned to value.
3. Set the SVGAngle’s value to a <number> whose value is value.
4. If the SVGAngle reflects the base value of a reflected attribute, then reserialize the reflected attribute.

The valueInSpecifiedUnits IDL attribute represents the numeric factor of the SVGAngle’s value. On getting valueInSpecifiedUnits, the following steps are run:

1. Let value be the SVGAngle’s value.
2. If value is a <number>, return that number.
3. Otherwise, value is an <angle> value. Return the numeric factor before its unit.

On setting valueInSpecifiedUnits, the following steps are run:

1. If the SVGAngle object is read only, then throw a NoModificationAllowedError.
2. Let value be the value being assigned to valueInSpecifiedUnits.
3. If the SVGAngle’s value is a <number>, then update its value to value.
4. Otherwise, if the SVGAngle’s value is an <angle>, then update its numeric factor to value.
5. If the SVGAngle reflects the base value of a reflected attribute or reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

The valueAsString IDL attribute represents the SVGAngle’s value as a string. On getting valueAsString, the following steps are run:

1. Let value be the SVGAngle’s value.
2. Let string be an empty string.
3. Let factor be value’s numeric factor, if it is an <angle>, or value itself it is a <number>.
4. Append to string an implementation specific string that, if parsed as a <number> using CSS syntax, would return the number value closest to factor, given the implementation’s supported real number precision.
5. If value is an <angle>, then append to string the canonical spelling of value’s unit.
6. Return string.

On setting valueAsString, the following steps are run:

1. If the SVGAngle object is read only, then throw a NoModificationAllowedError.
2. Let value be the value being assigned to valueAsString.
3. Parse value using the CSS syntax [ <number> | <angle> ].
4. If parsing failed, then throw a SyntaxError.
5. Otherwise, parsing succeeded. Set SVGAngle’s value to the parsed value.
6. If the SVGAngle reflects the base value of a reflected attribute or reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

The newValueSpecifiedUnits method is used to set the SVGAngle’s value in a typed manner. When newValueSpecifiedUnits(unitType, valueInSpecifiedUnits) is called, the following steps are run:

1. If the SVGAngle object is read only, then throw a NoModificationAllowedError.
2. If unitType is SVG_ANGLETYPE_UNKNOWN or is a value that does not appear in the angle unit type table above, then throw a NotSupportedError.
3. Set SVGAngle’s value depending on the value of unitType:

   SVG_ANGLETYPE_UNSPECIFIED

   a <number> whose value is valueInSpecifiedUnits

   anything else

   an <angle> whose numeric factor is valueInSpecifiedUnits and whose unit is as indicated by the angle unit type table above

4. If the SVGAngle reflects the base value of a reflected attribute or reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

The convertToSpecifiedUnits method is used to convert the SVGAngle’s value to a specific type. When convertToSpecifiedUnits(unitType) is called, the following steps are run:

1. If the SVGAngle object is read only, then throw a NoModificationAllowedError.
2. If unitType is SVG_ANGLETYPE_UNKNOWN or is a value that does not appear in the angle unit type table above, then throw a NotSupportedError.
3. Let degrees be the value that would be returned from the value member.
4. If unitType is SVG_ANGLETYPE_UNSPECIFIED, then:
   1. Set the SVGAngle’s value to a <number> whose value is degrees.
5. Otherwise:
   1. Set the SVGAngle’s value to the result of converting degrees to an <angle> with the unit found by looking up unitType in the angle unit type table above.
6. If the SVGAngle reflects the base value of a reflected attribute or reflects an element of the base value of a reflected attribute, then reserialize the reflected attribute.

4.5.4. List interfaces

Some SVG attributes contain lists of values, and to represent these values there are a number of SVG DOM list interfaces, one for each required element type – SVGNumberList, SVGLengthList, SVGPointList, SVGTransformList and SVGStringList. The first four are used to represent the base and animated components of SVGAnimatedNumberList, SVGAnimatedLengthList, SVGAnimatedPoints and SVGTransformList objects, while the fifth, SVGStringList, is used to reflect a few unanimated attributes that take a list of strings.

Most list interfaces take the following form:

interface SVGNameList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  Type initialize(Type newItem);
  getter Type getItem(unsigned long index);
  Type insertItemBefore(Type newItem, unsigned long index);
  Type replaceItem(Type newItem, unsigned long index);
  Type removeItem(unsigned long index);
  Type appendItem(Type newItem);
  setter undefined (unsigned long index, Type newItem);
};

where Name is a descriptive name for the list element’s ("Number", "Length", "Point", "Transform" or "String") and Type is the IDL type of the list’s elements (SVGNumber, SVGLength, SVGPoint, SVGTransform or DOMString).

The SVGTransformList interface takes the above form but has two additional methods on it.

All list interface objects apart from SVGTransformList reflect the base value of a reflected content attribute. SVGTransformList objects reflect a presentation attribute (‘transform’, ‘gradientTransform’ or ‘patternTransform’). All list interface objects are associated with a particular element. Unlike SVGLength and similar objects, there are no "detached" list interface objects.

A list interface object maintains an internal list of elements, which is referred to in the text below simply as "the list". The IDL attributes and methods are used to inspect and manipulate elements of the list. The list can also be changed in response to changes to the reflected content attribute and to animation of the content attribute (or, for SVGTransformList objects, in response to changes to the computed value of the transform property).

When the list’s element type is an object type, the elements of the list are those objects and not copies of them. getItem, the indexed property getter (declared as getItem in the IDL above), and every method that returns an element of the list (initialize, insertItemBefore, replaceItem, appendItem and consolidate) return that object. Two accesses of the same index therefore return the same object, for as long as that object is the element at that index. For a method that takes an item as its argument, the object returned is not necessarily the one that was passed, since the method’s steps may have replaced it by a copy. Whether an object is still the element at an index after the reflected content attribute changes is decided by the steps for synchronizing a list interface object. When the element type is DOMString, elements are returned and compared by value.

A list interface object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below. list interface objects reflected through the animVal IDL attribute are always read only.

A list interface object is synchronized by running the following steps:

1. Let value be the base value of the reflected content attribute. If the attribute is not present, or if its value cannot be parsed, let value be the attribute’s initial value, or an empty list if the attribute’s initial value is (none).
2. Let length be the number of items in the list.
3. Let new length be the number of values in value. If value is the keyword none (as supported by the transform property), new length is 0.
4. If the list element type is SVGNumber, SVGLength, SVGPoint or SVGTransform, then:
   1. If length > new length, then:
      1. Detach each object in the list at an index greater than or equal to new length.
      2. Truncate the list to length new length.
      3. Set length to new length.
   2. While length < new length:
      1. Let item be a newly created object of the list element type.
      2. Attach item to this list interface object.
      3. Append item to the list.
      4. Set length to length + 1.
   3. Let index be 0.
   4. While index < length:
      1. Let item be the object in the list at index index.
      2. Let v be the value in value at index index.
      3. Set item’s value to v.
      4. If item is an SVGTransform object, then set the components of its matrix object to match the new transform function value.
      5. Set index to index + 1.
5. Otherwise, the list element type is DOMString:
   1. Replace the list with a new list consisting of the values in value.

Whenever a list element object is to be detached, the following steps are run, depending on the list element type:

SVGNumber

Set the SVGNumber to no longer be associated with any element. If the SVGNumber is read only, set it to be no longer read only.

SVGLength

Set the SVGLength to no longer be associated with any element. If the SVGLength is read only, set it to be no longer read only. Set the SVGLength to have unspecified directionality.

SVGPoint

Set the SVGPoint to no longer be associated with any element. If the SVGPoint is read only, set it to be no longer read only.

SVGTransform

Set the SVGTransform to no longer be associated with any element. If the SVGTransform is read only, set it to be no longer read only.

DOMString

Nothing is done.

Whenever a list element object is to be attached, the following steps are run, depending on the list element type:

The supported property indices of a list interface object is the set of all non-negative integers less than the length of the list.

The length and numberOfItems IDL attributes represents the length of the list, and on getting simply return the length of the list.

The clear method is used to remove all items in the list. When clear() is called, the following steps are run:

1. If the list is read only, then throw a NoModificationAllowedError.
2. Detach and then remove all elements in the list.
3. If the list reflects an attribute, or represents the base value of an object that reflects an attribute, then reserialize the reflected attribute.

The initialize method is used to clear the list and add a single, specified value to it. When initialize(newItem) is called, the following steps are run:

1. If the list is read only, then throw a NoModificationAllowedError.
2. Detach and then remove all elements in the list.
3. If newItem is an object type, and newItem is not a detached object, then set newItem to be a newly created object of the same type as newItem and which has the same (number or length) value.
4. Attach newItem to the list interface object.
5. Append newItem to this list.
6. If the list reflects an attribute, or represents the base value of an object that reflects an attribute, then reserialize the reflected attribute.
7. Return newItem.

The getItem method is used to get an item from the list at the specified position. When getItem(index) is called, the following steps are run:

1. If index is greater than or equal to the length of the list, then throw an IndexSizeError.
2. Return the element in the list at position index.

   Note that if the list’s element type is an object type, such as SVGLength, then a reference to that object and not a copy of it is returned.

The insertItemBefore method is used to insert an element into the list at a specific position. When insertItemBefore(newItem, index) is called, the following steps are run:

1. If the list is read only, then throw a NoModificationAllowedError.
2. If newItem is an object type, and newItem is not a detached object, then set newItem to be a newly created object of the same type as newItem and which has the same (number or length) value.
3. If index is greater than the length of the list, then set index to be the list length.
4. Insert newItem into the list at index index.
5. Attach newItem to the list interface object.
6. If the list reflects an attribute, or represents the base value of an object that reflects an attribute, then reserialize the reflected attribute.
7. Return newItem.

The replaceItem method is used to replace an existing item in the list with a new item. When replaceItem(newItem, index) is called, the following steps are run:

1. If the list is read only, then throw a NoModificationAllowedError.
2. If index is greater than or equal to the length of the list, then throw an IndexSizeError.
3. If newItem is an object type, and newItem is not a detached object, then set newItem to be a newly created object of the same type as newItem and which has the same (number or length) value.
4. Detach the element in the list at index index.
5. Replace the element in the list at index index with newItem.
6. Attach newItem to the list interface object.
7. If the list reflects an attribute, or represents the base value of an object that reflects an attribute, then reserialize the reflected attribute.
8. Return newItem.

The removeItem method is used to remove an item from the list. When removeItem(index) is called, the following steps are run:

1. If the list is read only, then throw a NoModificationAllowedError.
2. If index is greater than or equal to the length of the list, then throw an IndexSizeError with code.
3. Let item be the list element at index index.
4. Detach item.
5. Remove the list element at index index.
6. Return item.

The appendItem method is used to append an item to the end of the list. When appendItem(newItem) is called, the following steps are run:

1. If the list is read only, then throw a NoModificationAllowedError.
2. If newItem is an object type, and newItem is not a detached object, then set newItem to be a newly created object of the same type as newItem and which has the same (number or length) value.
3. Let index be the length of the list.
4. Append newItem to the end of the list.
5. Attach newItem to the list interface object.
6. If the list reflects an attribute, or represents the base value of an object that reflects an attribute, then reserialize the reflected attribute.
7. Return newItem.

The behavior of the indexed property setter is the same as that for the replaceItem method.

4.5.5. Interface SVGNumberList

The SVGNumberList interface is a list interface whose elements are SVGNumber objects. An SVGNumberList object represents a list of numbers.

[Exposed=Window]
interface SVGNumberList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  SVGNumber initialize(SVGNumber newItem);
  getter SVGNumber getItem(unsigned long index);
  SVGNumber insertItemBefore(SVGNumber newItem, unsigned long index);
  SVGNumber replaceItem(SVGNumber newItem, unsigned long index);
  SVGNumber removeItem(unsigned long index);
  SVGNumber appendItem(SVGNumber newItem);
  setter undefined (unsigned long index, SVGNumber newItem);
};

The behavior of all of the interface members of SVGNumberList are defined in the List interfaces section above.

4.5.6. Interface SVGLengthList

The SVGLengthList interface is a list interface whose elements are SVGLength objects. An SVGLengthList object represents a list of lengths.

[Exposed=Window]
interface SVGLengthList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  SVGLength initialize(SVGLength newItem);
  getter SVGLength getItem(unsigned long index);
  SVGLength insertItemBefore(SVGLength newItem, unsigned long index);
  SVGLength replaceItem(SVGLength newItem, unsigned long index);
  SVGLength removeItem(unsigned long index);
  SVGLength appendItem(SVGLength newItem);
  setter undefined (unsigned long index, SVGLength newItem);
};

The behavior of all of the interface members of SVGLengthList are defined in the List interfaces section above.

4.5.7. Interface SVGStringList

The SVGStringList interface is a list interface whose elements are DOMString values. An SVGStringList object represents a list of strings.

[Exposed=Window]
interface SVGStringList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  DOMString initialize(DOMString newItem);
  getter DOMString getItem(unsigned long index);
  DOMString insertItemBefore(DOMString newItem, unsigned long index);
  DOMString replaceItem(DOMString newItem, unsigned long index);
  DOMString removeItem(unsigned long index);
  DOMString appendItem(DOMString newItem);
  setter undefined (unsigned long index, DOMString newItem);
};

The behavior of all of the interface members of SVGStringList are defined in the List interfaces section above.

4.6. DOM interfaces for reflecting animatable SVG attributes

The following interfaces are used to represent the reflected value of animatable content attributes. They each consist of two component objects, representing the same data: baseVal and animVal. The baseVal (base value) object is modifiable, to update the corresponding attribute value.

In SVG 1.1, the animVal attribute of the SVG DOM interfaces represented the current animated value of the reflected attribute. In this version of SVG, animVal no longer represents the current animated value and is instead an alias of baseVal.

4.6.1. Interface SVGAnimatedBoolean

An SVGAnimatedBoolean object is used to reflect an animatable attribute that takes a boolean value.

[Exposed=Window]
interface SVGAnimatedBoolean {
           attribute boolean baseVal;
  readonly attribute boolean animVal;
};

The baseVal and animVal IDL attributes both represent the current non-animated value of the reflected attribute. On getting baseVal or animVal, the following steps are run:

1. Let value be the value of the reflected attribute, or the empty string if it is not present.
2. If value is not "true" or "false", then set value to the reflected attribute’s initial value.
3. Return true if value is "true", and false otherwise.

On setting baseVal, the reflected attribute is set to "true" if the value is true, and "false" otherwise.

4.6.2. Interface SVGAnimatedEnumeration

An SVGAnimatedEnumeration object is used to reflect an animatable attribute that takes a keyword value (such as the ‘method’ attribute on ‘textPath’) or to reflect the type of value that an animatable attribute has (done only by the orientType IDL attribute for the ‘marker’ element’s ‘orient’ attribute).

[Exposed=Window]
interface SVGAnimatedEnumeration {
           attribute unsigned short baseVal;
  readonly attribute unsigned short animVal;
};

For SVGAnimatedEnumeration objects that reflect an animatable attribute that takes only a keyword value, the baseVal and animVal IDL attributes represents the current non-animated value of the reflected attribute. For orientType, they represent the type of the current non-animated value of the reflected ‘orient’ attribute. On getting baseVal or animVal, the following steps are run:

1. Let value be the value of the reflected attribute (using the attribute’s initial value if it is not present or invalid).
2. Return the numeric type value for value, according to the reflecting IDL attribute’s definition.

On setting baseVal, the following steps are run:

1. Let value be the value being assigned to baseVal.
2. If value is 0 or is not the numeric type value for any value of the reflected attribute, then throw a TypeError.
3. Otherwise, if the reflecting IDL attribute is orientType and value is SVG_MARKER_ORIENT_ANGLE, then set the reflected attribute to the string "0".
4. Otherwise, value is the numeric type value for a specific, single keyword value for the reflected attribute. Set the reflected attribute to that value.

4.6.3. Interface SVGAnimatedInteger

An SVGAnimatedInteger object is used to reflect an animatable attribute that takes an integer value (such as ‘numOctaves’ on ‘feTurbulence’). It is also used to reflect one part of an animatable attribute that takes an integer followed by an optional second integer (such as ‘order’ on ‘feConvolveMatrix’).

This SVGAnimatedInteger interface is not used in this specification, however the Filter Effects specification has a number of uses of it.

[Exposed=Window]
interface SVGAnimatedInteger {
           attribute long baseVal;
  readonly attribute long animVal;
};

For SVGAnimatedInteger objects that reflect an animatable attribute that takes a single integer value, the baseVal and animVal IDL attributes represent the current non-animated value of the reflected attribute. For those that reflect one integer of an attribute that takes an integer followed by an optional second integer, they represent the current non-animated value of one of the two integers. On getting baseVal or animVal, the following steps are run:

1. Let value be the value of the reflected attribute (using the attribute’s initial value if it is not present or invalid).
2. If the reflected attribute is defined to take an integer followed by an optional second integer, then:
   1. If this SVGAnimatedInteger object reflects the first integer, then return the first value in value.
   2. Otherwise, this SVGAnimatedInteger object reflects the second integer. Return the second value in value if it has been explicitly specified, and if not, return the implicit value as described in the definition of the attribute.

      For example, the definition of ‘order’ says that the implicit second integer is the same as the explicit first integer.

3. Otherwise, the reflected attribute is defined to take a single integer value. Return value.

On setting baseVal, the following steps are run:

1. Let value be the value being assigned to baseVal.
2. Let new be a list of integers.
3. If the reflected attribute is defined to take an integer followed by an optional second integer, then:
   1. Let current be the value of the reflected attribute (using the attribute’s initial value if it is not present or invalid).
   2. Let first be the first integer in current.
   3. Let second be the second integer in current if it has been explicitly specified, and if not, the implicit value as described in the definition of the attribute.
   4. If this SVGAnimatedInteger object reflects the first integer, then set first to value. Otherwise, set second to value.
   5. Append first to new.
   6. Append second to new.
4. Otherwise, the reflected attribute is defined to take a single integer value. Append value to new.
5. Set the content attribute to a string consisting of each integer in new serialized to an implementation specific string that, if parsed as an <number> using CSS syntax, would return that integer, joined and separated by a single U+0020 SPACE character.

4.6.4. Interface SVGAnimatedNumber

An SVGAnimatedNumber object is used to reflect an animatable attribute that takes a number value (such as ‘pathLength’ on ‘path’). It is also used to reflect one part of an animatable attribute that takes an number followed by an optional second number (such as ‘kernelUnitLength’ on ‘feDiffuseLighting’).

[Exposed=Window]
interface SVGAnimatedNumber {
           attribute float baseVal;
  readonly attribute float animVal;
};

For SVGAnimatedNumber objects that reflect an animatable attribute that takes a single number value, the baseVal and animVal IDL attributes represent the current non-animated value of the reflected attribute. For those that reflect one number of an attribute that takes a number followed by an optional second number, they represent the current non-animated value of one of the two numbers. On getting baseVal or animVal, the following steps are run:

1. Let value be the value of the reflected attribute (using the attribute’s initial value if it is not present or invalid).
2. If the reflected attribute is defined to take an number followed by an optional second number, then:
   1. If this SVGAnimatedNumber object reflects the first number, then return the first value in value.
   2. Otherwise, this SVGAnimatedNumber object reflects the second number. Return the second value in value if it has been explicitly specified, and if not, return the implicit value as described in the definition of the attribute.

      For example, the definition of ‘kernelUnitLength’ says that the implicit second number is the same as the explicit first number.

3. Otherwise, the reflected attribute is defined to take a single number value. Return value.

On setting baseVal, the following steps are run:

1. Let value be the value being assigned to baseVal.
2. Let new be a list of numbers.
3. If the reflected attribute is defined to take an number followed by an optional second number, then:
   1. Let current be the value of the reflected attribute (using the attribute’s initial value if it is not present or invalid).
   2. Let first be the first number in current.
   3. Let second be the second number in current if it has been explicitly specified, and if not, the implicit value as described in the definition of the attribute.
   4. If this SVGAnimatedNumber object reflects the first number, then set first to value. Otherwise, set second to value.
   5. Append first to new.
   6. Append second to new.
4. Otherwise, the reflected attribute is defined to take a single number value. Append value to new.
5. Set the content attribute to a string consisting of each number in new serialized to an implementation specific string that, if parsed as an <number> using CSS syntax, would return the value closest to the number (given the implementation’s supported Precisionreal number precision), joined and separated by a single U+0020 SPACE character.

4.6.5. Interface SVGAnimatedLength

An SVGAnimatedLength object is used to reflect either (a) an animatable attribute that takes a <length>, <percentage> or <number> value, or (b) a CSS property that takes one of these values and its corresponding presentation attribute.

[Exposed=Window]
interface SVGAnimatedLength {
  [SameObject] readonly attribute SVGLength baseVal;
  [SameObject] readonly attribute SVGLength animVal;
};

The baseVal and animVal IDL attributes represent the current value of the reflected content attribute. On getting baseVal or animVal, an SVGLength object is returned that:

• either reflects the base value of the reflected attribute or reflects the given presentation attribute,
• is associated with the SVG element that the object with the reflecting IDL attribute of type SVGAnimatedLength was obtained from, and
• has a directionality as defined by the specific reflected attribute.

4.6.6. Interface SVGAnimatedAngle

An SVGAnimatedAngle object is used to reflect the <angle> value of the animated ‘orient’ attribute on ‘marker’, through the orientAngle IDL attribute.

[Exposed=Window]
interface SVGAnimatedAngle {
  [SameObject] readonly attribute SVGAngle baseVal;
  [SameObject] readonly attribute SVGAngle animVal;
};

The baseVal and animVal IDL attributes represent the current non-animated <angle> value of the reflected ‘orient’ attribute. On getting baseVal or animVal, an SVGAngle object is returned that:

• reflects the base value of the reflected ‘orient’ attribute, and
• is associated with the SVG ‘marker’ element that the object with the reflecting IDL attribute of type SVGAnimatedAngle was obtained from.

4.6.7. Interface SVGAnimatedString

An SVGAnimatedString object is used to reflect an animatable attribute that takes a string value. It can optionally be defined to additionally reflect a second, deprecated attribute.

[Exposed=Window]
interface SVGAnimatedString {
           attribute (DOMString or TrustedScriptURL) baseVal;
  readonly attribute DOMString animVal;
};

The baseVal and animVal IDL attributes represent the current non-animated value of the reflected attribute. On getting baseVal or animVal, the following steps are run:

1. If the reflected attribute is not present, then:
   1. If the SVGAnimatedString object is defined to additionally reflect a second, deprecated attribute, and that attribute is present, then return its value.
   2. Otherwise, if the reflected attribute has an initial value, then return it.
   3. Otherwise, return the empty string.
2. Otherwise, the reflected attribute is present. Return its value.

For the href member on the SVGURIReference interface, this will result in the deprecated ‘xlink:href’ attribute being returned if it is present and the ‘href’ attribute is not, and in the ‘href’ attribute being returned in all other cases.

On setting baseVal, the following steps are run:

1. If the reflected attribute’s element is an SVGScriptElement, let value be the result of executing the Get Trusted Type compliant string algorithm, with TrustedScriptURL, reflected attribute’s Document’s relevant global object, 'SVGScriptElement href', and 'script'.
2. Otherwise, let value be the specified value.
3. If the reflected attribute is not present, the SVGAnimatedString object is defined to additionally reflect a second, deprecated attribute, and that deprecated attribute is present, then set that deprecated attribute to value.
4. Otherwise, set the reflected attribute to value.

SVG does not have a complete script processing model yet. Trusted Types assumes that the attribute and text body modification protections behave similarly to ones for HTML scripts.

For the href member on the SVGURIReference interface, this will result in the deprecated ‘xlink:href’ attribute being set if it is present and the ‘href’ attribute is not, and in the ‘href’ attribute being set in all other cases.

4.6.8. Interface SVGAnimatedRect

An SVGAnimatedRect object is used to reflect an animatable attribute that takes a rectangle value as specified by an x, y, width and height.

In this specification the only attribute to be reflected as an SVGAnimatedRect is ‘viewBox’.

[Exposed=Window]
interface SVGAnimatedRect {
  [SameObject] readonly attribute SVGRect baseVal;
  [SameObject] readonly attribute SVGRect animVal;
};

The baseVal and animVal IDL attributes represent the current non-animated rectangle value of the reflected attribute. On getting baseVal or animVal, a SVGRect object is returned.

Upon creation of the baseVal or animVal SVGRect objects, and afterwards whenever the reflected content attribute is added, removed, or changed, the following steps are run:

1. Let value be the value of the reflected attribute (using the attribute’s initial value if it is not present or invalid).
2. Let x, y, width and height be those corresponding components of value.
3. Set the SVGRect object’s x coordinate, y coordinate, width and height to x, y, width and height, respectively.

Whenever the x coordinate, y coordinate, width or height property of the baseVal or animVal SVGRect object changes, except as part of the previous algorithm that reflects the value of the content attribute into the SVGRect, the reflected content attribute must be reserialized.

4.6.9. Interface SVGAnimatedNumberList

An SVGAnimatedNumberList object is used to reflect an animatable attribute that takes a list of <number> values.

[Exposed=Window]
interface SVGAnimatedNumberList {
  [SameObject] readonly attribute SVGNumberList baseVal;
  [SameObject] readonly attribute SVGNumberList animVal;
};

The baseVal and animVal IDL attributes represent the current non-animated value of the reflected attribute. On getting baseVal or animVal, an SVGNumberList object is returned that reflects the base value of the reflected attribute.

4.6.10. Interface SVGAnimatedLengthList

An SVGAnimatedLengthList object is used to reflect an animatable attribute that takes a list of <length>, <percentage> or <number> values.

[Exposed=Window]
interface SVGAnimatedLengthList {
  [SameObject] readonly attribute SVGLengthList baseVal;
  [SameObject] readonly attribute SVGLengthList animVal;
};

The baseVal or animVal IDL attributes represent the current non-animated value of the reflected attribute. On getting baseVal or animVal, an SVGLengthList object is returned that reflects the base value of the reflected attribute.

4.7. Other DOM interfaces

4.7.1. Interface SVGUnitTypes

The SVGUnitTypes interface defines a commonly used set of constants used for reflecting ‘gradientUnits’, ‘patternContentUnits’ and other similar attributes.

[Exposed=Window]
interface SVGUnitTypes {
  // Unit Types
  const unsigned short SVG_UNIT_TYPE_UNKNOWN = 0;
  const unsigned short SVG_UNIT_TYPE_USERSPACEONUSE = 1;
  const unsigned short SVG_UNIT_TYPE_OBJECTBOUNDINGBOX = 2;
};

The unit type constants defined on SVGUnitTypes have the following meanings:

4.7.2. Mixin SVGTests

The SVGTests interface is used to reflect conditional processing attributes, and is mixed in to other interfaces for elements that support these attributes.

interface mixin SVGTests {
  [SameObject] readonly attribute SVGStringList requiredExtensions;
  [SameObject] readonly attribute SVGStringList systemLanguage;
};

The requiredExtensions IDL attribute reflects the ‘requiredExtensions’ content attribute.

The systemLanguage IDL attribute reflects the ‘systemLanguage’ content attribute.

4.7.3. Mixin SVGFitToViewBox

The SVGFitToViewBox interface is used to reflect the ‘viewBox’ and ‘preserveAspectRatio’ attributes, and is mixed in to other interfaces for elements that support these two attributes.

interface mixin SVGFitToViewBox {
  [SameObject] readonly attribute SVGAnimatedRect viewBox;
  [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};

The viewBox IDL attribute reflects the ‘viewBox’ content attribute.

The preserveAspectRatio IDL attribute reflects the ‘preserveAspectRatio’ content attribute.

4.7.4. Mixin SVGURIReference

The SVGURIReference interface is used to reflect the ‘href’ attribute and the deprecated ‘xlink:href’ attribute.

interface mixin SVGURIReference {
  [SameObject] readonly attribute SVGAnimatedString href;
};

The href IDL attribute represents the value of the ‘href’ attribute, and, on elements that are defined to support it, the deprecated ‘xlink:href’ attribute. On getting href, an SVGAnimatedString object is returned that:

• reflects the ‘href’ attribute, and
• if the element is defined to support the deprecated ‘xlink:href’ attribute, additionally reflects that deprecated attribute.

The SVGAnimatedString interface is defined to reflect, through its baseVal and animVal members, the deprecated ‘xlink:href’ attribute, if that attribute is present and the ‘href’ is not, and to reflect the ‘href’ attribute in all other circumstances. Animation elements treat attributeName='xlink:href' as being an alias for targeting the ‘href’ attribute.

5. Document Structure

5.1. Defining an SVG document fragment: the ‘svg’ element

5.1.1. Overview

An SVG document fragment consists of any number of SVG elements contained within an ‘svg’ element.

An SVG document fragment can range from an empty fragment (i.e., no content inside of the ‘svg’ element), to a very simple SVG document fragment containing a single SVG graphics element such as a ‘rect’, to a complex, deeply nested collection of container elements and graphics elements.

An SVG document fragment can stand by itself as a self-contained file or resource, in which case the SVG document fragment is an SVG document, or it can be embedded inline as a fragment within a parent HTML or XML document.

The following example shows simple SVG content embedded inline as a fragment within a parent XML document. Note the use of XML namespaces to indicate that the ‘svg’ and ‘ellipse’ elements belong to the SVG namespace:

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org"
        xmlns:svg="http://www.w3.org/2000/svg">
   <!-- parent contents here -->
   <svg:svg width="4cm" height="8cm">
      <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
   </svg:svg>
   <!-- ... -->
</parent>

This example shows a slightly more complex (i.e., it contains multiple rectangles) stand-alone, self-contained SVG document:

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Four separate rectangles
  </desc>
    <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
    <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
    <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
    <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>

  <!-- Show outline of viewport using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
        fill="none" stroke="blue" stroke-width=".02cm" />

</svg>

‘svg’ elements can appear in the middle of SVG content. This is the mechanism by which SVG document fragments can be embedded within other SVG document fragments.

Another use for ‘svg’ elements within the middle of SVG content is to establish a new SVG viewport. (See Establishing a new SVG viewport.)

5.1.2. Namespace

When SVG is parsed as a XML, for compliance with the Namespaces in XML Recommendation [xml-names], an SVG namespace declaration must be provided so that all SVG elements are identified as belonging to the SVG namespace.

When using the HTML syntax, the namespace is provided automatically by the HTML parser.

<html>
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="green">
</svg>
</html>

As the example shows there’s no need to have an ‘xmlns’ attribute declaring that the element is in the SVG namespace when using the HTML parser. The HTML parser will automatically create the SVG elements in the proper namespace.

This section should talk about how a document’s behavior is defined in terms of the DOM, and also explain how the HTML parser can create SVG fragments.

The SVG 2 namespace is http://www.w3.org/2000/svg, which is the same as for earlier versions of SVG.

The following are possible ways to provide a namespace declaration when SVG is parsed as XML. An ‘xmlns’ attribute without a namespace prefix could be specified on an ‘svg’ element, which means that SVG is the default namespace for all elements within the scope of the element with the ‘xmlns’ attribute:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="green" />
</svg>

If a namespace prefix is specified on the ‘xmlns’ attribute (e.g., xmlns:svg="http://www.w3.org/2000/svg"), then the corresponding namespace is not the default namespace, so an explicit namespace prefix must be assigned to the elements:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <svg:rect x="10" y="10" width="80" height="80" fill="green" />
</svg:svg>

Namespace prefixes can be specified on ancestor elements (illustrated in the above example). For more information, refer to the Namespaces in XML Recommendation [xml-names].

5.1.3. Definitions

structural element

The structural elements are those which define the primary structure of an SVG document. Specifically, the following elements are structural elements: ‘defs’, ‘g’, ‘svg’, ‘symbol’ and ‘use’.

structurally external element

Elements that define its structure by reference to an external resource. Specifically, the following elements are structurally external elements when they have an ‘href’ attribute: ‘foreignObject’, ‘image’, ‘script’ and ‘use’.

current SVG document fragment

The document sub-tree which starts with the outermost ancestor ‘svg’ element of a given SVG element, with the requirement that all container elements between the outermost ‘svg’ and the given element are all elements in the SVG namespace.

outermost svg element

The furthest ‘svg’ ancestor element that remains in the current SVG document fragment.

SVG document fragment

A document sub-tree which starts with an ‘svg’ element which is either the root element of the document or whose parent element is not in the SVG namespace. An SVG document fragment can consist of a stand-alone SVG document, or a fragment of a parent document enclosed by an ‘svg’ element. However, an ‘svg’ element that is a direct child of another SVG-namespaced element is not the root of an SVG document fragment.

SVG elements

Any element in the SVG namespace.

graphics element

One of the element types that can cause graphics to be drawn onto the target canvas. Specifically: ‘circle’, ‘ellipse’, ‘foreignObject’, ‘image’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’, ‘text’, ‘textPath’ and ‘tspan’.

graphics referencing element

A graphics element which uses a reference to a different document or element as the source of its graphical content. Specifically: ‘image’ and ‘use’.

5.1.4. The ‘svg’ element

The x and y attributes specify the top-left corner of the rectangular region into which an embedded ‘svg’ element is placed. On an outermost svg element, these attributes have no effect.

For outermost svg elements, the width and height attributes specify the intrinsic size of the SVG document fragment. For embedded ‘svg’ elements, they specify the size of the rectangular region into which the ‘svg’ element is placed. In either case, a computed style of auto is treated equivalent to 100%.

If an SVG document is likely to be referenced as a component of another document, the author will often want to include a ‘viewBox’ attribute on the outermost svg element of the referenced document. This attribute provides a convenient way to design SVG documents to scale-to-fit into an arbitrary SVG viewport.

The ‘svg’ element exposes as event handler content attributes a number of the event handlers of the Window object. It also mirrors their event handler IDL attributes.

The onblur, ‘onerror’, onfocus, ‘onload’, and ‘onscroll’ event handlers of the Window object, exposed on the ‘svg’ element, replace the generic event handlers with the same names normally supported by SVG elements.

5.2. Grouping: the ‘g’ element

5.2.1. Overview

container element

An element which can have graphics elements and other container elements as child elements. Specifically: ‘a’, ‘clipPath’, ‘defs’, ‘g’, ‘marker’, ‘mask’, ‘pattern’, ‘svg’, ‘switch’ and ‘symbol’.

The ‘g’ element is a container element for grouping together related graphics elements.

A group of elements, as well as individual objects, can be given a name using the ‘id’ attribute. Named groups are needed for several purposes such as animation and re-usable objects.

An example:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>

  <!-- Show outline of viewport using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

A ‘g’ element can contain other ‘g’ elements nested within it, to an arbitrary depth.

5.2.2. The ‘g’ element

5.3. Defining content for reuse, and the ‘defs’ element

5.3.1. Overview

SVG allows a graphical object to be defined for later reuse. To do this, SVG makes extensive use of the URL reference construct [rfc3987]. For example, to fill a rectangle with a linear gradient, a ‘linearGradient’ element may be defined with an ‘id’ property that may be referenced in the value for the rectangle’s fill property, as in the following:

<linearGradient id="MyGradient">...</linearGradient>
<rect style="fill:url(#MyGradient)"/>

Some types of element, such as gradients, will not by themselves produce a graphical result. They can therefore be placed anywhere convenient. However, sometimes it is desired to define a graphical object and prevent it from being directly rendered. it is only there to be referenced elsewhere. To do this, and to allow convenient grouping defined content, SVG provides the ‘defs’ element.

It is recommended that, where possible, referenced elements be defined prior to the elements that use them, in document order. Collecting all referenced elements inside of a single ‘defs’ element near the top of the file can make the markup easier to read and understand.

5.3.2. The ‘defs’ element

The ‘defs’ element is a container element for referenced elements. For understandability and accessibility reasons, it is recommended that, whenever possible, referenced elements be defined inside of a ‘defs’.

The content model for ‘defs’ is the same as for the ‘g’ element; thus, any element that can be a child of a ‘g’ can also be a child of a ‘defs’, and vice versa.

Elements that are descendants of a ‘defs’ are not rendered directly; the display value for the ‘defs’ element must always be set to none by the user agent style sheet, and this declaration must have importance over any other CSS rule or presentation attribute. Note, however, that the descendants of a ‘defs’ are always present in the source tree and thus can always be referenced by other elements; thus, the value of the display property on the ‘defs’ element does not prevent those elements from being referenced by other elements.