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

jquery, svg

Solution

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);

Problem

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.

Original source

Related problems