I am in need of creating a seating chart. I have generated an SVG with the seats.
<div class="seats-map">
<svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 1000 300">
<g data-row="1.0"><circle cx="100" cy="100" r="20" fill="red"></circle><circle cx="150" cy="100" r="20" fill="red"></circle><circle cx="200" cy="100" r="20" fill="red"></circle><circle cx="250" cy="100" r="20" fill="red"></circle><circle cx="300" cy="100" r="20" fill="red"></circle></g><g data-row="2.0"><circle cx="100" cy="150" r="20" fill="red"></circle><circle cx="150" cy="150" r="20" fill="red"></circle><circle cx="200" cy="150" r="20" fill="red"></circle><circle cx="250" cy="150" r="20" fill="red"></circle><circle cx="300" cy="150" r="20" fill="red"></circle></g><g data-row="3.0"><circle cx="100" cy="200" r="20" fill="red"></circle><circle cx="150" cy="200" r="20" fill="red"></circle><circle cx="200" cy="200" r="20" fill="red"></circle><circle cx="250" cy="200" r="20" fill="red"></circle><circle cx="300" cy="200" r="20" fill="red"></circle></g></svg>
The "seats-map" class is set to 1000px width and 400px height. My aim is to center the SVG visually and have it fit within these dimensions proportionally. I plan to incorporate a zoom effect after this step.