1

Given access to suitable topojson and bitmaps, I use the topoJSON file to generate a SVG viz via D3js. Then I append a bitmap to it via :

// Append bitmap
    svg.append("image")
      .attr("xlink:href", "./myimage.png")
      .attr("width", width)
      .attr("height", height)
      .attr("class", "bg");

But this actually just add a link toward the image. Also, when I select the dataviz DOM, and save it as SVG, I don't have the bitmap binary, but just the bitmap's link.

Is it possible, and how to really embed my .png binary into my SVG DOM via D3js or javascript ?

enter image description here

See also: https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html , where you can try to download the SVG.

Hugolpz
  • 17,296
  • 26
  • 100
  • 187
  • Have you tried drawing the PNG to canvas and saving the dataURI by binding it as data to the svg:image element? – Elijah May 22 '14 at 00:11
  • May be related to [How to export PNG within SVG](http://stackoverflow.com/questions/23804803/) – Hugolpz May 22 '14 at 11:56

1 Answers1

2

This example shows how to draw an image to a canvas element and use the .toDataURL function to get a snapshot of this canvas into a string that you can then use as the xlink:href attribute:

http://bl.ocks.org/emeeks/707681f1f5b4a2063d6e

Hugolpz
  • 17,296
  • 26
  • 100
  • 187
Elijah
  • 4,609
  • 3
  • 28
  • 36
  • 1
    I got it working but generating a canvas, then a snapshot of it create new troubles to my workflow. I have some hints that loading the file, and convert the string to base 64 via `atob()` may work in a more straight forward way. – Hugolpz May 23 '14 at 00:31
  • You may be right, and I'm sure there's a more efficient way, but this is the only one that I have experience with. – Elijah May 23 '14 at 16:42