W3C

Scalable Vector Graphics (SVG) 2

W3C Working Draft 09 July 2015

This version:
http://www.w3.org/TR/2015/WD-SVG2-20150709/
Latest version:
http://www.w3.org/TR/SVG2/
Latest editor's draft:
https://svgwg.org/svg2-draft/
Previous version:
http://www.w3.org/TR/2015/WD-SVG2-20150409/
Single page version:
http://www.w3.org/TR/2015/WD-SVG2-20150409/single-page.html
GitHub repository:
https://github.com/w3c/svgwg/
Public comments:
www-svg@w3.org (archive)
Editors:
Nikos Andronikos, Canon, Inc. <nikos.andronikos@cisra.canon.com.au>
Rossen Atanassov, Microsoft Co. <ratan@microsoft.com>
Tavmjong Bah, Invited Expert <tavmjong@free.fr>
Amelia Bellamy-Royds, Invited Expert <amelia.bellamy.royds@gmail.com>
Brian Birtles, Mozilla Japan <bbirtles@mozilla.com>
Bogdan Brinza, Microsoft Co. <bbrinza@microsoft.com>
Cyril Concolato, Telecom ParisTech <cyril.concolato@telecom-paristech.fr>
Erik Dahlström, Invited Expert <erik@dahlström.net>
Chris Lilley, W3C <chris@w3.org>
Cameron McCormack, Mozilla Corporation <cam@mcc.id.au>
Doug Schepers, W3C <schepers@w3.org>
Dirk Schulze, Adobe Systems <dschulze@adobe.com>
Richard Schwerdtfeger, IBM <schwer@us.ibm.com>
Satoru Takagi, KDDI Corporation <sa-takagi@kddi.com>
Jonathan Watt, Mozilla Corporation <jwatt@jwatt.org>

Abstract

This specification defines the features and syntax for Scalable Vector Graphics (SVG) Version 2. SVG is a language based on XML for describing two-dimensional vector and mixed vector/raster graphics. SVG content is stylable, scalable to different display resolutions, and can be viewed stand-alone, mixed with HTML content, or embedded using XML namespaces within other XML languages. SVG also supports dynamic changes; script can be used to create interactive documents, and animations can be performed using declarative animation features or by using script.

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 09 July 2015 Working Draft of SVG 2. This version of SVG builds upon SVG 1.1 Second Edition by improving the usability of the language and by adding new features commonly requested by authors. The Changes appendix lists all of the changes that have been made since SVG 1.1 Second Edition.

Comments on this Working Draft are welcome. 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 specification includes a number of annotations that the Working Group is using to record links to meeting minutes and resolutions where specific decisions about SVG features have been made. Different coloring is also used to mark the maturity of different sections of the specification:

In this Working Draft, by default, the background colors indicating section maturity are hidden and only annotations that record specific requirements for SVG 2 as part of our requirements gathering exercise are visible. To view the section maturity background colors and any additional annotations, the "All annotations" alternate style sheet can be used.

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

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR/. W3C publications may be updated, replaced, or obsoleted by other documents at any time.

This document is governed by the 1 August 2014 W3C Process Document.

Table of Contents

Acknowledgments

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

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

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.

SVG 2 – 09 July 2015 TopContentsNextElementsAttributesProperties

SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

Full Table of Contents

SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

Chapter 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. As a standalone format or when mixed with other XML, it uses the XML syntax [XML10]. When mixed with HTML5, it uses the HTML5 syntax [HTML]. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited 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 HTML 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.

1.2. SVG MIME type and file name extensions

The MIME type for SVG is "image/svg+xml" (see IANA Media Type Registry).

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.

1.3. SVG namespace and DTD

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

When using the XML syntax, a namespace declaration is required. When using the HTML syntax, the namespace is provided automatically by the parser.

A DTD is not provided in this specification, as the use of DTDs for validating documents is known to be problematic. In particular, DTDs do not handle namespaces gracefully and the range of constraints they can express is limited. It is recommended that authors do not include a DOCTYPE declaration in SVG documents.

1.4. Compatibility with other standards efforts

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

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

There should be a separate section that lists element and attribute categories and their members.

circular reference
URL references that directly or indirectly reference themselves are treated as invalid circular references.
invalid reference

Either of the following:

  • URL reference to node that do not exist.
  • URL references to elements which are inappropriate targets for the given reference shall be treated as invalid references (see Processing of URL references for appropriate targets). For example, the ‘clip-path’ property can only refer to clipPath elements. The property setting clip-path:url(#MyElement) is an invalid reference if the referenced element is not a clipPath.
invalid value
An invalid value specified for a property, either in a style sheet or a presentation attribute, is one that is either not allowed according to the grammar defining the property's values, or is allowed by the grammar but subsequently disallowed in prose. A CSS declaration with an invalid value is ignored; see Declarations and properties ([CSS21], section 4.1.8).
initial value

A initial value is a defined behavior used when an attribute or property is not specified, or when an attribute or property has an unsupported value. This value is to be used for the purposes of rendering, calculating animation values, and when accessing the attribute or property. As opposed to an XML default value, however, the attribute or property and its value are not visible in the DOM, and cannot be accessed with DOM methods. For properties, if the property is inherited and there is no inherited value (for example, on the root element), the initial value is the initial value as specified in the definition of that property. For non-inherited properties, the initial value is always the initial value.

"Unsupported value" should be a term that is linked to.

Note that a initial value is distinct from the XML term default value, which uses DTD lookup to determine whether an attribute is required and what its value is, and inserts required attributes and their values into the DOM ([XML10], section 3.3.2). At the XML parser level, SVG Tiny 1.2 does not have default values; initiale are part of the SVG application layer, and their values are derived from the UA.

local URL reference
An Internationalized Resource Identifier [RFC3987] that does not include an <absoluteURL> or <relativeURL> and thus represents a reference to an element within the current document. See References and the ‘defs’ element.

Unify this with other specifiction defintions of URL

markable element
A markable element is one that can have markers painted on it either through the use of the marker properties or by having a marker element as a child. The following elements are markable elements: line, path, polygon and polyline
non-local URL reference
An Internationalized Resource Identifier [RFC3987] that includes an <absoluteURL> or <relativeURL> and thus (usually) represents a reference to a different document or an element within a different document. See References and the ‘defs’ element.

Unify this with other specifiction defintions of URL. But see HTML5 refs section on URL which is complex.

presentation attribute
An 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 [CSS21]. See Styling.
structural element
The structural elements are those which define the primary structure of an SVG document. Specifically, the following elements are structural elements: defs, g, svg, symbol and use.
structurally external element
Elements that define its structure by reference to an external resource. Specifically, the following elements are structurally external elements when they have an ‘href’ attribute: audio, foreignObject, iframe, image, script, use and video.
SVG user agent
An SVG user agent is a user agent that is able to retrieve and render SVG content.
URL reference
An URL reference is an Internationalized Resource Identifier with an optional fragment identifier, as defined in Internationalized Resource Identifiers [RFC3987]. An URL reference serves as a reference to a resource or (with a fragment identifier) to a secondary resource. See References and References and the ‘defs’ element.
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.

white space characters
The following characters are considered white space characters: U+0009 CHARACTER TABULATION, U+000C FORM FEED (FF), U+000D CARRIAGE RETURN (CR), U+000A LINE FEED (LF) and U+0020 SPACE.
SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

Chapter 2: Rendering Model

Contents

SVG 2 Requirement: Support the z-index.

Resolution: We will add Jonathan Watt's z-index proposal to SVG 2.

Auckland 2011 F2F day 5.

Purpose: Allow reordering (such as when a planet orbits the sun). Reordering without script support (e.g. CSS :hover).

Owner: Jonathan (Action 3002).

The SVG 2 rendering model will follow the rules defined by the Compositing and Blending specification.

Resolution: Seattle/Paris 2012 F2F day 3.

Owner: Nikos (Action 3332).

2.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. Real implementations may choose to implement the model in the way that they see fit, but the result on any device supported by the implementation must, in most cases, match 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 may deviate slightly because of limitations of the output device (e.g. only a limited range of colors might be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves are approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements).

2.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 onto some area of the output device, possibly obscuring paint that has previously been layed down. After each object or group is painted, it becomes part of the background for the next painting operation. SVG 2 supports advanced blending modes and compositing operations that control how each painting operation interacts with the background. The rules governing these painting operations are outlined in the Compositing and Blending Specification.

2.3. Rendering order

Elements in SVG are positioned in three dimensions. In addition to their position on the x and y axis of the SVG viewport, SVG elements are also positioned on the z-axis. The position on the z-axis defines the order that they are painted.

Along the z-axis, elements are grouped into 'stacking contexts', each stacking context has an associated stack level. A stack level may contain one or more child nodes - either child stack levels, graphics elements, or g elements. graphics elements and g elements within single stack level are painted in document order - that is, they are painted in the order that they are defined in the document.

Each stack level is assigned an integer value that defines it's position on the z-axis relative to other stack levels within the same stacking context. Lower values are painted first, and so elements in a stack level with a higher value will paint over one with a lower value.

By default, everything is placed in stack level zero.

2.3.1. Controlling element rendering order: the ‘z-index’ property

See the CSS 2.1 specification for the definition of ‘z-index’. [CSS21]

The ‘z-index’ property allows an element to be assigned to a stack level.

The rules governing behaviour for SVG elements with the ‘z-index’ property specified are outlined below:

CSS specifies a property named ‘z-index’. The CSS rules that define the effect of the ‘z-index’ property were written specifically for the CSS box model, and those rules do not make sense as they stand for most SVG elements (most SVG elements do not participate in or establish a CSS box model layout). This section specifies how implementations must handle the ‘z-index’ property on elements in the SVG namespace.

Contrary to the rules in CSS 2.1, the ‘z-index’ property applies to all SVG elements regardless of the value of the ‘position’ property, with one exception: as for boxes in CSS 2.1, outer svg elements must be positioned for ‘z-index’ to apply to them.

The ‘z-index’ property specifies:

  1. The stack level of the element in the current stacking context.
  2. Whether the element establishes a new local stacking context.

Values have the following meanings:

<integer>
This integer is the stack level of the element in the current stacking context. The element also establishes a new local stacking context for its descendants.
auto
The stack level of the element in the current stacking context is the same as its parent element, unless its parent established a new stacking context, in which case its stack level is 0. The element does not establish a new local stacking context.

Here is a simple example:

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0"  width="100" height="100" fill="red"    z-index="-1"/>
  <rect x="40" width="100" height="100" fill="lime"/>
  <rect x="80" width="100" height="100" fill="blue"   z-index="1"/>
  <rect x="60" width="100" height="100" fill="aqua"/>
  <rect x="20" width="100" height="100" fill="yellow" z-index="-1"/>
</svg>

In this example there are three stack levels: -1, 0 (the default) and 1. The red and yellow rects are in stack level -1, the lime and aqua rects are in stack level 0 (the default), and the blue rect is in stack level 1. Going from lowest stack level to highest, and painting the elements in each stack level in document order, the painting order is: red, yellow, lime, aqua, blue.

A new stacking context must be established at an SVG element for its descendants if:

Stacking contexts and stack levels are conceptual tools used to describe the order in which elements must be painted one on top of the other when the document is rendered, and for determining which element is highest when determining the target of a pointer event. Stacking contexts and stack levels do not affect the position of elements in the DOM tree, and their presence or absence does not affect an element's position, size or orientation in the canvas' X-Y plane - only the order in which it is painted.

Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; elements in ancestor stacking contexts may not come between any of its elements.

Each element belongs to one stacking context. Each element in a given stacking context has an integer stack level. Elements with a higher stack level must be placed in front of elements with lower stack levels in the same stacking context. Elements may have negative stack levels. Elements with the same stack level in a stacking context must be stacked according to document order.

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

  1. the background and borders of the element forming the stacking context, if any
  2. child stacking contexts created by descendants with negative stack levels, primarily ordered by most negative first, then by tree order
  3. descendants with 'z-index: auto' or 'z-index: 0', in tree order
  4. child stacking contexts created by descendants with positive stack levels, primarily ordered by lowest index first, then by tree order

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

In the following example, the ‘z-index’ property on the g element is set to zero. This creates a new stacking context to contain the g element's children without moving the g to a different level in the document's root stacking context:

<svg xmlns="http://www.w3.org/2000/svg">
  <g z-index="0">
    <!-- this is a self contained graphic -->
    <rect x="40" width="100" height="100" fill="lime" z-index="1"/>
    <rect x="20" width="100" height="100" fill="yellow"/>
  </g>
  <rect x="60" width="100" height="100" fill="aqua"/>
  <rect x="0" width="100" height="100" fill="red" z-index="-1"/>
</svg>

The example's root stacking context contains two stack levels: -1 and 0. The red rect is in level -1, and the g element and aqua rect are in level 0. Inside stack level 0, the g element's ‘z-index’ property creates a new nested stacking context at the g for the g element's children. In this child stacking context there are two stack levels: 0 and 1. The yellow rect is in level 0 (the default), and the lime rect is in level 1.

Painting of this example starts with the stack levels of the root stacking context. First the red rect is painted in level -1, then in level 0 the g element is painted followed by the aqua rect. When the g element is painted, the child stacking context that its z-index created and all of that context's stack levels are also painted. In this child stacking context, first the yellow rect in level 0 is painted, followed by the lime rect in level 1. It's only after the g and the stacking context that it creates has been painted that the aqua rect is painted. Note that this means that although the z-index of 1 for the lime rect is a higher value than the (implicit) z-index of 0 for the aqua rect, the containment provided by the g's child stacking context results in the aqua rect painting over the lime rect. The painting order is therefore: red, yellow, lime, aqua.

2.4. How elements are rendered

Individual graphics elements are treated as if they are non isolated groups, the components (fill, stroke, etc) that make up a graphic element (See Painting shapes and text) being members of that group. See How groups are rendered.

2.5. How groups are rendered

Grouping elements, such as the g element (see container elements ) create a compositing group. The Compositing and Blending specification normatively describes how to render compositing groups. In SVG, effects may be applied to a group. For example, opacity, Filter Effects or masking. These effects are applied to the rendered result of the group immediately before any transforms on the group are applied, which are applied immediately before the group is blended and composited with the group backdrop. Applying any such effects to a group makes that group isolated.

When rendering an SVG group, unknown elements and their children are discarded from the group.

Thus, rendering a compositing group follows the following steps:
If the group is isolated:

  1. The initial backdrop is set to a new buffer initialised with rgba(0,0,0,0)
  2. The contents of the group that are graphics elements or g elements are rendered in order, onto the initial backdrop
  3. Filter Effects and other effects that modify the group canvas are applied
  4. Group transforms are applied
  5. The group canvas is blended and composited with the group backdrop
else (the group is not isolated):
  1. The initial backdrop is set to the group backdrop
  2. The contents of the group that are graphics elements or g elements are rendered in order, onto the initial backdrop. The group transforms are applied to each element as they are rendered.

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

See the CSS Color Module Level 3 for the definition of ‘opacity’. [CSS3COLOR]

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

There are several other opacity-related properties in SVG:

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

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

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

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

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

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

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

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

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

2.6. Types of graphics elements

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

2.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).

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

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

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, any stroke applied to the shape will be painted on top of part of the fill.

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

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

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

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

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

2.8. Clipping and Masking

SVG supports the following clipping/masking features:

Both, clipping and masking, are specified in the module CSS Masking [CSS-MASKING].

2.9. Parent Compositing

SVG document fragments can be semi-opaque.

In accordance with the Compositing and Blending specification, the svg element always creates an isolated group.

When the SVG document is a top-level document, the top level SVG element is considered to be the page group and is composited with a backdrop of white with 100% opacity. For all other referencing modes, there is no page group. The SVG document is composited into the parent document with opacity preserved.

2.10. The effect of the ‘overflow’ property

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

