How to save javascript drawn svg to file

Question

I can create a SVG drawing canvas, but I would like to save it to a file. I'm using Django so I would like a save path to be able to include python variables like {{dir_path}} and for the drawing canvas to remember to display it (use the same dir_path to retrieve the svg file).

style

<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

</style>

html

<svg width="500" height="500">
  <rect fill="#fff" width="100%" height="100%"></rect>
</svg>

java script

<script src="//d3js.org/d3.v4.min.js"></script>
    <script>

  var line = d3.line()
      .curve(d3.curveBasis);

  var svg = d3.select("svg")
      .call(d3.drag()
          .container(function() { return this; })
          .subject(function() { var p = [d3.event.x, d3.event.y]; return [p, p]; })
          .on("start", dragstarted));

  function dragstarted() {
    var d = d3.event.subject,
        active = svg.append("path").datum(d),
        x0 = d3.event.x,
        y0 = d3.event.y;

    d3.event.on("drag", function() {
      var x1 = d3.event.x,
          y1 = d3.event.y,
          dx = x1 - x0,
          dy = y1 - y0;

      if (dx * dx + dy * dy > 100) d.push([x0 = x1, y0 = y1]);
      else d[d.length - 1] = [x1, y1];
      active.attr("d", line);

    });
  }
  </script>

I'm thinking the solution should involve the following, but I'm a noob to javascript. Thank you for any direction with this one.

  <button id="generate">Save as SVG</button>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://eligrey.com/demos/FileSaver.js/Blob.js"></script>
  <script src="http://eligrey.com/demos/FileSaver.js/FileSaver.js"></script>