Getting started

SVG map setup for designers

All guides

Mapvera can read map features straight out of your SVG file. Name a few layers the way this guide shows and your artwork arrives with clickable landmarks, wayfinding paths and accessibility already in place, ready to link to content.

This guide is only for designers who want hard-coded SVG maps, where the features live in the artwork itself so a refreshed file can simply replace the old one. It is entirely optional: every map, including static JPG and PNG maps, can have zones, wayfinding routes and accessible paths drawn in the Mapvera editor instead, with no special file setup at all. See Create your first map for that route.

The named layers

Mapvera looks for top-level layers whose names start with these words. Any capitalisation works, and anything after the word is yours, so Wayfinding Level 2 is fine. Everything else in the file is treated as plain artwork.

Layer nameWhat goes in itWhat Mapvera does with it
LandmarksA shape for each clickable place. Each shape's name (its id) is how it links to a landmark in the editor.Shapes become tappable zones: they open the place card, take the landmark's colours, act as wayfinding destinations and power the GPS "you are in this zone" logic.
WayfindingLines, polylines or curved paths traced along every walkable route.Becomes the routing network for visitor directions. Lines only need to visually touch to connect; names inside this layer are free choice and never shown.
AccessibleLines drawn over stairs, steps and kerbs. Use it as its own layer, or as a sub-layer inside Wayfinding.Marked stretches stay walkable normally but are avoided when a visitor turns on step-free directions.
ConnectorsA small marker shape wherever a lift, staircase or escalator meets each floor's paths.The same marker name on two floors links those floors at that point. Names starting with accessible-, such as accessible-elevator1, stay usable in step-free mode; any other name, such as stairs1, is skipped when step-free is on.
ArtworkDecoration, labels, backgrounds, anything that must never respond to a tap.Completely inert, even if shapes inside it have names.
Wayfinding, Accessible and Connectors layers never paint on the published map. They are working geometry: visitors only ever see the routes Mapvera draws from them.

Set it up in Illustrator

  1. One artboard per level

    Each floor or level is its own SVG file. Keep the artboard tightly cropped to the map so nothing floats outside it.

  2. Name your top-level layers

    Create layers named Landmarks, Wayfinding, Accessible, Connectors and Artwork as needed. Only the ones you use need to exist.

  3. Draw and name your landmark shapes

    Inside Landmarks, draw a shape over each place and give it a clear, simple name like main-stage or shop-12. Use lowercase words joined with hyphens and avoid spaces.

    These names are the link: a landmark in the editor with the same id snaps to its shape automatically. Naming them consistently also makes bulk CSV import effortless, since your spreadsheet's id column simply matches the shapes.

  4. Trace the walkable paths

    In Wayfinding, draw lines along corridors, walkways and open routes. They do not need to be pixel-perfect: ends that visually touch or cross another line connect automatically.

  5. Mark stairs and steps

    In Accessible, draw a short line over each flight of stairs or stepped section that sits on a walkable path. Step-free directions will route around them.

  6. Add floor connectors

    For multi-level maps, place a small marker in Connectors where each lift or staircase meets the paths, on every floor it serves. Give the same connector the same name on each floor, and start lift names with accessible- so step-free routing can use them.

  7. Export as SVG

    Export with styling as inline styles or presentation attributes, keep object ids on, and skip minifiers that rename or strip ids. Then upload the file as a level image in the editor's Levels tab.

Free choice, no reserved words

Everything else is yours. Shape names inside Landmarks just need to match your landmark ids. Names inside Wayfinding are labels only, since connections come from the geometry. Colours mean nothing to the engine, so style the artwork exactly as the brand demands. And reveal-at-zoom child shapes simply extend a parent's name, like shop-12-detail.

Replacing the artwork later

This is the pay-off of the hard-coded approach: when the venue changes, update the SVG and upload it again. As long as the layer names and shape names stay consistent, every landmark link, route and accessibility mark comes back without any editor rework.

Prefer to keep artwork and features separate? Upload any image and draw zones, routes and accessibility lines in the editor instead. Both approaches can even mix on the same map: the editor's drawn features sit alongside whatever the SVG provides.