SVG 'image' element

The <image> element is used to include an image to the current SVG document. If you insert an SVG (svg+xml) image the x, y, width, and height attributes establish the viewport in which the referenced file will be drawn. If you include a raster image it will be rendered into a given rectangle. The <image> element has the following attributes:

  • x and y attributes are the coordinates of the top-left corner of the rectangle into which an image is placed. The default value is '0'.
  • width and height attributes set the width and the height of the rectangle into which an image is placed. The value of '0' disables rendering of the <image> element.
  • xlink:href attribute defines a URI reference of an image.

Here is a simple example:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<rect x="0" y="0" width="200" height="70" fill="lightgrey"/>
<image xlink:href="toplogo.gif" x="10" y="10" width="140" height="40"/>
</svg>

Here is the resulting image: