how to use svg file for image source in D3

Question

here is a question:

I work with D3. Trying to add an image to the node. The render file is 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 am trying to hook it up to the image source using this code (directly for 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 rendered, just an 'empty image icon'. When going directly to the link, the browser finds the file no problem.

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

thanks for any suggestions,

Alex

Answer 1

I guess you want to insert the svg element on a svg element, the thing is that your code seems to work:

<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 a svg image in a html element, it is 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.

Look at this example from Mike Bostock or this discussion on SO.

This would 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);
});

Answer 3

I couldn't get the solution by @elachell to work, but this works perfectly (with D3 v5):

d3.svg("file.svg").then(function(xml) {
  d3.select("#svgEmbed").node().appendChild(xml.documentElement);
});