Zum Hauptinhalt springen

SVG-Struktur & Wayfinding

Schnellstart (Das Wichtigste)​

WasID-FormatBeispiel
Shopsshop-XXshop-33, shop-aldi
Logo-Platzhalter (optional)shop-XX-logoshop-33-logo – definiert exakt wo das Logo platziert wird
Servicesservice-YYservice-wc, service-rolltreppe-EG-01
Eingängeentrance-ZZentrance-01, entrance-haupteingang
Displaysdisplay-NNdisplay-04 (nur für Signage/Touchscreens)
Begehbarer Bodenmall-floor-etagemall-floor-eg, mall-floor-og1
Hindernisseobstacle-beschreibung-etageobstacle-spring-eg
Korridor-Pfad (optional)Laufwege, corridor-path oder wegLinie (path/polyline) durch den Gang – verbessert Routen deutlich

Vor dem Export: Alle relevanten Ebenen sichtbar schalten (versteckte Ebenen werden ggf. nicht exportiert).

Korridor-Pfad / Laufwege-Ebene (empfohlen für realistische Routen)​

Option A – Einzelner Pfad/Polylinie (am einfachsten): Zeichne eine Linie (path oder polyline) durch den Gang und gib ihr die ID Laufwege, corridor-path, weg oder gang-mitte. Das Element kann direkt im SVG-Root liegen (nicht in einer Gruppe). Bei mehreren Segmenten: in Illustrator mit Objekt → Pfad → Verbinden zusammenführen.

Option B – Ebene mit Namen:

  1. Erstelle eine Ebene (Gruppe <g>) mit dem Namen Laufwege (oder Korridor, Gänge, Weg)
  2. Zeichne mit dem Pfadwerkzeug überall Linien, wo man laufen kann – beliebig viele Segmente
  3. Keine IDs an einzelnen Pfaden nötig – das System nutzt alle Pfade in der Ebene

Übersicht​

Dieses Dokument erklärt, wie SVG-Dateien für das Wayfinding-System strukturiert werden müssen, damit Shops, Services und andere Elemente automatisch erkannt werden.

Grundprinzip​

Das System erkennt Elemente anhand von:

  1. Layer-Namen (SVG <g> Gruppen mit id Attribut)
  2. Element-IDs (einzelne Shapes mit id Attribut)
  3. CSS-Klassen (optional: class Attribut)
  4. Data-Attribute (optional: data-name, data-category, etc.)

SVG-Struktur​

Basis-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="Lebensmittel" />
    
    <rect id="shop-2" x="200" y="100" width="80" height="60" 
          fill="#4CAF50" 
          data-name="H&M" 
          data-category="Mode" />
  </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="Aufzug" 
          class="elevator" />
    
    <rect id="stairs-1" x="350" y="100" width="30" height="30" 
          fill="#FF9800" 
          data-name="Treppe" 
          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="Haupteingang" />
  </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>

Erkannte Layer-Namen​

1. Shops​

Layer-IDs:

  • #shops (Standard)
  • g[id*="shop"] (z.B. shops-eg, shop-layer)
  • g[id*="SCM-shop"] (SCM-spezifisch)

Element-IDs:

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

