SVG can be drawn on map in much more faster way than traditional approaches, at least for points. Traditional approach re-position each element to fit into the view of the map, however SVG is “scalable” so we can use it and it performs much more faster for zoom-in/out.

Few considerations:

SVG itself define viewport by its coordinate space, all outside of this viewport is usually clipped, so it is important to keep SVG viewport in-line with the viewport of the map. There are approaches that resizes SVG as you zoom-in (here), and while it works, it has a problems in deep-zooms when you need to move on map (actually you move giant SVG based on the zoom )

translating LatLon to absolute pixel values (like here used for WebGL) is possible solution, however IE and FF has problems with large numbers for transoform (>1 M), So we need to get SVG elements in view coordinates and translate them.

Having some track of bounding box of all elements like again used here should be avoided (SVG or its group element knows about extension of the elements it holds)

So while we keep SVG in the viewport, we need to compensate any shift and zoom by translating <g> (group) of all elements.

So in leaflet when map moves, SVG is translated back to its original position while <g> is translated forward to reflect the map movement

We need to keep track of LatLon position of either map center or one of the corner – we use topLeft corner.

Leaflet doesn’t do precise enlargement and rounds view points because of some CSS troubles on some devices (noted here). We need to patch two translating functions in Leaflet to get this right (so SVG enlargement will be aligned with map)… but I need to look on this again, best would be to not patch Leaflet of course.