CODEWITHSUNDEEP
javascriptsvgbase64
user2224342
user2224342

Reputation: 85

Create SVG from base64 in javascript

i am new to javascript.

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

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

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

and html:

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

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

I am doing something stupid or just wrong approach?

thanks

Upvotes: 5

Views: 12558

Answers (1)

Sirko
Sirko

Reputation: 74106

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.org/2000/svg", "image");
// new
svgimg.setAttribute( 'width', '100' );
svgimg.setAttribute( 'height', '100' );

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


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

Edited Fiddle

Upvotes: 9

Related Questions