How to export PNG within SVG

Question

I have some trouble to export my SVG which contains a PNG image in it. I'm using D3JS and the following code.

mysvg.append("image")
  .attr("width", 299)
  .attr("height", 168)
  .attr("xlink:href", "image.png")

var html = d3.select("svg")
  .attr("version", 1.1)
  .attr("xmlns", "http://www.w3.org/2000/svg")
  .node().parentNode.innerHTML;
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html);
var img = '<img src="'+imgsrc+'">';
d3.select("#chartRender").html(img);

It seems that an error occurs: Namespace prefix xlink for href on image is not defined. The PNG image is correctly displayed in the SVG container but not in #chartRender

Any idea ?

Update 1 : Drawing the image in a canvas works

canvas = d3.select("body").append("canvas").attr("id", "newCanvas")
  .attr("width", "200px").attr("height", "100px").node()
context = canvas.getContext('2d')
imageObj = new Image()
imageObj.src = params.url
imageObj.onload = -> context.drawImage(imageObj, 0, 0)

But displaying the datas show empty content :(

imageData = canvas.toDataURL("image/png")
d3.select("body").append("img").datum(imageData).attr("src", (d)-> return d)
d3.select("svg").append("image").datum(imageData).attr("height", "100")
  .attr("width", "200").attr("xlink:href", (d)-> return d)

May be related to [D3js: how to truly embed a bitmap into D3js generated SVG code?](http://stackoverflow.com/questions/23795776/) — Hugolpz, May 22 '14 at 11:09
If you reference an svg from an element all external references get blocked by the browsers for security reasons. You need to make the png into a data uri to get this to work in that particular scenario, or use an or <object> to reference the svg. See e.g http://stackoverflow.com/a/20816406/109374.</object> — Erik Dahlström, May 27 '14 at 09:17

rafaelcastrocouto · Answer 1 · 2014-05-22T18:11:33.200

1

You need to add xmlns:xlink to your svg tag.

It should look like this:

<svg width="xxx" height="yyy" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

So just do...

.attr("xmlns:xlink", "http://www.w3.org/1999/xlink")

UPDATE

I created a JSBIN to help us with this. It is working just fine.

var mysvg = d3.select('#mysvg');

var src = 'http://placehold.it/350x150';

mysvg.append("image")
  .attr("width", 350)
  .attr("height", 150)
  .attr("xlink:href", src);

var img = document.createElement('img');
    img.src = src;

document.getElementById("target").appendChild(img);

Does it solve your problem?

edited May 22 '14 at 18:11

answered May 22 '14 at 12:53

rafaelcastrocouto

11,781
3
38
63

Ty for your answer. It doesn't seems to work. The exported graph is now empty :( If I remove the image from the SVG (in the code) then it's working but without the image (obviously) :( – Yves Lange May 22 '14 at 13:36
does your image have a relative path? – rafaelcastrocouto May 22 '14 at 13:42
yes. it's in the root directory and called: image.png – Yves Lange May 22 '14 at 14:04
try set an absolute path ... maybe that's your problem ... anyway, it's another issue right? if it is, then you should post an other question. – rafaelcastrocouto May 22 '14 at 14:13
I don't think that's the problem. I have added what you suggest and still the same problem `Uncaught NamespaceError: Failed to execute 'setAttributeNS' on 'Element': 'http://www.w3.org/2000/xmlns/' is an invalid namespace for attributes.` – Yves Lange May 22 '14 at 14:19
I've updated my question. It's definitely not the path since it can be draw in the Canvas container. – Yves Lange May 22 '14 at 14:24

How to export PNG within SVG

1 Answers1

UPDATE

Linked