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!
Alkshendra Maurya
Frontend Engineer | Hashnode Alumnus
For the zoom problem, If you’re using a library like ReactJS, you can just show the sections in the default view and write an
onZoommethod for when the zoom is triggered that changes state for the section and load the seats in the DOM for you...and as far as the SVG bloat is concerned, since you are working with “seats”, I assume they all will look the same, so essentially, you’re repeating the same SVG code for all the seats.
Instead, a better idea would be to write markup for one seat, then
<use>it for all others instead of using individual SVG paths for every seat.Here's a quick guide to do that: