This page is In Progress

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

image

Overview Table

DOM Interface
SVGElement

Examples

In the following code example, two images are displayed on the screen. They are the same image but the size and position are determined by the attributes of the image element.

Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see the two images on the screeen.

The images will look like this:



<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <!-- Create an SVG object. -->
    <svg width="400" height="400">
      <!-- Load an image. -->
      <image x="50" y="50" width="100" height="100"
                xlink:href="svg.png"/>
      <image x="150" y="150" width="50" height="50"
                xlink:href="svg.png"/>
    </svg>
  </body>
</html>

Notes

Remarks

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.

Standards information

Members

The SVGImageElement object has these events:

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

The SVGImageElement 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 SVGImageElement object has these properties:

  • className: Gets the names of the classes that are assigned to this object.
  • clipPath: Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
  • 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).
  • height: Gets or sets the height of an element.
  • href: Gets an xlink:href attribute of an element.
  • mask: Sets or retrieves a value that indicates a SVG mask.
  • nearestViewportElement: Gets a value that indicates which element established the current viewport.
  • ownerSVGElement: Gets the nearest ancestor svg element.
  • pointerEvents: Sets or retrieves a value that specifies under what circumstances a given graphics element can be the target element for a pointer event in SVG.
  • preserveAspectRatio: Gets an XML value that indicates whether to force uniform graphic scaling.
  • 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.
  • transform: Gets the value of a transform attribute.
  • viewBox: Gets a value that indicates how a graphic scales to fit a container element.
  • viewportElement: Gets the element that established the current viewport.
  • width: Defines the width of an element.
  • x: Gets or sets the x-coordinate value.
  • 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.
  • y: Gets or sets the y-coordinate value.

Attributions