This page is Almost Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.


Overview Table

DOM Interface


In the following code example, the a element is used to create a hyperlink using the xlink namespace. The link is attached to the circle element inside an inline SVG element.

Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 and click on the chocolate circle.

It should look like this:

    <!-- Create an SVG object -->
    <svg width="400" height="400">
        <!-- Create a link. -->
        <a xlink:href="">
          <!-- Create a circle. -->
          <circle cx="100" cy="100" r="50" fill="chocolate"/>



Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.

SVG provides an a element to indicate links (also known as hyperlinks or web links). The a element may contain any element that its parent may contain, except itself.

SVG uses XLink for all link definitions (that is, xmlns:xlink="" must be present in the containing svg element). Each link associates exactly two resources, one local and one remote, going from the former to the latter.

A link is defined for each separate rendered element contained within the a element; thus, if the a element contains three circle elements, a link is created for each circle. For each rendered element within an a element, the given rendered element is the local resource (the source anchor for the link).

The remote resource (the destination for the link) is defined by a URL (technically a [ W3C IRI]) specified by the XLink (that is, xlink:href attribute) on the a element. The remote resource may be any web resource (for example, an image, a video clip, a sound bite, a program, another SVG document, an HTML document, an element within the current document, an element within a different document, etc.). By activating these links (by clicking with the mouse, through keyboard input, by voice commands, etc.), users may visit these resources.

Standards information


The SVGAElement object has these events:

  • onload: Occurs when the browser has fully parsed the element and all of its descendants.

The SVGAElement object has these methods:

  • getBBox: Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
  • getCTM: Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
  • getScreenCTM: Gets the transformation matrix from the current user units to the screen coordinate system.
  • getTransformToElement: Gets the transformation matrix that transforms from the user coordinate system on the current element to the user coordinate system on the specified target element.
  • hasExtension: Determines if the specified extension is supported.

The SVGAElement object has these properties:

  • className: Gets the names of the classes that are assigned to this object.
  • externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
  • farthestViewportElement: Gets a value that represents the farthest ancestor svg element.
  • focusable: Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
  • href: Gets an xlink:href attribute of an element.
  • nearestViewportElement: Gets a value that indicates which element established the current viewport.
  • ownerSVGElement: Gets the nearest ancestor svg element.
  • requiredExtensions: Gets a white space-delimited list of required language extensions.
  • requiredFeatures: Gets or sets a white space-delimited list of feature strings.
  • style: Gets a style object.
  • systemLanguage: Gets or sets a comma-separated list of language names.
  • target: Specifies where to open a linked document.
  • transform: Gets the value of a transform attribute.
  • viewportElement: Gets the element that established the current viewport.
  • xmlbase: Gets or sets the base attribute on the element.
  • xmllang: Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
  • xmlspace: Gets or sets a value that indicates whether white space is preserved in character data.