User Interface: Grafiken scripten

01.11.2025  
3 Min. Lesezeit   
Aktualisiert: 07.11.2025

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!

beitragsbilder.png

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.

Artikel teilen

E-Mail