SVG

(FTP: 80.74.149.100 | svg | ausgeschrieben). Am Mittwoch, 28. Okt. 2026 findet die ▸ UNM-Fachtagung als Barcamp statt. Falls erwünscht, werde ich den Workshop scalable vector graphics anbieten. Die TeilnehmerInnen können ihre SVG direkt in ▸diese Datenbank einschreiben. Und: diese Webseite ist eine PWA, eine Progressive Web App. Bedeutet: sie ist als im Home Screen installierte Web App auch offline erreichbar.


"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".

Die Linie (line):

<svg width="300" height="100">
    <line x1="0" y1="0" x2="290" y2="200" style="stroke:crimson;stroke-width:2" />
</svg>




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:

<svg height="220" width="220">
<circle r="100" cx="110" cy="110" fill="transparent" stroke="black" stroke-width="1" />
<g>
<circle r="8" cx="180" cy="40" fill="red" stroke="none"/> <animateTransform
attributeName="transform"
type="rotate"
values="0 110 110; 360 110 110"
dur="30s"
repeatCount="indefinite"/>
</g>
</svg>


Das Rechteck (rect):

<rect width="290" height="90" x="1" y="1" style="fill:crimson;stroke-width:2;stroke:crimson" />



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.

<polyline points="1,1 50,150 100,75 150,50 200,140 250,140 280,20 1,1" style="fill:none;stroke:green;stroke-width:2" />
<polyline points="280,20 1,1" style="fill:none;stroke:red;stroke-width:2" />



clipPath / Pattern (Polygon)

Frage Lumo & Co nach dem Unterschied

Helmi (Berlin)

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):

<line x1="0" y1="150" x2="300" y2="150" stroke="#555" stroke-width="1"/>
<line x1="200" y1="0" x2="200" y2="300" stroke="#555" stroke-width="1"/>
<path d="M 50,280 Q 200,-80 350,280" fill="none" stroke="#89b4fa" stroke-width="3"/>


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.

Weitere Beispiele:

▸ Wappen der Schweiz / Actionbound / ...