Save SVG from a web page

save-svg-from-website-to-local.md

This is just a combination of solutions founded from Stackoverflow

• Extract SVG as base64 Image
• Save a base64 image to user's disk

script.js

function saveSVGToDisk(elementId) {

  let svg = document.getElementById(elementId);

  //get svg source.
  let serializer = new XMLSerializer();
  let source = serializer.serializeToString(svg);

  //add name spaces.
  if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
      source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
  }
  if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
      source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
  }

  //add xml declaration
  source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

  //convert svg source to URI data scheme.
  let url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
  
  // Save file to disk
  var link = document.createElement("a");
  document.body.appendChild(link);
  link.setAttribute("type", "hidden");
  link.href = url;
  link.download = "your-file";
  link.click();  
  document.body.removeChild(link);
}