A summary of the behaviour of the ‘overflow’ property in SVG.
element initial ua styleshet auto[6] visible hidden scroll
standalone svgvisible[2]hiddenhiddenvisiblehiddenscroll
inner svgvisible[2]hiddenhiddenvisiblehiddenscroll
pattern[1]visiblehidden[4]hiddenvisiblehiddenhidden
hatches[1]visiblehidden[5]hiddenvisiblehiddenhidden
marker[1]visiblehidden[3]hiddenvisiblehiddenhidden
symbolvisiblen/ahiddenvisiblehiddenhidden
imagevisiblehiddenhiddenvisiblehiddenhidden
iframevisiblehiddenhiddenvisiblehiddenhidden
foreignObjectvisible^hiddenhiddenvisiblehiddenhidden

Table footnotes:

  1. Not currently listed as establishing a viewport. See 'Establishing a new SVG viewport'
  2. IE is the only browser that has this correct. Others use initial=hidden. Test: http://jsfiddle.net/dodgeyhack/9naLshrm/
  3. Defined under marker element.
  4. Defined under 'Notes on patterns'
  5. Defined under 'Notes on hatches'
  6. Currently not defined as such in the list below
UA style sheet definition for overflow not correct.

The ‘overflow’ property has the same parameter values and has the same meaning as defined in CSS 2.1 ([CSS21], section 11.1.1); however, the following additional points apply:

Although the initial value for ‘overflow’ is auto. In the UA style sheet, overflow is overriden for svg, image, pattern, and frame to be hidden by default.

Get rid of this As a result of the above, the default behavior of SVG user agents is to establish a clipping path to the bounds of the initial viewport and to establish a new clipping path for each element which establishes a new viewport and each pattern and marker element.

2.10.1. The initial clipping path

When an svg element is either the root element in the document or is embedded within a document whose layout is determined according to the layout rules of CSS, then the user agent must establish an initial clipping path for the SVG document fragment. The ‘overflow’ property along with additional SVG user agent processing rules determine the initial clipping path which the user agent establishes for the SVG document fragment:

In SVG 1.1 the ‘overflow’ and ‘clip’ property defintions follow at this point.

SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

Chapter 3: Basic Data Types and Interfaces

Contents

3.1. Attribute syntax

In this specification, attributes are defined with an attribute definition table, which looks like this:

Name Value Initial value Animatable
exampleattr <length> | none none yes

In the Value column is a description of the attribute's syntax. There are five methods for describing an attribute's syntax:

  1. Using the CSS Value Definition Syntax [CSS3VALUES]. This is the notation used to define the syntax for most attributes in this specification and is the default.
  2. By reference to an EBNF symbol defined in this or another specification [XML10]. This is indicated by [EBNF] appearing in the Value column.
  3. By reference to an ABNF symbol defined in another specification [STD68]. This is indicated by [ABNF] appearing in the Value column.
  4. As a URL as defined by the URL Standard [URL]. This is indicated by [URL] appearing in the Value column.
  5. In prose, below the attibute definition table. This is indicated by the text "(see below)" appearing in the Value column.

When a presentation attribute defined using the CSS Value Definition Syntax is parsed, this is done as follows:

  1. Let value be the value of the attribute.
  2. Let grammar be the grammar given in the attribute definition table's Value column.
  3. Replace all instances of <length> in grammar with [<length> | <number>].
  4. Replace all instances of <angle> in grammar with [<angle> | <number>].
  5. Return the result of parsing value with grammar.

The insertion of the <number> symbols allows for unitless length and angles to be used in presentation attribute while disallowing them in corresponding property values.

Note that all presentation attributes, since they are defined by reference to their corresponding CSS properties, are defined using the CSS Value Definition Syntax.

When any other attribute defined using the CSS Value Definition Syntax is parsed, this is done by parsing the attribute's value according to the grammar given in attribute definition table.

Note that this allows CSS comments and escapes to be used in such attributes. For example, a value of '10\px/**/' would successfully parse as '10px' in the ‘x’ presentation attribute of the rect element.

When an attribute defined as a URL is parsed, this is done by invoking the URL parser with the attribute's value as input and the document's URL as base [URL].

The Initial value column gives the initial value for the attribute. When an attribute fails to parse according to the specified CSS Value Definition Syntax, EBNF or EBNF grammar, or if parsing according to the URL Standard or by the prose describing how to parse the attribute indicates failure, the attribute is assumed to have been specified as the given initial value.

The initial value of a presentation attribute is its corresponding property's initial value. Since the use of an invalid value in a presentation attribute will be treated as if the initial value was specified, this value can override values that come from lower priority style sheet rules, such as those from the user agent style sheet.

For example, although the user agent style sheet sets the value of the ‘overflow’ property to hidden for svg elements, specifying an invalid presentation attribute such as overflow="invalid" will result in a rule setting ‘overflow’ to visible, overriding the user agent style sheet value.

The Animatable column indicates whether the attribute can be animated using animation elements; see the Animation chapter for details.

The following common definitions are used for attributes that are defined in terms of an EBNF grammar:

