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

Question

I am building a svg element in pure Javascript, but I don't manage to add images to it :

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 is my JSFiddle

What are you trying to do? SVG are Scalable Vector Graphics... they are images, however they use coordinates instead of set pixels... Are you trying to draw your own points? Good luck! — Trevor Clarke, Mar 26 '16 at 17:09
Create an image element inside of the svg. https://stackoverflow.com/questions/6249664/does-svg-support-embedding-of-bitmap-images#6250418 — , Mar 26 '16 at 17:11
@user104317 I want to do this in Javascript because the use case is in a angular directive creation. — loloof64, Mar 26 '16 at 17:13

score 2 · Accepted Answer · answered Mar 26 '16 at 17:22

2

You need this to set the href attribute, although why you're calling the variable pngImage when it sets a svg image is beyond me.

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

You're also confused about whether the variable is pngImage or pgnImage, a browser debugger will inform you of that problem.

Like so

answered Mar 26 '16 at 17:22

Robert Longson

118,664
26
252
242

Thank you. I need this feature because I want to import external svg files. The use case is simply : building a chess grid, and import pieces pictures. – loloof64 Mar 26 '16 at 17:26
How about this then? http://stackoverflow.com/questions/27806132/how-to-draw-a-chess-board-in-d3 – Robert Longson Mar 26 '16 at 17:30
Thank you but i really want to do this in plain Javascript. And I nearly achieved. – loloof64 Mar 26 '16 at 17:32
I have googled for hours to find this answer thanks mate! – Hasintha Abeykoon Jan 29 '21 at 15:18

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

1 Answers1