Load External SVG

by Purushothaman Anbazhagan

HTML

<script src="https://cdn.rawgit.com/canvg/canvg/master/StackBlur.js"></script>
<script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.min.js"></script>
<script src="https://cdn.rawgit.com/canvg/canvg/master/rgbcolor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<!-- Source of svg -->
<div id="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
    <rect height="100" width="100" style="stroke:#f7f7f7; fill: #74ad24" />
  </svg>
</div>

<div>
  <button id="getPdf">Get Markup</button>
</div>

<code id="results">


</code>

JavaScript

//Add event listener
document.getElementById("getPdf").addEventListener("click", getPdf);

function getPdf() {
  //Get svg markup as string
  var svg = document.getElementById('svg-container').innerHTML;

  if (svg)
    svg = svg.replace(/\r?\n|\r/g, '').trim();

 
  
  xhr = new XMLHttpRequest();
  xhr.open("GET", "https://linearicons.com/free/icon/lnr-cloud-download.svg", false);
  // Following line is just to be on the safe side;
  // not needed if your server delivers SVG with correct MIME type
  xhr.overrideMimeType("image/svg+xml");
  xhr.onload = function(e) {
    // You might also want to check for xhr.readyState/xhr.status here
    document.getElementById("results")
      .appendChild(xhr.responseXML.documentElement);
  }
  xhr.send("");
}