Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
SVG-Formen – Grundlagen, Code und Beispiele
Contents
[
Hide
Show
]Einfache Vektorformen sind die Bausteine von Logos, Diagrammen, Icons, Charts und vielen anderen SVG-Grafiken. In einer SVG-Datei wird jede Grundform durch ein Element dargestellt, dessen Attribute Position, Größe und visuellen Stil definieren. Sie können fill color, opacity, corner rounding, stroke width und weitere Eigenschaften anpassen.
In diesem Artikel lernen Sie:
- SVG-Rechtecke, Kreise, Ellipsen, Linien, Polylinien und Polygone zu erstellen.
- Die Koordinatenattribute jeder Grundform zu lesen.
fill,stroke, opacity und abgerundete Ecken anzuwenden.- Mehrere SVG-shape-Elemente in einem SVG-Bild zu kombinieren.
SVG <rect> – Rechteckelement
Das <rect>-Element erstellt Rechtecke und Rechtecke mit abgerundeten Ecken. Ein Rechteck wird über seine obere linke Ecke positioniert und anschließend mit width und height dimensioniert.
Rechteckattribute
| Attribut | Beschreibung | Standard |
|---|---|---|
x | X-Koordinate der oberen linken Ecke | 0 |
y | Y-Koordinate der oberen linken Ecke | 0 |
width | Breite des Rechtecks | – |
height | Höhe des Rechtecks | – |
rx | Horizontaler Radius für abgerundete Ecken | 0 |
ry | Vertikaler Radius für abgerundete Ecken | 0 |
Sie können das Rechteck mit presentation attributes oder mit dem style-Attribut gestalten. Das Beispiel unten verwendet fill, stroke, opacity und corner radius values, um zu zeigen, wie Geometrie und painting zusammenarbeiten.
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
3</svg>Das erste Beispiel erstellt ein Rechteck, dessen obere linke Ecke bei (60, 100) liegt. Das Rechteck ist 70 Einheiten breit und 40 Einheiten hoch, hat abgerundete Ecken und einen orangefarbenen stroke. Das zweite Beispiel entfernt abgerundete Ecken und nutzt ein größeres, quadratähnliches Rechteck. Dadurch ist der Unterschied zwischen rx/ry und normalen scharfen Ecken gut sichtbar.
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <rect x="120" y="140" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
3</svg>
Verwendete Style Properties
fill– Füllfarbe des Rechtecksfill-opacity– Transparenz der Füllung (0= vollständig transparent,1= deckend)stroke– Farbe der Konturstroke-width– Stärke der Konturstroke-opacity– Transparenz der Kontur
Farben können zum Beispiel so angegeben werden:
- Farbname, etwa
fill:blue. - RGB-Funktion, etwa
fill:rgb(0,0,255). - HEX-Notation, etwa
fill:#0000ff.
SVG <circle> – Kreiselement
Das <circle>-Element zeichnet einen perfekten Kreis. Seine Position wird durch die Mittelpunktkoordinaten cx und cy definiert, seine Größe durch den Radius r.
Kreisattribute
| Attribut | Beschreibung | Standard |
|---|---|---|
cx | X-Koordinate des Kreismittelpunkts | 0 |
cy | Y-Koordinate des Kreismittelpunkts | 0 |
r | Radius des Kreises | – |
1<svg width="300" height="550" xmlns="http://www.w3.org/2000/svg">
2 <circle cx="250" cy="100" r="60" style="fill:red; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7" />
3</svg>Der Code setzt cx und cy für den Mittelpunkt und r für den Radius. Da der Kreis mit fill und stroke gemalt wird, zeigt die Ausgabe außerdem, wie Formgeometrie und painting properties zusammenwirken.
Der Kreis reicht über die 300-px-Breite des viewport hinaus. Für vollständige Sichtbarkeit ist mindestens eine Breite von 310 px nötig (cx + r).
SVG <ellipse> – Ellipsenelement
Das <ellipse>-Element erstellt eine ovale Form. Es nutzt ebenfalls einen Mittelpunkt, hat aber zwei Radien: rx für die horizontale Größe und ry für die vertikale Größe.
Ellipsenattribute
| Attribut | Beschreibung | Standard |
|---|---|---|
cx | X-Koordinate des Ellipsenmittelpunkts | 0 |
cy | Y-Koordinate des Ellipsenmittelpunkts | 0 |
rx | Horizontaler Radius, also die halbe Breite | – |
ry | Vertikaler Radius, also die halbe Höhe | – |
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
3 <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
4</svg>Das Beispiel zeichnet zwei Ellipsen mit unterschiedlichen Radien und unterschiedlicher opacity. Die zweite Ellipse (grau, 50 % opacity) wird über der ersten gerendert, weil SVG Elemente in Quellreihenfolge malt: Spätere Elemente erscheinen über früheren.
SVG <line> – Linienelement
Das <line>-Element zeichnet ein gerades Segment zwischen zwei Koordinatenpunkten. Es hat keine Füllfläche, daher benötigen sichtbare Linien normalerweise stroke und stroke-width.
Linienattribute
| Attribut | Beschreibung | Standard |
|---|---|---|
x1 | X-Koordinate des Startpunkts | – |
y1 | Y-Koordinate des Startpunkts | – |
x2 | X-Koordinate des Endpunkts | – |
y2 | Y-Koordinate des Endpunkts | – |
style (stroke, stroke-width) | Visuelles Styling der Linie | – |
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
3 <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
4 <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
5</svg>
Jede Linie im Beispiel hat einen anderen Startpunkt, Endpunkt, eine andere Farbe und Stärke. Die property stroke definiert die Linienfarbe, während stroke-width die Linienstärke festlegt.
SVG <polyline> – Polyline-Element
Das <polyline>-Element zeichnet eine Reihe verbundener gerader Segmente. Es wird häufig für gebrochene Linien, Chart-Linien, einfache Konturen und offene kantige Formen verwendet.
Polyline-Attribute
| Attribut | Beschreibung | Standard |
|---|---|---|
points | Liste von x,y-Koordinatenpaaren, die die polyline-Eckpunkte definieren | – |
style (fill, stroke, stroke-width) | Visuelles Styling der Form | – |
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
3 <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
4</svg>
Die erste polyline verwendet drei Punkte und bildet visuell eine dreiecksähnliche Form. Die zweite polyline ist eine offene Zickzacklinie mit fill="none". Das ist meist die klarste Wahl, wenn sich eine polyline wie eine Linie und nicht wie eine gefüllte Form verhalten soll.
Weitere Details zum SVG-Styling finden Sie unter Füllung und Kontur in SVG.
SVG <polygon> – Polygonelement
Das <polygon>-Element definiert eine geschlossene Form aus einer Reihe verbundener Punkte. SVG verbindet den letzten Punkt automatisch wieder mit dem ersten Punkt.
Polygonattribute
| Attribut | Beschreibung | Standard |
|---|---|---|
points | Liste von x,y-Koordinatenpaaren für jeden Eckpunkt, mindestens drei Punkte | – |
style (fill, stroke, stroke-width) | Visuelles Styling des polygons | – |
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <polygon points="160,10 350,140 210,350 50,199" style="fill:orange;stroke:purple;stroke-width:1" />
3</svg>Das polygon-Beispiel nutzt vier Koordinatenpaare im points-Attribut. Da <polygon> immer geschlossen ist, läuft der violette stroke automatisch vom letzten Punkt zurück zum ersten.
So erstellen Sie SVG-Formen
- Erstellen Sie ein äußeres
<svg>-Element mitwidth,heightundxmlns. - Wählen Sie ein Grundformelement wie
<rect>,<circle>,<ellipse>,<line>,<polyline>oder<polygon>. - Setzen Sie die erforderlichen Koordinaten- und Größenattribute für dieses Element.
- Fügen Sie visuelle Attribute wie
fill,stroke,stroke-widthoder opacity hinzu. - Prüfen Sie die SVG-Vorschau und passen Sie Koordinaten, Größe oder viewport an, wenn die Form abgeschnitten wird.
SVG Basic Shapes – kombiniertes Beispiel
Ein minimales SVG-Dokument kann alle Grundformen in einer einzigen Illustration kombinieren. Das ist nützlich, wenn Sie Diagramme, Badges, Icons oder generierte Grafiken aus einfachen Primitiven aufbauen.
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
3 <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
4 <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
5 <polygon points="160,10 350,140 210,350 50,199" style="fill:orange; stroke:purple; stroke-width:1; fill-opacity:1" />
6 <rect x="120" y="150" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
7 <circle cx="250" cy="100" r="60" style="fill:red; stroke:black; stroke-width:3; fill-opacity:0.7" />
8 <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
9 <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
10 <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
11 <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
12 <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
13</svg>
Die Illustration „SVG Basic Shapes“ enthält alle oben beschriebenen Figuren: Linien, Rechtecke, einen Kreis, Ellipsen, polylines und ein polygon. Daneben steht das bekannte Gemälde „Pink Accent“ von Wassily Kandinsky, das zeigt, wie einfache geometrische Formen zu einer ausdrucksstärkeren Komposition werden können.
Häufige Fehler bei SVG-Formen und Korrekturen
| Problem | Wahrscheinliche Ursache | Korrektur |
|---|---|---|
| Form ist nicht sichtbar | SVG viewport ist kleiner als die Form | Vergrößern Sie width / height oder passen Sie das viewBox an |
| Form ist abgeschnitten | Koordinaten liegen außerhalb der viewport-Grenzen | Berechnen Sie Koordinaten neu oder erweitern Sie den SVG canvas |
| Füllfarbe erscheint nicht | fill="none" oder fill-opacity="0" ist gesetzt | Setzen Sie einen gültigen fill-Wert und opacity |
| Stroke ist unsichtbar | stroke-width="0" oder fehlendes stroke | Definieren Sie sowohl stroke als auch ein positives stroke-width |
| Abgerundete Ecken funktionieren nicht | rx-/ry-Werte fehlen oder sind null | Setzen Sie rx und ry auf Werte größer als null |
| Elemente überlappen unerwartet | SVG rendert Elemente in Quellreihenfolge | Ordnen Sie Elemente im Markup neu an oder verwenden Sie Gruppen |
Schnelle Farbrezepte für SVG-Formen
| Aufgabe | Beispiel |
|---|---|
| Einfarbige Füllung | fill="blue" |
| Halbtransparente Füllung | fill="red" fill-opacity="0.5" |
| Transparente Füllung mit sichtbarer Kontur | fill="none" stroke="black" |
| Halbtransparenter stroke | stroke="black" stroke-opacity="0.4" |
| Dicke farbige Kontur | stroke="orange" stroke-width="6" |
| Gestrichelte Kontur | stroke-dasharray="5,3" |
Für fortgeschrittene SVG-Styling-Techniken siehe Füllung und Kontur in SVG.
FAQ – SVG-Formen
Wie wähle ich das richtige SVG-Formelement?
Verwenden Sie <rect> für Rechtecke, <circle> für runde Formen mit gleichem Radius, <ellipse> für Ovale, <line> für ein gerades Segment, <polyline> für eine offene Segmentkette und <polygon> für eine geschlossene Form aus Punkten.
Was ist der Unterschied zwischen polyline und polygon?
<polyline> zeichnet verbundene Punkte, bleibt aber offen, solange Sie den ersten Punkt nicht manuell wiederholen. <polygon> schließt die Form automatisch, indem der letzte Punkt mit dem ersten verbunden wird.
Können SVG-Formen fill und stroke zusammen verwenden?
Ja. Die meisten SVG-Formen können sowohl fill als auch stroke verwenden. fill malt die Innenfläche der Form, während stroke und stroke-width die Kontur zeichnen.
Können einfache SVG-Formen path data ersetzen?
Ja, wenn die Grafik ein einfaches Rechteck, ein Kreis, eine Ellipse, eine gerade Linie, eine polyline oder ein polygon ist. Verwenden Sie SVG Path Data, wenn Sie Kurven, Bögen, eigene Konturen oder eine einzige komplexe Kontur benötigen.
Spezifikation und verwandte Ressourcen
- Der SVG-Spezifikationsabschnitt zu
basic shapes definiert
<rect>,<circle>,<ellipse>,<line>,<polyline>und<polygon>. - Verwenden Sie SVG-Koordinatensysteme und Einheiten, um zu verstehen, wie x/y-Koordinaten, Mittelpunkte, Radien und viewport-Größe die Platzierung von Formen beeinflussen.
- Öffnen Sie Füllung und Kontur in SVG für stroke width, line caps, line joins, opacity und dash patterns.
- Gehen Sie zu SVG-Farbe für Farbformate, opacity, fill und stroke-Beispiele.
- Lesen Sie weiter mit SVG Path Data, wenn Grundformen nicht flexibel genug sind und Sie eigene Konturen oder Kurven brauchen.
- Verwenden Sie SVG-Datei bearbeiten für .NET API-Beispiele, die SVG-Elemente erstellen, anhängen und bearbeiten.
- Gehen Sie zu SVG-Formen in Python zeichnen für Python via .NET-Beispiele, die Rechtecke, Kreise, Ellipsen, Linien, polylines und polygons erstellen.