wsp ::= (#x9 | #x20 | #xA | #xC | #xD)
comma-wsp ::= (wsp+ ","? wsp*) | ("," wsp*)

3.2. Real number precision

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

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

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

3.3. Basic DOM interfaces

SVG 2 Requirement: Make the SVGList* interfaces a bit more like other lists/arrays.
Resolution: Add array style indexing and .length and .item to svg list types.
Purpose: To align with other array types (e.g. NodeList). Already implemented in Opera and Firefox.
Owner: Erik (ACTION-2975)

We need some explicit wording about attributes being "reflected" using these interfaces.

This should also describe how reflection works for attributes that were promoted to properties, such as ‘transform’. (Some discussion.)

Consider combining the definitions of all the list interfaces; there is a lot of duplicated text currently.

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

The CSSOM specification augments SVGElement with a style IDL attribute, so that the style attribute can be accessed in the same way as on HTML elements.

interface SVGElement : Element {

  readonly attribute SVGAnimatedString className;

  readonly attribute SVGSVGElement? ownerSVGElement;
  readonly attribute SVGElement? viewportElement;
           attribute long tabIndex;
  void focus();
  void blur();
};

SVGElement implements GlobalEventHandlers;
Attributes:
className (readonly SVGAnimatedString)

This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use Element.classList intead.

Corresponds to attribute class on the given element.

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.
tabIndex (long)
The tabIndex attribute must reflect the value of the tabindex content attribute. Its default value is 0 for elements that are directly focusable, such as through keyboard tabbing in browsers that support that functionality, and −1 for elements that are not focusable without programmatic intervention.
Operations:
void focus()
Focuses the element.

Link to a definition of what the UA has to do to "focus an element" (e.g reference https://html.spec.whatwg.org/multipage/interaction.html#dom-focus).

void blur()
Unfocuses the element. Use of this method is discouraged. Focus another element instead.

Link to a definition of what the UA has to do to "blur an element" (e.g reference https://html.spec.whatwg.org/multipage/interaction.html#dom-blur).

Do not use this method to hide the focus ring. Do not use any other method that hides the focus ring from keyboard users, in particular do not use a CSS rule to override the ‘outline’ property. Removal of the focus ring leads to serious accessibility issues for users who navigate and interact with interactive content using the keyboard.

3.3.2. Interface SVGAnimatedBoolean

Used for attributes of type boolean which can be animated.

interface SVGAnimatedBoolean {
           attribute boolean baseVal;
  readonly attribute boolean animVal;
};
Attributes:
baseVal (boolean)
The base value of the given attribute before applying any animations.
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.

3.3.3. Interface SVGAnimatedString

Used for attributes of type DOMString which can be animated.

interface SVGAnimatedString {
           attribute DOMString baseVal;
  readonly attribute DOMString animVal;
};
Attributes:
baseVal (DOMString)
The base value of the given attribute before applying any animations.
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.

3.3.4. Interface SVGStringList

This interface defines a list of DOMString values.

SVGStringList has the same attributes and methods as other SVGxxxList interfaces.

The supported property indices of an SVGStringList object is all non-negative integers less than the length of the list.

interface SVGStringList {

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

  void clear();
  DOMString initialize(DOMString newItem);
  getter DOMString getItem(unsigned long index);
  DOMString insertItemBefore(DOMString newItem, unsigned long index);
  DOMString replaceItem(DOMString newItem, unsigned long index);
  DOMString removeItem(unsigned long index);
  DOMString appendItem(DOMString newItem);
  setter void (unsigned long index, DOMString newItem);
};
Attributes:
length (readonly unsigned long)
The number of items in the list.
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(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(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(DOMString newItem, 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(DOMString newItem, 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(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(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.
setter void (unsigned long index, DOMString newItem)
Replaces the item at index index with newItem.

3.3.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;
  readonly attribute unsigned short animVal;
};
Attributes:
baseVal (unsigned short)
The base value of the given attribute before applying any animations.
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.

3.3.6. Interface SVGAnimatedInteger

Used for attributes of basic type <integer> which can be animated.

interface SVGAnimatedInteger {
           attribute long baseVal;
  readonly attribute long animVal;
};
Attributes:
baseVal (long)
The base value of the given attribute before applying any animations.
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.

3.3.7. Interface SVGNumber

Used for attributes of basic type <number>.

interface SVGNumber {
  attribute float value;
};
Attributes:
value (float)
The value of the given attribute.

3.3.8. Interface SVGAnimatedNumber

Used for attributes of basic type <number> which can be animated.

interface SVGAnimatedNumber {
           attribute float baseVal;
  readonly attribute float animVal;
};
Attributes:
baseVal (float)
The base value of the given attribute before applying any animations.
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.

3.3.9. Interface SVGNumberList

This interface defines a list of SVGNumber objects.

SVGNumberList has the same attributes and methods as other SVGxxxList interfaces.

The supported property indices of an SVGNumberList object is all non-negative integers less than the length of the list.

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 length;
  readonly attribute unsigned long numberOfItems;

  void clear();
  SVGNumber initialize(SVGNumber newItem);
  getter SVGNumber getItem(unsigned long index);
  SVGNumber insertItemBefore(SVGNumber newItem, unsigned long index);
  SVGNumber replaceItem(SVGNumber newItem, unsigned long index);
  SVGNumber removeItem(unsigned long index);
  SVGNumber appendItem(SVGNumber newItem);
  setter void (unsigned long index, SVGNumber newItem);
};
Attributes:
length (readonly unsigned long)
The number of items in the list.
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 is read only.
SVGNumber initialize(SVGNumber newItem)
Clears all existing current items from the list and re-initializes the list to hold a single item specified by the parameter. If newItem is in a list, then a new SVGNumber object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
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 is read only.
SVGNumber getItem(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(SVGNumber newItem, 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, then a new SVGNumber object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
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 is read only.
SVGNumber replaceItem(SVGNumber newItem, unsigned long index)
Replaces an existing item in the list with a new item. If newItem is already in a list, then a new SVGNumber object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
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 is read only.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGNumber removeItem(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(SVGNumber newItem)
Inserts a new item at the end of the list. If newItem is already in a list, then a new SVGNumber object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
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.
setter void (unsigned long index, SVGNumber newItem)
Replaces the item at index index with newItem. If the list is read only, then a NoModificationAllowedError is thrown.

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

3.3.11. Interface SVGLength

The SVGLength interface corresponds to the <length> and <percentage> basic data types, and represents a length or percentage that consists of a numerical factor and a unit, where the unit is one of the set of units described in Units (em, ex, px, pt, pc, cm, mm and in), a percentage, a unitless number (user units), or "unknown".

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.

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

We need to define the behavior of converting values from/to percentages when the viewport width/height/size is zero. (ACTION-3722 on Cameron.)

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

interface SVGLength {

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

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

  void newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
  void convertToSpecifiedUnits(unsigned short unitType);
};
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 CSS 2.1.
SVG_LENGTHTYPE_EXS (unsigned short)
A value was specified using the ex units defined in CSS 2.1.
SVG_LENGTHTYPE_PX (unsigned short)
A value was specified using the px units defined in CSS 2.1.
SVG_LENGTHTYPE_CM (unsigned short)
A value was specified using the cm units defined in CSS 2.1.
SVG_LENGTHTYPE_MM (unsigned short)
A value was specified using the mm units defined in CSS 2.1.
SVG_LENGTHTYPE_IN (unsigned short)
A value was specified using the in units defined in CSS 2.1.
SVG_LENGTHTYPE_PT (unsigned short)
A value was specified using the pt units defined in CSS 2.1.
SVG_LENGTHTYPE_PC (unsigned short)
A value was specified using the pc units defined in CSS 2.1.
Attributes:
unitType (readonly unsigned short)
The type of the value as specified by one of the SVG_LENGTHTYPE_* constants defined on this interface. The SVG_LENGTHTYPE_UNKNOWN unit type is returned when the length value uses a unit that does not correspond to one of the integer constants, such as ch, or is a non-scalar value, such as a calc() value.
value (float)

The value of the length in user units.

On getting, returns the value converted to user units. If the length cannot be converted to user units, for example because it is a percentage with no basis against which to resolve the percentage, then the value of valueInSpecifiedUnits is returned.

For example, (new SVGLength("10%")).value evalutes to 10, since the SVGLength is not associated with an element and thus has no percentage basis to resolve against.

On setting, sets the numerical factor to the assigned value and the unit type to user units.

Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the length is read only.
valueInSpecifiedUnits (float)

The numerical factor of the length value.

On getting, returns the numerical factor if the length is a scalar value (such as '20px' or '50%'), or returns 0 if the length is not a scalar value (such as a calc() value).

On setting, modifies the numerical factor of the length value using the same unit. If the length not a scalar value, then assigning to valueInSpecifiedUnits sets the length to be the specified number of user units.

Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the length is read only.
valueAsString (DOMString)

The length value as a string. On getting, returns a string as follows:

  • If the unit type of the length is unknown or user units, the string is simply the numeric factor converted to a string.
  • If the unit type of the length is a percentage, the string is the result of concatenating the numeric factor converted to a string with the string "%".
  • Otherwise, the string is the result of concatenating the numeric factor converted to a string with the CSS length unit in lowercase.

What about serializing non-scalar values, such as calc() values?

On setting, updates the numeric factor and units type of the SVGLength object according to the result of parsing the assigned string as a <length> or <percentage>.

Exceptions on setting
DOMException, code SYNTAX_ERR
Raised if the assigned string cannot be parsed as a valid <length> or <percentage>.
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the length is read only.
Operations:
void newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits)
Sets the numeric factor of the length value to valueInSpecifiedUnits and the unit type to unitType.
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 is read only.
void convertToSpecifiedUnits(unsigned short unitType)

Sets the unit type of the length value to the type specified by unitType and sets the numeric factor value such that it represents the same absolute length. For example, if the original value were "0.5cm" and the method was invoked to convert to millimeters, then unitType would return SVG_LENGTHTYPE_MM and valueInSpecifiedUnits would return the numeric value 5.

If the old or new unit type is percentage and the SVGLength object has no associated element, then the percentages are considered to resolve against a length of 100 user units. For example, converting an SVGLength whose value is 20px to a percentage will result in the value being 20%.

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 is read only.

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

3.3.13. Interface SVGLengthList

This interface defines a list of SVGLength objects.

SVGLengthList has the same attributes and methods as other SVGxxxList interfaces.

The supported property indices of an SVGLengthList object is all non-negative integers less than the length of the list.

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 length;
  readonly attribute unsigned long numberOfItems;

  void clear();
  SVGLength initialize(SVGLength newItem);
  getter SVGLength getItem(unsigned long index);
  SVGLength insertItemBefore(SVGLength newItem, unsigned long index);
  SVGLength replaceItem(SVGLength newItem, unsigned long index);
  SVGLength removeItem(unsigned long index);
  SVGLength appendItem(SVGLength newItem);
  setter void (unsigned long index, SVGLength newItem);
};
Attributes:
length (readonly unsigned long)
The number of items in the list.
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 is read only.
SVGLength initialize(SVGLength newItem)
Clears all existing current items from the list and re-initializes the list to hold a single item specified by the parameter. If newItem is in a list, then a new SVGLength object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
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 is read only.
SVGLength getItem(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 is read only.
SVGLength insertItemBefore(SVGLength newItem, 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, then a new SVGLength object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
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 is read only.
SVGLength replaceItem(SVGLength newItem, unsigned long index)
Replaces an existing item in the list with a new item. If newItem is already in a list, then a new SVGLength object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
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 is read only.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGLength removeItem(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 is read only.
DOMException, code INDEX_SIZE_ERR
Raised if the index number is greater than or equal to numberOfItems.
SVGLength appendItem(SVGLength newItem)
Inserts a new item at the end of the list. If newItem is already in a list, then a new SVGLength object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
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 is read only.
setter void (unsigned long index, SVGLength newItem)
Replaces the item at index index with newItem. If the list is read only, then a NoModificationAllowedError is thrown.

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

3.3.15. Interface SVGAngle

The SVGAngle interface corresponds to the <angle> basic data type, and represents an angle that consists of a numerical factor and a unit, where the unit is degrees, radians, grads, unitless numbers or "unknown".

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.

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

interface SVGAngle {

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

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

  void newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
  void convertToSpecifiedUnits(unsigned short unitType);
};
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 grads.
Attributes:
unitType (readonly unsigned short)
The type of the value as specified by one of the SVG_ANGLETYPE_* constants defined on this interface. The SVG_ANGLETYPE_UNKNOWN unit type is returned when the length value uses a unit that does not correspond to one of the integer constants, such as turn.
value (float)
The value of the angle in degrees. On getting, returns the value converted to degrees. If the type of the SVGAngle is unknown, the numerical factor of the angle is returned. On setting, sets the numerical factor to the assigned value and the unit type to unitless numbers.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the angle is read only.
valueInSpecifiedUnits (float)
The numerical factor of the angle value.
Exceptions on setting
DOMException, code NO_MODIFICATION_ALLOWED_ERR
Raised when the angle is read only.
valueAsString (DOMString)

The angle value as a string. On getting, returns a string as follows:

  • If the unit type of the angle is unknown or unitless numbers, the string is simply the numeric factor converted to a string.
  • Otherwise, the string is the result of concatenating the numeric factor converted to a string with the CSS angle unit in lowercase.

On setting, updates the numeric factor and units type of the SVGAngle object according to the result of parsing the assigned string as an <angle>.

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 is read only.
Operations:
void newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits)
Sets the numeric factor of the angle value to valueInSpecifiedUnits and the unit type to unitType.
Parameters
  1. unsigned short unitType
    The unit type for the value (e.g., SVG_ANGLETYPE_DEG).
  2. float valueInSpecifiedUnits
    The new 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 is read only.
void convertToSpecifiedUnits(unsigned short unitType)

Sets the unit type of the angle value to the type specified by unitType and sets the numeric factor value such that it represents the same absolute angle. For example, if the original value were "180deg" and the method was invoked to convert to radians, then unitType would return SVG_ANGLETYPE_RAD and valueInSpecifiedUnits would return the numeric value π.

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 is read only.

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

3.3.17. Interface SVGAnimatedRect

Used for attributes of type DOMRect which can be animated.

interface SVGAnimatedRect {
  readonly attribute DOMRectReadOnly baseVal;
  readonly attribute DOMRectReadOnly animVal;
};
Attributes:
baseVal (readonly DOMRectReadOnly)
The base value of the given attribute before applying any animations.
animVal (readonly DOMRectReadOnly)
A DOMRectReadOnly representing the current animated value of the given attribute. If the given attribute is not currently being animated, then the DOMRectReadOnly 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.

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

[NoInterfaceObject]
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'.

3.3.19. Interface SVGGraphicsElement

SVG 2 Requirement: Detect if a mouse event is on the fill or stroke of a shape.
Resolution: SVG 2 will make it easier to detect if an mouse event is on the stroke or fill of an element.
Purpose: To allow authors to discriminate between pointer events on the fill and stroke of an element without having to duplicate the element
Owner: Cameron (ACTION-3279)

Interface SVGGraphicsElement represents SVG elements whose primary purpose is to directly render graphics into a group. The ‘transform’ property applies to all SVGGraphicsElement. All SVGGraphicsElement have a bounding box in current local coordinate system.

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

interface SVGGraphicsElement : SVGElement {
  readonly attribute SVGAnimatedTransformList transform;

  DOMRect getBBox(optional SVGBoundingBoxOptions options);
  DOMMatrix? getCTM();
  DOMMatrix? getScreenCTM();
  DOMMatrix getTransformToElement(SVGGraphicsElement element);
};

SVGGraphicsElement implements SVGTests;
Attributes:
transform (readonly SVGAnimatedTransformList)
Corresponds to attribute ‘transform’ on the given element.

This needs to be updated to reflect the value of the ‘transform’ property.

Operations:
DOMRect getBBox(optional SVGBoundingBoxOptions options)

Returns the result of invoking the bounding box algorithm for the element, with fill, stroke, markers and clipped members of the options dictionary argument used to control which parts of the element are included in the bounding box, using the element's local coordinate system as the coordinate system to return the bounding box in.

Returns
An DOMRect object that defines the bounding box.
DOMMatrix? getCTM()
Returns the transformation matrix from current user units (i.e., after application of the ‘transform’ property) to the viewport coordinate system for the nearest viewport element (CTM). Note that null is returned if this element is not hooked into the document tree.

What is the expected result if you call getCTM on an svg element? See thread. Also see example. (ACTION-3724 on Dirk.)

Returns
An DOMMatrix object that defines the CTM.
DOMMatrix? getScreenCTM()
Returns the transformation matrix from current user units (i.e., after application of the ‘transform’ property) to the parent user agent's notion 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 CSS 2.1 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.

Should this take into account the 'transform' on the svg element itself? See example. Chrome/Opera/IE: returns the identity matrix for this example, Firefox: difference between transform style and attribute, and is not an identity matrix.

Returns
An DOMMatrix object that defines the given transformation matrix.
DOMMatrix getTransformToElement(SVGGraphicsElement element)
Returns the transformation matrix from the user coordinate system on the current element (after application of the ‘transform’ property) to the user coordinate system on parameter element (after application of its ‘transform’ property).

If the passed in element is in another document, what should happen? Measurements. Proposal to limit this to the same fragment if not removeable.

Parameters
  1. SVGElement element
    The target element.
Returns
An DOMMatrix object that defines the transformation.
Exceptions
InvalidStateError
Raised if the currently defined transformation matrices make it impossible to compute the given matrix (e.g., because one of the transformations is singular).

3.3.20. Interface SVGGeometryElement

Interface SVGGeometryElement represents SVG elements whose rendering is defined by geometry and which can be filled and stroked. This includes paths, text and the basic shapes.

interface SVGGeometryElement : SVGGraphicsElement {
  boolean isPointInFill(DOMPoint point);
  boolean isPointInStroke(DOMPoint point);
};
Operations:
boolean isPointInFill(DOMPoint point)
Returns whether the specified point is within the fill of the element. Normal hit testing rules apply; the value of the ‘pointer-events’ property on the element determines whether a point is considered to be within the fill.
Parameters
  1. DOMPoint point
    The point to check for intersection with the fill of this element. The DOMPoint is interpreted as a as a point in the local coordinate system of this element.
Returns
true if the point is within the fill of this shape, or false otherwise.
boolean isPointInStroke(DOMPoint point)
Returns whether the specified point is within the stroke of the element. Normal hit testing rules apply; the value of the ‘pointer-events’ property on the element determines whether a point is considered to be within the stroke.
Parameters
  1. DOMPoint point
    The point to check for intersection with the stroke of this element. The DOMPoint is interpreted as a as a point in the local coordinate system of this element.
Returns
true if the point is within the stroke of this shape, or false otherwise.

3.3.21. Interface SVGTests

Interface SVGTests defines an interface which applies to all elements which have attributes requiredExtensions and systemLanguage.

[NoInterfaceObject]
interface SVGTests {

  readonly attribute SVGStringList requiredExtensions;
  readonly attribute SVGStringList systemLanguage;
};
Attributes:
requiredExtensions (readonly SVGStringList)
Corresponds to attribute requiredExtensions on the given element.
systemLanguage (readonly SVGStringList)
Corresponds to attribute systemLanguage on the given element.

3.3.22. Interface SVGFitToViewBox

Interface SVGFitToViewBox defines DOM attributes that apply to elements which have XML attributes viewBox and preserveAspectRatio.

[NoInterfaceObject]
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.

3.3.23. Interface SVGZoomAndPan

The SVGZoomAndPan interface defines attribute zoomAndPan and associated constants.

[NoInterfaceObject]
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;
};
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.

3.3.24. Interface SVGURIReference

Interface SVGURIReference defines an interface which applies to all elements which have an ‘href’ attribute.

[NoInterfaceObject]
interface SVGURIReference {
  readonly attribute SVGAnimatedString href;
};
Attributes:
href (readonly SVGAnimatedString)

Corresponds to the ‘href’ attribute. If the element also supports the deprecated xlink:href attribute, the resulting SVGAnimatedString object will correspond to the xlink:href attribute in the XLink namespace if, and only if, all of the following conditions are true at the time when the href IDL attribute is accessed:

  • There is no ‘href’ attribute without a namespace specified on the element, and
  • There is no animation element whose target element is this element and whose attributeName is the string ‘href’ (that is, without an XMLNS prefix), and
  • There is an ‘href’ attribute in the XLink namespace on the element, or there is an animation element whose target element is this element and whose attributeName references the ‘href’ attribute in the XLink namespace.

If any of the above conditions does not hold at the time when the the href IDL attribute is accessed, the returned attribute will correspond to the ‘href’ attribute without a namespace.

SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

Chapter 4: Document Structure

Contents

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

4.1.1. Overview

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

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

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

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

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

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

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

  <!-- Show outline of 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.)

When SVG is parsed as a XML, 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].

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

4.1.2. Definitions

current SVG document fragment
The document sub-tree which starts with the outermost ancestor svg element of a given SVG element, with the requirement that all container elements between the outermost svg and the given element are all elements in the SVG namespace.
outermost svg element
The furthest svg ancestor element that remains in the current SVG document fragment.
SVG document fragment
A document sub-tree which starts with an svg element which is either the root element of the document or whose parent element is not in the SVG namespace. An SVG document fragment can consist of a stand-alone SVG document, or a fragment of a parent document enclosed by an svg element. When an svg element is a descendant of another svg element, only the outermost svg element is the root of an SVG document fragment.
SVG elements
Any element in the SVG namespace.
graphics element
One of the element types that can cause graphics to be drawn onto the target canvas. Specifically: audio, canvas, circle, ellipse, foreignObject, iframe, image, line, path, polygon, polyline, rect, text, use and video.
graphics referencing element
A graphics element which uses a reference to a different document or element as the source of its graphical content. Specifically: audio, iframe, image, use and video.

4.1.3. The ‘svg’ element

SVG 2 Requirement: Should support the playbackorder attribute to inform UA to not display controls to seek backwards.
Resolution: Support the playbackorder attribute.
Purpose: To inform UA to not display controls to seek backwards.
Owner: Cyril
SVG 2 Requirement: Support transforming svg elements.
Resolution: We will allow ‘transform’ on ‘svg’ in SVG 2.
Purpose: To allow transforms on nested svg elements, in line with author expectations.
Owner: Dirk (no action)
SVG 2 Requirement: Support a means for having SMIL animations start before their time container has fully loaded.
Resolution: Timeline control.
Purpose: To start animations before the SVG document is fully loaded (useful for large SVG documents).
Owner: Cyril
svg
Categories:
Container element, structural element
Content model:
Any number of the following elements, in any order:a, clipPath, cursor, filter, foreignObject, image, marker, mask, script, style, switch, text, view
Attributes:
Geometry properties:
DOM Interfaces:

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

Note that ‘width’ and ‘height’ are presentation attributes.

The Value column does not match the new Attribute syntax description.

For outermost svg elements, the ‘width’ and ‘height’ attributes specify the intrinsic size of the SVG document fragment. For embedded svg elements, they specify the size of the rectangular region into which the svg element is placed.

Attribute definitions:

Name Value Initial value Animatable
preserveAspectRatio defer? <align> [ meet | slice ]? xMidYMid meet yes

Specifies the fitting behavior when the aspect ratio of the svg element does not match the aspect ratio of the rectangle it is placed in. See the definition of preserveAspectRatio for details.

Name Value Initial value Animatable
zoomAndPan disable | magnify magnify no

Specifies whether the user agent should supply a means to zoom and pan the SVG content. See the definition of zoomAndPan for details.

Name Value Initial value Animatable
playbackorder forwardonly | all all no

This attribute may be harmonized and/or replaced with the work done as part of the Web Animation specification.

Indicates whether it is possible to seek backwards in the document. In earlier versions of SVG there was no need to put restrictions on the direction of seeking but with the newly introduced facilities for long-running documents (e.g. the ‘discard’ element) there is sometimes a need to restrict this.

If ‘playbackorder’ is set to 'forwardonly', the content will likely contain discard elements or scripts that destroy resources, thus seeking back in the document fragment's timeline may result in missing content. If ‘playbackorder’ is 'forwardonly', the content should not provide a way, through hyperlinking or script, of seeking backwards in the timeline. Similarly the UA should disable any controls it may provide in the user interface for seeking backwards. Content with playbackorder="forwardonly" that provides a mechanism for seeking backwards in time may result in undefined behavior or a document that is in error.

Can't we define this so that there is no undefined behavior? Awaiting ACTION-3726 (Brian).

Attribute values have the following meanings:

'forwardonly'
This file is intended to be played only in the forward direction, sequentially, therefore seeking backwards should not be allowed.
'all'
Indicates that the document is authored appropriately for seeking in both directions.
Name Value Initial value Animatable
timelinebegin loadend | loadbegin loadend no

Controls the initialization of the timeline for the SVG document fragment.

The outermost svg element of an SVG document fragment defines a timeline. Absolute times used by animation elements in an SVG document fragment are relative to the document fragment's timeline.

By default, the timeline is initialized when the document fragment's load event is fired but for progressively loaded animations, the author may set this attribute to 'loadend', thus allowing the timeline to begin as the document loads, rather than waiting until the complete document is loaded.

Attribute values have the following meanings:

'loadend'
The document fragment's timeline starts the moment the load event for the outermost svg element is triggered.
'loadbegin'
The document's timeline starts at the moment the outermost svg element's start-tag (as defined in XML 1.0 [XML10] or HTML [HTML] when using the HTML parser) is fully parsed.

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.

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

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

4.2. Grouping: the ‘g’ element

4.2.1. Overview

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

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

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

An example:

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

  <!-- Show outline of 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.

SVG 2 Requirement: Have unknown elements treated as g for the purpose of rendering.
Resolution: Accept having unknown elements treated as ‘g’ for the purpose of rendering.
Purpose: To allow fallbacks without the use of switch, and to align with the behavior of unknown elements in HTML.
Owner: Nobody (no action)

4.2.2. The ‘g’ element

g
Categories:
Container element, structural element
Content model:
Any number of the following elements, in any order:a, clipPath, cursor, filter, foreignObject, image, marker, mask, script, style, switch, text, view
Attributes:
DOM Interfaces:

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

4.3.1. Overview

SVG allows graphical objects to be defined for later reuse. To do this, it makes extensive use of URL 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: clipPath, cursor, filter, linearGradient, marker, mask, pattern, radialGradient and symbol.

4.3.2. The ‘defs’ element

defs
Categories:
Container element, structural element
Content model:
Any number of the following elements, in any order:a, clipPath, cursor, filter, foreignObject, image, marker, mask, script, style, switch, text, view
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.

4.4. The ‘discard’ element

Would this element be better as part of the Animation chapter? It also needs to be a member of the element categories that other animation elements are, and an IDL interface needs to be written for it. Covered by ACTION-3727 (Cyril).

SVG 2 Requirement: Have the discard element to declaratively discard elements from the document tree.
Resolution: SVG 2 will support the discard element.
Purpose: To conserve memory while displaying long-running documents.
Owner: Cyril (ACTION-3319)
discard
Categories:
Animation element
Content model:
Any number of the following elements, in any order:script
Attributes:
DOM Interfaces:

    Need to define SVGDiscardElement DOM interface for discard element. Covered by ACTION-3727 (Cyril).

    The ‘discard’ element allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an SVG user agent. This is particularly useful to help SVG viewers conserve memory while displaying long-running documents. This element will not be processed by static SVG viewers.

    The ‘discard’ element may occur wherever the ‘animate’ element may.

    Attribute definitions:

    Name Value Initial value Animatable
    href URL [URL] (none) no

    An URL reference that identifies the target element to discard. See the definition of ‘href’ on animation elements for details on identifying a target element. Note, however, that unlike other animation elements, the discard element does not support the deprecated xlink:href attribute.

    Note that if the target element is not part of the current SVG document fragment then whether the target element will be removed or not is defined by the host language.

    If the href attribute is not provided, then the target element will be the immediate parent element of the discard element.

    Name Value Initial value Animatable
    begin <begin-value-list> 0s no

    Attribute syntax needs fixing.

    Indicates when the target element will be discarded. See the definition of ‘begin’ on animation elements for details.

    The ‘discard’ element has an implicit simple duration of "indefinite". As soon as the element's active duration starts, the SVG user agent discards the element identified by the ‘href’ attribute ([SMIL], section 5.4.5). The removal operation acts as if removeChild were called on the parent of the target element with the target element as parameter. [DOM4] The SVG user agent must remove the target node as well as all of its attributes and descendants.

    After removal of the target element, the ‘discard’ element is no longer useful. It must also be discarded following the target element removal. If the ‘href’ attribute has an invalid URL reference (the target element did not exist, for example), the ‘discard’ element itself must still be removed following activation.

    Seeking backwards in the timeline ([SMIL], section 5.4.5) must not re-insert the discarded elements. Discarded elements are intended to be completely removed from memory. So, authors are encouraged to set the ‘playbackorder’ attribute to "forwardonly" when using the ‘discard’ element.

    The ‘discard’ element itself can be discarded prior to its activation, in which case it will never trigger the removal of its own target element. SVG user agents must allow the ‘discard’ element to be the target of another ‘discard’ element.

    The following example demonstrates a simple usage of the ‘discard’ element. The list below describes relevant behavior in the document timeline of this example:

    At time = 0:
    When the document timeline starts, the blue ellipse starts to move down the page.
    At time = 1 second:
    The red rectangle starts moving up the page.
    At time = 2 seconds:
    The ‘animateTransform’ on the ‘ellipse’ ends. The ‘ellipse’ and its children are also discarded, as it is the target element of a ‘discard’ with begin="2". The green ‘polygon’ starts to move across the page.
    At time = 3 seconds:
    The animation on the red rectangle ends. The rectangle and its children are discarded as it is the target of a ‘discard’ element with begin="3".
    At time = 4 seconds:
    The animation on the green triangle ends. The green ‘polygon’ and its children are discarded as it is the target of a ‘discard’ element with begin="4".
    <svg xmlns="http://www.w3.org/2000/svg" width="352" height="240" playbackorder="forwardonly">
        
      <ellipse cx="98.5" cy="17.5" rx="20.5" ry="17.5" fill="blue" stroke="black" 
               transform="translate(9 252) translate(3 -296)">
        <animateTransform attributeName="transform" begin="0s" dur="2s" fill="remove"
                          calcMode="linear" type="translate" additive="sum"
                          from="0 0" to="-18 305"/>
        <discard begin="2s"/>
      </ellipse>
      
      <rect x="182" y="-39" width="39" height="30" fill="red" stroke="black"
            transform="translate(30 301)">
        <animateTransform attributeName="transform" begin="1s" dur="2s" fill="remove"
                          calcMode="linear" type="translate" additive="sum"
                          from="0 0" to="-26 -304"/>
        <discard begin="3s"/>
      </rect>
      
      <polygon points="-66,83.5814 -43,123.419 -89,123.419" fill="green" stroke="black" 
               transform="matrix(1 0 0 1.1798 0 -18.6096)">
        <animateTransform attributeName="transform" begin="2s" dur="2s"
                          fill="remove" calcMode="linear" type="translate" additive="sum"
                          from="0 0" to="460 63.5699"/>
        <discard begin="4s"/>
      </polygon>
    </svg>

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

    4.5. The ‘desc’ and ‘title’ elements

    4.5.1. Definition

    descriptive element
    An element which provides supplementary descriptive information about its parent. Specifically, the following elements are descriptive elements: desc, metadata and title.
    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:

    The attribute lang added to allow internationalization of the desc and title elements.

    Adding 'lang' resolved at Rigi Kaltbad face-to-face. Removed text that limited number of 'desc' and 'title' elements.

    Is there any updated wording from SVG Tiny 1.2 that we should be using wrt tooltips?

    Each container element or graphics element in an SVG drawing can supply one or more desc and/or one or more title description strings 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. The title child element represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image or drawing object, it could be the image credit or short description of the image; it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text. The desc element represents more detailed, textual information, for the element. This is typically exposed to assistive technologies to provide more detailed information, such as help information about the element. The value is text.

    Authors are provided two vehicles for providing a visible label with a drawing element. The first way is to embed text within the drawing element. The second is to associate visible text with a drawing element through the use of aria-labelledby on the element being labelled. Authors may provide a non-visible label to a drawing element by applying an aria-label to it but also by providing a descendant title element. An author may also expose a hidden label on an element to an assistive technologies through the use of aria-labelledby when it points to content that is hidden and contains text. It is common for user agents to render the title element as a tooltip. Tooltips are an important way to convey alternative text information for a drawing object where the text label is either not readily visible or could be rendered in a clearer way in response to passing over the drawing element with a pointing device. One benefit of using a descendant 'title' element can be seen when using SVG to to produce an image button or small drawing that has no visible text but it is important to be able to render a short textual equivalent label, or tooltip, when a pointing device passes over the button.

    Authors should provide a title child element to the outermost svg element within a stand-alone SVG document. 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).

    If the SVG document is embedded in an HTML document, the outermost svg element may only serve to act as a container for SVG drawings and applying a title child element may not be of value. Applying a title element to the outermost SVG element in this may may result in a tooltip being generated.

    Unlike the desc element, authors also have the ability to associate more detailed information with content that includes visible text. This can be achieved by applying aria-describedby to the element, or container of elements being described and passing an ID reference to content that includes text that describes the element in question. However, if the text describing the object is hidden the text within the description would be exposed to assistive technologies as detailed text information, similar to a descendant desc element. The aria-describedby attribute takes precedence over the child desc when providing a description, consequently authors should only use aria-describedby when an element is described by visible text on the screen, otherwise the use of a child desc is preferred.

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

    More than one desc or title may be present with different lang attributes. The text displayed will be the text from the element where the lang attribute best matches the language set by the user agent. If no match exists, the text from the first element is used (to allow default text to be given for legacy renderers). If multiple equally valid matches exist, the first match is used.

    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"?>
    <svg xmlns="http://www.w3.org/2000/svg"
         width="4in" height="3in">
      <g>
        <title>Company sales by region</title>
        <title lang="fr">Chiffre d'affaires par région</title>
        <desc>Bar chart which shows company sales by region.</desc>
        <desc lang="fr">Graphique illustrant les ventes par région.</desc>
        <!-- Bar chart defined as vector data -->
      </g>
    </svg>
    

    Description and title elements can contain marked-up text from other namespaces.

    We should say what purpose including other-namespaced markup in title and desc has. If it is just that these are basically metadata extension points for other profiles or uses of SVG, then we should say that.

    We have this sentence here about tooltips which is stronger than the earlier note that some implementations do this. We should look at how HTML describes the ‘title’ attribute and whether a tooltip is required, suggested, etc., and follow that.

    Once we have said how ARIA attributes can be used in SVG, we might want to define title and desc in a manner consistent with them, so that it is clear what it means for example for an element to have both a desc element child and an ‘aria-describedby’ attribute.

    4.6. The ‘metadata’ element

    Metadata which is included with SVG content should be specified within metadata elements. The contents of the metadata should be elements from other XML namespaces, with these elements from these namespaces expressed in a manner conforming with the Namespaces in XML Recommendation [XML-NS].

    Authors should provide a metadata child element to the outermost svg element within a stand-alone SVG document. The metadata child element to an svg element serves the purposes of identifying document-level metadata.

    The definitions of many of SVG's elements (particularly, container and text elements) place no restriction on the placement or number of the metadata 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. Future versions of the SVG language might provide more restrictive mixed content rules. It is strongly recommended that at most one metadata element appear as a child of any particular element, and that this element appear before any other child elements (except possibly desc or title elements) or character data content. If metadata-processing user agents need to choose among multiple metadata elements for processing it should choose the first one.

    metadata
    Categories:
    Descriptive element
    Content model:
    Any elements or character data.
    Attributes:
    DOM Interfaces:

    Here is an example of how metadata can be included in an SVG document. The example uses the Dublin Core version 1.1 schema. (Other XML-compatible metadata languages, including ones not based on RDF, can be used also.)

    <?xml version="1.0" standalone="yes"?>
    <svg width="4in" height="3in"
        xmlns = 'http://www.w3.org/2000/svg'>
        <desc xmlns:myfoo="http://example.org/myfoo">
          <myfoo:title>This is a financial report</myfoo:title>
          <myfoo:descr>The global description uses markup from the
            <myfoo:emph>myfoo</myfoo:emph> namespace.</myfoo:descr>
          <myfoo:scene><myfoo:what>widget $growth</myfoo:what>
          <myfoo:contains>$three $graph-bar</myfoo:contains>
            <myfoo:when>1998 $through 2000</myfoo:when> </myfoo:scene>
       </desc>
        <metadata>
          <rdf:RDF
               xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
               xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#"
               xmlns:dc = "http://purl.org/dc/elements/1.1/" >
            <rdf:Description about="http://example.org/myfoo"
                 dc:title="MyFoo Financial Report"
                 dc:description="$three $bar $thousands $dollars $from 1998 $through 2000"
                 dc:publisher="Example Organization"
                 dc:date="2000-04-11"
                 dc:format="image/svg+xml"
                 dc:language="en" >
              <dc:creator>
                <rdf:Bag>
                  <rdf:li>Irving Bird</rdf:li>
                  <rdf:li>Mary Lambert</rdf:li>
                </rdf:Bag>
              </dc:creator>
            </rdf:Description>
          </rdf:RDF>
        </metadata>
    </svg>
    

    4.7. The ‘symbol’ element

    symbol
    Categories:
    Container element, structural element
    Content model:
    Any number of the following elements, in any order:a, clipPath, cursor, filter, foreignObject, image, marker, mask, script, style, switch, text, view
    Attributes:
    DOM Interfaces:

    4.7.1. Attributes

    Name Value Initial value Animatable
    refX <length> | left | center | right 0 yes
    refY <length> | top | center | bottom 0 yes

    New in SVG 2. Added to make it easier to align symbols to a particular point, as is often done in maps. Similar to the matching attributes on marker.

    Add refX/refY to symbol element. Resolved at Leipzig F2F.

    We will add top/center/bottom, left/center/right keywords to refX/refY on marker/symbol. Resolved at London F2F. Values inspired by 'background-position'.

    The refX and refY attributes define the reference point of the symbol which is to be placed exactly at the symbol's position as defined by the use element. They are interpreted as being in the coordinate system of the symbol contents, after application of the viewBox and preserveAspectRatio attributes.

    4.7.2. Notes on symbols

    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.

    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.

    4.8. The ‘use’ element

    SVG 2 Requirement: Allow use to reference an external document's root element by omitting the fragment.
    Resolution: We will relax referencing requirements to particular elements to allow dropping fragments to mean referencing root element, where it makes sense, such as with use, in SVG 2.
    Purpose: To avoid requiring authors to modify the referenced document to add an ID to the root element.
    Owner: Cameron (ACTION-3417)
    use
    Categories:
    Graphics element, graphics referencing element, structural element, structurally external element
    Content model:
    Any number of the following elements, in any order:clipPath, marker, mask, script
    Attributes:
    DOM Interfaces:

    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.

    use is described as referencing template objects, but the parameters of the template are limited – just different inherited property values.

    The graphical contents are any svg, symbol, g, graphics element or other use elements, that a use element references.

    Proposal: remove the following elements from 'graphical contents':

    The use element can reference an entire SVG document by specifying an href value without a fragment. Such references are taken to be referring to the root element of the referenced document.

    This allows an entire SVG document to be referenced without having to ensure that it has an ID on its root element.

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

    The non-exposed DOM tree must be created even if 'display: none' is set on the use element. Note that script elements that get conceptually cloned into the non-exposed DOM tree do not execute again, and audio and video elements that may play audio must only do so if the use element is rendered.

    We should define the behavior of use in terms of Web Components. See ACTION-3729 (Tab)

    The conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS21], 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 element 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, and events are dispatched according to the shadow tree event dispatching algorithm [SHADOWDOM]. The event's target and currentTarget attributes are set to the instance tree element 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. In order to maintain encapsulation events must use the event retargeting algorithm [SHADOWDOM] when crossing from a non-exposed tree to the regular tree.

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

    Why is ‘visibility’ called out specially? It might be better just to include an example that shows this.

    The element referenced by use may be in a separate document. However, this specification does not define how or if the user agent will process stylesheets in that document, or what viewport will be used for resolving percentages and media queries in such documents, if animations run in the separate document and which document controls the animation timeline. Script elements in the resource document must not be executed, and the corresponding conceptually cloned script elements must also not execute.

    When re-using external assets, therefore, authors are advised not to include any scripts in the external file and to use inline styles or presentation attributes only. Percentage lengths should only be used if the re-used assets define their own viewport (i.e., if the re-used element is an svg or symbol). Declarative animations in external assets should not be used.

    User agents may restrict restrict external resource documents for security reasons. In particular, this specification does not allow cross-origin resource requests in use. A future version of this or another specification may provide a method of securely enabling cross-origin re-use of assets.

    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:

    Except that the replaced content shouldn't affect how styles are matched.

    In the generated content, the use will be replaced by g, where all attributes from the use element except for x, y, width, height, href and xlink:href are transferred to the generated g element. An additional transformation translate(x,y) is appended to the end (i.e., right-side) of the ‘transform’ property on the generated g, where x and y represent the values of the x and y attributes on the use element.

    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 ([CSS21], 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"?>
    <svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
      <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" href="#MyRect" />
    </svg>
    Example Use01 — Simple case of 'use' on a 'rect'

    Example Use01

    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"?>
    <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"?>
    <svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
      <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" href="#MySymbol" />
    </svg>
    Example Use02 — 'use' on a 'symbol'

    Example Use02

    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"?>
    <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’ property.

    <?xml version="1.0" standalone="no"?>
    <svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
      <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 href="#MyRect"
           transform="translate(20,2.5) rotate(10)" />
    </svg>
    Example Use03 — 'use' with a 'transform' property

    Example Use03

    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"?>
    <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"?>
    <svg width="12cm" height="3cm" viewBox="0 0 1200 300"
         xmlns="http://www.w3.org/2000/svg">
      <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" href="#MyPath"
             class="MyUseClass"
             style="/* rule 12 */ stroke-dashoffset:50" />
      </g>
    </svg>
    Example Use04 — 'use' with CSS styling

    Example Use04

    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"?>
    <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:

    Name Value Initial value Animatable
    x, y <length> 0 yes
    width, height <length> (see below) yes

    The x, y, width and height attributes specify the positioning of the referenced element. The width and height attributes have different initial values depending on the type of the referenced element:

    svg
    The initial values are the width and height presentation attribute values from the referenced svg element.
    anything else
    The initial values are '100%'.

    A negative value for width or height is an error (see Error processing). If width or height is zero then rendering of the use element is disabled.

    Name Value Initial value Animatable
    href URL [URL] (none) yes

    An URL reference to the element/fragment within an SVG document to be cloned for rendering.

    Refer to the common handling defined for URL reference attributes and deprecated XLink attributes.

    4.9. Conditional processing

    4.9.1. Conditional processing overview

    SVG contains a switch element along with attributes 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 requiredExtensions and systemLanguage act as tests and evaluate to either true or false. 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:

    4.9.2. Definitions

    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 and systemLanguage.

    4.9.3. The ‘switch’ element

    switch
    Categories:
    Container element
    Content model:
    Any number of the following elements, in any order:a, clipPath, foreignObject, g, image, marker, mask, script, svg, switch, text, use
    Attributes:
    DOM Interfaces:

    The switch element evaluates the 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.

    The switch element does not affect the processing of script and style elements.

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

    4.9.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 URL reference.

    Name Value Initial value Animatable
    requiredExtensions list-of-extensions (none) no

    Need a grammar for list-of-extensions.

    The value is a list of URL 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.

    If a given URL 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 URL 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.

    4.9.5. The ‘systemLanguage’ attribute

    Name Value Initial value Animatable
    systemLanguage list-of-languages (none) no

    Need a grammar for list-of-languages.

    The value is a comma-separated list of Language-Tag values, 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.

    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.

    4.9.6. Applicability of test attributes

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

    This was already mentioned in the "Conditional processing overview" section. We should just describe this once.

    4.10. Common attributes

    4.10.1. Definitions

    core attributes
    The core attributes are those attributes that can be specified on any SVG element. This includes Common attributes, and styling attributes. The core attributes are id, tabindex, xml:base, xml:lang and xml:space and class and style.

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

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

    Name Value Initial value Animatable
    id (see below) (none) no

    Reflects the element's ID [DOM4]. The id attribute must be any value other than the empty string.

    Name Value Initial value Animatable
    xml:base URL [URL] (none) no

    Specifies a base URL other than the base URL of the document or external entity. Refer to the XML Base specification [XML-BASE].

    Are we happy to keep promoting the use of ‘xml:base’? Is it a use case worth trying to include a more HTML-like syntax for – the ‘base’ element? We anyway need to define somewhere what effect the HTML ‘base’ element has on any SVG document fragments. For some more context on making <base> apply to svg, see this AngularJS issue.

    4.10.3. The ‘xml:lang’ attribute

    Elements that might contain character data content can have the attribute xml:lang.

    SVG 2 Requirement: Deprecate the use of ‘xml:space’ to affect text layout and use the ‘white-space’ property instead.
    Resolution: We drop xml:space from SVG 2 and remove the relating tests from the SVG 1.1. test suite.
    Purpose: To align with CSS.
    Owner: Chris (ACTION-3004, done; and ACTION-3005, done)

    Should we be moving 'lang'? instead of ‘xml:lang’? At minimum allow both lang and xml:lang (then needs a priority if both specified).

    Name Value Initial value Animatable
    xml:lang Language-Tag [ABNF] (none) no

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

    Name Value Initial value Animatable
    xml:space (see below) default no

    Deprecated XML attribute to specify whether white space is preserved in character data. The only possible values are the strings 'default' and 'preserve'. White space is not allowed. Refer to the Extensible Markup Language (XML) 1.0 Recommendation [XML10] and to the discussion white space handling in SVG.

    New content should use the ‘white-space’ property instead.

    4.10.4. The ‘tabindex’ attribute

    Name Value Initial value Animatable
    tabindex <number> (none) no

    We should explicit refer to the algorithm HTML uses to parse tabindex numbers.

    This content attribute allows authors to control whether an element is focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation

    The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation.

    4.11. WAI-ARIA attributes

    4.11.1. Definitions

    ARIA attributes
    These are the attributes used consisting of WAI-ARIA states and properties as well as the role attribute whose values are defined defined in WAI-ARIA. See WAI-ARIA WAI-ARIA Definition of Roles and WAI-ARIA Supported States and Properties. The aria attributes are aria-activedescendant, role, aria-autocomplete, aria-busy, aria-checked, aria-controls, aria-describedat, aria-describedby, aria-disabled, aria-dropeffect, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-label, aria-labelledby, aria-level, aria-atomic, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext and aria-live.

    4.11.2. Role attribute

    SVG elements having native semantics that are not limited to presentation (having "no role"), may have an ARIA role attribute specified. The attribute, if specified, must have a value that is a set of space-separated tokens representing the various WAI-ARIA roles that the element belongs to. These tokens are role values defined in Definition of Roles ([ARIA], section 5.4).

    The WAI-ARIA role that an SVG element has assigned to it is the first non-abstract role found in the list of values generated when the role attribute is split on spaces.

    Name Value Initial value Animatable
    role set of space-separated tokens (see below) no

    The role attribute must be a set of space-separated tokens having values defined in Definition of Roles ([ARIA], section 5.4).

    The role value is a set of white-space separated machine-extractable semantic information used to define the purpose of the element.

    The initial value for the role attribute, for each SVG element, is the corresponding default implied ARIA semantic for SVG elements.

    4.11.3. State and property attributes (all aria- attributes)

    SVG elements having native semantics that are not limited to presentation (having "no role"), may have an may have WAI-ARIA state and property attributes specified. These attributes are defined by ARIA in Definitions of States and Properties (all aria-* attributes) ([ARIA], section 6.6).

    These attributes, if specified, must have a value that is the WAI-ARIA value type in the "Value" field of the definition for the state or property, mapped to the appropriate SVG value type according to Mapping WAI-ARIA Value types to languages using the SVG mapping ([ARIA], section 10.2).

    WAI-ARIA State and Property attributes can be used on any element. They are not always meaningful, however, and in such cases user agents might not perform any processing aside from including them in the DOM. Unlike some other host languages, SVG is not considered to have strong native host language semantics in terms of the user interface, consequently state and property attributes are processed according to the ARIA and SVG Accessibility API Mappings specification specifications. [ARIA] [SVG-AAM]

    4.11.4. Implicit ARIA Semantics

    The following table defines the implicit native semantics and corresponding default implicit ARIA semantics that apply to SVG elements. Each language feature (element) in a cell in the first column implies the ARIA semantics (role, states, and/or properties) given in the cell in the second column of the same row. The third column defines restrictions as to what WAI-ARIA semantic (role, state, or property) may or may not apply.

    Language featureDefault implied ARIA semanticsRestrictions
    a link role no restrictions
    animate none no role may be applied
    animateMotion none no role may be applied
    animateTransform none no role may be appplied
    audio group role If specified, role must be application
    canvas group role no restrictions
    circle none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    clipPath none no role may be applied
    cursor none no restrictions
    defs none no role may be applied
    desc none no role may be applied
    discard none no role may be applied
    ellipse none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    feBlend none no role may be applied
    feColorMatrix none no role may be applied
    feComponentTransfer none no role may be applied
    feComposite none no role may be applied
    feConvolveMatrix none no role may be applied
    feDiffuseLighting none no role may be applied
    feDisplacementMap none no role may be applied
    feDistantLight none no role may be applied
    feDropShadow none no role may be applied
    feFlood none no role may be applied
    feFuncA none no role may be applied
    feFuncB none no role may be applied
    feFuncG none no role may be applied
    feFuncR none no role may be applied
    feGaussianBlur none no role may be applied
    feImage none no role may be applied
    feMerge none no role may be applied
    feMergeNode none no role may be applied
    feMorphology none no role may be applied
    feOffset none no role may be applied
    fePointLight none no role may be applied
    feSpecularLighting none no role may be applied
    feSpotLight none no role may be applied
    feTile none no role may be applied
    feTurbulence none no role may be applied
    filter none no role may be applied
    foreignObject none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    g none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    hatch none no role may be applied
    hatchpath none no role may be applied
    iframe no role If Specified, role must be either application, document, or img roles
    image img role no restrictions
    line none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    linearGradient none no role may be applied
    marker none no role may be applied
    mask none no role may be applied
    mesh none no role may be applied
    meshpatch none no role may be applied
    meshrow none no role may be applied
    metadata none no role may be applied
    mpath none no role may be applied
    path none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    pattern none no role may be applied
    polygon none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    polyline none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    radialGradient none no role may be applied
    rect none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    script none no role may be applied
    set none no role may be applied
    solidcolor none no role may be applied
    source none no role may be applied
    stop none no role may be applied
    style none no role may be applied
    svg group role no restrictions
    switch none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    symbol none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions
    text group role no restrictions
    textPath group role no restrictions
    title none no role may be applied
    track none no role may be applied
    tspan group role no restrictions
    use none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, img role no restrictions
    video group role If specified, role must be application
    view none role provided no associated title element, desc element, aria-label attribute, aria-labelledby attribute, aria-describedby attribute; or tabindex attribute; otherwise, group role no restrictions

    4.12. DOM interfaces

    4.12.1. Interface Document

    The DOM Core specification defines a Document interface, which this specification extends.

    In the case where an SVG document is embedded by reference, such as when an HTML document has an ‘object’ element whose ‘data’ 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.

    For historical reasons, Window objects must also have a writable, configurable, non-enumerable property named SVGDocument whose value is the Document interface object.

    partial interface Document {
      readonly attribute SVGSVGElement rootElement;
    };
    Attributes:
    rootElement (readonly SVGSVGElement)
    The root svg in the document hierarchy.

    This attribute is deprecated, and may be removed in a future SVG specification. Authors are encouraged to use the documentElement attribute on Document instead.

    The following IDL fragment must be supported only if the SVG implementation is also a Web browser or other interactive user agent, and therefore implements HTML.

    // must only be implemented in certain implementations
    partial interface Document {
      readonly attribute DOMString title;
      readonly attribute DOMString referrer;
      readonly attribute DOMString domain;
      readonly attribute Element? activeElement;
    };

    This is because the interface members above are already defined in HTML, and in implementations that support SVG and HTML they cannot be duplicated.

    The title, referrer, domain and activeElement IDL attributes must behave the same as the corresponding IDL attributes defined in HTML.

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

    interface SVGSVGElement : SVGGraphicsElement {
    
      readonly attribute SVGAnimatedLength x;
      readonly attribute SVGAnimatedLength y;
      readonly attribute SVGAnimatedLength width;
      readonly attribute SVGAnimatedLength height;
      readonly attribute DOMRectReadOnly viewport;
               attribute float currentScale;
      readonly attribute DOMPointReadOnly currentTranslate;
    
      unsigned long suspendRedraw(unsigned long maxWaitMilliseconds);
      void unsuspendRedraw(unsigned long suspendHandleID);
      void unsuspendRedrawAll();
      void forceRedraw();
      void pauseAnimations();
      void unpauseAnimations();
      boolean animationsPaused();
      float getCurrentTime();
      void setCurrentTime(float seconds);
      NodeList getIntersectionList(DOMRectReadOnly rect, SVGElement? referenceElement);
      NodeList getEnclosureList(DOMRectReadOnly rect, SVGElement? referenceElement);
      boolean checkIntersection(SVGElement element, DOMRectReadOnly rect);
      boolean checkEnclosure(SVGElement element, DOMRectReadOnly rect);
      void deselectAll();
      SVGNumber createSVGNumber();
      SVGLength createSVGLength();
      SVGAngle createSVGAngle();
      DOMPoint createSVGPoint();
      DOMMatrix createSVGMatrix();
      DOMRect createSVGRect();
      SVGTransform createSVGTransform();
      SVGTransform createSVGTransformFromMatrix(DOMMatrixReadOnly matrix);
    };
    
    SVGSVGElement implements SVGFitToViewBox;
    SVGSVGElement implements SVGZoomAndPan;
    SVGSVGElement implements WindowEventHandlers;
    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.
    viewport (readonly DOMRectReadOnly)

    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 DOMRectReadOnly object, as its name suggests, is 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).

    The value of a transform property on the outermost svg element does not affect the value of this attribute.

    When accessed on an svg element that is not an outermost svg element, this attribute must return 1 as scaling factor.

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

    The value of a transform property on the outermost svg element does not affect the value of this attribute.

    When accessed on an svg element that is not an outermost svg element, this attribute must return an DOMPointReadOnly at the coordinates (0, 0).

    Operations:
    unsigned long suspendRedraw(unsigned long maxWaitMilliseconds)
    This method is deprecated, and is only kept for compatibility with legacy content. Calling this method has no effect on redrawing.
    Parameters
    1. unsigned long maxWaitMilliseconds
      This parameter is ignored.
    Returns
    The returned value is always 1.
    void unsuspendRedraw(unsigned long suspendHandleID)
    This method is deprecated, and is only kept for compatibility with legacy content. Calling this method has no effect on redrawing.
    Parameters
    1. unsigned long suspendHandleID
      This parameter is ignored.
    void unsuspendRedrawAll()
    This method is deprecated, and is only kept for compatibility with legacy content. Calling this method has no effect on redrawing.
    void forceRedraw()
    This method is deprecated, and is only kept for compatibility with legacy content. Calling this method has no effect on redrawing.
    void pauseAnimations()

    Suspends (i.e., pauses) all currently running SVG animations that are defined within the SVG document fragment corresponding to this svg element, causing the current time of the timeline for this document fragment to stand still until it is unpaused. If this svg element is not the outermost svg element this method has no effect.

    This method only affects animations defined using SVG's animation elements. It does not affect CSS Animations [CSSANIMATIONS], CSS Transitions [CSS3TRANSITIONS] or animations created using script.

    void unpauseAnimations()

    Unsuspends (i.e., unpauses) currently running animations that are defined within the SVG document fragment corresponding to this svg element, causing the timeline for the document fragment to continue from its current time. If this svg element is not the outermost svg element this method has no effect.

    This method only affects animations defined using SVG's animation elements. It does not affect CSS Animations [CSSANIMATIONS], CSS Transitions [CSS3TRANSITIONS] or animations created using script.

    boolean animationsPaused()
    Returns true if the timeline for the current SVG document fragment is in a paused state.
    Returns
    Boolean indicating whether the timeline for the current SVG document fragment is in a paused state.
    float getCurrentTime()

    Returns the current time in seconds relative to the start time for the timeline of the current SVG document fragment. If getCurrentTime is called before the current SVG document fragment's timeline has begun, then 0 is returned.

    For example, if the outermost svg element of an SVG document fragment has a timelinebegin value of loadend, any script running in a script element that does not wait for the document fragment's load event to fire, will run before the timeline begins and any calls to this method will return 0.

    Returns
    The current time in seconds, or 0 if the current SVG document fragment timeline has not yet started.
    void setCurrentTime(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, 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.

    If this svg element is not the outermost svg element this method has no effect.

    Parameters
    1. float seconds
      The new current time in seconds relative to the start time for this SVG document fragment.
    NodeList getIntersectionList(DOMRectReadOnly rect, 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.

    Shadow tree elements must not be returned in the list, if such an element is matched then the corresponding use element is to be returned.

    Parameters
    1. 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. The NodeList that is returned is static ([DOM4], section 5.2.7).
    NodeList getEnclosureList(DOMRectReadOnly rect, 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.

    Shadow tree elements must not be returned in the list, if such an element is matched then the corresponding use element is to be returned.

    Parameters
    1. 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. The NodeList that is returned is static ([DOM4], section 5.2.7).
    boolean checkIntersection(SVGElement element, DOMRectReadOnly 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. 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(SVGElement element, DOMRectReadOnly 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. 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()

    Removes any selections from the document. The effect of this method is to remove all ranges from the document's selection and then to set the selection's direction to forwards. [DOM4][EDITING]

    This is equivalent to calling document.getSelection().removeAllRanges() on the document that this svg element is in.

    This method is deprecated, as it duplicates functionality from the Selection API.

    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.
    DOMPoint createSVGPoint()
    Creates an DOMPoint object outside of any document trees. The object is initialized to the point (0,0) in the user coordinate system.

    This method is deprecated, and is only kept for compatibility with legacy content. Authors are encouraged to use the DOMPoint constructors instead.

    Returns
    An DOMPoint object.
    DOMMatrix createSVGMatrix()
    Creates an DOMMatrix object outside of any document trees. The object is initialized to the identity matrix.

    This method is deprecated, and is only kept for compatibility with legacy content. Authors are encouraged to use the DOMMatrix constructors instead.

    Returns
    An DOMMatrix object.
    DOMRect createSVGRect()
    Creates an DOMRect object outside of any document trees. The object is initialized such that all values are set to 0 user units.

    This method is deprecated, and is only kept for compatibility with legacy content. Authors are encouraged to use the DOMRect constructors instead.

    Returns
    An DOMRect 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(DOMMatrixReadOnly 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. The transform matrix.
    Returns
    An SVGTransform object.

    4.12.3. Interface SVGGElement

    The SVGSVGElement interface corresponds to the g element.
    interface SVGGElement : SVGGraphicsElement {
    };

    4.12.4. Interface SVGDefsElement

    The SVGDefsElement interface corresponds to the defs element.
    interface SVGDefsElement : SVGGraphicsElement {
    };

    4.12.5. Interface SVGDescElement

    The SVGDescElement interface corresponds to the desc element.
    interface SVGDescElement : SVGElement {
    };

    4.12.6. Interface SVGMetadataElement

    The SVGMetadataElement interface corresponds to the metadata element.
    interface SVGMetadataElement : SVGElement {
    };

    4.12.7. Interface SVGTitleElement

    The SVGTitleElement interface corresponds to the title element.
    interface SVGTitleElement : SVGElement {
    };

    4.12.8. Interface SVGSymbolElement

    The SVGSymbolElement interface corresponds to the symbol element.
    interface SVGSymbolElement : SVGElement {
    };
    
    SVGSymbolElement implements SVGFitToViewBox;

    4.12.9. Interface SVGUseElement

    The SVGUseElement interface corresponds to the use element.

    interface SVGUseElement : SVGGraphicsElement {
      readonly attribute SVGAnimatedLength x;
      readonly attribute SVGAnimatedLength y;
      readonly attribute SVGAnimatedLength width;
      readonly attribute SVGAnimatedLength height;
    };
    
    SVGUseElement implements SVGURIReference;
    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.

    4.12.10. Interface SVGSwitchElement

    The SVGSwitchElement interface corresponds to the switch element.
    interface SVGSwitchElement : SVGGraphicsElement {
    };

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

    This interface is deprecated and may be dropped from future versions of the SVG specification. To access the SVG document inside an ‘iframe’ or ‘object’ element, authors are suggested to use the contentDocument attribute on the HTMLIFrameElement or HTMLObjectElement interface, respectively.

    The HTMLIFrameElement, HTMLEmbedElement and HTMLObjectElement interfaces all define their own getSVGDocument method, which provides access to the SVG document in the same way that the GetSVGDocument does. Those three interfaces therefore do not need to implement GetSVGDocument. Still, authors are strongly recommended to use contentDocument instead.

    [NoInterfaceObject]
    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.

    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.
    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    Chapter 5: Styling

    Contents

    5.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 [CSS21] 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 CSS 2.1 specification [CSS21] or a later version of the relevant CSS module.

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

    This list needs to be updated. We should list all the properties we normative require support for, and which specification they are defined in. Come up with a definitive list of CSS specifications we normatively depend on.

    Overall: we should not have to mention the version of CSS everywhere. We don't do that for XSL.

    Remove mentions of XSL and XSLT from this chapter.

    The following SVG properties are not defined in CSS 2.1. 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.

    5.2. Alternative ways to specify styling properties

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

    This section doesn't add anything to the following two sections; consider removing it.

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

    We should state which properties have a corresponding presentation attribute. Discussion. (ACTION-3732 on Cameron)

    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:

    Make a more useful example. At least show the rendering.

    <?xml version="1.0" standalone="no"?>
    <svg xmlns="http://www.w3.org/2000/svg"
         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)

    Remove all of this advantages/limitations discussion.

    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 ([CSS21], 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 CSS 2.1 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.

    ...the CSS 2.1 cascade?

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

    Make UAs that don't support CSS non-conforming instead, and drop the above paragraph?

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

    Referencing the discussion of presentation attribute parsing in the Types chapter.

    Animation of presentation attributes is equivalent to animating the corresponding property.

    5.4. 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:

    Make a more useful example. At least show the rendering.

    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"?>
    <svg xmlns="http://www.w3.org/2000/svg"
         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"?>
    <svg xmlns="http://www.w3.org/2000/svg"
         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.

    If we need to keep this, it should also mention best practice for HTML. In any case, ">" is fine in XML documents; it's "<" and "&" you need to escape.

    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.

    Do we need a conformance class for svg UAs that don't support CSS?

    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"?>
    <svg xmlns="http://www.w3.org/2000/svg"
         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 CSS 2.1 must be supported:

    Note the following about relative URIs and external CSS style sheets: The CSS 2.1 specification says ([CSS21], 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.

    Should be talking about URLs instead, no?

    5.5. 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 ([CSS21], section 4.1.3).

    Because presentation attributes are expressed as XML attributes, their names are case-sensitive and must be given exactly as they are defined. 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".

    Make this markup-agnostic.

    Also we should not require the "correct" case to be used. (ACTION-3276 on Cameron)

    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.

    The above paragraph doesn't add anything.

    SVG 2 Requirement: Consider relaxing case sensitivity of presentation attribute values.
    Resolution: We will make property values case insensitivity.
    Purpose: To align presentation attribute syntax parsing with parsing of the corresponding CSS property.
    Owner: Cameron (ACTION-3276)

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

    This doesn't need a whole section. Remove it, and any interesting information can be moved earlier in the chapter.

    SVG shares the following facilities with CSS and XSL:

    5.7. 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].

    We should suggest @import as a means for referencing external CSS style sheets that will also work in an HTML5 document.

    Where is it defined that an HTML ‘link’ element can cause a style sheet to be loaded and applied to SVG content? Should we allow (an SVG or HTML namespace) ‘link’ element in an SVG document fragment?

    This section can be folded into the "Styling with CSS" one.

    5.8. The ‘style’ element

    SVG 2 Requirement: Add HTML5 ‘style’ element attributes to SVG's style element.
    Resolution: SVG 2 ‘style’ element shall be aligned with the HTML5 ‘style’ element.
    Purpose: To not surprise authors with different behavior for the ‘style’ element in HTML and SVG content.
    Owner: Cameron (ACTION-3277)

    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:

    Name Value Initial value Animatable
    type content-type text/css no

    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 the attribute is not specified, then the style sheet language is assumed to be CSS.

    Name Value Initial value Animatable
    media media (none) no

    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 CSS 2.1 ([CSS21], section 7.3).

    Don't we need to require that the style sheet is applied or not based on the value of this attribute?

    Name Value Initial value Animatable
    title advisory-title (none) no

    (For compatibility with HTML 4 [HTML4].) This attribute specifies an advisory title for the style element.

    The Value columns in the tables above need updating to the new attribute value syntax.

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

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

    Should call into the HTML algorithm that parses a "set of space-separated tokens".

    Should have an attribute definition table.

    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    { fill: green }
    text.warning { fill: yellow }
    text.error   { fill: red }
    

    5.10. 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 CSS.
    Animatable: no.

    Should add an attribute definition table and refer to css-syntax's algorithm to parse a declarations.

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

    Need to ensure that all of the attributes you can put on HTML ‘style’ elements can be used here, such as ‘scope’.

    5.11. Property inheritance

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

    How property inheritance works is defined completely by CSS. Probably most of this section can be removed, or at least condensed and turned into a note.

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

    In SVG, as in CSS 2.1, most elements inherit computed values ([CSS21], 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 ([CSS21], 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.

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

    Should mention SVG inline in HTML.

    Condense this section.

    5.13. Content size properties

    The content size properties specify the size of a CSS box.

    These properties need more of a description. Why are they here?

    These properties should be defined by reference to CSS, rather than repeating a bunch of information here.

    Name: width
    Value: <percentage> | <length> | auto
    Initial: auto
    Applies to: all elements but non-replaced inline elements, table rows, and row groups, in SVG: the foreignObject, image, mask, rect and svg elements
    Inherited: no
    Percentages: refer to width of containing block
    Media: visual
    Computed value: the percentage or 'auto' as specified or the absolute length
    Animatable: yes

    Except for any additional information provided in this specification, the normative definition of the ‘width’ property is in CSS 2.1 ([CSS21], section 10.2).

    Name: height
    Value: <percentage> | <length> | auto
    Initial: auto
    Applies to: all elements but non-replaced inline elements, table columns, and column groups, in SVG: the foreignObject, image, mask, rect and svg elements
    Inherited: no
    Percentages: see prose
    Media: visual
    Computed value: the percentage or 'auto' (see prose under <percentage>) or the absolute length
    Animatable: yes

    Except for any additional information provided in this specification, the normative definition of the ‘height’ property is in CSS 2.1 ([CSS21], section 10.5).

    Is there a need to define 'auto' in more detail specifically for svg/foreignObject?

    5.14. User agent style sheet

    The user agent shall maintain a user agent style sheet ([CSS21], section 6.4) for elements in the SVG namespace for visual media ([CSS21], 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:

    Why is visual media mentioned? The user agent style sheet should just be applied as is, not effectively wrapped in a @media visual rule.

    svg, image, pattern { overflow: hidden }
    

    Should this be for non-root svg elements only for web compat?

    This needs to be reviewed. It should at least use @namespace to cause the rules to match only SVG elements. attr(width) won't do the right thing if the ‘width’ attribute does not use a unit. And what about when the attributes are being animated? Presumably attr() doesn't look at animated values. Discussion. (ACTION-3733 on Cameron)

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

    5.15. DOM interfaces

    5.15.1. Interface SVGStyleElement

    The SVGStyleElement interface corresponds to the style element.
    interface SVGStyleElement : SVGElement {
      attribute DOMString type;
      attribute DOMString media;
      attribute DOMString title;
    };
    
    SVGStyleElement implements LinkStyle;
    Attributes:
    type (DOMString)
    Corresponds to attribute type on the given element.
    media (DOMString)
    Corresponds to attribute media on the given element.
    title (DOMString)
    Corresponds to attribute title on the given element.
    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    Chapter 6: Geometry Properties

    Contents

    Beside SVG's styling properties, SVG also defines geometry properties. Geometry properties describe the position and dimension of the graphics elements circle, ellipse, rect, image, foreignObject and the elements mask, svg.

    6.1. Horizontal center coordinate: The ‘cx’ property

    Name: cx
    Value: <length> | <percentage>
    Initial: 0
    Applies to: circle and ellipse
    Inherited: no
    Percentages: refer to the size of the current viewport (see Units)
    Media: visual
    Computed value: absolute length or percentage
    Animatable: yes

    The ‘cx’ property describes the horizontal center coordinate of the position of the element.

    6.2. Vertical center coordinate: The ‘cy’ property

    Name: cy
    Value: <length> | <percentage>
    Initial: 0
    Applies to: circle and ellipse
    Inherited: no
    Percentages: refer to the size of the current viewport (see Units)
    Media: visual
    Computed value: absolute length or percentage
    Animatable: yes

    The ‘cy’ property describes the vertical center coordinate of the position of the element.

    6.3. Radius: The ‘r’ property

    Name: r
    Value: <length> | <percentage>
    Initial: 0
    Applies to: circle
    Inherited: no
    Percentages: refer to the size of the current viewport (see Units)
    Media: visual
    Computed value: absolute length or percentage
    Animatable: yes

    The ‘r’ property describes the radius of the circle element.

    Negative values for ‘r’ are illegal.

    6.4. Horizontal radius: The ‘rx’ property

    Name: rx
    Value: <length> | <percentage>
    Initial: 0
    Applies to: ellipse, rect
    Inherited: no
    Percentages: refer to the size of the current viewport (see Units)
    Media: visual
    Computed value: absolute length or percentage
    Animatable: yes

    The ‘rx’ property describes the horizontal radius of the ellipse element and the curve radius of the rect element.

    Negative values for ‘rx’ are illegal.

    6.5. Vertical radius: The ‘ry’ property

    Name: ry
    Value: <length> | <percentage>
    Initial: 0
    Applies to: ellipse, rect
    Inherited: no
    Percentages: refer to the size of the current viewport (see Units)
    Media: visual
    Computed value: absolute length or percentage
    Animatable: yes

    The ‘ry’ property describes the vertical radius of the ellipse element and the curve radius of the rect element.

    Negative values for ‘ry’ are illegal.

    6.6. Horizontal coordinate: The ‘x’ property

    Name: x
    Value: <length> | <percentage>
    Initial: 0
    Applies to: mask, svg, rect, image, foreignObject
    Inherited: no
    Percentages: refer to the size of the current viewport (see Units)
    Media: visual
    Computed value: absolute length or percentage
    Animatable: yes

    The ‘x’ property describes the horizontal coordinate of the position of the element.

    6.7. Vertical coordinate: The ‘y’ property

    Name: y
    Value: <length> | <percentage>
    Initial: 0
    Applies to: mask, svg, rect, image, foreignObject
    Inherited: no
    Percentages: refer to the size of the current viewport (see Units)
    Media: visual
    Computed value: absolute length or percentage
    Animatable: yes

    The ‘y’ property describes the vertical coordinate of the position of the element.

    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    Chapter 7: Coordinate Systems, Transformations and Units

    Contents

    7.1. Introduction

    canvas
    A infinite surface onto which graphics elements are drawn.
    SVG viewport
    The SVG viewport within the 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.
    user units
    A coordinate value or length expressed in user units represents a coordinate value or length in the current local coordinate system. Thus, 10 user units represents a length of 10 units in the current user coordinate system. If not specified otherwise, one user unit is also equal to one CSS pixel in current local coordinate system.
    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 SVG viewport. See The initial viewport and Establishing a new viewport.

    For all media, the 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 ([CSS21], section 7.3.1) the SVG viewport is the viewing area where the user sees the SVG content.

    The above paragraph and definitions need to be merged.

    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 SVG viewport, an initial viewport coordinate system and an initial local 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 CSS pixel in the SVG viewport. (See Initial coordinate system.)

    New SVG viewports 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 relative to a particular rectangular area.

    7.2. The initial viewport

    SVG content can 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’ presentation attributes on the outermost svg element. If SVG is embedded within a containing element.

    The ‘width’ presentation 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’ presentation attribute on the outermost svg element establishes the viewport's height.

    If the ‘width’ or ‘height’ presentation 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">
          <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 local 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 CSS 2.1 ([CSS21], section 4.3.2) in the SVG 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 [CSS21] 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 CSS 2.1 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 CSS 2.1 ([CSS21], 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"?>
    <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 — SVG's initial coordinate system

    Example InitialCoords

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

    7.4. The ‘transform’ property

    See the CSS3 Transforms spec for the description of the ‘transform’ property [CSS3TRANSFORMS].

    7.5. The ‘viewBox’ attribute

    Name Value Initial value Animatable
    viewBox [<min-x> <min-y> <width> <height>] As if not specified. yes
    <min-x>, <min-x>, <width>, <height> = <number>

    Transform on the svg element is a bit special due to the viewBox attribute. The transform should be applied as if the svg had a parent element with that transform set.

    RESOLUTION: transform property applies conceptually to the outside of the 'svg' element and there is no difference between presentation attribute and style property (in terms of the visual result).

    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"?>
    <svg width="300px" height="200px"
         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 local coordinate system.
           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 local coordinate system 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"?>
    <svg width="300px" height="200px"
         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"?>
    <svg width="150px" height="200px"
         xmlns="http://www.w3.org/2000/svg">
      <g transform="scale(0.1 0.2)">
        <!-- Rest of document goes here -->
      </g>
    </svg>
    

    Note that 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>.

    If both ‘transform’ (or patternTransform) and viewBox are applied to an element two new coordinate systems are established. ‘transform’ establishes the first new coordinate system for the element. viewBox establishes a second coordinate system for all descendants of the element. The first coordinate system is post-multiplied by the second coordinate system.

    Unlike the ‘transform’ property, 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 ‘width’ and ‘height’ presentation attributes and a viewBox attribute, the ‘width’ and ‘height’ represent values in the coordinate system that exists before the viewBox transformation is applied. On the other hand, like the ‘transform’ property, it does establish a new coordinate system for all other attributes and for descendant elements.

    7.6. The ‘preserveAspectRatio’ attribute

    Name Value Initial value Animatable
    preserveAspectRatio <align> <meetOrSlice>? xMidYMid meet yes
    <align> = none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax
    <meetOrSlice> = meet | slice

    Indicates whether or not to force uniform scaling. Applies to all elements that establish a new viewport (see elements that establish viewports), plus the image, marker, pattern and view elements

    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.

    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.

    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 SVG 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. The example creates several new viewports by including svg sub-elements embedded inside the outermost svg element (see Establishing a new viewport).

    <svg width="450px" height="300px"
         xmlns="http://www.w3.org/2000/svg">
      <desc>Example PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc>
      <defs>
    	<g id="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>
    </g>
    </defs>
      <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)"><use href="#smile" /></g>
        <text x="10" y="110">Viewport 1</text>
        <g transform="translate(10,120)"><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>;</g>
        <text x="10" y="180">Viewport 2</text>
        <g transform="translate(20,190)"><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>;</g>
    
        <g id="meet-group-1" transform="translate(100, 60)">
          <text x="0" y="-30">--------------- meet ---------------</text>
          <g><text y="-10">xMin*</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
                 width="50" height="30"><use href="#smile" /></svg></g>
          <g transform="translate(70,0)"><text y="-10">xMid*</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
                 width="50" height="30"><use href="#smile" /></svg></g>
          <g transform="translate(0,70)"><text y="-10">xMax*</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
                 width="50" height="30"><use href="#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><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"
                 width="30" height="60"><use href="#smile" /></svg></g>
          <g transform="translate(50, 0)"><text y="-10">*YMid</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
                 width="30" height="60"><use href="#smile" /></svg></g>
          <g transform="translate(100, 0)"><text y="-10">*YMax</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"
                 width="30" height="60"><use href="#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><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
                 width="30" height="60"><use href="#smile" /></svg></g>
          <g transform="translate(50,0)"><text y="-10">xMid*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
                 width="30" height="60"><use href="#smile" /></svg></g>
          <g transform="translate(100,0)"><text y="-10">xMax*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
                 width="30" height="60"><use href="#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><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
                 width="50" height="30"><use href="#smile" /></svg></g>
          <g transform="translate(70,0)"><text y="-10">*YMid</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"
                 width="50" height="30"><use href="#smile" /></svg></g>
          <g transform="translate(140,0)"><text y="-10">*YMax</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>;
            <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"
                 width="50" height="30"><use href="#smile" /></svg></g>
        </g>   
      </g>
    </svg>
    Example PreserveAspectRatio — demonstrate available options

    Example PreserveAspectRatio

    7.7. Establishing a new SVG viewport

    Note that this section handles the SVG viewport which is different from the term "viewport" in CSS.

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

    The bounds of the new SVG viewport are defined by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes on the element establishing the new SVG 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 SVG 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 SVG 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 SVG viewport.

    Here is an example:

    <?xml version="1.0" standalone="no"?>
    <svg width="4in" height="3in"
         xmlns="http://www.w3.org/2000/svg">
      <desc>This SVG drawing embeds another one,
        thus establishing a new SVG viewport
      </desc>
      <!-- The following statement establishing a new SVG 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 SVG viewports, see Example PreserveAspectRatio.

    The following elements establish new SVG viewports:

    Whether a new SVG viewport also establishes a new additional clipping path is determined by the value of the ‘overflow’ property on the element that establishes the new SVG viewport.

    7.8. Units

    SVG follows the description and definition of common values and units from the CSS Values and Units Module [CSS3VALUES] for attributes, presentation attributes and CSS properties. Each attribute and property must specify the used component value type. Subsequent or extending specifications published by the CSS WG or SVG WG may extend basic data types or add new data types.

    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"?>
    <svg width="400px" height="200px" viewBox="0 0 4000 2000"
         xmlns="http://www.w3.org/2000/svg">
      <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 — demonstrate available options

    Example Units

    The three rectangles on the left demonstrate the use of one of the absolute unit identifiers, the "in" unit (inch). CSS defines 1 inch to be equal to 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. 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.9. Bounding boxes

    bounding box

    The bounding box (or "bbox") of an element is the tightest fitting rectangle aligned with the axes of that element's user coordinate system that entirely encloses it and its descendants.

    Three kinds of bounding boxes can be computed for an element:

    1. The object bounding box is the bounding box that contains only an element's geometric shape. For basic shapes, this is the area that is filled. Unless otherwise specified, this is what is meant by the unqualified term "bounding box".
    2. The stroke bounding box is the bounding box that contains an element's geometric shape and its stroke shape.
    3. The decorated bounding box is the bounding box that contains an element's geometric shape, its stroke shape and its markers.

    Note that the values of the ‘opacity’, ‘visibility’, ‘fill’, ‘fill-opacity’, ‘fill-rule’, ‘stroke-dasharray’ and ‘stroke-dashoffset’ properties on an element have no effect on the bounding box of an element.

    For curved shapes, the bounding box must enclose all portions of the shape along the edge, not just end points. Note that control points for a curve which are not defined as lying along the line of the resulting curve (e.g., the second coordinate pair of a Cubic Bézier command) must not contribute to the dimensions of the bounding box (though those points may fall within the area of the bounding box, if they lie within the shape itself, or along or close to the curve). For example, control points of a curve that are at a further distance than the curve edge, from the non-enclosing side of the curve edge, must be excluded from the bounding box.

    Image showing the object bounding box of a quadratic Bézier curve.

    The path 'M20,50 L35,100 H120 V50 Q70,10 20,50' is shown in light blue. On the left, a correct object bounding box of the path is shown. Note that it does not include the top-most control point of the curve, but it does include all of the blue shape, even the parts that lie outside of the convex hull of the control points.

    Even if an element is not in the rendering tree – due to it being 'display: none', within a defs element, not usually rendered like a symbol element or not currently present in the document tree – it still has a bounding box. A call to getBBox on the element will return the same rectangle as if the element were rendered. However, an element that is not in the rendering tree does not contribute to the bounding box of any ancestor element.

    The following example defines a number of elements. The expected object bounding box for each element with an ID is shown below.

    <svg xmlns="http://www.w3.org/2000/svg">
    
      <title>Bounding Box Calculation</title>
      <desc>Examples of elements with different bounding box results based on context.</desc>
    
      <defs id="defs-1">
         <rect id="rect-1" x="20" y="20" width="40" height="40" fill="blue" />
      </defs>
    
      <g id="group-1">
        <use id="use-1" href="#rect-1" x="10" y="10" />
    
        <g id="group-2" display="none">
          <rect id="rect-2" x="10" y="10" width="100" height="100" fill="red" />
        </g>
      </g>
    </svg>
    Element ID Bounding Box Result
    "defs-1" {0, 0, 0, 0}
    "rect-1" {20, 20, 40, 40}
    "group-1" {30, 30, 40, 40}
    "use-1" {30, 30, 40, 40}
    "group-2" {10, 10, 100, 100}
    "rect-2" {10, 10, 100, 100}

    For text content elements, for the purposes of the bounding box calculation, each glyph must be treated as a separate graphics element. he calculations must assume that all glyphs occupy the full glyph cell. For example, for horizontal text, the calculations must assume that each glyph extends vertically to the full ascent and descent values for the font. An exception to this is when the ‘inline-size’ presentation attribute has been specified on the text element, in which case the element's content area is its bounding box.

    Because declarative or scripted animation can change the shape, size, and position of an element, the bounding box is mutable. Thus, the bounding box for an element shall reflect the current values for the element at the snapshot in time at which the bounding box is requested, whether through a script call or as part of a declarative or linking syntax.

    An element which has zero width, zero height, or both (such as a vertical or horizontal line, or a rect element with a zero ‘width’ or ‘height’) still has a bounding box, with a positive value for the positive dimension, or with '0' for both the width and height if no positive dimension is specified. Similarly, subpaths segments of a path element with zero width and height must be included in that element's geometry for the sake of the bounding box.

    An element with no position specified (such as a path element with a value of (none) for the d attribute) is positioned at the point (0,0) for the purposes of calculating a bounding box.

    Note that elements whose DOM object does not derive from SVGGraphicsElement (such as gradient elements) do not have a bounding box, and thus have no interface to request a bounding box.

    Elements in the rendering tree which reference unresolved resources shall still have a bounding box, defined by the position and dimensions specified in their attributes, or by the initial value for those attributes if no values are supplied. For example, the element <use href="#bad" x="10" y="10"/> would have a bounding box with an x and y of 10 and a width and height of 0.

    The following algorithm defines how to compute a bounding box for a given element. The inputs to the algorithm are:

    Need to define what the union of rectangles with no area means.

    The algorithm to compute the bounding box is as follows, depending on the type of element:

    a shape
    a text content element
    an a element within a text content element
    1. Let box be a rectangle initialized to (0, 0, 0, 0).
    2. Let fill-shape be the equivalent path of element if it is a shape, or a shape that includes each of the glyph cells corresponding to the text within the elements otherwise.

      Need to update this take into account ‘inline-size’ on text.

    3. If fill is true, then set box to the tightest rectangle in the coordinate system space that contains fill-shape.

      The values of the ‘fill’, ‘fill-opacity’ and ‘fill-rule’ properties do not affect fill-shape.

    4. If stroke is true and the element's ‘stroke’ is anything other than none, then set box to be the union of box and the tightest rectangle in coordinate system space that contains the stroke shape of the element, with the assumption that the element has no dash pattern.

      The values of the ‘stroke-opacity’, ‘stroke-dasharray’ and ‘stroke-dashoffset’ do not affect the calculation of the stroke shape.

    5. If markers is true, then for each marker marker rendered on the element:
      1. For each descendant graphics element child of the marker element that defines marker's content:
        1. If child has an ancestor element within the marker that is 'display: none', has a failing conditional processing attribute, or is not an a, g, svg or switch element, then continue to the next descendant graphics element.
        2. Otherwise, set box to be the union of box and the result of invoking the algorithm to compute a bounding box with child as the element, space as the target coordinate space, true for fill, stroke and markers, and clipped for clipped.

          Need to determine whether 'display: none' on the marker element itself has any effect here.

    6. If clipped is true and the value of ‘clip-path’ on element is not none, then set box to be the tighest rectangle in coordinate system space that contains the intersection of box and the clipping path.
    7. Return box.
    a container element
    use
    1. Let box be a rectangle initialized to (0, 0, 0, 0).
    2. Let parent be the container element if it is one, or the root of the use element's shadow tree otherwise.
    3. For each descendant graphics element child of parent:
      1. If child has an ancestor element within parent that is 'display: none', has a failing conditional processing attribute, or is not an a, g, svg or switch element, then continue to the next descendant graphics element.
      2. Otherwise, set box to be the union of box and the result of invoking the algorithm to compute a bounding box with child as the element and the same values for space, fill, stroke, markers and clipped as the corresponding algorithm input values.
    4. Return box.
    canvas
    foreignObject
    iframe
    image
    video
    1. Return the tightest rectangle in coordinate space space that contains the rectangle defined by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes of the element.

      The fill, stroke and markers input arguments to this algorithm do not affect the bounding box returned for these elements.

    The object bounding box, stroke bounding box or decorated bounding box of an element is the result of invoking the bounding box computation algorithm above with the following arguments: element is the element itself; space is the element's user coordinate system; fill is true; stroke is true if we are computing the stroke bounding box or decorated bounding box, and false othwerise; markers is true if we are computing the decorated bounding box, and false otherwise; and clipped is false.

    7.10. 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 object bounding box, by setting a specified attribute to 'objectBoundingBox' on the given element:

    Element Attribute Effect
    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.
    mesh gradientUnits Indicates that the attributes which specify the paint server mesh (x, y) represent fractions or percentages of the bounding box of the element to which the mesh is applied. (Gets ignored if the mesh is a graphics object)
    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 by the extends of the object bounding box of the applicable element.

    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.11. 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 host documents. The intrinsic width and height of the SVG viewport of SVG content must be determined from the ‘width’ and ‘height’ properties. If either of these are not specified, the used value is the initial value 'auto'. Specifically, percentage values do not provide an intrinsic width or height.

    We have the problem that either ‘width’ and ‘height’ are

    Furthermore we can have a intrinsic ratio with viewBox. We need to describe all combinations and what happens in these cases in detail. The current text does not seem sufficient enough to describe all cases.

    The outcome of this should be a intrinsic ratio for all cases.

    The intrinsic aspect ratio of the SVG 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"
         width="10cm" height="5cm">
      ...
    </svg>

    In this example the intrinsic aspect ratio of the SVG 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"
         width="100%" height="50%" viewBox="0 0 200 200">
      ...
    </svg>

    In this example the intrinsic aspect ratio of the outermost SVG 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"
         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"
         width="75%" height="10cm" viewBox="0 0 200 200">
      ...
    </svg>

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

    Add more examples for the new auto value? E.g some of the examples provided by David Vest.

    7.12. DOM interfaces

    7.12.1. 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 DOMMatrixReadOnly matrix;
      readonly attribute float angle;
    
      void setMatrix(DOMMatrixReadOnly matrix);
      void setTranslate(float tx, float ty);
      void setScale(float sx, float sy);
      void setRotate(float angle, float cx, float cy);
      void setSkewX(float angle);
      void setSkewY(float angle);
    };
    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 DOMMatrixReadOnly)

    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(DOMMatrixReadOnly 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. The new matrix for the transformation.
    void setTranslate(float tx, 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.
    void setScale(float sx, 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.
    void setRotate(float angle, float cx, 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.
    void setSkewX(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.
    void setSkewY(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.

    7.12.2. 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’ presentation 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.

    The supported property indices of an SVGTransformList object is all non-negative integers less than the length of the list.

    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 length;
      readonly attribute unsigned long numberOfItems;
    
      void clear();
      SVGTransform initialize(SVGTransform newItem);
      getter SVGTransform getItem(unsigned long index);
      SVGTransform insertItemBefore(SVGTransform newItem, unsigned long index);
      SVGTransform replaceItem(SVGTransform newItem, unsigned long index);
      SVGTransform removeItem(unsigned long index);
      SVGTransform appendItem(SVGTransform newItem);
      SVGTransform createSVGTransformFromMatrix(DOMMatrixReadOnly matrix);
      SVGTransform? consolidate();
      setter void (unsigned long index, SVGTransform newItem);
    };
    Attributes:
    length (readonly unsigned long)
    The number of items in the list.
    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 is read only.
    SVGTransform initialize(SVGTransform newItem)
    Clears all existing current items from the list and re-initializes the list to hold a single item specified by the parameter. If newItem is in a list, then a new SVGTransform object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
    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 is read only.
    SVGTransform getItem(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(SVGTransform newItem, 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, then a new SVGTransform object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
    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 is read only.
    SVGTransform replaceItem(SVGTransform newItem, unsigned long index)
    Replaces an existing item in the list with a new item. If newItem is already in a list, then a new SVGTransform object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
    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 is read only.
    DOMException, code INDEX_SIZE_ERR
    Raised if the index number is greater than or equal to numberOfItems.
    SVGTransform removeItem(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 is read only.
    DOMException, code INDEX_SIZE_ERR
    Raised if the index number is greater than or equal to numberOfItems.
    SVGTransform appendItem(SVGTransform newItem)
    Inserts a new item at the end of the list. If newItem is already in a list, then a new SVGTransform object is created with the same values as newItem and this item is inserted into the list. Otherwise, newItem itself is inserted into the list.
    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 is read only.
    SVGTransform createSVGTransformFromMatrix(DOMMatrixReadOnly 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. 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 is read only.
    setter void (unsigned long index, SVGTransform newItem)
    Replaces the item at index index with newItem. If the list is read only, then a NoModificationAllowedError is thrown.

    7.12.3. Interface SVGAnimatedTransformList

    Used for the various attributes which specify a set of transformations, such as the ‘transform’ presentation attribute which is available for many of SVG's elements, and which can be animated.

    The SVGAnimatedTransformList must only reflect the values of the corresponding presentation attribute. E.g. the ‘transform’ property set by a style attribute or within a style block in a style element is not represented by a SVGAnimatedTransformList.

    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.12.4. 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;
      attribute unsigned short meetOrSlice;
    };
    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 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 is read only.

    7.12.5. 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.
    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    Chapter 8: Paths

    Contents

    8.1. Introduction

    A path represents the outline of a shape which can be filled or stroked. A path can also be used as a clipping path, to describe animation, or position text. A path can be used for more than one of these functions at the same time. (See Filling, Stroking and Paint Servers, Clipping and Masking, Animation ('animateMotion'), and Text on a Path.)

    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), bearing (set a new orientation), 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 connecting to the last moveto) commands. 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.

    The basic shapes are all described in terms of what their equivalent path is, which is what their shape is as a path. (The equivalent path of a path element is simply the path itself.)

    8.2. The ‘path’ element

    path
    Categories:
    Graphics element, markable element, shape element
    Content model:
    Any number of the following elements, in any order:clipPath, marker, mask, script
    Attributes:
    DOM Interfaces:
    Name Value Initial value Animatable
    d svg-path [EBNF] (none) yes

    The definition of the outline of a shape. See Path data. Error processing for svg-path is done according to Path Data Error Handling.

    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 Handling). 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.

    The initial value, (none) indicates that the path element is valid but does not render.

    Name Value Initial value Animatable
    pathLength <number> (none) yes

    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 handling).

    8.3. Path data

    SVG 2 Requirement: Support turtle-graphics-like current rotation in path syntax.
    Resolution: We will add a path rotation command.
    Purpose: Make path rotations easier to animate and pie charts easier to draw.
    Owner: Cameron (ACTION-3125)

    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, bearing, lineto, curveto (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"?>
    <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 — simple example of a 'path'

    Example triangle01

    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. Newlines inside attributes in markup will be normalized to space characters while parsing.

    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.

    Relative path commands are also influenced by the current bearing, which is an angle set by the bearing commands. This allows for paths to be specified using a style of "turtle graphics", where straight line and curved path segments are placed with their starting point at a tangent (or at some other angle) to the current bearing.

    In the tables below, the following notation is used to describe the syntax of a given path command:

    In the description of the path commands, cpx and cpy represent the coordinates of the current point, and cb represents the current bearing.

    The following sections list the commands. Those that draw straight line segments include the lineto commands (L, l, H, h, V and v) and the close path commands (Z and z). These three groups of commands draw curves:

    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:

    Command Name Parameters Description
    M (absolute)
    m (relative)
    moveto (x y)+ Start a new sub-path at the given (x,y) coordinates. 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.

    When a relative m command is used, the position moved to is (cpx + x cos cb + y sin cb, cpy + x sin cb + y cos cb).

    8.3.3. The "closepath" command

    The "closepath" (Z or z) ends the current subpath by connecting it back to its initial point in either of two ways:

    1. If the previous command is complete, that is that all the required coordinate data has been supplied, then an automatic straight line is drawn from the current point to the initial point of the current subpath. This path segment may be of zero length.
    2. If the previous command is missing required coordinate data then the initial point is used to fill in the missing data (but only for the last point or points).

    Examples:

    SVG 2 adds the ability to fill in missing coordinate data with the Z or z command to avoid the need to add a zero length (or very short in the case of relative paths with rounding errors) path segment to close a subpath. This can effect the number of markers drawn and their orientation at the beginning/end of a closed subpath.

    The use of Z or z to replace missing coordinate data with the coordinate of the initial point in a subpath was resolved at the Sydney (2015) meeting.

    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.

    The current bearing does not affect a z command.

    Command Name Parameters Description
    Z or
    z
    closepath (none) Close the current subpath by connecting it back to the current subpath's initial point (see prose above). 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:

    Command Name Parameters Description
    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 lineto x+ Draws a horizontal line from the current point. 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). An H or h command is equivalent to an L or l command with 0 specified for the y coordinate. At the end of the command, the new current point is taken from the final coordinate value.
    V (absolute)
    v (relative)
    vertical lineto y+ Draws a vertical line from the current point. 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). A V or v command is equivalent to an L or l command with 0 specified for the x coordinate. At the end of the command, the new current point is taken from the final coordinate value.

    When a relative l command is used, the end point of the line is (cpx + x cos cb + y sin cb, cpy + x sin cb + y cos cb).

    When a relative h command is used, the end point of the line is (cpx + x cos cb, cpy + x sin cb). This means that an h command with a positive x value draws a line in the direction of the current bearing. When the current bearing is 0, this is a horizontal line in the direction of the positive x-axis.

    When there is a non-zero bearing, a mnemonic for the h command could be "head this distance at the current bearing", rather than "draw a horizontal line".

    When a relative v command is used, the end point of the line is (cpx + y sin cb, cpy + y cos cb).

    8.3.5. The cubic Bézier curve commands

    The cubic Bézier commands are as follows:

    Command Name Parameters Description
    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.

    When a relative c or s command is used, each of the relative coordinate pairs is computed as for those in an m command. For example, the final control point of the curve of both commands is (cpx + x cos cb + y sin cb, cpy + x sin cb + y cos cb).

    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"?>
    <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 — cubic Bézier comamnds in path data

    Example cubic01

    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.6. The quadratic Bézier curve commands

    The quadratic Bézier commands are as follows:

    Command Name Parameters Description
    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.

    When a relative q or t command is used, each of the relative coordinate pairs is computed as for those in an m command. For example, the final control point of the curve of both commands is (cpx + x cos cb + y sin cb, cpy + x sin cb + y cos cb).

    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"?>
    <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 — quadratic Bézier commands in path data

    Example quad01

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

    8.3.7. The elliptical arc curve commands

    SVG 2 Requirement: Make it simpler to draw arcs in SVG path syntax.
    Resolution: Make arcs in paths easier.
    Purpose: To make it easier for authors to write path data with arcs by hand.
    Owner: Cameron (ACTION-3151)

    The elliptical arc commands are as follows:

    Command Name Parameters Description
    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.

    When a relative a command is used, the end point of the arc is (cpx + x cos cb + y sin cb, cpy + x sin cb + y cos cb). The effective value of the x-axis-rotation parameter is also affected by the current bearing: it is computed as x-axis-rotation + cb.

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

    <?xml version="1.0" standalone="no"?>
    <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 — arc commands in path data

    Example arcs01

    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.8. The grammar for path data

    Update for new 'Z'/'z' behavior.

    SVG path data matches the following EBNF grammar.

    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
        | bearing
    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:
        number comma-wsp? number comma-wsp?
            number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair
    bearing:
        ( "B" | "b" ) wsp* bearing-argument-sequence
    bearing-argument-sequence:
        number
        | number comma-wsp? bearing-argument-sequence
    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"
    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"
    

    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.

    If path data not matching the grammar is encountered, then the path data is in error (see Error Handling).

    8.4. Implementation notes

    8.4.1. Error handling in path data

    A conforming SVG user agent must implement path rendering as follows:

    8.5. 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" or "bearing" 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.6. DOM interfaces

    8.6.1. Interface SVGPathElement

    The SVGPathElement interface corresponds to the path element.
    interface SVGPathElement : SVGGeometryElement {
    
      readonly attribute SVGAnimatedNumber pathLength;
    
      float getTotalLength();
      DOMPoint getPointAtLength(float distance);
    };
    Attributes:
    pathLength (readonly SVGAnimatedNumber)
    Corresponds to attribute pathLength on the given path element.
    Operations:
    float getTotalLength()
    Returns the user agent's computed value for the total length of the path using the user agent's distance-along-a-path algorithm, as a distance in the current user coordinate system.
    Returns
    The total length of the path.
    DOMPoint getPointAtLength(float distance)
    Returns the (x,y) coordinate in local coordinate system which is distance units along the path, utilizing the user agent's distance-along-a-path algorithm. The distance shall be clamped to the range [0, total-length-of-path] before passing it to the distance-along-a-path algorithm.

    If no valid path data exists, returns (0,0).

    Parameters
    1. float distance
      The distance along the path, relative to the start of the path, as a distance in the current user coordinate system.
    Returns
    The returned point in local coordinate system.
    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    SVG 2 – 09 July 2015 TopContentsPreviousNextElementsAttributesProperties

    Chapter 9: Basic Shapes

    Contents

    9.1. Introduction and definitions

    basic shape
    shape
    shape elements
    A graphics element that is defined by some combination of straight lines and curves. Specifically: circle, ellipse, line, path, polygon, polyline and rect.

    SVG contains the following set of basic shape elements:

    Mathematically, these shape elements are equivalent to a path element that would construct the same shape. The basic shapes may be stroked, filled and used as clip paths. All of the properties available for path elements also apply to the basic shapes.

    The equivalent path and algorithm to compute the stroke for each shape are defined in the shape sections below.

    9.2. The ‘rect’ element

    The rect element defines a rectangle which is axis-aligned with the current local coordinate system. Rounded rectangles can be achieved by setting appropriate values for attributes ‘rx’ and ‘ry’.

    rect
    Categories:
    Graphics element, shape element
    Content model:
    Any number of the following elements, in any order:clipPath, marker, mask, script
    Attributes:
    Geometry properties:
    DOM Interfaces:

    The ‘x’ and ‘y’ coordinates refer to the left and top edges of the rectangle, in the current user coordinate system.

    The ‘width’ and ‘height’ of the rectangle. A negative value for either attribute is an error (see Error processing). A value of zero for either attribute disables rendering of the element.

    For rounded rectangles, the x- and y-axis radii of the ellipse used to round off the corners of the rectangle. A negative value for either attribute is an error (see Error processing).

    The values used for the x- and y-axis rounded corner radii are determined implicitly if the ‘rx’ or ‘ry’ attributes (or both) are not specified, or are specified but with invalid values. The values are also subject to clamping so that the lengths of the straight segments of the rectangle are never negative. The effective values for ‘rx’ and ‘ry’ are determined by following these steps in order:

    1. Let rx and ry be length values.
    2. If neither ‘rx’ nor ‘ry’ are properly specified, then set both rx and ry to 0. (This will result in square corners.)
    3. Otherwise, if a properly specified value is provided for ‘rx’, but not for ‘ry’, then set both rx and ry to the value of ‘rx’.
    4. Otherwise, if a properly specified value is provided for ‘ry’, but not for ‘rx’, then set both rx and ry to the value of ‘ry’.
    5. Otherwise, both ‘rx’ and ‘ry’ were specified properly. Set rx to the value of ‘rx’ and ry to the value of ‘ry’.
    6. If rx is greater than half of ‘width’, then set rx to half of ‘width’.
    7. If ry is greater than half of ‘height’, then set ry to half of ‘height’.
    8. The effective values of ‘rx’ and ‘ry’ are rx and ry, respectively.

    Mathematically, a rect element is mapped to an equivalent path element as follows: (Note: all coordinate and length values are first converted into local coordinate system coordinates according to Units.)

    Path decomposition resolved during teleconference on June 3rd, 2013.

    Example rect01 shows a rectangle with sharp corners. The rect element is filled with yellow and stroked with navy.

    <?xml version="1.0" standalone="no"?>
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
         xmlns="http://www.w3.org/2000/svg" version="1.1">
      <desc>Example rect01 - rectangle with sharp corners</desc>
    
      <!-- Show outline of canvas using 'rect' element -->
      <rect x="1" y="1" width="1198" height="398"
            fill="none" stroke="blue" stroke-width="2"/>
    
      <rect x="400" y="100" width="400" height="200"
            fill="yellow" stroke="navy" stroke-width="10"  />
    </svg>
    Example rect01 — rectangle with sharp corners

    Example rect01

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

    Example rect02 shows two rounded rectangles. The ‘rx’ specifies how to round the corners of the rectangles. Note that since no value has been specified for the ‘ry’ attribute, it will be assigned the same value as the ‘rx’ attribute.

    <?xml version="1.0" standalone="no"?>
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
         xmlns="http://www.w3.org/2000/svg" version="1.1">
      <desc>Example rect02 - rounded rectangles</desc>
    
      <!-- Show outline of canvas using 'rect' element -->
      <rect x="1" y="1" width="1198" height="398"
            fill="none" stroke="blue" stroke-width="2"/>
    
      <rect x="100" y="100" width="400" height="200" rx="50"
            fill="green" />
    
      <g transform="translate(700 210) rotate(-30)">
        <rect x="0" y="0" width="400" height="200" rx="50"
              fill="none" stroke="purple" stroke-width="30" />
      </g>
    </svg>
    Example rect02 — rounded rectangles expressed in user coordinates

    Example rect02

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

    9.3. The ‘circle’ element

    The circle element defines a circle based on a center point and a radius.

    circle
    Categories:
    Graphics element, shape element
    Content model:
    Any number of the following elements, in any order:clipPath, marker, mask, script
    Attributes:
    Geometry properties:
    DOM Interfaces:

    The ‘cx’ and ‘cy’ attributes define the coordinates of the center of the circle.

    The ‘r’ attribute defines the radius of the circle. A negative value is an error (see Error processing). A value of zero disables rendering of the element.

    Mathematically, a circle element is mapped to an equivalent path element that consists of four elliptical arc segments, each covering a quarter of the circle. The path begins at the "3 o'clock" point on the radius and proceeds in a clock-wise direction (before any transformations).

    Path decomposition resolved during teleconference on June 3rd, 2013.

    Example circle01 consists of a circle element that is filled with red and stroked with blue.

    <?xml version="1.0" standalone="no"?>
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
         xmlns="http://www.w3.org/2000/svg" version="1.1">
      <desc>Example circle01 - circle filled with red and stroked with blue</desc>
    
      <!-- Show outline of canvas using 'rect' element -->
      <rect x="1" y="1" width="1198" height="398"
            fill="none" stroke="blue" stroke-width="2"/>
    
      <circle cx="600" cy="200" r="100"
            fill="red" stroke="blue" stroke-width="10"  />
    </svg>
    Example circle01 — circle filled with red and stroked with blue

    Example circle01

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

    9.4. The ‘ellipse’ element

    The ellipse element defines an ellipse which is axis-aligned with the current local coordinate system based on a center point and two radii.

    ellipse
    Categories:
    Graphics element, shape element
    Content model:
    Any number of the following elements, in any order:clipPath, marker, mask, script
    Attributes:
    Geometry properties:
    DOM Interfaces:

    The ‘cx’ and ‘cy’ coordinates define the center of the ellipse.

    The ‘cx’ and ‘cy’ attributes define the x- and y-axis radii of the ellipse. A negative value for either attribute is an error (see Error processing). A value of zero disables rendering of the element.

    Mathematically, an ellipse element is mapped to an equivalent path element that consists of four elliptical arc segments, each covering a quarter of the ellipse. The path begins at the "3 o'clock" point on the radius and proceeds in a clock-wise direction (before any transformation).

    Path decomposition resolved during teleconference on June 3rd, 2013.

    Example ellipse01 below specifies the coordinates of the two ellipses in the user coordinate system established by the viewBox attribute on the svg element and the ‘transform’ property on the g and ellipse elements. Both ellipses use the default values of zero for the ‘cx’ and ‘cy’ attributes (the center of the ellipse). The second ellipse is rotated.

    <?xml version="1.0" standalone="no"?>
    <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
         xmlns="http://www.w3.org/2000/svg" version="1.1">
      <desc>Example ellipse01 - examples of ellipses</desc>
    
      <!-- Show outline of canvas using 'rect' element -->
      <rect x="1" y="1" width="1198" height="398"
            fill="none" stroke="blue" stroke-width="2" />
    
      <g transform="translate(300 200)">
        <ellipse rx="250" ry="100"
              fill="red"  />
      </g>
    
      <ellipse transform="translate(900 200) rotate(-30)" 
            rx="250" ry="100"
            fill="none" stroke="blue" stroke-width="20"  />
    
    </svg>
    Example ellipse01 — ellipses expressed in user coordinates

    Example ellipse01

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

    9.5. The ‘line’ element

    The line element defines a line segment that starts at one point and ends at another.

    line
    Categories:
    Graphics element, markable element, shape element
    Content model:
    Any number of the following elements, in any order:clipPath, marker, mask, script
    Attributes: