Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

SVG Basics – The 'image' Element

The ‘image’ Element

SVG’s image element allows you to render the contents of another file into the SVG document. SVG viewers are required to support PNG, JPEG and SVG format files. The first two are useful when you want to add a bitmap (photographic) image to your document. Images are all displayed as 4 channel (RGBA) so any transparency in the PNG or SVG will be preserved and images with fewer than 4 channels are converted.

Images which are themselves SVG behave like bitmap images. Your document does not inherit (gain) elements from the image’s SVG file and the image’s SVG cannot modify the documents it is added to. Technically, images are parsed separately from the file they are contained in and have their own separate document object model.

<image x=”0″ y=”20″ width=”200″ height=”180″ xlink:href=”cat.png” />
Code 1. Image. The file linked to can be a PNG, JPEG or SVG.