Das SVG-Plakatstudio: Gestalte eine Veranstaltung in drei Stilen

Wie sieht dein Abend aus?

Gib einen Veranstaltungsnamen ein und wechsle nacheinander zwischen Orbit, Raster und Bühne. Große Schrift auf dunklem Grund, rechteckiger Rhythmus oder ein Kreis mit Dreieck und Serifenschrift? Der Inhalt bleibt gleich, doch jeder Aufbau kündigt einen etwas anderen Abend an. Dazu gibt es drei Paletten und die Schaltfläche „Andere Variante“, die die Komposition innerhalb des gewählten Stils verändert.

Das ist unser kleines Plakatstudio. Die beispielhafte „Noc dobrych dźwięków“ („Nacht der guten Klänge“) ist fiktiv. Du kannst Name, Datum und Ort ersetzen und den fertigen Entwurf als SVG herunterladen. In einem Editor für dieses Format lassen sich Text und Figuren weiterbearbeiten. Kreise, Linien und Rechtecke zeichnet hier Code. Beim Anklicken der Varianten wird kein Bildmodell aufgerufen. Mit dem Prompt unten kannst du eine KI allerdings beauftragen, ein ähnliches Werkzeug zu bauen.

Drei Kompositionen, drei Ansatzpunkte

Im Orbit liegt unter dem großen Titel eine von einer Ellipse geschnittene Scheibe auf dunklem Hintergrund. Das Raster ist hell, mit deutlichen Unterteilungen und rechteckigen Modulen, die an einen Klangrhythmus erinnern. Die Bühne verbindet Kreis, Dreieck und senkrechte Linien mit einem Titel in Serifenschrift. In jeder Komposition setzen wir die Schwerpunkte anders. Ein Stilwechsel ändert deshalb mehr als die Farbe.

Vergleiche die Stile mit demselben Titel. Welche Wirkung hat eine schwere serifenlose Schrift, welche eine Kursivschrift? Ändere erst danach die Palette: Violett mit Limette, Kobalt mit Koralle oder Weinrot mit Rosa. Bei einer Änderung nach der anderen erkennst du leichter, was zu deiner Veranstaltung passt.

Was in den KI-Auftrag gehört

„Bau einen Plakatgenerator“ sagt wenig über den gewünschten Entwurf. Deshalb nennt unser Auftrag Proportionen, drei Gestaltungsrichtungen, bearbeitbare Felder und den Download. Sobald du das Ergebnis öffnest, kannst du prüfen, ob sich die Kompositionen unterscheiden und der Export das sichtbare Ergebnis bewahrt.

Unser Plakat hat eine Fläche von 480 × 600. Der Veranstaltungsname darf bis zu 42 Zeichen lang sein, das Datum 32 und der Ort 48. Lange Titel teilen wir auf höchstens drei Zeilen auf. Text, der nicht in seinen Bereich passt, wird an dessen Breite angepasst. Ein kürzerer Name lässt allerdings mehr Platz für die Gestaltung. Erinnert das Plakat langsam an Kleingedrucktes, kürze lieber den Titel.

Baue eine einzelne HTML-Datei: ein interaktives Plakatstudio für eine fiktive Musik- und Designveranstaltung. Alles soll offline laufen, ohne Bibliotheken, externe Bilder oder Webfonts. Die Vorschau ist ein echtes SVG mit 480 × 600, dessen Text als bearbeitbare text-Elemente erhalten bleibt. Felder: Veranstaltungsname (42 Zeichen), Datum und Uhrzeit (32), Ort (48). Gestalte drei deutlich verschiedene Kompositionen: Orbit – dunkler Hintergrund, großer serifenloser Titel und eine Scheibe mit Ellipse; Raster – heller Hintergrund, Typografie, Trennlinien und rhythmische Module; Bühne – Kreis, Dreieck, senkrechte Linien und ein Titel in kursiver Serifenschrift. Drei Paletten: Violett/Limette, Kobalt/Koralle, Weinrot/Rosa. Ergänze einen Variantenknopf mit deterministischem Seed; der Text bleibt unverändert. Brich den Titel auf höchstens drei Zeilen um und passe lange Zeilen an die Textfläche an. Schriften: Arial/Helvetica/sans-serif sowie Georgia/Times New Roman/serif. SVG herunterladen soll den aktuellen Text, die Palette und Variante speichern. Erzeuge SVG mit createElementNS und textContent, ohne Nutzereingaben in innerHTML einzusetzen. Leere Pflichtfelder blockieren den Export und zeigen eine Meldung. Bedienelemente links, das vollständige Plakat rechts; auf Handys ab 320 px untereinander. Ergänze Beschriftungen, sichtbaren Fokus, eine SVG-Beschreibung sowie eine helle und dunkle Umgebung. Kennzeichne, dass Code die Figuren zeichnet und die Veranstaltung fiktiv ist.

Gib der Vorlage einen schwierigeren Namen

Probiere nach einem kurzen Titel einen langen mit polnischen Sonderzeichen. Schau dir alle drei Stile an: Überschneidet sich der Name mit dem Datum, bleibt der Ort lesbar, verschwinden Figuren außerhalb der Fläche? Leere danach ein Feld. Unsere Demo sollte auf den fehlenden Wert hinweisen, den Download blockieren und die letzte vollständige Vorschau stehen lassen.

Text bleibt in der Datei SVG-Text. Wir laden keine Schriften herunter und wandeln Buchstaben nicht in Pfade um. Das erleichtert die spätere Bearbeitung und hält die Datei klein. Es hat aber eine Folge: Auf einem anderen Computer kann eine Ersatzschrift verwendet werden, wodurch das Plakat etwas anders aussieht. Öffne das SVG deshalb in dem Programm, mit dem du den Entwurf fertigstellen möchtest.

Das Plakat weiterbearbeiten, das Studio weiterdenken

„SVG herunterladen“ speichert den aktuellen Namen, Datum, Ort, Palette und Variante. Öffne die Datei im Browser oder in einem Vektorgrafikeditor und vergleiche sie mit der Vorschau, besonders nach einem langen Titel. Sie ist Material zur Weiterbearbeitung. Für einen Druck musst du den Entwurf noch an die Anforderungen der jeweiligen Druckerei anpassen.

Der HTML-Download speichert das ganze Studio, das ohne Internet läuft. Es startet allerdings mit den Anfangseinstellungen und merkt sich Eingaben nicht zwischen zwei Starts. Sichere dein eigenes Plakat deshalb zuerst als SVG. Möchtest du das Werkzeug ausbauen, entwirf einen weiteren Aufbau mit eigenen Regeln für Text und Figuren.

Für den Export ist im Code XMLSerializer zuständig: Es verwandelt das aktuelle SVG in Text, aus dem wir die Download-Datei erstellen. Unten verlinken wir die Dokumentation dieses Verfahrens und von SVG-Text. Sie hilft dir, wenn du Titelumbrüche oder den Export verändern möchtest.