Sams Teach Yourself SVG in 24 Hours

Using the image Element

Using images in SVG is similar to using images in HTML. By using an element to reference an image, you can load an external file into your document for display. A familiarity with HTML will actually be helpful, as you will recognize some of the attributes and logic needed to reference and place an external image.

The syntax of the image element is similar to that of the use element. The image element uses the xlink:href attribute to reference an outside image file, the x and y attributes to determine the top left placement of the image, and the width and height attributes to determine the dimensions of the image. Thus, your image tag at its most basic level will appear as

<image xlink:href="imageURL' x="x1' y="y1" width=" ...