W3C

Scalable Vector Graphics (SVG) 1.1 (Second Edition)

W3C Recommendation 16 August 2011

This version:
http://www.w3.org/TR/2011/REC-SVG11-20110816/
Latest version:
http://www.w3.org/TR/SVG11/
Previous version:
http://www.w3.org/TR/2011/PR-SVG11-20110609/
Public comments:
www-svg@w3.org (archive)
Editors:
Erik Dahlström, Opera Software <ed@opera.com>
Patrick Dengler, Microsoft Corporation <patd@microsoft.com>
Anthony Grasso, Canon Inc. <anthony.grasso@cisra.canon.com.au>
Chris Lilley, W3C <chris@w3.org>
Cameron McCormack, Mozilla Corporation <cam@mcc.id.au>
Doug Schepers, W3C <schepers@w3.org>
Jonathan Watt, Mozilla Corporation <jwatt@jwatt.org>
Jon Ferraiolo, ex Adobe Systems <jferrai@us.ibm.com> (Versions 1.0 and 1.1 First Edition; until 10 May 2006)
藤沢 淳 (FUJISAWA Jun), Canon Inc. <fujisawa.jun@canon.co.jp> (Version 1.1 First Edition)
Dean Jackson, ex W3C <dean@w3.org> (Version 1.1 First Edition; until February 2007)

Please refer to the errata for this document, which may include some normative corrections.

This document is also available in these non-normative formats: a single-page version, a zip archive of HTML (without external dependencies), and a PDF. See also translations, noting that the English version of this specification is the only normative version.


Abstract

This specification defines the features and syntax for Scalable Vector Graphics (SVG) Version 1.1, a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This document is the 16 August 2011 SVG 1.1 Second Edition Recommendation. The Second Edition incorporates a number of corrections that were published as errata against the First Edition, as well as numerous other changes that help make the specification more readable and unambiguous. The Changes appendix lists all of the changes that were made since the first Proposed Recommendation publication of the Second Edition. For all changes made between the First Edition and the Second Edition, see:

Comments on this Recommendation are welcome. Corrections against the specification will be published as errata, and subsequently will be incorporated into future editions of SVG 1.1 or into SVG 2.0. Comments can be sent to www-svg@w3.org, the public email list for issues related to vector graphics on the Web. This list is archived and senders must agree to have their message publicly archived from their first posting. To subscribe send an email to www-svg-request@w3.org with the word subscribe in the subject line.

The W3C SVG Working Group has released an expanded test suite for SVG 1.1 along with an implementation report. This test suite will continue to be updated with new tests to improve interoperability even after Recommendation phase.

This document has been produced by the W3C SVG Working Group as part of the Graphics Activity within the W3C Interaction Domain. The goals of the W3C SVG Working Group are discussed in the W3C SVG Charter. The W3C SVG Working Group maintains a public Web page, http://www.w3.org/Graphics/SVG/, that contains further background information. The authors of this document are the SVG Working Group participants.

This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

Available languages

The English version of this specification is the only normative version. However, for translations in other languages see http://www.w3.org/Graphics/SVG/svg-updates/translations.html.

Table of Contents

  1. 1 Introduction
  2. 2 Concepts
  3. 3 Rendering Model
  4. 4 Basic Data Types and Interfaces
  5. 5 Document Structure
  6. 6 Styling
  7. 7 Coordinate Systems, Transformations and Units
  8. 8 Paths
  9. 9 Basic Shapes
  10. 10 Text
  11. 11 Painting: Filling, Stroking and Marker Symbols
  12. 12 Color
  13. 13 Gradients and Patterns
  14. 14 Clipping, Masking and Compositing
  15. 15 Filter Effects
  16. 16 Interactivity
  17. 17 Linking
  18. 18 Scripting
  19. 19 Animation
  20. 20 Fonts
  21. 21 Metadata
  22. 22 Backwards Compatibility
  23. 23 Extensibility
  1. Appendix A: Document Type Definition
  2. Appendix B: SVG Document Object Model (DOM)
  3. Appendix C: IDL Definitions
  4. Appendix D: Java Language Binding
  5. Appendix E: ECMAScript Language Binding
  6. Appendix F: Implementation Requirements
  7. Appendix G: Conformance Criteria
  8. Appendix H: Accessibility Support
  9. Appendix I: Internationalization Support
  10. Appendix J: Minimizing SVG File Sizes
  11. Appendix K: References
  12. Appendix L: Element Index
  13. Appendix M: Attribute Index
  14. Appendix N: Property Index
  15. Appendix O: Feature Strings
  16. Appendix P: Media Type Registration for image/svg+xml
  17. Appendix Q: Changes

Acknowledgments

The SVG Working Group would like to thank the following people for contributing to this specification by raising issues that resulted in errata that were folded in to this document: Tavmjong Bah, Brian Birtles, Tolga Capin, Alex Danilo, Thomas DeWeese, Alexey Feldgendler, Vincent Hardy, Ian Hickson, Olaf Hoffmann, Daniel Holbert, Oliver Hunt, Anne van Kesteren, Takeshi Kurosawa, Paul Libbrecht, Robert Longson, Helder Magalhães, Robert O’Callahan, Olli Pettay, Antoine Quint, Kalle Raita, Tim Rowley, Peter Sorotokin, Henry S. Thompson, Jasper van de Gronde, Mohamed Zergaoui, Boris Zbarsky.

In addition, the SVG Working Group would like to acknowledge the contributions of the editors and authors of SVG 1.0 and SVG 1.1 (First Edition), as much of the text in this document derives from these earlier versions of the SVG specification.

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.


Expanded Table of Contents


1 Introduction

Contents

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 in XML [XML10]. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.

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 such as ‘onmouseover’ and ‘onclick’ can be assigned to any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features like scripting can be done on XHTML and SVG elements simultaneously within the same Web page.

SVG is a language for rich graphical content. For accessibility reasons, if there is an original source document containing higher-level structure and semantics, it is recommended that the higher-level information be made available somehow, either by making the original source document available, or making an alternative version available in an alternative format which conveys the higher-level information, or by using SVG's facilities to include the higher-level information within the SVG content. For suggested techniques in achieving greater accessibility, see Accessibility.

SVG 1.1 is a modularization of SVG 1.0 [SVG10]. See the Document Type Definition appendix for details on how the DTD is structured to allow profiling and composition with other XML languages.

1.2 SVG MIME type, file name extension and Macintosh file type

The MIME type for SVG is "image/svg+xml" (see XML Media Types [RFC3023]). The registration of this MIME type is in progress at the W3C.

It is recommended that SVG files have the extension ".svg" (all lowercase) on all platforms. It is recommended that gzip-compressed [RFC1952] SVG files have the extension ".svgz" (all lowercase) on all platforms.

It is recommended that SVG files stored on Macintosh HFS file systems be given a file type of "svg " (all lowercase, with a space character as the fourth letter). It is recommended that gzip-compressed SVG files stored on Macintosh HFS file systems be given a file type of "svgz" (all lowercase).

1.3 SVG Namespace, Public Identifier and System Identifier

The following are the SVG 1.1 namespace, public identifier and system identifier:

SVG Namespace:
http://www.w3.org/2000/svg
Public Identifier for SVG 1.1:
PUBLIC "-//W3C//DTD SVG 1.1//EN"
System Identifier for the SVG 1.1 Recommendation:
http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd

The following is an example document type declaration for an SVG document:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Note that DTD listed in the System Identifier is a modularized DTD (i.e. its contents are spread over multiple files), which means that a validator may have to fetch the multiple modules in order to validate. For that reason, there is a single flattened DTD available that corresponds to the SVG 1.1 modularized DTD. It can be found at http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd.

While a DTD is provided in this specification, the use of DTDs for validating XML documents is known to be problematic. In particular, DTDs do not handle namespaces gracefully. It is not recommended that a DOCTYPE declaration be included in SVG documents.

1.4 Compatibility with Other Standards Efforts

SVG leverages and integrates with other W3C specifications and standards efforts. By leveraging and conforming to other standards, SVG becomes more powerful and makes it easier for users to learn how to incorporate SVG into their Web sites.

The following describes some of the ways in which SVG maintains compatibility with, leverages and integrates with other W3C efforts:

In environments which support DOM 2 Core [DOM2] for other XML grammars (e.g., XHTML [XHTML]) and which also support SVG and the SVG DOM, a single scripting approach can be used simultaneously for both XML documents and SVG graphics, in which case interactive and dynamic effects will be possible on multiple XML namespaces using the same set of scripts.

1.5 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. These recommendations are not normative and conformance with this specification does not depend on their realization. These recommendations contain the expression "We recommend ...", "This specification recommends ...", or some similar wording.

1.6 Definitions

animation element
An animation element is an element that can be used to animate the attribute or property value of another element. The following elements are animation elements: ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘animate’ and ‘set’.
animation event attribute
An animation event attribute is an event attribute that specifies script to run for a particular animation-related event. See Animation event attributes. The animation event attributes are ‘onbegin’, ‘onend’, ‘onload’ and ‘onrepeat’.
basic shape
Standard shapes which are predefined in SVG as a convenience for common graphical operations. Specifically: ‘circle’, ‘ellipse’, ‘line’, ‘polygon’, ‘polyline’ and ‘rect’.
canvas
A surface onto which graphics elements are drawn, which can be real physical media such as a display or paper or an abstract surface such as a allocated region of computer memory. See the discussion of the SVG canvas in the chapter on Coordinate Systems, Transformations and Units.
clipping path
A combination of ‘path’, ‘text’ and basic shapes which serve as the outline of a (in the absence of anti-aliasing) 1-bit mask, where everything on the "inside" of the outline is allowed to show through but everything on the outside is masked out. See Clipping paths.
container element
An element which can have graphics elements and other container elements as child elements. Specifically: ‘a’, ‘defs’, ‘glyph’, ‘g’, ‘marker’, ‘mask’, ‘missing-glyph’, ‘pattern’, ‘svg’, ‘switch’ and ‘symbol’.
conditional processing attribute
A conditional processing attribute is one that controls whether or not the element on which it appears is processed. Most elements, but not all, may have conditional processing attributes specified on them. See Conditional processing for details. The conditional processing attributes defined in SVG 1.1 are ‘requiredExtensions’, ‘requiredFeatures’ and ‘systemLanguage’.
core attributes
The core attributes are those attributes that can be specified on any SVG element. See Common attributes. The core attributes are ‘id’, ‘xml:base’, ‘xml:lang’ and ‘xml:space’.
current innermost SVG document fragment
The XML document sub-tree which starts with the most immediate ancestor ‘svg’ element of a given SVG element.
current SVG document fragment
The XML 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 this element are all elements in the SVG language.
current transformation matrix (CTM)
Transformation matrices define the mathematical mapping from one coordinate system into another using a 3x3 matrix using the equation [x' y' 1] = [x y 1] * matrix. The current transformation matrix (CTM) defines the mapping from the user coordinate system into the viewport coordinate system. See Coordinate system transformations.
descriptive element
An element which provides supplementary descriptive information about its parent. Specifically, the following elements are descriptive elements: ‘desc’, ‘metadata’ and ‘title’.
document event attribute
A document event attribute is an event attribute that specifies script to run for a particular document-wide event. See Document-level event attributes. The document event attributes are ‘onabort’, ‘onerror’, ‘onresize’, ‘onscroll’, ‘onunload’ and ‘onzoom’.
event attribute
An event attribute is one that specifies some script to run when an event of a certain type is dispatched to the element on which the attribute is specified. See Event attributes.
fill
The operation of painting the interior of a shape or the interior of the character glyphs in a text string.
filter primitive attributes
The filter primitive attributes is the set of attributes that are common to all filter primitive elements. They are ‘height’, ‘result’, ‘width’, ‘x’ and ‘y’.
filter primitive element
A filter primitive element is one that can be used as a child of a ‘filter’ element to specify a node in the filter graph. The following elements are the filter primitive elements defined in SVG 1.1: ‘feBlend’, ‘feColorMatrix’, ‘feComponentTransfer’, ‘feComposite’, ‘feConvolveMatrix’, ‘feDiffuseLighting’, ‘feDisplacementMap’, ‘feFlood’, ‘feGaussianBlur’, ‘feImage’, ‘feMerge’, ‘feMorphology’, ‘feOffset’, ‘feSpecularLighting’, ‘feTile’ and ‘feTurbulence’.
font
A font represents an organized collection of glyphs in which the various glyph representations will share a common look or styling such that, when a string of characters is rendered together, the result is highly legible, conveys a particular artistic style and provides consistent inter-character alignment and spacing.
glyph
A glyph represents a unit of rendered content within a font. Often, there is a one-to-one correspondence between characters to be drawn and corresponding glyphs (e.g., often, the character "A" is rendered using a single glyph), but other times multiple glyphs are used to render a single character (e.g., use of accents) or a single glyph can be used to render multiple characters (e.g., ligatures). Typically, a glyph is defined by one or more shapes such as a path, possibly with additional information such as rendering hints that help a font engine to produce legible text in small sizes.
gradient element
A gradient element is one that defines a gradient paint server. SVG 1.1 defines the following gradient elements: ‘linearGradient’ and ‘radialGradient’.
graphical event attribute
A graphical event attribute is an event attribute that specifies script to run for a particular user interaction event. See Event attributes on graphics and container elements. The graphical event attributes are ‘onactivate’, ‘onclick’, ‘onfocusin’, ‘onfocusout’, ‘onload’, ‘onmousedown’, ‘onmousemove’, ‘onmouseout’, ‘onmouseover’ and ‘onmouseup’.
graphics element
One of the element types that can cause graphics to be drawn onto the target canvas. Specifically: ‘circle’, ‘ellipse’, ‘image’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’, ‘text’ and ‘use’.
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’.
hit-testing
The process of determining whether a pointer intersects a given graphics element. Hit-testing is used in determining which element to dispatch a mouse event to, which might be done in response to the user moving the pointing device, or by changes in the position, shape and other attributes of elements in the document. Hit-testing is also known as hit detection or picking. See hit-testing and processing order for user interface events and the definition of the ‘pointer-events’ property.
IRI reference
An IRI reference is an Internationalized Resource Identifier with an optional fragment identifier, as defined in Internationalized Resource Identifiers [RFC3987]. An IRI reference serves as a reference to a resource or (with a fragment identifier) to a secondary resource. See References and the ‘defs’ element.
light source element
A light source element is one that can specify light source information for an ‘feDiffuseLighting’ or ‘feSpecularLighting’ element. The following light source elements are defined in SVG 1.1: ‘feDistantLight’, ‘fePointLight’ and ‘feSpotLight’.
local IRI reference
An Internationalized Resource Identifier [RFC3987] that does not include an <absoluteIRI> or <relativeIRI> and thus represents a reference to an element within the current document. See References and the ‘defs’ element.
mask
A container element which can contain graphics elements or other container elements which define a set of graphics that is to be used as a semi-transparent mask for compositing foreground objects into the current background. See Masks.
non-local IRI reference
An Internationalized Resource Identifier [RFC3987] that includes an <absoluteIRI> or <relativeIRI> and thus (usually) represents a reference to a different document or an element within a different document. See References and the ‘defs’ element.
outermost svg element
The furthest ‘svg’ ancestor element that remains in the current SVG document fragment.
paint
A paint represents a way of putting color values onto the canvas. A paint might consist of both color values and associated alpha values which control the blending of colors against already existing color values on the canvas. SVG supports three types of built-in paint: color, gradients and patterns.
presentation attribute
An XML attribute on an SVG element which specifies a value for a given property for that element. See Styling. Note that although any property may be specified on any element, not all properties will apply to (affect the rendering of) a given element. The definition of each property states to what set of elements it applies.
property
A parameter that helps specify how a document should be rendered. A complete list of SVG's properties can be found in Property Index. Properties are assigned to elements in the SVG language either by presentation attributes on elements in the SVG language or by using a styling language such as CSS [CSS2]. See Styling.
rootmost ‘svg’ element

The rootmost ‘svg’ element is the furthest ‘svg’ ancestor element that does not exit an SVG context. See also SVG document fragment.

shape
A graphics element that is defined by some combination of straight lines and curves. Specifically: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’.
stroke
The operation of painting the outline of a shape or the outline of character glyphs in a text string.
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’.
SVG canvas
The canvas onto which the SVG content is rendered. See the discussion of the SVG canvas in the chapter on Coordinate Systems, Transformations and Units.
SVG context

An SVG context is a document fragment where all elements within the fragment must be subject to processing by an SVG user agent according to the rules in this specification.

If SVG content is embedded inline within parent XML (such as XHTML), the SVG context does not include the ancestors above the rootmost ‘svg’ element. If the SVG content contains any ‘foreignObject’ elements which in turn contain non-SVG content, the SVG context does not include the contents of the ‘foreignObject’ elements.

SVG document fragment
The XML document sub-tree which starts with an ‘svg’ element. An SVG document fragment can consist of a stand-alone SVG document, or a fragment of a parent XML document enclosed by an ‘svg’ element. When an ‘svg’ element is a descendant of another ‘svg’ element, there are two SVG document fragments, one for each ‘svg’ element. (One SVG document fragment is contained within another SVG document fragment.)
SVG user agent
An SVG user agent is a user agent that is able to retrieve and render SVG content.
SVG viewport
The viewport within the SVG canvas which defines the rectangular region into which SVG content is rendered. See the discussion of the SVG viewport in the chapter on Coordinate Systems, Transformations and Units.
text content element
A text content element is an SVG element that causes a text string to be rendered onto the canvas. The SVG 1.1 text content elements are the following: ‘altGlyph’, ‘textPath’, ‘text’, ‘tref’ and ‘tspan’
text content child element
A text content child element is a text content element that is allowed as a descendant of another text content element. In SVG 1.1, the text content child elements are the following: ‘altGlyph’, ‘textPath’, ‘tref’ and ‘tspan’
text content block element
A text content block element is a text content element that serves as a standalone element for a unit of text, and which may optionally contain certain child text content elements (e.g. ‘tspan’). .
transformation
A modification of the current transformation matrix (CTM) by providing a supplemental transformation in the form of a set of simple transformations specifications (such as scaling, rotation or translation) and/or one or more transformation matrices. See Coordinate system transformations.
transformation matrix
Transformation matrices define the mathematical mapping from one coordinate system into another using a 3x3 matrix using the equation [x' y' 1] = [x y 1] * matrix. See current transformation matrix (CTM) and Coordinate system transformations.
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.

A "user agent" may or may not have the ability to retrieve and render SVG content; however, an "SVG user agent" retrieves and renders SVG content.

user coordinate system
In general, a coordinate system defines locations and distances on the current canvas. The current user coordinate system is the coordinate system that is currently active and which is used to define how coordinates and lengths are located and computed, respectively, on the current canvas. See initial user coordinate system and Coordinate system transformations.
user space
A synonym for user coordinate system.
user units
A coordinate value or length expressed in user units represents a coordinate value or length in the current user coordinate system. Thus, 10 user units represents a length of 10 units in the current user coordinate system.
viewport
A rectangular region within the current canvas onto which graphics elements are to be rendered. See the discussion of the SVG viewport in the chapter on Coordinate Systems, Transformations and Units.
viewport coordinate system
In general, a coordinate system defines locations and distances on the current canvas. The viewport coordinate system is the coordinate system that is active at the start of processing of an ‘svg’ element, before processing the optional ‘viewBox’ attribute. In the case of an SVG document fragment that is embedded within a parent document which uses CSS to manage its layout, then the viewport coordinate system will have the same orientation and lengths as in CSS, with the origin at the top-left on the viewport. See The initial viewport and Establishing a new viewport.
viewport space
A synonym for viewport coordinate system.
viewport units
A coordinate value or length expressed in viewport units represents a coordinate value or length in the viewport coordinate system. Thus, 10 viewport units represents a length of 10 units in the viewport coordinate system.
XLink attributes
The XLink attributes are the seven attributes defined in the XML Linking Language specification [XLINK], which are used on various SVG elements that can reference resources. The most import XLink attribute is ‘xlink:href’, whose definition can be found on each element that allows it. The remaining XLink attributes are ‘xlink:type’, ‘xlink:role’, ‘xlink:arcrole’, ‘xlink:title’, ‘xlink:show’ and ‘xlink:actuate’.

2 Concepts

Contents

2.1 Explaining the name: SVG

SVG stands for Scalable Vector Graphics, an XML grammar for stylable graphics, usable as an XML namespace.

Scalable

To be scalable means to increase or decrease uniformly. In terms of graphics, scalable means not being limited to a single, fixed, pixel size. On the Web, scalable means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. SVG, being a graphics technology for the Web, is scalable in both senses of the word.

SVG graphics are scalable to different display resolutions, so that for example printed output uses the full resolution of the printer and can be displayed at the same size on screens of different resolutions. The same SVG graphic can be placed at different sizes on the same Web page, and re-used at different sizes on different pages. SVG graphics can be magnified to see fine detail, or to aid those with low vision.

SVG graphics are scalable because the same SVG content can be a stand-alone graphic or can be referenced or included inside other SVG graphics, thereby allowing a complex illustration to be built up in parts, perhaps by several people. The symbol, marker and font capabilities promote re-use of graphical components, maximize the advantages of HTTP caching and avoid the need for a centralized registry of approved symbols.

Vector

Vector graphics contain geometric objects such as lines and curves. This gives greater flexibility compared to raster-only formats (such as PNG and JPEG) which have to store information for every pixel of the graphic. Typically, vector formats can also integrate raster images and can combine them with vector information such as clipping paths to produce a complete illustration; SVG is no exception.

Since all modern displays are raster-oriented, the difference between raster-only and vector graphics comes down to where they are rasterized; client side in the case of vector graphics, as opposed to already rasterized on the server. SVG gives control over the rasterization process, for example to allow anti-aliased artwork without the ugly aliasing typical of low quality vector implementations. SVG also provides client-side raster filter effects, so that moving to a vector format does not mean the loss of popular effects such as soft drop shadows.

Graphics

Most existing XML grammars represent either textual information, or represent raw data such as financial information. They typically provide only rudimentary graphical capabilities, often less capable than the HTML 'img' element. SVG fills a gap in the market by providing a rich, structured description of vector and mixed vector/raster graphics; it can be used stand-alone, or as an XML namespace with other grammars.

XML

XML, a for structured information exchange, has become extremely popular and is both widely and reliably implemented. By being written in XML, SVG builds on this strong foundation and gains many advantages such as a sound basis for internationalization, powerful structuring capability, an object model, and so on. By building on existing, cleanly-implemented specifications, XML-based grammars are open to implementation without a huge reverse engineering effort.

Namespace

It is certainly useful to have a stand-alone, SVG-only viewer. But SVG is also intended to be used as one component in a multi-namespace XML application. This multiplies the power of each of the namespaces used, to allow innovative new content to be created. For example, SVG graphics may be included in a document which uses any text-oriented XML namespace - including XHTML. A scientific document, for example, might also use MathML for mathematics in the document. The combination of SVG and SMIL leads to interesting, time based, graphically rich presentations.

SVG is a good, general-purpose component for any multi-namespace grammar that needs to use graphics.

Stylable

The advantages of style sheets in terms of presentational control, flexibility, faster download and improved maintenance are now generally accepted, certainly for use with text. SVG extends this control to the realm of graphics.

The combination of scripting, DOM and CSS is often termed "Dynamic HTML" and is widely used for animation, interactivity and presentational effects. SVG allows the same script-based manipulation of the document tree and the style sheet.

2.2 Important SVG concepts

Graphical Objects

With any XML grammar, consideration has to be given to what exactly is being modelled. For textual formats, modelling is typically at the level of paragraphs and phrases, rather than individual nouns, adverbs, or phonemes. Similarly, SVG models graphics at the level of graphical objects rather than individual points.

SVG provides a general path element, which can be used to create a huge variety of graphical objects, and also provides common basic shapes such as rectangles and ellipses. These are convenient for hand coding and may be used in the same ways as the more general path element. SVG provides fine control over the coordinate system in which graphical objects are defined and the transformations that will be applied during rendering.

Symbols

It would have been possible to define some standard symbols that SVG would provide. But which ones? There would always be additional symbols for electronics, cartography, flowcharts, etc., that people would need that were not provided until the "next version". SVG allows users to create, re-use and share their own symbols without requiring a centralized registry. Communities of users can create and refine the symbols that they need, without having to ask a committee. Designers can be sure exactly of the graphical appearance of the symbols they use and not have to worry about unsupported symbols.

Symbols may be used at different sizes and orientations, and can be restyled to fit in with the rest of the graphical composition.

Raster Effects

Many existing Web graphics use the filtering operations found in paint packages to create blurs, shadows, lighting effects and so on. With the client-side rasterization used with vector formats, such effects might be thought impossible. SVG allows the declarative specification of filters, either singly or in combination, which can be applied on the client side when the SVG is rendered. These are specified in such a way that the graphics are still scalable and displayable at different resolutions.

Fonts

Graphically rich material is often highly dependent on the particular font used and the exact spacing of the glyphs. In many cases, designers convert text to outlines to avoid any font substitution problems. This means that the original text is not present and thus searchability and accessibility suffer. In response to feedback from designers, SVG includes font elements so that both text and graphical appearance are preserved.

Animation

Animation can be produced via script-based manipulation of the document, but scripts are difficult to edit and interchange between authoring tools is harder. Again in response to feedback from the design community, SVG includes declarative animation elements which were designed collaboratively by the SVG and SYMM Working Groups. This allows the animated effects common in existing Web graphics to be expressed in SVG.

2.3 Options for using SVG in Web pages

There are a variety of ways in which SVG content can be included within a Web page. Here are some of the options:

A stand-alone SVG Web page
In this case, an SVG document (i.e., a Web resource whose MIME type is "image/svg+xml") is loaded directly into a user agent such as a Web browser. The SVG document is the Web page that is presented to the user.
Embedding by reference
In this case, a parent Web page references a separately stored SVG document and specifies that the given SVG document should be embedded as a component of the parent Web page. For HTML or XHTML, here are three options:
  • The HTML/XHTML ‘img’ element is the most common method for using graphics in HTML pages. For faster display, the width and height of the image can be given as attributes. One attribute that is required is ‘alt’, used to give an alternate textual string for people browsing with images off, or who cannot see the images. The string cannot contain any markup. A ‘longdesc’ attribute lets you point to a longer description - often in HTML - which can have markup and richer formatting.
  • The HTML/XHTML ‘object’ element can contain other elements nested within it, unlike ‘img’, which is empty. This means that several different formats can be offered, using nested ‘object’ elements, with a final textual alternative (including markup, links, etc). The outermost element which can be displayed will be used.
  • The HTML/XHTML ‘applet’ element which can invoke a Java applet to view SVG content within the given Web page. These applets can do many things, but a common task is to use them to display images, particularly ones in unusual formats or which need to be presented under the control of a program for some other reason.
Embedding inline
In this case, SVG content is embedded inline directly within the parent Web page. An example is an XHTML Web page with an SVG document fragment textually included within the XHTML.
External link, using the HTML ‘a’ element
This allows any stand-alone SVG viewer to be used, which can (but need not) be a different program to that used to display HTML. This option typically is used for unusual image formats.
Referenced from a CSS or XSL property
When a user agent supports CSS-styled XML content [CSS2] or XSL [XSL] and the user agent is a Conforming SVG Viewer, then that user agent must support the ability to reference SVG resources wherever CSS or XSL properties allow for the referencing of raster images, including the ability to tile SVG graphics wherever necessary and the ability to composite the SVG into the background if it has transparent portions. Examples include the ‘background-image’ and ‘list-style-image’ properties ([CSS2], sections 14.2.1 and 12.6.2) that are included in both CSS and XSL.

3 Rendering Model

Contents

3.1 Introduction

Implementations of SVG are expected to behave as though they implement a rendering (or imaging) model corresponding to the one described in this chapter. A real implementation is not required to implement the model in this way, but the result on any device supported by the implementation shall match that described by this model.

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

3.2 The painters model

SVG uses a "painters model" of rendering. Paint is applied in successive operations to the output device such that each operation paints over some area of the output device. When the area overlaps a previously painted area the new paint partially or completely obscures the old. When the paint is not completely opaque the result on the output device is defined by the (mathematical) rules for compositing described under Alpha Blending.

3.3 Rendering Order

Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements.

3.4 How groups are rendered

Grouping elements such as the ‘g’ element (see container elements) have the effect of producing a temporary separate canvas initialized to transparent black onto which child elements are painted. Upon the completion of the group, any filter effects specified for the group are applied to create a modified temporary canvas. The modified temporary canvas is composited into the background, taking into account any group-level masking and opacity settings on the group.

3.5 How elements are rendered

Individual graphics elements are rendered as if each graphics element represented its own group; thus, the effect is as if a temporary separate canvas is created for each graphics element. The element is first painted onto the temporary canvas (see Painting shapes and text and Painting raster images below). Then any filter effects specified for the graphics element are applied to create a modified temporary canvas. The modified temporary canvas is then composited into the background, taking into account any clipping, masking and object opacity settings on the graphics element.

3.6 Types of graphics elements

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

3.6.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). A stroke operation is centered on the outline of the object; thus, in effect, half of the paint falls on the interior of the shape and half of the paint falls outside of the shape.

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

The fill is painted first, then the stroke, and then the marker symbols. The marker symbols are rendered in order along the outline of the shape, from the start of the shape to the end of the shape.

Each fill and stroke operation has its own opacity settings; thus, you can fill and/or stroke a shape with a semi-transparently drawn solid color, with different opacity values for the fill and stroke operations.

The fill and stroke operations are entirely independent painting operations; thus, if you both fill and stroke a shape, half of the stroke will be painted on top of part of the fill.

SVG supports the following built-in types of paint which can be used in fill and stroke operations:

3.6.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.

3.7 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.8 Clipping, masking and object opacity

SVG allows any painting operation to be limited to a subregion of the output device by clipping and masking. This is described in Clipping, Masking and Compositing.

Clipping uses a path to define a region of the output device to which paint can be applied. Any painting operation executed within the scope of the clipping must be rendered such that only those parts of the device that fall within the clipping region are affected by the painting operation. A clipping path can be thought of as a mask wherein those pixels outside the clipping path are black with an alpha value of zero and those pixels inside the clipping path are white with an alpha value of one. "Within" is defined by the same rules used to determine the interior of a path for painting. The clipping path is typically anti-aliased on low-resolution devices (see ‘shape-rendering’. Clipping is described in Clipping paths.

Masking uses the luminance of the color channels and alpha channel in a referenced SVG element to define a supplemental set of alpha values which are multiplied to the alpha values already present in the graphics to which the mask is applied. Masking is described in Masking.

A supplemental masking operation may also be specified by applying a "global" opacity to a set of rendering operations. In this case the mask is infinite, with a color of white and an alpha channel of the given opacity value. (See the ‘opacity’ property.)

In all cases the SVG implementation must behave as though all painting and filtering is first performed to an intermediate canvas which has been initialized to transparent black. Then, alpha values on the intermediate canvas are multiplied by the implicit alpha values from the clipping path, the alpha values from the mask, and the alpha values from the ‘opacity’ property. The resulting canvas is composited into the background using simple alpha blending. Thus if an area of the output device is painted with a group opacity of 50% using opaque red paint followed by opaque green paint the result is as though it had been painted with just 50% opaque green paint. This is because the opaque green paint completely obscures the red paint on the intermediate canvas before the intermediate as a whole is rendered onto the output device.

3.9 Parent Compositing

SVG document fragments can be semi-opaque. In many environments (e.g., Web browsers), the SVG document fragment has a final compositing step where the document as a whole is blended translucently into the background canvas.


5 Document Structure

Contents

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 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" version="1.1">
      <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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Four separate rectangles
  </desc>
    <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
    <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
    <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
    <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>

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

</svg>

‘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 viewport. (See Establishing a new viewport.)

In all cases, for compliance with the Namespaces in XML Recommendation [XML-NS], an SVG namespace declaration must be provided so that all SVG elements are identified as belonging to the SVG namespace. The following are possible ways to provide a namespace declaration. An ‘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" …>
  <rect …/>
</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" …>
  <svg:rect …/>
</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-NS].

