Drawing seating plans
Ticketmatic gives you extended control over the look of the seating plans used when selling tickets for seated events. You are free to position seats however you like, and you can add vector graphics to the seating plan to make it more understandable for the user (for example to indicate rows, exits or the stage) or to make it more visually attractive.
Ticketmatic uses the open standard SVG for storing the seating plan. SVG is supported by most popular vector graphic editing software tools such as Adobe Illustrator, Sketch, Inkscape or CorelDRAW
The seating plan SVGs you create will be imported into Ticketmatic and will be further processed and enriched by the box office administrator. This means that in the SVG, you can focus fully on the look of the seating plan. Other info (like seat number or rank information) will be added later.
Zone SVG
In the zone SVG you will draw the individual seats that make up the seating plan, together with structural info like exits, stage, stairs or row names.
Ticketmatic uses the concept of groups in the SVG to structure the seating plan and make the processing easier. Depending on the software you use, you can explicitely group svg items, or you can use layers, which are converted to groups when exporting the SVG.
Following groups have a special meaning the the seating plan SVG:
You are free to use other groups in addition to these.
Seats group
The seats group should only contain simple svg elements. Following elements are allowed:
Each element in this group will be considered a seat in the final seating plan. The stroke and fill of these elements is not important and can best be kept simply black, as it will be overridden by Ticketmatic to display information about the seats.
Reference group
The reference group can contain elements that are handy while setting up the seating plan. It can for example be used to contain the bitmap version of the seating plan (often this will be the only asset that is available from the venue). By importing this bitmap in the reference layout, you can correctly position the seats by overlaying them on the bitmap.
All items in the reference group will be discarded when importing the SVG in Ticketmatic.
Sections group
The elements in the sections group define the sections of seats. Sections must consist only of following elements:
The section elements are used to display rank info about seats. Ticketmatic will fill the sections dynamically with the rank color of the seats. Ticketmatic can automatically split a section if it contains seats for more than 1 rank, so there is no need to create separate sections for each rank.
All seats should be enclosed by exactly 1 section element and the sections group should be positioned under the seats group regarding visibility.
Row and seat names
As Ticketmatic will generate the seat names for each seat and render these on the seat, it is not necessary to include seat names on the seating plan.
Ticketmatic does not render Row names, so they should be included in the SVG seating plan.
Using fonts
The seating plan svg will ultimately be rendered in the browser of the end user. This means that without consideration, the fonts you use will only be correctly displayed if the end user has the font installed. If not, a default font will replace it.
In order to get a reliable representation of the fonts in the seating plan, you should make sure that the font-family used in the SVG is available:
For special fonts that are used very occasionally (for example: an icon from an iconfont or a single word) you can also convert the text in the SVG to outlines. This way you don’t need to link to the font file. Beware that this will increase the svg file size and possibly the rendering time as well.
General remarks
- The size of the SVG must not exceed 750kb and is best kept as small as possible.
- Bitmap images are not allowed inside the SVG (except in the reference group).
- Use colors sparingly. It is best to aim for a black/white/grayscale seating plan and keep the SVG as neutral as possible. This will allow to use the seating plan in a variety of circumstances and keep it readable and in line with the look and feel of the context. Remember that Ticketmatic will already add colors to display information on the seats.
Updating an SVG for an existing seating plan
An SVG for an existing seating plan can be edited up to a certain extent:
- if the seating plan is not yet published it is possible to make graphical changes and also delete seats or add new seats. Remark that you can only delete seats that are not numbered, so you might need to remove seat numbering before you can delete seats.
- if the seating plan is published it is possible to make graphical changes, but structural changes are not allowed. This means you can update all text or graphics on a seating plan and you can even move seats. But you cannot delete seats or add new seats.
When you want to edit an SVG for an existing seating plan, always start from the latest version of the SVG: this SVG can be downloaded from the seating plan detail.
You will see that all seats in the SVG will have an id that is used as reference in Ticketmatic, for example "s001004002". It is important that these ids are not deleted or changed, so take care of this while manipulating the SVG, especially when using copy-pasting objects.
seating plan:
A larger seating plan
