How to use svg file for image source in D3

Question

here is the question:

I work with D3. Trying to add an image to node. Rendering file - svg file:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.2/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable- background="new 0 0 400 400" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace"> <path fill="#5DD7FC" d="M0.5,262.094c0,0,52.172,79.049,158.323,77.241c68.433- 2.031,165.549-32.296,191.523-132.123 c0,0,27.893,4.742,47.654-16.939c-26.99,3.727-44.944- 4.743-44.944-4.743s35.346-1.017,43.137-21.908 c-20.89,9.035-46.751,1.355-46.751,1.355S337.245,90.22,262.939"/> </svg> 

so I'm trying to connect it to the image source using this code (right now):

 d3GraphWidget._node.append("image") .attr("xlink:href", "http://localhost:13980/Areas/Widgets/Content/graphwidgetrelated/img/twittericon.svg") .attr("x", -8) .attr("y", -8) .attr("width", 16) .attr("height", 16); 

but I don’t see anything, just a “blank image icon”. When you go directly to the link, the browser will not find the file without problems.

So how to use svg file for image source in D3?

Thanks for any suggestions,

Alex

Answer 1

I assume that you want to insert the svg element into the svg element, the fact is that your code works:

 <svg id="svgEmbed"></svg> <script> d3.select("#svgEmbed").append("image") .attr("xlink:href","https://upload.wikimedia.org/wikipedia/commons/d/d8/Compass_card_(de).svg") .attr("width", 100) .attr("height", 100) </script> 

If you want to use d3 to insert the svg image into the html element, it will be exactly the same:

 <div id="htmlEmbed"></div> <script> d3.select("#htmlEmbed").append("img") .attr("src","http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg") .attr("width", 100) .attr("height", 100) </script> 

jsFiddle: http://jsfiddle.net/wnwfn/44/

Answer 2

The problem with @ChristopherChiche's approach is that it is not possible to access the DOM of the SVG file, which is an important (if not the main) aspect of working with SVG.

Check out this example from Mike Bostock or this discussion on SO.

This will be the code for this example:

 d3.xml("http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; d3.select("#svgEmbed").node().appendChild(xml.documentElement); });