Attribute:

  • data-name: Shop-Name (z.B. "Aldi", "H&M")
  • data-category: Kategorie (z.B. "Mode", "Lebensmittel")
  • fill: Farbe (Standard: #4CAF50 grün)

Beispiel:

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

Logo-Platzhalter (optional)​

Für präzise Logo-Platzierung können Platzhalterflächen angelegt werden. Das System sucht zuerst nach shop-XX-logo; wenn vorhanden, wird diese Fläche für Position, Größe und Orientierung des Logos genutzt. Sonst wird die Shop-Fläche shop-XX verwendet.

  • ID: shop-33-logo für Shop shop-33
  • Ebene: Logo-Platzhalter muss über der Shop-Fläche liegen
  • Transparent: Füllung transparent – Platzhalter sind unsichtbar, dienen nur als Vorlage
  • Form: Path, Polygon, Rect, Circle oder Ellipse – alle Formen werden unterstützt:
    • 2D: Rechteck/Polygon → Logo rechteckig; Kreis/Ellipse → Logo rund
    • 3D: Platzhalter definiert Position/Größe; Logo wird rechteckig (Decal) dargestellt
  • Logo sichtbar: Logo wird mit object-contain eingepasst – immer vollständig sichtbar

→ Siehe Illustrator-Anleitung – Logo-Platzhalter

2. Services​

Layer-IDs:

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

Element-IDs:

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

Attribute:

  • data-name: Service-Name (z.B. "Information", "WC", "Geldautomat")
  • fill: Farbe (Standard: #95a5a6 grau)

Beispiel:

<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 (Standard)
  • g[id*="facility"]

Element-IDs:

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

CSS-Klassen:

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

Attribute:

  • data-name: Facility-Name
  • fill: Farbe (Standard: #FF9800 orange)

Beispiel:

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

4. Entrances​

Layer-IDs:

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

Element-IDs:

  • entrance-1, entrance-main, etc.

Attribute:

  • data-name: Eingangs-Name (z.B. "Haupteingang", "Nebeneingang")
  • fill: Farbe (Standard: #3498db blau)

Beispiel:

<g id="entrances">
  <rect id="entrance-main" x="50" y="400" width="60" height="20" 
        fill="#3498db" 
        data-name="Haupteingang" />
</g>

5. Waypoints (Optional)​

Layer-IDs:

  • #waypoints (Standard)
  • #key-waypoints

Element-IDs:

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

Attribute:

  • data-name: Waypoint-Name (optional)
  • fill: Farbe (Standard: #805AD5 lila)

Beispiel:

<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 (nur für Digital Signage)​

Touchscreen-Standorte für die Signage-App – von dort startet die Route, wenn jemand am Screen steht oder den QR-Code scannt. Auf der Center-Website werden Displays nicht angezeigt.

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

Typische Struktur in Illustrator/Export: Eine Gruppe Displays mit Untergruppen display-01, display-02 („Sie sind hier“-Marker). Das System erkennt sowohl direkte Element-IDs als auch Elemente, die innerhalb einer Gruppe mit ID Displays liegen; auch data-name wird ausgewertet.

7. Connectors (Etagenverbindungen)​

Für Multi-Floor-Routing werden Rolltreppe, Treppe und Aufzug automatisch erkannt. Am einfachsten: in der Services-Gruppe mit passendem Präfix.

Empfohlene IDs (in Services-Gruppe):

  • Rolltreppe: service-rolltreppe-EG-01, service-rolltreppe-UG-01
  • Treppe: service-treppenhaus-EG-01, service-treppe-OG1-01
  • Aufzug: service-aufzug-EG-01, service-aufzug-EG-02

Diese werden beim „Waypoints + Verbindungen automatisch" als Waypoint-Typ escalator, stairs, elevator angelegt.

8. Begehbarer Mall-Boden​

Der begehbare Bereich (wo Besucher laufen können) muss als zusammengesetzte Fläche definiert sein – möglichst genau, nicht nur optisch. Die Wege werden darauf eingezeichnet.

Konvention:

  • Element-ID: mall-floor-etage (z. B. mall-floor-eg, mall-floor-og1)
  • Kann ein <path>, <polygon> oder <rect> sein, oder eine Gruppe <g> mit einem Shape darin

Beispiel:

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

9. Routen (#routes)​

Für die Wegfindung auf der Center-Website können Routen als Linien/Pfade im SVG hinterlegt werden. Der Grafiker zeichnet die Wege in Illustrator – das System hebt sie bei Bedarf hervor.

Gruppe: <g id="routes"> – auf gleicher Ebene wie shops, entrances, services.

Variante A (empfohlen): Route-Gruppen mit ID route-{startId}-{zielId}:

<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>

Variante C (empfohlen): Einfaches Netz – nur line und path in #routes, keine IDs nötig. Das System verbindet Endpunkte automatisch.

Variante B: Einzelne Segmente mit data-from und data-to:

<line id="route-seg-001" x1="1019" y1="989" x2="1019" y2="940" 
      data-from="entrance-1" data-to="junction-mitte" stroke="#ccc"/>

IDs müssen exakt mit den Element-IDs im SVG übereinstimmen (z.B. entrance-1, shop-EG-14).

→ Siehe SVG-Routen (Grafiker-Anleitung) für Details.

10. Unsichtbare Hindernisse​

Routen sollen bestimmte Bereiche nicht durchqueren (z. B. Säulen, Brunnen). Diese technischen Hindernisse werden nicht auf der Karte angezeigt, blockieren aber die automatische Verbindungsführung.

Konvention:

  • Element-IDs: obstacle-beschreibung-etage (z. B. obstacle-spring-eg, obstacle-saeule-eg)
  • Alternativ: obstacle-*, *-obstacle-* oder CSS-Klasse wayfinding-obstacle
  • Optional: visibility="hidden" oder opacity="0", damit die Fläche unsichtbar bleibt

Beispiel:

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

Multi-Floor Support​

Floor-spezifische Layer:​

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800">
  
  <!-- ERDGESCHOSS (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>

  <!-- 1. OBERGESCHOSS (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>

Erkannte Floor-Konventionen:

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

Farb-Konventionen​

Element-TypStandard-FarbeHex-Code
ShopsGrün#4CAF50
ServicesGrau#95a5a6
FacilitiesOrange#FF9800
EntrancesBlau#3498db
WaypointsLila#805AD5
CorridorsHellgrau#E0E0E0
ParkingDunkelgrau#A0AEC0

Größen-Empfehlungen​

Element-TypMin. BreiteMin. HöheEmpfohlen
Shops40px30px80x60px
Services20px20px40x40px
Facilities20px20px30x30px
Entrances30px15px60x20px
Waypoints5px Radius-5-10px Radius

Checkliste für SVG-Erstellung​

  • ViewBox definiert (z.B. viewBox="0 0 1000 800")
  • Alle relevanten Ebenen sichtbar vor dem Export
  • Layer-Gruppen mit korrekten IDs (#shops, #services, #entrances, etc.)
  • Element-IDs nach Konvention (shop-33, service-wc, entrance-01)
  • (Optional) Logo-Platzhalter shop-XX-logo für präzise Logo-Positionierung
  • Begehbarer Boden als mall-floor-eg (zusammengesetzte Fläche, möglichst genau)
  • Hindernisse als obstacle-beschreibung-etage (z.B. obstacle-spring-eg)
  • data-name für alle wichtigen Elemente
  • Größen ausreichend (min. 20x20px)
  • Multi-Floor: Floor-Gruppen korrekt benannt

Tools für SVG-Erstellung​

Adobe Illustrator – empfohlene Ebenenstruktur:​

EG (oder floor-eg)
├── Displays      → display-04, display-03, …
├── Services      → service-wc, service-rolltreppe-EG-01, …
├── Shops         → shop-33, shop-34, …
├── Shops-Logos   → shop-33-logo, shop-34-logo, … (optional, für präzise Logo-Platzierung)
├── Entrances     → entrance-01, entrance-02
└── Sonstiges     → mall-floor-eg, obstacle-*, Foodcourt (als service-foodcourt)

Wichtig: Vor dem Export alle relevanten Ebenen sichtbar schalten (Augensymbol aktiv).

Adobe Illustrator – Export:​

  1. Ebenen-Namen = Layer-IDs
  2. Objekt-Namen = Element-IDs
  3. Export: "SVG" → "Presentation Attributes"

Inkscape:​

  1. Ebenen-ID setzen (Rechtsklick → Ebenen-Eigenschaften)
  2. Objekt-ID setzen (Rechtsklick → Objekt-Eigenschaften)
  3. Export: "Optimiertes SVG"

Figma:​

  1. Frames = Gruppen
  2. Layer-Namen = IDs
  3. Export: "SVG"

Upload & Verarbeitung​

1. SVG hochladen:​

Dashboard → Centerpläne → [Center] → [Etage] → SVG-Centerplan

2. Automatische Erkennung:​

  • System analysiert SVG-Struktur
  • Extrahiert Shops, Services, Facilities
  • Zeigt Vorschau mit erkannten Elementen

3. Mapping:​

Dashboard → Centerpläne → Shop-Mapping
  • Shops/Services per Klick auf Fläche → Modal → Auswahl platzieren
  • Koordinaten werden automatisch gespeichert

Troubleshooting​

Problem: Nicht alle Shops/Services/Eingänge/Displays erkannt​

Mögliche Ursachen:

  1. Illustrator-Export: Versteckte Ebenen (Augensymbol durchgestrichen) werden ggf. nicht exportiert.

    • Lösung: Vor dem Export alle relevanten Ebenen sichtbar schalten, oder Export-Option „Alle Ebenen einbeziehen" aktivieren.

  2. Groß-/Kleinschreibung: Das System erkennt u.a. #shops, #Shops, #displays, #Displays, #entrances, #Entrances. Bei abweichenden IDs (z.B. nur #Shops) sollte es funktionieren.

  3. Namenskonventionen: Gruppen-IDs müssen den Präfix enthalten:

    • Shops: shop-33, shop-34 oder g[id^="shop-"]
    • Services: service-babyflasche, service-rolltreppe-EG-01 etc.
    • Eingänge: entrance-01, entrance-02
    • Displays: display-04, display-03

  4. Struktur: Elemente in „Sonstiges" ohne passenden Präfix werden nicht erkannt. Foodcourt z.B. als service-foodcourt in Services anlegen.

Problem: Shops werden nicht erkannt​

Lösung:

  • Prüfe Layer-ID: Muss shops oder shop enthalten
  • Prüfe Element-IDs: Müssen eindeutig sein
  • Prüfe Größe: Min. 40x30px

Problem: Falsche Farben​

Lösung:

  • Setze fill Attribut explizit
  • Verwende Hex-Codes statt RGB

Problem: Multi-Floor funktioniert nicht​

Lösung:

  • Floor-Gruppen müssen floor, etage, level oder stock im ID enthalten
  • Shops müssen innerhalb der Floor-Gruppe sein

Problem: Laufwege-Ebene wird nicht erkannt​

Lösung:

  1. Ebenen-Name: Die Ebene muss exakt Laufwege, Korridor, Gänge oder Weg heißen (oder einen dieser Begriffe enthalten). In Illustrator wird der Ebenen-Name zur SVG-Gruppen-ID.
  2. Sichtbarkeit: Vor dem Export alle relevanten Ebenen sichtbar schalten.
  3. Pfade in der Ebene: Die Ebene muss mindestens einen <path> oder <polyline> mit gültigen Punkten enthalten.
  4. Debug-Modus: DEBUG_WAYFINDING=1 in der Umgebung setzen – dann erscheinen in der Konsole Hinweise, ob die Ebene gefunden wurde.

Weitere Dokumentation​

  • Centerpläne: Siehe Sidebar „Centerpläne" (Übersicht, Illustrator-Anleitung, Quick-Start)
  • Support: sb@schickma.de

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