how to use svg file for image source in D3

d3 svg insert image
how to use d3
d3 append image to div
d3 select svg
d3 xml load svg
svg node d3
d3 append svg
d3 background image

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

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/

Load external SVGs with d3 (v5), js. var svg = d3. select('svg') var myimage = svg. append('image') . attr('xlink:href', 'http://lorempixel.com/200/200/') . attr('width', 200) . attr('height', 200) myimage. attr('x', 50) myimage. attr('transform', 'rotate(90)') A file with the SVG file extension is most likely a Scalable Vector Graphics file. Files in this format use an XML -based text format to describe how the image should appear. Since text is used to describe the graphic, an SVG file can be scaled to different sizes without losing quality—in other words, the format is resolution-independent .

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

How to load an external image in SVG with D3.js @ Fabio Franchino, Maybe you want to work with these files adding some code making that you may open the generated SVG file, copy the source code and� The only image formats SVG software must support are JPEG, PNG, and other SVG files. Animated GIF behavior is undefined. SVG files displayed with <image> are treated as an image : external resources aren't loaded, :visited styles aren't applied , and they cannot be interactive.

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

How to inject an external SVG with D3.js @ Fabio Franchino, With these formats, the image file is a binary format containing the information If this same line was drawn using a vector graphics framework, such as SVG, snippet of d3 code used to implement this visualization (not including source files ). SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. Why use SVG at all? Small file sizes that compress well; Scales to any size without losing clarity (except very tiny)

SVG - D3, loading external SVG, you can use with D3. One way is to embed an img tag in your HTML: <body> <img src="tux.svg" width="335"� In this approach you need to generate font from an SVG image using tools like glyphter and add that font file to font folder in your angular project. The font would have a class name and you can access this font in the D3 graph by adding the font class to an xhtml tag inside foreign object tags as shown below:

Best way to load svg file from d3, <script src="http://d3js.org/d3.v3.min.js"></script>. <meta charset="utf-8"> </ head>. <body>. <p>d3 add images</p> can also add svg file here. x: 0,. y: 0,. Create SVG Elements using D3. We had briefly introduced Scalable Vector Graphics (SVG) in our web standards chapter. In this chapter, we will learn about creating SVG elements using D3. SVG provides different shapes like lines, rectangles, circles, ellipses etc.

d3 add images � GitHub, Normally, you'll create your SVG in D3 but to make the example a bit more readable, the SVG is already placed in the document. There are (These styles should be escaped using the <![[CDATA[ The SVG needs to be saved to an image, then read from an canvas element, then saved to an image again. In order to load an image into a svg tag we usually need a reference of the svg first (assuming there's a single svg tag in the html document), with this code: var svg = d3 . select ( 'svg' ) Then, here the script to load an image both from a local or remote path.

Comments
  • 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", "..." )
  • It is interesting that the first option does not work in Chrome, but the second does. In IE it is exactly the opposite
  • 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.