previous next contents properties index

# 6 SVG Document Structure

### Contents

## 6.1 Defining an SVG document fragment: the 'svg' element

### 6.1.1 Overview

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

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

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

The following example shows simple SVG content embedded 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://someplace.org"
           xmlns:svg="http://www.w3.org/2000/svg-20000302-stylable">
       <!-- parent stuff here -->
       <svg:svg width="5cm" height="8cm">
          <svg:ellipse rx="200" ry="130" />
       </svg:svg>
       <!-- ... -->
    </parent>

Download this example

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

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="3in">
      <desc>Four separate rectangles
      </desc>
        <rect width="20" height="60"/>
        <rect width="30" height="70"/>
        <rect width="40" height="80"/>
        <rect width="50" height="90"/>
    </svg>

Download this example

'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 and alter the meaning of CSS unit specifiers. See Establishing a new viewport and Redefining the meaning of CSS unit specifiers.

### 6.1.2 The 'svg' element

    <!ENTITY % svgExt "" >
    <!ELEMENT svg (%descTitleDefs;,metadata?,
                      (path|text|rect|circle|ellipse|line|polyline|polygon|
                       use|image|svg|g|view|switch|a|altGlyphDef|
                       script|symbol|marker|clipPath|mask|
                       linearGradient|radialGradient|pattern|filter|cursor|font|
                       animate|set|animateMotion|animateColor|animateTransform
                       %StylableSVG-StyleElement;
                       %FinalFormSVG-ColorProfileElement;%FinalFormSVG-FontFaceElement;
                       %ceExt;%svgExt;)*) >
    <!ATTLIST svg
      xmlns CDATA #FIXED "%SVGNamespace;"
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      %graphicsElementEvents;
      %documentEvents;
      %testAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      x %Coordinate; #IMPLIED
      y %Coordinate; #IMPLIED
      width %Length; #REQUIRED
      height %Length; #REQUIRED
      viewBox %ViewBoxSpec; #IMPLIED
      preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
      enableZoomAndPanControls %Boolean; "true"
      contentScriptType %ContentType; "text/ecmascript"
      contentStyleType %ContentType; "text/css"
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-ContainerAttrs;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GradientAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs;
      %FinalFormSVG-TextContainerAttrs;
      %FinalFormSVG-TextElementAttrs;
      %FinalFormSVG-ViewportAttrs; >

Attribute definitions:

xmlns [:prefix] = "resource-name"
  Standard XML attribute for identifying an XML namespace. Refer to the "Namespaces in XML" Recommendation [XML-NS].
  Animatable: no.
x = "<coordinate>"
  (Has no meaning or effect on outermost 'svg' elements.) The x-coordinate of one corner of the rectangular region into which an embedded 'svg' element is placed. The default x-coordinate is zero. See Coordinate Systems, Transformations and Units.
  Animatable: yes.
y = "<coordinate>"
  (Has no meaning or effect on outermost 'svg' elements.) The y-coordinate of one corner of the rectangular region into which an embedded 'svg' element is placed. The default y-coordinate is zero. See Coordinate Systems, Transformations and Units.
  Animatable: yes.
width = "<length>"
  For outermost 'svg' elements, the intrinsic width of the SVG document fragment, with length being any valid expression for a length in SVG. For embedded 'svg' elements, the width of the rectangular region into which the 'svg' element is placed.
  Animatable: yes.
height = "<length>"
  For outermost 'svg' elements, the intrinsic height of the SVG document fragment, with length being any valid expression for a length in SVG. For embedded 'svg' elements, the height of the rectangular region into which the 'svg' element is placed.
  Animatable: yes.

Attributes defined elsewhere:
  %langSpaceAttrs;, %graphicsElementEvents;, %documentEvents;, %testAttrs;, viewBox, preserveAspectRatio, enableZoomAndPanControls, contentScriptType, contentStyleType, %StylableSVG-StyleAttribute;.

## 6.2 Grouping and Naming Collections of Drawing Elements: the 'g' element

### 6.2.1 Overview

The 'g' element is the element for grouping and naming collections of drawing elements. If several drawing elements share similar attributes, they can be collected together using a 'g' element. For example:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="3in">
      <desc>Two groups, each of two rectangles
      </desc>
      <g style="fill:red">
        <rect x="100" y="100" width="100" height="100" />
        <rect x="300" y="100" width="100" height="100" />
      </g>
      <g style="fill:blue">
        <rect x="100" y="300" width="100" height="100" />
        <rect x="300" y="300" width="100" height="100" />
      </g>
    </svg>

Download this example

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

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

The following example organizes the drawing elements into two groups and assigns a name to each group:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="3in">
      <desc>Two named groups
      </desc>
      <g id="OBJECT1">
        <rect x="100" y="100" width="100" height="100" />
      </g>
      <g id="OBJECT2">
        <circle cx="150" cy="300" r="25" />
      </g>
    </svg>

Download this example

A 'g' element can contain other 'g' elements nested within it, to an arbitrary depth. Thus, the following is valid SVG:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="3in">
      <desc>Groups can nest
      </desc>
      <g>
         <g>
           <g>
           </g>
         </g>
       </g>
    </svg>

Download this example

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

### 6.2.2 The 'g' element

    <!ENTITY % gExt "" >
    <!ELEMENT g (%descTitleDefs;,
                      (path|text|rect|circle|ellipse|line|polyline|polygon|
                       use|image|svg|g|view|switch|a|altGlyphDef|
                       script|symbol|marker|clipPath|mask|
                       linearGradient|radialGradient|pattern|filter|cursor|font|
                       animate|set|animateMotion|animateColor|animateTransform
                       %StylableSVG-StyleElement;
                       %FinalFormSVG-ColorProfileElement;%FinalFormSVG-FontFaceElement;
                       %ceExt;%gExt;)*) >
    <!ATTLIST g
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      transform %TransformList; #IMPLIED
      %graphicsElementEvents;
      %testAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-ContainerAttrs;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GradientAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs;
      %FinalFormSVG-TextContainerAttrs;
      %FinalFormSVG-TextElementAttrs; >

Attributes defined elsewhere:
  %stdAttrs;, %langSpaceAttrs;, transform, %graphicsElementEvents;, %testAttrs;, %StylableSVG-StyleAttribute;.

## 6.3 References and the 'defs' element

### 6.3.1 Overview

SVG makes extensive use of URI references [URI] to 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)"/>

In SVG, the following facilities allow URI references:

- the 'a' element
- the 'altGlyph' element
- the 'animate' element
- the 'animateColor' element
- the 'animateMotion' element
- the 'animateTransform' element
- the 'clip-path' property
- the 'cursor' element and 'cursor' property
- the 'feImage' element
- the 'fill' property
- the 'filter' element and 'filter' property
- the 'image' element
- the 'linearGradient' element
- the 'marker','marker-start','marker-mid' and 'marker-end properties
- the 'mask' property
- the 'pattern' element
- the 'radialGradient' element
- the 'script' element
- the 'src' descriptor on an @color-profile definition
- the 'stroke' property
- the 'textpath' element
- the 'tref' element
- the 'set' element
- the 'use' element

URI references are defined in either of the following forms:

    <URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#" <elementID> ]    -or-
    <URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#xpointer(id(" <elementID> "))" ]

where <elementID> is the ID of the referenced element.

(Note that the two forms above (i.e., #<elementID> and #xpointer(id(<elementID>))) are formulated in syntaxes compatible with "XML Pointer Language (XPointer)" [XPTR]. These two formulations of URI references are the only XPointer formulations that are required in SVG 1.0 user agents.)

SVG supports two types of URI references:

- local URI references, where the URI references does not contain an <absoluteURI> or <relativeURI> and thus only contains a fragment identifier (i.e., #<elementID> or #xpointer(id<elementID>))
- non-local URI references, where the URI references does contain an <absoluteURI> or <relativeURI>

The following rules apply to the processing of URI references:

- URI references to elements that do not exist shall be treated as invalid references.
- URI references to elements which are inappropriate targets for the given reference shall be treated as invalid references. 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>.

It is recommended that, wherever possible, referenced elements be defined inside of a 'defs' element. Among the elements that are always referenced: 'altGlyphDef', 'clipPath', 'cursor', 'filter', 'linearGradient', 'marker', 'mask', 'pattern', 'radialGradient' and 'symbol'. Defining these elements inside of a 'defs' element promotes understandability of the SVG content and thus promotes accessibility.

### 6.3.2 Specifying if external resources are required

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

Attribute externalResourcesRequired is available on all elements which potentially can reference external resources. It specifies whether referenced resources that are not part of the current document are required.

Attribute definition:

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

This attribute applies to all types of resource references, including style sheets and fonts specified by an @font-face specification. In particular, if an element sets externalResourcesRequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element.

Attribute externalResourcesRequired is inheritable; thus,if set on a container element, its value will apply to the elements within the container which don't specify a value for this attribute.

For externalResourcesRequired: Animatable: yes.

### 6.3.3 URI reference attributes

    <!ENTITY % xlinkRefAttrs
     "xmlns:xlink CDATA #FIXED 'http://www.w3.org/2000/xlink/namespace/'
      xlink:type (simple|extended|locator|arc) 'simple'
      xlink:role CDATA #IMPLIED
      xlink:title CDATA #IMPLIED
      xlink:show (new|embed|replace) 'embed'
      xlink:actuate (onRequest|onLoad) 'onLoad'" >

      xlink:href CDATA #REQUIRED

xmlns [:prefix] = "resource-name"
  Standard XML attribute for identifying an XML namespace. This attribute makes the XLink [XLink] namespace available to the current element. Refer to the "Namespaces in XML" Recommendation [XML-NS].
  Animatable: no.
xlink:type = 'simple'
  Identifies the type of XLink being used. For hyperlinks in SVG, only simple links are available. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:role = '<string>'
  A generic string used to describe the function of the link's content. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:title = '<string>'
  Human-readable text describing the link. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:show = 'new | replace | embed'
  Indicates whether, upon activation of the link, a new view is created for the target of the link, whether the contents of the view are replaced by the target of the link, or whether the referenced resource is incorporated into the current document. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:actuate = 'onRequest | onLoad'
  Indicates whether the contents of the referenced object are incorporated upon user action or automatically (i.e., without user action). Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: no.
xlink:href = "<uri>"
  The location of the referenced object, expressed as a URI reference. Most elements in SVG which has an xlink:href attribute will describe the particular usage rules relevant to that element. Refer to the "XML Linking Language (XLink)" [XLink].
  Animatable: yes.

### 6.3.4 The 'defs' element

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

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

When the current SVG document fragment is rendered as SVG on visual media, graphics elements that are descendants of a 'defs' are not drawn; thus, in this case, the 'display' property does not apply to 'defs' (i.e., there is an implicit 'display:none').

    <!ENTITY % defsExt "" >
    <!ELEMENT defs (
                       path|text|rect|circle|ellipse|line|polyline|polygon|
                       use|image|svg|g|view|switch|a|altGlyphDef|
                       script|symbol|marker|clipPath|mask|
                       linearGradient|radialGradient|pattern|filter|cursor|font|
                       animate|set|animateMotion|animateColor|animateTransform
                       %StylableSVG-StyleElement;
                       %FinalFormSVG-ColorProfileElement;%FinalFormSVG-FontFaceElement;
                       %ceExt;%defsExt;)* >
    <!ATTLIST defs
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      transform %TransformList; #IMPLIED
      %testAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-ContainerAttrs;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GradientAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs;
      %FinalFormSVG-TextContainerAttrs;
      %FinalFormSVG-TextElementAttrs; >

Attributes defined elsewhere:
  %stdAttrs;, %langSpaceAttrs;, %StylableSVG-StyleAttribute;.

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

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN" "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="4in" height="3in">
      <desc>Local URI references within ancestor's 'defs' element.</desc>
      <defs>
        <linearGradient id="Gradient01">
          <stop offset="30%" style="color:#39F"/>
        </linearGradient>
      </defs>
      <rect x="0%" y="0%" width="100%" height="100%"
            style="fill:url(#Gradient01)" />
    </svg>

Download this example

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

## 6.4 The 'desc' and 'title' elements

Each container element or graphics element in an SVG drawing can supply a 'desc' and/or a 'title' description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, 'desc' and 'title' elements are not rendered as part of the graphics. User agents may, however, for example, display the 'title' element as a tooltip, as the pointing device moves over particular elements. Alternate presentations are possible, both visual and aural, which display the 'desc' and 'title' elements but do not display 'path' elements or other graphics elements. This is readilly achieved by using a different (perhaps user) stylesheet. 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.

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

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

Download this example

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

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

Download this example

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

## 6.5 The 'symbol' element

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

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

The key distinctions between a 'symbol' and a 'g' are:

- A 'symbol' element itself is not rendered. Only instances of a 'symbol' element (i.e., a reference to a 'symbol' by a 'use' element) are rendered.
- A 'symbol' element has attributes viewBox and preserveAspectRatio which allow a 'symbol' to scale-to-fit within a rectangular viewport defined by the referencing 'use' element.

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

    <!ENTITY % symbolExt "" >
    <!ELEMENT symbol (%descTitleDefs;,
                      (path|text|rect|circle|ellipse|line|polyline|polygon|
                       use|image|svg|g|switch|a
                       %ceExt;%symbolExt;)*) >
    <!ATTLIST symbol
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      externalResourcesRequired %Boolean; #IMPLIED
      viewBox %ViewBoxSpec; #IMPLIED
      preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-ContainerAttrs;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GradientAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs;
      %FinalFormSVG-TextContainerAttrs;
      %FinalFormSVG-TextElementAttrs; >

Attributes defined elsewhere:
  %stdAttrs;, %langSpaceAttrs;, viewBox, preserveAspectRatio, %StylableSVG-StyleAttribute;.

## 6.6 The 'use' element

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

Unlike 'image', the 'use' element cannot reference entire files.

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

The effect of a 'use' element is as if the contents of the referenced element, along with any property values resulting from the CSS cascade [CSS2-CASCADE] on the referenced element and its contents, 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.

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 its original parents.

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

- The generated content consists of an initial 'svg' element with a copy (deep clone) of the referenced resource within the 'svg'
- The initial 'svg' element carries along with it the "cascaded" property values on the 'use' element which result from the CSS cascade [CSS2-CASCADE]. 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/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.
- Except for the href/XLink attributes, which are stripped, all other attributes that had been on the 'use' element are transferred to the initial 'svg' element.
- If the x, y, width and height attributes are not specified on the 'use', the default values for x, y, width and height are transferred to the 'svg'.
- If the 'use' has a transform attribute, then the user agent applies the transform attribute on the 'svg' as if a 'g' element with the given transform attribute encapsulated the initial 'svg' element. This generated 'g' element is ignored/bypassed when applying inheritance rules; thus, the initial 'svg' in the generated content inherits properties from the parent of the 'use', not from the generated 'g' element. (This special case rule is necessary for proper handling the rare case where a 'use' has a 'transform' attribute and the cascade results in a non-inheritable property having a specified value of 'inherit'. See [CSS2-INHERIT].)
- If the referenced element is a 'symbol', then the effect is as if the 'symbol' were renamed to an 'svg' and attributes x, y, width and height were set to 0%, 0%, 100% and 100%, respectively.

Example Use01 below has a simple 'use' on a 'rect'.

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="10cm" height="3cm">
      <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc>
      <defs>
        <rect id="MyRect" width="6cm" height="1cm"/>
      </defs>
      <use x="2cm" y="1cm" xlink:href="#MyRect" />
    </svg>

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"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="10cm" height="3cm">
      <desc>Example Use01-GeneratedContent - Simple case of 'use' on a 'rect'</desc>

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

      <!-- Start of generated content. Replaces 'use' -->
      <svg x="2cm" y="1cm" width="100%" height="100%">
        <rect width="6cm" height="1cm"/>
      </svg>
      <!-- End of generated content -->

    </svg>

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

Example Use02 below has a 'use' on a 'symbol'.

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="10cm" height="3cm">
      <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>
      <use x="4.5cm" y="1cm" width="1cm" height="1cm"
           xlink:href="#MySymbol" />
    </svg>

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"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="10cm" height="3cm">
      <desc>Example Use02-GeneratedContent - 'use' on a 'symbol'</desc>

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

      <!-- Start of generated content. Replaces 'use' -->
      <svg x="4.5cm" y="1cm" width="1cm" height="1cm" >
        <!-- Start of referenced 'symbol'. 'symbol' replaced by 'svg',
             with x,y,width,height=0%,0%,100%,100% -->
        <svg x="0%" y="0%" width="100%" height="100%"
             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 -->
      </svg>
      <!-- End of generated content -->

    </svg>

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

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

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="10cm" height="3cm">
      <desc>Example Use03 - 'use' with a 'transform' attribute</desc>
      <defs>
        <rect id="MyRect" x="0" y="0" width="6cm" height="1cm"/>
      </defs>
      <use xlink:href="#MyRect"
           transform="translate(2cm,.25cm) rotate(10)" />
    </svg>

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"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="10cm" height="3cm">
      <desc>Example Use03-GeneratedContent - 'use' with a 'transform' attribute</desc>

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

      <!-- Start of generated content. Replaces 'use' -->
      <g transform="translate(2cm,.25cm) rotate(10)">
        <svg x="0%" y="0%" width="100%" height="100%">
          <rect x="0" y="0" width="6cm" height="1cm"/>
        </svg>
      </g>
      <!-- End of generated content -->

    </svg>

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

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

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
    <svg width="12cm" height="3cm" viewBox="0 0 1200 300">
      <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 */ svg > path{ visibility: hidden }
        ]]>
      </style>

      <g style="/* rule 11 */ stroke-width: 40">
        <use id="MyUse" xlink:href="#MyPath"
             class="MyUseClass"
             style="/* rule 12 */ stroke-dashoffset:50" />
      </g>
    </svg>

Example Use04

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:

- Rules 7 and 8: CSS selectors only apply to the formal document tree, not on the generated tree; thus, these selectors will not yield a match.
- Rule 9: The generated tree only inherits from the ancestors of the 'use' element and does not inherit from the ancestors of the referenced element; thus, this rule does not affect the generated content.

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

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

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

      <g style="/* rule 11 */ stroke-width:40">

        <!-- Start of generated content. Replaces 'use' -->
        <svg x="0%" y="0%" width="100%" height="100%"
             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" />
        </svg>
        <!-- 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.

    <!ENTITY % useExt "" >
    <!ELEMENT use (%descTitle;,(animate|set|animateMotion|animateColor|animateTransform
                       %geExt;%useExt;)*) >
    <!ATTLIST use
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      transform %TransformList; #IMPLIED
      %graphicsElementEvents;
      %testAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      x %Coordinate; #IMPLIED
      y %Coordinate; #IMPLIED
      width %Length; #IMPLIED
      height %Length; #IMPLIED
      %xlinkRefAttrs;
      xlink:href %URI; #REQUIRED
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-ContainerAttrs;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GradientAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs;
      %FinalFormSVG-TextContainerAttrs;
      %FinalFormSVG-TextElementAttrs;
      %FinalFormSVG-ViewportAttrs; >

Attribute definitions:

x = "<coordinate>"
  The x coordinate of one corner of the rectangular region into which the referenced element is placed. The default x coordinate is "0". See Coordinate Systems, Transformations and Units.
  Animatable: yes.
y = "<coordinate>"
  The y coordinate of one corner of the rectangular region into which the referenced element is placed. The default y coordinate is "0". See Coordinate Systems, Transformations and Units.
  Animatable: yes.
width = "<length>"
  The width of the rectangular region into which the referenced element is placed. The default value is "100%".
  Animatable: yes.
height = "<length>"
  The height of the rectangular region into which the referenced element is placed. The default value is "100%".
  Animatable: yes.
xlink:href = "<uri>"
  A URI reference to an element/fragment within an SVG document.
  Animatable: yes.

Attributes defined elsewhere:
  %stdAttrs;, %langSpaceAttrs;, transform, %graphicsElementEvents;, %testAttrs;, %xlinkRefAttrs;, %StylableSVG-StyleAttribute;.

## 6.7 The 'image' element

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

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

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

    <!ENTITY % imageExt "" >
    <!ELEMENT image (%descTitle;,(animate|set|animateMotion|animateColor|animateTransform
                       %geExt;%imageExt;)*) >
    <!ATTLIST image
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      transform %TransformList; #IMPLIED
      %graphicsElementEvents;
      %testAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      x %Coordinate; #IMPLIED
      y %Coordinate; #IMPLIED
      width %Length; #REQUIRED
      height %Length; #REQUIRED
      %xlinkRefAttrs;
      xlink:href %URI; #REQUIRED
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-ContainerAttrs;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GradientAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs;
      %FinalFormSVG-TextContainerAttrs;
      %FinalFormSVG-TextElementAttrs;
      %FinalFormSVG-ViewportAttrs; >

Attribute definitions:

x = "<coordinate>"
  The x coordinate of one corner of the rectangular region into which the referenced document is placed. The default x coordinate is "0". See Coordinate Systems, Transformations and Units.
  Animatable: yes.
y = "<coordinate>"
  The y coordinate of one corner of the rectangular region into which the referenced document is placed. The default y coordinate is "0". See Coordinate Systems, Transformations and Units.
  Animatable: yes.
width = "<length>"
  The width of the rectangular region into which the referenced document is placed. The default value is 100%.
  Animatable: yes.
height = "<length>"
  The height of the rectangular region into which the referenced document is placed. The default value is "100%".
  Animatable: yes.
xlink:href = "<uri>"
  A URI reference.
  Animatable: yes.

Attributes defined elsewhere:
  %stdAttrs;, %langSpaceAttrs;, transform, %graphicsElementEvents;, %testAttrs;, %xlinkRefAttrs;, %StylableSVG-StyleAttribute;.

A valid example:

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

Download this example

A well-formed example:

    <?xml version="1.0" standalone="yes"?>
    <svg width="4in" height="3in"
     xmlns='http://www.w3.org/2000/svg-20000302-stylable'>
      <desc>This links to an external image
      </desc>
      <image x="200" y="200" width="100px" height="100px"
             xlink:type="simple" xlink:show="embed" xlink:actuate="onLoad"
             xlink:href="myimage.png">
        <title>My image</title>
      </image>
    </svg>

Download this example

## 6.8 Conditional processing

### 6.8.1 Conditional processing overview

SVG contains a 'switch' element along with attributes system-required and system-language to provide an ability to specify alternate viewing depending on the capabilities of a given user agent or the user's language. These features operate with the same semantics as the corresponding features within the SMIL 1.0 Recommendation [SMIL1].

    <!ENTITY % testAttrs
     "system-required NMTOKEN #IMPLIED
      system-language CDATA #IMPLIED" >

Attributes system-required and system-language act as tests and return either true or false results. The 'switch' renders the first of its children for which both attributes test true.

### 6.8.2 The 'switch' element

The 'switch' element evaluates the system-required and system-language attributes on its direct child elements in order, and then processes and renders the first child for which these two 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.

    <!ENTITY % switchExt "" >
    <!ELEMENT switch (%descTitleDefs;,
                      (path|text|rect|circle|ellipse|line|polyline|polygon|
                       use|image|svg|g|switch|a|foreignObject|
                       animate|set|animateMotion|animateColor|animateTransform
                       %ceExt;%switchExt;)*) >
    <!ATTLIST switch
      %stdAttrs;
      %langSpaceAttrs;
      class %ClassList; #IMPLIED
      transform %TransformList; #IMPLIED
      %graphicsElementEvents;
      %testAttrs;
      externalResourcesRequired %Boolean; #IMPLIED
      %StylableSVG-StyleAttribute;
      %FinalFormSVG-ContainerAttrs;
      %FinalFormSVG-FillStrokeAttrs;
      %FinalFormSVG-GradientAttrs;
      %FinalFormSVG-GraphicsAttrs;
      %FinalFormSVG-MarkerAttrs;
      %FinalFormSVG-TextContainerAttrs;
      %FinalFormSVG-TextElementAttrs; >

Attributes defined elsewhere:
  %stdAttrs;, %langSpaceAttrs;, transform, %graphicsElementEvents;, %testAttrs;, %StylableSVG-StyleAttribute;.

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

### 6.8.3 The system-required attribute

Definition of system-required:

system-required = list-of-features
  The value is a comma-separated list of feature strings. Determines whether all of the named features are supported by the user agent. If one of the given features is supported, then the current element and its children are processed; otherwise, the current element and its children are skipped and thus will not be rendered and cannot be referenced by another element.
  Animatable: no.

All feature strings referring to language capabilities begin with "org.w3c.svg". All feature strings referring to SVG DOM capabilities begin with "org.w3c.dom.svg".

The following are the feature strings for the system-required attribute. These same feature strings apply to the hasFeature method call that is part of the SVG DOM's support for the DOMImplementation interface defined in [DOM2-CORE] (see Feature strings for the hasFeature method call).

- The feature string "org.w3c.svg" indicates that the user agent supports at least one of the following (all of which are described subsequently): "org.w3c.svg.lang", "org.w3c.svg.dynamic", "org.w3c.svg.static" or "org.w3c.dom.svg". (Because the feature string "org.w3c.svg" can be ambiguous in some circumstances, it is recommended that more specific feature strings be used.)
- The feature string "org.w3c.svg.lang" indicates that the user agent can parse and process all of the language features defined in this specification. This value indicates that there is no language feature defined in this specification which will cause the user agent to fail in its processing.
- The feature string "org.w3c.svg.static" indicates the availability of all of the language capabililities defined in:
  - Basic Data Types and Interfaces
  - SVG Document Structure
  - Styling
  - Coordinate Systems, Transformations and Units
  - Paths
  - Basic Shapes
  - Text
  - Painting: Filling, Stroking and Marker Symbols
  - Color
  - Gradients and Patterns
  - Clipping, Masking and Compositing
  - Filter Effects
  - Fonts
  - The 'switch' element
  - The system-required attribute
  - The system-language attribute
  For SVG viewers, "org.w3c.svg.static" indicates that the viewer can process and render successfully all of the language features listed above.
- The feature string "org.w3c.dom.svg.static" indicates the availability of all of the DOM interfaces and methods that correspond to the language features for "org.w3c.svg.static".
- The feature string "org.w3c.svg.animation" includes all of the language capabilities defined for "org.w3c.svg.static" plus the availability of all of the language capabililities defined in Animation. For SVG viewers running on media capable of rendering time-based material, such as displays, "org.w3c.svg.animation" indicates that the viewer can process and render successfully all of the corresponding language features.
- The feature string "org.w3c.dom.svg.animation" corresponds to the availability of DOM interfaces and methods that correspond to the language features for "org.w3c.svg.animation".
- The feature string "org.w3c.svg.dynamic" includes all of the language capabilities defined for "org.w3c.svg.animation" plus the availability of all of the language capabililities and DOM interfaces defined in Relationship with DOM2 events, Linking and Interactivity and Scripting. For SVG viewers running on media capable of rendering time-based material, such as displays, "org.w3c.svg.dynamic" indicates that the viewer can process and render successfully all of the corresponding language features.
- The feature string "org.w3c.dom.svg.dynamic" corresponds to the availability of DOM interfaces and methods that correspond to the language features for "org.w3c.svg.dynamic".
- The feature string "org.w3c.svg.all" corresponds to the availability of all of the language capabilities defined in this specification.
- The feature string "org.w3c.dom.svg.all" corresponds to the availability of all of the DOM interfaces defined in this specification.

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 system-required, the attribute returns "false".

system-required is often used in conjunction with the 'switch' element. If the system-required is used in other situations, then it represented a simple switch on the given element whether to render the element or not.

### 6.8.4 The system-language attribute

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

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.

Further description of the system-language attribute can be found at [SMIL10-SYSLANG].

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 system-required, the attribute returns "false".

## 6.9 Common attributes

### 6.9.1 Attributes common to all elements

The id attribute is available on all SVG elements:

    <!ENTITY % stdAttrs
     "id ID #IMPLIED" >

Attribute definitions:

id = "name"
  Standard XML attribute for assigning a unique name to an element. Refer to the the "Extensible Markup Language (XML) 1.0" Recommendation [XML10].
  Animatable: no.

### 6.9.2 The class attribute

Attribute definitions:

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

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

- As a style sheet selector (when an author wishes to assign style information to a set of elements).
- For general purpose processing by user agents.

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

    <!-- English messages -->
    <text class="info" lang="en">Variable declared twice</text>
    <text class="warning" lang="en">Undeclared variable</text>
    <text class="error" lang="en">Bad syntax for variable name</text>

    <!-- French messages -->
    <text class="info" lang="fr">Variable déclarée deux fois</text>
    <text class="warning" lang="fr">Variable indéfinie</text>
    <text class="error" lang="fr">Erreur de syntaxe pour variable</text>

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

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

### 6.9.3 The xml:lang and xml:space attributes

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

    <!ENTITY % langSpaceAttrs
     "xml:lang NMTOKEN #IMPLIED
      xml:space (default|preserve) #IMPLIED" >

Attribute definitions:

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

## 6.10 DOM interfaces

The following interfaces are defined below: SVGDocument, SVGElement, SVGSVGElement, SVGGElement, SVGDefsElement, SVGDescElement, SVGTitleElement, SVGUseElement, SVGImageElement, SVGSymbolElement, SVGSwitchElement, SVGLangSpace, SVGTests, SVGURIReference, GetSVGDocument.

### Interface SVGDocument

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

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

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

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

IDL Definition

      interface SVGDocument : Document, DocumentEvent {
                 attribute DOMString    title;
        readonly attribute DOMString     referrer;
        readonly attribute DOMString      domain;
        readonly attribute DOMString      URL;
        readonly attribute SVGSVGElement rootElement;

        Element getElementById ( in DOMString elementId );
      };

Attributes
  DOMString title
    The title of a document as specified by the title sub-element of the 'svg' root element (i.e., <svg><title>Here is the title</title>...</svg>)
  readonly DOMString referrer
    Returns the URI of the page that linked to this page. The value is an empty string if the user navigated to the page directly (not through a link, but, for example, via a bookmark).
  readonly DOMString domain
    The domain name of the server that served the document, or a null string if the server cannot be identified by a domain name.
  readonly DOMString URL
    The complete URI of the document.
  readonly SVGSVGElement rootElement
    The closest ancestor 'svg' element. If this element is an outermost 'svg' element (i.e., either it is the root element of the document or if its parent is in a different namespace), then this attribute will be null.
Methods
  getElementById
    Returns the Element whose id is given by elementId. If no such element exists, returns null. Behavior is not defined if more than one element has this id.
    Parameters

      in DOMString elementId |  | The unique id value for an element.

    Return value

      Element |  | The matching element.

    No Exceptions

### Interface SVGElement

All of the SVG DOM interfaces that correspond directly to elements in the SVG language (e.g., the SVGPathElement interface corresponds directly to the 'path' element in the language) are derivative from base class SVGElement.

IDL Definition

      interface SVGElement : Element {
                 attribute DOMString id;
        readonly attribute SVGSVGElement ownerSVGElement;
        readonly attribute SVGElement viewportElement;
      };

Attributes
  DOMString id
    The value of the id attribute on the given element.
  readonly SVGSVGElement ownerSVGElement
    The nearest ancestor 'svg' element. Null if this is the given element is the outermost 'svg' element.
  readonly SVGElement viewportElement
    The element which established the current viewport. Often, the nearest ancestor 'svg' element. Null if this is the given element is the outermost 'svg' element.

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

IDL Definition

      interface SVGSVGElement : SVGElement, SVGLangSpace, SVGTests, SVGFitToViewBox, DocumentEvent, EventTarget {
                 attribute DOMString className;
        readonly attribute SVGRect viewport;
        readonly attribute float CSSPixelToMillimeterX;
        readonly attribute float CSSPixelToMillimeterY;
        readonly attribute float ScreenPixelToMillimeterX;
        readonly attribute float ScreenPixelToMillimeterY;
                 attribute boolean useCurrentView;
        readonly attribute SVGViewSpec currentView;
                 attribute boolean enableZoomAndPanControls;
                 attribute float currentScale;
                 attribute SVGPoint currentTranslate;
                 attribute SVGLength x;
                 attribute SVGLength y;
                 attribute SVGLength width;
                 attribute SVGLength height;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
                 FINALFORMSVGViewportAttrs;
      #endif FINALFORMSVG

        unsigned long suspendRedraw ( in unsigned long max_wait_milliseconds );
        void          unsuspendRedraw ( in unsigned long suspend_handle_id )
                        raises( DOMException );
        void          unsuspendRedrawAll (  );
        void          forceRedraw (  );
        void          pauseAnimations (  );
        void          unpauseAnimations (  );
        boolean       animationsPaused (  );
        float         getCurrentTime (  );
        void          setCurrentTime ( in float seconds );
        NodeList      getIntersectionList ( in SVGRect rect, in SVGElement referenceElement )
                        raises( SVGException );
        NodeList      getEnclosureList ( in SVGRect rect, in SVGElement referenceElement )
                        raises( SVGException );
        boolean       checkIntersection ( in SVGElement element, in SVGRect rect )
                        raises( SVGException );
        boolean       checkEnclosure ( in SVGElement element, in SVGRect rect )
                        raises( SVGException );
        void          deSelectAll (  );
        SVGNumber              createSVGNumber (  );
        SVGLength              createSVGLength (  );
        SVGLengthList          createSVGLengthList (  );
        SVGAngle               createSVGAngle (  );
        SVGPoint               createSVGPoint (  );
        SVGPointList           createSVGPointList (  );
        SVGMatrix              createSVGMatrix (  );
        SVGPreserveAspectRatio createSVGPreserveAspectRatio (  );
        SVGRect                createSVGRect (  );
        SVGTransformList       createSVGTransformList (  );
        SVGTransformList createSVGTransformListFromMatrix ( in SVGMatrix matrix );
        SVGTransform           createSVGTransform (  );
        SVGTransform     createSVGTransformFromMatrix ( in SVGMatrix matrix );
        SVGICCColor              createSVGICCColor (  );
        SVGColor              createSVGColor (  );
        SVGPaint              createSVGPaint (  );
        Element         getElementById ( in DOMString elementId );
      };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.
  readonly SVGRect viewport

    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 unit-less 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 layout, then values represent CSS pixels in the coordinate system of the current CSS viewport.) If the parent element does not have a coordinate system, then the user agent should provide reasonable default values for this attribute.

  readonly float CSSPixelToMillimeterX
    Size of a CSS pixel along the X axis of the viewport, using the CSS2 definition of a pixel, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium. On systems where it is impossible to know the size of a pixel, a suitable default pixel size is provided.
  readonly float CSSPixelToMillimeterY
    Corresponding size of a CSS pixel along the Y axis of the viewport.
  readonly float ScreenPixelToMillimeterX
    UI events in DOM level 2 indicate the screen positions at which the given UI event occurred. When the user agent actually knows the physical size of a "screen unit", this attribute will express that information; otherwise, user agents will provide a suitable default value such as .28mm.
  readonly float ScreenPixelToMillimeterY
    Corresponding size of a screen pixel along the Y axis of the viewport.
  boolean useCurrentView
    The initial view (i.e., before zooming and panning) of the current innermost SVG document fragment can be either the "standard" view (i.e., based on attributes on the 'svg' element such as fitBoxToViewport) or to a "custom" view (i.e., a hyperlink into a particular 'view' or other element - see Linking into SVG content: URI fragments and SVG views). If the initial view is the "standard" view, then this attribute is false. If the initial view is a "custom" view, then this attribute is true.
  readonly SVGViewSpec currentView
    The definition of the initial view (i.e., before zooming and panning) of the current innermost SVG document fragment. If the initial view was a "standard" view, then:
    - the values for viewBox and preserveAspectRatio and enableZoomAndPanControls within currentView will match the values for the corresponding DOM attributes that are on SVGSVGElement directly
    - the transform attribute within currentView will be null
    - the transform attribute within currentView will reference the outermost 'svg' element
  boolean enableZoomAndPanControls
    Corresponds to attribute enableZoomAndPanControls on the given 'svg' element.
  float currentScale
    In certain interactive environments, the user can zoom and pan into the current SVG document fragment. The attribute indicates the current scale factor relative to the initial view to take into account user zooming. 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]
  SVGPoint currentTranslate
    The corresponding translation factor that takes into account user zooming and panning.
  SVGLength x
    Corresponds to attribute x on the given 'svg' element.
  SVGLength y
    Corresponds to attribute y on the given 'svg' element.
  SVGLength width
    Corresponds to attribute width on the given 'svg' element.
  SVGLength height
    Corresponds to attribute height on the given 'svg' element.
