title: How do I resize SVG images on a map as the zoom level changes?
body: <p>I'm using leaflet  to allow uses to draw custom SVG paths (polygons) on a map. The problem is that when the user zooms out, the polygon becomes too large and obscures the rest of the map. </p>
  
  <p>I've looked online for examples, and the resources I've come across uses the geo functions from the d3.geo library. Whereas in my use case I'm using d3, leaflet, and an SVG layer over the map.</p>
  
  <p>Is there a formula that I can apply to resize the objects correctly? I know that I will have to apply a translate function which will be based on the width height and current zoom level, but I was wondering if there is a standard way to do this?</p>
  
  <p>EDIT: Here is one resource I found, but it uses the d3 geofunctions, and from what I can gather, it seems to redraw the polygons every time the map view is reset (which might be inefficient(?)</p>
  
  <p><a href="http://www.d3noob.org/2014/03/leafletjs-map-with-d3js-objects-that.html" rel="nofollow">http://www.d3noob.org/2014/03/leafletjs-map-with-d3js-objects-that.html</a></p>