Images in SVG (JPEG, PNG, SVG)

By mbystedt on Feb 28, 2014, 11:45:05 PM

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.

The 'image' Element

<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. Green is optional and black required.
The x-axis top-left corner of the image (default: 0)
The y-axis top-left corner of the image (default: 0)
The width of the image (Required)
The height of the image (Required)
The path to the image (Required)
Presentation Attributes
Color, Graphics, Images, Viewports

How to use SVG documents as images in HTML: Adding SVG to Webpages

For the curious: Creating an image with a circular dependency (links to SVG files in a circle) will in the best case not display and in the worst case make the SVG viewer have a fit and die.

Related Topics