title: Rasterizing an in-document SVG to Canvas
body: <p>In order to answer <a href="https://stackoverflow.com/questions/5433806/convert-embedded-svg-to-png-in-place">this question</a> properly I thought that I would:</p>
  
  <ol>
  <li>Convert an in-document SVG file to a data URL</li>
  <li>Load it into an <code>&lt;img&gt;</code></li>
  <li>Draw that <code>&lt;img&gt;</code> to a <code>&lt;canvas&gt;</code></li>
  <li>Convert that <code>&lt;canvas&gt;</code> to a PNG data URL</li>
  <li>Load that data URL into an image.</li>
  </ol>
  
  <p>I have an example of this attempt here:<br>
  <a href="http://phrogz.net/SVG/svg_to_png.xhtml" rel="nofollow noreferrer">http://phrogz.net/SVG/svg_to_png.xhtml</a></p>
  
  <p>In Firefox I get <code>(NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]</code> when attempting to draw the image to the canvas in step 3.</p>
  
  <p><strong>Why do I get this error in Firefox, or how do I work around it?</strong></p>
  
  <p>In Chrome I get a <code>SECURITY_ERR</code> exception when I try to call <code>toDataURL()</code> in step 4.</p>
  
  <p><strong>Why would I get this error in Chrome, or how do I work around it?</strong></p>
  
  <p><em>The <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin" rel="nofollow noreferrer">WhatWG specs</a> state that the</em> origin <em>for an image "generated from a data: URL found in another Document or in a script" should be the same as that document. All data in this test is from the same document.</em></p>