score:5

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

score:9

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/

score:9

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

Related Query