Was wir gebaut haben — und wie du's nutzt

1 · Was haben wir eigentlich gebaut?

Eine komplette Grafik-Bibliothek für deine Schulungen — 63 einzelne Dateien, alle im evalum-CI.

Stell dir die Library wie einen Baukasten vor. Du hast einzelne Bausteine (SVG-Dateien), die du beliebig kombinieren kannst:

• 8 Eva-Posen — dein Maskottchen in verschiedenen Situationen
• 41 Icons — kleine Symbole für Audit, ISO-Normen, Status, Prozesse etc.
• 3 Comic-Strips — Drei-Panel-Geschichten für lockere Modul-Einstiege
• 5 Infografiken — Fertige Layouts (PDCA, Audit-Prozess, ISO-Familie, DSGVO, Modul-Opener)
• 6 Lernziel-Hintergründe — Folien-Templates im 16:9-Format

Jedes Asset ist eine eigenständige Datei. Du musst nicht alles gleichzeitig nutzen — zieh dir raus, was du gerade brauchst.

2 · Warum SVG? (kurze Erklärung)

Weil SVG exakt das Format ist, das für deinen Einsatzzweck am meisten kann.

SVG steht für „Scalable Vector Graphics" — Grafiken, die nicht aus Pixeln bestehen, sondern aus mathematischen Beschreibungen. Das bedeutet:

Was SVG kann, was JPG/PNG nicht können

So sieht SVG innen aus

Öffne eine beliebige .svg-Datei mit einem Text-Editor (Notepad, VS Code, Sublime) — du siehst Code, keinen Bildsalat:

<svg viewBox="0 0 48 48">
  <circle cx="24" cy="24" r="18" 
          fill="none" stroke="#14B8A6" stroke-width="2.5"/>
  <path d="M 15 25 L 22 31 L 34 18" 
        stroke="#14B8A6" stroke-width="3" fill="none"/>
</svg>

Das ist die komplette Grafik. Ein Kreis + ein Häkchen — und du kannst den Farbwert #14B8A6 direkt im Code ändern.

3 · Die Struktur der Bibliothek

Nach dem Entpacken der ZIP-Datei findest du diese Ordnerstruktur.

evalum-library/
├── README.md                    ← Diese Übersicht hier
├── index.html                   ← Browser-Vorschau aller Assets
│
├── 01-eva-poses/                ← Eva in 8 Posen
│   ├── 01-eva-begruesst.svg
│   ├── 02-eva-erklaert.svg
│   └── …
│
├── 02-icons/                    ← 41 Icons
│   ├── icon-audit-check.svg
│   ├── icon-iso-9001.svg
│   └── …
│
├── 03-comics/                   ← 3 Comic-Strips
│   ├── comic-01-dokumentenlenkung.svg
│   └── …
│
├── 04-infografiken/             ← 5 Infografiken
│   ├── infografik-01-pdca-zyklus.svg
│   └── …
│
└── 05-lernziele/                ← 6 Lernziel-Hintergründe
    ├── lernziele-01-classic-list.svg
    └── …

4 · Einbinden in PowerPoint / Word

Moderne Office-Versionen (2016+) unterstützen SVG direkt. Du kannst die Dateien genauso einfügen wie ein normales Bild.

Schritt für Schritt (PowerPoint)

SVG zu PNG konvertieren (falls nötig)

Drei einfache Wege:

• Browser: SVG in Chrome/Edge öffnen → Rechtsklick → „Bild speichern als" → PNG wählen
• Online-Tool: cloudconvert.com/svg-to-png (kostenlos, ohne Anmeldung)
• Inkscape: Kostenloses Grafikprogramm, SVG öffnen → „Exportieren als PNG"

5 · Einbinden ins LMS

Die meisten modernen LMS (Moodle, Ilias, Articulate, Rise, H5P, Chamilo) unterstützen SVG. Hier die typischen Wege.

Moodle

1. In deinem Kurs die gewünschte Aktivität (z.B. „Buch" oder „Textseite") bearbeiten
2. Im Editor auf das Bild-Symbol klicken
3. Datei auswählen → SVG hochladen → alternativer Text eintragen
4. Speichern — fertig

Articulate Rise / Storyline

1. In einen Block vom Typ „Bild" oder „Medien" einfügen
2. SVG per Drag & Drop oder Datei hochladen
3. Rise konvertiert SVGs automatisch — keine Anpassung nötig

H5P (Interaktive Inhalte)

1. In H5P-Elementen wie „Course Presentation" oder „Interactive Video"
2. Bild-Element hinzufügen → SVG-Datei hochladen
3. Funktioniert auch als Hintergrund für Hotspots

Direkt in HTML (eigene Lernplattform)

Wenn du selbst HTML baust, gibt es zwei Wege:

<img src="eva-begruesst.svg" alt="Eva begrüßt"
     width="400">

