title: Merging 2 <svg> into one .SVG file
body: <p>I have a page where I have a button to export all the <code>&lt;svg&gt;</code> into one single .svg file.</p>
  
  <p>The problem is that the code is only exporting one of the <code>&lt;svg&gt;</code>.</p>
  
  <p>I can open it on inkscape, but only get one of the svg inside.</p>
  
  <p>I can't open it on my browser, I get an error message.</p>
  
  <p>I can't open on illustrator, I get an error message that the file is corrupted or something like that.</p>
  
  <p>Here is the code I'm using:
  <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 xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="svg-converter.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  jQuery(document).ready(function($) {
   $('.svg-convert').svgConvert({
      onComplete: function() {
        exportSVG(document.getElementById('mySVG'));
      }
    });
  });
  &lt;/script&gt;
  &lt;style&gt;
  #mySVG &gt; svg{
    width: 40%;
   float: left;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;main id="content"&gt;
    &lt;div id="mySVG" xmlns="http://www.w3.org/3000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
      &lt;img src='https://cdn.kastatic.org/images/avatars/svg/leafers-sapling.svg' class='svg-convert'&gt;
       &lt;img src='https://cdn.kastatic.org/images/avatars/svg/aqualine-sapling.svg' class='svg-convert'&gt;
    &lt;/div&gt;
   &lt;/main&gt;&lt;!-- #main --&gt;
   &lt;script&gt;
     var exportSVG = function(svg) {
        // first create a clone of our svg node so we don't mess the original one
        var clone = svg.cloneNode(true);
        // parse the styles
        parseStyles(clone);
        // get the data
        var svgData = document.getElementById('mySVG').innerHTML;
        // here I'll just make a simple a with download attribute
        var a = document.createElement('a');
        a.href = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData.replace(/&gt;&lt;/g, '&gt;\n\r&lt;'));
        a.download = 'finalSVG.svg';
        a.innerHTML = 'download the .SVG file';
        document.body.appendChild(a);
      };
      var parseStyles = function(svg) {
        var styleSheets = [];
        var i;
        // get the stylesheets of the document (ownerDocument in case svg is in &lt;iframe&gt; or &lt;object&gt;)
        var docStyles = svg.ownerDocument.styleSheets;
        // transform the live StyleSheetList to an array to avoid endless loop
        for (i = 0; i &lt; docStyles.length; i++) {
          styleSheets.push(docStyles[i]);
        }
        if (!styleSheets.length) {
          return;
        }
        var defs = svg.querySelector('defs') || document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        if (!defs.parentNode) {
          svg.insertBefore(defs, svg.firstElementChild);
        }
        svg.matches = svg.matches || svg.webkitMatchesSelector || svg.mozMatchesSelector || svg.msMatchesSelector || svg.oMatchesSelector;
        // iterate through all document's stylesheets
        for (i = 0; i &lt; styleSheets.length; i++) {
          var currentStyle = styleSheets[i]
          var rules;
          try {
            rules = currentStyle.cssRules;
          } catch (e) {
            continue;
          }
          // create a new style element
          var style = document.createElement('style');
          // some stylesheets can't be accessed and will throw a security error
          var l = rules &amp;&amp; rules.length;
          // iterate through each cssRules of this stylesheet
          for (var j = 0; j &lt; l; j++) {
            // get the selector of this cssRules
            var selector = rules[j].selectorText;
            // probably an external stylesheet we can't access
            if (!selector) {
              continue;
            }
            // is it our svg node or one of its children ?
            if ((svg.matches &amp;&amp; svg.matches(selector)) || svg.querySelector(selector)) {
              var cssText = rules[j].cssText;
             // append it to our &lt;style&gt; node
             style.innerHTML += cssText + '\n';
            }
          }
          // if we got some rules
          if (style.innerHTML) {
            // append the style node to the clone's defs
            defs.appendChild(style);
          }
        }
      };
     &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using SVG Convert (<a href="https://github.com/madebyshape/svg-convert" rel="nofollow noreferrer">https://github.com/madebyshape/svg-convert</a>) to convert from .SVG to <code>&lt;svg&gt;</code> before the page loads. That part works, no problem there.</p>
  
  <p>Here you can see the code runing: <a href="http://brand.express/projects/teste/index4.php" rel="nofollow noreferrer">http://brand.express/projects/teste/index4.php</a></p>
  
  <p>Nesting the <code>&lt;svg&gt;</code> inside another <code>&lt;svg&gt;</code> doesn't work because they don't get nested. I don't know if its because of the svgConvert, but they simple are printed outside the 'father' <code>&lt;svg&gt;</code>.</p>