title: How to convert multiple SVG's to one PNG image?
body: <p>I need to convert 2 separate SVG's into 1 PNG image. I currently have code working for converting 1 SVG to a PNG. This code is shown below, I convert the SVG to canvas to PNG.</p>
  <p>The SVG's are on the same page, and I have tried using an array to iterate through them and grab both. The code I am currently working on is also below, but is not working. Any advice on how to convert the SVGs to the same PNG image?</p>
  <p>Thanks a bunch!</p>
  <p><strong>Single SVG to PNG</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// convert svg to png 
  function svgToPng(){
      var svg = document.querySelectorAll('svg')[0];
      // clone svg nodes
      var copy = svg.cloneNode(true);
      // convert to xml format for storage/transportation
      var serializer = new XMLSerializer();
      var data = serializer.serializeToString(copy);
      // create url 
      var DOMURL = window.URL || window.webkitURL || window; 
      // create image/blob 
      var img = new Image();
      var blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
      var url = DOMURL.createObjectURL(blob);
      // create canvas 
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      // draw image on canvas
      img.onload = function(){
          ctx.drawImage(img, 0, 0, $(svg0).width(), $(svg0).height());
          DOMURL.revokeObjectURL(url, url1);
          var imgURI = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
      }
      // send new image to window
      img.src = url;
      // return img.src;
      window.open().document.write('&lt;img src="' + img.src + '" width="1600" height="800"/&gt;');
  };</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Multiple SVG's to PNG</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// convert multipl svgs to png
  function multSvgToPng(){
      var array = [];
      var totalSvg = document.querySelectorAll('svg');  // NodeList(2) [svg, svg]
      // create array 
      for(var i = 0; i &lt; totalSvg.length; i++){
          array = document.querySelectorAll('svg')[i];
      }
      for(var j = 0; j &lt; array.length; j++){
          var svg = array[j]; 
          var copy = svg.cloneNode(true);
          var serializer = new XMLSerializer();
          var data = serializer.serializeToString(copy);
          var DOMURL = window.URL || window.webkitURL || window;
          var img = new Image();
          var blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
          var url = DOMURL.createObjectURL(blob);
          var svgStr = serializer.serializeToString(copy);
      }
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      img.onload = function(){
          ctx.drawImage(img, 0, 0, $(svg).width(), $(svg).height());
          DOMURL.revokeObjectURL(url);
          var imgURI = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
      }
      // send new image to window
      img.src = url;
      // return img.src;
      window.open().document.write('&lt;img src="' + img.src + '" width="1600" height="800"/&gt;');
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Example SVG Images</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;svg height="100" width="100"&gt;
    &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
    Sorry, your browser does not support inline SVG.  
  &lt;/svg&gt; 
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;svg width="400" height="110"&gt;
    &lt;rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /&gt;
    Sorry, your browser does not support inline SVG.  
  &lt;/svg&gt;
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>