Images in SVG (JPEG, PNG, SVG)

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

var xmlns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
var elem = document.createElementNS(xmlns, "image");
 
elem.setAttributeNS(null,"x",0);
elem.setAttributeNS(null,"y",20);
elem.setAttributeNS(null,"width",200);
elem.setAttributeNS(null,"height",180);
elem.setAttributeNS(xlinkns, "xlink:href","cat.png");
 
document.documentElement.appendChild(elem);

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

• Adding SVG to Webpages
• Filter: feImage