14 Images


Images are specified using the <image> element, which includes all relevant attributes from the HTML <img> element and is used in similar ways. Textual descriptions are held in a <desc> sub element, rather than in the alt attribute as with HTML.

The SVG <image> element has the additional attributes x and y (both have default values of zero) to indicate the location of the left/top corner of the image in user space.

The SVG <image> element is defined as an XLink and thus has the attribute href. (Note that the XLink specification is currently under development and is subject to change. The SVG working group will track and rationalize with XLink as it evolves.)

The default values for width and height are 1 user unit. A valid example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990706.dtd">
<svg width="4in" height="3in">
  <desc>This graphic links to an external image
  </desc>
  <image x="200" y="200" style="width: 100px; height: 100px" 
  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/Graphics/SVG/svg-19990706.dtd'>
  <desc>This links to an external image
  </desc>
  <image x="200" y="200" style="width: 100px; height: 100px"
   xml:link = 'simple' show = 'embed' actuate = 'auto'
  href="myimage.png">
    <title>My image</title>
  </image>
</svg>

Download this example

For more information, see the <image> element.