Get dynamic svg content

Question

I am using the snapsvg library to generate svg from the external parts of svg. Here is the main container:

<svg id="mainContent"></svg>

When I look at this element with the inspector, I see new dynamic svg elements added inside.

How can I get this full dynamic svg content to save it to a file?

Answer 1

need to try just requesting it as a regular dom element?

var content = document.querySelector('#mainContent').outerHTML

to download parts, you can use the function saveAsfor a modern browser

var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "download.svg");

see https://github.com/eligrey/FileSaver.js/

Answer 2

svg.

function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href','data:text/plain;charset=utf-8,' + encodeURIComponent('<svg>'+text+'</svg>')); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } download("samplesvg.svg",document.getElementById('mainContent').innerHTML);