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 onZoom method 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: