previous next contents properties index

# Appendix B: SVG's Document Object Model (DOM)

### Contents

This appendix is normative.

## B.1 SVG DOM Overview

This appendix provides an introduction to the SVG DOM and discusses the relationship of the SVG DOM with the Document Object Model (DOM) Level 2 Specification [DOM2]. The specific SVG DOM interfaces that correspond to particular sections of the SVG specification are defined at the end of corresponding chapter in this specification, as follows:

- Basic DOM interfaces
- Styling interfaces
- SVG Document Structure interfaces
- Coordinate Systems, Transformations and Units interfaces
- Paths interfaces
- Basic Shapes interfaces
- Text interfaces
- Painting: Filling, Stroking and Marker Symbols interfaces
- Color interfaces
- Gradients and Patterns interfaces
- Clipping, Masking and Compositing interfaces
- Filter Effects interfaces
- Interactivity interfaces
- Linking interfaces
- Scripting interfaces
- Animation interfaces
- Fonts interfaces
- Metadata interfaces
- Extensibility interfaces

The SVG DOM is compatible with the Document Object Model (DOM) Level 2 Specification [DOM2]. In particular:

- The SVG DOM includes complete support for the DOM2 core [DOM2-CORE]
- Wherever appropriate, the SVG DOM is modeled after and maintains consistency with the DOM for HTML as described in [DOM2-HTML].
- The SVG DOM includes complete support for the DOM2 views [DOM2-VIEWS]
- The SVG DOM includes complete support for the DOM2 stylesheets [DOM2-SHEETS]
- The SVG DOM incorporates relevant aspects of the DOM2 CSS object model [DOM2-CSS]. (For the specific [DOM2-CSS] features that are supported, see Relationship with DOM2 CSS object model.)
- The SVG DOM incorporates relevant aspects of the DOM2 event model [DOM2-EVENTS]. (For the specific [DOM2-EVENTS] features that are supported, see Relationship with DOM2 event model.)
- The optional traversal features described in [DOM2-TRAV] are also optional features within the SVG DOM.
- The range features described in [DOM2-RANGE] are supported by the SVG DOM.

A DOM application can use the hasFeature method of the DOMImplementation interface to verify that the interfaces listed in this section are supported. The list of available interfaces is provided in section Feature strings for the hasFeature method call.

## B.2 Naming Conventions

The SVG DOM follows similar naming conventions to the Document Object Model HTML [DOM2-HTML].

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

For attributes with the CDATA data type, the case of the return value is that given in the source document.

## B.3 Interface SVGException

Exception SVGException

  This exception is raised when a specific SVG operation is impossible to perform.

  IDL Definition

        exception SVGException {
          unsigned short   code;
        };

        // SVGExceptionCode
        const unsigned short SYNTAX_ERR                   = 0;
        const unsigned short SVG_INVALID_MODIFICATION_ERR = 1;
        const unsigned short SVG_NO_GRAPHICS_ELEMENTS     = 2;
        const unsigned short SVG_MATRIX_NOT_INVERTABLE    = 3;
        const unsigned short SVG_WRONG_TYPE_ERR           = 4;
        const unsigned short SVG_INVALID_VALUE_ERR        = 5;

## B.4 Interface SVGDOMImplementation

Interface SVGDOMImplementation

  The `SVGDOMImplementation` interface extends the `DOMImplementation` interface with a method for creating an SVG document instance.

  IDL Definition

        interface SVGDOMImplementation : DOMImplementation {
          SVGDocument  createSVGDocument(in DOMString title);
        };

  Methods
    `createSVGDocument`
      Creates an `SVGDocument` object with no content. No Parameters
      Return Value

      `SVGDocument` |  | A new `SVGDocument` object.

      No Exceptions

## B.5 Feature strings for the hasFeature method call

The feature strings that are available for the hasFeature method call that is part of the SVG DOM's support for the DOMImplementation interface defined in [DOM2-CORE] are the same features strings available for the system-required attribute that is available for many SVG elements.

The version number for the hasFeature method call is "1".

## B.6 Relationship with DOM2 CSS object model

### B.6.1 Introduction

This section describes the relationship between the SVG DOM and the Document Object Model CSS [DOM2-CSS] described in the [DOM2] specification.

### B.6.2 Aural media

For the purposes of aural media, SVG represents a CSS-stylable XML grammar. For user agents that support aural styling [CSS2-AURAL], all of the interfaces defined in [DOM2-CSS] which apply to aural properties must be supported in the DOM.

### B.6.3 Visual media

For visual media [CSS2-VISUAL], the SVG DOM extends [DOM2-CSS].

The SVG DOM supports all of the required interfaces defined in [DOM2-CSS]. All of the interfaces that are optional for [DOM2-CSS] are also optional for the SVG DOM.

The SVG DOM defines the following SVG-specific custom property interfaces, all of which are mandatory for SVG user agents:

- SVGColor
- SVGICCColor
- SVGPaint

[DOM2-CSS] defines a set of extended interfaces [DOM2-CSS-EI]. The following table specifies the type of CSSValue [DOM2-CSSVALUE] used to represent each SVG property that applies to visual media [CSS2-VISUAL]. The table indicates which extended interfaces are mandatory and which are not.

The expectation is that the CSSValue returned from the getPropertyCSSValue method on the CSSStyleDeclaration interface can be cast down, using binding-specific casting methods, to the specific derived interface.

For properties that are represented by a custom interface (the valueType of the CSSValue is CSS_CUSTOM), the name of the derived interface is specified in the table. For properties that consist of lists of values (the valueType of the CSSValue is CSS_VALUE_LIST), the derived interface is CSSValueList. For all other properties (the valueType of the CSSValue is CSS_PRIMITIVE_VALUE), the derived interface is CSSPrimitiveValue.

Property Name | Representation | Mandatory?
'baseline-identifier' | ident |
'baseline-shift' | `null` |
'clip' | rect, ident |
'clip-path' | uri, ident |
'clip-rule' | ident |
'color' | rgbcolor, ident |
'color-interpolation' | ident |
'color-rendering' | ident |
'cursor' | [DOM2-CSS2Cursor] | no
'direction' | ident |
'display' | ident |
'dominant-baseline' | ident |
'enable-background' | ident |
'fill' | SVGPaint | yes
'fill-opacity' | number |
'fill-rule' | ident |
'filter' | uri, ident |
'font' | `null` |
'font-family' | list of strings and idents |
'font-size' | ident, length, percentage |
'font-size-adjust' | number, ident |
'font-stretch' | ident |
'font-style' | ident |
'font-variant' | ident |
'font-weight' | ident |
'glyph-orientation-horizontal' | ident |
'glyph-orientation-vertical' | ident |
'image-rendering' | ident |
'letter-spacing' | ident, length |
'marker' | `null` |
'marker-end' | uri, ident |
'marker-mid' | uri, ident |
'marker-start' | uri, ident |
'mask' | uri, ident |
'opacity' | number |
'overflow' | ident |
'pointer-events' | ident |
'shape-rendering' | ident |
'stop-color' | SVGColor | yes
'stop-opacity' | number |
'stroke' | SVGPaint | yes
'stroke-dasharray' | ident or list of lengths |
'stroke-dashoffset' | length |
'stroke-linecap' | ident |
'stroke-linejoin' | ident |
'stroke-miterlimit' | length |
'stroke-opacity' | number |
'stroke-width' | length |
'text-anchor' | ident |
'text-decoration' | list of ident |
'text-rendering' | ident |
'unicode-bidi' | ident |
'visibility' | ident |
'word-spacing' | length, ident |
'writing-mode' | ident |

## B.7 Relationship with DOM2 events

The SVG DOM supports the following interfaces and event types from [DOM2-EVENTS]:

- The SVG DOM supports all of the interfaces defined in [DOM2-EVENTS].
- The SVG DOM supports the following UI event types [DOM2-UIEVENTS]:
  - resize
  - scroll (triggered by either scroll or pan user actions)
  - focusin
  - focusout
  - activate
- The SVG DOM supports the following mouse event types [DOM2-MOUSEEVENTS]:
  - click
  - mousedown
  - mouseup
  - mouseover
  - mousemove
  - mouseout
  clientX and clientY parameters for mouse events represent viewport coordinates for the corresponding 'svg' element. relatedNode is the corresponding outermost 'svg' element.
- The SVG DOM supports the following keyboard event types [DOM2-KEYEVENTS]:
  - keypress
  - keydown
  - keyup
- The SVG DOM supports the following mutation event types [DOM2-MUTEVENTS]:
  - DOMSubtreeModified
  - DOMNodeInserted
  - DOMNodeRemoved
  - DOMNodeRemovedFromDocument
  - DOMNodeInsertedIntoDocument
  - DOMAttrModified
  - DOMCharacterDataModified
- The SVG DOM defines the following SVG-specific custom event interfaces, which are compatible with the HTML event types [DOM2-HTMLEVENTS] defined in [DOM2-EVENTS]. These event interfaces are mandatory for SVG user agents:
  - load
  - unload
  - abort
  - error
  Additionally, the SVG DOM defines an additional custom event interface that is not available in the HTML DOM:
  - SVGZoomEvent
- Events can be triggered whenever there is a state change in an animation, such as animation start, animation end or animation repeat. See Interface TimeEvent.

Each SVG element which has at least one event attribute assigned to it in the SVG DTD supports the DOM2 event registration interfaces [DOM2-EVREG] and be registered as an event listener for the corresponding DOM2 event using the event registration interfaces. Thus, for example, if the SVG DTD indicates that a given element supports the "onclick" event attribute, then an event listener for the "click" event can be registered with the given element as the event target.

SVG's animation elements also support the DOM2 event registration interfaces [DOM2-EVREG]. Event listeners for an animation Interface time event such as animation start, animation end or animation repeat can be registered on any of the animation elements.

Event listeners which are established by DOM2 Event registration interfaces [DOM2-EVREG] receive events before any event listeners that correspond to event attributes (see Event attributes) or animations.

In Java, one way that event listeners can be established is to define a class which implements the EventListener interface, such as:

    class MyAction1 implements EventListener {
      void handleEvent(Event evt) {
        // process the event
      }
    }
    // ... later ...
    MyAction1 mc1 = new MyAction1();
    myElement.addEventListener("DOMActivate", mc1, false);

In ECMA Script, one way to establish an event listener is to define a function and pass the name of that function to the addEventListener method:

    function myAction1(evt) {
      // process the event
    }
    // ... later ...
    myElement.addEventListener("DOMActivate", myAction1, false)

In ECMA Script, the character data content of an Event attribute become the definition of the ECMA Script function which gets invoked in response to the event. As with all registered ECMA Script event listener functions, this function receives an Event object as a parameter, and the name of the Event object is evt. For example, it is possible to say:

    <rect onactivate="MyActivateHandler(evt)" .../>

which will pass the Event object evt into function `MyActivateHandler`.

previous next contents properties index