5.1.2 The ‘svg’ element

‘svg’
Categories:
Container element, structural element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

Attribute definitions:

version = "<number>"
Indicates the SVG language version to which this document fragment conforms.
In SVG 1.0 [SVG10], this attribute was fixed to the value '1.0'. For SVG 1.1, the attribute should have the value '1.1'.
Animatable: no.
baseProfile = profile-name
Describes the minimum SVG language profile that the author believes is necessary to correctly render the content. The attribute does not specify any processing restrictions; It can be considered metadata. For example, the value of the attribute could be used by an authoring tool to warn the user when they are modifying the document beyond the scope of the specified base profile. Each SVG profile should define the text that is appropriate for this attribute.
If the attribute is not specified, the effect is as if a value of 'none' were specified.
Animatable: no.
x = "<coordinate>"
(Has no meaning or effect on outermost svg elements.)
The x-axis coordinate of one corner of the rectangular region into which an embedded ‘svg’ element is placed.
If the attribute is not specified, the effect is as if a value of '0' were specified.
Animatable: yes.
y = "<coordinate>"
(Has no meaning or effect on outermost svg elements.)
The y-axis coordinate of one corner of the rectangular region into which an embedded ‘svg’ element is placed.
If the attribute is not specified, the effect is as if a value of '0' were specified.
Animatable: yes.
width = "<length>"
For outermost svg elements, the intrinsic width of the SVG document fragment. For embedded ‘svg’ elements, the width of the rectangular region into which the ‘svg’ element is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of '100%' were specified.
Animatable: yes.
height = "<length>"
For outermost svg elements, the intrinsic height of the SVG document fragment. For embedded ‘svg’ elements, the height of the rectangular region into which the ‘svg’ element is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of '100%' were specified.
Animatable: yes.
preserveAspectRatio = "[defer] <align> [<meetOrSlice>]"

See ‘preserveAspectRatio’.

If the attribute is not specified, then the effect is as if a value of 'xMidYMid meet' were specified.

Animatable: yes.

contentScriptType = "content-type"

See 'contentScriptType'.

contentStyleType = "content-type"

See 'contentStyleType'.

zoomAndPan = "disable | magnify"

See 'zoomAndPan'.

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 viewport.

5.2 Grouping: the ‘g’ element

5.2.1 Overview

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

Grouping constructs, when used in conjunction with the ‘desc’ and ‘title’ elements, provide information about document structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.

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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>

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

View this example as SVG (SVG-enabled browsers only)

A ‘g’ element can contain other ‘g’ elements nested within it, to an arbitrary depth. Thus, the following is possible:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <desc>Groups can nest</desc>
  <g>
     <g>
       <g>
       </g>
     </g>
   </g>
</svg>

Any element that is not contained within a ‘g’ is treated (at least conceptually) as if it were in its own group.

5.2.2 The ‘g’ element

‘g’
Categories:
Container element, structural element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

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

5.3.1 Overview

SVG allows graphical objects to be defined for later reuse. To do this, it makes extensive use of IRI references [RFC3987] to these other objects. For example, to fill a rectangle with a linear gradient, you first define a ‘linearGradient’ element and give it an ID, as in:

<linearGradient id="MyGradient">...</linearGradient>

You then reference the linear gradient as the value of the ‘fill’ property for the rectangle, as in:

<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, wherever possible, referenced elements be defined inside of a ‘defs’ element. Among the elements that are always referenced: ‘altGlyphDef’, ‘clipPath’, ‘cursor’, ‘filter’, ‘linearGradient’, ‘marker’, ‘mask’, ‘pattern’, ‘radialGradient’ and ‘symbol’. Defining these elements inside of a ‘defs’ element promotes understandability of the SVG content and thus promotes accessibility.

5.3.2 The ‘defs’ element

‘defs’
Categories:
Container element, structural element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

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; they are prevented from becoming part of the rendering tree just as if the ‘defs’ element were a ‘g’ element and the ‘display’ property were set to none. 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 or any of its descendants does not prevent those elements from being referenced by other elements.

To provide some SVG user agents with an opportunity to implement efficient implementations in streaming environments, creators of SVG content are encouraged to place all elements which are targets of local IRI references within a ‘defs’ element which is a direct child of one of the ancestors of the referencing element. For example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Local URI references within ancestor's 'defs' element.</desc>
  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="1cm" y="1cm" width="6cm" height="1cm" 
        fill="url(#Gradient01)"  />

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

</svg>

View this example as SVG (SVG-enabled browsers only)

In the document above, the linear gradient is defined within a ‘defs’ element which is the direct child of the ‘svg’ element, which in turn is an ancestor of the ‘rect’ element which references the linear gradient. Thus, the above document conforms to the guideline.

5.4 The ‘desc’ and ‘title’ elements

‘desc’
Categories:
Descriptive element
Content model:
Any elements or character data.
Attributes:
DOM Interfaces:
‘title’
Categories:
Descriptive element
Content model:
Any elements or character data.
Attributes:
DOM Interfaces:

Each container element or graphics element in an SVG drawing can supply a ‘desc’ and/or a ‘title’ description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, ‘desc’ and ‘title’ elements are not rendered as part of the graphics. User agents may, however, for example, display the ‘title’ element as a tooltip, as the pointing device moves over particular elements. Alternate presentations are possible, both visual and aural, which display the ‘desc’ and ‘title’ elements but do not display ‘path’ elements or other graphics elements. This is readily achieved by using a different (perhaps user) style sheet. For deep hierarchies, and for following ‘use’ element references, it is sometimes desirable to allow the user to control how deep they drill down into descriptive text.

In conforming SVG document fragments, any ‘title’ element should be the first child element of its parent. Note that those implementations that do use ‘title’ to display a tooltip often will only do so if the ‘title’ is indeed the first child element of its parent.

The following is an example. In typical operation, the SVG user agent would not render the ‘desc’ and ‘title’ elements but would render the remaining contents of the ‘g’ element.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <g>
    <title>Company sales by region</title>
    <desc>
      This is a bar chart which shows 
      company sales by region.
    </desc>
    <!-- Bar chart defined as vector data -->
  </g>
</svg>

Description and title elements can contain marked-up text from other namespaces. Here is an example:

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <desc xmlns:mydoc="http://example.org/mydoc">
    <mydoc:title>This is an example SVG file</mydoc:title>
    <mydoc:para>The global description uses markup from the 
      <mydoc:emph>mydoc</mydoc:emph> namespace.</mydoc:para>
  </desc>
  <g>
    <!-- the picture goes here -->
  </g>
</svg>

Authors should always provide a ‘title’ child element to the outermost svg element within a stand-alone SVG document. The ‘title’ child element to an ‘svg’ element serves the purposes of identifying the content of the given SVG document fragment. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead. For reasons of accessibility, user agents should always make the content of the ‘title’ child element to the outermost svg element available to users. The mechanism for doing so depends on the user agent (e.g., as a caption, spoken).

The DTD definitions of many of SVG's elements (particularly, container and text elements) place no restriction on the placement or number of the ‘desc’ and ‘title’ sub-elements. This flexibility is only present so that there will be a consistent content model for container elements, because some container elements in SVG allow for mixed content, and because the mixed content rules for XML ([XML10], section 3.2.2) do not permit the desired restrictions. Representations of future versions of the SVG language might use more expressive representations than DTDs which allow for more restrictive mixed content rules. It is strongly recommended that at most one ‘desc’ and at most one ‘title’ element appear as a child of any particular element, and that these elements appear before any other child elements (except possibly ‘metadata’ elements) or character data content. If user agents need to choose among multiple ‘desc’ or ‘title’ elements for processing (e.g., to decide which string to use for a tooltip), the user agent shall choose the first one.

5.5 The ‘symbol’ element

‘symbol’
Categories:
Container element, structural element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

The ‘symbol’ element is used to define graphical template objects which can be instantiated by a ‘use’ element.

The use of ‘symbol’ elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.

The key distinctions between a ‘symbol’ and a ‘g’ are:

Closely related to the ‘symbol’ element are the ‘marker’ and ‘pattern’ elements.

‘symbol’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘use’ element. The ‘display’ property does not apply to the ‘symbol’ element; thus, ‘symbol’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘symbol’ elements are available for referencing even when the ‘display’ property on the ‘symbol’ element or any of its ancestors is set to none.

5.6 The ‘use’ element

‘use’
Categories:
Graphics element, graphics referencing element, structural element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

Any ‘svg’, ‘symbol’, ‘g’, graphics element or other ‘use’ is potentially a template object that can be re-used (i.e., "instanced") in the SVG document via a ‘use’ element. The ‘use’ element references another element and indicates that the graphical contents of that element is included/drawn at that given point in the document.

Unlike ‘image’, the ‘use’ element cannot reference entire files.

The ‘use’ element has optional attributes ‘x’, ‘y’, ‘width’ and ‘height’ which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.

The effect of a ‘use’ element is as if the contents of the referenced element were deeply cloned into a separate non-exposed DOM tree which had the ‘use’ element as its parent and all of the ‘use’ element's ancestors as its higher-level ancestors. Because the cloned DOM tree is non-exposed, the SVG Document Object Model (DOM) only contains the ‘use’ element and its attributes. The SVG DOM does not show the referenced element's contents as children of ‘use’ element.

For user agents that support Styling with CSS, the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

Property inheritance, however, works as if the referenced element had been textually included as a deeply cloned child of the ‘use’ element. The referenced element inherits properties from the ‘use’ element and the ‘use’ element's ancestors. An instance of a referenced element does not inherit properties from the referenced element's original parents.

If event attributes are assigned to referenced elements, then the actual target for the event will be the SVGElementInstance object within the "instance tree" corresponding to the given referenced element.

The event handling for the non-exposed tree works as if the referenced element had been textually included as a deeply cloned child of the ‘use’ element, except that events are dispatched to the SVGElementInstance objects. The event's target and currentTarget attributes are set to the SVGElementInstance that corresponds to the target and current target elements in the referenced subtree. An event propagates through the exposed and non-exposed portions of the tree in the same manner as it would in the regular document tree: first going from the root element to the ‘use’ element and then through non-exposed tree elements in the capture phase, followed by the target phase at the target of the event, then bubbling back through non-exposed tree to the use element and then back through regular tree to the root element in bubbling phase.

An element and all its corresponding SVGElementInstance objects share an event listener list. The currentTarget attribute of the event can be used to determine through which object an event listener was invoked.

The behavior of the ‘visibility’ property conforms to this model of property inheritance. Thus, specifying 'visibility:hidden' on a ‘use’ element does not guarantee that the referenced content will not be rendered. If the ‘use’ element specifies 'visibility:hidden' and the element it references specifies 'visibility:hidden' or 'visibility:inherit', then that one element will be hidden. However, if the referenced element instead specifies 'visibility:visible', then that element will be visible even if the ‘use’ element specifies 'visibility:hidden'.

Animations on a referenced element will cause the instances to also be animated.

A ‘use’ element has the same visual effect as if the ‘use’ element were replaced by the following generated content:

For user agents that support Styling with CSS, the generated ‘g’ element carries along with it the "cascaded" property values on the ‘use’ element which result from the CSS cascade ([CSS2], chapter 6). Additionally, the copy (deep clone) of the referenced resource carries along with it the "cascaded" property values resulting from the CSS cascade on the original (i.e., referenced) elements. Thus, the result of various CSS selectors in combination with the ‘class’ and ‘style’ attributes are, in effect, replaced by the functional equivalent of a ‘style’ attribute in the generated content which conveys the "cascaded" property values.

Example Use01 below has a simple ‘use’ on a ‘rect’.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc>
  <defs>
    <rect id="MyRect" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use x="20" y="10" xlink:href="#MyRect" />
</svg>
Example Use01
Example Use01 — Simple case of 'use' on a 'rect'

View this example as SVG (SVG-enabled browsers only)

The visual effect would be equivalent to the following document:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use01-GeneratedContent - Simple case of 'use' on a 'rect'</desc>
  <!-- 'defs' section left out -->

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />

  <!-- Start of generated content. Replaces 'use' -->
  <g transform="translate(20,10)">
    <rect width="60" height="10"/>
  </g>
  <!-- End of generated content -->

</svg>

View this example as SVG (SVG-enabled browsers only)

Example Use02 below has a ‘use’ on a ‘symbol’.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use02 - 'use' on a 'symbol'</desc>
  <defs>
    <symbol id="MySymbol" viewBox="0 0 20 20">
      <desc>MySymbol - four rectangles in a grid</desc>
      <rect x="1" y="1" width="8" height="8"/>
      <rect x="11" y="1" width="8" height="8"/>
      <rect x="1" y="11" width="8" height="8"/>
      <rect x="11" y="11" width="8" height="8"/>
    </symbol>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use x="45" y="10" width="10" height="10" 
       xlink:href="#MySymbol" />
</svg>
Example Use02
Example Use02 — 'use' on a 'symbol'

View this example as SVG (SVG-enabled browsers only)

The visual effect would be equivalent to the following document:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use02-GeneratedContent - 'use' on a 'symbol'</desc>

  <!-- 'defs' section left out -->

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />

  <!-- Start of generated content. Replaces 'use' -->
  <g transform="translate(45, 10)" >
    <!-- Start of referenced 'symbol'. 'symbol' replaced by 'svg',
         with x,y,width,height=0,0,100%,100% -->
    <svg width="10" height="10" 
         viewBox="0 0 20 20">
      <rect x="1" y="1" width="8" height="8"/>
      <rect x="11" y="1" width="8" height="8"/>
      <rect x="1" y="11" width="8" height="8"/>
      <rect x="11" y="11" width="8" height="8"/>
    </svg>
    <!-- End of referenced symbol -->
  </g>
  <!-- End of generated content -->

</svg>

View this example as SVG (SVG-enabled browsers only)

Example Use03 illustrates what happens when a ‘use’ has a ‘transform’ attribute.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use03 - 'use' with a 'transform' attribute</desc>
  <defs>
    <rect id="MyRect" x="0" y="0" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use xlink:href="#MyRect"
       transform="translate(20,2.5) rotate(10)" />
</svg>
Example Use03
Example Use03 — 'use' with a 'transform' attribute

View this example as SVG (SVG-enabled browsers only)

The visual effect would be equivalent to the following document:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use03-GeneratedContent - 'use' with a 'transform' attribute</desc>

  <!-- 'defs' section left out -->

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />

  <!-- Start of generated content. Replaces 'use' -->
  <g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
  </g>
  <!-- End of generated content -->

</svg>

View this example as SVG (SVG-enabled browsers only)

Example Use04 illustrates a ‘use’ element with various methods of applying CSS styling.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use04 - 'use' with CSS styling</desc>
  <defs style=" /* rule 9 */ stroke-miterlimit: 10" >
    <path id="MyPath" d="M300 50 L900 50 L900 250 L300 250"
                     class="MyPathClass"
                     style=" /* rule 10 */ stroke-dasharray:300,100" />
  </defs>
  <style type="text/css">
    <![CDATA[
      /* rule 1 */ #MyUse { fill: blue }
      /* rule 2 */ #MyPath { stroke: red }
      /* rule 3 */ use { fill-opacity: .5 }
      /* rule 4 */ path { stroke-opacity: .5 }
      /* rule 5 */ .MyUseClass { stroke-linecap: round }
      /* rule 6 */ .MyPathClass { stroke-linejoin: bevel }
      /* rule 7 */ use > path { shape-rendering: optimizeQuality }
      /* rule 8 */ g > path { visibility: hidden }
    ]]>
  </style>

  <rect x="0" y="0" width="1200" height="300"
         style="fill:none; stroke:blue; stroke-width:3"/>
  <g style=" /* rule 11 */ stroke-width:40">
    <use id="MyUse" xlink:href="#MyPath" 
         class="MyUseClass"
         style="/* rule 12 */ stroke-dashoffset:50" />
  </g>
</svg>
Example Use04
Example Use04 — 'use' with CSS styling

View this example as SVG (SVG-enabled browsers only)

The visual effect would be equivalent to the following document. Observe that some of the style rules above apply to the generated content (i.e., rules 1-6, 10-12), whereas others do not (i.e., rules 7-9). The rules which do not affect the generated content are:

In the generated content below, the selectors that yield a match have been transferred into inline ‘style’ attributes for illustrative purposes.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use04-GeneratedContent - 'use' with a 'transform' attribute</desc>

  <!-- 'style' and 'defs' sections left out -->

  <rect x="0" y="0" width="1200" height="300"
         style="fill:none; stroke:blue; stroke-width:3"/>
  <g style="/* rule 11 */ stroke-width:40">

    <!-- Start of generated content. Replaces 'use' -->
    <g style="/* rule 1 */ fill:blue;
                 /* rule 3 */ fill-opacity:.5;
                 /* rule 5 */ stroke-linecap:round;
                 /* rule 12 */ stroke-dashoffset:50" >
      <path d="M300 50 L900 50 L900 250 L300 250"
            style="/* rule 2 */ stroke:red; 
                   /* rule 4 */ stroke-opacity:.5; 
                   /* rule 6 */ stroke-linejoin: bevel; 
                   /* rule 10 */ stroke-dasharray:300,100" />
    </g> 
    <!-- End of generated content -->

  </g>
</svg>

View this example as SVG (SVG-enabled browsers only)

When a ‘use’ references another element which is another ‘use’ or whose content contains a ‘use’ element, then the deep cloning approach described above is recursive. However, a set of references that directly or indirectly reference a element to create a circular dependency is an error, as described in References and the ‘defs’ element.

Attribute definitions:

x = "<coordinate>"
The x-axis coordinate of one corner of the rectangular region into which the referenced element is placed.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
y = "<coordinate>"
The y-axis coordinate of one corner of the rectangular region into which the referenced element is placed.
If the attribute is not specified, the effect is as if a value of "0" were specified.
Animatable: yes.
width = "<length>"
The width of the rectangular region into which the referenced element is placed. A negative value is an error (see Error processing). A value of zero disables rendering of this element.
Animatable: yes.
height = "<length>"
The height of the rectangular region into which the referenced element is placed. A negative value is an error (see Error processing). A value of zero disables rendering of this element.
Animatable: yes.
xlink:href = "<iri>"
A IRI reference to an element/fragment within an SVG document.
Animatable: yes.

5.7 The ‘image’ element

‘image’
Categories:
Graphics element, graphics referencing element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

The ‘image’ element indicates that the contents of a complete file are to be rendered into a given rectangle within the current user coordinate system. The ‘image’ element can refer to raster image files such as PNG or JPEG or to files with MIME type of "image/svg+xml". Conforming SVG viewers need to support at least PNG, JPEG and SVG format files.

The result of processing an ‘image’ is always a four-channel RGBA result. When an ‘image’ element references a raster image file such as PNG or JPEG files which only has three channels (RGB), then the effect is as if the object were converted into a 4-channel RGBA image with the alpha channel uniformly set to 1. For a single-channel raster image, the effect is as if the object were converted into a 4-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.

An ‘image’ element establishes a new viewport for the referenced file as described in Establishing a new viewport.  The bounds for the new viewport are defined by attributes ‘x’, ‘y’, ‘width’ and ‘height’. The placement and scaling of the referenced image are controlled by the ‘preserveAspectRatio’ attribute on the ‘image’ element.

When an ‘image’ element references an SVG image, the ‘clip’ and ‘overflow’ properties on the root element in the referenced SVG image are ignored (in the same manner as the ‘x’, ‘y’, ‘width’ and ‘height’ attributes are ignored). Unless the value of ‘preserveAspectRatio’ on the ‘image’ element starts with 'defer', the ‘preserveAspectRatio’ attribute on the root element in the referenced SVG image is also ignored (see ‘preserveAspectRatio’ for details). Instead, the ‘preserveAspectRatio’ attribute on the referencing ‘image’ element defines how the SVG image content is fitted into the viewport and the ‘clip’ and ‘overflow’ properties on the ‘image’ element define how the SVG image content is clipped (or not) relative to the viewport.

The value of the ‘viewBox’ attribute to use when evaluating the ‘preserveAspectRatio’ attribute is defined by the referenced content. For content that clearly identifies a viewBox (e.g. an SVG file with the ‘viewBox’ attribute on the outermost svg element) that value should be used. For most raster content (PNG, JPEG) the bounds of the image should be used (i.e. the ‘image’ element has an implicit ‘viewBox’ of '0 0 raster-image-width raster-image-height'). Where no value is readily available (e.g. an SVG file with no ‘viewBox’ attribute on the outermost svg element) the ‘preserveAspectRatio’ attribute is ignored, and only the translation due to the ‘x’ & ‘y’ attributes of the viewport is used to display the content.

For example, if the image element referenced a PNG or JPEG and preserveAspectRatio="xMinYMin meet", then the aspect ratio of the raster would be preserved (which means that the scale factor from image's coordinates to current user space coordinates would be the same for both X and Y), the raster would be sized as large as possible while ensuring that the entire raster fits within the viewport, and the top/left of the raster would be aligned with the top/left of the viewport as defined by the attributes ‘x’, ‘y’, ‘width’ and ‘height’ on the ‘image’ element.  If the value of ‘preserveAspectRatio’ was 'none' then aspect ratio of the image would not be preserved. The image would be fitted such that the top/left corner of the raster exactly aligns with coordinate (‘x’, ‘y’) and the bottom/right corner of the raster exactly aligns with coordinate (‘x’+‘width’, ‘y’+‘height’).

The resource referenced by the ‘image’ element represents a separate document which generates its own parse tree and document object model (if the resource is XML). Thus, there is no inheritance of properties into the image.

Unlike ‘use’, the ‘image’ element cannot reference elements within an SVG file.

Attribute definitions:

x = "<coordinate>"
The x-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
If the attribute is not specified, the effect is as if a value of '0' were specified.
Animatable: yes.
y = "<coordinate>"
The y-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
If the attribute is not specified, the effect is as if a value of '0' were specified.
Animatable: yes.
width = "<length>"
The width of the rectangular region into which the referenced document is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.
height = "<length>"
The height of the rectangular region into which the referenced document is placed.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.
Animatable: yes.
xlink:href = "<iri>"
A IRI reference.
Animatable: yes.
preserveAspectRatio = "[defer] <align> [<meetOrSlice>]"

See ‘preserveAspectRatio’.

If attribute ‘preserveAspectRatio’ is not specified, then the effect is as if a value of xMidYMid meet were specified.

Animatable: yes.

An example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="3in" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>This graphic links to an external image
  </desc>
  <image x="200" y="200" width="100px" height="100px"
         xlink:href="myimage.png">
    <title>My image</title>
  </image>
</svg>

5.8 Conditional processing

5.8.1 Conditional processing overview

SVG contains a ‘switch’ element along with attributes ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ to provide an ability to specify alternate viewing depending on the capabilities of a given user agent or the user's language.

Attributes ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ act as tests and return either true or false results. The ‘switch’ renders the first of its children for which all of these attributes test true. If the given attribute is not specified, then a true value is assumed.

Similar to the ‘display’ property, conditional processing attributes only affect the direct rendering of elements and do not prevent elements from being successfully referenced by other elements (such as via a ‘use’).

In consequence:

5.8.2 The ‘switch’ element

‘switch’
Categories:
Container element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

The ‘switch’ element evaluates the ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered. If the child element is a container element such as a ‘g’, then the entire subtree is either processed/rendered or bypassed/not rendered.

Note that the values of properties ‘display’ and ‘visibility’ have no effect on ‘switch’ element processing. In particular, setting ‘display’ to none on a child of a ‘switch’ element has no effect on true/false testing associated with ‘switch’ element processing.

For more information and an example, see Embedding foreign object types.

5.8.3 The ‘requiredFeatures’ attribute

Definition of requiredFeatures:

requiredFeatures = list-of-features
The value is a list of feature strings, with the individual values separated by white space. Determines whether all of the named features are supported by the user agent. Only feature strings defined in the Feature String appendix are allowed. If all of the given features are supported, then the attribute evaluates to true; otherwise, the current element and its children are skipped and thus will not be rendered.
Animatable: no.

If the attribute is not present, then its implicit return value is "true". If a null string or empty string value is given to attribute ‘requiredFeatures’, the attribute returns "false".

‘requiredFeatures’ is often used in conjunction with the ‘switch’ element. If the ‘requiredFeatures’ is used in other situations, then it represents a simple switch on the given element whether to render the element or not.

5.8.4 The ‘requiredExtensions’ attribute

The ‘requiredExtensions’ attribute defines a list of required language extensions. Language extensions are capabilities within a user agent that go beyond the feature set defined in this specification. Each extension is identified by an IRI reference.

Definition of requiredExtensions:

requiredExtensions = list-of-extensions
The value is a list of IRI references which identify the required extensions, with the individual values separated by white space. Determines whether all of the named extensions are supported by the user agent. If all of the given extensions are supported, then the attribute evaluates to true; otherwise, the current element and its children are skipped and thus will not be rendered.
Animatable: no.

If a given IRI reference contains white space within itself, that white space must be escaped.

If the attribute is not present, then its implicit return value is "true". If a null string or empty string value is given to attribute ‘requiredExtensions’, the attribute returns "false".

‘requiredExtensions’ is often used in conjunction with the ‘switch’ element. If the ‘requiredExtensions’ is used in other situations, then it represents a simple switch on the given element whether to render the element or not.

The IRI names for the extension should include versioning information, such as "http://example.org/SVGExtensionXYZ/1.0", so that script writers can distinguish between different versions of a given extension.

5.8.5 The ‘systemLanguage’ attribute

The attribute value is a comma-separated list of language names as defined in BCP 47 [BCP47].

Evaluates to "true" if one of the languages indicated by user preferences exactly equals one of the languages given in the value of this parameter, or if one of the languages indicated by user preferences exactly equals a prefix of one of the languages given in the value of this parameter such that the first tag character following the prefix is "-".

Evaluates to "false" otherwise.

Note: This use of a prefix matching rule does not imply that language tags are assigned to languages in such a way that it is always true that if a user understands a language with a certain tag, then this user will also understand all languages with tags for which this tag is a prefix.

The prefix rule simply allows the use of prefix tags if this is the case.

Implementation note: When making the choice of linguistic preference available to the user, implementers should take into account the fact that users are not familiar with the details of language matching as described above, and should provide appropriate guidance. As an example, users may assume that on selecting "en-gb", they will be served any kind of English document if British English is not available. The user interface for setting user preferences should guide the user to add "en" to get the best matching behavior.

Multiple languages MAY be listed for content that is intended for multiple audiences. For example, content that is presented simultaneously in the original Maori and English versions, would call for:

<text systemLanguage="mi, en"><!-- content goes here --></text>

However, just because multiple languages are present within the object on which the ‘systemLanguage’ test attribute is placed, this does not mean that it is intended for multiple linguistic audiences. An example would be a beginner's language primer, such as "A First Lesson in Latin," which is clearly intended to be used by an English-literate audience. In this case, the ‘systemLanguage’ test attribute should only include "en".

Authoring note: Authors should realize that if several alternative language objects are enclosed in a ‘switch’, and none of them matches, this may lead to situations where no content is displayed. It is thus recommended to include a "catch-all" choice at the end of such a ‘switch’ which is acceptable in all cases.

For the ‘systemLanguage’ attribute: Animatable: no.

If the attribute is not present, then its implicit return value is "true". If a null string or empty string value is given to attribute ‘systemLanguage’, the attribute returns "false".

‘systemLanguage’ is often used in conjunction with the ‘switch’ element. If the ‘systemLanguage’ is used in other situations, then it represents a simple switch on the given element whether to render the element or not.

5.8.6 Applicability of test attributes

The following list describes the applicability of the test attributes to the elements that do not directly produce rendering.

5.9 Specifying whether external resources are required for proper rendering

Documents often reference and use the contents of other files (and other Web resources) as part of their rendering. In some cases, authors want to specify that particular resources are required for a document to be considered correct.

Attribute ‘externalResourcesRequired’ is available on all container elements and to all elements which potentially can reference external resources. It specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container element or graphics element.

Attribute definition:

externalResourcesRequired = "false | true"
false
(The default value.) Indicates that resources external to the current document are optional. Document rendering can proceed even if external resources are unavailable to the current element and its descendants.
true
Indicates that resources external to the current document are required. If an external resource is not available, progressive rendering is suspended, the document's SVGLoad event is not fired and the animation timeline does not begin until that resource and all other required resources become available, have been parsed and are ready to be rendered. If a timeout event occurs on a required resource, then the document goes into an error state (see Error processing). The document remains in an error state until all required resources become available.

This attribute applies to all types of resource references, including style sheets, color profiles (see Color profile descriptions) and fonts specified by an IRI reference using a ‘font-face’ element or a CSS @font-face specification. In particular, if an element sets externalResourcesRequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element.

Attribute ‘externalResourcesRequired’ is not inheritable (from a sense of attribute value inheritance), but if set on a container element, its value will apply to all elements within the container.

Because setting externalResourcesRequired="true" on a container element will have the effect of disabling progressive display of the contents of that container, if that container includes elements that reference external resources, tools that generate SVG content are cautioned against simply setting externalResourcesRequired="true" on the outermost svg element on a universal basis. Instead, it is better to specify externalResourcesRequired="true" on those particular graphics elements or container elements which specifically need the availability of external resources in order to render properly.

For ‘externalResourcesRequired’: Animatable: no.

5.10 Common attributes

5.10.1 Attributes common to all elements: ‘id’ and ‘xml:base’

The ‘id’ and ‘xml:base’ attributes are available on all SVG elements:

Attribute definitions:

id = "name"
Standard XML attribute for assigning a unique name to an element. Refer to the Extensible Markup Language (XML) 1.0 Recommendation [XML10].
Animatable: no.
xml:base = "<iri>"
Specifies a base IRI other than the base IRI of the document or external entity. Refer to the XML Base specification [XML-BASE].
Animatable: no.

5.10.2 The ‘xml:lang’ and ‘xml:space’ attributes

Elements that might contain character data content have attributes ‘xml:lang’ and ‘xml:space’.

Attribute definitions:

xml:lang = "languageID"
Standard XML attribute to specify the language (e.g., English) used in the contents and attribute values of particular elements. Refer to the Extensible Markup Language (XML) 1.0 Recommendation [XML10].
Animatable: no.
xml:space = "{default | preserve}"
Standard XML attribute to specify whether white space is preserved in character data. The only possible values are 'default' and 'preserve'. Refer to the Extensible Markup Language (XML) 1.0 Recommendation [XML10] and to the discussion white space handling in SVG.
Animatable: no.

5.11 DOM interfaces

5.11.1 Interface SVGDocument

When an ‘svg’ element is embedded inline as a component of a document from another namespace, such as when an ‘svg’ element is embedded inline within an XHTML document [XHTML], then an SVGDocument object will not exist; instead, the root object in the document object hierarchy will be a Document object of a different type, such as an HTMLDocument object.

However, an SVGDocument object will indeed exist when the root element of the XML document hierarchy is an ‘svg’ element, such as when viewing a stand-alone SVG file (i.e., a file with MIME type "image/svg+xml"). In this case, the SVGDocument object will be the root object of the document object model hierarchy.

In the case where an SVG document is embedded by reference, such as when an XHTML document has an ‘object’ element whose ‘href’ attribute references an SVG document (i.e., a document whose MIME type is "image/svg+xml" and whose root element is thus an ‘svg’ element), there will exist two distinct DOM hierarchies. The first DOM hierarchy will be for the referencing document (e.g., an XHTML document). The second DOM hierarchy will be for the referenced SVG document. In this second DOM hierarchy, the root object of the document object model hierarchy is an SVGDocument object.

The SVGDocument interface contains a similar list of attributes and methods to the HTMLDocument interface described in the Document Object Model (HTML) Level 1 chapter of the [DOM1] specification.

interface SVGDocument : Document,
                        DocumentEvent {
  readonly attribute DOMString title;
  readonly attribute DOMString referrer;
  readonly attribute DOMString domain;
  readonly attribute DOMString URL;
  readonly attribute SVGSVGElement rootElement;
};
Attributes:
title (readonly DOMString)
The title of a document as specified by the ‘title’ sub-element of the ‘svg’ root element (i.e., <svg><title>Here is the title</title>...</svg>)
referrer (readonly DOMString)
Returns the URI of the page that linked to this page. The value is an empty string if the user navigated to the page directly (not through a link, but, for example, via a bookmark).
domain (readonly DOMString)
The domain name of the server that served the document, or a null string if the server cannot be identified by a domain name.
URL (readonly DOMString)
The complete URI of the document.
rootElement (readonly SVGSVGElement)
The root ‘svg’ in the document hierarchy.

5.11.2 Interface SVGSVGElement

A key interface definition is the SVGSVGElement interface, which is the interface that corresponds to the ‘svg’ element. This interface contains various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices.

SVGSVGElement extends ViewCSS and DocumentCSS to provide access to the computed values of properties and the override style sheet as described in DOM Level 2 Style [DOM2STYLE].

interface SVGSVGElement : SVGElement,
                          SVGTests,
                          SVGLangSpace,
                          SVGExternalResourcesRequired,
                          SVGStylable,
                          SVGLocatable,
                          SVGFitToViewBox,
                          SVGZoomAndPan,
                          DocumentEvent,
                          ViewCSS,
                          DocumentCSS {

  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
           attribute DOMString contentScriptType setraises(DOMException);
           attribute DOMString contentStyleType setraises(DOMException);
  readonly attribute SVGRect viewport;
  readonly attribute float pixelUnitToMillimeterX;
  readonly attribute float pixelUnitToMillimeterY;
  readonly attribute float screenPixelToMillimeterX;
  readonly attribute float screenPixelToMillimeterY;
  readonly attribute boolean useCurrentView;
  readonly attribute SVGViewSpec currentView;
           attribute float currentScale;
  readonly attribute SVGPoint currentTranslate;

  unsigned long suspendRedraw(in unsigned long maxWaitMilliseconds);
  void unsuspendRedraw(in unsigned long suspendHandleID);
  void unsuspendRedrawAll();
  void forceRedraw();
  void pauseAnimations();
  void unpauseAnimations();
  boolean animationsPaused();
  float getCurrentTime();
  void setCurrentTime(in float seconds);
  NodeList getIntersectionList(in SVGRect rect, in SVGElement referenceElement);
  NodeList getEnclosureList(in SVGRect rect, in SVGElement referenceElement);
  boolean checkIntersection(in SVGElement element, in SVGRect rect);
  boolean checkEnclosure(in SVGElement element, in SVGRect rect);
  void deselectAll();
  SVGNumber createSVGNumber();
  SVGLength createSVGLength();
  SVGAngle createSVGAngle();
  SVGPoint createSVGPoint();
  SVGMatrix createSVGMatrix();
  SVGRect createSVGRect();
  SVGTransform createSVGTransform();
  SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix);
  Element getElementById(in DOMString elementId);
};
Attributes:
x (readonly SVGAnimatedLength)
Corresponds to attribute ‘x’ on the given ‘svg’ element.
y (readonly SVGAnimatedLength)
Corresponds to attribute ‘y’ on the given ‘svg’ element.
width (readonly SVGAnimatedLength)
Corresponds to attribute ‘width’ on the given ‘svg’ element.
height (readonly SVGAnimatedLength)
Corresponds to attribute ‘height’ on the given ‘svg’ element.
contentScriptType (DOMString)
Corresponds to attribute ‘contentScriptType’ on the given ‘svg’ element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
contentStyleType (DOMString)
Corresponds to attribute ‘contentStyleType’ on the given ‘svg’ element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
viewport (readonly SVGRect)

