D3 Examples - Download generated SVG with preview (from mbostock)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
​
<title>Download SVG</title>
<style type="text/css">
    a{
        cursor: pointer;
        text-decoration: underline;
        color: black;
    }
    #download{
        border: 1px solid silver;
        position: absolute;
        opacity: 0;
    }
</style>
</head>
<body>
​
<div id="viz"></div>
<a href="#" id="generate">Generate download preview</a>
​
<script type="text/javascript">
​
// Modified from https://groups.google.com/d/msg/d3-js/aQSWnEDFxIc/k0m0-q-3h1wJ
​
var svg = d3.select("#viz")
    .append("svg:svg");
  
  svg
    .attr("width", 300)
    .attr("height", 200)
    .style("background-color", "WhiteSmoke")
    .append("svg:rect")
    .attr("fill", "aliceblue")
    .attr("stroke", "cadetblue")
    .attr("width", 60)
    .attr("height", 40)
    .attr("x", 50)
    .attr("y", 50);
  
// assuming var `svg` for your SVG node
var a = d3.select("body").append("a").node();
//var a = document.createElement('a'), xml, ev;
a.textContent = "Sup, y'all?";
a.download = 'my_svg.svg'; // file name
xml = (new XMLSerializer()).serializeToString(svg.node()); // convert node to xml string
a.href = 'data:application/octet-stream;base64,' + btoa(xml); // create data uri
// <a> constructed, simulate mouse click on it
//ev = document.createEvent("MouseEvents");
//ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
//a.dispatchEvent(ev);
​
</script>
​
</body>
</html>
    