i am new to javascript.

i want to create SVG from base64. i am trying / but it doesnt show anything.

 var image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
 var svgimg = document.createElementNS("", "image");
 svgimg.setAttributeNS("", 'xlink:href', image);

 document.getElementById("mySvg").appendChild(svgimg);

and html:

 <svg id="mySvg" xmlns="" xmlns:xlink=""></svg>

base64 should be correct, cause i took it from this / example

I am doing something stupid or just wrong approach?

thanks

i am new to javascript.

i want to create SVG from base64. i am trying http://jsfiddle/XTUmV/28/ but it doesnt show anything.

 var image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
 var svgimg = document.createElementNS("http://www.w3/2000/svg", "image");
 svgimg.setAttributeNS("http://www.w3/1999/xlink", 'xlink:href', image);

 document.getElementById("mySvg").appendChild(svgimg);

and html:

 <svg id="mySvg" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink"></svg>

base64 should be correct, cause i took it from this http://jsfiddle/MxHPq/ example

I am doing something stupid or just wrong approach?

thanks

• javascript
• svg
• base64

1 Answer 1

You forgot to give the <image> tag some dimensions:

var image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
var svgimg = document.createElementNS("http://www.w3/2000/svg", "image");
// new
svgimg.setAttribute( 'width', '100' );
svgimg.setAttribute( 'height', '100' );

svgimg.setAttributeNS("http://www.w3/1999/xlink", 'xlink:href', image);


document.getElementById("mySvg").appendChild(svgimg);

Edited Fiddle