Helpful resources ▼
  Download   Pricing   Buy

Füllung und Kontur in SVG – Attribute und Beispiele

Füllen und Konturieren sind die zwei zentralen Painting-Operationen in SVG. Formen, paths und Text können fill für die Innenfläche und stroke für die Kontur verwenden. Beide können als presentation attributes wie fill="red" oder innerhalb des CSS-Attributs style angegeben werden.

Dieser Artikel erklärt, wie SVG fill und stroke funktionieren, klärt den Unterschied zwischen properties und attributes und zeigt praktische Möglichkeiten, Farbe, opacity, Linienstärke, line caps, line joins und dash patterns zu steuern.

In diesem Artikel lernen Sie:

  • fill zu verwenden, um das Innere von SVG-Formen, paths und Text zu malen.
  • stroke und stroke-width zu verwenden, um Konturen zu zeichnen.
  • Stroke caps, joins, dash patterns und opacity zu steuern.
  • Zwischen presentation attributes und inline CSS styles zu wählen.
  • Häufige Fehler bei fill und stroke zu vermeiden, etwa die standardmäßige schwarze Füllung oder unsichtbare Konturen.

SVG Painting Model – Fill und Stroke

Wenn eine SVG-Form gerendert wird, erfolgt Painting in zwei Schritten:

  1. Zuerst wird fill angewendet und die Innenfläche der Form gemalt.
  2. Danach wird stroke angewendet und die Kontur mittig auf dem Pfad der Form gezeichnet.

Sowohl fill als auch stroke sind optional:

Für SVG-Farben können Sie Farbnamen, HEX-Werte, RGB-Werte, currentColor, Farbverläufe oder Muster verwenden. Die folgenden Beispiele zeigen mehrere Schreibweisen für fill- und stroke-Werte in SVG-Markup.

Properties vs. Attributes in SVG

In SVG sind fill und stroke als CSS-properties definiert, können aber auf unterschiedliche Weise angewendet werden.

KonzeptBeispiel
CSS propertyfill, stroke, stroke-width
Presentation attributefill="red" stroke="#00ff00" stroke-width="2"
Inline CSSstyle="fill:red; stroke:#00ff00; stroke-width:2"

In diesem Artikel gilt:

Verwenden Sie presentation attributes für einfaches SVG-Markup und inline CSS, wenn mehrere style properties auf demselben Element zusammenbleiben sollen. Beide Formen sind in SVG-Dateien üblich.

So verwenden Sie SVG fill und stroke

  1. Wählen Sie das SVG-Element, das bemalt werden soll, zum Beispiel <path>, <rect>, <circle>, <polyline> oder <text>.
  2. Setzen Sie fill, um die Innenfläche zu malen, oder verwenden Sie fill="none", wenn nur die Kontur sichtbar sein soll.
  3. Setzen Sie stroke, um die Konturfarbe festzulegen.
  4. Setzen Sie stroke-width, um die Kontur sichtbar zu machen und ihre Stärke zu steuern.
  5. Fügen Sie stroke-linecap, stroke-linejoin oder stroke-dasharray hinzu, wenn die Kontur eine bestimmte Form oder ein bestimmtes Muster haben soll.
  6. Verwenden Sie fill-opacity und stroke-opacity, wenn Füllung und Kontur unterschiedliche Transparenzwerte benötigen.

SVG Fill

Die property fill legt fest, wie die Innenfläche einer Form oder eines Textes gemalt wird. Sie gilt für SVG-Formen wie <rect>, <circle>, <path> und für Textelemente. Wenn fill nicht angegeben ist, ist der Standardwert black.

