title: Is it possible to draw multiple SVG's to a canvas?
body: <h2>Background</h2>
  <p>I've got a bunch of <code>svg</code>'s in a document (with <code>rect</code>, <code>path</code>, and whatnot inside each) and I need to draw this out to a downloadable PNG image.  I understand that in order to do this there are two methods: either draw the page's HTML structure to a <code>canvas</code> and then export from there <strong>or</strong> render an SVG and its contents straight onto a <code>canvas</code>.</p>
  <h2>Hypotheses</h2>
  <p>The first hypothesis I tried to render the HTML structure using <a href="http://html2canvas.hertzen.com" rel="noreferrer">html2canvas</a> and only found out that SVG's could not be rendered via an HTML structure at all (due to security issues).  The second hypothesis I tried to render an SVG to canvas via <a href="https://code.google.com/p/canvg/" rel="noreferrer">canvg</a> only to find out that it only allowed for one SVG element to be rendered and that only the first one would be rendered.</p>
  <h2>Results</h2>
  <p>To prove the first one wrong, type in <code>http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect</code> to <a href="http://html2canvas.hertzen.com/screenshots.html" rel="noreferrer">this URL</a> and disable Javascript.  To prove the second one wrong I have a <a href="http://jsfiddle.net/qDmhV/124/" rel="noreferrer">fiddle to try out</a>.</p>
  <hr />
  <h2>The Question</h2>
  <p>I want to make it clear that my reasoning for having multiple <code>svg</code>'s is so that I can place them within a responsive grid system and resize via aspect ratio.  Without further ado, I ask my question: <strong>How can you render multiple <code>svg</code> elements to a <code>canvas</code>?</strong>  If the answer to that question is &quot;it isn't possible&quot;, then next my question would be: <strong>Should I be rendering one <code>svg</code> instead and handle responsiveness another way?</strong></p>