Best way to handle large SVG's in DOM

Hi, we are using SVG to display maps of any venue in our application, the data is divided in sections, rows and seats. The ELEMENTS inside svg can be more then XXXX. So let me explain how this thing actually works, when you are on default zoom it shows you the sections only and when you zoom to a specific level, it hide that sections and make the rows and seats visible. FYI the svg markup looks like the below -

<svg>

<g id="sections">
   <path id="section-1" d="....." >
   <path id="section-2" d="....." >
</g>


<g id="rowsAndSeats">

    <g id="row-1">
        <circle id="seat-1" cx="..">
    </g>


    <g id="row-2">
        <circle id="seat-1" cx="..">
        <circle id="seat-2" cx="..">
        <circle id="seat-3" cx="..">
    </g>


</g>


</svg>

As you can see the all the elements are there in dom all the time, and if you talk about any of the venue it has atleast 2000 seats lets say for example, 2000 seats for 100 rows and then 20 sections, the thing is i will have 2000+100+20 = 2120 elements at a time in my svg present, however they all are not in the view at same time, as i said earlier it depends on the zoom level, now what i am looking for is a way from which i can manage my elements inside #sections and #rowsAndSeats I want the ability to have the elements inside them which are visible in my view area, as this map is a small module of an app the app has already a lot of stuff inside.

Lemme know if you have any questions!