d3 append an image with svg extension

Question

I'm trying to add an svg image with '.svg' extension to my chart (another svg image created with d3).

This is the code:

d3.select("#chart1 svg")
  .append("svg:image")
  .attr("xlink:href", "img/icons/sun.svg")
  .attr("width", 40)
  .attr("height", 40)
  .attr("x", 228)
  .attr("y",53);

As you can see I'm setting "xlink:href" attribute, but d3 changes this to href in the browser:

<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image>

In fact, this code works perfectly if I use png extension. Any idea?

Electronic

I am having issues with that too. Apparently, D3 removes the prefix if the prefix is a known namespace. Here there is more details about namespaces: github.com/mbostock/d3/wiki/Namespaces – Labiche

As long as the attribute is added with setAttributeNS it works just fine in all browsers (and to be clear D3 does this). The missing prefix on the attribute itself is really only an issue if you want document/element serialization to be done in a particular way. – Branle

Looks like this is still a thing today... Has anybody found a solution so far? – Symptomatic

Answer 1

The code should work as is - here you can see an example of attaching an .svg file to d3:

http://jsfiddle.net/am8ZB/

Don't forget that it's possible the picture is actually there but you just can't see it- you should inspect the page using the browser developer tools to see whether the picture has been placed out of the view area (due to your x/y values, for example).

more info on #chart1 would help in this case.

Twoedged

Is it possible to implement the svg into the DOM? – Greening

what is #chart1 ? – Josselyn