Skip to content

Instantly share code, notes, and snippets.

@curran
Last active December 10, 2023 12:48
Show Gist options
  • Save curran/7cf9967028259ea032e8 to your computer and use it in GitHub Desktop.
Save curran/7cf9967028259ea032e8 to your computer and use it in GitHub Desktop.
Download SVG from Data URL
license: mit
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>Download SVG</title>
<style>
/* Make the download icon big. */
.download-button{
font-size: 32em;
text-align: center;
}
/* Make the download icon look clickable when you hover over it. */
.download-button i {
cursor: pointer;
}
</style>
</head>
<body>
<script>
// This SVG data is copied from
// http://stackoverflow.com/questions/5433806/convert-embedded-svg-to-png-in-place
var dataURL = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-350%20-250%20700%20500%22%3E%0A%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%20media%3D%22screen%22%3E%0A%20%20%20%20%20%20%20%20svg%20%7B%20background%3A%23fff%3B%20%7D%0A%20%20%20%20%20%20%20%20.face%20%7B%20stroke%3A%23000%3B%20stroke-width%3A20px%3B%20stroke-linecap%3Around%20%7D%0A%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%20%20%3Ccircle%20r%3D%22200%22%20class%3D%22face%22%20fill%3D%22red%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20fill%3D%22none%22%20class%3D%22face%22%20transform%3D%22translate(-396%2C-230)%22%20d%3D%22M487%2C282c-15%2C36-51%2C62-92%2C62%20c-41%2C0-77-25-92-61%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22-60%22%20cy%3D%22-50%22%20r%3D%2220%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22-50%22%20r%3D%2220%22%20fill%3D%22%23000%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E";
// A data URL can also be generated from an existing SVG element.
// function svgDataURL(svg) {
// var svgAsXML = (new XMLSerializer).serializeToString(svg);
// return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
// }
function download(){
var dl = document.createElement("a");
document.body.appendChild(dl); // This line makes it work in Firefox.
dl.setAttribute("href", dataURL);
dl.setAttribute("download", "test.svg");
dl.click();
}
</script>
<div class="download-button" onclick="download()" title="Download as SVG file.">
<i class="fa fa-download"></i>
</div>
</body>
</html>
@stealyourbrain
Copy link

Uploading ohs.svg…

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment