How Can I Add An Element To The SVG DOM

I have a web page with a jpg image that the user draw an SVG doodle on top of using Raphael. I want to allow the user to save a merged rasterised version of this when they are done

Solution 1:

Here is one way of doing it:

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS(null,'height','200');
svgimg.setAttributeNS(null,'width','200');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', 'myimage.jpg');
svgimg.setAttributeNS(null,'x','10');
svgimg.setAttributeNS(null,'y','10');
svgimg.setAttributeNS(null, 'visibility', 'visible');
$('svg').append(svgimg);