Grundlegende SVG-Formen: rect circle path

SVG verwendet ein Koordinatensystem, bei dem (0,0) in der oberen linken Ecke liegt. X nimmt nach rechts zu, Y nach unten. Der Viewport wird durch die Attribute width und height definiert; der Koordinatenraum durch das Attribut viewBox.

Rechtecke zeichnen Sie mit <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. Mit rx und ry werden die Ecken abgerundet. Füllung und Kontur werden über die Attribute fill und stroke oder per CSS festgelegt. Wenn x und y weggelassen werden, ist der Standardwert 0,0.

Kreise zeichnen Sie mit <circle cx="100" cy="100" r="50">. cx und cy sind die Koordinaten des Mittelpunkts; r ist der Radius. SVG-Kreise haben kein Gegenstück zu den Parametern für den Bogenwinkel von canvas – sie sind immer vollständig.

Ellipsen zeichnen Sie mit <ellipse cx="100" cy="100" rx="80" ry="40">. rx ist der horizontale Radius, ry der vertikale Radius. Eine Ellipse mit gleichen Werten für rx und ry entspricht einem Kreis.

<line x1="0" y1="0" x2="100" y2="100"> zeichnet ein einzelnes Liniensegment. <polyline points="0,0 100,50 200,0"> zeichnet verbundene Liniensegmente durch eine Reihe von Koordinatenpaaren. Keines von beiden wird automatisch geschlossen.

<polygon points="100,10 190,190 10,190"> ähnelt polyline, aber die Form wird automatisch geschlossen – eine Linie verbindet den letzten Punkt mit dem ersten. Verwenden Sie polygon für geschlossene Formen wie Dreiecke, Sterne und andere regelmäßige Polygone.

path ist die leistungsfähigste SVG-Form – es kann beliebige Kombinationen aus Linien, Bögen und Kurven darstellen. Das Attribut d enthält Pfadbefehle: M (moveTo), L (lineTo), A (arc), C (kubische Bézierkurve), Q (quadratische Bézierkurve), Z (closePath).

Großgeschriebene Befehle verwenden absolute Koordinaten, kleingeschriebene relative Koordinaten. M 100 50 bewegt den Startpunkt nach (100,50). L 200 150 zeichnet eine Linie nach (200,150). Z schließt den Pfad. A rx ry rotation large-arc sweep x y zeichnet einen Bogen.

SVG-Formen akzeptieren CSS-Eigenschaften wie fill, stroke, stroke-width, opacity und stroke-dasharray. Verwenden Sie CSS-Klassen für SVG-Elemente, damit das Styling wartbar bleibt. CSS-Übergänge funktionieren bei SVG für fill, stroke und opacity und ermöglichen sanfte Zustandsänderungen.

Das Element <g> gruppiert SVG-Elemente. Wenden Sie transform, fill oder stroke auf die Gruppe an, um alle untergeordneten Elemente zu beeinflussen. Durch Gruppierung lassen sich komplexe Formen zusammenstellen, die sich gemeinsam bewegen oder transformieren – beispielsweise ein Zifferblatt mit all seinen Bestandteilen.

Definieren Sie wiederverwendbare Formen in <defs>: Symbole, Farbverläufe und Clip-Pfade. Referenzieren Sie sie mit <use href="#id">. Dadurch müssen komplexe Pfaddaten nicht dupliziert werden, und über das use-Element können Transformationen und Styling auf Instanzebene angewendet werden.

Was ist der Unterschied zwischen polyline und polygon in SVG?

SVG bietet deklarative Formelemente (rect, circle, ellipse, line, polyline, polygon) sowie das vielseitige path-Element für komplexe Formen mit den Befehlen M, L, A, C, Q und Z. CSS-Styling, Gruppierung mit g und Wiederverwendung über defs/use ermöglichen wartbare, skalierbare Vektorgrafiken, die direkt in HTML eingebettet sind.