Es gibt viele Wege, um Grafiken für das User Interface zu erzeugen.
Z.B. sind mir folgende Ansätze bekannt:
- Pixel-Icon-Programme wie "Pixen"
- Vektorprogramme wie Adobe Illustrator oder Affinity Designer
- UI-Design-Tools wie das webbasierte → figma
- GDL-Objekte zur Bitmap-Erzeugung, z. B. mein → Flexi-Ul-Bitmap-Creator
Vor Kurzem ist mir beim Experimentieren eine neue Idee gekommen.
SVG-Grafiken bestehen im Kern aus einfachen XML-Strukturen mit grafischen Befehlen.
Man kann sie daher selbst scriptbasiert erzeugen – ähnlich wie in GDL.
Allerdings dauert es, sich direkt in SVG-Syntax einzuarbeiten.
Darum habe ich einen anderen Ansatz gewählt:
Man schreibt die Grafik mit GDL-ähnlichen Befehlen, und ein kleines Skript wandelt diese intern in SVG um.
Am Ende lässt sich das Ganze dann direkt als PNG mit transparentem Hintergrund exportieren.
Die Umwandlungslogik gdl2svg lässt sich relativ einfach – auch mit Hilfe von KI – entwickeln.
Das Ergebnis seht ihr in den beiliegenden Screenshots.
Achtung: neue verbesserte Verion mit schärferem PNG-Export (06.11.25)
Download und Weitere Details dazu auf der Seite im Develop-Bereich → GDL to SVG Icon Generator
Viel Spaß beim Ausprobieren!

GDL-style Icon Script Language
Coordinate System
Origin bottom-left. Units = pixels. No automatic scaling or centering.
Colors
Optional Hex color values (e.g. #000000).
Default: stroke = black, fill = transparent.
Shape Commands
LINE2 x1, y1, x2, y2, d (, #stroke) – straight line
CIRCLE2 x, y, r, d (, #stroke, #fill) – circle
RECT2 x1, y1, x2, y2, d (, #stroke, #fill) – axis-aligned rectangle by diagonal points
POLY2 n, x1, y1, …, xn, yn, d (, #stroke, #fill) – polygon with n points
ELLIPSE2 x, y, rx, ry, rot, d (, #stroke, #fill) – ellipse
ARC2 x, y, r, a1, a2, d (, #stroke) – circular arc (angles in degrees)
ARROW x, y, rot, len, wid, d (, #stroke, #fill) – arrowhead only (no line)
Transformations
ADD2 x, y – translate local origin by (x, y)
ROT2 a – rotate local coordinates by a° CCW
DEL n – close last n transforms (default n = 1)
Transforms stack and apply to all following commands until DEL.
Subroutines
DEFINE name – start reusable block
ENDDEFINE – end block
CALL name – insert previously defined block
Loops
FOR i = start TO end STEP value – loop counter i
NEXT i – end loop, loop variable removed afterwards
Variables & Expressions
var = expression – assign numeric value
Supports + − * / and parentheses.
Example
DEFINE arrowShape
ARROW 0,0, 0, 6, 3, 1, #000,#000
ENDDEFINE
FOR i = 0 TO 270 STEP 90
ROT2 i
CALL arrowShape
DEL
NEXT i
Notes
• Transformations nest and must be closed with DEL
• Missing DEL commands are auto-closed at end
• Loop variables exist only inside their loop
• Nested loops and nested subroutine calls supported
Feedback and improvement ideas welcome.
