baseframeKINETICSField notes โ†—

Interface engineering / worked example

Why an edited SVG seating map stops selecting seats

By Baseframe Kinetics ยท Published

An SVG can still look correct after an edit even when the ticketing code can no longer find its seats. A visible seat label, an SVG element ID and a booking record are different things. If an editor renames an ID or changes the geometry your integration expects, a good-looking export can fail selection.

Start with your ticketing platform's documented map format and a copy of the last working file. Check the identifiers and coordinates before redesigning the artwork. Do not replace a live map merely because its preview looks right.

Try it: same picture, broken lookup

This original three-seat teaching example has no booking system. The first button asks the page to find demo-s101. Renaming that SVG element changes its identity while leaving the drawing and visible label A1 unchanged.

Three seats labeled A1, A2 and A3The first seat's internal ID can change without changing the picture. Use the HTML buttons below to test the lookup.STAGEA1A2A3

Current first-seat ID: demo-s101

The original ID is present. Try the lookup, then rename the ID and try again.

See the lookup used in this example
const seat = document.getElementById("demo-s101");
const result = seat ? "Found seat A1" : "Seat ID not found";

A real integration may use data attributes, classes, JSON objects or its own internal key instead of a DOM lookup. The example explains one failure mode; it does not reproduce every platform.

Check three contracts before changing the file

  1. Identity: Which key connects the drawing to the platform's seat record? Compare IDs, classes, row/seat labels and any separate mapping file. A label edit does not automatically authorize a new identity.
  2. Geometry: Does the integration use the SVG's coordinates, a separate overlay or a raster background? Check the viewBox, group transforms and scaling against the last working version. A browser can draw a transformed group correctly while separate coordinates no longer align.
  3. Inventory: Is the plan already used by an event? Determine how changes affect existing seat records and sold tickets before applying them. A duplicate ID check cannot establish that bookings remain attached to the right physical seats.

Theatre Manager's seat-name documentation ties logical seat numbers to physical seats and warns that changing active or past maps can affect sold-ticket placement. Its venue editing guidance says to preserve the SVG ID and class markers used for seats. Those are platform-specific requirements, not a universal SVG naming convention.

Use the platform's workflow when it already solves the problem

Ticket Tailor documents reference-chart scanning, calibration and manual drawing. A reference image is not the same thing as finished seat inventory. Spektrix documents managed seat selection and a support route for conversion problems. Check the current native workflow before paying for a generic redraw.

Do not run an optimizer that renames or removes IDs unless you know which identifiers the consumer needs and have verified the result. A smaller SVG is not an improvement if it breaks its integration.

A practical acceptance checklist

  1. Keep an untouched original and record the platform, export version and expected change.
  2. Compare the seat list and its stable keys. Explain each added, removed or renamed record. Check duplicates and missing matches.
  3. Compare the drawing at desktop and mobile sizes. Check labels, seat positions, cropping and overlays.
  4. Import into an authorized test environment using the platform's own workflow. Verify actual seat selection and the expected category and row/seat label.
  5. Test the relevant inventory, hold and booking behavior with the platform's supported test process. Obtain the venue's approval before changing a live plan.

These checks address different risks. Passing the drawing and ID checks does not prove native import, inventory behavior or accessibility. Keep a rollback copy and follow your platform's guidance for maps already attached to events.

What we verified, and what remains untested

The interactive example above is an original browser demonstration. Our separate private synthetic fixture began with 23 seats. After removing one seat and renaming a section, checks confirmed that the 22 surviving IDs stayed the same. We also checked its browser selection, keyboard controls and narrow layout. That work used fictional data, not a customer's venue.

We have not verified these files inside a ticketing platform, against sold inventory or in a real booking flow. No venue-map service is offered for purchase here. This article does not certify a seating plan, physical access route or accessibility compliance.

If this describes a problem you have encountered, you can optionally describe the platform and symptom by email. Please do not include customer lists, booking data, credentials or private venue files. This is research feedback, not a quote request or a promised repair.

Related: preserve information when reducing interface motion, or browse all field notes.