HTML: Display / copy Base64 image with wrong height

So basically I have a simple base64 image: http://jsfiddle.net/rm5c8o1t

My problem is that it only displays the top. If I just add this to the img tag:

style="height: 300px;"

      

        
        
        
      

    

it will display the same as me. The problem now is when I try to copy it (right click, copy the image) it doesn't work at all in Firefox, and only the top half of it gets copied to Chrome / Opera.

The image is generated in Javascript from SVG as follows:

var svgData = new XMLSerializer().serializeToString(svg[0]);
var img = new Image();
img.src = "data:image/svg+xml;base64," + btoa(svgData);

      

        
        
        
      

    

svg - The jQuery element that appears as intended when trying to add it to a document. The reason I need to have a real image instead of using the svg tag is because I want users to be able to copy the image easily. The app is basically an editor containing thousands of possible background / foreground combinations, so I can't just convert this SVG to an image using an external tool.

What am I doing wrong?

Edit: a more complete jsfiddle: http://jsfiddle.net/p2Lv5sa0