javascript - How to Download and SVG element as an SVG file - Stack Overflow

admin管理员组

文章数量:1355564

Over the past few months, I have been working on this code that deals with ellipsoidal earth and just recently I have finished it. My professor now wants me to send him pictures of the diagrams I made as an SVG file. I know in Python you can put a few lines of code into your project to have it download the image, but I am unsure how it works in JavaScript. How can I do this in JavaScript, or is there another easier way?

Over the past few months, I have been working on this code that deals with ellipsoidal earth and just recently I have finished it. My professor now wants me to send him pictures of the diagrams I made as an SVG file. I know in Python you can put a few lines of code into your project to have it download the image, but I am unsure how it works in JavaScript. How can I do this in JavaScript, or is there another easier way?

• javascript
• svg

Share Improve this question Follow edited Feb 15, 2020 at 18:08 AmerllicA 32.7k1717 gold badges144144 silver badges167167 bronze badges asked Feb 15, 2020 at 17:40 Paankey56Paankey56 12511 silver badge77 bronze badges 5

• Dear @Paankey56, when you write this code, you should insert it here, we wanna see which code. – AmerllicA Commented Feb 15, 2020 at 18:15
• I didn't realize, do you mean you just wanna convert your SVG to a JPG or PNG file to send to your master? – AmerllicA Commented Feb 15, 2020 at 18:17
• Eh, I may be missing your context here, but can't you send him the SVG file? – Armen Michaeli Commented Feb 15, 2020 at 19:07
• Does your professor want your code to include the javascript to save? If not, then why not just go into your browser's console tools (hit F12) and cut and paste the SVG to a new file? – Paul LeBeau Commented Feb 16, 2020 at 15:44
• @Paankey56 See my demo (and answer below) to download as .svg or .png (note that .svg can be taken from inspecting the DOM and doing copy paste as the ments suggest) - codepen.io/Alexander9111/pen/VwLaaPe – Alex L Commented Feb 16, 2020 at 19:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Check out this demo: https://codepen.io/Alexander9111/pen/VwLaaPe?editors=1010

Code (modified from https://stackoverflow./a/19885344/9792594):

function downloadSVGasTextFile() {
  const base64doc = btoa(unescape(encodeURIComponent(document.querySelector('svg').outerHTML)));
  const a = document.createElement('a');
  const e = new MouseEvent('click');

  a.download = 'download.svg';
  a.href = 'data:text/html;base64,' + base64doc;
  a.dispatchEvent(e);
}

downloadSVGasTextFile();

You encode your svg as a 64bit string and then use that as the href of an anchor tag and then dispatch a click event to download the svg text file as download.svg

If you want to save an image, such as .png then you can first draw svg image into a cnavas then download that as .png,

UPDATE

I modified the answer and the demo to now include both download as text file .svg or download as image file .png https://codepen.io/Alexander9111/pen/VwLaaPe:

HTML:

<svg>
 ...
</svg>
<br/>
<button id="downloadPNG">Download .png</button>
<button id="downloadSVG">Download .svg</button>

JS:

function downloadSVGAsText() {
  const svg = document.querySelector('svg');
  const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
  const a = document.createElement('a');
  const e = new MouseEvent('click');
  a.download = 'download.svg';
  a.href = 'data:image/svg+xml;base64,' + base64doc;
  a.dispatchEvent(e);
}

function downloadSVGAsPNG(e){
  const canvas = document.createElement("canvas");
  const svg = document.querySelector('svg');
  const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
  const w = parseInt(svg.getAttribute('width'));
  const h = parseInt(svg.getAttribute('height'));
  const img_to_download = document.createElement('img');
  img_to_download.src = 'data:image/svg+xml;base64,' + base64doc;
  console.log(w, h);
  img_to_download.onload = function () {    
    canvas.setAttribute('width', w);
    canvas.setAttribute('height', h);
    const context = canvas.getContext("2d");
    //context.clearRect(0, 0, w, h);
    context.drawImage(img_to_download,0,0,w,h);
    const dataURL = canvas.toDataURL('image/png');
    if (window.navigator.msSaveBlob) {
      window.navigator.msSaveBlob(canvas.msToBlob(), "download.png");
      e.preventDefault();
    } else {
      const a = document.createElement('a');
      const my_evt = new MouseEvent('click');
      a.download = 'download.png';
      a.href = dataURL;
      a.dispatchEvent(my_evt);
    }
    //canvas.parentNode.removeChild(canvas);
  }  
}

const downloadSVG = document.querySelector('#downloadSVG');
downloadSVG.addEventListener('click', downloadSVGAsText);
const downloadPNG = document.querySelector('#downloadPNG');
downloadPNG.addEventListener('click', downloadSVGAsPNG);

本文标签： javascriptHow to Download and SVG element as an SVG fileStack Overflow