title: Capture div containing inline svg and download it as image
body: <p>I wrote code to capture a screenshot of a page using html5. Everything is fine except when the page contains an svg. When I convert svg to inline svg after that screenshot is not capturing the inline svg.</p>
  
  <p>Please check <a href="https://jsfiddle.net/7bqukhff/4/" rel="nofollow noreferrer">https://jsfiddle.net/7bqukhff/4/</a></p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.svg.js"&gt;&lt;/script&gt;
  &lt;script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="wrapper"&gt;
     &lt;h1&gt;Scrrenshot&lt;/h1&gt;
     &lt;div class="img-div"&gt;&lt;img src='https://istack.000webhostapp.com/1tf.svg'&gt;&lt;/div&gt;
     &lt;form class="cf"&gt;
        &lt;div class="half left cf"&gt;
           &lt;input type="text" id="input-name" placeholder="Name"&gt;
           &lt;input type="email" id="input-email" placeholder="Email address"&gt;
           &lt;input type="text" id="input-subject" placeholder="Subject"&gt;
        &lt;/div&gt;
        &lt;div class="half right cf"&gt;
           &lt;textarea name="message" type="text" id="input-message" placeholder="Message"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;input type="submit" value="Submit" id="input-submit"&gt;
     &lt;/form&gt;
  &lt;/div&gt;
  &lt;a class="btn btn-success" href="javascript:void(0);" onclick="generate();"&gt;Generate Screenshot »&lt;/a&gt;
  
  $(function() {
  
     $('img').each(function() {
  
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');
  
        jQuery.get(imgURL, function(data) {
           // Get the SVG tag, ignore the rest
           var $svg = jQuery(data).find('svg');
  
           // Add replaced image's ID to the new SVG
           if (typeof imgID !== 'undefined') {
              $svg = $svg.attr('id', imgID);
           }
           // Add replaced image's classes to the new SVG
           if (typeof imgClass !== 'undefined') {
              $svg = $svg.attr('class', imgClass + ' replaced-svg');
           }
           // Remove any invalid XML tags as per http://validator.w3.org
           $svg = $svg.removeAttr('xmlns:a');
  
           // Replace image with new SVG
           $img.replaceWith($svg);
  
        }, 'xml');
  
     });
  });
  
  (function(exports) {
     function urlsToAbsolute(nodeList) {
        if (!nodeList.length) {
           return [];
        }
        var attrName = 'href';
        if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
           attrName = 'src';
        }
        nodeList = [].map.call(nodeList, function(el, i) {
           var attr = el.getAttribute(attrName);
           if (!attr) {
              return;
           }
           var absURL = /^(https?|data):/i.test(attr);
           if (absURL) {
              return el;
           } else {
              return el;
           }
        });
        return nodeList;
     }
  
     function screenshotPage() {
        var wrapper = document.getElementById('wrapper');
        html2canvas(wrapper, {
           onrendered: function(canvas) {
              canvas.toBlob(function(blob) {
                 saveAs(blob, 'myScreenshot.png');
              });
           }
        });
     }
  
     function addOnPageLoad_() {
        window.addEventListener('DOMContentLoaded', function(e) {
           var scrollX = document.documentElement.dataset.scrollX || 0;
           var scrollY = document.documentElement.dataset.scrollY || 0;
           window.scrollTo(scrollX, scrollY);
        });
     }
  
     function generate() {
        screenshotPage();
     }
     exports.screenshotPage = screenshotPage;
     exports.generate = generate;
  })(window);
  </code></pre>
  
  <p>For this particular svg there is no problem, but for some svg the captured image is different from the original.</p>
  
  <p>Is there any method for capturing a screenshot without using html canvas? If not how can I change my code to capture svg elements correctly?</p>
  
  <p>I think now everyone is familiar with awesome screen shot extension <a href="https://www.awesomescreenshot.com/" rel="nofollow noreferrer">https://www.awesomescreenshot.com/</a>. How are they doing this screen capture?</p>
  
  <p>Is there any method in Angular 1 (not 2 or above), React JS , Vue.js, Aurelia js or any modern JavaScript library for taking a screenshot?</p>