SVG: XML for Drawing

The SVG language provides the <image> element, which can reference other SVG images, as well as PNG and JPEG bitmap images. The syntax for the <image> element is similar to the <rect> element in that it has x, y, width, and height attributes.

The <image> element has the additional attribute xlink:href, which allows you to specify the location of the referenced image. Similar to HTML's href attribute, the xlink:href attribute allows the referenced image to be stored either locally or on the Internet. The code for referencing a bitmap image is as follows:

<image xlink:href="GrandMothersParty-121YO.png" x="340" y="0" width="140" height="160" opacity="0.5"/>

Referencing other SVG images is just as easy and becomes very useful in many application scenarios, such as reusing the same vector symbol on a page or dynamically loading vector images on demand.