SVG Structure & Wayfinding

Quick Start (The Essentials)

What	ID Format	Example
Shops	shop-XX	shop-33, shop-aldi
Logo Placeholder (optional)	shop-XX-logo	shop-33-logo – defines exactly where the logo is placed
Services	service-YY	service-wc, service-escalator-EG-01
Entrances	entrance-ZZ	entrance-01, entrance-main
Displays	display-NN	display-04 (only for signage/touchscreens)
Walkable Floor	mall-floor-level	mall-floor-eg, mall-floor-og1
Obstacles	obstacle-description-level	obstacle-spring-eg
Corridor Path (optional)	Paths, corridor-path or way	Line (path/polyline) through the corridor – significantly improves routes

Before Export: Make all relevant layers visible (hidden layers may not be exported).

Plan comes as PNG/JPEG? Embed raster image in SVG + polygon layer on top. Upload & segmentation: Hybrid Center Plan · Generate with AI: AI Master Prompt (DE/EN).

Corridor Path / Walkways Layer (recommended for realistic routes)

Option A – Single Path/Polyline (easiest): Draw a line (path or polyline) through the corridor and give it the ID Paths, corridor-path, way or corridor-center. The element can lie directly in the SVG root (not in a group). For multiple segments: merge in Illustrator using Object → Path → Join.

Option B – Layer with Name:

1. Create a Layer (Group <g>) named Paths (or Corridor, Walkways, Way)
2. Use the Pen Tool to draw lines wherever one can walk – as many segments as needed
3. No IDs needed on individual paths – the system uses all paths in the layer

---

Overview

This document explains how SVG files must be structured for the wayfinding system to automatically recognize shops, services, and other elements.

---

Basic Principle

The system recognizes elements by:

1. Layer Names (SVG <g> groups with id attribute)
2. Element IDs (individual shapes with id attribute)
3. CSS Classes (optional: class attribute)
4. Data Attributes (optional: data-name, data-category, etc.)

---

SVG Structure

Base Template:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800">
  
  <!-- 1. SHOPS LAYER -->
  <g id="shops">
    <rect id="shop-1" x="100" y="100" width="80" height="60" 
          fill="#4CAF50" 
          data-name="Aldi" 
          data-category="Groceries" />
    
    <rect id="shop-2" x="200" y="100" width="80" height="60" 
          fill="#4CAF50" 
          data-name="H&M" 
          data-category="Fashion" />
  </g>

  <!-- 2. SERVICES LAYER -->
  <g id="services">
    <rect id="service-1" x="100" y="200" width="40" height="40" 
          fill="#95a5a6" 
          data-name="Information" />
    
    <circle id="service-2" cx="200" cy="220" r="20" 
            fill="#95a5a6" 
            data-name="WC" />
  </g>

  <!-- 3. FACILITIES LAYER -->
  <g id="facilities">
    <rect id="elevator-1" x="300" y="100" width="30" height="30" 
          fill="#FF9800" 
          data-name="Elevator" 
          class="elevator" />
    
    <rect id="stairs-1" x="350" y="100" width="30" height="30" 
          fill="#FF9800" 
          data-name="Stairs" 
          class="stairs" />
  </g>

  <!-- 4. ENTRANCES LAYER -->
  <g id="entrances">
    <rect id="entrance-1" x="50" y="400" width="60" height="20" 
          fill="#3498db" 
          data-name="Main Entrance" />
  </g>

  <!-- 5. WAYPOINTS LAYER (optional) -->
  <g id="waypoints">
    <circle id="wp-1" cx="150" cy="150" r="5" fill="#805AD5" />
    <circle id="wp-2" cx="250" cy="150" r="5" fill="#805AD5" />
  </g>

</svg>

---

Recognized Layer Names

1. Shops

Layer IDs:

• #shops (default)
• g[id*="shop"] (e.g., shops-eg, shop-layer)
• g[id*="SCM-shop"] (SCM-specific)

Element IDs:

• shop-1, shop-2, etc.
• SCM-shop-EG-1, SCM-shop-EG-2, etc.

Attributes:

• data-name: Shop Name (e.g., "Aldi", "H&M")
• data-category: Category (e.g., "Fashion", "Groceries")
• fill: Color (default: #4CAF50 green)

Example:

<g id="shops">
  <rect id="shop-aldi" x="100" y="100" width="80" height="60" 
        fill="#4CAF50" 
        data-name="Aldi" 
        data-category="Groceries" />
</g>

Logo Placeholder (optional)

For precise logo placement, placeholder areas can be created. The system first looks for shop-XX-logo; if present, this area is used for the position, size, and orientation of the logo. Otherwise, the shop area shop-XX is used.

• ID: shop-33-logo for shop shop-33
• Layer: Logo placeholder must be above the shop area
• Transparent: Fill transparent – placeholders are invisible, serving only as templates
• Shape: Path, Polygon, Rect, Circle or Ellipse – all shapes are supported:
  • 2D: Rectangle/Polygon → Square logo; Circle/Ellipse → Round logo
  • 3D: Placeholder defines position/size; logo is depicted as rectangular (decal)
• Logo visible: Logo is fitted with object-contain – always fully visible

→ See Illustrator Guide – Logo Placeholder

---

2. Services

Layer IDs:

• #services (default)
• g[id*="service"]

Element IDs:

• service-1, service-2, etc.
• info-1, wc-1, atm-1, etc.

Attributes:

• data-name: Service Name (e.g., "Information", "WC", "ATM")
• fill: Color (default: #95a5a6 gray)

Example:

<g id="services">
  <rect id="service-info" x="100" y="200" width="40" height="40" 
        fill="#95a5a6" 
        data-name="Information" />
  
  <circle id="service-wc" cx="200" cy="220" r="20" 
          fill="#95a5a6" 
          data-name="WC" />
</g>

---

3. Facilities

Layer IDs:

• #facilities (default)
• g[id*="facility"]

Element IDs:

• elevator-1, stairs-1, toilet-1, etc.

CSS Classes:

• .elevator, .stairs, .toilet, .info

Attributes:

• data-name: Facility Name
• fill: Color (default: #FF9800 orange)

Example:

<g id="facilities">
  <rect id="elevator-1" x="300" y="100" width="30" height="30" 
        fill="#FF9800" 
        data-name="Elevator" 
        class="elevator" />
  
  <rect id="stairs-1" x="350" y="100" width="30" height="30" 
        fill="#FF9800" 
        data-name="Stairs" 
        class="stairs" />
</g>

---

4. Entrances

Layer IDs:

• #entrances (default)
• g[id*="entrance"]

Element IDs:

• entrance-1, entrance-main, etc.

Attributes:

• data-name: Entrance Name (e.g., "Main Entrance", "Side Entrance")
• fill: Color (default: #3498db blue)

Example:

<g id="entrances">
  <polygon id="entrance-1" points="1045 146 1058 132 1032 133 1045 146" fill="#e4013e" />
  <rect id="entrance-main" x="50" y="400" width="60" height="20" 
        fill="#3498db" 
        data-name="Main Entrance" />
</g>

Illustrator often provides Polygons with IDs entrance-1, entrance-2, … in the group #entrances — the system recognizes these for maps, auto waypoints, and SVG routing.

---

5. Waypoints (Optional)

Layer IDs:

• #waypoints (default)
• #key-waypoints

Element IDs:

• wp-1, wp-2, etc.
• waypoint-1, waypoint-2, etc.

Attributes:

• data-name: Waypoint Name (optional)
• fill: Color (default: #805AD5 purple)

Example:

<g id="waypoints">
  <circle id="wp-1" cx="150" cy="150" r="5" fill="#805AD5" />
  <circle id="wp-2" cx="250" cy="150" r="5" fill="#805AD5" />
</g>

---

6. Displays (for Digital Signage only)

Touchscreen locations for the signage app – routes start there when someone stands at the screen or scans the QR code. Displays are not shown on the Center website.

Layer IDs: #displays, #Displays
Element IDs: display-01, display-02, display-03, etc.

Typical structure in Illustrator/export: A group Displays with subgroups display-01, display-02 ("You are here" markers). The system recognizes both direct element IDs and elements within a group with ID Displays; also data-name is evaluated.

---

7. Connectors (Floor Connections)

For multi-floor routing, Escalators, Stairs, and Elevators are automatically recognized. The easiest way: in the Services group with the appropriate prefix.

Recommended IDs (in Services group):

• Escalator: service-escalator-EG-01, service-escalator-UG-01
• Stairs: service-stairwell-EG-01, service-stair-OG1-01
• Elevator: service-elevator-EG-01, service-elevator-EG-02

These will be created as waypoint type escalator, stairs, elevator during "Waypoints + Connections automatically."

---

8. Walkable Mall Floor

The walkable area (where visitors can walk) must be defined as a composite area – as accurately as possible, not just visually. Paths will be marked on it.

Convention:

• Element ID: mall-floor-level (e.g., mall-floor-eg, mall-floor-og1)
• Can be a <path>, <polygon> or <rect>, or a group <g> with a shape inside

Example:

<path id="mall-floor-eg" d="M 0,0 L 1000,0 L 1000,800 L 0,800 Z" />

---

9. Routes (#routes)

For navigation on the Center website, routes can be stored as lines/paths in the SVG. The graphic designer draws the paths in Illustrator – the system highlights them when needed.

Group: <g id="routes"> – at the same level as shops, entrances, services.

Variant A (recommended): Route groups with ID route-{startId}-{destinationId}:

<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="990" y2="703" stroke="#ccc" stroke-width="2"/>
</g>

Variant C (recommended): Simple network – only line and path in #routes, no IDs needed. The system automatically connects endpoints.

Variant B: Individual segments with 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-center" stroke="#ccc"/>

IDs must exactly match the element IDs in the SVG (e.g., entrance-1, shop-EG-14).

→ See SVG Routes (Graphic Designer Guide) for details.

---

10. Invisible Obstacles

Routes should not pass through certain areas (e.g., columns, fountains). These technical obstacles are not displayed on the map but block automatic connections.

Convention:

• Element IDs: obstacle-description-level (e.g., obstacle-spring-eg, obstacle-column-eg)
• Alternatively: obstacle-*, *-obstacle-* or CSS class wayfinding-obstacle
• Optional: visibility="hidden" or opacity="0" so that the area remains invisible

Example:

<rect id="obstacle-spring-eg" x="400" y="300" width="50" height="50" 
      class="wayfinding-obstacle" opacity="0" />

---

Multi-Floor Support

Floor-specific Layers:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800">
  
  <!-- GROUND FLOOR (EG) -->
  <g id="floor-eg">
    <g id="shops-floor-eg">
      <rect id="shop-eg-1" x="100" y="100" width="80" height="60" 
            fill="#4CAF50" data-name="Aldi EG" />
    </g>
    
    <g id="services-floor-eg">
      <rect id="service-eg-1" x="100" y="200" width="40" height="40" 
            fill="#95a5a6" data-name="Info EG" />
    </g>
  </g>

  <!-- 1ST FLOOR (OG1) -->
  <g id="floor-og1">
    <g id="shops-floor-og1">
      <rect id="shop-og1-1" x="100" y="100" width="80" height="60" 
            fill="#4CAF50" data-name="H&M OG1" />
    </g>
  </g>

</svg>

Recognized Floor Conventions:

• floor-eg, floor-og1, floor-og2, floor-ug1
• level-0, level-1, level-2
• stock-0, stock-1, stock-2

---

Color Conventions

Element Type	Default Color	Hex Code
Shops	Green	#4CAF50
Services	Gray	#95a5a6
Facilities	Orange	#FF9800
Entrances	Blue	#3498db
Waypoints	Purple	#805AD5
Corridors	Light Gray	#E0E0E0
Parking	Dark Gray	#A0AEC0

---

Size Recommendations

Element Type	Min. Width	Min. Height	Recommended
Shops	40px	30px	80x60px
Services	20px	20px	40x40px
Facilities	20px	20px	30x30px
Entrances	30px	15px	60x20px
Waypoints	5px Radius	-	5-10px Radius

---

SVG Creation Checklist

• ViewBox defined (e.g., viewBox="0 0 1000 800")
• All relevant layers visible before export
• Layer Groups with correct IDs (#shops, #services, #entrances, etc.)
• Element IDs according to convention (shop-33, service-wc, entrance-01)
• (Optional) Logo Placeholder shop-XX-logo for precise logo positioning
• Walkable Floor as mall-floor-eg (composite area, as accurate as possible)
• Obstacles as obstacle-description-level (e.g., obstacle-spring-eg)
• data-name for all key elements
• Sizes sufficient (min. 20x20px)
• Multi-Floor: Floor groups correctly named

---

Tools for SVG Creation

Adobe Illustrator – Recommended Layer Structure:

EG (or floor-eg)
├── Displays      → display-04, display-03, …
├── Services      → service-wc, service-escalator-EG-01, …
├── Shops         → shop-33, shop-34, …
├── Shops-Logos   → shop-33-logo, shop-34-logo, … (optional, for precise logo placement)
├── Entrances     → entrance-01, entrance-02
└── Others        → mall-floor-eg, obstacle-*, Foodcourt (as service-foodcourt)

Important: Make all relevant layers visible before export (eye symbol active).

Adobe Illustrator – Export:

1. Layer names = Layer IDs
2. Object names = Element IDs
3. Export: "SVG" → "Presentation Attributes"

Inkscape:

1. Set Layer ID (Right-click → Layer Properties)
2. Set Object ID (Right-click → Object Properties)
3. Export: "Optimized SVG"

Figma:

1. Frames = Groups
2. Layer Names = IDs
3. Export: "SVG"

---

Upload & Processing

1. Upload SVG:

Dashboard → Center Plans → [Center] → [Floor] → SVG-Center Plan

2. Automatic Recognition:

• System analyzes SVG structure
• Extracts shops, services, facilities
• Shows preview with recognized elements

3. Mapping:

Dashboard → Center Plans → Shop Mapping

• Shops/Services by clicking on area → Modal → Place selection
• Coordinates are automatically saved

---

Troubleshooting

Problem: Not all shops/services/entrances/displays recognized

Possible Causes:

1. Illustrator Export: Hidden layers (eye symbol crossed out) may not be exported.

   • Solution: Make all relevant layers visible before export, or enable "Include all layers" export option.

2. Upper/Lowercase: The system recognizes #shops, #Shops, #displays, #Displays, #entrances, #Entrances. If IDs differ (e.g., only #Shops), it should work.

3. Naming Conventions: Group IDs must contain the prefix:

   • Shops: shop-33, shop-34 or g[id^="shop-"]
   • Services: service-bottle, service-escalator-EG-01 etc.
   • Entrances: entrance-01, entrance-02
   • Displays: display-04, display-03

4. Structure: Elements in "Others" without the correct prefix will not be recognized. Foodcourt, for instance, should be created as service-foodcourt in Services.

Problem: Shops not recognized

Solution:

• Check Layer ID: Must contain shops or shop
• Check Element IDs: Must be unique
• Check Size: Min. 40x30px

Problem: Incorrect Colors

Solution:

• Set fill attribute explicitly
• Use hex codes instead of RGB

Problem: Multi-Floor not working

Solution:

• Floor groups must contain floor, etage, level or stock in the ID
• Shops must be within the floor group

Problem: Walkways layer not recognized

Solution:

1. Layer Name: The layer must be exactly Paths, Corridor, Walkways, or Way (or contain one of these terms). In Illustrator, the layer name becomes the SVG group ID.
2. Visibility: Make all relevant layers visible before export.
3. Paths in the Layer: The layer must contain at least one <path> or <polyline> with valid points.
4. Debug Mode: Set DEBUG_WAYFINDING=1 in the environment – console will show hints whether the layer was found.

---

Further Documentation

• Center Plans: See sidebar “Center Plans" (Overview, Illustrator Guide, Quick Start)
• Technik (cockpitOS): Saad Badr, Technischer Leiter · technik@schickma.de