Replace SVG+XML file on the fly

Question

I use Fabric.js to create a canvas. I can save the whole canvas with canvas.toSVG() as SVG+XML data. What I try to achieve is to get a dynamic image of my canvas, when a certain event occurs (in this case it is onclick mybutton).

Now I want to replace the new SVG with the old SVG inside my object tag. My approach for now:

HTML

<input type="button" value="thumbMe" onclick="canvas2svg();" id="refresh" />
<object data="test2.xml" type="image/svg+xml" id="emb1" name="emb1" width="1000">
</object>

JavaScript

function canvas2svg() {
    var elem = document.getElementsByTagName("object")[0],
        copy = elem.cloneNode(),
        newsvg = canvas.toSVG();
    copy.data = testsvg;
    elem.parentNode.replaceChild(copy, elem);
}
document.getElementById('refresh').onclick = canvas2svg;

Problem By running this, the data attribute of my object element looks like the following:

<object data="&lt;?xml version=&quot;1.0&.... and so on... </object>

This is because the whole content of the XML from newsvg is parsed inside the data attribute. All I need is to replace the content inside the object tag. Does anyone know a solution to my problem?

Answer 1

I solved my problem, to create a dynamic thumnail of an Fabric.JS canvas with another approach. See the following code:

HTML

<input type="button" value="thumbMe" onclick="canvas2png();" id="refresh" />    
<img src="placeholder.png" />

JavaScript

function canvas2png() {
var img = canvas.toDataURL("image/png"),
    elem = document.getElementsByTagName("img")[0],
    elem.src = img;
}
document.getElementById('refresh').onclick = canvas2png;

Hope this helps anyone.