SVG

"Eine vektorbasierte Grafik (Vektorgrafik; scalable vector graphic) speichert Bildinformationen als mathematische Formeln (Punkte, Linien und Kurven) und nicht als Pixel. Dadurch können die Grafiken völlig verlust- und qualitätsfrei beliebig vergrössert oder verkleinert werden. Sie sind der Standard für Logos, Typografie und Illustrationen".

Und noch etwas:
Selbstverständlich können SVG Scripts auch von LLMs 'generiert' werden - nennt sich neudeutsch Vibe Coding.

Die Linie (line):

In ▸diesem herausragenden Online-Lehrmittel ist auch die Achsensymmetrie zu finden. Bewegt sich die rote Gerade entweder horizontal oder vertikal oder im 45-Grad-Winkel zur Senkrechten, ist die Sache noch relativ einfach.

Der Kreis (circle):

Der Script sieht so aus:

Das Rechteck (rect):

Die Polyline:

Polygone bestehen aus geraden Linien, und die Form ist 'geschlossen' (der letzte Punkt wird automatisch mit dem ersten verbunden).
Die folgende Grafik ist aber kein Polygon, sondern eine Polyline. Auch eine geschlossene Polyline kann, im Gegensatz zum Polygon, nicht ausgefüllt werden.

clipPath / Pattern (Polygon)

Der Script sieht so aus:

<svg height="300" width="300">
<defs>
  <clipPath id="poly-clip">
    <polygon points="0,0 100,50 usw." />
  </clipPath>
</defs>

<image href="Bildadresse.jpg"
       x="0" y="0" width="300" height="200"
       clip-path="url(#poly-clip)"
       preserveAspectRatio="xMidYMid slice"/>
</svg>

Die Kurve (path):

The following commands are available for path data:

M = moveto (move from one point to another point)
L = lineto (create a line)
H = horizontal lineto (create a horizontal line)
V = vertical lineto (create a vertical line)
C = curveto (create a curve)
S = smooth curveto (create a smooth curve)
Q = quadratic Bézier curve (create a quadratic Bézier curve)
T = smooth quadratic Bézier curveto (create a smooth quadratic 
      Bézier curve)
A = elliptical Arc (create a elliptical arc)
Z = closepath (close the path)

viewBox

Das SVG-Attribut viewBox bestimmt das interne Koordinatensystem, in welchem einfach zu skalierende Formen 'gezeichnet' werden können. Der erweiterte Script sieht dann so aus: <svg viewBox="0 0 100 100" width="50" height="50" style="float:left;margin-right:.8rem;">. Ändere nun die bestimmenden Grössen width und height und/oder die Koordinaten, und beachte die Auswirkungen. SVG-Elemente können selbst gefloatet werden (der Text fliesst um das Element - müssen also nicht in einen zusätzlichen, gefloateten div container eingeschrieben werden).

SVG-Elemente lassen sich schier endlos auszeichnen - ganz ohne JavaScript - einfach nur mit CSS. Beachte, dass die Linie im Mittelpunkt des Kreises mit der Auszeichnung stroke-linecap="round" kreisrund abschliesst. Der Kreis und die Linie befinden sich in einem <g>-Element. Das SVG-Element <g> ist ein Container, der zum Gruppieren anderer SVG-Elemente verwendet wird. Auf das <g>-Element angewendete Transformationen werden auch auf dessen untergeordnete Elemente angewendet, und seine Attribute werden von den untergeordneten Elementen übernommen.

Das Zürcher Wappen (click/touch it) habe ich von Claude konstruieren lassen. Zuerst habe ich ihn nach dem path gefragt, der ein leeres Wappen beschreibt (fill="lightgray"). Dann habe ich ihn nach der quasi-Diagonalen im 45-Gradwinkel von oben links nach rechts unten bis zum Kreis gefragt (stroke="black"). Dann habe ich ihn nach dem Path der 'unteren' Teilfläche gefragt, welche durch die linke Kante, die Diagonale und den grösseren Teil des Kreisbogens beschrieben wird (fill="lightblue"). Dieses Prozedere nennt sich neudeutsch vibe coding und ersetzt zum Beispiel Kenntnisse in der Berechnung des Bogenmasses. Schliesslich und schlussendlich habe ich den fertigen Code in einen links-gefloateten, 30%-breiten div container eingeschrieben.

Weitere Beispiele:

▸ Wappen der Schweiz / Actionbound / ...