Skip to main content

SVG-Struktur & Technische Details

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

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>

🏢 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")
  • Layer-Gruppen mit korrekten IDs (#shops, #services, etc.)
  • Element-IDs eindeutig und sprechend (shop-aldi, service-info)
  • data-name Attribute für alle wichtigen Elemente
  • Farben gemäß Konventionen
  • Größen ausreichend (min. 20x20px)
  • Multi-Floor: Floor-Gruppen korrekt benannt
  • Keine überlappenden IDs zwischen Floors

🛠️ Tools für SVG-Erstellung​

Adobe Illustrator:​

  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 → Wayfinding → SVG-Karte erstellen

2. Automatische Erkennung:​

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

3. Mapping:​

Dashboard → Wayfinding → Karten-Mapping
  • Shops/Services per Drag & Drop auf Karte platzieren
  • Koordinaten werden automatisch gespeichert

🐛 Troubleshooting​

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

📞 Support​

Bei Fragen oder Problemen:

  • Dokumentation: /docs/wayfinding/
  • Beispiel-SVGs: /docs/wayfinding/examples/
  • API-Referenz: /docs/api/wayfinding.md