Как сохранить нарисованный JavaScript в файл

Question

Я могу создать холст для рисования SVG, но я бы хотел сохранить его в файл. Я использую Django, поэтому я хотел бы, чтобы путь сохранения мог включать переменные python, такие как {{dir_path}}, и чтобы холст рисования не забывал отображать его (используйте тот же dir_path для получения файла svg).

стиль

<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 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>

Я думаю, что решение должно включать следующее, но я новичок в javascript. Спасибо за любое направление с этим.

  <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>