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

Not a real solution, but in many forums and posts it is suggested to double the namespace attribute to make it work, so maybe give a try to `.attr("xlink:xlink:href", "..." )` — Sirko, Oct 19 '12 at 14:08

Christopher Chiche · Answer 1 · 2015-01-22T21:06:39.083

10

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/

edited Jan 22 '15 at 21:06

answered May 09 '13 at 06:24

Christopher Chiche

15,075
9
59
98

It is interesting that the first option does not work in Chrome, but the second does. In IE it is exactly the opposite – elachell Jan 22 '15 at 20:52
I fixed the html one that did not work on Chrome. Thanks for pointing out the issue. I did not look into the IE one yet but I suspect that IE does not support SVG well. – Christopher Chiche Jan 22 '15 at 21:08

score 9 · Answer 2 · edited May 23 '17 at 11:47

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

edited May 23 '17 at 11:47

Community

1
1

answered Aug 08 '16 at 11:51

elachell

2,527
1
26
25

Need to make sure your source has CORS setup appropriately – Enkode Jun 04 '22 at 03:48

score 5 · Answer 3 · answered Jan 02 '20 at 14:27

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

answered Jan 02 '20 at 14:27

MightyPork

18,270
10
79
133

how to use svg file for image source in D3

3 Answers3

Linked