O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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=" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required