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:

* `seats`: this group should contains all the seats in the seating plan, and should contain no other elements * `reference` this group can be used to store reference material about the seating plan. It will be discarded when importing the SVG. * `sections`: the objects in this group will be used to define where the rank information will be drawn on the final seating plan

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:

* circle * rectangle * ellipse

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:

* closed path * polygon * rect

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:

* Make sure the font is uploaded to the Ticketmatic assets, in the folder `seatingplanfonts`. * Make sure the name you use for the font-family corresponds to the uploaded font name. For example: if you upload myfont.otf to the seatingplanfonts folder, you have to reference it in the SVG with `font-family="myfont"`

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:


Download svg

A larger seating plan


Download svg