The position and size of the viewport (implicit or explicit) that corresponds to this ‘svg’ element. When the user agent is actually rendering the content, then the position and size values represent the actual values when rendering. The position and size values are unitless values in the coordinate system of the parent element. If no parent element exists (i.e., ‘svg’ element represents the root of the document tree), if this SVG document is embedded as part of another document (e.g., via the HTML ‘object’ element), then the position and size are unitless values in the coordinate system of the parent document. (If the parent uses CSS or XSL layout, then unitless values represent pixel units for the current CSS or XSL viewport, as described in the CSS2 specification.) If the parent element does not have a coordinate system, then the user agent should provide reasonable default values for this attribute.

The SVGRect object is read only.

pixelUnitToMillimeterX (readonly float)
Size of a pixel units (as defined by CSS2) along the x-axis of the viewport, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium. On systems where it is impossible to know the size of a pixel, a suitable default pixel size is provided.
pixelUnitToMillimeterY (readonly float)
Corresponding size of a pixel unit along the y-axis of the viewport.
screenPixelToMillimeterX (readonly float)
User interface (UI) events in DOM Level 2 indicate the screen positions at which the given UI event occurred. When the user agent actually knows the physical size of a "screen unit", this attribute will express that information; otherwise, user agents will provide a suitable default value such as .28mm.
screenPixelToMillimeterY (readonly float)
Corresponding size of a screen pixel along the y-axis of the viewport.
useCurrentView (readonly boolean)
The initial view (i.e., before magnification and panning) of the current innermost SVG document fragment can be either the "standard" view (i.e., based on attributes on the ‘svg’ element such as ‘viewBox’) or to a "custom" view (i.e., a hyperlink into a particular ‘view’ or other element - see Linking into SVG content: IRI fragments and SVG views). If the initial view is the "standard" view, then this attribute is false. If the initial view is a "custom" view, then this attribute is true.
currentView (readonly SVGViewSpec)

The definition of the initial view (i.e., before magnification and panning) of the current innermost SVG document fragment. The meaning depends on the situation:

The object itself and its contents are both read only.

currentScale (float)
On an outermost svg element, this attribute indicates the current scale factor relative to the initial view to take into account user magnification and panning operations, as described under Magnification and panning. DOM attributes currentScale and currentTranslate are equivalent to the 2x3 matrix [a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]. If "magnification" is enabled (i.e., zoomAndPan="magnify"), then the effect is as if an extra transformation were placed at the outermost level on the SVG document fragment (i.e., outside the outermost svg element).

When accessed on an ‘svg’ element that is not an outermost svg element, it is undefined what behavior this attribute has.

currentTranslate (readonly SVGPoint)
On an outermost svg element, the corresponding translation factor that takes into account user "magnification".

When accessed on an ‘svg’ element that is not an outermost svg element, it is undefined what behavior this attribute has.

Operations:
unsigned long suspendRedraw(in unsigned long maxWaitMilliseconds)
Takes a time-out value which indicates that redraw shall not occur until:
  1. the corresponding unsuspendRedraw() call has been made,
  2. an unsuspendRedrawAll() call has been made, or
  3. its timer has timed out.

In environments that do not support interactivity (e.g., print media), then redraw shall not be suspended. Calls to suspendRedraw() and unsuspendRedraw() should, but need not be, made in balanced pairs.

To suspend redraw actions as a collection of SVG DOM changes occur, precede the changes to the SVG DOM with a method call similar to:

suspendHandleID = suspendRedraw(maxWaitMilliseconds);

and follow the changes with a method call similar to:

unsuspendRedraw(suspendHandleID);

Note that multiple suspendRedraw calls can be used at once and that each such method call is treated independently of the other suspendRedraw method calls.

Parameters
  1. unsigned long maxWaitMilliseconds
    The amount of time in milliseconds to hold off before redrawing the device. Values greater than 60 seconds will be truncated down to 60 seconds.
Returns
A number which acts as a unique identifier for the given suspendRedraw() call. This value must be passed as the parameter to the corresponding unsuspendRedraw() method call.
void unsuspendRedraw(in unsigned long suspendHandleID)
Cancels a specified suspendRedraw() by providing a unique suspend handle ID that was returned by a previous suspendRedraw() call.
Parameters
  1. unsigned long suspendHandleID
    A number which acts as a unique identifier for the desired suspendRedraw() call. The number supplied must be a value returned from a previous call to suspendRedraw(). If an invalid handle ID value is provided then the request to unsuspendRedraw() is silently ignored.
void unsuspendRedrawAll()
Cancels all currently active suspendRedraw() method calls. This method is most useful at the very end of a set of SVG DOM calls to ensure that all pending suspendRedraw() method calls have been cancelled.
void forceRedraw()
In rendering environments supporting interactivity, forces the user agent to immediately redraw all regions of the viewport that require updating.
void pauseAnimations()
Suspends (i.e., pauses) all currently running animations that are defined within the SVG document fragment corresponding to this ‘svg’ element, causing the animation clock corresponding to this document fragment to stand still until it is unpaused.
void unpauseAnimations()
Unsuspends (i.e., unpauses) currently running animations that are defined within the SVG document fragment, causing the animation clock to continue from the time at which it was suspended.
boolean animationsPaused()
Returns true if this SVG document fragment is in a paused state.
Returns
Boolean indicating whether this SVG document fragment is in a paused state.
float getCurrentTime()
Returns the current time in seconds relative to the start time for the current SVG document fragment. If getCurrentTime is called before the document timeline has begun (for example, by script running in a ‘script’ element before the document's SVGLoad event is dispatched), then 0 is returned.
Returns
The current time in seconds, or 0 if the document timeline has not yet begun.
void setCurrentTime(in float seconds)
Adjusts the clock for this SVG document fragment, establishing a new current time. If setCurrentTime is called before the document timeline has begun (for example, by script running in a ‘script’ element before the document's SVGLoad event is dispatched), then the value of seconds in the last invocation of the method gives the time that the document will seek to once the document timeline has begun.
Parameters
  1. float seconds
    The new current time in seconds relative to the start time for the current SVG document fragment.
NodeList getIntersectionList(in SVGRect rect, in SVGElement referenceElement)
Returns the list of graphics elements whose rendered content intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in ‘pointer-events’ processing.
Parameters
  1. SVGRect rect
    The test rectangle. The values are in the initial coordinate system for the current ‘svg’ element.
  2. SVGElement referenceElement
    If not null, then any intersected element that doesn't have the referenceElement as ancestor must not be included in the returned NodeList.
Returns
A list of Elements whose content intersects the supplied rectangle. This NodeList must be implemented identically to the NodeList interface as defined in DOM Level 2 Core ([DOM2], section 1.2) with the exception that the interface is not live.
NodeList getEnclosureList(in SVGRect rect, in SVGElement referenceElement)
Returns the list of graphics elements whose rendered content is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in ‘pointer-events’ processing.
Parameters
  1. SVGRect rect
    The test rectangle. The values are in the initial coordinate system for the current ‘svg’ element.
  2. SVGElement referenceElement
    If not null, then any intersected element that doesn't have the referenceElement as ancestor must not be included in the returned NodeList.
Returns
A list of Elements whose content is enclosed by the supplied rectangle. This NodeList must be implemented identically to the NodeList interface as defined in DOM Level 2 Core ([DOM2], section 1.2) with the exception that the interface is not live.
boolean checkIntersection(in SVGElement element, in SVGRect rect)
Returns true if the rendered content of the given element intersects the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in ‘pointer-events’ processing.
Parameters
  1. SVGElement element
    The element on which to perform the given test.
  2. SVGRect rect
    The test rectangle. The values are in the initial coordinate system for the current ‘svg’ element.
Returns
True or false, depending on whether the given element intersects the supplied rectangle.
boolean checkEnclosure(in SVGElement element, in SVGRect rect)
Returns true if the rendered content of the given element is entirely contained within the supplied rectangle. Each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in ‘pointer-events’ processing.
Parameters
  1. SVGElement element
    The element on which to perform the given test.
  2. SVGRect rect
    The test rectangle. The values are in the initial coordinate system for the current ‘svg’ element.
Returns
True or false, depending on whether the given element is enclosed by the supplied rectangle.
void deselectAll()
Unselects any selected objects, including any selections of text strings and type-in bars.
SVGNumber createSVGNumber()
Creates an SVGNumber object outside of any document trees. The object is initialized to a value of zero.
Returns
An SVGNumber object.
SVGLength createSVGLength()
Creates an SVGLength object outside of any document trees. The object is initialized to the value of 0 user units.
Returns
An SVGLength object.
SVGAngle createSVGAngle()
Creates an SVGAngle object outside of any document trees. The object is initialized to the value 0 degrees (unitless).
Returns
An SVGAngle object.
SVGPoint createSVGPoint()
Creates an SVGPoint object outside of any document trees. The object is initialized to the point (0,0) in the user coordinate system.
Returns
An SVGPoint object.
SVGMatrix createSVGMatrix()
Creates an SVGMatrix object outside of any document trees. The object is initialized to the identity matrix.
Returns
An SVGMatrix object.
SVGRect createSVGRect()
Creates an SVGRect object outside of any document trees. The object is initialized such that all values are set to 0 user units.
Returns
An SVGRect object.
SVGTransform createSVGTransform()
Creates an SVGTransform object outside of any document trees. The object is initialized to an identity matrix transform (SVG_TRANSFORM_MATRIX).
Returns
An SVGTransform object.
SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix)

Creates an SVGTransform object outside of any document trees. The object is initialized to the given matrix transform (i.e., SVG_TRANSFORM_MATRIX). The values from the parameter matrix are copied, the matrix parameter is not adopted as SVGTransform::matrix.

Parameters
  1. SVGMatrix matrix
    The transform matrix.
Returns
An SVGTransform object.
Element getElementById(in DOMString elementId)
Searches this SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an Element whose id is given by elementId. If an Element is found, that Element is returned. If no such element exists, returns null. Behavior is not defined if more than one element has this id.
Parameters
  1. DOMString elementId
    The unique id value for an element.
Returns
The matching element.

5.11.3 Interface SVGGElement

The SVGSVGElement interface corresponds to the ‘g’ element.
interface SVGGElement : SVGElement,
                        SVGTests,
                        SVGLangSpace,
                        SVGExternalResourcesRequired,
                        SVGStylable,
                        SVGTransformable {
};

5.11.4 Interface SVGDefsElement

The SVGDefsElement interface corresponds to the ‘defs’ element.
interface SVGDefsElement : SVGElement,
                           SVGTests,
                           SVGLangSpace,
                           SVGExternalResourcesRequired,
                           SVGStylable,
                           SVGTransformable {
};

5.11.5 Interface SVGDescElement

The SVGDescElement interface corresponds to the ‘desc’ element.
interface SVGDescElement : SVGElement,
                           SVGLangSpace,
                           SVGStylable {
};

5.11.6 Interface SVGTitleElement

The SVGTitleElement interface corresponds to the ‘title’ element.
interface SVGTitleElement : SVGElement,
                            SVGLangSpace,
                            SVGStylable {
};

5.11.7 Interface SVGSymbolElement

The SVGSymbolElement interface corresponds to the ‘symbol’ element.
interface SVGSymbolElement : SVGElement,
                             SVGLangSpace,
                             SVGExternalResourcesRequired,
                             SVGStylable,
                             SVGFitToViewBox {
};

5.11.8 Interface SVGUseElement

The SVGUseElement interface corresponds to the ‘use’ element.
interface SVGUseElement : SVGElement,
                          SVGURIReference,
                          SVGTests,
                          SVGLangSpace,
                          SVGExternalResourcesRequired,
                          SVGStylable,
                          SVGTransformable {
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGElementInstance instanceRoot;
  readonly attribute SVGElementInstance animatedInstanceRoot;
};
Attributes:
x (readonly SVGAnimatedLength)
Corresponds to attribute ‘x’ on the given ‘use’ element.
y (readonly SVGAnimatedLength)
Corresponds to attribute ‘y’ on the given ‘use’ element.
width (readonly SVGAnimatedLength)
Corresponds to attribute ‘width’ on the given ‘use’ element.
height (readonly SVGAnimatedLength)
Corresponds to attribute ‘height’ on the given ‘use’ element.
instanceRoot (readonly SVGElementInstance)
The root of the "instance tree". See description of SVGElementInstance for a discussion on the instance tree.
animatedInstanceRoot (readonly SVGElementInstance)
If the ‘xlink:href’ attribute is being animated, contains the current animated root of the "instance tree". If the ‘xlink:href’ attribute is not currently being animated, contains the same value as instanceRoot. See description of SVGElementInstance for a discussion on the instance tree.

5.11.9 Interface SVGElementInstance

For each ‘use’ element, the SVG DOM maintains a shadow tree (the "instance tree") of objects of type SVGElementInstance. An SVGElementInstance represents a single node in the instance tree. The root object in the instance tree is pointed to by the instanceRoot attribute on the SVGUseElement object for the corresponding ‘use’ element.

If the ‘use’ element references a simple graphics element such as a ‘rect’, then there is only a single SVGElementInstance object, and the correspondingElement attribute on this SVGElementInstance object is the SVGRectElement that corresponds to the referenced ‘rect’ element.

If the ‘use’ element references a ‘g’ which contains two ‘rect’ elements, then the instance tree contains three SVGElementInstance objects, a root SVGElementInstance object whose correspondingElement is the SVGGElement object for the ‘g’, and then two child SVGElementInstance objects, each of which has its correspondingElement that is an SVGRectElement object.

If the referenced object is itself a ‘use’, or if there are ‘use’ subelements within the referenced object, the instance tree will contain recursive expansion of the indirect references to form a complete tree. For example, if a ‘use’ element references a ‘g’, and the ‘g’ itself contains a ‘use’, and that ‘use’ references a ‘rect’, then the instance tree for the original (outermost) ‘use’ will consist of a hierarchy of SVGElementInstance objects, as follows:

SVGElementInstance #1 (parentNode=null, firstChild=#2, correspondingElement is the 'g')
  SVGElementInstance #2 (parentNode=#1, firstChild=#3, correspondingElement is the other 'use')
    SVGElementInstance #3 (parentNode=#2, firstChild=null, correspondingElement is the 'rect')
interface SVGElementInstance : EventTarget {
  readonly attribute SVGElement correspondingElement;
  readonly attribute SVGUseElement correspondingUseElement;
  readonly attribute SVGElementInstance parentNode;
  readonly attribute SVGElementInstanceList childNodes;
  readonly attribute SVGElementInstance firstChild;
  readonly attribute SVGElementInstance lastChild;
  readonly attribute SVGElementInstance previousSibling;
  readonly attribute SVGElementInstance nextSibling;
};
Attributes:
correspondingElement (readonly SVGElement)
The corresponding element to which this object is an instance. For example, if a ‘use’ element references a ‘rect’ element, then an SVGElementInstance is created, with its correspondingElement being the SVGRectElement object for the ‘rect’ element.
correspondingUseElement (readonly SVGUseElement)
The corresponding ‘use’ element to which this SVGElementInstance object belongs. When ‘use’ elements are nested (e.g., a ‘use’ references another ‘use’ which references a graphics element such as a ‘rect’), then the correspondingUseElement is the outermost ‘use’ (i.e., the one which indirectly references the ‘rect’, not the one with the direct reference).
parentNode (readonly SVGElementInstance)
The parent of this SVGElementInstance within the instance tree. All SVGElementInstance objects have a parent except the SVGElementInstance which corresponds to the element which was directly referenced by the ‘use’ element, in which case parentNode is null.
childNodes (readonly SVGElementInstanceList)
An SVGElementInstanceList that contains all children of this SVGElementInstance within the instance tree. If there are no children, this is an SVGElementInstanceList containing no entries (i.e., an empty list).
firstChild (readonly SVGElementInstance)
The first child of this SVGElementInstance within the instance tree. If there is no such SVGElementInstance, this returns null.
lastChild (readonly SVGElementInstance)
The last child of this SVGElementInstance within the instance tree. If there is no such SVGElementInstance, this returns null.
previousSibling (readonly SVGElementInstance)
The SVGElementInstance immediately preceding this SVGElementInstance. If there is no such SVGElementInstance, this returns null.
nextSibling (readonly SVGElementInstance)
The SVGElementInstance immediately following this SVGElementInstance. If there is no such SVGElementInstance, this returns null.

5.11.10 Interface SVGElementInstanceList

The SVGElementInstanceList interface provides the abstraction of an ordered collection of SVGElementInstance objects, without defining or constraining how this collection is implemented.
interface SVGElementInstanceList {

  readonly attribute unsigned long length;

  SVGElementInstance item(in unsigned long index);
};
Attributes:
length (readonly unsigned long)
The number of SVGElementInstance objects in the list. The range of valid child indices is 0 to length-1 inclusive.
Operations:
SVGElementInstance item(in unsigned long index)
Returns the indexth item in the collection. If index is greater than or equal to the number of nodes in the list, this returns null.
Parameters
  1. unsigned long index
    Index into the collection.
Returns
The SVGElementInstance object at the indexth position in the SVGElementInstanceList, or null if that is not a valid index.

5.11.11 Interface SVGImageElement

The SVGImageElement interface corresponds to the ‘image’ element.
interface SVGImageElement : SVGElement,
                            SVGURIReference,
                            SVGTests,
                            SVGLangSpace,
                            SVGExternalResourcesRequired,
                            SVGStylable,
                            SVGTransformable {
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};
Attributes:
x (readonly SVGAnimatedLength)
Corresponds to attribute ‘x’ on the given ‘image’ element.
y (readonly SVGAnimatedLength)
Corresponds to attribute ‘y’ on the given ‘image’ element.
width (readonly SVGAnimatedLength)
Corresponds to attribute ‘width’ on the given ‘image’ element.
height (readonly SVGAnimatedLength)
Corresponds to attribute ‘height’ on the given ‘image’ element.
preserveAspectRatio (readonly SVGAnimatedPreserveAspectRatio)
Corresponds to attribute ‘preserveAspectRatio’ on the given ‘image’ element.

5.11.12 Interface SVGSwitchElement

The SVGSwitchElement interface corresponds to the ‘switch’ element.
interface SVGSwitchElement : SVGElement,
                             SVGTests,
                             SVGLangSpace,
                             SVGExternalResourcesRequired,
                             SVGStylable,
                             SVGTransformable {
};

5.11.13 Interface GetSVGDocument

This interface provides access to an SVG document embedded by reference in another DOM-based language. The expectation is that the interface is implemented on DOM objects that allow such SVG document references, such as the DOM Element object that corresponds to an HTML ‘object’ element. Such DOM objects are often also required to implement the EmbeddingElement defined in the Window specification [WINDOW].

This interface is deprecated and may be dropped from future versions of the SVG specification. Authors are suggested to use the contentDocument attribute on the EmbeddingElement interface to obtain a referenced SVG document, if that interface is available.

interface GetSVGDocument {
  SVGDocument getSVGDocument();
};
Operations:
SVGDocument getSVGDocument()

This method must return the Document object embedded content in an embedding element, or null if there is no document.

Note that this is equivalent to fetching the value of the EmbeddingElement::contentDocument attribute of the embedding element, if the EmbeddingElement interface is also implemented. The author is advised to check that the document element of the returned Document is indeed an ‘svg’ element instead of assuming that that will always be the case.

Returns
The Document object for the referenced document, or null if there is no document.

4 Basic Data Types and Interfaces

Contents

4.1 Syntax

The EBNF grammar is as used in the XML specification, with the addition of ~, a case-insensitive literal: characters in the ASCII range (only) are declared to be case-insensitive. For example, ~"Hello" will match (H|h)(e|e)(l|L)(l|L)(o|O). This makes the productions much easier to read.

?optional, zero or one
+one or more
*zero or more
|alternation
"string"literal
~"string"case-insensitive literal
[]a character range
[^]excluded character range
()grouping

4.2 Basic data types

This section defines a number of common data types used in the definitions of SVG properties and attributes. Some data types that are not referenced by multiple properties and attributes are defined inline in subsequent chapters.

Note that, as noted below, the specification of some types is different for CSS property values in style sheets (in the ‘style’ attribute, ‘style’ element or an external style sheet) than it is for for XML attribute values (including presentation attributes). This is due to restrictions in the CSS grammar. For example, scientific notation is allowed in attributes, including presentation attributes, but not in style sheets.

<angle>

Angles are specified in one of two ways depending upon whether they are used in CSS property syntax or SVG presentation attribute syntax:

  • When an <angle> is used in a style sheet or with a property in a ‘style’ attribute, the syntax must match the following pattern:

    angle ::= number (~"deg" | ~"grad" | ~"rad")?

    where deg indicates degrees, grad indicates grads and rad indicates radians. The unit identifier may be in lower (recommended) or upper case.

    For properties defined in CSS2 [CSS2], an angle unit identifier must be provided (for non-zero values). For SVG-specific properties the angle unit identifier is optional. If a unit is not provided, the angle value is assumed to be in degrees.

  • When an <angle> is used in an SVG presentation attribute, the syntax must match the following pattern:

    angle ::= number ("deg" | "grad" | "rad")?

    The unit identifier, if present, must be in lower case; if not present, the angle value is assumed to be in degrees.

In the SVG DOM, <angle> values are represented using SVGAngle or SVGAnimatedAngle objects.

<anything>

The basic type <anything> is a sequence of zero or more characters. Specifically:

anything ::= Char*

where Char is the production for a character, as defined in XML 1.0 ([XML10], section 2.2).

<color>

The basic type <color> is a CSS2 compatible specification for a color in the sRGB color space [SRGB]. <color> applies to SVG's use of the ‘color’ property and is a component of the definitions of properties ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ and ‘lighting-color’, which also offer optional ICC-based color specifications.

SVG supports all of the syntax alternatives for <color> defined in CSS2 syntax and basic data types ([CSS2], section 4.3.6), with the exception that SVG allows an expanded list of recognized color keywords names.

A <color> is either a keyword (see Recognized color keyword names) or a numerical RGB specification.

In addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment. The normative definition of these keywords is found in User preferences for colors ([CSS2], section 18.2).

The format of an RGB value in hexadecimal notation is a "#" immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display. The format of an RGB value in the functional notation is an RGB start-function followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")". An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(". For compatibility, the all-lowercase form "rgb(" is preferred. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White space characters are allowed around the numerical values. All RGB colors are specified in the sRGB color space [SRGB]. Using sRGB provides an unambiguous and objectively measurable definition of the color, which can be related to international standards (see [COLORIMETRY]).

color    ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
             | "rgb(" wsp* integer comma integer comma integer wsp* ")"
             | "rgb(" wsp* integer "%" comma integer "%" comma integer "%" wsp* ")"
             | color-keyword
hexdigit ::= [0-9A-Fa-f]
comma    ::= wsp* "," wsp*
    

where color-keyword matches (case insensitively) one of the color keywords listed in Recognized color keyword names below, or one of the system color keywords listed in User preferences for colors ([CSS2], section 18.2).

The corresponding SVG DOM interface definitions for <color> are defined in Document Object Model CSS; in particular, see RGBColor ([DOM2STYLE], section 2.2). SVG's extension to color, including the ability to specify ICC-based colors, are represented using DOM interface SVGColor.

<coordinate>

A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length>.

coordinate ::= length

Within the SVG DOM, a <coordinate> is represented as an SVGLength or an SVGAnimatedLength.

<frequency>

Frequency values are used with aural properties. As defined in CSS2, a frequency value is a <number> immediately followed by a frequency unit identifier. The frequency unit identifiers are:

  • Hz: Hertz
  • kHz: kilo Hertz

Frequency values may not be negative.

In the SVG DOM, <frequency> values are represented using the CSSPrimitiveValue interface defined in Document Object Model CSS ([DOM2STYLE], section 2.2).

<FuncIRI>
Functional notation for an IRI: "url(" <IRI> ")".
<icccolor>

An <icccolor> is an ICC color specification. In SVG 1.1, an ICC color specification is given by a name, which references a ‘color-profile’ element, and one or more color component values. The grammar is as follows:

icccolor ::= "icc-color(" name (comma-wsp number)+ ")"
name     ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */

The corresponding SVG DOM interface for <icccolor> is SVGICCColor.

<integer>

An <integer> is specified as an optional sign character ("+" or "-") followed by one or more digits "0" to "9":

integer ::= [+-]? [0-9]+

If the sign character is not present, the number is non-negative.

Unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) -2147483648 to 2147483647.

Within the SVG DOM, an <integer> is represented as a long or an SVGAnimatedInteger.

<IRI>

An Internationalized Resource Identifier (see IRI). For the specification of IRI references in SVG, see IRI references.

<length>

A length is a distance measurement, given as a number along with a unit which may be optional. Lengths are specified in one of two ways depending upon whether they are used in CSS property syntax or SVG presentation attribute syntax:

  • When a <length> is used in a style sheet or with a property in a ‘style’ attribute, the syntax must match the following pattern:

    length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?

    See the CSS2 specification for the meanings of the unit identifiers. The unit identifier may be in lower (recommended) or upper case.

    For properties defined in CSS2 [CSS2], a length unit identifier must be provided (for non-zero values). For SVG-specific properties, the length unit identifier is optional. If a unit is not provided, the length value represents a distance in the current user coordinate system.

  • When a <length> is used in an SVG presentation attribute, the syntax must match the following pattern:

    length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

    The unit identifier, if present, must be in lower case; if not present, the length value represents a distance in the current user coordinate system.

    Note that the non-property <length> definition also allows a percentage unit identifier. The meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. Two common cases are: (a) when a percentage length value represents a percentage of the viewport width or height (refer to the section that discusses units in general), and (b) when a percentage length value represents a percentage of the bounding box width or height on a given object (refer to the section that describes object bounding box units).

In the SVG DOM, <length> values are represented using SVGLength or SVGAnimatedLength objects.

<list-of-family-names>

A <list-of-family-names> is a list of font family names using the same syntax as the ‘font-family’ property, excluding the <generic-family> and 'inherit' values.

<list-of-strings>

A <list-of-strings> consists of a separated sequence of <string>s. String lists are white space-separated, where white space is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A) and "carriage return" (U+000D).

The following is an EBNF grammar describing the <list-of-strings> syntax:

list-of-strings ::= string
                    | string wsp list-of-strings
string          ::= [^#x9#xA#xD#x20]*
wsp             ::= [#x9#xA#xD#x20]+
<list-of-Ts>

(Where T is a type other than <string> and <family-name>.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated, with optional white space before or after the comma, or white space-separated.

White space in lists is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D) and "form-feed" (U+000C).

The following is a template for an EBNF grammar describing the <list-of-Ts> syntax:

list-of-Ts ::= T
               | T comma-wsp list-of-Ts
comma-wsp  ::= (wsp+ ","? wsp*) | ("," wsp*)
wsp        ::= (#x20 | #x9 | #xD | #xA)

Within the SVG DOM, values of a <list-of-Ts> type are represented by an interface specific for the particular type T. For example, a <list-of-lengths> is represented in the SVG DOM using an SVGLengthList or SVGAnimatedLengthList object.

<name>

A name, which is a string where a few characters of syntactic significance are disallowed.

name  ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */
<number>

Real numbers are specified in one of two ways. When used in a style sheet, a <number> is defined as follows:

number ::= integer
           | [+-]? [0-9]* "." [0-9]+

This syntax is the same as the definition in CSS ([CSS2], section 4.3.1).

When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:

number ::= integer ([Ee] integer)?
           | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?

Within the SVG DOM, a <number> is represented as a float, SVGNumber or a SVGAnimatedNumber.

<number-optional-number>

A pair of <number>s, where the second <number> is optional.

number-optional-number ::= number
                           | number comma-wsp number

In the SVG DOM, a <number-optional-number> is represented using a pair of SVGAnimatedInteger or SVGAnimatedNumber objects.

<paint>

The values for properties ‘fill’ and ‘stroke’ are specifications of the type of paint to use when filling or stroking a given graphics element. The available options and syntax for <paint> are described in Specifying paint.

Within the SVG DOM, <paint> values are represented using SVGPaint objects.

<percentage>

Percentages are specified as a number followed by a "%" character:

percentage ::= number "%"

Note that the definition of <number> depends on whether the percentage is specified in a style sheet or in an attribute that is not also a presentation attribute.

Percentage values are always relative to another value, for example a length. Each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers.

Within the SVG DOM, a <percentage> is represented using an SVGNumber or SVGAnimatedNumber object.

<time>

A time value is a <number> immediately followed by a time unit identifier. The time unit identifiers are:

  • ms: milliseconds
  • s: seconds

In the SVG DOM, <time> values are represented using the CSSPrimitiveValue interface defined in Document Object Model CSS ([DOM2STYLE], section 2.2).

<transform-list>

A <transform-list> is used to specify a list of coordinate system transformations. A detailed description of the possible values for a <transform-list> is given in Modifying the User Coordinate System: the transform attribute.

Within the SVG DOM, a <transform-list> value is represented using an SVGTransformList or SVGAnimatedTransformList object.

<XML-Name>

An XML name, as defined by the Name production in Extensible Markup Language (XML) 1.0 ([XML10], section 2.3).

4.3 Real number precision

Unless stated otherwise for a particular attribute or property, a <number> has the capacity for at least a single-precision floating point number and has a range (at a minimum) of -3.4e+38F to +3.4e+38F.

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 High-Quality SVG Viewers are required to use at least double-precision floating point for intermediate calculations on certain numerical operations.

4.4 Recognized color keyword names

The following is the list of recognized color keywords that can be used as a keyword value for data type <color>:

alicebluergb(240, 248, 255)
antiquewhitergb(250, 235, 215)
aquargb( 0, 255, 255)
aquamarinergb(127, 255, 212)
azurergb(240, 255, 255)
beigergb(245, 245, 220)
bisquergb(255, 228, 196)
blackrgb( 0, 0, 0)
blanchedalmondrgb(255, 235, 205)
bluergb( 0, 0, 255)
bluevioletrgb(138, 43, 226)
brownrgb(165, 42, 42)
burlywoodrgb(222, 184, 135)
cadetbluergb( 95, 158, 160)
chartreusergb(127, 255, 0)
chocolatergb(210, 105, 30)
coralrgb(255, 127, 80)
cornflowerbluergb(100, 149, 237)
cornsilkrgb(255, 248, 220)
crimsonrgb(220, 20, 60)
cyanrgb( 0, 255, 255)
darkbluergb( 0, 0, 139)
darkcyanrgb( 0, 139, 139)
darkgoldenrodrgb(184, 134, 11)
darkgrayrgb(169, 169, 169)
darkgreenrgb( 0, 100, 0)
darkgreyrgb(169, 169, 169)
darkkhakirgb(189, 183, 107)
darkmagentargb(139, 0, 139)
darkolivegreenrgb( 85, 107, 47)
darkorangergb(255, 140, 0)
darkorchidrgb(153, 50, 204)
darkredrgb(139, 0, 0)
darksalmonrgb(233, 150, 122)
darkseagreenrgb(143, 188, 143)
darkslatebluergb( 72, 61, 139)
darkslategrayrgb( 47, 79, 79)
darkslategreyrgb( 47, 79, 79)
darkturquoisergb( 0, 206, 209)
darkvioletrgb(148, 0, 211)
deeppinkrgb(255, 20, 147)
deepskybluergb( 0, 191, 255)
dimgrayrgb(105, 105, 105)
dimgreyrgb(105, 105, 105)
dodgerbluergb( 30, 144, 255)
firebrickrgb(178, 34, 34)
floralwhitergb(255, 250, 240)
forestgreenrgb( 34, 139, 34)
fuchsiargb(255, 0, 255)
gainsbororgb(220, 220, 220)
ghostwhitergb(248, 248, 255)
goldrgb(255, 215, 0)
goldenrodrgb(218, 165, 32)
grayrgb(128, 128, 128)
greyrgb(128, 128, 128)
greenrgb( 0, 128, 0)
greenyellowrgb(173, 255, 47)
honeydewrgb(240, 255, 240)
hotpinkrgb(255, 105, 180)
indianredrgb(205, 92, 92)
indigorgb( 75, 0, 130)
ivoryrgb(255, 255, 240)
khakirgb(240, 230, 140)
lavenderrgb(230, 230, 250)
lavenderblushrgb(255, 240, 245)
lawngreenrgb(124, 252, 0)
lemonchiffonrgb(255, 250, 205)
lightbluergb(173, 216, 230)
lightcoralrgb(240, 128, 128)
lightcyanrgb(224, 255, 255)
lightgoldenrodyellowrgb(250, 250, 210)
lightgrayrgb(211, 211, 211)
lightgreenrgb(144, 238, 144)
lightgreyrgb(211, 211, 211)
    
lightpinkrgb(255, 182, 193)
lightsalmonrgb(255, 160, 122)
lightseagreenrgb( 32, 178, 170)
lightskybluergb(135, 206, 250)
lightslategrayrgb(119, 136, 153)
lightslategreyrgb(119, 136, 153)
lightsteelbluergb(176, 196, 222)
lightyellowrgb(255, 255, 224)
limergb( 0, 255, 0)
limegreenrgb( 50, 205, 50)
linenrgb(250, 240, 230)
magentargb(255, 0, 255)
maroonrgb(128, 0, 0)
mediumaquamarinergb(102, 205, 170)
mediumbluergb( 0, 0, 205)
mediumorchidrgb(186, 85, 211)
mediumpurplergb(147, 112, 219)
mediumseagreenrgb( 60, 179, 113)
mediumslatebluergb(123, 104, 238)
mediumspringgreenrgb( 0, 250, 154)
mediumturquoisergb( 72, 209, 204)
mediumvioletredrgb(199, 21, 133)
midnightbluergb( 25, 25, 112)
mintcreamrgb(245, 255, 250)
mistyrosergb(255, 228, 225)
moccasinrgb(255, 228, 181)
navajowhitergb(255, 222, 173)
navyrgb( 0, 0, 128)
oldlacergb(253, 245, 230)
olivergb(128, 128, 0)
olivedrabrgb(107, 142, 35)
orangergb(255, 165, 0)
orangeredrgb(255, 69, 0)
orchidrgb(218, 112, 214)
palegoldenrodrgb(238, 232, 170)
palegreenrgb(152, 251, 152)
paleturquoisergb(175, 238, 238)
palevioletredrgb(219, 112, 147)
papayawhiprgb(255, 239, 213)
peachpuffrgb(255, 218, 185)
perurgb(205, 133, 63)
pinkrgb(255, 192, 203)
plumrgb(221, 160, 221)
powderbluergb(176, 224, 230)
purplergb(128, 0, 128)
redrgb(255, 0, 0)
rosybrownrgb(188, 143, 143)
royalbluergb( 65, 105, 225)
saddlebrownrgb(139, 69, 19)
salmonrgb(250, 128, 114)
sandybrownrgb(244, 164, 96)
seagreenrgb( 46, 139, 87)
seashellrgb(255, 245, 238)
siennargb(160, 82, 45)
silverrgb(192, 192, 192)
skybluergb(135, 206, 235)
slatebluergb(106, 90, 205)
slategrayrgb(112, 128, 144)
slategreyrgb(112, 128, 144)
snowrgb(255, 250, 250)
springgreenrgb( 0, 255, 127)
steelbluergb( 70, 130, 180)
tanrgb(210, 180, 140)
tealrgb( 0, 128, 128)
thistlergb(216, 191, 216)
tomatorgb(255, 99, 71)
turquoisergb( 64, 224, 208)
violetrgb(238, 130, 238)
wheatrgb(245, 222, 179)
whitergb(255, 255, 255)
whitesmokergb(245, 245, 245)
yellowrgb(255, 255, 0)
yellowgreenrgb(154, 205, 50)
  

4.5 Basic DOM interfaces

4.5.1 Interface SVGElement

All of the SVG DOM interfaces that correspond directly to elements in the SVG language (such as the SVGPathElement interface for the ‘path’ element) derive from the SVGElement interface.
interface SVGElement : Element {
           attribute DOMString id setraises(DOMException);
           attribute DOMString xmlbase setraises(DOMException);
  readonly attribute SVGSVGElement ownerSVGElement;
  readonly attribute SVGElement viewportElement;
};
Attributes:
id (DOMString)
The value of the ‘id’ attribute on the given element, or the empty string if ‘id’ is not present.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
xmlbase (DOMString)
Corresponds to attribute ‘xml:base’ on the given element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
ownerSVGElement (readonly SVGSVGElement)
The nearest ancestor ‘svg’ element. Null if the given element is the outermost svg element.
viewportElement (readonly SVGElement)
The element which established the current viewport. Often, the nearest ancestor ‘svg’ element. Null if the given element is the outermost svg element.

4.5.2 Interface SVGAnimatedBoolean

Used for attributes of type boolean which can be animated.
interface SVGAnimatedBoolean {
           attribute boolean baseVal setraises(DOMException);
  readonly attribute boolean animVal;
};
Attributes:
baseVal (boolean)
The base value of the given attribute before applying any animations.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
animVal (readonly boolean)
If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.3 Interface SVGAnimatedString

Used for attributes of type DOMString which can be animated.
interface SVGAnimatedString {
           attribute DOMString baseVal setraises(DOMException);
  readonly attribute DOMString animVal;
};
Attributes:
baseVal (DOMString)
The base value of the given attribute before applying any animations.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
animVal (readonly DOMString)
If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.4 Interface SVGStringList

This interface defines a list of DOMString values.

SVGStringList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

interface SVGStringList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  DOMString initialize(in DOMString newItem) raises(DOMException);
  DOMString getItem(in unsigned long index) raises(DOMException);
  DOMString insertItemBefore(in DOMString newItem, in unsigned long index) raises(DOMException);
  DOMString replaceItem(in DOMString newItem, in unsigned long index) raises(DOMException);
  DOMString removeItem(in unsigned long index) raises(DOMException);
  DOMString appendItem(in DOMString newItem) raises(DOMException);
};
Attributes:
numberOfItems (readonly unsigned long)
The number of items in the list.
Operations:
void clear()
Clears all existing current items from the list, with the result being an empty list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMString initialize(in DOMString newItem)
Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter.
Parameters
  1. DOMString newItem
    The item which should become the only member of the list.
Returns
The item being inserted into the list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMString getItem(in unsigned long index)
Returns the specified item from the list.
Parameters
  1. unsigned long index
    The index of the item from the list which is to be returned. The first item is number 0.
Returns
The selected item.
Exceptions
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
DOMString insertItemBefore(in DOMString newItem, in unsigned long index)
Inserts a new item into the list at the specified position. The first item is number 0.
Parameters
  1. DOMString newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMString replaceItem(in DOMString newItem, in unsigned long index)
Replaces an existing item in the list with a new item.
Parameters
  1. DOMString newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item which is to be replaced. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
DOMString removeItem(in unsigned long index)
Removes an existing item from the list.
Parameters
  1. unsigned long index
    The index of the item which is to be removed. The first item is number 0.
Returns
The removed item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
DOMString appendItem(in DOMString newItem)
Inserts a new item at the end of the list.
Parameters
  1. DOMString newItem
    The item which is to be inserted. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.

4.5.5 Interface SVGAnimatedEnumeration

Used for attributes whose value must be a constant from a particular enumeration and which can be animated.
interface SVGAnimatedEnumeration {
           attribute unsigned short baseVal setraises(DOMException);
  readonly attribute unsigned short animVal;
};
Attributes:
baseVal (unsigned short)
The base value of the given attribute before applying any animations.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
animVal (readonly unsigned short)
If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.6 Interface SVGAnimatedInteger

Used for attributes of basic type <integer> which can be animated.
interface SVGAnimatedInteger {
           attribute long baseVal setraises(DOMException);
  readonly attribute long animVal;
};
Attributes:
baseVal (long)
The base value of the given attribute before applying any animations.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
animVal (readonly long)
If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.7 Interface SVGNumber

Used for attributes of basic type <number>.
interface SVGNumber {
  attribute float value setraises(DOMException);
};
Attributes:
value (float)
The value of the given attribute.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

4.5.8 Interface SVGAnimatedNumber

Used for attributes of basic type <number> which can be animated.
interface SVGAnimatedNumber {
           attribute float baseVal setraises(DOMException);
  readonly attribute float animVal;
};
Attributes:
baseVal (float)
The base value of the given attribute before applying any animations.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
animVal (readonly float)
If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, contains the same value as baseVal.

4.5.9 Interface SVGNumberList

This interface defines a list of SVGNumber objects.

SVGNumberList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

An SVGNumberList 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.

interface SVGNumberList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  SVGNumber initialize(in SVGNumber newItem) raises(DOMException);
  SVGNumber getItem(in unsigned long index) raises(DOMException);
  SVGNumber insertItemBefore(in SVGNumber newItem, in unsigned long index) raises(DOMException);
  SVGNumber replaceItem(in SVGNumber newItem, in unsigned long index) raises(DOMException);
  SVGNumber removeItem(in unsigned long index) raises(DOMException);
  SVGNumber appendItem(in SVGNumber newItem) raises(DOMException);
};
Attributes:
numberOfItems (readonly unsigned long)
The number of items in the list.
Operations:
void clear()
Clears all existing current items from the list, with the result being an empty list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGNumber initialize(in SVGNumber newItem)
Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGNumber newItem
    The item which should become the only member of the list.
Returns
The item being inserted into the list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGNumber getItem(in unsigned long index)
Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.
Parameters
  1. unsigned long index
    The index of the item from the list which is to be returned. The first item is number 0.
Returns
The selected item.
Exceptions
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGNumber insertItemBefore(in SVGNumber newItem, in unsigned long index)
Inserts a new item into the list at the specified position. The first item is number 0. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item.
Parameters
  1. SVGNumber newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGNumber replaceItem(in SVGNumber newItem, in unsigned long index)
Replaces an existing item in the list with a new item. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item.
Parameters
  1. SVGNumber newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item which is to be replaced. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGNumber removeItem(in unsigned long index)
Removes an existing item from the list.
Parameters
  1. unsigned long index
    The index of the item which is to be removed. The first item is number 0.
Returns
The removed item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGNumber appendItem(in SVGNumber newItem)
Inserts a new item at the end of the list. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGNumber newItem
    The item which is to be inserted. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.

4.5.10 Interface SVGAnimatedNumberList

Used for attributes which take a list of numbers and which can be animated.
interface SVGAnimatedNumberList {
  readonly attribute SVGNumberList baseVal;
  readonly attribute SVGNumberList animVal;
};
Attributes:
baseVal (readonly SVGNumberList)
The base value of the given attribute before applying any animations.
animVal (readonly SVGNumberList)
A read only SVGNumberList representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGNumberList will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.11 Interface SVGLength

The SVGLength interface corresponds to the <length> basic data type.

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.

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 setraises(DOMException);
           attribute float valueInSpecifiedUnits setraises(DOMException);
           attribute DOMString valueAsString setraises(DOMException);

  void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
  void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};
Constants in group “Length Unit Types”:
SVG_LENGTHTYPE_UNKNOWN (unsigned short)
The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_LENGTHTYPE_NUMBER (unsigned short)
No unit type was provided (i.e., a unitless value was specified), which indicates a value in user units.
SVG_LENGTHTYPE_PERCENTAGE (unsigned short)
A percentage value was specified.
SVG_LENGTHTYPE_EMS (unsigned short)
A value was specified using the em units defined in CSS2.
SVG_LENGTHTYPE_EXS (unsigned short)
A value was specified using the ex units defined in CSS2.
SVG_LENGTHTYPE_PX (unsigned short)
A value was specified using the px units defined in CSS2.
SVG_LENGTHTYPE_CM (unsigned short)
A value was specified using the cm units defined in CSS2.
SVG_LENGTHTYPE_MM (unsigned short)
A value was specified using the mm units defined in CSS2.
SVG_LENGTHTYPE_IN (unsigned short)
A value was specified using the in units defined in CSS2.
SVG_LENGTHTYPE_PT (unsigned short)
A value was specified using the pt units defined in CSS2.
SVG_LENGTHTYPE_PC (unsigned short)
A value was specified using the pc units defined in CSS2.
Attributes:
unitType (readonly unsigned short)
The type of the value as specified by one of the SVG_LENGTHTYPE_* constants defined on this interface.
value (float)
The value as a floating point value, in user units. Setting this attribute will cause valueInSpecifiedUnits and valueAsString to be updated automatically to reflect this setting.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the length corresponds to a read only attribute or when the object itself is read only.
valueInSpecifiedUnits (float)
The value as a floating point value, in the units expressed by unitType. Setting this attribute will cause value and valueAsString to be updated automatically to reflect this setting.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the length corresponds to a read only attribute or when the object itself is read only.
valueAsString (DOMString)
The value as a string value, in the units expressed by unitType. Setting this attribute will cause value, valueInSpecifiedUnits and unitType to be updated automatically to reflect this setting.
Exceptions on setting
DOMException, code SYNTAX_ERR
Raised if the assigned string cannot be parsed as a valid <length>.
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the length corresponds to a read only attribute or when the object itself is read only.
Operations:
void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)
Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object.
Parameters
  1. unsigned short unitType
    The unit type for the value (e.g., SVG_LENGTHTYPE_MM).
  2. float valueInSpecifiedUnits
    The new value.
