Skip to main content

SVG-Routen – Anleitung für Grafiker

Damit die Wegfindung auf der Center-Website funktioniert, müssen die Routen im SVG enthalten sein. Sie zeichnen die Wege in Illustrator – das System hebt sie bei Bedarf hervor.

1. Wo zeichnen?​

Fügen Sie eine Gruppe mit der ID routes hinzu:

<g id="routes">
  <!-- Hier kommen Ihre Linien und Pfade -->
</g>

Diese Gruppe sollte auf gleicher Ebene wie shops, entrances, services liegen (im Root oder in einer übergeordneten Gruppe).

2. Variante C: Einfaches Netz (empfohlen)​

Am wenigsten Aufwand: Zeichnen Sie einfach ein Netz aus Linien und Pfaden überall dort, wo man laufen kann. Keine IDs, keine data-from/data-to – nur line und path in der Gruppe #routes.

<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"/>
  <!-- Weitere Linien durch Gänge, Kreuzungen, etc. -->
</g>

Das System verbindet automatisch Endpunkte, die sich berühren oder nahe beieinander liegen, und berechnet den kürzesten Weg von Start zu Ziel.

3. Weitere Varianten (optional)​

Variante A: Route-Gruppen​

Jede Route (z.B. Haupteingang → Shop XY) ist eine eigene Gruppe:

<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-Konvention: route-{startId}-{zielId}

  • Start: z.B. entrance-1, entrance-2 (wie in <g id="entrances">)
  • Ziel: z.B. shop-EG-14 (wie in <path id="shop-EG-14">)

Variante B: Einzelne Segmente mit Zuordnung​

Jedes Linien-Segment hat 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"/>
<line id="route-seg-002" x1="1019" y1="940" x2="1019" y2="703" 
      data-from="junction-mitte" 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"/>

Das System verbindet die Segmente automatisch zu einer Route.

4. IDs – was muss passen? (nur Variante A/B)​

Bei Variante C (einfaches Netz) sind keine IDs nötig. Die folgende Tabelle gilt nur für Variante A und B:

ElementBeispiel-IDWo definiert?
Eingangentrance-1, entrance-2<g id="entrances"> → <g id="entrance-1">
Shopshop-EG-14, shop-EG-01<path id="shop-EG-14"> in #shops
Junction (Kreuzung)junction-mitte, junction-eg-1Frei wählbar, nur in data-from/to

Wichtig: Die IDs in data-from und data-to müssen exakt mit den IDs im SVG übereinstimmen (Groß-/Kleinschreibung).

5. Linien-Stil​

  • Standard: stroke="#ccc" oder stroke="#999" – dezent, nicht dominant
  • Stroke-Width: z.B. stroke-width="2" oder 3
  • Bei aktiver Route färbt das System die Linie automatisch orange (#f97316) – Sie müssen nichts ändern

6. Element-Typen​

ElementVerwendung
<line x1="..." y1="..." x2="..." y2="..."/>Gerade Strecken
<path d="M..."/>Kurven, komplexe Wege

Beide werden unterstützt.

7. Beispiel (vereinfacht)​

<g id="routes">
  <!-- Route: Haupteingang (entrance-1) zu 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: Haupteingang zu 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 aus Illustrator​

  • Export als SVG
  • IDs und data-* Attribute bleiben erhalten, wenn Sie die Elemente entsprechend benennen
  • Bei Bedarf: Nach dem Export prüfen, ob id="routes" und die Route-IDs vorhanden sind

9. AR-Marker im Dashboard (Beta)​

Zusätzlich zu den SVG-Routen können im Dashboard pro Waypoint AR-Felder gepflegt werden, die die Navigation in der Companion-App (NOW!) verbessern:

FeldBeschreibung
BlickrichtungIn welche Richtung schaut der Nutzer an diesem Punkt (N, NO, O, SO, S, SW, W, NW)
Gang-RichtungKorridor-Richtung zum nächsten Wegpunkt (Gradzahl)
Distanz (m)Entfernung zum nächsten Wegpunkt in Metern
LandmarksSichtbare Orientierungspunkte (z.B. "Brunnen, H&M links")
Shopfront-BildURL zu einem Foto der Ladenfront (wird als AR-Marker fuer MindAR.js genutzt)

Workflow:

  1. Im Dashboard unter Centerpläne > Etage > Tab "Routen" einen Waypoint auswählen
  2. Panel "AR-Navigation (Beta)" aufklappen
  3. Felder ausfüllen (alle optional)
  4. Button "AR-Marker" in der Toolbar klickt: Kompiliert alle Shopfront-Bilder der Etage zu einer .mind-Datei (MindAR-Format)
  5. Die .mind-Datei wird in den Center-Optionen als arMindFileUrl hinterlegt

Die Companion-App nutzt diese Daten, um im AR-Modus Ladenfronten zu erkennen und dem Nutzer Angebote, Events und Richtungshinweise direkt im Kamera-Bild anzuzeigen.

Hinweis: Die AR-Felder werden als zusätzliche JSON-Eigenschaften im bestehenden Waypoint.position-Feld gespeichert – kein Schema-Change, kein Datenverlust.

Siehe auch​

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