WertBeschreibungBeispiel
FarbwertFüllt die Form mit einer festen Farbefill="red"
noneDeaktiviert die Füllungfill="none"
url(#id)Verwendet einen paint server wie gradient oder patternfill="url(#gradient1)"
currentColorVerwendet die aktuelle Textfarbefill="currentColor"

Das folgende Beispiel vergleicht einen path mit fill="none" und denselben path ohne explizite Füllung ( two-paths.svg):

1<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
3    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" transform="translate(0 125)" />
4</svg>

Zwei SVG-paths im Vergleich, einer mit fill none und einer mit standardmäßiger schwarzer Füllung

SVG Stroke

Die property stroke definiert die Farbe oder paint source für die Kontur einer Form. Anders als fill ist stroke standardmäßig deaktiviert. Die Kontur liegt mittig auf dem Pfad der Form und ragt gleichmäßig nach innen und außen.

Stroke Color und Width

PropertyBeschreibungBeispiel
strokeLegt die Konturfarbe feststroke="red"
stroke-widthSteuert die Konturstärkestroke-width="5"

stroke-linecap-Werte

Für jede Linie kann die Form ihrer Enden festgelegt werden. Die property stroke-linecap definiert, wie die Enden einer SVG-Linie gerendert werden, und hat drei mögliche Werte:

WertDarstellung
buttFlacher Abschluss genau am Endpunkt des Pfads.
squareFlacher Abschluss, der um eine halbe stroke width über den Endpunkt hinausragt.
roundHalbkreisförmiges Ende mit einem Radius von der halben stroke width.

Der Effekt ist sichtbar, wenn die Linie eine deutliche stroke-width hat. Das Beispiel unten zeigt, wie stroke-width und stroke-linecap Konturstärke und Form der Linienenden bestimmen ( lines.svg).

 1<svg height="200" width="800" xmlns="http://www.w3.org/2000/svg">
 2  <g stroke="grey">
 3    <path stroke-width="3" d="M 5 20 l 215 0" />
 4    <path stroke-width="15" d="M 5 60 l 215 0" />
 5    <path stroke-width="30" d="M 5 100 l 215 0" />
 6  </g>
 7 <g stroke="grey" stroke-width="30">
 8    <path stroke-linecap="butt" d="M 300 20 l 215 0" />
 9    <path stroke-linecap="round" d="M 300 60 l 215 0" />
10    <path stroke-linecap="square" d="M 300 100 l 215 0" />
11  </g>
12  <g stroke="orange" stroke-width="2">
13    <line x1="300" y1="20" x2="515" y2="20" />
14    <path d="M 300 60 l 215 0" />
15    <path d="M 300 100 l 215 0" />
16  </g>
17</svg>

Im Beispiel setzt das <g>-Element gemeinsame properties wie stroke und stroke-width für mehrere untergeordnete paths.

Zwei Gruppen von SVG-Linien mit verschiedenen stroke-width-Werten und stroke-linecap-Eigenschaften

Im Beispiel oben zeigen die orangefarbenen Hilfslinien die ursprünglichen paths, während die grauen Konturen zeigen, wie stroke width und line caps das gerenderte Ergebnis verändern.

stroke-linejoin-Werte

Die property stroke-linejoin steuert die Form von Ecken, an denen zwei stroke-Segmente aufeinandertreffen. Drei häufige Werte sind:

WertBeschreibung
miterVerlängert die Außenkanten zu einer Ecke, Standardwert.
roundRundet die Ecke mit einem Radius von der halben stroke width.
bevelSchneidet die Ecke ab und erzeugt eine flache Kante.

Das nächste Beispiel zeigt die Werte von stroke-linejoin ( linejoin.svg):

 1<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
 2    <g stroke-width="20" fill="none">
 3        <polyline points="40 60 80 20 120 60 160 20 200 60 240 20" stroke="grey" stroke-linecap="butt"  stroke-linejoin="miter" />
 4        <polyline points="40 140 80 100 120 140 160 100 200 140 240 100" stroke="#CD5C5C" stroke-linecap="round" stroke-linejoin="round" />
 5        <polyline points="40 220 80 180 120 220 160 180 200 220 240 180" stroke="black"  stroke-linecap="square" stroke-linejoin="bevel" />
 6    </g>
 7    <g fill="none" stroke="orange" stroke-width="2">
 8        <polyline points="40 60 80 20 120 60 160 20 200 60 240 20" />
 9        <polyline points="40 140 80 100 120 140 160 100 200 140 240 100" />
10        <polyline points="40 220 80 180 120 220 160 180 200 220 240 180" />
11    </g>
12</svg>

Drei Polylinien mit unterschiedlichen stroke-linejoin-Eigenschaften

Die orangefarbene Linie zeigt den ursprünglichen polyline path, während die breitere farbige Kontur den gerenderten stroke darum zeigt.

Punkte und Striche – stroke-dasharray

Alle SVG-stroke-properties können auf Linientypen, Text und Konturen von Elementen wie Kreis oder Rechteck angewendet werden. Die property stroke-dasharray wandelt eine durchgehende Kontur in eine Folge aus Strichen und Lücken um. Das Attribut akzeptiert eine Liste von Zahlen, die abwechselnd Strich- und Lückenlängen in Benutzereinheiten, meist Pixeln, definieren.

1stroke-dasharray="10 5"   /* dash 10, gap 5 */
2stroke-dasharray="20 10 5"/* dash 20, gap 10, dash 5, then repeats */
PropertyBeschreibung
stroke-dasharrayDefiniert das Muster aus Strichen und Lücken
stroke-dashoffsetVerschiebt das dash pattern

Hier ist ein Beispiel mit stroke-dasharray ( dasharray.svg):

1<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
2    <line x1="20" y1="30" x2="400" y2="30" style="stroke:rgb(112, 128, 144); fill:none; stroke-width:10; stroke-dasharray:10 5;" />
3    <line x1="20" y1="80" x2="400" y2="80" style="stroke:olive; fill:none; stroke-width: 20; stroke-dasharray: 20 10 5;" />
4    <path d="M 10 200 Q 50 100 150 200 T 230 200 T 300 200 T 390 200" stroke="#FF8C00" stroke-width="8" fill="none" stroke-linecap="round" stroke-dasharray="15 10 2 8" />
5</svg>

Bei der grauen und der orangefarbenen Linie hat das dash pattern eine gerade Anzahl von Werten: Jedes Paar bedeutet Strichlänge und Lückenlänge. Wenn die Liste eine ungerade Anzahl von Werten hat, wiederholt SVG die Liste, um ein gerades Muster zu erzeugen. Zum Beispiel wird 20 10 5 zu 20 10 5 20 10 5, wie die olivfarbene Linie zeigt.

Drei paths mit unterschiedlichen stroke-dasharray-Eigenschaften

Sie können mit dem Attribut stroke-dasharray experimentieren. Mit SVG-strokes und einfachen SVG-Formen lassen sich erstaunliche Effekte erzielen ( dasharray-example.svg):

 1<svg height="600" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <g fill="none">
 3        <circle cx="100" cy="100" r="40" stroke="red" stroke-width="55" stroke-dasharray="4,2" />
 4        <circle cx="100" cy="100" r="30" stroke="grey" stroke-width="45" stroke-dasharray="5,2" transform="translate(120,40)" />
 5        <circle cx="100" cy="100" r="35" stroke="orange" stroke-width="45" stroke-dasharray="9,3" transform="translate(30,130)" />
 6		<circle cx="100" cy="100" r="20" stroke="pink" stroke-linecap="round" stroke-width="20" stroke-dasharray="10,15" transform="translate(380,120)" />
 7        <rect x="320" y="100" width="100" height="100" stroke="DarkCyan" stroke-width="55" stroke-dasharray="7 7 3 2" />
 8        <text x="200" y="300" font-family="arial" font-size="60" stroke="#000080" stroke-width="3" stroke-dasharray="2 1">I love SVG!</text>
 9    </g>
10</svg>

Kreis, Rechteck und Text mit unterschiedlichen stroke-dasharray-Mustern

Weitere SVG Paint Attributes

AttributZweckBeispiel
fill-opacityWert von 0 transparent bis 1 deckendfill-opacity="0.6"
fill-ruleBestimmt, wie komplexe Formen gefüllt werden. Optionen: nonzero als Standard oder evenodd.fill-rule="evenodd"
stroke-opacityWert von 0 transparent bis 1 deckendstroke-opacity="0.6"
stroke-miterlimitSteuert die maximale Länge einer miter join. Werte > 1.stroke-miterlimit="4"
stroke-dashoffsetVerschiebt den Anfang eines dash pattern entlang des path.stroke-dashoffset="5"

Diese Attribute können mit den oben gezeigten kombiniert werden, um präzise visuelle Kontrolle zu erreichen.

FAQ – SVG Fill und Stroke

Wie lasse ich einen path nur als Kontur ohne Füllung erscheinen?

Setzen Sie fill="none". Dadurch wird die Innenfläche entfernt, während der stroke sichtbar bleibt. Mit stroke und stroke-width steuern Sie die Kontur.

Was ist der Unterschied zwischen fill und stroke in SVG?

fill malt das Innere einer Form, eines path oder eines Textes. stroke malt die Kontur entlang der Elementgrenze oder des path. Eine Form kann beides gleichzeitig verwenden.

Warum wirkt mein stroke-dasharray auf gekrümmten paths ungleichmäßig?

Dash-Längen werden entlang der Pfadlänge gemessen. Kurven können Strichsegmente visuell ungleichmäßig erscheinen lassen. Passen Sie Strich- und Lückenwerte an oder verwenden Sie stroke-dashoffset, um das Muster feinzujustieren.

Wann verwende ich stroke-linecap="round" und wann stroke-linejoin="round"?

stroke-linecap beeinflusst die Enden offener sub-paths, während stroke-linejoin Ecken beeinflusst, an denen zwei Segmente zusammentreffen. Verwenden Sie round für beide, wenn Endpunkte und Ecken weicher aussehen sollen.

Können gradients für fill und stroke verwendet werden?

Ja. Gradients und patterns können mit fill="url(#id)" oder stroke="url(#id)" angewendet werden, wobei id auf eine gradient- oder pattern-Definition verweist.

Häufige Fehler und Korrekturen

ProblemUrsacheLösung
Form erscheint trotz fill-Attribut schwarzfill wurde ausgelassen oder steht auf dem StandardwertFügen Sie fill="none" oder eine gültige Farbe hinzu, etwa fill="#00ff00".
Striche fehlen auf einer gekrümmten Liniestroke-dasharray-Werte sind für die Kurvenlänge zu kleinErhöhen Sie Strich- und Lückenlängen oder verwenden Sie stroke-dashoffset zum Neupositionieren.
Stroke caps wirken abgeschnittenstroke-linecap ist bei dicken strokes nicht gesetztSetzen Sie stroke-linecap="square" oder round, um die Enden korrekt zu rendern.
Miter joins erzeugen sehr lange SpitzenScharfe Winkel verwenden stroke-linejoin="miter" mit hohem miter limitSenken Sie stroke-miterlimit oder verwenden Sie stroke-linejoin="round" oder bevel.
Opacity wirkt unbeabsichtigt auf fill und strokeopacity wird statt fill-opacity / stroke-opacity verwendetErsetzen Sie opacity durch fill-opacity und/oder stroke-opacity.

Schnelle Rezepte

Fill-und-Stroke-Spickzettel

ZielSVG-Code
Füllung deaktivierenfill="none"
Feste Füllfarbefill="orange"
Halbtransparente Füllungfill-opacity="0.5"
Kontur aktivierenstroke="black"
Dickere Konturstroke-width="4"
Gestrichelte Konturstroke-dasharray="10 5"
Abgerundete Linienendenstroke-linecap="round"

Praktische Beispiele

1. Einfache feste Füllung und Kontur

1<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="60" cy="60" r="50" fill="#4CAF50" stroke="#026802" stroke-width="4"/>
3</svg>

2. Gestrichelte Linie mit Offset

1<svg width="200" height="40" xmlns="http://www.w3.org/2000/svg">
2  <line x1="10" y1="20" x2="190" y2="20" stroke="#ff6600" stroke-width="8" stroke-dasharray="15 5" stroke-dashoffset="7"/>
3</svg>

Gestrichelter stroke mit runden Enden

1<line x1="10" y1="40" x2="140" y2="40"
2      stroke="black"
3      stroke-width="4"
4      stroke-dasharray="10 6"
5      stroke-linecap="round" />

Spezifikation und verwandte Ressourcen

SVG-Transformationsmatrix SVG-Farbe