Skip to main content

SVG Routes – Guide for Designers

For navigation on the Center website to function, the routes must be included in the SVG. You will draw the paths in Illustrator – the system highlights them as needed.

1. Where to Draw?​

Add a group with the ID routes:

<g id="routes">
  <!-- Your lines and paths go here -->
</g>

This group should be at the same level as shops, entrances, services (in the root or in a parent group).

Least effort: Draw a network of lines and paths wherever people can walk — as usual exported from Adobe Illustrator (line, path, polyline). No IDs or data-from/data-to needed.

<g id="routes">
  <line x1="1019" y1="989" x2="1019" y2="940" stroke="#ccc" stroke-width="2"/>
  <line x1="1019" y1="940" x2="1019" y2="703" stroke="#ccc" stroke-width="2"/>
  <path d="M1019 703 L990 703" stroke="#ccc" stroke-width="2"/>
  <polyline points="990 703 950 720 900 740" fill="none" stroke="#ccc" stroke-width="2"/>
  <!-- Additional lines through corridors, intersections, etc. -->
</g>

The system automatically connects endpoints that touch or are up to approx. 5 px offset (typical Illustrator tolerances at intersections) and calculates the shortest path from start to destination. The group #routes will not be displayed as visible designer lines on the website — only the calculated guiding line.

3. Additional Options (optional)​

Option A: Route Groups​

Each route (e.g. main entrance → shop XY) is a separate group:

<g id="route-entrance-1-shop-EG-14">
  <line x1="1019" y1="989" x2="1019" y2="940" stroke="#ccc" stroke-width="2"/>
  <line x1="1019" y1="940" x2="1019" y2="703" stroke="#ccc" stroke-width="2"/>
  <line x1="1019" y1="703" x2="990" y2="703" stroke="#ccc" stroke-width="2"/>
</g>

ID Convention: route-{startId}-{targetId}

  • Start: e.g. entrance-1, entrance-2 (as in <g id="entrances">)
  • Target: e.g. shop-EG-14 (as in <path id="shop-EG-14">)

Option B: Individual Segments with Assignment​

Each line segment has data-from and data-to:

<line id="route-seg-001" x1="1019" y1="989" x2="1019" y2="940" 
      data-from="entrance-1" data-to="junction-middle" stroke="#ccc"/>
<line id="route-seg-002" x1="1019" y1="940" x2="1019" y2="703" 
      data-from="junction-middle" data-to="junction-shop" stroke="#ccc"/>
<line id="route-seg-003" x1="1019" y1="703" x2="990" y2="703" 
      data-from="junction-shop" data-to="shop-EG-14" stroke="#ccc"/>

The system automatically connects the segments into a route.

4. IDs – What Needs to Match? (only Option A/B)​

In Option C (simple network) no IDs are needed. The following table applies only to Option A and B:

ElementExample IDWhere defined?
Entranceentrance-1, entrance-2<g id="entrances"> → <g id="entrance-1">
Shopshop-EG-14, shop-EG-01<path id="shop-EG-14"> in #shops
Junction (intersection)junction-middle, junction-eg-1Freely chosen, only in data-from/to

Important: The IDs in data-from and data-to must match exactly with the IDs in the SVG (case-sensitive).

5. Line Style​

  • Default: stroke="#ccc" or stroke="#999" – discreet, not dominant
  • Stroke-Width: e.g. stroke-width="2" or 3
  • For active routes, the system automatically colors the line orange (#f97316) – you don't need to change anything.

6. Element Types​

ElementUsage
<line x1="..." y1="..." x2="..." y2="..."/>Straight sections
<path d="M..."/>Curves, complex paths

Both are supported.

7. Example (simplified)​

<g id="routes">
  <!-- Route: Main Entrance (entrance-1) to Shop EG-14 -->
  <g id="route-entrance-1-shop-EG-14">
    <line x1="1019" y1="1010" x2="1019" y2="989" stroke="#ccc" stroke-width="2"/>
    <line x1="1019" y1="989" x2="1019" y2="940" stroke="#ccc" stroke-width="2"/>
    <line x1="1019" y1="940" x2="1019" y2="703" stroke="#ccc" stroke-width="2"/>
    <line x1="1019" y1="703" x2="990" y2="703" stroke="#ccc" stroke-width="2"/>
  </g>
  
  <!-- Route: Main Entrance to Shop EG-01 -->
  <g id="route-entrance-1-shop-EG-01">
    <line x1="1019" y1="1010" x2="1019" y2="989" stroke="#ccc" stroke-width="2"/>
    <line x1="1019" y1="989" x2="1076" y2="989" stroke="#ccc" stroke-width="2"/>
    <path d="M1076.61,989.16 L1323.15,879.15" stroke="#ccc" stroke-width="2"/>
  </g>
</g>

8. Export from Illustrator​

  • Export as SVG
  • IDs and data-* attributes are retained as long as you name the elements accordingly.
  • If necessary: After exporting, check that id="routes" and the route IDs are present.

9. AR Markers in the Dashboard (Beta)​

In addition to the SVG routes, AR fields can be maintained in the dashboard for each waypoint to enhance navigation in the Companion App (NOW!):

FieldDescription
Viewing DirectionThe direction the user is facing at this point (N, NE, E, SE, S, SW, W, NW)
Corridor DirectionCorridor direction to the next waypoint (degree)
Distance (m)Distance to the next waypoint in meters
LandmarksVisible reference points (e.g. "Fountain, H&M left")
Shopfront ImageURL to a photo of the shopfront (used as an AR marker for MindAR.js)

Workflow:

  1. Select a waypoint in the dashboard under Center Plans > Floor > Tab "Routes"
  2. Expand panel "AR Navigation (Beta)"
  3. Fill out fields (all optional)
  4. Click the "AR Marker" button in the toolbar: Compiles all shopfront images from the floor into a .mind file (MindAR format)
  5. The .mind file is saved in the Center options as arMindFileUrl

The Companion App uses this data to recognize shopfronts in AR mode and display offers, events, and directional cues directly in the camera view.

Note: The AR fields are stored as additional JSON properties in the existing Waypoint.position field – no schema change, no data loss.

See Also​

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/centerplan/svg-routen