Create a gist now

Instantly share code, notes, and snippets.

Download svg generated from D3
<!DOCTYPE html>
<script type="text/javascript" src=""></script>
<title>Download SVG</title>
<style type="text/css">
cursor: pointer;
text-decoration: none;
color: black;
<div id="viz"></div>
<a href="#" id="download">Download</a>
<script type="text/javascript">
// Modified from"#viz")
.attr("width", 300)
.attr("height", 200)
.style("background-color", "WhiteSmoke")
.attr("fill", "aliceblue")
.attr("stroke", "cadetblue")
.attr("width", 60)
.attr("height", 40)
.attr("x", 50)
.attr("y", 50);"#download")
.on("mouseover", writeDownloadLink);
function writeDownloadLink(){
var html ="svg")
.attr("title", "svg_title")
.attr("version", 1.1)
.attr("xmlns", "")
.attr("href-lang", "image/svg+xml")
.attr("href", "data:image/svg+xml;base64,\n" + btoa(html))
.on("mousedown", function(){
if(event.button != 2){
.attr("href", null)
.html("Use right click");
.on("mouseout", function(){
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment