How to add an image to a svg element in javascript? -

i building svg element in pure javascript, don't manage add images :

var svgns = "http://www.w3.org/2000/svg";  var svgelement = document.createelementns(svgns, "svg"); svgelement.setattributens(null, "width", 100); svgelement.setattributens(null, "height", 100);  var shape = document.createelementns(svgns, "circle"); shape.setattributens(null, "cx", 25); shape.setattributens(null, "cy", 25); shape.setattributens(null, "r",  20); shape.setattributens(null, "fill", "green");  var pngimage = document.createelementns(svgns, "image"); pgnimage.setattributens(null, "x", 0); pgnimage.setattributens(null, "y", 0); pgnimage.setattributens(null, "width", 100); pgnimage.setattributens(null, "height", 100); pngimage.setattributens(null, "http://www.freedos.org/images/logos/fdfish-glossy-plain.svg")   svgelement.appendchild(shape); svgelement.appendchild(pgnimage);  document.body.appendchild(svgelement); 

here jsfiddle

you need set href attribute, although why you're calling variable pngimage when sets svg image beyond me.

pngimage.setattributens("http://www.w3.org/1999/xlink", "href", "http://www.freedos.org/images/logos/fdfish-glossy-plain.svg") 

you're confused whether variable pngimage or pgnimage, browser debugger inform of problem.

like so