Methods
  suspendRedraw
    Takes a time-out value which indicates that redraw shall not occur until: (a) the corresponding unsuspendRedraw(suspend_handle_id) call has been made, (b) an unsuspendRedrawAll() call has been made, or (c) its timer has timed out. In environments that do not support interactivity (e.g., print media), then redraw shall not be suspended. suspend_handle_id = suspendRedraw(max_wait_milliseconds) and unsuspendRedraw(suspend_handle_id) must be packaged as balanced pairs. When you want to suspend redraw actions as a collection of SVG DOM changes occur, then precede the changes to the SVG DOM with a method call similar to suspend_handle_id = suspendRedraw(max_wait_milliseconds) and follow the changes with a method call similar to unsuspendRedraw(suspend_handle_id). Note that multiple suspendRedraw calls can be used at once and that each such method call is treated independently of the other suspendRedraw method calls.
    Parameters

      in unsigned long max_wait_milliseconds |  | The amount of time in milliseconds to hold off before redrawing the device. Values greater than 60 seconds will be truncated down to 60 seconds.

    Return value

      unsigned long |  | A number which acts as a unique identifier for the given suspendRedraw() call. This value must be passed as the parameter to the corresponding unsuspendRedraw() method call.

    No Exceptions
  unsuspendRedraw
    Cancels a specified suspendRedraw() by providing a unique suspend_handle_id.
    Parameters

      in unsigned long suspend_handle_id |  | A number which acts as a unique identifier for the desired suspendRedraw() call. The number supplied must be a value returned from a previous call to suspendRedraw()

    No Return Value
    Exceptions

      DOMException |  | This method will raise a DOMException with value NOT_FOUND_ERR if an invalid value (i.e., no such suspend_handle_id is active) for suspend_handle_id is provided.

  unsuspendRedrawAll
    Cancels all currently active suspendRedraw() method calls. This method is most useful at the very end of a set of SVG DOM calls to ensure that all pending suspendRedraw() method calls have been cancelled.
    No Parameters
    No Return Value
    No Exceptions
  forceRedraw
    In rendering environments supporting interactivity, forces the user agent to immediately redraw all regions of the viewport that require updating.
    No Parameters
    No Return Value
    No Exceptions
  pauseAnimations
    Suspends/pauses all currently running animations that are defined within the SVG document fragment corresponding to this 'svg' element, causing the animation clock corresponding to this document fragment to stand still until it is unpaused.
    No Parameters
    No Return Value
    No Exceptions
  unpauseAnimations
    Unsuspends/unpauses currently running animations that are defined within the SVG document fragment, causing the animation clock to continue from the time at which it was suspended.
    No Parameters
    No Return Value
    No Exceptions
  animationsPaused
    Returns true if this SVG document fragment is in a paused state.
    No Parameters
    Return value

      boolean |  | Boolean indicating whether this SVG document fragment is in a paused state.

    No Exceptions
  getCurrentTime
    Returns the current time in seconds relative to the start time for the current SVG document fragment.
    No Parameters
    Return value

      float |  | The current time in seconds.

    No Exceptions
  setCurrentTime
    Adjusts the clock for this SVG document fragment, establishing a new current time.
    Parameters

      in float seconds |  | The new current time in seconds relative to the start time for the current SVG document fragment.

    No Return Value
    No Exceptions
  getIntersectionList
    Returns the list of graphics elements whose rendered content intersects the supplied rectangle, honoring the 'pointer-events' property value on each candidate graphics element.
    Parameters

      in SVGRect rect |  | The test rectangle. The values are in the initial coordinate system for the current 'svg' element.
      in SVGElement referenceElement |  | If not null, then only return elements whose drawing order has them below the given reference element.

    No Return Value
    Exceptions

      SVGException |  | SVG_WRONG_TYPE_ERR: Raised if the parameter is of the wrong type.

  getEnclosureList
    Returns the list of graphics elements whose rendered content is entirely contained within the supplied rectangle, honoring the 'pointer-events' property value on each candidate graphics element.
    Parameters

      in SVGRect rect |  | The test rectangle. The values are in the initial coordinate system for the current 'svg' element.
      in SVGElement referenceElement |  | If not null, then only return elements whose drawing order has them below the given reference element.

    No Return Value
    Exceptions

      SVGException |  | SVG_WRONG_TYPE_ERR: Raised if the parameter is of the wrong type.

  checkIntersection
    Returns true if the rendered content of the given element intersects the supplied rectangle, honoring the 'pointer-events' property value on each candidate graphics element.
    Parameters

      in SVGElement element |  | The element on which to perform the given test.
      in SVGRect rect |  | The test rectangle. The values are in the initial coordinate system for the current 'svg' element.

    No Return Value
    Exceptions

      SVGException |  | SVG_WRONG_TYPE_ERR: Raised if the parameter is of the wrong type.

  checkEnclosure
    Returns true if the rendered content of the given element is entirely contained within the supplied rectangle, honoring the 'pointer-events' property value on each candidate graphics element.
    Parameters

      in SVGElement element |  | The element on which to perform the given test.
      in SVGRect rect |  | The test rectangle. The values are in the initial coordinate system for the current 'svg' element.

    No Return Value
    Exceptions

      SVGException |  | SVG_WRONG_TYPE_ERR: Raised if the parameter is of the wrong type.

  deSelectAll
    Unselects any selected objects, including any selections of text strings and type-in bars.
    No Parameters
    No Return Value
    No Exceptions
  createSVGNumber
    Creates an SVGNumber object outside of any document trees. The object is initialized to the value 0.
    No Parameters
    Return value

      SVGNumber |  | An SVGNumber object.

    No Exceptions
  createSVGLength
    Creates an SVGLength object outside of any document trees. The object is initialized to the value of 0 user units.
    No Parameters
    Return value

      SVGLength |  | An SVGLength object.

    No Exceptions
  createSVGLengthList
    Creates an SVGLengthList object outside of any document trees. The object is initialized to an empty list.
    No Parameters
    Return value

      SVGLengthList |  | An SVGLengthList object.

    No Exceptions
  createSVGAngle
    Creates an SVGAngle object outside of any document trees. The object is initialized to the value 0 degrees (unitless).
    No Parameters
    Return value

      SVGAngle |  | An SVGAngle object.

    No Exceptions
  createSVGPoint
    Creates an SVGPoint object outside of any document trees. The object is initialized to the point (0,0) in the user coordinate system.
    No Parameters
    Return value

      SVGPoint |  | An SVGPoint object.

    No Exceptions
  createSVGPointList
    Creates an SVGPointList object outside of any document trees. The object is initialized to an empty list.
    No Parameters
    Return value

      SVGPointList |  | An SVGPointList object.

    No Exceptions
  createSVGMatrix
    Creates an SVGMatrix object outside of any document trees. The object is initialized to the identity matrix.
    No Parameters
    Return value

      SVGMatrix |  | An SVGMatrix object.

    No Exceptions
  createSVGPreserveAspectRatio
    Creates an SVGPreserveAspectRatio object outside of any document trees. The object is initialized to the values SVG_PRESERVEASPECTRATIO_NONE and SVG_MEETORSLICE_MEET.
    No Parameters
    Return value

      SVGPreserveAspectRatio |  | An SVGPreserveAspectRatio object.

    No Exceptions
  createSVGRect
    Creates an SVGRect object outside of any document trees. The object is initialized such that all values are set to 0 user units.
    No Parameters
    Return value

      SVGRect |  | An SVGRect object.

    No Exceptions
  createSVGTransformList
    Creates an SVGTransformList object outside of any document trees. The object is initialized to an empty list.
    No Parameters
    Return value

      SVGTransformList |  | An SVGTransformList object.

    No Exceptions
  createSVGTransformListFromMatrix
    Creates an SVGTransformList object outside of any document trees. The object is initialized to a list consisting of a single matrix transform (i.e., SVG_TRANSFORM_MATRIX).
    Parameters

      in SVGMatrix matrix |  | The initial transform matrix.

    Return value

      SVGTransformList |  | An SVGTransformList object.

    No Exceptions
  createSVGTransform
    Creates an SVGTransform object outside of any document trees. The object is initialized to an identify matrix transform (SVG_TRANSFORM_MATRIX).
    No Parameters
    Return value

      SVGTransform |  | An SVGTransform object.

    No Exceptions
  createSVGTransformFromMatrix
    Creates an SVGTransform object outside of any document trees. The object is initialized to the given matrix transform (i.e., SVG_TRANSFORM_MATRIX).
    Parameters

      in SVGMatrix matrix |  | The transform matrix.

    Return value

      SVGTransform |  | An SVGTransform object.

    No Exceptions
  createSVGICCColor
    Creates an SVGICCColor object outside of any document trees. The object is initialized to an empty list of color values.
    No Parameters
    Return value

      SVGICCColor |  | An SVGICCColor object.

    No Exceptions
  createSVGColor
    Creates an SVGColor object outside of any document trees. The object is the color (0,0,0) in the sRGB color space, with no alternate ICC color specification.
    No Parameters
    Return value

      SVGColor |  | An SVGColor object.

    No Exceptions
  createSVGPaint
    Creates an SVGPaint object outside of any document trees. The object is initialized to SVG_PAINTTYPE_NONE.
    No Parameters
    Return value

      SVGPaint |  | An SVGPaint object.

    No Exceptions
  getElementById
    Searches this SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an Element whose id is given by elementId. If an Element is found, that Element is returned. If no such element exists, returns null. Behavior is not defined if more than one element has this id.
    Parameters

      in DOMString elementId |  | The unique id value for an element.

    Return value

      Element |  | The matching element.

    No Exceptions

