Prompt-Atelier – Eine Grafik aus Text

Sie beschreiben eine Grafik in Worten, lassen sie von einem LLM als SVG-Code erzeugen und verbessern das Ergebnis in mehreren Iterationsrunden. Dabei schauen Sie hinter die Kulissen: SVG ist Text – und lässt sich auch von Hand im Editor ändern.

Auftrag: Einzel- oder Partnerarbeit, ca. 45–90 Minuten. Am Ende geben Sie die finale SVG-Datei ab und reflektieren Ihre Erfahrung mit der KI-gestützten Erstellung.

SVG ist kein Pixelbild, sondern Text (XML). Ein LLM kann Grafiken deshalb «schreiben» – so ähnlich wie Programmcode.

Im Modul Vektorgrafiken – Bilder mit Formeln haben Sie gesehen, dass SVG-Code Formen wie Rechtecke, Kreise und Pfade beschreibt. Genau dieses Prinzip nutzen Sie jetzt: Sie beschreiben eine Grafik in Worten, lassen sie von einem LLM als SVG erzeugen – und machen das Ergebnis Schritt für Schritt besser.

Auftrag: Einzel- oder Partnerarbeit, ca. 45–90 Minuten (je nach Motiv). Sie brauchen Zugriff auf ein LLM Ihrer Wahl (z. B. SoekiaGPT, ChatGPT, Claude) und einen Texteditor.

Motiv-Galerie

Wählen Sie ein Motiv – oder entwickeln Sie ein eigenes. Die Beispiel-Prompts zeigen, wie präzise eine Beschreibung sein muss. Die Niveaus helfen bei der Wahl.

🟢 Einsteiger

• Ampel mit drei Zuständen: «Erstelle ein SVG (200×400) einer Verkehrsampel mit schwarzem Gehäuse und drei Lichtern. Nur das rote Licht leuchtet.» → Erweiterung: Mit CSS-Animation die Ampelphasen durchlaufen lassen.
• Schweizer Flagge (geometrisch vereinfacht): «Zeichne ein SVG (300×300): rotes Quadrat mit weissem Kreuz in der Mitte.»
• Haus mit Garten: «SVG 600×400: Haus mit rotem Dach, Tür, zwei Fenstern, Sonne oben links, grüne Wiese, eine Tanne rechts. Flat-Design.»

🟡 Mittel

• Infografik: Mein Wochenverlauf als Balkendiagramm: «Erzeuge ein SVG-Balkendiagramm mit 7 Balken (Mo–So) für folgende Werte: 2, 4, 3, 5, 1, 6, 0 Stunden Bildschirmzeit. Beschriftete Achsen, Titel, Farbverlauf.» → Medienbildung: Daten selbst erheben und visualisieren.
• Logo für eine fiktive Schulband oder Sport-AG: «Entwirf ein minimalistisches Logo als SVG: Kreis, darin stilisierter Ball, Schriftzug ‹GYMI ULTIMATE›, maximal 3 Farben.»
• Analoge Uhr mit gesetzter Uhrzeit: «SVG-Uhr mit Ziffernblatt, 12 Strichen und Zeigern auf 14:53.» → LLMs machen hier oft Winkelfehler – ideal zum Debuggen mit transform="rotate(...)".

🔴 Fortgeschritten

• Diagramm aus dem Unterricht (z. B. Netzwerk): «Zeichne ein SVG-Netzwerkdiagramm: 3 Laptops verbinden sich über einen Switch mit einem Router, dieser mit einer Wolke ‹Internet›. Icons aus einfachen Formen, Linien beschriftet.»
• Generatives Muster: «Erzeuge ein SVG mit 10×10 Kreisen, deren Farbton von links nach rechts und deren Radius von oben nach unten variiert.» → Danach: LLM nach einem Python- oder JavaScript-Skript fragen, das dieses SVG generiert – Brücke zur Programmierung.

Hinter den Kulissen: So sieht SVG-Code aus

Öffnen Sie Ihre .svg-Datei im Texteditor – dann sehen Sie genau das, was das LLM geschrieben hat. Hier das Ampel-Beispiel:

Die wichtigsten Bausteine:

• <svg viewBox="0 0 200 400"> – das Spielfeld: Koordinatensystem mit Ursprung oben links (x nach rechts, y nach unten).
• <rect> – Rechteck (x, y, width, height; rx rundet die Ecken ab).
• <circle> – Kreis (cx, cy = Mittelpunkt; r = Radius).
• fill – Füllfarbe, stroke – Randfarbe.

Ändern Sie fill, r oder Koordinaten im Editor, speichern Sie die Datei und laden Sie sie im Browser neu – Sie sehen die Wirkung sofort.

Bewertungskriterien