Exceptions
DOMException, code NOT_SUPPORTED_ERR
Raised if unitType is SVG_LENGTHTYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_LENGTHTYPE_* constants defined on this interface).
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the length corresponds to a read only attribute or when the object itself is read only.
void convertToSpecifiedUnits(in unsigned short unitType)
Preserve the same underlying stored value, but reset the stored unit identifier to the given unitType. Object attributes unitType, valueInSpecifiedUnits and valueAsString might be modified as a result of this method. For example, if the original value were "0.5cm" and the method was invoked to convert to millimeters, then the unitType would be changed to SVG_LENGTHTYPE_MM, valueInSpecifiedUnits would be changed to the numeric value 5 and valueAsString would be changed to "5mm".
Parameters
  1. unsigned short unitType
    The unit type to switch to (e.g., SVG_LENGTHTYPE_MM).
Exceptions
DOMException, code NOT_SUPPORTED_ERR
Raised if unitType is SVG_LENGTHTYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_LENGTHTYPE_* constants defined on this interface).
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the length corresponds to a read only attribute or when the object itself is read only.

4.5.12 Interface SVGAnimatedLength

Used for attributes of basic type <length> which can be animated.
interface SVGAnimatedLength {
  readonly attribute SVGLength baseVal;
  readonly attribute SVGLength animVal;
};
Attributes:
baseVal (readonly SVGLength)
The base value of the given attribute before applying any animations.
animVal (readonly SVGLength)
A read only SVGLength representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGLength will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.13 Interface SVGLengthList

This interface defines a list of SVGLength objects.

SVGLengthList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

An SVGLengthList 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.

interface SVGLengthList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  SVGLength initialize(in SVGLength newItem) raises(DOMException);
  SVGLength getItem(in unsigned long index) raises(DOMException);
  SVGLength insertItemBefore(in SVGLength newItem, in unsigned long index) raises(DOMException);
  SVGLength replaceItem(in SVGLength newItem, in unsigned long index) raises(DOMException);
  SVGLength removeItem(in unsigned long index) raises(DOMException);
  SVGLength appendItem(in SVGLength newItem) raises(DOMException);
};
Attributes:
numberOfItems (readonly unsigned long)
The number of items in the list.
Operations:
void clear()
Clears all existing current items from the list, with the result being an empty list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGLength initialize(in SVGLength newItem)
Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGLength newItem
    The item which should become the only member of the list.
Returns
The item being inserted into the list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGLength getItem(in unsigned long index)
Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.
Parameters
  1. unsigned long index
    The index of the item from the list which is to be returned. The first item is number 0.
Returns
The selected item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGLength insertItemBefore(in SVGLength newItem, in unsigned long index)
Inserts a new item into the list at the specified position. The first item is number 0. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item.
Parameters
  1. SVGLength newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGLength replaceItem(in SVGLength newItem, in unsigned long index)
Replaces an existing item in the list with a new item. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item.
Parameters
  1. SVGLength newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item which is to be replaced. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGLength removeItem(in unsigned long index)
Removes an existing item from the list.
Parameters
  1. unsigned long index
    The index of the item which is to be removed. The first item is number 0.
Returns
The removed item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGLength appendItem(in SVGLength newItem)
Inserts a new item at the end of the list. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGLength newItem
    The item which is to be inserted. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.

4.5.14 Interface SVGAnimatedLengthList

Used for attributes of type SVGLengthList which can be animated.
interface SVGAnimatedLengthList {
  readonly attribute SVGLengthList baseVal;
  readonly attribute SVGLengthList animVal;
};
Attributes:
baseVal (readonly SVGLengthList)
The base value of the given attribute before applying any animations.
animVal (readonly SVGLengthList)
A read only SVGLengthList representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGLengthList will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.15 Interface SVGAngle

The SVGAngle interface corresponds to the <angle> basic data type.

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.

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 setraises(DOMException);
           attribute float valueInSpecifiedUnits setraises(DOMException);
           attribute DOMString valueAsString setraises(DOMException);

  void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits) raises(DOMException);
  void convertToSpecifiedUnits(in unsigned short unitType) raises(DOMException);
};
Constants in group “Angle Unit Types”:
SVG_ANGLETYPE_UNKNOWN (unsigned short)
The unit type is not one of predefined unit types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_ANGLETYPE_UNSPECIFIED (unsigned short)
No unit type was provided (i.e., a unitless value was specified). For angles, a unitless value is treated the same as if degrees were specified.
SVG_ANGLETYPE_DEG (unsigned short)
The unit type was explicitly set to degrees.
SVG_ANGLETYPE_RAD (unsigned short)
The unit type is radians.
SVG_ANGLETYPE_GRAD (unsigned short)
The unit type is radians.
Attributes:
unitType (readonly unsigned short)
The type of the value as specified by one of the SVG_ANGLETYPE_* constants defined on this interface.
value (float)
The angle value as a floating point value, in degrees. Setting this attribute will cause valueInSpecifiedUnits and valueAsString to be updated automatically to reflect this setting.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the angle corresponds to a read only attribute or when the object itself is read only.
valueInSpecifiedUnits (float)
The angle value as a floating point value, in the units expressed by unitType. Setting this attribute will cause value and valueAsString to be updated automatically to reflect this setting.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the angle corresponds to a read only attribute or when the object itself is read only.
valueAsString (DOMString)
The angle value as a string value, in the units expressed by unitType. Setting this attribute will cause value, valueInSpecifiedUnits and unitType to be updated automatically to reflect this setting.
Exceptions on setting
DOMException, code SYNTAX_ERR
Raised if the assigned string cannot be parsed as a valid <angle>.
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the angle corresponds to a read only attribute or when the object itself is read only.
Operations:
void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)
Reset the value as a number with an associated unitType, thereby replacing the values for all of the attributes on the object.
Parameters
  1. unsigned short unitType
    The unit type for the value (e.g., SVG_ANGLETYPE_DEG).
  2. float valueInSpecifiedUnits
    The angle value.
Exceptions
DOMException, code NOT_SUPPORTED_ERR
Raised if unitType is SVG_ANGLETYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_ANGLETYPE_* constants defined on this interface).
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the angle corresponds to a read only attribute or when the object itself is read only.
void convertToSpecifiedUnits(in unsigned short unitType)
Preserve the same underlying stored value, but reset the stored unit identifier to the given unitType. Object attributes unitType, valueInSpecifiedUnits and valueAsString might be modified as a result of this method.
Parameters
  1. unsigned short unitType
    The unit type to switch to (e.g., SVG_ANGLETYPE_DEG).
Exceptions
DOMException, code NOT_SUPPORTED_ERR
Raised if unitType is SVG_ANGLETYPE_UNKNOWN or not a valid unit type constant (one of the other SVG_ANGLETYPE_* constants defined on this interface).
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the angle corresponds to a read only attribute or when the object itself is read only.

4.5.16 Interface SVGAnimatedAngle

Used for attributes of basic data type <angle> that can be animated.
interface SVGAnimatedAngle {
  readonly attribute SVGAngle baseVal;
  readonly attribute SVGAngle animVal;
};
Attributes:
baseVal (readonly SVGAngle)
The base value of the given attribute before applying any animations.
animVal (readonly SVGAngle)
A read only SVGAngle representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGAngle will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.17 Interface SVGColor

The SVGColor interface corresponds to color value definition for properties ‘stop-color’, ‘flood-color’ and ‘lighting-color’ and is a base class for interface SVGPaint. It incorporates SVG's extended notion of color, which incorporates ICC-based color specifications.

Interface SVGColor does not correspond to the <color> basic data type. For the <color> basic data type, the applicable DOM interfaces are defined in DOM Level 2 Style; in particular, see the RGBColor interface ([DOM2STYLE], section 2.2).

Note: The SVGColor interface is deprecated, and may be dropped from future versions of the SVG specification.

interface SVGColor : CSSValue {

  // Color Types
  const unsigned short SVG_COLORTYPE_UNKNOWN = 0;
  const unsigned short SVG_COLORTYPE_RGBCOLOR = 1;
  const unsigned short SVG_COLORTYPE_RGBCOLOR_ICCCOLOR = 2;
  const unsigned short SVG_COLORTYPE_CURRENTCOLOR = 3;

  readonly attribute unsigned short colorType;
  readonly attribute RGBColor rgbColor;
  readonly attribute SVGICCColor iccColor;

  void setRGBColor(in DOMString rgbColor) raises(SVGException);
  void setRGBColorICCColor(in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
  void setColor(in unsigned short colorType, in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
};
Constants in group “Color Types”:
SVG_COLORTYPE_UNKNOWN (unsigned short)
The color type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_COLORTYPE_RGBCOLOR (unsigned short)
An sRGB color has been specified without an alternative ICC color specification.
SVG_COLORTYPE_RGBCOLOR_ICCCOLOR (unsigned short)
An sRGB color has been specified along with an alternative ICC color specification.
SVG_COLORTYPE_CURRENTCOLOR (unsigned short)
Corresponds to when keyword currentColor has been specified.
Attributes:
colorType (readonly unsigned short)
The type of the value as specified by one of the SVG_COLORTYPE_* constants defined on this interface.
rgbColor (readonly RGBColor)
The color specified in the sRGB color space.
iccColor (readonly SVGICCColor)
The alternate ICC color specification.
Operations:
void setRGBColor(in DOMString rgbColor)
Modifies the color value to be the specified sRGB color without an alternate ICC color specification.
Parameters
  1. DOMString rgbColor
    A string that matches <color>, which specifies the new sRGB color value.
Exceptions
SVGException, code SVG_INVALID_VALUE_ERR
Raised if rgbColor does not match <color>.
void setRGBColorICCColor(in DOMString rgbColor, in DOMString iccColor)
Modifies the color value to be the specified sRGB color with an alternate ICC color specification.
Parameters
  1. DOMString rgbColor
    A string that matches <color>, which specifies the new sRGB color value.
  2. DOMString iccColor
    A string that matches <icccolor>, which specifies the alternate ICC color specification.
Exceptions
SVGException, code SVG_INVALID_VALUE_ERR
Raised if rgbColor does not match <color> or if iccColor does not match <icccolor>.
void setColor(in unsigned short colorType, in DOMString rgbColor, in DOMString iccColor)
Sets the color value as specified by the parameters. If colorType requires an RGBColor, then rgbColor must be a string that matches <color>; otherwise, rgbColor. must be null. If colorType requires an SVGICCColor, then iccColor must be a string that matches <icccolor>; otherwise, iccColor must be null.
Parameters
  1. unsigned short colorType
    One of the defined constants for colorType.
  2. DOMString rgbColor
    The specification of an sRGB color, or null.
  3. DOMString iccColor
    The specification of an ICC color, or null.
Exceptions
SVGException, code SVG_INVALID_VALUE_ERR
Raised if one of the parameters has an invalid value.

4.5.18 Interface SVGICCColor

The SVGICCColor interface expresses an ICC-based color specification.

Note: The SVGICCColor interface is deprecated, and may be dropped from future versions of the SVG specification.

interface SVGICCColor {
           attribute DOMString colorProfile setraises(DOMException);
  readonly attribute SVGNumberList colors;
};
Attributes:
colorProfile (DOMString)
The name of the color profile, which is the first parameter of an ICC color specification.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
colors (readonly SVGNumberList)
The list of color values that define this ICC color. Each color value is an arbitrary floating point number.

4.5.19 Interface SVGRect

Represents rectangular geometry. Rectangles are defined as consisting of a (x,y) coordinate pair identifying a minimum X value, a minimum Y value, and a width and height, which are usually constrained to be non-negative.

An SVGRect 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.

interface SVGRect {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float width setraises(DOMException);
  attribute float height setraises(DOMException);
};
Attributes:
x (float)
The x coordinate of the rectangle, in user units.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the rectangle corresponds to a read only attribute or when the object itself is read only.
y (float)
The y coordinate of the rectangle, in user units.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the rectangle corresponds to a read only attribute or when the object itself is read only.
width (float)
The width coordinate of the rectangle, in user units.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the rectangle corresponds to a read only attribute or when the object itself is read only.
height (float)
The height coordinate of the rectangle, in user units.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the rectangle corresponds to a read only attribute or when the object itself is read only.

4.5.20 Interface SVGAnimatedRect

Used for attributes of type SVGRect which can be animated.
interface SVGAnimatedRect {
  readonly attribute SVGRect baseVal;
  readonly attribute SVGRect animVal;
};
Attributes:
baseVal (readonly SVGRect)
The base value of the given attribute before applying any animations.
animVal (readonly SVGRect)
A read only SVGRect representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGRect will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

4.5.21 Interface SVGUnitTypes

The SVGUnitTypes interface defines a commonly used set of constants and is a base interface used by SVGGradientElement, SVGPatternElement, SVGClipPathElement, SVGMaskElement and SVGFilterElement.
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;
};
Constants in group “Unit Types”:
SVG_UNIT_TYPE_UNKNOWN (unsigned short)
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_UNIT_TYPE_USERSPACEONUSE (unsigned short)
Corresponds to value 'userSpaceOnUse'.
SVG_UNIT_TYPE_OBJECTBOUNDINGBOX (unsigned short)
Corresponds to value 'objectBoundingBox'.

4.5.22 Interface SVGStylable

The SVGStylable interface is implemented on all objects corresponding to SVG elements that can have ‘style’, ‘class’ and presentation attributes specified on them. It is thus an ancestor interface for many of the interfaces defined in this specification.
interface SVGStylable {