### Interface SVGGElement

The SVGGElement interface corresponds to the 'g' element.

IDL Definition

      interface SVGGElement : SVGElement, SVGTransformable, SVGLangSpace, SVGTests, EventTarget {
                 attribute DOMString className;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
      #endif FINALFORMSVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.

### Interface SVGDefsElement

The SVGDefsElement interface corresponds to the 'defs' element.

IDL Definition

      interface SVGDefsElement : SVGElement, SVGTransformable, SVGLangSpace {
                 attribute DOMString className;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
      #endif FINALFORMSVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.

### Interface SVGDescElement

The SVGDescElement interface corresponds to the 'desc' element.

IDL Definition

      interface SVGDescElement : SVGElement, SVGLangSpace {
                 attribute DOMString className;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.

### Interface SVGTitleElement

The SVGTitleElement interface corresponds to the 'title' element.

IDL Definition

      interface SVGTitleElement : SVGElement, SVGLangSpace {
                 attribute DOMString className;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.

### Interface SVGUseElement

The SVGUseElement interface corresponds to the 'use' element.

IDL Definition

      interface SVGUseElement : SVGElement, SVGTransformable, SVGLangSpace, SVGTests, SVGURIReference, EventTarget {
                 attribute DOMString className;
                 attribute SVGLength x;
                 attribute SVGLength y;
                 attribute SVGLength width;
                 attribute SVGLength height;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
                 FINALFORMSVGViewportAttrs;
      #endif FINALFORMSVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.
  SVGLength x
    Corresponds to attribute x on the given 'use' element.
  SVGLength y
    Corresponds to attribute y on the given 'use' element.
  SVGLength width
    Corresponds to attribute width on the given 'use' element.
  SVGLength height
    Corresponds to attribute height on the given 'use' element.

### Interface SVGImageElement

The SVGImageElement interface corresponds to the 'image' element.

IDL Definition

      interface SVGImageElement : SVGElement, SVGTransformable, SVGLangSpace, SVGTests, SVGURIReference, EventTarget {
                 attribute DOMString className;
                 attribute SVGLength x;
                 attribute SVGLength y;
                 attribute SVGLength width;
                 attribute SVGLength height;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
                 FINALFORMSVGViewportAttrs;
      #endif FINALFORMSVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.
  SVGLength x
    Corresponds to attribute x on the given 'image' element.
  SVGLength y
    Corresponds to attribute y on the given 'image' element.
  SVGLength width
    Corresponds to attribute width on the given 'image' element.
  SVGLength height
    Corresponds to attribute height on the given 'image' element.

### Interface SVGSymbolElement

The SVGSymbolElement interface corresponds to the 'symbol' element.

IDL Definition

      interface SVGSymbolElement : SVGElement, SVGLangSpace, SVGFitToViewBox {
                 attribute DOMString className;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
      #endif FINALFORMSVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.

### Interface SVGSwitchElement

The SVGSwitchElement interface corresponds to the 'switch' element.

IDL Definition

      interface SVGSwitchElement : SVGElement, SVGTransformable, SVGLangSpace, SVGTests, EventTarget {
                 attribute DOMString className;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
      #endif FINALFORMSVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.

### Interface SVGLangSpace

Interface SVGLangSpace defines an interface which applies to all elements which have attributes xml:lang and xml:space.

IDL Definition

      interface SVGLangSpace {
                 attribute DOMString xmllang;
                 attribute DOMString xmlspace;
      };

Attributes
  DOMString xmllang
    Corresponds to attribute xml:lang on the given element.
  DOMString xmlspace
    Corresponds to attribute xml:space on the given element.

### Interface SVGTests

Interface SVGTests defines an interface which applies to all elements which have attributes system-required and system-language.

IDL Definition

      interface SVGTests {
                 attribute DOMString systemRequired;
                 attribute DOMString systemLanguage;
      };

Attributes
  DOMString systemRequired
    Corresponds to attribute system-required on the given element.
  DOMString systemLanguage
    Corresponds to attribute system-language on the given element.

### Interface SVGURIReference

Interface SVGURIReference defines an interface which applies to all elements which have the collection of XLink attributes, such as xlink:href, which define a URI reference.

IDL Definition

      interface SVGURIReference {
                 attribute DOMString xlinkType;
                 attribute DOMString xlinkRole;
                 attribute DOMString xlinkTitle;
                 attribute DOMString xlinkShow;
                 attribute DOMString xlinkActuate;
                 attribute DOMString href;
      };

Attributes
  DOMString xlinkType
    Corresponds to attribute xlink:type on the given element.
  DOMString xlinkRole
    Corresponds to attribute xlink:role on the given element.
  DOMString xlinkTitle
    Corresponds to attribute xlink:title on the given element.
  DOMString xlinkShow
    Corresponds to attribute xlink:show on the given element.
  DOMString xlinkActuate
    Corresponds to attribute xlink:actuate on the given element.
  DOMString href
    Corresponds to attribute xlink:href on the given element.

### Interface GetSVGDocument

In the case where an SVG document is embedded by reference, such as when an XHTML document has an 'object' element whose href (or equivalent) attribute references an SVG document (i.e., a document whose MIME type is "image/svg" and whose root element is thus an 'svg' element), the SVG user agent is required to implement the GetSVGDocument interface for the element which references the SVG document (e.g., the HTML 'object' or comparable referencing elements).

IDL Definition

      interface GetSVGDocument {
        SVGDocument getSVGDocument (  )
                        raises( DOMException );
      };

Methods
  getSVGDocument

    Returns the SVGDocument object for the referenced SVG document.

    No Parameters
    Return value

      SVGDocument |  | The SVGDocument object for the referenced SVG document.

    Exceptions

      DOMException |  | NOT_SUPPORTED_ERR: No SVGDocument object is available.

previous next contents properties index