title: Convert dynamic SVG to downloadable PNG in IE
body: <p><strong>Goal - using the client-side:</strong> </p>
  
  <p>Convert a dynamic SVG drawing (<em>created using d3js</em>) to a downloadable PNG image and works using Internet Explorer.</p>
  
  <p><strong>Accomplished:</strong></p>
  
  <p>Achieved in Chrome, no problem. Once I have the PNG DataURI it is easily converted to a downloadable PNG blob.</p>
  
  <p>Unfortunately in IE running the same code produces a SecurityException, it fails when I try to convert the canvas to the PNG DataURI (<em>canvas.toDataURL</em>).</p>
  
  <p>Apparently this is an active <a href="https://connect.microsoft.com/IE/feedback/details/1013555/ie-11-wrongly-throws-securityerror-on-canvas-todataurl-image-png" rel="noreferrer">IE BUG</a> and I've found others on StackExchange with the same issue. I believe it is related to the CORS restrictions applied on images that originate from other domains (<em>and are drawn in a canvas</em>), but my SVG has originated from the local page.   </p>
  
  <p><strong>Thoughts</strong></p>
  
  <p>Wondering if the cause is related to the way I was generating the initial DataURI (<em>data:image/svg+xml</em>) for the SVG drawing that is rendered by the IMG element. </p>
  
  <p>I have tried two alternatives to produce the <em>image/svg+xml</em>, base64 and charset=utf8, but they have not overcome the issue encountered. So wondering if it is the content of the SVG, presently there are no images within the SVG drawing.</p>
  
  <p><strong>Code for reference:</strong></p>
  
  <pre><code>var rawSvg = new XMLSerializer().serializeToString(svgElement);
  
  var img3 = new Image();
  document.body.appendChild(img3);
  var canv = document.createElement("canvas");
  var canv_ctx = canv.getContext("2d");
  
  img3.onload = function () {
     //-- Image has loaded using the native data:image/svg+xml 
     canv_ctx.drawImage(this, 0, 0);
  
     //-- IE Will throw a Security Exception here...
     console.log(canv.toDataURL("image/png")); 
  };
  
  img3.src = "data:image/svg+xml;base64," + btoa(rawSvg);
  //-- Or utf8
  //img3.src = "data:image/svg+xml;charset=utf8," + encodeURIComponent(rawSvg);
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Tested Canvg's extension to 2d context "<em>drawSvg(...)</em>" which draws onto the canvas. This overcomes the SecurityException when calling toDataURL on the canvas element, however the draw function is not accurate enough for text rendering and placement.  So I am still in need of a solution.  </p>
  
  <p>See example screenshot, <a href="http://i.stack.imgur.com/i3GC7.png" rel="noreferrer">left correct rending using native drawImage and right the incorrect rendering using Canvg's drawSvg</a></p>
  
  <p><strong>Code using Canvg - NB: You'll need to reference the JS</strong></p>
  
  <pre><code>var canvas = document.createElement("canvas"),
      cctx = canvas.getContext("2d");
  var rawSvg = new XMLSerializer().serializeToString(svgClone.node());
  canvas.width = svgWidth;
  canvas.height = svgHeight;
  //cctx.drawImage(this, 0, 0);
  //-- Use Canvg's extension to canvasContext
  cctx.drawSvg(rawSvg);
  //-- This Works on IE - not accurate though
  var dataURL = canvas.toDataURL();
  </code></pre>