Can not add image inside SVG via jQuery: <image /> tag becomes <img />

Question

I want to add items in an SVG via jQuery. I can well insert tags such as <rect /> or <text /> but I can not insert images with the tag <image />.

This tag becomes <img /> automatically, which can not display an image in SVG: http://jsfiddle.net/G4mJf/

How can I prevent this? If it is impossible, is there another way to insert images in SVG using JavaScript/jQuery.

Answer 1

you should use createElementNS():

var img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttributeNS(null,'height','536');
img.setAttributeNS(null,'width','536');
img.setAttributeNS('http://www.w3.org/1999/xlink','href','https://upload.wikimedia.org/wikipedia/commons/2/22/SVG_Simple_Logo.svg');
img.setAttributeNS(null,'x','10');
img.setAttributeNS(null,'y','10');
img.setAttributeNS(null, 'visibility', 'visible');
$('svg').append(img);

Answer 2

jQuery alone cannot handle SVG manipulation properly, as this answer explains. You should probably be using Raphael, or one of the hacky methods described in the link above.