saving svg layer in leaflet map

<!DOCTYPE html>
<html>
<head>
  <title>Save SVG - Leaflet</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://unpkg.com/leaflet-image@latest/leaflet-image.js"></script>
</head>
<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
  var long_center =  2.266622;
  var lat_center = 48.982253;
  var mymap = L.map('mapid').setView([lat_center, long_center], 15);
    
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
      'Imagery © <a href="https://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
  }).addTo(mymap);

var myIcon = L.icon({
    iconUrl: 'marker-icon.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [-3, -41]
  });

L.marker([lat_center, long_center], {icon: myIcon}).addTo(mymap);

L.polygon([
    [lat_center, long_center],
    [lat_center - 0.001, long_center - 0.001],
    [lat_center - 0.002, long_center + 0.002]
  ]).addTo(mymap).bindPopup("I am a polygon.");

var popup = L.popup();

d3.select('body').append("div").attr("id", "images");

function onMapClick(e) {

var getOverlay = function(){

var svg = d3.select('.leaflet-overlay-pane>svg'),
          img = new Image(),
          serializer = new XMLSerializer();
      console.log("svg ", svg.attr("width"), svg.attr("height"));
      var svgStr = serializer.serializeToString(svg.node());

img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr);
      return img;
    };

leafletImage(mymap, function(err, canvas) {

var img_ = getOverlay();
      var svg = d3.select('.leaflet-overlay-pane>svg');
      var w =  svg.attr("width");
      var h = svg.attr("height");
      var pane = d3.select('.leaflet-map-pane');
      var trans = pane.style("transform");
      t = d3.select('.leaflet-map-pane').style('transform').split(", ");
      var dx = t[4], dy = t[5].split(")")[0];

canvas.getContext("2d").drawImage(
        img_,
        dx,
        dy,
        w,
        h
      );
      var img = document.createElement('img');
      var dimensions = mymap.getSize();
      img.width = dimensions.x;
      img.height = dimensions.y;
      img.src = canvas.toDataURL();
      document.getElementById('images').innerHTML = '';
      document.getElementById('images').appendChild(img);
    });
  }

mymap.on('click', onMapClick);
</script>

</body>
</html>

https://unpkg.com/leaflet@1.0.3/dist/leaflet.js

https://d3js.org/d3.v3.min.js

https://unpkg.com/leaflet-image@latest/leaflet-image.js