<svg id="illustration"
width="100" height="100" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="#f1f3f5"/>
<circle cx="32" cy="32" r="27" fill="#868e96"/>
<circle cx="81" cy="44" r="15" fill="#343a40"/>
<circle cx="55" cy="78" r="19" fill="#495057"/>
</svg>
<p>
<a href="#" class="link-download">Download displayed SVG</a>
</p>
document.querySelector(".link-download").addEventListener("click", (evt) => {
const svgContent = document.getElementById("illustration").outerHTML,
blob = new Blob([svgContent], {
type: "image/svg+xml"
}),
url = window.URL.createObjectURL(blob),
link = evt.target;
link.target = "_blank";
link.download = "Illustration.svg";
link.href = url;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.