  readonly attribute SVGAnimatedString className;
  readonly attribute CSSStyleDeclaration style;

  CSSValue getPresentationAttribute(in DOMString name);
};
Attributes:
className (readonly SVGAnimatedString)
Corresponds to attribute ‘class’ on the given element.
style (readonly CSSStyleDeclaration)
Corresponds to attribute ‘style’ on the given element. If the user agent does not support styling with CSS, then this attribute must always have the value of null.
Operations:
CSSValue getPresentationAttribute(in DOMString name)
Returns the base (i.e., static) value of a given presentation attribute as an object of type CSSValue. The returned object is live; changes to the objects represent immediate changes to the objects to which the CSSValue is attached.

Note: The getPresentationAttribute method is deprecated, and may be dropped from future versions of the SVG specification.

Parameters
  1. DOMString name
    The name of the presentation attribute whose value is to be returned.
Returns
The static/base value of the given presentation attribute as a CSSValue, or null if the given attribute does not have a specified value.

4.5.23 Interface SVGLocatable

Interface SVGLocatable is for all elements which either have a ‘transform’ attribute or don't have a ‘transform’ attribute but whose content can have a bounding box in current user space.
interface SVGLocatable {

  readonly attribute SVGElement nearestViewportElement;
  readonly attribute SVGElement farthestViewportElement;

  SVGRect getBBox();
  SVGMatrix getCTM();
  SVGMatrix getScreenCTM();
  SVGMatrix getTransformToElement(in SVGElement element) raises(SVGException);
};
Attributes:
nearestViewportElement (readonly SVGElement)
The element which established the current viewport. Often, the nearest ancestor ‘svg’ element. Null if the current element is the outermost svg element.
farthestViewportElement (readonly SVGElement)
The farthest ancestor ‘svg’ element. Null if the current element is the outermost svg element.
Operations:
SVGRect getBBox()
Returns the tight bounding box in current user space (i.e., after application of the ‘transform’ attribute, if any) on the geometry of all contained graphics elements, exclusive of stroking, clipping, masking and filter effects). Note that getBBox must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered.
Returns
An SVGRect object that defines the bounding box.
SVGMatrix getCTM()
Returns the transformation matrix from current user units (i.e., after application of the ‘transform’ attribute, if any) to the viewport coordinate system for the nearestViewportElement.
Returns
An SVGMatrix object that defines the CTM.
SVGMatrix getScreenCTM()
Returns the transformation matrix from current user units (i.e., after application of the ‘transform’ attribute, if any) to the parent user agent's notice of a "pixel". For display devices, ideally this represents a physical screen pixel. For other devices or environments where physical pixel sizes are not known, then an algorithm similar to the CSS2 definition of a "pixel" can be used instead. Note that null is returned if this element is not hooked into the document tree. This method would have been more aptly named as getClientCTM, but the name getScreenCTM is kept for historical reasons.
Returns
An SVGMatrix object that defines the given transformation matrix.
SVGMatrix getTransformToElement(in SVGElement element)
Returns the transformation matrix from the user coordinate system on the current element (after application of the ‘transform’ attribute, if any) to the user coordinate system on parameter element (after application of its ‘transform’ attribute, if any).
Parameters
  1. SVGElement element
    The target element.
Returns
An SVGMatrix object that defines the transformation.
Exceptions
SVGException, code SVG_MATRIX_NOT_INVERTABLE
Raised if the currently defined transformation matrices make it impossible to compute the given matrix (e.g., because one of the transformations is singular).

4.5.24 Interface SVGTransformable

Interface SVGTransformable contains properties and methods that apply to all elements which have attribute ‘transform’.
interface SVGTransformable : SVGLocatable {
  readonly attribute SVGAnimatedTransformList transform;
};
Attributes:
transform (readonly SVGAnimatedTransformList)
Corresponds to attribute ‘transform’ on the given element.

4.5.25 Interface SVGTests

Interface SVGTests defines an interface which applies to all elements which have attributes ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’.
interface SVGTests {

  readonly attribute SVGStringList requiredFeatures;
  readonly attribute SVGStringList requiredExtensions;
  readonly attribute SVGStringList systemLanguage;

  boolean hasExtension(in DOMString extension);
};
Attributes:
requiredFeatures (readonly SVGStringList)
Corresponds to attribute ‘requiredFeatures’ on the given element.
requiredExtensions (readonly SVGStringList)
Corresponds to attribute ‘requiredExtensions’ on the given element.
systemLanguage (readonly SVGStringList)
Corresponds to attribute ‘systemLanguage’ on the given element.
Operations:
boolean hasExtension(in DOMString extension)
Returns true if the user agent supports the given extension, specified by a URI.
Parameters
  1. DOMString extension
    The name of the extension, expressed as a URI.
Returns
True or false, depending on whether the given extension is supported.

4.5.26 Interface SVGLangSpace

Interface SVGLangSpace defines an interface which applies to all elements which have attributes ‘xml:lang’ and ‘xml:space’.
interface SVGLangSpace {
  attribute DOMString xmllang setraises(DOMException);
  attribute DOMString xmlspace setraises(DOMException);
};
Attributes:
xmllang (DOMString)
Corresponds to attribute ‘xml:lang’ on the given element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
xmlspace (DOMString)
Corresponds to attribute ‘xml:space’ on the given element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

4.5.27 Interface SVGExternalResourcesRequired

Interface SVGExternalResourcesRequired defines an interface which applies to all elements where this element or one of its descendants can reference an external resource.
interface SVGExternalResourcesRequired {
  readonly attribute SVGAnimatedBoolean externalResourcesRequired;
};
Attributes:
externalResourcesRequired (readonly SVGAnimatedBoolean)
Corresponds to attribute ‘externalResourcesRequired’ on the given element. Note that the SVG DOM defines the attribute ‘externalResourcesRequired’ as being of type SVGAnimatedBoolean, whereas the SVG language definition says that ‘externalResourcesRequired’ is not animated. Because the SVG language definition states that ‘externalResourcesRequired’ cannot be animated, the animVal will always be the same as the baseVal.

4.5.28 Interface SVGFitToViewBox

Interface SVGFitToViewBox defines DOM attributes that apply to elements which have XML attributes ‘viewBox’ and ‘preserveAspectRatio’.
interface SVGFitToViewBox {
  readonly attribute SVGAnimatedRect viewBox;
  readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};
Attributes:
viewBox (readonly SVGAnimatedRect)
Corresponds to attribute ‘viewBox’ on the given element.
preserveAspectRatio (readonly SVGAnimatedPreserveAspectRatio)
Corresponds to attribute ‘preserveAspectRatio’ on the given element.

4.5.29 Interface SVGZoomAndPan

The SVGZoomAndPan interface defines attribute zoomAndPan and associated constants.
interface SVGZoomAndPan {

  // Zoom and Pan Types
  const unsigned short SVG_ZOOMANDPAN_UNKNOWN = 0;
  const unsigned short SVG_ZOOMANDPAN_DISABLE = 1;
  const unsigned short SVG_ZOOMANDPAN_MAGNIFY = 2;

  attribute unsigned short zoomAndPan setraises(DOMException);
};
Constants in group “Zoom and Pan Types”:
SVG_ZOOMANDPAN_UNKNOWN (unsigned short)
The enumeration was set to a value that is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_ZOOMANDPAN_DISABLE (unsigned short)
Corresponds to value 'disable'.
SVG_ZOOMANDPAN_MAGNIFY (unsigned short)
Corresponds to value 'magnify'.
Attributes:
zoomAndPan (unsigned short)
Corresponds to attribute ‘zoomAndPan’ on the given element. The value must be one of the SVG_ZOOMANDPAN_* constants defined on this interface.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

4.5.30 Interface SVGViewSpec

The interface corresponds to an SVG View Specification.
interface SVGViewSpec : SVGZoomAndPan,
                        SVGFitToViewBox {
  readonly attribute SVGTransformList transform;
  readonly attribute SVGElement viewTarget;
  readonly attribute DOMString viewBoxString;
  readonly attribute DOMString preserveAspectRatioString;
  readonly attribute DOMString transformString;
  readonly attribute DOMString viewTargetString;
};
Attributes:
transform (readonly SVGTransformList)
Corresponds to the transform setting on the SVG View Specification.
viewTarget (readonly SVGElement)
Corresponds to the viewTarget setting on the SVG View Specification.
viewBoxString (readonly DOMString)
Corresponds to the viewBox setting on the SVG View Specification.
preserveAspectRatioString (readonly DOMString)
Corresponds to the preserveAspectRatio setting on the SVG View Specification.
transformString (readonly DOMString)
Corresponds to the transform setting on the SVG View Specification.
viewTargetString (readonly DOMString)
Corresponds to the viewTarget setting on the SVG View Specification.

4.5.31 Interface SVGURIReference

Interface SVGURIReference defines an interface which applies to all elements which have the collection of XLink attributes, such as ‘xlink:href’, which define a URI reference.
interface SVGURIReference {
  readonly attribute SVGAnimatedString href;
};
Attributes:
href (readonly SVGAnimatedString)
Corresponds to attribute ‘xlink:href’ on the given element.

4.5.32 Interface SVGCSSRule

SVG extends interface CSSRule with interface SVGCSSRule by adding an SVGColorProfileRule rule to allow for specification of ICC-based color.

It is likely that this extension will become part of a future version of CSS and DOM.

interface SVGCSSRule : CSSRule {
  const unsigned short COLOR_PROFILE_RULE = 7;
};
Constants:
COLOR_PROFILE_RULE (unsigned short)
The rule is an @color-profile.

4.5.33 Interface SVGRenderingIntent

The SVGRenderingIntent interface defines the enumerated list of possible values for ‘rendering-intent’ attributes or descriptors.
interface SVGRenderingIntent {
  // Rendering Intent Types
  const unsigned short RENDERING_INTENT_UNKNOWN = 0;
  const unsigned short RENDERING_INTENT_AUTO = 1;
  const unsigned short RENDERING_INTENT_PERCEPTUAL = 2;
  const unsigned short RENDERING_INTENT_RELATIVE_COLORIMETRIC = 3;
  const unsigned short RENDERING_INTENT_SATURATION = 4;
  const unsigned short RENDERING_INTENT_ABSOLUTE_COLORIMETRIC = 5;
};
Constants in group “Rendering Intent Types”:
RENDERING_INTENT_UNKNOWN (unsigned short)
The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
RENDERING_INTENT_AUTO (unsigned short)
Corresponds to a value of 'auto'.
RENDERING_INTENT_PERCEPTUAL (unsigned short)
Corresponds to a value of 'perceptual'.
RENDERING_INTENT_RELATIVE_COLORIMETRIC (unsigned short)
Corresponds to a value of 'relative-colorimetric'.
RENDERING_INTENT_SATURATION (unsigned short)
Corresponds to a value of 'saturation'.
RENDERING_INTENT_ABSOLUTE_COLORIMETRIC (unsigned short)
Corresponds to a value of 'absolute-colorimetric'.

6 Styling

Contents

6.1 SVG's styling properties

SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered. SVG uses styling properties for the following:

SVG shares many of its styling properties with CSS [CSS2] and XSL [XSL]. Except for any additional SVG-specific rules explicitly mentioned in this specification, the normative definition of properties that are shared with CSS and XSL is the definition of the property from the CSS2 specification [CSS2].

The following properties are shared between CSS2 and SVG. Most of these properties are also defined in XSL:

The following SVG properties are not defined in CSS2. The complete normative definitions for these properties are found in this specification:

A table that lists and summarizes the styling properties can be found in the Property Index.

6.2 Usage scenarios for styling

SVG has many usage scenarios, each with different needs. Here are three common usage scenarios:

  1. SVG content used as an exchange format (style sheet language-independent):

    In some usage scenarios, reliable interoperability of SVG content across software tools is the main goal. Since support for a particular style sheet language is not guaranteed across all implementations, it is a requirement that SVG content can be fully specified without the use of a style sheet language.

  2. SVG content generated as the output from XSLT:

    XSLT offers the ability to take a stream of arbitrary XML content as input, apply potentially complex transformations, and then generate SVG content as output [XSLT]. XSLT can be used to transform XML data extracted from databases into an SVG graphical representation of that data. It is a requirement that fully specified SVG content can be generated from XSLT.

  3. SVG content styled with CSS:

    CSS is a widely implemented declarative language for assigning styling properties to XML content, including SVG [CSS2]. It represents a combination of features, simplicity and compactness that makes it very suitable for many applications of SVG. It is a requirement that CSS styling can be applied to SVG content.

6.3 Alternative ways to specify styling properties

Styling properties can be assigned to SVG elements in the following two ways:

6.4 Specifying properties using the presentation attributes

For each styling property defined in this specification (see Property Index), there is a corresponding XML attribute (the presentation attribute) with the same name that is available on all relevant SVG elements. For example, SVG has a ‘fill’ property that defines how to paint the interior of a shape. There is a corresponding presentation attribute with the same name (i.e., ‘fill’) that can be used to specify a value for the ‘fill’ property on a given element.

The following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘fill’ and ‘stroke’ presentation attributes. The rectangle will be filled with red and outlined with blue:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300" 
        fill="red" stroke="blue" stroke-width="3"/>
</svg>

View this example as SVG (SVG-enabled browsers only)

The presentation attributes offer the following advantages:

In some situations, SVG content that uses the presentation attributes has potential limitations versus SVG content that is styled with a style sheet language such as CSS (see Styling with CSS). In other situations, such as when an XSLT style sheet generates SVG content from semantically rich XML source files, the limitations below may not apply. Depending on the situation, some of the following potential limitations may or may not apply to the presentation attributes:

For user agents that support CSS, the presentation attributes must be translated to corresponding CSS style rules according to rules described in Precedence of non-CSS presentational hints ([CSS2], section 6.4.4), with the additional clarification that the presentation attributes are conceptually inserted into a new author style sheet which is the first in the author style sheet collection. The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.

User agents that do not support CSS must ignore any CSS style rules defined in CSS style sheets and ‘style’ attributes. In this case, the CSS cascade does not apply. (Inheritance of properties, however, does apply. See Property inheritance.)

An !important declaration ([CSS2], section 6.4.2) within a presentation attribute definition is an invalid value.

Animation of presentation attributes is equivalent to animating the corresponding property. Thus, the same effect occurs from animating the presentation attribute with attributeType="XML" as occurs with animating the corresponding property with attributeType="CSS" (see ‘attributeType’).

6.5 Styling with XSL

XSL style sheets [XSLT] [XSLT2] define how to transform XML content into something else, usually other XML. When XSLT is used in conjunction with SVG, sometimes SVG content will serve as both input and output for XSL style sheets. Other times, XSL style sheets will take non-SVG content as input and generate SVG content as output.

The following example uses an external XSL style sheet to transform SVG content into modified SVG content (see Referencing external style sheets). The style sheet sets the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:

mystyle.xsl
<?xml version="1.0" standalone="no"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:svg="http://www.w3.org/2000/svg">
  <xsl:output
    method="xml"
    encoding="utf-8"
    doctype-public="-//W3C//DTD SVG 1.1//EN"
    doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"/>
  <!-- Add version to topmost 'svg' element -->
  <xsl:template match="/svg:svg">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="version">1.1</xsl:attribute>
      <xsl:apply-templates/>
    </xsl:copy>
  </xsl:template>
  <!-- Add styling to all 'rect' elements -->
  <xsl:template match="svg:rect">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:attribute name="fill">red</xsl:attribute>
      <xsl:attribute name="stroke">blue</xsl:attribute>
      <xsl:attribute name="stroke-width">3</xsl:attribute>
    </xsl:copy>
  </xsl:template>
</xsl:stylesheet>

SVG file to be transformed by mystyle.xsl
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.xsl" type="application/xml"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" height="5cm">
  <rect x="2cm" y="1cm" width="6cm" height="3cm"/>
</svg>

SVG content after applying mystyle.xsl
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" height="5cm" version="1.1">
  <rect x="2cm" y="1cm" width="6cm" height="3cm" fill="red" stroke="blue" stroke-width="3"/>
</svg>

6.6 Styling with CSS

SVG implementations that support CSS are required to support the following:

The following example shows the use of an external CSS style sheet to set the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:

mystyle.css
rect {
  fill: red;
  stroke: blue;
  stroke-width: 3
}

SVG file referencing mystyle.css
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300"/>
</svg>

View this example as SVG (SVG-enabled browsers only)
 

CSS style sheets can be embedded within SVG content inside of a ‘style’ element. The following example uses an internal CSS style sheet to achieve the same result as the previous example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <defs>
    <style type="text/css"><![CDATA[
      rect {
        fill: red;
        stroke: blue;
        stroke-width: 3
      }
    ]]></style>
  </defs>
  <rect x="200" y="100" width="600" height="300"/>
</svg>

View this example as SVG (SVG-enabled browsers only)

Note how the CSS style sheet is placed within a CDATA construct (i.e., <![CDATA[ ... ]]>). Placing internal CSS style sheets within CDATA blocks is sometimes necessary since CSS style sheets can include characters, such as ">", which conflict with XML parsers. Even if a given style sheet does not use characters that conflict with XML parsing, it is highly recommended that internal style sheets be placed inside CDATA blocks.

Implementations that support CSS are also required to support CSS inline style. Similar to the ‘style’ attribute in HTML, CSS inline style can be declared within a ‘style’ attribute in SVG by specifying a semicolon-separated list of property declarations, where each property declaration has the form "name: value". Note that property declarations inside the ‘style’ attribute must follow CSS style rules, see The 'style' attribute.

The following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘style’ attribute. Just like the previous example, the rectangle will be filled with red and outlined with blue:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300" 
        style="fill: red; stroke: blue; stroke-width: 3"/>
</svg>

View this example as SVG (SVG-enabled browsers only)

In an SVG user agent that supports CSS style sheets, the following facilities from CSS2 must be supported:

SVG defines an @color-profile at-rule ([CSS2], section 4.1.6) for defining color profiles so that ICC color profiles can be applied to CSS-styled SVG content.

Note the following about relative URIs and external CSS style sheets: The CSS2 specification says ([CSS2], section 4.3.4) that relative URIs (as defined in Uniform Resource Identifiers (URI): Generic Syntax [RFC3986]) within style sheets are resolved such that the base URI is that of the style sheet, not that of the referencing document.

6.7 Case sensitivity of property names and values

Property declarations via presentation attributes are expressed in XML [XML10], which is case-sensitive. CSS property declarations specified either in CSS style sheets or in a ‘style’ attribute, on the other hand, are generally case-insensitive with some exceptions ([CSS2], section 4.1.3).

Because presentation attributes are expressed as XML attributes, presentation attributes are case-sensitive and must match the exact name as specified in the DTD (see the SVG.Presentation.attrib entity in the DTD, which expands to all of the presentation attributes). When using a presentation attribute to specify a value for the ‘fill’ property, the presentation attribute must be be specified as fill="…" and not fill="…" or Fill="…". Keyword values, such as italic in font-style="italic", are also case-sensitive and must be specified using the exact case used in the specification which defines the given keyword. For example, the keyword sRGB must have lowercase "s" and uppercase "RGB".

Property declarations within CSS style sheets or in a ‘style’ attribute must only conform to CSS rules, which are generally more lenient with regard to case sensitivity. However, to promote consistency across the different ways for expressing styling properties, it is strongly recommended that authors use the exact property names (usually, lowercase letters and hyphens) as defined in the relevant specification and express all keywords using the same case as is required by presentation attributes and not take advantage of CSS's ability to ignore case.

6.8 Facilities from CSS and XSL used by SVG

SVG shares various relevant properties and approaches common to CSS and XSL, plus the semantics of many of the processing rules.

SVG shares the following facilities with CSS and XSL:

6.9 Referencing external style sheets

External style sheets are referenced using the mechanism documented in Associating Style Sheets with XML documents Version 1.0 [XML-SS].

6.10 The ‘style’ element

The ‘style’ element allows style sheets to be embedded directly within SVG content. SVG's ‘style’ element has the same attributes as the corresponding element in HTML (see HTML's ‘style’ element).

‘style’
Categories:
None
Content model:
Any elements or character data.
Attributes:
DOM Interfaces:

Attribute definitions:

type = content-type
This attribute specifies the style sheet language of the element's contents. The style sheet language is specified as a content type (e.g., "text/css"), as per MIME Part Two: Media Types [RFC2046]. If a ‘type’ is not provided, the value of ‘contentStyleType’ on the ‘svg’ element shall be used, which in turn defaults to "text/css" [RFC2046]. If a ‘style’ element falls outside of the outermost svg element and the ‘type’ is not provided, the ‘type’ must default to "text/css" [RFC2046].
Animatable: no.
media = media-descriptors
This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is "all". The set of recognized media-descriptors are the list of media types recognized by CSS2 ([CSS2], section 7.3).
Animatable: no.
title = advisory-title
(For compatibility with HTML 4 [HTML4].) This attribute specifies an advisory title for the ‘style’ element.
Animatable: no.

The syntax of style data depends on the style sheet language.

Some style sheet languages might allow a wider variety of rules in the ‘style’ element than in the ‘style’. For example, with CSS, rules can be declared within a ‘style’ element that cannot be declared within a ‘style’ attribute.

An example showing the ‘style’ element is provided above (see example).

6.11 The ‘class’ attribute

Attribute definitions:

class = list
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
Animatable: yes.

The ‘class’ attribute assigns one or more class names to an element. The element may be said to belong to these classes. A class name may be shared by several element instances. The ‘class’ attribute has several roles:

In the following example, the ‘text’ element is used in conjunction with the ‘class’ attribute to markup document messages. Messages appear in both English and French versions.

<!-- English messages -->
<text class="info" lang="en">Variable declared twice</text>
<text class="warning" lang="en">Undeclared variable</text>
<text class="error" lang="en">Bad syntax for variable name</text>
<!-- French messages -->
<text class="info" lang="fr">Variable déclarée deux fois</text>
<text class="warning" lang="fr">Variable indéfinie</text>
<text class="error" lang="fr">Erreur de syntaxe pour variable</text>

In an SVG user agent that supports CSS styling, the following CSS style rules would tell visual user agents to display informational messages in green, warning messages in yellow, and error messages in red:

text.info    { color: green }
text.warning { color: yellow }
text.error   { color: red }

6.12 The ‘style’ attribute

The ‘style’ attribute allows per-element style rules to be specified directly on a given element. When CSS styling is used, CSS inline style is specified by including semicolon-separated property declarations of the form "name : value" within the ‘style’ attribute. Property declarations must follow CSS style rules thus CSS defined properties (e.g. 'font-size') when having a <length> value must include a unit (for non-zero values). See SVG's styling properties for a list of CSS defined properties.

Attribute definitions:

style = style
This attribute specifies style information for the current element. The style attribute specifies style information for a single element. The style sheet language of inline style rules is given by the value of attribute ‘contentStyleType’ on the ‘svg’ element. The syntax of style data depends on the style sheet language.
Animatable: no.

The style attribute may be used to apply a particular style to an individual SVG element. If the style will be reused for several elements, authors should use the ‘style’ element to regroup that information. For optimal flexibility, authors should define styles in external style sheets.

An example showing the ‘style’ attribute is provided above (see example).

6.13 Specifying the default style sheet language

The ‘contentStyleType’ attribute on the ‘svg’ element specifies the default style sheet language for the given document fragment.

contentStyleType = "content-type"
Identifies the default style sheet language for the given document. That language must then be used for all instances of style that do not specify their own style sheet language, such as the ‘style’ attributes that are available on many elements. The value content-type specifies a media type, per MIME Part Two: Media Types [RFC2046]. The default value is "text/css" [RFC2318].
Animatable: no.

Since the only widely deployed language used for inline styling (in style elements and style attributes) is CSS, and since that is already the default language if contentStyleType is omitted, in practice contentStyleType is not well supported in user agents. XSL style sheets are typically external. If a new style sheet language becomes popular, it might not use style attributes and could easily declare which language is in use with the type attribute on the style element.

The use of contentStyleType is therefore deprecated; new content should not use it. Future versions of the SVG specification may remove contentStyleType.

6.14 Property inheritance

Whether or not the user agent supports CSS, property inheritance in SVG follows the property inheritance rules defined in the CSS2 specification. The normative definition for property inheritance is the Inheritance section of the CSS2 specification ([CSS2], section 6.2).

The definition of each property indicates whether the property can inherit the value of its parent.

In SVG, as in CSS2, most elements inherit computed values ([CSS2], section 6.1.2). For cases where something other than computed values are inherited, the property definition will describe the inheritance rules. For specified values ([CSS2], section 6.1.1) which are expressed in user units, in pixels (e.g., 20px) or in absolute values, the computed value equals the specified value. For specified values which use certain relative units (i.e., em, ex and percentages), the computed value will have the same units as the value to which it is relative. Thus, if the parent element has a ‘font-size’ of 10pt and the current element has a ‘font-size’ of 120%, then the computed value for ‘font-size’ on the current element will be 12pt. In cases where the referenced value for relative units is not expressed in any of the standard SVG units (i.e., CSS units or user units), such as when a percentage is used relative to the current viewport or an object bounding box, then the computed value will be in user units.

Note that SVG has some facilities wherein a property which is specified on an ancestor element might effect its descendant element, even if the descendant element has a different assigned value for that property. For example, if a ‘clip-path’ property is specified on an ancestor element, and the current element has a ‘clip-path’ of none, the ancestor's clipping path still applies to the current element because the semantics of SVG state that the clipping path used on a given element is the intersection of all clipping paths specified on itself and all ancestor elements. The key concept is that property assignment (with possible property inheritance) happens first. After properties values have been assigned to the various elements, then the user agent applies the semantics of each assigned property, which might result in the property assignment of an ancestor element affecting the rendering of its descendants.

6.15 The scope/range of styles

The following define the scope/range of style sheets:

Stand-alone SVG document
There is one parse tree. Style sheets defined anywhere within the SVG document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire SVG document.
Stand-alone SVG document embedded in an HTML or XML document with the ‘img’, ‘object’ (HTML) or ‘image’ (SVG) elements
There are two completely separate parse trees; one for the referencing document (perhaps HTML or XHTML), and one for the SVG document. Style sheets defined anywhere within the referencing document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire referencing document but have no effect on the referenced SVG document. Style sheets defined anywhere within the referenced SVG document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire SVG document, but do not affect the referencing document (perhaps HTML or XHTML). To get the same styling across both the [X]HTML document and the SVG document, link them both to the same style sheet.
Stand-alone SVG content textually included in an XML document
There is a single parse tree, using multiple namespaces; one or more subtrees are in the SVG namespace. Style sheets defined anywhere within the XML document (in style elements or style attributes, or in external style sheets linked with the style sheet processing instruction) apply across the entire document, including those parts of it in the SVG namespace. To get different styling for the SVG part, use the ‘style’ attribute, or put an ‘id’ on the ‘svg’ element and use contextual CSS selectors, or use XSL selectors.

6.16 User agent style sheet

The user agent shall maintain a user agent style sheet ([CSS2], section 6.4) for elements in the SVG namespace for visual media ([CSS2], section 7.3.1). The user agent style sheet below is expressed using CSS syntax; however, user agents are required to support the behavior that corresponds to this default style sheet even if CSS style sheets are not supported in the user agent:

svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }

The first line of the above user agent style sheet will cause the initial clipping path to be established at the bounds of the initial viewport. Furthermore, it will cause new clipping paths to be established at the bounds of the listed elements, all of which are elements that establish a new viewport. (Refer to the description of SVG's use of the ‘overflow’ property for more information.)

The second line of the above user agent style sheet will cause the ‘width’ and ‘height’ attributes on the ‘svg’ element to be used as the default values for the 'width' and 'height' properties during layout ([CSS2], chapter 9).

6.17 Aural style sheets

For the purposes of aural media, SVG represents a stylable XML grammar. In user agents that support CSS aural style sheets, aural style properties ([CSS2], chapter 19) can be applied as defined in CSS2.

Aural style properties can be applied to any SVG element that can contain character data content, including ‘desc’ ‘title’ ‘tspan’, ‘tref’, ‘altGlyph’ and ‘textPath’. On user agents that support aural style sheets, the following CSS2 properties can be applied:

Aural propertyDefinition in [CSS2]
‘azimuth’Section 19.7
‘cue’Section 19.5
‘cue-after’Section 19.5
‘cue-before’Section 19.5
‘elevation’Section 19.7
‘pause’Section 19.4
‘pause-after’Section 19.4
‘pause-before’Section 19.4
‘pitch’Section 19.8
‘pitch-range’Section 19.8
‘play-during’Section 19.6
‘richness’Section 19.8
‘speak’Section 19.3
‘speak-header’Section 17.7.1
‘speak-numeral’Section 19.9
‘speak-punctuation’Section 19.9
‘speech-rate’Section 19.8
‘stress’Section 19.8
‘voice-family’Section 19.8
‘volume’Section 19.2

For user agents that support aural style sheets and also support DOM Level 2 Core [DOM2], the user agent is required to support the DOM interfaces defined in Document Object Model CSS ([DOM2STYLE], chapter 2) that correspond to aural properties. (See Relationship with DOM2 CSS object model.)

6.18 DOM interfaces

6.18.1 Interface SVGStyleElement

The SVGStyleElement interface corresponds to the ‘style’ element.
interface SVGStyleElement : SVGElement,
                            SVGLangSpace {
  attribute DOMString type setraises(DOMException);
  attribute DOMString media setraises(DOMException);
  attribute DOMString title setraises(DOMException);
};
Attributes:
type (DOMString)
Corresponds to attribute ‘type’ on the given element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
media (DOMString)
Corresponds to attribute ‘media’ on the given element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
title (DOMString)
Corresponds to attribute ‘title’ on the given element.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

7 Coordinate Systems, Transformations and Units

Contents

7.1 Introduction

For all media, the SVG canvas describes "the space where the SVG content is rendered." The canvas is infinite for each dimension of the space, but rendering occurs relative to a finite rectangular region of the canvas. This finite rectangular region is called the SVG viewport. For visual media ([CSS2], section 7.3.1) the SVG viewport is the viewing area where the user sees the SVG content.

The size of the SVG viewport (i.e., its width and height) is determined by a negotiation process (see Establishing the size of the initial viewport) between the SVG document fragment and its parent (real or implicit). Once that negotiation process is completed, the SVG user agent is provided the following information:

Using the above information, the SVG user agent determines the viewport, an initial viewport coordinate system and an initial user coordinate system such that the two coordinates systems are identical. Both coordinates systems are established such that the origin matches the origin of the viewport (for the root viewport, the viewport origin is at the top/left corner), and one unit in the initial coordinate system equals one "pixel" in the viewport. (See Initial coordinate system.) The viewport coordinate system is also called viewport space and the user coordinate system is also called user space.

Lengths in SVG can be specified as:

The supported length unit identifiers are: em, ex, px, pt, pc, cm, mm, in, and percentages.

A new user space (i.e., a new current coordinate system) can be established at any place within an SVG document fragment by specifying transformations in the form of transformation matrices or simple transformation operations such as rotation, skewing, scaling and translation. Establishing new user spaces via coordinate system transformations are fundamental operations to 2D graphics and represent the usual method of controlling the size, position, rotation and skew of graphic objects.

New viewports also can be established. By establishing a new viewport, you can redefine the meaning of percentages units and provide a new reference rectangle for "fitting" a graphic into a particular rectangular area. ("Fit" means that a given graphic is transformed in such a way that its bounding box in user space aligns exactly with the edges of a given viewport.)

7.2 The initial viewport

The SVG user agent negotiates with its parent user agent to determine the viewport into which the SVG user agent can render the document. In some circumstances, SVG content will be embedded (by reference or inline) within a containing document. This containing document might include attributes, properties and/or other parameters (explicit or implicit) which specify or provide hints about the dimensions of the viewport for the SVG content. SVG content itself optionally can provide information about the appropriate viewport region for the content via the ‘width’ and ‘height’ XML attributes on the outermost svg element. The negotiation process uses any information provided by the containing document and the SVG content itself to choose the viewport location and size.

The ‘width’ attribute on the outermost svg element establishes the viewport's width, unless the following conditions are met:

Under these conditions, the positioning properties establish the viewport's width.

Similarly, if there are positioning properties specified on the referencing element or on the outermost svg element that are sufficient to establish the height of the viewport, then these positioning properties establish the viewport's height; otherwise, the ‘height’ attribute on the outermost svg element establishes the viewport's height.

If the ‘width’ or ‘height’ attributes on the outermost svg element are in user units (i.e., no unit identifier has been provided), then the value is assumed to be equivalent to the same number of "px" units (see Units).

In the following example, an SVG graphic is embedded inline within a parent XML document which is formatted using CSS layout rules. Since CSS positioning properties are not provided on the outermost svg element, the width="100px" and height="200px" attributes determine the size of the initial viewport:

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://some.url">
   
   <!-- SVG graphic -->
   <svg xmlns='http://www.w3.org/2000/svg'
      width="100px" height="200px" version="1.1">
      <path d="M100,100 Q200,400,300,100"/>
      <!-- rest of SVG graphic would go here -->
   </svg>   
   
</parent>

The initial clipping path for the SVG document fragment is established according to the rules described in The initial clipping path.

7.3 The initial coordinate system

For the outermost svg element, the SVG user agent determines an initial viewport coordinate system and an initial user coordinate system such that the two coordinates systems are identical. The origin of both coordinate systems is at the origin of the viewport, and one unit in the initial coordinate system equals one "pixel" (i.e., a px unit as defined in CSS2 ([CSS2], section 4.3.2) in the viewport. In most cases, such as stand-alone SVG documents or SVG document fragments embedded (by reference or inline) within XML parent documents where the parent's layout is determined by CSS [CSS2] or XSL [XSL], the initial viewport coordinate system (and therefore the initial user coordinate system) has its origin at the top/left of the viewport, with the positive x-axis pointing towards the right, the positive y-axis pointing down, and text rendered with an "upright" orientation, which means glyphs are oriented such that Roman characters and full-size ideographic characters for Asian scripts have the top edge of the corresponding glyphs oriented upwards and the right edge of the corresponding glyphs oriented to the right.

If the SVG implementation is part of a user agent which supports styling XML documents using CSS2 compatible px units, then the SVG user agent should get its initial value for the size of a px unit in real world units to match the value used for other XML styling operations; otherwise, if the user agent can determine the size of a px unit from its environment, it should use that value; otherwise, it should choose an appropriate size for one px unit. In all cases, the size of a px must be in conformance with the rules described in CSS2 ([CSS2], section 4.3.2).

Example InitialCoords below shows that the initial coordinate system has the origin at the top/left with the x-axis pointing to the right and the y-axis pointing down. The initial user coordinate system has one user unit equal to the parent (implicit or explicit) user agent's "pixel".

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example InitialCoords - SVG's initial coordinate system</desc>

  <g fill="none" stroke="black" stroke-width="3" >
    <line x1="0" y1="1.5" x2="300" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="100" />
  </g>
  <g fill="red" stroke="none" >
    <rect x="0" y="0" width="3" height="3" />
    <rect x="297" y="0" width="3" height="3" />
    <rect x="0" y="97" width="3" height="3" />
  </g>
  <g font-size="14" font-family="Verdana" >
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>
  </g>
</svg>
Example InitialCoords
Example InitialCoords — SVG's initial coordinate system

View this example as SVG (SVG-enabled browsers only)

7.4 Coordinate system transformations

A new user space (i.e., a new current coordinate system) can be established by specifying transformations in the form of a ‘transform’ attribute on a container element or graphics element or a ‘viewBox’ attribute on an ‘svg’, ‘symbol’, ‘marker’, ‘pattern’ and the ‘view’ element. The ‘transform’ and ‘viewBox’ attributes transform user space coordinates and lengths on sibling attributes on the given element (see effect of the ‘transform’ attribute on sibling attributes and effect of the ‘viewBox’ attribute on sibling attributes) and all of its descendants. Transformations can be nested, in which case the effect of the transformations are cumulative.

Example OrigCoordSys below shows a document without transformations. The text string is specified in the initial coordinate system.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="150px"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example OrigCoordSys - Simple transformations: original picture</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Draw the axes of the original coordinate system -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="150" />
  </g>
  <g>
    <text x="30" y="30" font-size="20" font-family="Verdana" >
      ABC (orig coord system)
    </text>
  </g>
</svg>
Example OrigCoordSys
Example OrigCoordSys — SVG's initial coordinate system

View this example as SVG (SVG-enabled browsers only)

Example NewCoordSys establishes a new user coordinate system by specifying transform="translate(50,50)" on the third ‘g’ element below. The new user coordinate system has its origin at location (50,50) in the original coordinate system. The result of this transformation is that the coordinate (30,30) in the new user coordinate system gets mapped to coordinate (80,80) in the original coordinate system (i.e., the coordinates have been translated by 50 units in X and 50 units in Y).

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="150px"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example NewCoordSys - New user coordinate system</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Draw the axes of the original coordinate system -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="150" />
  </g>
  <g>
    <text x="30" y="30" font-size="20" font-family="Verdana" >
      ABC (orig coord system)
    </text>
  </g>
  <!-- Establish a new coordinate system, which is
       shifted (i.e., translated) from the initial coordinate
       system by 50 user units along each axis. -->
  <g transform="translate(50,50)">
    <g fill="none" stroke="red" stroke-width="3" >
      <!-- Draw lines of length 50 user units along 
           the axes of the new coordinate system -->
      <line x1="0" y1="0" x2="50" y2="0" stroke="red" />
      <line x1="0" y1="0" x2="0" y2="50" />
    </g>
    <text x="30" y="30" font-size="20" font-family="Verdana" >
      ABC (translated coord system)
    </text>
  </g>
</svg>
Example NewCoordSys
Example NewCoordSys — New user coordinate system

View this example as SVG (SVG-enabled browsers only)

Example RotateScale illustrates simple rotate and scale transformations. The example defines two new coordinate systems:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="120px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example RotateScale - Rotate and scale transforms</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Draw the axes of the original coordinate system -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="120" />
  </g>
  <!-- Establish a new coordinate system whose origin is at (50,30)
       in the initial coord. system and which is rotated by 30 degrees. -->
  <g transform="translate(50,30)">
    <g transform="rotate(30)">
      <g fill="none" stroke="red" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
        ABC (rotate)
      </text>
    </g>
  </g>
  <!-- Establish a new coordinate system whose origin is at (200,40)
       in the initial coord. system and which is scaled by 1.5. -->
  <g transform="translate(200,40)">
    <g transform="scale(1.5)">
      <g fill="none" stroke="red" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
        ABC (scale)
      </text>
    </g>
  </g>
</svg>
Example RotateScale
Example RotateScale — Rotate and scale transforms

View this example as SVG (SVG-enabled browsers only)

Example Skew defines two coordinate systems which are skewed relative to the origin coordinate system.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="120px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example Skew - Show effects of skewX and skewY</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Draw the axes of the original coordinate system -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="120" />
  </g>
  <!-- Establish a new coordinate system whose origin is at (30,30)
       in the initial coord. system and which is skewed in X by 30 degrees. -->
  <g transform="translate(30,30)">
    <g transform="skewX(30)">
      <g fill="none" stroke="red" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
        ABC (skewX)
      </text>
    </g>
  </g>
  <!-- Establish a new coordinate system whose origin is at (200,30)
       in the initial coord. system and which is skewed in Y by 30 degrees. -->
  <g transform="translate(200,30)">
    <g transform="skewY(30)">
      <g fill="none" stroke="red" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" >
        ABC (skewY)
      </text>
    </g>
  </g>
</svg>
Example Skew
Example Skew — Show effects of skewX and skewY

View this example as SVG (SVG-enabled browsers only)

Mathematically, all transformations can be represented as 3x3 transformation matrices of the following form:
      3-by-3 transformation matrix

Since only six values are used in the above 3x3 matrix, a transformation matrix is also expressed as a vector: [a b c d e f].

Transformations map coordinates and lengths from a new coordinate system into a previous coordinate system:
      3-by-3 transformation matrix

Simple transformations are represented in matrix form as follows:

7.5 Nested transformations

Transformations can be nested to any level. The effect of nested transformations is to post-multiply (i.e., concatenate) the subsequent transformation matrices onto previously defined transformations:
      3-by-3 matrix concatenation

For each given element, the accumulation of all transformations that have been defined on the given element and all of its ancestors up to and including the element that established the current viewport (usually, the ‘svg’ element which is the most immediate ancestor to the given element) is called the current transformation matrix or CTM. The CTM thus represents the mapping of current user coordinates to viewport coordinates:
current transformation matrix: CTM

Example Nested illustrates nested transformations.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="150px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example Nested - Nested transformations</desc>
  <g fill="none" stroke="black" stroke-width="3" >
    <!-- Draw the axes of the original coordinate system -->
    <line x1="0" y1="1.5" x2="400" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="150" />
  </g>
  <!-- First, a translate -->
  <g transform="translate(50,90)">
    <g fill="none" stroke="red" stroke-width="3" >
      <line x1="0" y1="0" x2="50" y2="0" />
      <line x1="0" y1="0" x2="0" y2="50" />
    </g>
    <text x="0" y="0" font-size="16" font-family="Verdana" >
      ....Translate(1)
    </text>
    <!-- Second, a rotate -->
    <g transform="rotate(-45)">
      <g fill="none" stroke="green" stroke-width="3" >
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
      <text x="0" y="0" font-size="16" font-family="Verdana" >
        ....Rotate(2)
      </text>
      <!-- Third, another translate -->
      <g transform="translate(130,160)">
        <g fill="none" stroke="blue" stroke-width="3" >
          <line x1="0" y1="0" x2="50" y2="0" />
          <line x1="0" y1="0" x2="0" y2="50" />
        </g>
        <text x="0" y="0" font-size="16" font-family="Verdana" >
          ....Translate(3)
        </text>
      </g>
    </g>
  </g>
</svg>
Example Nested
Example Nested — Nested transformations

View this example as SVG (SVG-enabled browsers only)

In the example above, the CTM within the third nested transformation (i.e., the transform="translate(130,160)") consists of the concatenation of the three transformations, as follows:
Matrix concatenation


7.6 The ‘transform’ attribute

The value of the ‘transform’ attribute is a <transform-list>, which is defined as a list of transform definitions, which are applied in the order provided. The individual transform definitions are separated by whitespace and/or a comma. The available types of transform definitions include:

All numeric values are <number>s.

If a list of transforms is provided, then the net effect is as if each transform had been specified separately in the order provided. For example,

<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">
  <!-- graphics elements go here -->
</g>

is functionally equivalent to:

<g transform="translate(-10,-20)">
  <g transform="scale(2)">
    <g transform="rotate(45)">
      <g transform="translate(5,10)">
        <!-- graphics elements go here -->
      </g>
    </g>
  </g>
</g>

The ‘transform’ attribute is applied to an element before processing any other coordinate or length values supplied for that element. In the element

<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>

the x, y, width and height values are processed after the current coordinate system has been scaled uniformly by a factor of 2 by the ‘transform’ attribute. Attributes x, y, width and height (and any other attributes or properties) are treated as values in the new user coordinate system, not the previous user coordinate system. Thus, the above ‘rect’ element is functionally equivalent to:

<g transform="scale(2)">
  <rect x="10" y="10" width="20" height="20"/>
</g>

The following is the Backus-Naur Form (BNF) for values for the ‘transform’ attribute. The following notation is used:

transform-list:
    wsp* transforms? wsp*
transforms:
    transform
    | transform comma-wsp+ transforms
transform:
    matrix
    | translate
    | scale
    | rotate
    | skewX
    | skewY
matrix:
    "matrix" wsp* "(" wsp*
       number comma-wsp
       number comma-wsp
       number comma-wsp
       number comma-wsp
       number comma-wsp
       number wsp* ")"
translate:
    "translate" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"
scale:
    "scale" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")"
rotate:
    "rotate" wsp* "(" wsp* number ( comma-wsp number comma-wsp number )? wsp* ")"
skewX:
    "skewX" wsp* "(" wsp* number wsp* ")"
skewY:
    "skewY" wsp* "(" wsp* number wsp* ")"
number:
    sign? integer-constant
    | sign? floating-point-constant
comma-wsp:
    (wsp+ comma? wsp*) | (comma wsp*)
comma:
    ","
integer-constant:
    digit-sequence
floating-point-constant:
    fractional-constant exponent?
    | digit-sequence exponent
fractional-constant:
    digit-sequence? "." digit-sequence
    | digit-sequence "."
exponent:
    ( "e" | "E" ) sign? digit-sequence
sign:
    "+" | "-"
digit-sequence:
    digit
    | digit digit-sequence
digit:
    "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
wsp:
    (#x20 | #x9 | #xD | #xA)

For the ‘transform’ attribute:

    Animatable: yes.

See the ‘animateTransform’ element for information on animating transformations.

7.7 The ‘viewBox’ attribute

It is often desirable to specify that a given set of graphics stretch to fit a particular container element. The ‘viewBox’ attribute provides this capability.

All elements that establish a new viewport (see elements that establish viewports), plus the ‘marker’, ‘pattern’ and ‘view’ elements have attribute ‘viewBox’. The value of the ‘viewBox’ attribute is a list of four numbers <min-x>, <min-y>, <width> and <height>, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute ‘preserveAspectRatio’. If specified, an additional transformation is applied to all descendants of the given element to achieve the specified effect.

A negative value for <width> or <height> is an error (see Error processing). A value of zero disables rendering of the element.

Example ViewBox illustrates the use of the ‘viewBox’ attribute on the outermost svg element to specify that the SVG content should stretch to fit bounds of the viewport.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="200px" version="1.1"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example ViewBox - uses the viewBox 
   attribute to automatically create an initial user coordinate
   system which causes the graphic to scale to fit into the
   viewport no matter what size the viewport is.</desc>
  <!-- This rectangle goes from (0,0) to (1500,1000) in user space.
       Because of the viewBox attribute above,
       the rectangle will end up filling the entire area
       reserved for the SVG content. -->
  <rect x="0" y="0" width="1500" height="1000" 
        fill="yellow" stroke="blue" stroke-width="12"  />
  <!-- A large, red triangle -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>
  <!-- A text string that spans most of the viewport -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    Stretch to fit
  </text>
</svg>
Example ViewBox
Rendered into
viewport with
width=300px,
height=200px
     Rendered into
viewport with
width=150px,
height=200px
Example ViewBox - stretch to fit 300 by 200     Example ViewBox - stretch to fit 150 by 200

View this example as SVG (SVG-enabled browsers only)
 

The effect of the ‘viewBox’ attribute is that the user agent automatically supplies the appropriate transformation matrix to map the specified rectangle in user space to the bounds of a designated region (often, the viewport). To achieve the effect of the example on the left, with viewport dimensions of 300 by 200 pixels, the user agent needs to automatically insert a transformation which scales both X and Y by 0.2. The effect is equivalent to having a viewport of size 300px by 200px and the following supplemental transformation in the document, as follows:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="200px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(0.2)">
    <!-- Rest of document goes here -->
  </g>
</svg>
To achieve the effect of the example on the right, with viewport dimensions of 150 by 200 pixels, the user agent needs to automatically insert a transformation which scales X by 0.1 and Y by 0.2. The effect is equivalent to having a viewport of size 150px by 200px and the following supplemental transformation in the document, as follows:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150px" height="200px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(0.1 0.2)">
    <!-- Rest of document goes here -->
  </g>
</svg>

(Note: in some cases the user agent will need to supply a translate transformation in addition to a scale transformation. For example, on an outermost svg element, a translate transformation will be needed if the ‘viewBox’ attributes specifies values other than zero for <min-x> or <min-y>.)

Unlike the ‘transform’ attribute (see effect of the ‘transform’ on sibling attributes), the automatic transformation that is created due to a ‘viewBox’ does not affect the ‘x’, ‘y’, ‘width’ and ‘height’ attributes (or in the case of the ‘marker’ element, the ‘markerWidth’ and ‘markerHeight’ attributes) on the element with the ‘viewBox’ attribute. Thus, in the example above which shows an ‘svg’ element which has attributes ‘width’, ‘height’ and ‘viewBox’, the ‘width’ and ‘height’ attributes represent values in the coordinate system that exists before the ‘viewBox’ transformation is applied. On the other hand, like the ‘transform’ attribute, it does establish a new coordinate system for all other attributes and for descendant elements.

For the ‘viewBox’ attribute:

    Animatable: yes.

7.8 The ‘preserveAspectRatio’ attribute

In some cases, typically when using the ‘viewBox’ attribute, it is desirable that the graphics stretch to fit non-uniformly to take up the entire viewport. In other cases, it is desirable that uniform scaling be used for the purposes of preserving the aspect ratio of the graphics.

Attribute preserveAspectRatio="[defer] <align> [<meetOrSlice>]", which is available for all elements that establish a new viewport (see elements that establish viewports), plus the ‘image’, ‘marker’, ‘pattern’ and ‘view’ elements, indicates whether or not to force uniform scaling.

For elements that establish a new viewport (see elements that establish viewports), plus the ‘marker’, ‘pattern’ and ‘view’ elements, ‘preserveAspectRatio’ only applies when a value has been provided for ‘viewBox’ on the same element. For these elements, if attribute ‘viewBox’ is not provided, then ‘preserveAspectRatio’ is ignored.

For ‘image’ elements, ‘preserveAspectRatio’ indicates how referenced images should be fitted with respect to the reference rectangle and whether the aspect ratio of the referenced image should be preserved with respect to the current user coordinate system.

If the value of ‘preserveAspectRatio’ on an ‘image’ element starts with 'defer' then the value of the ‘preserveAspectRatio’ attribute on the referenced content if present should be used. If the referenced content lacks a value for ‘preserveAspectRatio’ then the ‘preserveAspectRatio’ attribute should be processed as normal (ignoring 'defer'). For ‘preserveAspectRatio’ on all other elements the 'defer' portion of the attribute is ignored.

The <align> parameter indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the ‘viewBox’ doesn't match the aspect ratio of the viewport. The <align> parameter must be one of the following strings:

The <meetOrSlice> parameter is optional and, if provided, is separated from the <align> value by one or more spaces and then must be one of the following strings:

Example PreserveAspectRatio illustrates the various options on ‘preserveAspectRatio’. To save space, XML entities have been defined for the three repeated graphic objects, the rectangle with the smile inside and the outlines of the two rectangles which have the same dimensions as the target viewports. The example creates several new viewports by including ‘svg’ sub-elements embedded inside the outermost svg element (see Establishing a new viewport).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
[ <!ENTITY Smile "
<rect x='.5' y='.5' width='29' height='39' fill='black' stroke='red'/>
<g transform='translate(0, 5)'>
<circle cx='15' cy='15' r='10' fill='yellow'/>
<circle cx='12' cy='12' r='1.5' fill='black'/>
<circle cx='17' cy='12' r='1.5' fill='black'/>
<path d='M 10 19 A 8 8 0 0 0 20 19' stroke='black' stroke-width='2'/>
</g>
">
<!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29'
fill='none' stroke='blue'/>">
<!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59'
fill='none' stroke='blue'/>">
]>

<svg width="450px" height="300px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc>
  <rect x="1" y="1" width="448" height="298"
        fill="none" stroke="blue"/>
  <g font-size="9">
    <text x="10" y="30">SVG to fit</text>
    <g transform="translate(20,40)">&Smile;</g>
    <text x="10" y="110">Viewport 1</text>
    <g transform="translate(10,120)">&Viewport1;</g>
    <text x="10" y="180">Viewport 2</text>
    <g transform="translate(20,190)">&Viewport2;</g>

    <g id="meet-group-1" transform="translate(100, 60)">
      <text x="0" y="-30">--------------- meet ---------------</text>
      <g><text y="-10">xMin*</text>&Viewport1;
        <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
             width="50" height="30">&Smile;</svg></g>
      <g transform="translate(70,0)"><text y="-10">xMid*</text>&Viewport1;
        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
             width="50" height="30">&Smile;</svg></g>
      <g transform="translate(0,70)"><text y="-10">xMax*</text>&Viewport1;
        <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
             width="50" height="30">&Smile;</svg></g>
    </g>

    <g id="meet-group-2" transform="translate(250, 60)">
      <text x="0" y="-30">---------- meet ----------</text>
      <g><text y="-10">*YMin</text>&Viewport2;
        <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
             width="30" height="60">&Smile;</svg></g>
      <g transform="translate(50, 0)"><text y="-10">*YMid</text>&Viewport2;
        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
             width="30" height="60">&Smile;</svg></g>
      <g transform="translate(100, 0)"><text y="-10">*YMax</text>&Viewport2;
        <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
             width="30" height="60">&Smile;</svg></g>
    </g>

    <g id="slice-group-1" transform="translate(100, 220)">
      <text x="0" y="-30">---------- slice ----------</text>
      <g><text y="-10">xMin*</text>&Viewport2;
        <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
             width="30" height="60">&Smile;</svg></g>
      <g transform="translate(50,0)"><text y="-10">xMid*</text>&Viewport2;
        <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
             width="30" height="60">&Smile;</svg></g>
      <g transform="translate(100,0)"><text y="-10">xMax*</text>&Viewport2;
        <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
             width="30" height="60">&Smile;</svg></g>
    </g>

    <g id="slice-group-2" transform="translate(250, 220)">
      <text x="0" y="-30">--------------- slice ---------------</text>
      <g><text y="-10">*YMin</text>&Viewport1;
        <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
             width="50" height="30">&Smile;</svg></g>
      <g transform="translate(70,0)"><text y="-10">*YMid</text>&Viewport1;
        <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
             width="50" height="30">&Smile;</svg></g>
      <g transform="translate(140,0)"><text y="-10">*YMax</text>&Viewport1;
        <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
             width="50" height="30">&Smile;</svg></g>
    </g>   
  </g>
</svg>
Example PreserveAspectRatio
Example PreserveAspectRatio — demonstrate available options

View this example as SVG (SVG-enabled browsers only)

For the ‘preserveAspectRatio’ attribute:

    Animatable: yes.

7.9 Establishing a new viewport

At any point in an SVG drawing, you can establish a new viewport into which all contained graphics is drawn by including an ‘svg’ element inside SVG content. By establishing a new viewport, you also implicitly establish a new viewport coordinate system, a new user coordinate system, and, potentially, a new clipping path (see the definition of the ‘overflow’ property). Additionally, there is a new meaning for percentage units defined to be relative to the current viewport since a new viewport has been established (see Units).

The bounds of the new viewport are defined by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes on the element establishing the new viewport, such as an ‘svg’ element. Both the new viewport coordinate system and the new user coordinate system have their origins at (‘x’, ‘y’), where ‘x’ and ‘y’ represent the value of the corresponding attributes on the element establishing the viewport. The orientation of the new viewport coordinate system and the new user coordinate system correspond to the orientation of the current user coordinate system for the element establishing the viewport. A single unit in the new viewport coordinate system and the new user coordinate system are the same size as a single unit in the current user coordinate system for the element establishing the viewport.

Here is an example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="3in" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>This SVG drawing embeds another one,
    thus establishing a new viewport
  </desc>
  <!-- The following statement establishing a new viewport
       and renders SVG drawing B into that viewport -->
  <svg x="25%" y="25%" width="50%" height="50%">
     <!-- drawing B goes here -->
  </svg>
</svg>

For an extensive example of creating new viewports, see Example PreserveAspectRatio.

The following elements establish new viewports:

Whether a new viewport also establishes a new additional clipping path is determined by the value of the ‘overflow’ property on the element that establishes the new viewport. If a clipping path is created to correspond to the new viewport, the clipping path's geometry is determined by the value of the ‘clip’ property. Also, see Clip to viewport vs. clip to ‘viewBox’.

7.10 Units

All coordinates and lengths in SVG can be specified with or without a unit identifier.

When a coordinate or length value is a number without a unit identifier (e.g., "25"), then the given coordinate or length is assumed to be in user units (i.e., a value in the current user coordinate system). For example:

<text font-size="50">Text size is 50 user units</text>

Alternatively, a coordinate or length value can be expressed as a number followed by a unit identifier (e.g., "25cm" or "15em"). (Note that CSS defined properties used in a CSS style sheet or the ‘style’ attribute require units for non-zero lengths, see SVG's styling properties.) The list of unit identifiers in SVG matches the list of unit identifiers in CSS: em, ex, px, pt, pc, cm, mm and in. The <length> type can also have a percentage unit identifier. The following describes how the various unit identifiers are processed:

Note that use of px units or any other absolute unit identifiers can cause inconsistent visual results on different viewing environments since the size of "1px" may map to a different number of user units on different systems; thus, absolute units identifiers are only recommended for the ‘width’ and the ‘height’ on and situations where the content contains no transformations and it is desirable to specify values relative to the device pixel grid or to a particular real world unit size.

For percentage values that are defined to be relative to the size of viewport:

Example Units below illustrates some of the processing rules for different types of units.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="200px" viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example Units</title>
  <desc>Illustrates various units options</desc>

  <!-- Frame the picture -->
  <rect x="5" y="5" width="3990" height="1990" 
        fill="none" stroke="blue" stroke-width="10"/>

  <g fill="blue" stroke="red" font-family="Verdana" font-size="150">
    <!-- Absolute unit specifiers -->
    <g transform="translate(400,0)">
      <text x="-50" y="300" fill="black" stroke="none">Abs. units:</text>
      <rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
      <rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
      </g>
    </g>

    <!-- Relative unit specifiers -->
    <g transform="translate(1600,0)">
      <text x="-50" y="300" fill="black" stroke="none">Rel. units:</text>
      <rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
      <rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
      </g>
    </g>

    <!-- Percentages -->
    <g transform="translate(2800,0)">
      <text x="-50" y="300" fill="black" stroke="none">Percentages:</text>
      <rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
      <rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
      </g>
    </g>
  </g>
</svg>
Example Units
Example Units — demonstrate available options

View this example as SVG (SVG-enabled browsers only)

The three rectangles on the left demonstrate the use of one of the absolute unit identifiers, the "in" unit (inch). The reference image above was generated on a 96dpi system (i.e., 1 inch = 96 pixels). Therefore, the topmost rectangle, which is specified in inches, is exactly the same size as the middle rectangle, which is specified in user units such that there are 96 user units for each corresponding inch in the topmost rectangle. (Note: on systems with different screen resolutions, the top and middle rectangles will likely be rendered at different sizes.) The bottom rectangle of the group illustrates what happens when values specified in inches are scaled.

The three rectangles in the middle demonstrate the use of one of the relative unit identifiers, the "em" unit. Because the ‘font-size’ property has been set to 150 on the outermost ‘g’ element, each "em" unit is equal to 150 user units. The topmost rectangle, which is specified in "em" units, is exactly the same size as the middle rectangle, which is specified in user units such that there are 150 user units for each corresponding "em" unit in the topmost rectangle. The bottom rectangle of the group illustrates what happens when values specified in "em" units are scaled.

The three rectangles on the right demonstrate the use of percentages. Note that the width and height of the viewport in the user coordinate system for the viewport element (in this case, the outermost svg element) are 4000 and 2000, respectively, because processing the ‘viewBox’ attribute results in a transformed user coordinate system. The topmost rectangle, which is specified in percentage units, is exactly the same size as the middle rectangle, which is specified in equivalent user units. In particular, note that the ‘stroke-width’ property in the middle rectangle is set to 1% of the sqrt((actual-width)**2 + (actual-height)**2)) / sqrt(2), which in this case is .01*sqrt(4000*4000+2000*2000)/sqrt(2), or 31.62. The bottom rectangle of the group illustrates what happens when values specified in percentage units are scaled.

7.11 Object bounding box units

The following elements offer the option of expressing coordinate values and lengths as fractions (and, in some cases, percentages) of the bounding box, by setting a specified attribute to 'objectBoundingBox' on the given element:

ElementAttributeEffect
‘linearGradient’ ‘gradientUnits’ Indicates that the attributes which specify the gradient vector (‘x1’, ‘y1’, ‘x2’, ‘y2’) represent fractions or percentages of the bounding box of the element to which the gradient is applied.
‘radialGradient’ ‘gradientUnits’ Indicates that the attributes which specify the center (‘cx’, ‘cy’), the radius (‘r’) and focus (‘fx’, ‘fy’) represent fractions or percentages of the bounding box of the element to which the gradient is applied.
‘pattern’‘patternUnits’Indicates that the attributes which define how to tile the pattern (‘x’, ‘y’, ‘width’, ‘height’) are established using the bounding box of the element to which the pattern is applied.
‘pattern’‘patternContentUnits’Indicates that the user coordinate system for the contents of the pattern is established using the bounding box of the element to which the pattern is applied.
‘clipPath’‘clipPathUnits’Indicates that the user coordinate system for the contents of the ‘clipPath’ element is established using the bounding box of the element to which the clipping path is applied.
‘mask’‘maskUnits’Indicates that the attributes which define the masking region (‘x’, ‘y’, ‘width’, ‘height’) is established using the bounding box of the element to which the mask is applied.
‘mask’‘maskContentUnits’Indicates that the user coordinate system for the contents of the ‘mask’ element are established using the bounding box of the element to which the mask is applied.
‘filter’‘filterUnits’Indicates that the attributes which define the filter effects region (‘x’, ‘y’, ‘width’, ‘height’) represent fractions or percentages of the bounding box of the element to which the filter is applied.
‘filter’‘primitiveUnits’Indicates that the various length values within the filter primitives represent fractions or percentages of the bounding box of the element to which the filter is applied.

In the discussion that follows, the term applicable element is the element to which the given effect applies. For gradients and patterns, the applicable element is the graphics element which has its ‘fill’ or ‘stroke’ property referencing the given gradient or pattern. (See Inheritance of Painting Properties. For special rules concerning text elements, see the discussion of object bounding box units and text elements.) For clipping paths, masks and filters, the applicable element can be either a container element or a graphics element.

When keyword objectBoundingBox is used, then the effect is as if a supplemental transformation matrix were inserted into the list of nested transformation matrices to create a new user coordinate system.

First, the (minx,miny) and (maxx,maxy) coordinates are determined for the applicable element and all of its descendants. The values minx, miny, maxx and maxy are determined by computing the maximum extent of the shape of the element in X and Y with respect to the user coordinate system for the applicable element. The bounding box is the tightest fitting rectangle aligned with the axes of the applicable element's user coordinate system that entirely encloses the applicable element and its descendants. The bounding box is computed exclusive of any values for clipping, masking, filter effects, opacity and stroke-width. For curved shapes, the bounding box encloses all portions of the shape, not just end points. For ‘text’ elements, for the purposes of the bounding box calculation, each glyph is treated as a separate graphics element. The calculations assume that all glyphs occupy the full glyph cell. For example, for horizontal text, the calculations assume that each glyph extends vertically to the full ascent and descent values for the font.

Then, coordinate (0,0) in the new user coordinate system is mapped to the (minx,miny) corner of the tight bounding box within the user coordinate system of the applicable element and coordinate (1,1) in the new user coordinate system is mapped to the (maxx,maxy) corner of the tight bounding box of the applicable element. In most situations, the following transformation matrix produces the correct effect:

[ (maxx-minx) 0 0 (maxy-miny) minx miny ]

 

When percentages are used with attributes that define the gradient vector, the pattern tile, the filter region or the masking region, a percentage represents the same value as the corresponding decimal value (e.g., 50% means the same as 0.5). If percentages are used within the content of a ‘pattern’, ‘clipPath’, ‘mask’ or ‘filter’ element, these values are treated according to the processing rules for percentages as defined in Units.

Any numeric value can be specified for values expressed as a fraction or percentage of object bounding box units. In particular, fractions less are zero or greater than one and percentages less than 0% or greater than 100% can be specified.

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

7.12 Intrinsic sizing properties of the viewport of SVG content

SVG needs to specify how to calculate some intrinsic sizing properties to enable inclusion within other languages. The intrinsic width and height of the viewport of SVG content must be determined from the ‘width’ and ‘height’ attributes. If either of these are not specified, a value of '100%' must be assumed. Note: the ‘width’ and ‘height’ attributes are not the same as the CSS width and height properties. Specifically, percentage values do not provide an intrinsic width or height, and do not indicate a percentage of the containing block. Rather, once the viewport is established, they indicate the portion of the viewport that is actually covered by image data.

The intrinsic aspect ratio of the viewport of SVG content is necessary for example, when including SVG from an ‘object’ element in HTML styled with CSS. It is possible (indeed, common) for an SVG graphic to have an intrinsic aspect ratio but not to have an intrinsic width or height. The intrinsic aspect ratio must be calculated based upon the following rules:

Examples:

Example: Intrinsic Aspect Ratio 1
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="10cm" height="5cm">
  ...
</svg>

In this example the intrinsic aspect ratio of the viewport is 2:1. The intrinsic width is 10cm and the intrinsic height is 5cm.

Example: Intrinsic Aspect Ratio 2
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="100%" height="50%" viewBox="0 0 200 200">
  ...
</svg>

In this example the intrinsic aspect ratio of the rootmost viewport is 1:1. An aspect ratio calculation in this case allows embedding in an object within a containing block that is only constrained in one direction.

Example: Intrinsic Aspect Ratio 3
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="10cm" viewBox="0 0 200 200">
  ...
</svg>

In this case the intrinsic aspect ratio is 1:1.

Example: Intrinsic Aspect Ratio 4
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="75%" height="10cm" viewBox="0 0 200 200">
  ...
</svg>

In this example, the intrinsic aspect ratio is 1:1.

7.13 Geographic coordinate systems

In order to allow interoperability between SVG content generators and user agents dealing with maps encoded in SVG, the use of a common metadata definition for describing the coordinate system used to generate SVG documents is encouraged.

Such metadata must be added under the ‘metadata’ element of the topmost ‘svg’ element describing the map, consisting of an RDF description of the Coordinate Reference System definition used to generate the SVG map [RDF-PRIMER]. Note that the presence of this metadata does not affect the rendering of the SVG in any way; it merely provides added semantic value for applications that make use of combined maps.

The definition must be conformant to the XML grammar described in GML 3.2.1, an OpenGIS Standard for encoding common CRS data types in XML [GML]. In order to correctly map the 2-dimensional data used by SVG, the CRS must be of subtype ProjectedCRS or Geographic2dCRS. The first axis of the described CRS maps the SVG x-axis and the second axis maps the SVG y-axis.

The main purpose of such metadata is to indicate to the user agent that two or more SVG documents can be overlayed or merged into a single document. Obviously, if two maps reference the same Coordinate Reference System definition and have the same SVG ‘transform’ attribute value then they can be overlayed without reprojecting the data. If the maps reference different Coordinate Reference Systems and/or have different SVG ‘transform’ attribute values, then a specialized cartographic user agent may choose to transform the coordinate data to overlay the data. However, typical SVG user agents are not required to perform these types of transformations, or even recognize the metadata. It is described in this specification so that the connection between geographic coordinate systems and the SVG coordinate system is clear.

7.14 The ‘svg:transform’ attribute

Attribute definition:

svg:transform = "<transform>" | "none"
<transform>

Specifies the affine transformation that has been applied to the map data. The syntax is identical to that described in The ‘transform’ attribute section.

none

Specifies that no supplemental affine transformation has been applied to the map data. Using this value has the same meaning as specifying the identity matrix, which in turn is just the same as not specifying the ‘svg:transform’ the attribute at all.

Animatable: no.

This attribute describes an optional additional affine transformation that may have been applied during this mapping. This attribute may be added to the OpenGIS ‘CoordinateReferenceSystem’ element. Note that, unlike the ‘transform’ attribute, it does not indicate that a transformation is to be applied to the data within the file. Instead, it simply describes the transformation that was already applied to the data when being encoded in SVG.

There are three typical uses for the ‘svg:transform’ global attribute. These are described below and used in the examples.

Below is a simple example of the coordinate metadata, which describes the coordinate system used by the document via a URI.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100" height="100" viewBox="0 0 1000 1000">

  <desc>An example that references coordinate data.</desc>

  <metadata>
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:crs="http://www.ogc.org/crs"
             xmlns:svg="http://www.w3.org/2000/svg">
      <rdf:Description rdf:about="">
        <!-- The Coordinate Reference System is described
             through a URI. -->
        <crs:CoordinateReferenceSystem
            svg:transform="rotate(-90)"
            rdf:resource="http://www.example.org/srs/epsg.xml#4326"/>
      </rdf:Description>
    </rdf:RDF>
  </metadata>

  <!-- The actual map content -->
</svg>

The second example uses a well-known identifier to describe the coordinate system. Note that the coordinates used in the document have had the supplied transform applied.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100" height="100" viewBox="0 0 1000 1000">

  <desc>Example using a well known coordinate system.</desc>

  <metadata>
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:crs="http://www.ogc.org/crs"
             xmlns:svg="http://www.w3.org/2000/svg">
      <rdf:Description rdf:about="">
        <!-- In case of a well-known Coordinate Reference System
             an 'Identifier' is enough to describe the CRS -->
        <crs:CoordinateReferenceSystem svg:transform="rotate(-90) scale(100, 100)">
          <crs:Identifier>
            <crs:code>4326</crs:code>
            <crs:codeSpace>EPSG</crs:codeSpace>
            <crs:edition>5.2</crs:edition>
          </crs:Identifier>
        </crs:CoordinateReferenceSystem>
      </rdf:Description>
    </rdf:RDF>
  </metadata>

  <!-- The actual map content -->
</svg>

The third example defines the coordinate system completely within the SVG document.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100" height="100" viewBox="0 0 1000 1000">

  <desc>Coordinate metadata defined within the SVG document</desc>

  <metadata>
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:crs="http://www.ogc.org/crs"
             xmlns:svg="http://www.w3.org/2000/svg">
      <rdf:Description rdf:about="">
        <!-- For other CRS it should be entirely defined -->
        <crs:CoordinateReferenceSystem svg:transform="scale(1,-1)">
          <crs:NameSet>
            <crs:name>Mercator projection of WGS84</crs:name>
          </crs:NameSet>
          <crs:ProjectedCRS>
            <!-- The actual definition of the CRS -->
            <crs:CartesianCoordinateSystem>
              <crs:dimension>2</crs:dimension>
              <crs:CoordinateAxis>
                <crs:axisDirection>north</crs:axisDirection>
                <crs:AngularUnit>
                  <crs:Identifier>
                    <crs:code>9108</crs:code>
                    <crs:codeSpace>EPSG</crs:codeSpace>
                    <crs:edition>5.2</crs:edition>
                  </crs:Identifier>
                </crs:AngularUnit>
              </crs:CoordinateAxis>
              <crs:CoordinateAxis>
                <crs:axisDirection>east</crs:axisDirection>
                <crs:AngularUnit>
                  <crs:Identifier>
                    <crs:code>9108</crs:code>
                    <crs:codeSpace>EPSG</crs:codeSpace>
                    <crs:edition>5.2</crs:edition>
                  </crs:Identifier>
                </crs:AngularUnit>
              </crs:CoordinateAxis>
            </crs:CartesianCoordinateSystem>
            <crs:CoordinateReferenceSystem>
              <!-- the reference system of that projected system is
                         WGS84 which is EPSG 4326 in EPSG codeSpace -->
              <crs:NameSet>
                <crs:name>WGS 84</crs:name>
              </crs:NameSet>
              <crs:Identifier>
                <crs:code>4326</crs:code>
                <crs:codeSpace>EPSG</crs:codeSpace>
                <crs:edition>5.2</crs:edition>
              </crs:Identifier>
            </crs:CoordinateReferenceSystem>
            <crs:CoordinateTransformationDefinition>
              <crs:sourceDimensions>2</crs:sourceDimensions>
              <crs:targetDimensions>2</crs:targetDimensions>
              <crs:ParameterizedTransformation>
                <crs:TransformationMethod>
                  <!-- the projection is a Mercator projection which is
                        EPSG 9805 in EPSG codeSpace -->
                  <crs:NameSet>
                    <crs:name>Mercator</crs:name>
                  </crs:NameSet>
                  <crs:Identifier>
                    <crs:code>9805</crs:code>
                    <crs:codeSpace>EPSG</crs:codeSpace>
                    <crs:edition>5.2</crs:edition>
                  </crs:Identifier>
                  <crs:description>Mercator (2SP)</crs:description>
                </crs:TransformationMethod>
                <crs:Parameter>
                  <crs:NameSet>
                    <crs:name>Latitude of 1st standart parallel</crs:name>
                  </crs:NameSet>
                  <crs:Identifier>
                    <crs:code>8823</crs:code>
                    <crs:codeSpace>EPSG</crs:codeSpace>
                    <crs:edition>5.2</crs:edition>
                  </crs:Identifier>
                  <crs:value>0</crs:value>
                </crs:Parameter>
                <crs:Parameter>
                  <crs:NameSet>
                    <crs:name>Longitude of natural origin</crs:name>
                  </crs:NameSet>
                  <crs:Identifier>
                    <crs:code>8802</crs:code>
                    <crs:codeSpace>EPSG</crs:codeSpace>
                    <crs:edition>5.2</crs:edition>
                  </crs:Identifier>
                  <crs:value>0</crs:value>
                </crs:Parameter>
                <crs:Parameter>
                  <crs:NameSet>
                    <crs:name>False Easting</crs:name>
                  </crs:NameSet>
                  <crs:Identifier>
                    <crs:code>8806</crs:code>         
                    <crs:codeSpace>EPSG</crs:codeSpace>
                    <crs:edition>5.2</crs:edition>
                  </crs:Identifier>
                  <crs:value>0</crs:value>
                </crs:Parameter>
                <crs:Parameter>
                  <crs:NameSet>
                    <crs:name>False Northing</crs:name>
                  </crs:NameSet>
                  <crs:Identifier>
                    <crs:code>8807</crs:code>
                    <crs:codeSpace>EPSG</crs:codeSpace>
                    <crs:edition>5.2</crs:edition>
                  </crs:Identifier>
                  <crs:value>0</crs:value>
                </crs:Parameter>
              </crs:ParameterizedTransformation>
            </crs:CoordinateTransformationDefinition>
          </crs:ProjectedCRS>
        </crs:CoordinateReferenceSystem>
      </rdf:Description>
    </rdf:RDF>
  </metadata>

  <!-- the actual map content -->
</svg>

7.15 DOM interfaces

7.15.1 Interface SVGPoint

Many of the SVG DOM interfaces refer to objects of class SVGPoint. An SVGPoint is an (x, y) coordinate pair. When used in matrix operations, an SVGPoint is treated as a vector of the form:

[x]
[y]
[1]

If an SVGRect object is designated as read only, then attempting to assign to one of its attributes will result in an exception being thrown.

interface SVGPoint {

  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);

  SVGPoint matrixTransform(in SVGMatrix matrix);
};
Attributes:
x (float)
The x coordinate.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised if the SVGPoint object is read only, or corresponds to a DOM attribute that is read only.
y (float)
The y coordinate.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised if the SVGPoint object is read only, or corresponds to a DOM attribute that is read only.
Operations:
SVGPoint matrixTransform(in SVGMatrix matrix)

Applies a 2x3 matrix transformation on this SVGPoint object and returns a new, transformed SVGPoint object:

newpoint = matrix * thispoint
Parameters
  1. SVGMatrix matrix
    The matrix which is to be applied to this SVGPoint object.
Returns
A new SVGPoint object.

7.15.2 Interface SVGPointList

This interface defines a list of SVGPoint objects.

SVGPointList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

interface SVGPointList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  SVGPoint initialize(in SVGPoint newItem) raises(DOMException);
  SVGPoint getItem(in unsigned long index) raises(DOMException);
  SVGPoint insertItemBefore(in SVGPoint newItem, in unsigned long index) raises(DOMException);
  SVGPoint replaceItem(in SVGPoint newItem, in unsigned long index) raises(DOMException);
  SVGPoint removeItem(in unsigned long index) raises(DOMException);
  SVGPoint appendItem(in SVGPoint newItem) raises(DOMException);
};
Attributes:
numberOfItems (readonly unsigned long)
The number of items in the list.
Operations:
void clear()
Clears all existing current items from the list, with the result being an empty list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
SVGPoint initialize(in SVGPoint newItem)
Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGPoint newItem
    The item which should become the only member of the list.
Returns
The item being inserted into the list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
SVGPoint getItem(in unsigned long index)
Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.
Parameters
  1. unsigned long index
    The index of the item from the list which is to be returned. The first item is number 0.
Returns
The selected item.
Exceptions
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGPoint insertItemBefore(in SVGPoint newItem, in unsigned long index)
Inserts a new item into the list at the specified position. The first item is number 0. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item.
Parameters
  1. SVGPoint newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
SVGPoint replaceItem(in SVGPoint newItem, in unsigned long index)
Replaces an existing item in the list with a new item. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item.
Parameters
  1. SVGPoint newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item which is to be replaced. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGPoint removeItem(in unsigned long index)
Removes an existing item from the list.
Parameters
  1. unsigned long index
    The index of the item which is to be removed. The first item is number 0.
Returns
The removed item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGPoint appendItem(in SVGPoint newItem)
Inserts a new item at the end of the list. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGPoint newItem
    The item which is to be inserted. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.

7.15.3 Interface SVGMatrix

Many of SVG's graphics operations utilize 2x3 matrices of the form:

[a c e]
[b d f]

which, when expanded into a 3x3 matrix for the purposes of matrix arithmetic, become:

[a c e]
[b d f]
[0 0 1]
interface SVGMatrix {

  attribute float a setraises(DOMException);
  attribute float b setraises(DOMException);
  attribute float c setraises(DOMException);
  attribute float d setraises(DOMException);
  attribute float e setraises(DOMException);
  attribute float f setraises(DOMException);

  SVGMatrix multiply(in SVGMatrix secondMatrix);
  SVGMatrix inverse() raises(SVGException);
  SVGMatrix translate(in float x, in float y);
  SVGMatrix scale(in float scaleFactor);
  SVGMatrix scaleNonUniform(in float scaleFactorX, in float scaleFactorY);
  SVGMatrix rotate(in float angle);
  SVGMatrix rotateFromVector(in float x, in float y) raises(SVGException);
  SVGMatrix flipX();
  SVGMatrix flipY();
  SVGMatrix skewX(in float angle);
  SVGMatrix skewY(in float angle);
};
Attributes:
a (float)
The a component of the matrix.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
b (float)
The b component of the matrix.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
c (float)
The c component of the matrix.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
d (float)
The d component of the matrix.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
e (float)
The e component of the matrix.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
f (float)
The f component of the matrix.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
Operations:
SVGMatrix multiply(in SVGMatrix secondMatrix)
Performs matrix multiplication. This matrix is post-multiplied by another matrix, returning the resulting new matrix.
Parameters
  1. SVGMatrix secondMatrix
    The matrix which is post-multiplied to this matrix.
Returns
The resulting matrix.
SVGMatrix inverse()
Returns the inverse matrix.
Returns
The inverse matrix.
Exceptions
SVGException, code SVG_MATRIX_NOT_INVERTABLE
Raised if this matrix is not invertable.
SVGMatrix translate(in float x, in float y)
Post-multiplies a translation transformation on the current matrix and returns the resulting matrix.
Parameters
  1. float x
    The distance to translate along the x-axis.
  2. float y
    The distance to translate along the y-axis.
Returns
The resulting matrix.
SVGMatrix scale(in float scaleFactor)
Post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix.
Parameters
  1. float scaleFactor
    Scale factor in both X and Y.
Returns
The resulting matrix.
SVGMatrix scaleNonUniform(in float scaleFactorX, in float scaleFactorY)
Post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix.
Parameters
  1. float scaleFactorX
    Scale factor in X.
  2. float scaleFactorY
    Scale factor in Y.
Returns
The resulting matrix.
SVGMatrix rotate(in float angle)
Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix.
Parameters
  1. float angle
    Rotation angle.
Returns
The resulting matrix.
SVGMatrix rotateFromVector(in float x, in float y)
Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix. The rotation angle is determined by taking (+/-) atan(y/x). The direction of the vector (x, y) determines whether the positive or negative angle value is used.
Parameters
  1. float x
    The X coordinate of the vector (x,y). Must not be zero.
  2. float y
    The Y coordinate of the vector (x,y). Must not be zero.
Returns
The resulting matrix.
Exceptions
SVGException, code SVG_INVALID_VALUE_ERR
Raised if one of the parameters has an invalid value.
SVGMatrix flipX()
Post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix.
Returns
The resulting matrix.
SVGMatrix flipY()
Post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix.
Returns
The resulting matrix.
SVGMatrix skewX(in float angle)
Post-multiplies a skewX transformation on the current matrix and returns the resulting matrix.
Parameters
  1. float angle
    Skew angle.
Returns
The resulting matrix.
SVGMatrix skewY(in float angle)
Post-multiplies a skewY transformation on the current matrix and returns the resulting matrix.
Parameters
  1. float angle
    Skew angle.
Returns
The resulting matrix.

7.15.4 Interface SVGTransform

SVGTransform is the interface for one of the component transformations within an SVGTransformList; thus, an SVGTransform object corresponds to a single component (e.g., 'scale(…)' or 'matrix(…)') within a ‘transform’ attribute specification.
interface SVGTransform {

  // Transform Types
  const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
  const unsigned short SVG_TRANSFORM_MATRIX = 1;
  const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
  const unsigned short SVG_TRANSFORM_SCALE = 3;
  const unsigned short SVG_TRANSFORM_ROTATE = 4;
  const unsigned short SVG_TRANSFORM_SKEWX = 5;
  const unsigned short SVG_TRANSFORM_SKEWY = 6;

  readonly attribute unsigned short type;
  readonly attribute SVGMatrix matrix;
  readonly attribute float angle;

  void setMatrix(in SVGMatrix matrix) raises(DOMException);
  void setTranslate(in float tx, in float ty) raises(DOMException);
  void setScale(in float sx, in float sy) raises(DOMException);
  void setRotate(in float angle, in float cx, in float cy) raises(DOMException);
  void setSkewX(in float angle) raises(DOMException);
  void setSkewY(in float angle) raises(DOMException);
};
Constants in group “Transform Types”:
SVG_TRANSFORM_UNKNOWN (unsigned short)
The unit type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_TRANSFORM_MATRIX (unsigned short)
A 'matrix(…)' transformation.
SVG_TRANSFORM_TRANSLATE (unsigned short)
A 'translate(…)' transformation.
SVG_TRANSFORM_SCALE (unsigned short)
A 'scale(…)' transformation.
SVG_TRANSFORM_ROTATE (unsigned short)
A 'rotate(…)' transformation.
SVG_TRANSFORM_SKEWX (unsigned short)
A 'skewX(…)' transformation.
SVG_TRANSFORM_SKEWY (unsigned short)
A 'skewY(…)' transformation.
Attributes:
type (readonly unsigned short)
The type of the value as specified by one of the SVG_TRANSFORM_* constants defined on this interface.
matrix (readonly SVGMatrix)

The matrix that represents this transformation. The matrix object is live, meaning that any changes made to the SVGTransform object are immediately reflected in the matrix object and vice versa. In case the matrix object is changed directly (i.e., without using the methods on the SVGTransform interface itself) then the type of the SVGTransform changes to SVG_TRANSFORM_MATRIX.

  • For SVG_TRANSFORM_MATRIX, the matrix contains the a, b, c, d, e, f values supplied by the user.
  • For SVG_TRANSFORM_TRANSLATE, e and f represent the translation amounts (a=1, b=0, c=0 and d=1).
  • For SVG_TRANSFORM_SCALE, a and d represent the scale amounts (b=0, c=0, e=0 and f=0).
  • For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0).
  • For SVG_TRANSFORM_ROTATE, a, b, c, d, e and f together represent the matrix which will result in the given rotation. When the rotation is around the center point (0, 0), e and f will be zero.
