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?

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?

• javascript
• image
• svg
• d3.js
• xlink

• 1 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 – Pablo Navarro Commented Sep 21, 2013 at 14:15
• 1 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. – Erik Dahlström Commented Oct 22, 2013 at 11:48
• Looks like this is still a thing today... Has anybody found a solution so far? – Peter Commented Jul 1, 2016 at 12:05

1 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.