<!-- Öffne die SVG-Datei im Text-Editor, 
     kopiere den kompletten Inhalt hierher -->
<svg viewBox="0 0 400 300">
  ...
</svg>

6 · SVG-Dateien anpassen (Texte ändern)

Die Lernziel-Hintergründe enthalten Platzhalter-Texte. Hier zeige ich dir, wie du die austauschst.

Methode 1: Text-Editor (funktioniert immer)

<text x="70" y="30" font-family="..." font-size="22" 
      font-weight="500" fill="#1a1a1a">
  Lernziel Nummer eins hier eintragen.
</text>

<text x="70" y="30" font-family="..." font-size="22" 
      font-weight="500" fill="#1a1a1a">
  Interne Audits nach ISO 19011 planen.
</text>

Methode 2: Figma (visueller Editor)

Wenn dir Code unangenehm ist:

1. Auf figma.com einen kostenlosen Account anlegen
2. SVG per Drag & Drop ins Figma-Dokument ziehen
3. Auf Text doppelklicken → neuen Text eingeben
4. Exportieren: Rechtsklick → Copy/Paste as → Copy as SVG

Methode 3: Inkscape (kostenloses Desktop-Programm)

Inkscape ist wie Illustrator, aber gratis. inkscape.org — SVG öffnen, Texte doppelklicken, ändern, speichern.

7 · Farben im ganzen System ändern

Falls sich dein CI mal ändert oder du eine spezielle Modul-Variante willst.

Die Library verwendet durchgängig diese Farben:

Trick: Alle Dateien auf einmal umfärben

Mit einem Text-Editor wie VS Code (kostenlos) kannst du über alle Dateien gleichzeitig suchen und ersetzen:

1. VS Code öffnen → Datei → Ordner öffnen → evalum-library wählen
2. Strg+Shift+H (Globale Suchen & Ersetzen)
3. In „Suchen": #14B8A6
4. In „Ersetzen": neue Farbe, z.B. #8B5CF6 (lila)
5. „Ersetzen in allen Dateien" — fertig

8 · Neue Assets hinzufügen

Du brauchst ein Icon, das noch nicht in der Library ist?

Option A: Ich bau's dir

Schreib mir einfach, was du brauchst — z.B. „ein Icon für Gefahrstoffe" oder „Eva, die einen Helm trägt" — und ich ergänze die Library passend zum Stil. So bleibt alles konsistent.

Option B: Selbst aus Icon-Libraries

Wenn du flexibel bleiben willst, kannst du passende Icons auch aus diesen Quellen holen:

• Lucide Icons (lucide.dev) — Clean, minimal, passt gut zum evalum-Stil
• Heroicons (heroicons.com) — Von den Machern von Tailwind CSS
• Phosphor Icons (phosphoricons.com) — Sehr umfangreich

9 · Praktische Tipps für den Alltag

Für PowerPoint-Präsentationen

• Nutze lernziele-03 (Dark Mode) für die Titelfolie — das bleibt im Gedächtnis
• Eva-Pose „Begrüßt" auf der ersten Folie jedes Moduls sorgt für Wiedererkennung
• Eva „Hinweist" neben wichtige Prüfungsfragen stellen
• Am Ende: Eva „Zertifiziert" als Abschluss-Slide mit Siegel-Optik

Für Arbeitsblätter und Handouts

• Icons als Marker vor Aufzählungen nutzen (passed für erledigt, warning für Stolperfallen)
• Infografiken als ganzseitige Grafik auf Rückseite
• Comic-Strips eignen sich hervorragend für Diskussionsfragen im Unterricht

Für E-Learning im LMS

• Immer Alt-Text setzen (z.B. „Eva prüft eine Checkliste") — wichtig für Barrierefreiheit
• SVGs auf maximal 800–1200px Anzeigegröße skalieren, damit sie schnell laden
• Bei mobilen Geräten: Infografiken testen, ob sie lesbar bleiben (ggf. in Sektionen aufteilen)

Häufige Fragen

Kann ich die Library kommerziell nutzen?
Ja, sie ist für dich gebaut — Eva und alle Assets sind deine.

Gehen die Dateien verloren, wenn ich sie weitergebe?
Nein, SVG-Dateien sind einfache Textdateien. Beim Kopieren bleibt alles erhalten.

Was, wenn ich einen Fehler mache?
Kein Problem — du hast die Original-Dateien im ZIP. Einfach frisch entpacken und nochmal anfangen.

Kann ich Eva animieren?
Ja! SVG unterstützt Animationen (z.B. Eva winkt, Häkchen erscheint). Falls du das willst, kann ich dir einzelne Posen animieren.

Fragen? Einfach melden.

Die Library lebt — wir können sie jederzeit erweitern, anpassen oder auf neue Themen ausrichten.