Information
On the Grid – Parametrischer SVG Generator
Entstehungsprozess
Mein Projekt besteht in einer Webanwendung, die basierend auf verschiedenen Parametern typografische SVG-Grafiken erstellt. Seinen Anfang fand dieses Projekt in der Auseinandersetzung mit Festivals, Rastern und modularen Schriften. Durch Jurrian Schrofers Arbeiten, im Speziellen durch seine rasterbasierten Schriftsysteme, geriet ich an die Frage, welche Möglichkeiten es gibt, alle binären 3×3-Raster zu zeichnen/generieren. Im Verfolgen dieses Gedankens setzte ich mich mit Python-Skripten auseinander und generierte diverse Rastergrafiken, um konzeptuell auszutesten, welche Möglichkeiten Code für Gestaltung bietet.
Kurz darauf suchte ich nach Möglichkeiten, mit Python typografisch zu arbeiten. Da der Prozess des Generierens aller möglichen binären Raster auf Matrizen basierte, entwickelte ich kurzerhand eine Pixelschrift und ließ diese von einem Script auslesen und in Matrixform bringen. Zeitgleich setzte ich mich damit auseinander, nicht nur schwarz/weiß zu arbeiten, und entwickelte eine Möglichkeit, Bildsätze mit Python-Code auszulesen und die Farben in eine Tabelle zu extrahieren. Ein übergeordneter Code konnte dann auf eine dieser Tabellen zugreifen und über das Zuteilen der Farben aus dem Farbset, der Tabelle, die einzelnen Zellen von Nullen und Einsen, welche die Matrizen der Buchstaben vorgaben, mit Farben zu füllen.
Im weiteren Verlauf entwickelte ich zusätzliche Schriften und Farbsets, um mehr Möglichkeiten zu haben. Auch fügte ich Kreise zu den Formen hinzu, die für die Einzelzellen genutzt werden können, und wechselte von einem binären System zum größten Teil zu drei Werten in den Matrizen, sodass Grauwerte und andere neue Effekte entstehen können. Bei den Farbsets war ich daran interessiert, Bildsätze zu erstellen, die verschiedene Festivals repräsentieren. Dies geschah mit dem Ziel, zu überprüfen, wie unterschiedlich Festivals in ihrer Farbigkeit sind. Zu allen Festivals sollte ein Plakat entstehen, welches mit Code gestaltet ist. Allerdings war der Prozess zu diesem Zeitpunkt sehr kompliziert, da für jede Anpassung an der Grafik auch der Code angepasst werden musste. So fügte ich in einem langwierigen Prozess die verschiedenen Code-Teile zu einem Gesamtordner zusammen, welcher über ein Hauptpythonscript, Subscripts, HTML und CSS mittels Flask einen lokalen Webserver ermöglicht. Dort erstellte ich ein Interface, über welches alle Parameter angepasst werden können. Im Verlauf dieses Prozesses verbesserte ich die Anpassbarkeit der Position des Textes, ermöglichte das Manipulieren der Farben und arbeitete an Details, um das Tool möglichst flexibel nutzbar zu machen. In der Galerie können einige Ergebnisse angesehen werden.
Wie funktioniert das Tool?
Zu Beginn wird der Name eingetragen, der später mit anderen Metadaten auf dem generierten
SVG steht. Der nächste Input ist der Text, der aus den Matrizen generiert wird, dabei werden
Leerzeichen und Absätze beachtet. Dann wird die Form ausgewählt, die je Matrixzelle
generiert wird. Dann wird das Matrix-Set gewählt und ggf. ein selbstgewählter Zeilenabstand.
Als Nächstes wird ein Farbset eines Festivals gewählt. Danach folgen diverse Möglichkeiten,
die Farben anzupassen.
Entscheidend ist auch die Größe der Leinwand relativ zur gewählten Schrift. Diese kann
ausgewählt und ggf. auf das DIN-Format gebracht werden.
Zum Schluss kann die Breite oder Höhe der Einzelformen je Zelle angepasst werden.
Generiert wird das SVG dann, indem das gewählte Matrix-Set sowie Farbset aufgerufen
werden. Dann wird Matrix für Matrix der Text generiert und den einzelnen Zellen eine der
Auswahl entsprechende Farbe und Form verliehen. Ist in einer Zeile kein Platz mehr,
geschieht ein automatischer Zeilenumbruch.
Zum Schluss werden die Metadaten des SVG unten hinzugefügt.
Hans Zeitzschel
Typografie - GTG
HAW 2025