D3js: Hard embedding png into svg element via base64 data uri?

Question

I was successful to convert png images into data uri, then to inject this data uri it into an html element.

//HTML part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
    $("#myImage").attr("src", "data:image/png;base64," + data); // inject data:image in DOM
    // data:[<mime type>][;charset=<charset>][;base64],<encoded data>
})

This proves the data uri is correct.

But for some reason, I could not find any way to use d3js in client side dataviz so the data uri end up displaying the raster image expected. There is something which prevent it to work.

//SVG part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
    var width = 500, height = width/2;
    var svg = d3.select("svg").attr("width",width).attr("style","background:#80A0b4");
        svg.attr(':xmlns','http://www.w3.org/2000/svg') 
           .attr(':xmlns:xlink','http://www.w3.org/1999/xlink');
    var g = svg.append("g").append("image")
        .attr("width", width / 2) 
        .attr(":xlink:href", "data:image/png;base64," + data); // replace link by data URI
})

I suspect some conflict in the native d3js xmlns namespaces or did I made a typo ? There is my fiddle http://jsfiddle.net/xGUsu/106/ . Any idea ?

(Related to Why is my base64-encoded png not visible inside my svg? JS: how to encode an image.png into base64 code for data URI embedding? )

score 6 · Answer 1 · answered Mar 01 '15 at 00:10

Two mistakes:

These lines are not needed and cause an error (see the console):

    svg.attr(':xmlns','http://www.w3.org/2000/svg') 
       .attr(':xmlns:xlink','http://www.w3.org/1999/xlink');

(Besides the : at the front is plain out wrong. xmlns is written without a : in XML)

Secondly you forgot to set a height to your <image> element:

var g = svg.append("g").append("image")
        .attr("width", width / 2) 
        .attr("height", height ) 
        .attr("xlink:href", "data:image/png;base64," + data);

Working Fiddle

D3js: Hard embedding png into svg element via base64 data uri?

1 Answers1