angle (readonly float)

A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified.

For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero.

Operations:
void setMatrix(in SVGMatrix matrix)

Sets the transform type to SVG_TRANSFORM_MATRIX, with parameter matrix defining the new transformation. The values from the parameter matrix are copied, the matrix parameter does not replace SVGTransform::matrix.

Parameters
  1. SVGMatrix matrix
    The new matrix for the transformation.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
void setTranslate(in float tx, in float ty)
Sets the transform type to SVG_TRANSFORM_TRANSLATE, with parameters tx and ty defining the translation amounts.
Parameters
  1. float tx
    The translation amount in X.
  2. float ty
    The translation amount in Y.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
void setScale(in float sx, in float sy)
Sets the transform type to SVG_TRANSFORM_SCALE, with parameters sx and sy defining the scale amounts.
Parameters
  1. float sx
    The scale amount in X.
  2. float sy
    The scale amount in Y.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
void setRotate(in float angle, in float cx, in float cy)
Sets the transform type to SVG_TRANSFORM_ROTATE, with parameter angle defining the rotation angle and parameters cx and cy defining the optional center of rotation.
Parameters
  1. float angle
    The rotation angle.
  2. float cx
    The x coordinate of center of rotation.
  3. float cy
    The y coordinate of center of rotation.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
void setSkewX(in float angle)
Sets the transform type to SVG_TRANSFORM_SKEWX, with parameter angle defining the amount of skew.
Parameters
  1. float angle
    The skew angle.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
void setSkewY(in float angle)
Sets the transform type to SVG_TRANSFORM_SKEWY, with parameter angle defining the amount of skew.
Parameters
  1. float angle
    The skew angle.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

7.15.5 Interface SVGTransformList

This interface defines a list of SVGTransform objects.

The SVGTransformList and SVGTransform interfaces correspond to the various attributes which specify a set of transformations, such as the ‘transform’ attribute which is available for many of SVG's elements.

SVGTransformList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

An SVGTransformList 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.

interface SVGTransformList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  SVGTransform initialize(in SVGTransform newItem) raises(DOMException);
  SVGTransform getItem(in unsigned long index) raises(DOMException);
  SVGTransform insertItemBefore(in SVGTransform newItem, in unsigned long index) raises(DOMException);
  SVGTransform replaceItem(in SVGTransform newItem, in unsigned long index) raises(DOMException);
  SVGTransform removeItem(in unsigned long index) raises(DOMException);
  SVGTransform appendItem(in SVGTransform newItem) raises(DOMException);
  SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix);
  SVGTransform consolidate() raises(DOMException);
};
Attributes:
numberOfItems (readonly unsigned long)
The number of items in the list.
Operations:
void clear()
Clears all existing current items from the list, with the result being an empty list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGTransform initialize(in SVGTransform newItem)
Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGTransform newItem
    The item which should become the only member of the list.
Returns
The item being inserted into the list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGTransform getItem(in unsigned long index)
Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.
Parameters
  1. unsigned long index
    The index of the item from the list which is to be returned. The first item is number 0.
Returns
The selected item.
Exceptions
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGTransform insertItemBefore(in SVGTransform newItem, in unsigned long index)
Inserts a new item into the list at the specified position. The first item is number 0. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to insert before is before the removal of the item.
Parameters
  1. SVGTransform newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item before which the new item is to be inserted. The first item is number 0. If the index is equal to 0, then the new item is inserted at the front of the list. If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGTransform replaceItem(in SVGTransform newItem, in unsigned long index)
Replaces an existing item in the list with a new item. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is before the removal of the item.
Parameters
  1. SVGTransform newItem
    The item which is to be inserted into the list.
  2. unsigned long index
    The index of the item which is to be replaced. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGTransform removeItem(in unsigned long index)
Removes an existing item from the list.
Parameters
  1. unsigned long index
    The index of the item which is to be removed. The first item is number 0.
Returns
The removed item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGTransform appendItem(in SVGTransform newItem)
Inserts a new item at the end of the list. If newItem is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGTransform newItem
    The item which is to be inserted. The first item is number 0.
Returns
The inserted item.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.
SVGTransform createSVGTransformFromMatrix(in SVGMatrix matrix)

Creates an SVGTransform object which is initialized to transform of type SVG_TRANSFORM_MATRIX and whose values are the given matrix. The values from the parameter matrix are copied, the matrix parameter is not adopted as SVGTransform::matrix.

Parameters
  1. SVGMatrix matrix
    The matrix which defines the transformation.
Returns
The returned SVGTransform object.
SVGTransform consolidate()
Consolidates the list of separate SVGTransform objects by multiplying the equivalent transformation matrices together to result in a list consisting of a single SVGTransform object of type SVG_TRANSFORM_MATRIX. The consolidation operation creates new SVGTransform object as the first and only item in the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.
Returns
The resulting SVGTransform object which becomes single item in the list. If the list was empty, then a value of null is returned.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list corresponds to a read only attribute or when the object itself is read only.

7.15.6 Interface SVGAnimatedTransformList

Used for the various attributes which specify a set of transformations, such as the ‘transform’ attribute which is available for many of SVG's elements, and which can be animated.
interface SVGAnimatedTransformList {
  readonly attribute SVGTransformList baseVal;
  readonly attribute SVGTransformList animVal;
};
Attributes:
baseVal (readonly SVGTransformList)
The base value of the given attribute before applying any animations.
animVal (readonly SVGTransformList)
A read only SVGTransformList representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGTransformList will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

7.15.7 Interface SVGPreserveAspectRatio

The SVGPreserveAspectRatio interface corresponds to the ‘preserveAspectRatio’ attribute, which is available for some of SVG's elements.

An SVGPreserveAspectRatio 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.

interface SVGPreserveAspectRatio {

  // Alignment Types
  const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
  const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;

  // Meet-or-slice Types
  const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
  const unsigned short SVG_MEETORSLICE_MEET = 1;
  const unsigned short SVG_MEETORSLICE_SLICE = 2;

  attribute unsigned short align setraises(DOMException);
  attribute unsigned short meetOrSlice setraises(DOMException);
};
Constants in group “Alignment Types”:
SVG_PRESERVEASPECTRATIO_UNKNOWN (unsigned short)
The enumeration was set to a value that is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_PRESERVEASPECTRATIO_NONE (unsigned short)
Corresponds to value 'none' for attribute ‘preserveAspectRatio’.
SVG_PRESERVEASPECTRATIO_XMINYMIN (unsigned short)
Corresponds to value 'xMinYMin' for attribute ‘preserveAspectRatio’.
SVG_PRESERVEASPECTRATIO_XMIDYMIN (unsigned short)
Corresponds to value 'xMidYMin' for attribute ‘preserveAspectRatio’.
SVG_PRESERVEASPECTRATIO_XMAXYMIN (unsigned short)
Corresponds to value 'xMaxYMin' for attribute ‘preserveAspectRatio’.
SVG_PRESERVEASPECTRATIO_XMINYMID (unsigned short)
Corresponds to value 'XMinYMid' for attribute ‘preserveAspectRatio’.
SVG_PRESERVEASPECTRATIO_XMIDYMID (unsigned short)
Corresponds to value 'xMidYMid' for attribute ‘preserveAspectRatio’.
SVG_PRESERVEASPECTRATIO_XMAXYMID (unsigned short)
Corresponds to value 'xMaxYMid' for attribute ‘preserveAspectRatio’.
SVG_PRESERVEASPECTRATIO_XMINYMAX (unsigned short)
Corresponds to value 'xMinYMax' for attribute ‘preserveAspectRatio’.
SVG_PRESERVEASPECTRATIO_XMIDYMAX (unsigned short)
Corresponds to value 'xMidYMax' for attribute ‘preserveAspectRatio’.
SVG_PRESERVEASPECTRATIO_XMAXYMAX (unsigned short)
Corresponds to value 'xMaxYMax' for attribute ‘preserveAspectRatio’.
Constants in group “Meet-or-slice Types”:
SVG_MEETORSLICE_UNKNOWN (unsigned short)
The enumeration was set to a value that is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_MEETORSLICE_MEET (unsigned short)
Corresponds to value 'meet' for attribute ‘preserveAspectRatio’.
SVG_MEETORSLICE_SLICE (unsigned short)
Corresponds to value 'slice' for attribute ‘preserveAspectRatio’.
Attributes:
align (unsigned short)
The type of the alignment value as specified by one of the SVG_PRESERVEASPECTRATIO_* constants defined on this interface.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the object corresponds to a read only attribute or when the object itself is read only.
meetOrSlice (unsigned short)
The type of the meet-or-slice value as specified by one of the SVG_MEETORSLICE_* constants defined on this interface.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the object corresponds to a read only attribute or when the object itself is read only.

7.15.8 Interface SVGAnimatedPreserveAspectRatio

Used for attributes of type SVGPreserveAspectRatio which can be animated.
interface SVGAnimatedPreserveAspectRatio {
  readonly attribute SVGPreserveAspectRatio baseVal;
  readonly attribute SVGPreserveAspectRatio animVal;
};
Attributes:
baseVal (readonly SVGPreserveAspectRatio)
The base value of the given attribute before applying any animations.
animVal (readonly SVGPreserveAspectRatio)
A read only SVGPreserveAspectRatio representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the SVGPreserveAspectRatio will have the same contents as baseVal. The object referenced by animVal will always be distinct from the one referenced by baseVal, even when the attribute is not animated.

8 Paths

Contents

8.1 Introduction

Paths represent the outline of a shape which can be filled, stroked, used as a clipping path, or any combination of the three. (See Filling, Stroking and Paint Servers and Clipping, Masking and Compositing.)

