SVG Style Guide

SVG Style Guide: Uebersicht

Dieses System umfasst 5 SVG-Typen mit jeweils eigenen Spezifikationen:

Grundprinzipien

1. Stroke-first: Icons sind stroke-basiert, nicht fill-basiert
2. currentColor: Icons erben die Textfarbe des Kontexts
3. Keine externen Abhaengigkeiten: Kein CSS, keine Fonts (ausser in Illustrationen)
4. Metadaten-Pflicht: Jedes SVG traegt einen desc-Block
5. Minimalismus: So wenige Pfade wie moeglich, keine Dekoration

Farbpalette

Primaerfarben

Sekundaerfarben

Rosa-Abstufungen (Brand/Logo)

Das Logo verwendet triangulierte Flaechen mit Rosa-Abstufungen:

#946388  #956488  #96658a  #97668a  #97668b  #97678b
#98668a  #99688c  #9b6a8f  #9b6d8f  #9e7193  #9e7391
#a17597  #a27897  #a9819f  #ab7da0  #ad82a3  #af88a5
#ccafc9  #c6a7c1

Zentrum: dunkler (#946388), Rand: heller (#ccafc9). Gradient von innen nach aussen.

Opacity-Stufen (Component Icons)

Illustration-Opacities

Typ 1: Component Icons

Universelle Fach-Icons fuer Themen wie Infrastruktur, Daten, Prozesse, Logik, Dienste, Applikationen, Steuerung, UI und Konzepte.

Spezifikation

Template

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 40 40" width="40" height="40"
     fill="none" stroke="currentColor" stroke-width="0.75">
  <desc>
artefakt:<name>
source:https://karlkratz.de/assets/svg/<name>.svg
creator:Karl Kratz https://karlkratz.de/karl-kratz
title:<Titel>
  </desc>
  <!-- Geometrie hier -->
</svg>

Gestaltungsregeln

1. Nur stroke: Hauptform durch Linien, keine gefuellten Flaechen (Ausnahme: kleine Akzentpunkte mit fill="currentColor")
2. Opacity fuer Tiefe: Sekundaere Elemente mit opacity="0.4"–"0.6", nicht durch andere Farben
3. Zentriert: Motiv visuell zentriert in der 40×40 Box
4. Padding: Mindestens 8px Abstand zum Rand (Zeichenflaeche effektiv 24×24 innerhalb)
5. Max. Komplexitaet: Nicht mehr als ~10 Pfad-Elemente pro Icon
6. Abweichende stroke-width: Wenn ein Element betont werden soll, stroke-width="1.5" (maximal doppelt)
7. Keine Schatten, keine Gradienten, kein Filter

Erlaubte Elemente

rect, circle, line, path, polyline, polygon

Nicht erlaubt: text, image, use, clipPath, filter, linearGradient

Kategorien (9)

Typ 2: Nav Icons

Navigations-Icons fuer Menues, Header und interaktive Elemente. Orientiert an Feather-Icons-Aesthetik.

Spezifikation

Template

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24" width="24" height="24"
     fill="none" stroke="currentColor" stroke-width="1.5"
     stroke-linecap="round" stroke-linejoin="round">
  <!-- Geometrie hier -->
</svg>

Unterschied zu Component Icons

Gestaltungsregeln

1. Dickerer Strich: 1.5 statt 0.75 — muss auf kleiner Flaeche lesbar sein
2. Einfacher: Weniger Detail als Component Icons, maximal 5 Pfad-Elemente
3. Optische Groesse 18×18: Motiv innerhalb eines 18×18 Bereichs zentriert (3px Padding)
4. Kleine Akzente: Punkte als fill="currentColor" stroke="none" erlaubt (z.B. Chat-Dots)

Pfade

Bestand

icon-nav-anmelden, icon-nav-abmelden, icon-nav-erstgespraech, icon-nav-karlscore, icon-nav-ki-gemeinschaft, icon-nav-ki-wissen, icon-nav-systemisch-denken, icon-nav-beratung, icon-nav-chat, icon-nav-forum, icon-nav-profil, icon-nav-start, icon-nav-termine, icon-nav-videos, icon-nav-wissen

Typ 3: Illustrationen

Groessere visuelle Erklaerungen fuer Konzepte, System-Diagramme und Interface-Mockups. Drei Subtypen.

Spezifikation (alle Subtypen)

Template

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 390" fill="none">
  <desc>
artefakt:<name>
source:/assets/svg/<name>.svg
creator:Karl Kratz https://karlkratz.de/karl-kratz
  </desc>
  <rect x="0" y="0" width="520" height="390" fill="#ffffff"/>
  <text x="260" y="28" font-family="sans-serif" font-size="14"
        font-weight="600" fill="#21588F" text-anchor="middle">Titel</text>
  <!-- Inhalt -->
</svg>

Subtyp A: Concept (10 Stueck)

Praefix: svg-illustration-concept-*

Abstrakte Visualisierungen von Ideen und Prinzipien. Weniger technisch, mehr erklaerend.

• Beispiele: rag-ueberblick, embedding-raum, wissen-zentral, lokaler-betrieb
• Typische Elemente: Kaesten mit Labels, Pfeile, gruppierte Bereiche

Subtyp B: Diagram (16 Stueck)

Praefix: svg-illustration-diagram-*

Technische Architektur- und Ablaufdiagramme. Schichtmodelle, Pipelines, Datenfluss.

• Beispiele: system-architektur, ingestion-pipeline, query-pipeline, arango-graph
• Typische Elemente: Geschichtete Rechtecke, Verbindungslinien mit Pfeilen, Beschriftungen
• Schicht-Pattern: fill="#21588F" fill-opacity="0.08" fuer Hintergrund-Layer

Subtyp C: Interface (16 Stueck)

Praefix: svg-illustration-interface-*

Mockups von Benutzeroberflaechen und Applikations-Ansichten.

• Beispiele: chat, crm, kalender, email, wissensdatenbank, webshop
• Typische Elemente: Browser-Fenster-Rahmen, Formulare, Listen, Buttons

Typografie in Illustrationen

Gestaltungsregeln

1. Zwei-Farben-System: Nur #21588F und #966489 als Primaerfarben
2. Weisser Hintergrund: Immer #ffffff Rect als erste Ebene
3. Keine Rasterbilder: Alles vektorisiert
4. Strukturierte Kommentare: HTML-Kommentare <!-- Bereich --> fuer Abschnitte
5. Pfeile: Quadratische Bezier-Kurven (Q) + Polygon-Spitze (<polygon points="..." fill="#21588F"/>)
6. Border-Radius: rx="4"–"6" fuer Rechtecke

Typ 4: Brand / Logo

Geodaetische Formen und Markenzeichen. Hohe visuelle Dichte durch triangulierte Flaechen.

Spezifikation

Varianten

Geodaetische Kugel (Linien-Variante)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
  <g fill="none" stroke="#966489" stroke-width="0.3" stroke-linecap="round">
    <line x1="..." y1="..." x2="..." y2="..."/>
    <!-- Knotenpunkte durch Linien verbunden -->
  </g>
</svg>

Logo (Triangulierte Flaechen)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="80" height="80">
  <g stroke="#966489" stroke-width="0.2" stroke-opacity="0.3" stroke-linejoin="round">
    <path d="M60.0 60.0L66.0 60.0L63.0 65.2Z" fill="#96658a"/>
    <!-- Triangulierte Facetten von Zentrum nach aussen -->
  </g>
</svg>

Gestaltungsregeln

1. Zentrum = dunkel: Innerste Dreiecke am dunkelsten (#946388)
2. Rand = hell: Aeusserste Dreiecke am hellsten (#ccafc9)
3. Stroke-Overlay: Duenne Linien (stroke-width="0.2"–"0.3") mit niedriger Opacity verbinden die Facetten
4. Symmetrie: Radiale Symmetrie um den Mittelpunkt (60,60)
5. Keine Text-Elemente: Rein visuell, keine Beschriftung

Typ 5: Animierte SVGs

SMIL-basierte Animationen fuer Illustrationen. Kein JavaScript, kein CSS — nur native SVG-Animationselemente.

Spezifikation

Erlaubte Animationselemente

Nicht erlaubt: <animateMotion>, <set>, JavaScript, CSS-Animationen

Animations-Pattern

<!-- Einblenden -->
<rect opacity="0">
  <animate attributeName="opacity"
           from="0" to="1"
           dur="0.4s" begin="0.2s" fill="freeze"/>
</rect>

<!-- Verschieben + Skalieren -->
<g>
  <animateTransform attributeName="transform" type="translate"
                    from="212 147" to="382 -10"
                    dur="0.8s" begin="0.3s" fill="freeze"/>
  <animateTransform attributeName="transform" type="scale"
                    from="0.8" to="0.35"
                    dur="0.8s" begin="0.3s" fill="freeze"
                    additive="sum"/>
</g>

Gestaltungsregeln

1. Sequenzieller Aufbau: Elemente erscheinen nacheinander via begin-Offsets
2. fill="freeze": Animation haelt am Endwert (kein Loop)
3. Kurze Dauern: 0.2s–0.8s pro Element, gesamte Sequenz unter 3s
4. begin-Staffelung: Jedes Element startet 0.05s–0.2s nach dem vorherigen
5. Kein Loop: Einmal abspielen, dann stehen bleiben
6. Statisches Pendant: Zu jeder animated.svg existiert eine statische Version ohne -animated Suffix

Bestand

Metadaten-Struktur

Jedes SVG traegt einen <desc>-Block als erstes Kind des Root-Elements. Dieser Block ist maschinenlesbar und dokumentiert Herkunft und Zuordnung.

Format

<desc>
artefakt:<eindeutiger-name>
source:<kanonische-url>
creator:Karl Kratz https://karlkratz.de/karl-kratz
title:<Lesbarer Titel>
</desc>

Felder

Source-URL Konventionen

Regeln

1. Kein Zeilenumbruch innerhalb eines Feld-Werts
2. Kein Leerzeichen zwischen Feldname und Doppelpunkt
3. artefakt-Wert = Dateiname ohne Extension
4. desc-Block direkt nach dem oeffnenden <svg>-Tag, vor jeder Geometrie
5. Keine zusaetzlichen Felder ohne Absprache

Naming-Konventionen

Dateinamen

Praefix-System

Suffix-System

Verzeichnisstruktur

/a/svg/                    # Core: 7 Nav-Icons + Logo (Production-kritisch)
/assets/svg/               # Alle Icons, Illustrationen, Brand-Elemente
/assets/svg/resources/     # Hilfs-Ressourcen (nicht direkt eingebunden)

Regeln

1. Kein Duplikat-Naming: Wenn eine Datei in /a/svg/ und /assets/svg/ existiert, ist /a/svg/ die Quelle fuer Navigation
2. Praefix bestimmt Typ: Dateiname ohne Praefix = Component Icon
3. Neue Icons: Immer in /assets/svg/ anlegen, nur bei Navigation-Bedarf nach /a/svg/ kopieren

Qualitaetsregeln

Pflicht (jedes SVG)

1. Valides SVG: Wohlgeformtes XML, xmlns="http://www.w3.org/2000/svg" auf Root
2. ViewBox gesetzt: Kein SVG ohne viewBox-Attribut
3. desc-Block: Metadaten vorhanden (Ausnahme: Nav Icons in /a/svg/)
4. Keine IDs auf Root: Kein id-Attribut auf dem <svg>-Element (verhindert Konflikte bei Inline-Einbettung)
5. Keine externen Referenzen: Kein xlink:href, kein <use> mit externer URL
6. Keine eingebetteten Styles: Kein <style>-Block, kein style-Attribut (Ausnahme: Illustrationen duerfen font-family inline nutzen)

Empfohlen

1. Dateigroesse: Component Icons unter 1 KB, Illustrationen unter 10 KB
2. Pfad-Optimierung: Koordinaten auf ganze Zahlen oder eine Dezimalstelle
3. Keine leeren Gruppen: Kein <g> ohne Kinder
4. Kommentare in Illustrationen: <!-- Bereich --> fuer logische Abschnitte
5. Konsistente Einrueckung: 2 Spaces

Verboten

Checkliste fuer neue SVGs

• [ ] ViewBox korrekt fuer Typ gesetzt?
• [ ] desc-Block mit artefakt/source/creator?
• [ ] Dateiname folgt Praefix-Konvention?
• [ ] Keine verbotenen Elemente?
• [ ] Farben korrekt (currentColor bzw. Brand-Palette)?
• [ ] In richtiges Verzeichnis abgelegt?
• [ ] Dateigroesse im Rahmen?