Can not add image inside SVG via jQuery: tag becomes

Question

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

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.