A path is described using the concept of a current point. In an analogy with drawing on paper, the current point can be thought of as the location of the pen. The position of the pen can be changed, and the outline of a shape (open or closed) can be traced by dragging the pen in either straight lines or curves.

Paths represent the geometry of the outline of an object, defined in terms of moveto (set a new current point), lineto (draw a straight line), curveto (draw a curve using a cubic Bézier), arc (elliptical or circular arc) and closepath (close the current shape by drawing a line to the last moveto) elements. Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects.

This chapter describes the syntax, behavior and DOM interfaces for SVG paths. Various implementation notes for SVG paths can be found in ‘path’ element implementation notes and Elliptical arc implementation notes.

A path is defined in SVG using the ‘path’ element.

8.2 The ‘path’ element

‘path’
Categories:
Graphics element, shape element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

Attribute definitions:

d = "path data"
The definition of the outline of a shape. See Path data.
Animatable: yes. Path data animation is only possible when each path data specification within an animation specification has exactly the same list of path data commands as the ‘d’ attribute. If an animation is specified and the list of path data commands is not the same, then the animation specification is in error (see Error Processing). The animation engine interpolates each parameter to each path data command separately based on the attributes to the given animation element. Flags and booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true.
pathLength = "<number>"
The author's computation of the total length of the path, in user units. This value is used to calibrate the user agent's own distance-along-a-path calculations with that of the author. The user agent will scale all distance-along-a-path computations by the ratio of ‘pathLength’ to the user agent's own computed value for total path length. ‘pathLength’ potentially affects calculations for text on a path, motion animation and various stroke operations.
A negative value is an error (see Error processing).
Animatable: yes.

8.3 Path data

8.3.1 General information about path data

A path is defined by including a ‘path’ element which contains a d="(path data)" attribute, where the ‘d’ attribute contains the moveto, line, curve (both cubic and quadratic Béziers), arc and closepath instructions.

Example triangle01 specifies a path in the shape of a triangle. (The M indicates a moveto, the Ls indicate linetos, and the z indicates a closepath).

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example triangle01- simple example of a 'path'</title>
  <desc>A path that draws a triangle</desc>
  <rect x="1" y="1" width="398" height="398"
        fill="none" stroke="blue" />
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />
</svg>
Example triangle01
Example triangle01 — simple example of a 'path'

View this example as SVG (SVG-enabled browsers only)

Path data can contain newline characters and thus can be broken up into multiple lines to improve readability. Because of line length limitations with certain related tools, it is recommended that SVG generators split long path data strings across multiple lines, with each line not exceeding 255 characters. Also note that newline characters are only allowed at certain places within path data.

The syntax of path data is concise in order to allow for minimal file size and efficient downloads, since many SVG files will be dominated by their path data. Some of the ways that SVG attempts to minimize the size of path data are as follows:

The path data syntax is a prefix notation (i.e., commands followed by parameters). The only allowable decimal point is a Unicode U+0046 FULL STOP (".") character (also referred to in Unicode as PERIOD, dot and decimal point) and no other delimiter characters are allowed [UNICODE]. (For example, the following is an invalid numeric value in a path data stream: "13,000.56". Instead, say: "13000.56".)

For the relative versions of the commands, all coordinate values are relative to the current point at the start of the command.

In the tables below, the following notation is used:

The following sections list the commands.

8.3.2 The "moveto" commands

The "moveto" commands (M or m) establish a new current point. The effect is as if the "pen" were lifted and moved to a new location. A path data segment (if there is one) must begin with a "moveto" command. Subsequent "moveto" commands (i.e., when the "moveto" is not the first command) represent the start of a new subpath:

CommandNameParametersDescription
M (absolute)
m (relative)
moveto(x y)+ Start a new sub-path at the given (x,y) coordinate. M (uppercase) indicates that absolute coordinates will follow; m (lowercase) indicates that relative coordinates will follow. If a moveto is followed by multiple pairs of coordinates, the subsequent pairs are treated as implicit lineto commands. Hence, implicit lineto commands will be relative if the moveto is relative, and absolute if the moveto is absolute. If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute coordinates. In this case, subsequent pairs of coordinates are treated as relative even though the initial moveto is interpreted as an absolute moveto.

8.3.3 The "closepath" command

The "closepath" (Z or z) ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath. If a "closepath" is followed immediately by a "moveto", then the "moveto" identifies the start point of the next subpath. If a "closepath" is followed immediately by any other command, then the next subpath starts at the same initial point as the current subpath.

When a subpath ends in a "closepath," it differs in behavior from what happens when "manually" closing a subpath via a "lineto" command in how ‘stroke-linejoin’ and ‘stroke-linecap’ are implemented. With "closepath", the end of the final segment of the subpath is "joined" with the start of the initial segment of the subpath using the current value of ‘stroke-linejoin’. If you instead "manually" close the subpath via a "lineto" command, the start of the first segment and the end of the last segment are not joined but instead are each capped using the current value of ‘stroke-linecap’. At the end of the command, the new current point is set to the initial point of the current subpath.

CommandNameParametersDescription
Z or
z
closepath(none)Close the current subpath by drawing a straight line from the current point to current subpath's initial point. Since the Z and z commands take no parameters, they have an identical effect.

8.3.4 The "lineto" commands

The various "lineto" commands draw straight lines from the current point to a new point:

CommandNameParametersDescription
L (absolute)
l (relative)
lineto(x y)+Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. L (uppercase) indicates that absolute coordinates will follow; l (lowercase) indicates that relative coordinates will follow. A number of coordinates pairs may be specified to draw a polyline. At the end of the command, the new current point is set to the final set of coordinates provided.
H (absolute)
h (relative)
horizontal linetox+Draws a horizontal line from the current point (cpx, cpy) to (x, cpy). H (uppercase) indicates that absolute coordinates will follow; h (lowercase) indicates that relative coordinates will follow. Multiple x values can be provided (although usually this doesn't make sense). At the end of the command, the new current point becomes (x, cpy) for the final value of x.
V (absolute)
v (relative)
vertical linetoy+Draws a vertical line from the current point (cpx, cpy) to (cpx, y). V (uppercase) indicates that absolute coordinates will follow; v (lowercase) indicates that relative coordinates will follow. Multiple y values can be provided (although usually this doesn't make sense). At the end of the command, the new current point becomes (cpx, y) for the final value of y.

8.3.5 The curve commands

These three groups of commands draw curves:

8.3.6 The cubic Bézier curve commands

The cubic Bézier commands are as follows:

CommandNameParametersDescription
C (absolute)
c (relative)
curveto(x1 y1 x2 y2 x y)+Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. C (uppercase) indicates that absolute coordinates will follow; c (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.
S (absolute)
s (relative)
shorthand/smooth curveto(x2 y2 x y)+Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not an C, c, S or s, assume the first control point is coincident with the current point.) (x2,y2) is the second control point (i.e., the control point at the end of the curve). S (uppercase) indicates that absolute coordinates will follow; s (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

Example cubic01 shows some simple uses of cubic Bézier commands within a path. The example uses an internal CSS style sheet to assign styling properties. Note that the control point for the "S" command is computed automatically as the reflection of the control point for the previous "C" command relative to the start point of the "S" command.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example cubic01- cubic Bézier commands in path data</title>
  <desc>Picture showing a simple example of path data
        using both a "C" and an "S" command,
        along with annotations showing the control points
        and end points</desc>
  <style type="text/css"><![CDATA[
    .Border { fill:none; stroke:blue; stroke-width:1 }
    .Connect { fill:none; stroke:#888888; stroke-width:2 }
    .SamplePath { fill:none; stroke:red; stroke-width:5 }
    .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
    .CtlPoint { fill:#888888; stroke:none }
    .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
    .Label { font-size:22; font-family:Verdana }
  ]]></style>

  <rect class="Border" x="1" y="1" width="498" height="398" />

  <polyline class="Connect" points="100,200 100,100" />
  <polyline class="Connect" points="250,100 250,200" />
  <polyline class="Connect" points="250,200 250,300" />
  <polyline class="Connect" points="400,300 400,200" />
  <path class="SamplePath" d="M100,200 C100,100 250,100 250,200
                                       S400,300 400,200" />
  <circle class="EndPoint" cx="100" cy="200" r="10" />
  <circle class="EndPoint" cx="250" cy="200" r="10" />
  <circle class="EndPoint" cx="400" cy="200" r="10" />
  <circle class="CtlPoint" cx="100" cy="100" r="10" />
  <circle class="CtlPoint" cx="250" cy="100" r="10" />
  <circle class="CtlPoint" cx="400" cy="300" r="10" />
  <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
  <text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
  <text class="Label" x="325" y="350"
        style="text-anchor:middle">S400,300 400,200</text>
</svg>
Example cubic01
Example cubic01 — cubic Bézier comamnds in path data

View this example as SVG (SVG-enabled browsers only)

The following picture shows some how cubic Bézier curves change their shape depending on the position of the control points. The first five examples illustrate a single cubic Bézier path segment. The example at the lower right shows a "C" command followed by an "S" command.

Example cubic02 - cubic Bézier commands in path data

View this example as SVG (SVG-enabled browsers only)
 

8.3.7 The quadratic Bézier curve commands

The quadratic Bézier commands are as follows:

CommandNameParametersDescription
Q (absolute)
q (relative)
quadratic Bézier curveto(x1 y1 x y)+Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. Q (uppercase) indicates that absolute coordinates will follow; q (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.
T (absolute)
t (relative)
Shorthand/smooth quadratic Bézier curveto(x y)+Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point. (If there is no previous command or if the previous command was not a Q, q, T or t, assume the control point is coincident with the current point.) T (uppercase) indicates that absolute coordinates will follow; t (lowercase) indicates that relative coordinates will follow. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

Example quad01 shows some simple uses of quadratic Bézier commands within a path. Note that the control point for the "T" command is computed automatically as the reflection of the control point for the previous "Q" command relative to the start point of the "T" command.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example quad01 - quadratic Bézier commands in path data</title>
  <desc>Picture showing a "Q" a "T" command,
        along with annotations showing the control points
        and end points</desc>
  <rect x="1" y="1" width="1198" height="598"
        fill="none" stroke="blue" stroke-width="1" />

  <path d="M200,300 Q400,50 600,300 T1000,300"
        fill="none" stroke="red" stroke-width="5"  />
  <!-- End points -->
  <g fill="black" >
    <circle cx="200" cy="300" r="10"/>
    <circle cx="600" cy="300" r="10"/>
    <circle cx="1000" cy="300" r="10"/>
  </g>
  <!-- Control points and lines from end points to control points -->
  <g fill="#888888" >
    <circle cx="400" cy="50" r="10"/>
    <circle cx="800" cy="550" r="10"/>
  </g>
  <path d="M200,300 L400,50 L600,300 
           L800,550 L1000,300"
        fill="none" stroke="#888888" stroke-width="2" />
</svg>
Example quad01
Example quad01 — quadratic Bézier commands in path data

View this example as SVG (SVG-enabled browsers only)

8.3.8 The elliptical arc curve commands

The elliptical arc commands are as follows:

CommandNameParametersDescription
A (absolute)
a (relative)
elliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x-axis-rotation, which indicates how the ellipse as a whole is rotated relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large-arc-flag and sweep-flag contribute to the automatic calculations and help determine how the arc is drawn.

Example arcs01 shows some simple uses of arc commands within a path.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example arcs01 - arc commands in path data</title>
  <desc>Picture of a pie chart with two pie wedges and
        a picture of a line with arc blips</desc>
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="1" />

  <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
        fill="red" stroke="blue" stroke-width="5" />
  <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="blue" stroke-width="5" />

  <path d="M600,350 l 50,-25 
           a25,25 -30 0,1 50,-25 l 50,-25 
           a25,50 -30 0,1 50,-25 l 50,-25 
           a25,75 -30 0,1 50,-25 l 50,-25 
           a25,100 -30 0,1 50,-25 l 50,-25"
        fill="none" stroke="red" stroke-width="5"  />
</svg>
Example arcs01
Example arcs01 — arc commands in path data

View this example as SVG (SVG-enabled browsers only)

The elliptical arc command draws a section of an ellipse which meets the following constraints:

For most situations, there are actually four different arcs (two different ellipses, each with two different arc sweeps) that satisfy these constraints. large-arc-flag and sweep-flag indicate which one of the four arcs are drawn, as follows:

The following illustrates the four combinations of large-arc-flag and sweep-flag and the four different arcs that will be drawn based on the values of these flags. For each case, the following path data command was used:

<path d="M 125,75 a100,50 0 ?,? 100,50"
      style="fill:none; stroke:red; stroke-width:6"/>

where "?,?" is replaced by "0,0" "0,1" "1,0" and "1,1" to generate the four possible cases.

Illustration of flags in arc commands

View this example as SVG (SVG-enabled browsers only)

Refer to Elliptical arc implementation notes for detailed implementation notes for the path data elliptical arc commands.

8.3.9 The grammar for path data

The following notation is used in the Backus-Naur Form (BNF) description of the grammar for path data:

The following is the BNF for SVG paths.

svg-path:
    wsp* moveto-drawto-command-groups? wsp*
moveto-drawto-command-groups:
    moveto-drawto-command-group
    | moveto-drawto-command-group wsp* moveto-drawto-command-groups
moveto-drawto-command-group:
    moveto wsp* drawto-commands?
drawto-commands:
    drawto-command
    | drawto-command wsp* drawto-commands
drawto-command:
    closepath
    | lineto
    | horizontal-lineto
    | vertical-lineto
    | curveto
    | smooth-curveto
    | quadratic-bezier-curveto
    | smooth-quadratic-bezier-curveto
    | elliptical-arc
moveto:
    ( "M" | "m" ) wsp* moveto-argument-sequence
moveto-argument-sequence:
    coordinate-pair
    | coordinate-pair comma-wsp? lineto-argument-sequence
closepath:
    ("Z" | "z")
lineto:
    ( "L" | "l" ) wsp* lineto-argument-sequence
lineto-argument-sequence:
    coordinate-pair
    | coordinate-pair comma-wsp? lineto-argument-sequence
horizontal-lineto:
    ( "H" | "h" ) wsp* horizontal-lineto-argument-sequence
horizontal-lineto-argument-sequence:
    coordinate
    | coordinate comma-wsp? horizontal-lineto-argument-sequence
vertical-lineto:
    ( "V" | "v" ) wsp* vertical-lineto-argument-sequence
vertical-lineto-argument-sequence:
    coordinate
    | coordinate comma-wsp? vertical-lineto-argument-sequence
curveto:
    ( "C" | "c" ) wsp* curveto-argument-sequence
curveto-argument-sequence:
    curveto-argument
    | curveto-argument comma-wsp? curveto-argument-sequence
curveto-argument:
    coordinate-pair comma-wsp? coordinate-pair comma-wsp? coordinate-pair
smooth-curveto:
    ( "S" | "s" ) wsp* smooth-curveto-argument-sequence
smooth-curveto-argument-sequence:
    smooth-curveto-argument
    | smooth-curveto-argument comma-wsp? smooth-curveto-argument-sequence
smooth-curveto-argument:
    coordinate-pair comma-wsp? coordinate-pair
quadratic-bezier-curveto:
    ( "Q" | "q" ) wsp* quadratic-bezier-curveto-argument-sequence
quadratic-bezier-curveto-argument-sequence:
    quadratic-bezier-curveto-argument
    | quadratic-bezier-curveto-argument comma-wsp? 
        quadratic-bezier-curveto-argument-sequence
quadratic-bezier-curveto-argument:
    coordinate-pair comma-wsp? coordinate-pair
smooth-quadratic-bezier-curveto:
    ( "T" | "t" ) wsp* smooth-quadratic-bezier-curveto-argument-sequence
smooth-quadratic-bezier-curveto-argument-sequence:
    coordinate-pair
    | coordinate-pair comma-wsp? smooth-quadratic-bezier-curveto-argument-sequence
elliptical-arc:
    ( "A" | "a" ) wsp* elliptical-arc-argument-sequence
elliptical-arc-argument-sequence:
    elliptical-arc-argument
    | elliptical-arc-argument comma-wsp? elliptical-arc-argument-sequence
elliptical-arc-argument:
    nonnegative-number comma-wsp? nonnegative-number comma-wsp? 
        number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair
coordinate-pair:
    coordinate comma-wsp? coordinate
coordinate:
    number
nonnegative-number:
    integer-constant
    | floating-point-constant
number:
    sign? integer-constant
    | sign? floating-point-constant
flag:
    "0" | "1"
comma-wsp:
    (wsp+ comma? wsp*) | (comma wsp*)
comma:
    ","
integer-constant:
    digit-sequence
floating-point-constant:
    fractional-constant exponent?
    | digit-sequence exponent
fractional-constant:
    digit-sequence? "." digit-sequence
    | digit-sequence "."
exponent:
    ( "e" | "E" ) sign? digit-sequence
sign:
    "+" | "-"
digit-sequence:
    digit
    | digit digit-sequence
digit:
    "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
wsp:
    (#x20 | #x9 | #xD | #xA)

The processing of the BNF must consume as much of a given BNF production as possible, stopping at the point when a character is encountered which no longer satisfies the production. Thus, in the string "M 100-200", the first coordinate for the "moveto" consumes the characters "100" and stops upon encountering the minus sign because the minus sign cannot follow a digit in the production of a "coordinate". The result is that the first coordinate will be "100" and the second coordinate will be "-200".

Similarly, for the string "M 0.6.5", the first coordinate of the "moveto" consumes the characters "0.6" and stops upon encountering the second decimal point because the production of a "coordinate" only allows one decimal point. The result is that the first coordinate will be "0.6" and the second coordinate will be ".5".

Note that the BNF allows the path ‘d’ attribute to be empty. This is not an error, instead it disables rendering of the path.

8.4 Distance along a path

Various operations, including text on a path and motion animation and various stroke operations, require that the user agent compute the distance along the geometry of a graphics element, such as a ‘path’.

Exact mathematics exist for computing distance along a path, but the formulas are highly complex and require substantial computation. It is recommended that authoring products and user agents employ algorithms that produce as precise results as possible; however, to accommodate implementation differences and to help distance calculations produce results that approximate author intent, the ‘pathLength’ attribute can be used to provide the author's computation of the total length of the path so that the user agent can scale distance-along-a-path computations by the ratio of ‘pathLength’ to the user agent's own computed value for total path length.

A "moveto" operation within a ‘path’ element is defined to have zero length. Only the various "lineto", "curveto" and "arcto" commands contribute to path length calculations.

8.5 DOM interfaces

8.5.1 Interface SVGPathSeg

The SVGPathSeg interface is a base interface that corresponds to a single command within a path data specification.
interface SVGPathSeg {

  // Path Segment Types
  const unsigned short PATHSEG_UNKNOWN = 0;
  const unsigned short PATHSEG_CLOSEPATH = 1;
  const unsigned short PATHSEG_MOVETO_ABS = 2;
  const unsigned short PATHSEG_MOVETO_REL = 3;
  const unsigned short PATHSEG_LINETO_ABS = 4;
  const unsigned short PATHSEG_LINETO_REL = 5;
  const unsigned short PATHSEG_CURVETO_CUBIC_ABS = 6;
  const unsigned short PATHSEG_CURVETO_CUBIC_REL = 7;
  const unsigned short PATHSEG_CURVETO_QUADRATIC_ABS = 8;
  const unsigned short PATHSEG_CURVETO_QUADRATIC_REL = 9;
  const unsigned short PATHSEG_ARC_ABS = 10;
  const unsigned short PATHSEG_ARC_REL = 11;
  const unsigned short PATHSEG_LINETO_HORIZONTAL_ABS = 12;
  const unsigned short PATHSEG_LINETO_HORIZONTAL_REL = 13;
  const unsigned short PATHSEG_LINETO_VERTICAL_ABS = 14;
  const unsigned short PATHSEG_LINETO_VERTICAL_REL = 15;
  const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16;
  const unsigned short PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;
  const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;
  const unsigned short PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;

  readonly attribute unsigned short pathSegType;
  readonly attribute DOMString pathSegTypeAsLetter;
};
Constants in group “Path Segment Types”:
PATHSEG_UNKNOWN (unsigned short)
The unit type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
PATHSEG_CLOSEPATH (unsigned short)
Corresponds to a "closepath" (z) path data command.
PATHSEG_MOVETO_ABS (unsigned short)
Corresponds to a "absolute moveto" (M) path data command.
PATHSEG_MOVETO_REL (unsigned short)
Corresponds to a "relative moveto" (m) path data command.
PATHSEG_LINETO_ABS (unsigned short)
Corresponds to a "absolute lineto" (L) path data command.
PATHSEG_LINETO_REL (unsigned short)
Corresponds to a "relative lineto" (l) path data command.
PATHSEG_CURVETO_CUBIC_ABS (unsigned short)
Corresponds to a "absolute cubic Bézier curveto" (C) path data command.
PATHSEG_CURVETO_CUBIC_REL (unsigned short)
Corresponds to a "relative cubic Bézier curveto" (c) path data command.
PATHSEG_CURVETO_QUADRATIC_ABS (unsigned short)
Corresponds to a "absolute quadratic Bézier curveto" (Q) path data command.
PATHSEG_CURVETO_QUADRATIC_REL (unsigned short)
Corresponds to a "relative quadratic Bézier curveto" (q) path data command.
PATHSEG_ARC_ABS (unsigned short)
Corresponds to a "absolute arcto" (A) path data command.
PATHSEG_ARC_REL (unsigned short)
Corresponds to a "relative arcto" (a) path data command.
PATHSEG_LINETO_HORIZONTAL_ABS (unsigned short)
Corresponds to a "absolute horizontal lineto" (H) path data command.
PATHSEG_LINETO_HORIZONTAL_REL (unsigned short)
Corresponds to a "relative horizontal lineto" (h) path data command.
PATHSEG_LINETO_VERTICAL_ABS (unsigned short)
Corresponds to a "absolute vertical lineto" (V) path data command.
PATHSEG_LINETO_VERTICAL_REL (unsigned short)
Corresponds to a "relative vertical lineto" (v) path data command.
PATHSEG_CURVETO_CUBIC_SMOOTH_ABS (unsigned short)
Corresponds to a "absolute smooth cubic curveto" (S) path data command.
PATHSEG_CURVETO_CUBIC_SMOOTH_REL (unsigned short)
Corresponds to a "relative smooth cubic curveto" (s) path data command.
PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS (unsigned short)
Corresponds to a "absolute smooth quadratic curveto" (T) path data command.
PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL (unsigned short)
Corresponds to a "relative smooth quadratic curveto" (t) path data command.
Attributes:
pathSegType (readonly unsigned short)
The type of the path segment as specified by one of the constants defined on this interface.
pathSegTypeAsLetter (readonly DOMString)
The type of the path segment, specified by the corresponding one character command name.

8.5.2 Interface SVGPathSegClosePath

The SVGPathSegClosePath interface corresponds to a "closepath" (z) path data command.
interface SVGPathSegClosePath : SVGPathSeg {
};

8.5.3 Interface SVGPathSegMovetoAbs

The SVGPathSegMovetoAbs interface corresponds to an "absolute moveto" (M) path data command.
interface SVGPathSegMovetoAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.4 Interface SVGPathSegMovetoRel

The SVGPathSegMovetoRel interface corresponds to a "relative moveto" (m) path data command.
interface SVGPathSegMovetoRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.5 Interface SVGPathSegLinetoAbs

The SVGPathSegLinetoAbs interface corresponds to an "absolute lineto" (L) path data command.
interface SVGPathSegLinetoAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.6 Interface SVGPathSegLinetoRel

The SVGPathSegLinetoRel interface corresponds to a "relative lineto" (l) path data command.
interface SVGPathSegLinetoRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.7 Interface SVGPathSegCurvetoCubicAbs

The SVGPathSegCurvetoCubicAbs interface corresponds to an "absolute cubic Bézier curveto" (C) path data command.
interface SVGPathSegCurvetoCubicAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x1 setraises(DOMException);
  attribute float y1 setraises(DOMException);
  attribute float x2 setraises(DOMException);
  attribute float y2 setraises(DOMException);
};
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x1 (float)
The absolute X coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y1 (float)
The absolute Y coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x2 (float)
The absolute X coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y2 (float)
The absolute Y coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.8 Interface SVGPathSegCurvetoCubicRel

The SVGPathSegCurvetoCubicRel interface corresponds to a "relative cubic Bézier curveto" (c) path data command.
interface SVGPathSegCurvetoCubicRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x1 setraises(DOMException);
  attribute float y1 setraises(DOMException);
  attribute float x2 setraises(DOMException);
  attribute float y2 setraises(DOMException);
};
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x1 (float)
The relative X coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y1 (float)
The relative Y coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x2 (float)
The relative X coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y2 (float)
The relative Y coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.9 Interface SVGPathSegCurvetoQuadraticAbs

The SVGPathSegCurvetoQuadraticAbs interface corresponds to an "absolute quadratic Bézier curveto" (Q) path data command.
interface SVGPathSegCurvetoQuadraticAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x1 setraises(DOMException);
  attribute float y1 setraises(DOMException);
};
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x1 (float)
The absolute X coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y1 (float)
The absolute Y coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.10 Interface SVGPathSegCurvetoQuadraticRel

The SVGPathSegCurvetoQuadraticRel interface corresponds to a "relative quadratic Bézier curveto" (q) path data command.
interface SVGPathSegCurvetoQuadraticRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x1 setraises(DOMException);
  attribute float y1 setraises(DOMException);
};
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x1 (float)
The relative X coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y1 (float)
The relative Y coordinate for the first control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.11 Interface SVGPathSegArcAbs

The SVGPathSegArcAbs interface corresponds to an "absolute arcto" (A) path data command.
interface SVGPathSegArcAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float r1 setraises(DOMException);
  attribute float r2 setraises(DOMException);
  attribute float angle setraises(DOMException);
  attribute boolean largeArcFlag setraises(DOMException);
  attribute boolean sweepFlag setraises(DOMException);
};
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
r1 (float)
The x-axis radius for the ellipse (i.e., r1).
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
r2 (float)
The y-axis radius for the ellipse (i.e., r2).
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
angle (float)
The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
largeArcFlag (boolean)
The value of the large-arc-flag parameter.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
sweepFlag (boolean)
The value of the sweep-flag parameter.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.12 Interface SVGPathSegArcRel

The SVGPathSegArcRel interface corresponds to a "relative arcto" (a) path data command.
interface SVGPathSegArcRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float r1 setraises(DOMException);
  attribute float r2 setraises(DOMException);
  attribute float angle setraises(DOMException);
  attribute boolean largeArcFlag setraises(DOMException);
  attribute boolean sweepFlag setraises(DOMException);
};
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
r1 (float)
The x-axis radius for the ellipse (i.e., r1).
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
r2 (float)
The y-axis radius for the ellipse (i.e., r2).
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
angle (float)
The rotation angle in degrees for the ellipse's x-axis relative to the x-axis of the user coordinate system.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
largeArcFlag (boolean)
The value of the large-arc-flag parameter.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
sweepFlag (boolean)
The value of the sweep-flag parameter.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.13 Interface SVGPathSegLinetoHorizontalAbs

The SVGPathSegLinetoHorizontalAbs interface corresponds to an "absolute horizontal lineto" (H) path data command.
interface SVGPathSegLinetoHorizontalAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
};
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.14 Interface SVGPathSegLinetoHorizontalRel

The SVGPathSegLinetoHorizontalRel interface corresponds to a "relative horizontal lineto" (h) path data command.
interface SVGPathSegLinetoHorizontalRel : SVGPathSeg {
  attribute float x setraises(DOMException);
};
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.15 Interface SVGPathSegLinetoVerticalAbs

The SVGPathSegLinetoVerticalAbs interface corresponds to an "absolute vertical lineto" (V) path data command.
interface SVGPathSegLinetoVerticalAbs : SVGPathSeg {
  attribute float y setraises(DOMException);
};
Attributes:
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.16 Interface SVGPathSegLinetoVerticalRel

The SVGPathSegLinetoVerticalRel interface corresponds to a "relative vertical lineto" (v) path data command.
interface SVGPathSegLinetoVerticalRel : SVGPathSeg {
  attribute float y setraises(DOMException);
};
Attributes:
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.17 Interface SVGPathSegCurvetoCubicSmoothAbs

The SVGPathSegCurvetoCubicSmoothAbs interface corresponds to an "absolute smooth cubic curveto" (S) path data command.
interface SVGPathSegCurvetoCubicSmoothAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x2 setraises(DOMException);
  attribute float y2 setraises(DOMException);
};
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x2 (float)
The absolute X coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y2 (float)
The absolute Y coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.18 Interface SVGPathSegCurvetoCubicSmoothRel

The SVGPathSegCurvetoCubicSmoothRel interface corresponds to a "relative smooth cubic curveto" (s) path data command.
interface SVGPathSegCurvetoCubicSmoothRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
  attribute float x2 setraises(DOMException);
  attribute float y2 setraises(DOMException);
};
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
x2 (float)
The relative X coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y2 (float)
The relative Y coordinate for the second control point.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.19 Interface SVGPathSegCurvetoQuadraticSmoothAbs

The SVGPathSegCurvetoQuadraticSmoothAbs interface corresponds to an "absolute smooth cubic curveto" (T) path data command.
interface SVGPathSegCurvetoQuadraticSmoothAbs : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};
Attributes:
x (float)
The absolute X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The absolute Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.20 Interface SVGPathSegCurvetoQuadraticSmoothRel

The SVGPathSegCurvetoQuadraticSmoothRel interface corresponds to a "relative smooth cubic curveto" (t) path data command.
interface SVGPathSegCurvetoQuadraticSmoothRel : SVGPathSeg {
  attribute float x setraises(DOMException);
  attribute float y setraises(DOMException);
};
Attributes:
x (float)
The relative X coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.
y (float)
The relative Y coordinate for the end point of this path segment.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised on an attempt to change the value of a read only attribute.

8.5.21 Interface SVGPathSegList

This interface defines a list of SVGPathSeg objects.

SVGPathSegList has the same attributes and methods as other SVGxxxList interfaces. Implementers may consider using a single base class to implement the various SVGxxxList interfaces.

interface SVGPathSegList {

  readonly attribute unsigned long numberOfItems;

  void clear() raises(DOMException);
  SVGPathSeg initialize(in SVGPathSeg newItem) raises(DOMException);
  SVGPathSeg getItem(in unsigned long index) raises(DOMException);
  SVGPathSeg insertItemBefore(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
  SVGPathSeg replaceItem(in SVGPathSeg newItem, in unsigned long index) raises(DOMException);
  SVGPathSeg removeItem(in unsigned long index) raises(DOMException);
  SVGPathSeg appendItem(in SVGPathSeg newItem) raises(DOMException);
};
Attributes:
numberOfItems (readonly unsigned long)
The number of items in the list.
Operations:
void clear()
Clears all existing current items from the list, with the result being an empty list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
SVGPathSeg initialize(in SVGPathSeg newItem)
Clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
Parameters
  1. SVGPathSeg newItem
    The item which should become the only member of the list.
Returns
The item being inserted into the list.
Exceptions
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the list cannot be modified.
SVGPathSeg getItem(in unsigned long index)
Returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list.
Parameters
  1. unsigned long index
    The index of the item from the list which is to be returned. The first item is number 0.
Returns
The selected item.
Exceptions
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGPathSeg insertItemBef