Die Grundformen von SVG
Sechs vordefinierte Formen decken die meisten einfachen Zeichnungen ab. Jede hat eigene Attribute für Lage und Größe, Farbe und Umriss funktionieren bei allen gleich.
Rechteck: rect
Ein Rechteck braucht vier Angaben: x und y für die linke obere Ecke, dazu width und height. Mit rx und ry rundest du die Ecken ab. Gibst du nur rx an, übernimmt der Browser den Wert auch für ry, die Ecken werden also kreisrund.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 110" width="330" height="110">
<rect x="10" y="20" width="90" height="70" fill="#1f5fd1"/>
<rect x="120" y="20" width="90" height="70" rx="12" fill="#3b7be8"/>
<rect x="230" y="20" width="90" height="70" rx="40" ry="20" fill="#7fa6ef"/>
</svg>Kreis und Ellipse
Der Kreis wird über seinen Mittelpunkt beschrieben, nicht über eine Ecke: cx und cy für das Zentrum, r für den Radius. Die Ellipse hat statt eines Radius zwei, rx für die waagerechte und ry für die senkrechte Halbachse. Eine Ellipse mit gleichen Werten ist ein Kreis.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 110" width="330" height="110">
<circle cx="70" cy="55" r="40" fill="#1f5fd1"/>
<ellipse cx="230" cy="55" rx="70" ry="35" fill="#3b7be8"/>
<rect x="67" y="52" width="6" height="6" fill="#c2410c"/>
<rect x="227" y="52" width="6" height="6" fill="#c2410c"/>
</svg>Linie
Eine Linie verbindet zwei Punkte: x1, y1 für den Anfang, x2, y2 für das Ende. Wichtig: Eine Linie hat keine Fläche. Ohne stroke bleibt sie unsichtbar, weil die Voreinstellung für den Umriss „keiner“ ist. Das ist der häufigste Grund, warum eine frisch geschriebene Linie nicht erscheint.
Wie die Enden aussehen, legt stroke-linecap fest: butt (gerade abgeschnitten, Standard), round (abgerundet) oder square (um die halbe Strichbreite verlängert).
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 120" width="330" height="120">
<line x1="40" y1="25" x2="290" y2="25" stroke="#1f5fd1" stroke-width="14" stroke-linecap="butt"/>
<line x1="40" y1="60" x2="290" y2="60" stroke="#1f5fd1" stroke-width="14" stroke-linecap="round"/>
<line x1="40" y1="95" x2="290" y2="95" stroke="#1f5fd1" stroke-width="14" stroke-linecap="square"/>
<path d="M40 8 V112 M290 8 V112" stroke="#c2410c" stroke-width="1"/>
</svg>Polylinie und Polygon
Für Formen aus mehreren geraden Stücken gibt es zwei Elemente, die sich nur in einem Punkt unterscheiden. Beide erwarten im Attribut points eine Liste von Koordinatenpaaren. Die polyline bleibt offen, das polygon verbindet den letzten Punkt automatisch wieder mit dem ersten.
Die Paare dürfen durch Leerzeichen oder Kommas getrennt sein. Üblich und gut lesbar ist x,y x,y x,y.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 130" width="340" height="130">
<polyline points="20,110 50,20 90,80 130,30 150,110" fill="none" stroke="#1f5fd1" stroke-width="4" stroke-linejoin="round"/>
<polygon points="190,110 220,20 260,80 300,30 320,110" fill="#cfdcf7" stroke="#1f5fd1" stroke-width="4" stroke-linejoin="round"/>
</svg>Wo sich zwei Strichstücke treffen, bestimmt stroke-linejoin die Form der Ecke: miter (spitz, Standard), round oder bevel (abgeschrägt). Bei sehr spitzen Winkeln würde eine Miter-Ecke weit hinausragen. Deshalb schaltet der Browser ab einem bestimmten Verhältnis, festgelegt durch stroke-miterlimit, automatisch auf die abgeschrägte Form um.
Füllung und Umriss im Überblick
| Attribut | Wirkung | Standard |
|---|---|---|
fill | Farbe der Fläche, none für keine | schwarz |
stroke | Farbe des Umrisses | keiner |
stroke-width | Strichbreite, mittig auf der Kontur | 1 |
stroke-dasharray | gestrichelte Linie, z. B. 8 4 | durchgehend |
opacity, fill-opacity | Deckkraft von 0 bis 1 | 1 |
Ein Detail, das bei genauen Zeichnungen wichtig wird: Der Strich liegt je zur Hälfte innerhalb und außerhalb der Kontur. Ein 100 Einheiten breites Rechteck mit stroke-width="10" ist sichtbar also 110 Einheiten breit. Deshalb sitzt der Rahmen im ersten Beispiel dieses Tutorials bei x="1" und nicht bei 0, sonst würde die Hälfte des Strichs abgeschnitten.
Attribut oder CSS?
Alle Angaben zu Füllung und Umriss sind sogenannte Präsentationsattribute. Du kannst sie genauso gut per CSS setzen, etwa circle { fill: teal; }. CSS-Regeln haben dabei Vorrang vor den Attributen. Für einzelne Grafiken sind Attribute übersichtlich, für viele gleich gestaltete Elemente ist CSS praktischer.
Alles, was sich nicht aus diesen sechs Formen zusammensetzen lässt, also Kurven und frei geformte Umrisse, beschreibt das Pfad-Element. Es ist das mächtigste Element von SVG, und intern sind alle Grundformen nichts anderes als Kurzschreibweisen für bestimmte Pfade. Für Farbverläufe statt einfarbiger Flächen geht es im Kapitel Farben, Verläufe und Muster weiter.