title: HTML: Base64 image displaying/copying with wrong height
body: <p>So, basically I have a simple base64 image like this: <a href="http://jsfiddle.net/rm5c8o1t" rel="nofollow">http://jsfiddle.net/rm5c8o1t</a></p>
  
  <p>My problem is that it only displays the upper half of it. If I simply add this to the img tag:</p>
  
  <pre><code>style="height: 300px;"
  </code></pre>
  
  <p>it will display as I want it too. The issue now is when I try to copy it (right-click, copy image), it doesn't work at all on Firefox, and only the upper half part of it is copied on Chrome/Opera.</p>
  
  <p>The image is generated in Javascript from SVG as follows:</p>
  
  <pre><code>var svgData = new XMLSerializer().serializeToString(svg[0]);
  var img = new Image();
  img.src = "data:image/svg+xml;base64," + btoa(svgData);
  </code></pre>
  
  <p>svg being a jQuery element, which displays as intended when trying to append it to the document. The reason why I need to have an actual image instead of just using the svg tag is that I want users to be able to copy the image easily. The app is basically an editor that contains thousands of possible background/foreground combinations, so I can't simply convert this SVG to an image with an external tool.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Edit: More complete jsfiddle: <a href="http://jsfiddle.net/p2Lv5sa0" rel="nofollow">http://jsfiddle.net/p2Lv5sa0</a></p>