title: Convert very large SVG to PNG using <canvas>
body: <p>I'm trying to convert a large SVG (it's data URL is about 750000 - 1000000 characters) to a PNG by passing it's data url through an image and into a canvas but the image is only loading about 1/4 of the SVG.</p>
  
  <p>Creating via:</p>
  
  <pre><code>var svg_xml = (new XMLSerializer()).serializeToString(svg),
      url = 'data:image/svg+xml;base64,' + btoa(svg_xml);
  
  var img = new Image();
  img.width = 730;
  img.height = 300;
  img.onload = function(){
      var canvas = document.create('canvas');
      canvas.width = 730;
      canvas.height = 300;
  
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, 730, 300);
  
      callbackFn(canvas.toDataURL('image/png');
  }
  img.src = url
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>I've tried implementing canvg to draw the SVG but the DataURL produced results in a blank image:</p>
  
  <pre><code>var svg_xml = (new XMLSerializer()).serializeToString(svg);
  var canvas = document.createElement('canvas');
  canvas.width = 730;
  canvas.height = 300;
  
  var ctx = canvas.getContext('2d');
  ctx.drawSvg(svg_xml, 0, 0, 730, 300);
  callbackFn(canvas.toDataURL('image/png');
  </code></pre>
  
  <p>Is there anything wrong with the method I've used?</p>
  
  <p><strong>Further Edit</strong></p>
  
  <p>I'm now fairly convinced that it's the canvas failing to draw the whole image as I tried implementing a Blob solution to the same effect:</p>
  
  <pre><code>var svg_xml = (new XMLSerializer()).serializeToString(svg),
      blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}),
      url = window.URL.createObjectURL(blob);
  
  var img = new Image();
  img.width = 730;
  img.height = 300;
  img.onload = function(){
      var canvas = document.create('canvas');
      canvas.width = 730;
      canvas.height = 300;
  
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, 730, 300);
  
      window.URL.revokeObjectURL(url);
      callbackFn(canvas.toDataURL('image/png');
  }
  img.src = url   
  </code></pre>
  
  <p>The image again loads fine and going to the URL (before it's revoked) displays the image fine as well.</p>
  
  <p>The length of the canvas dataURL is not consistent so I don't think that's maxing out, is there a way of detecting the canvas size? The application is only supported for Chrome and FireFox. </p>