SVG-Farbe – fill, stroke, opacity und Farbcodes

SVG-Farbe steuert, wie Formen, paths, Linien und Text gemalt werden. Sie können Farben mit fill, stroke, opacity-Attributen, CSS styles, Farbnamen, HEX, RGB, HSL, gradients und patterns setzen. Dieses Tutorial erklärt die wichtigsten SVG-Farbregeln und zeigt, wie dieselben Farbwerte auf häufige SVG-Elemente wirken.

Quick Answer: Verwenden Sie in SVG fill für die Innenfläche von Formen, paths und Text, stroke für Konturen und Linien sowie opacity, fill-opacity oder stroke-opacity für Transparenz. Farbwerte können Farbnamen, HEX, RGB/RGBA, HSL/HSLA oder url(#id)-Verweise auf gradients und patterns sein.

1<circle cx="50" cy="50" r="40" fill="#3498db" stroke="#1f4f72" stroke-width="4" />

In diesem Artikel lernen Sie: SVG-Farben mit fill und stroke zu setzen, Farbcodeformate zu wählen, shapes, paths und Text zu färben und häufige SVG-Farbfehler zu vermeiden.

Wie SVG-Farbe funktioniert

In SVG wird das Einfärben eines Elements painting genannt. Paint bestimmt, wie ein Element gerendert wird, indem eine Füllung, eine Kontur oder beides angewendet wird. Diese properties steuern die Innenfläche und die Außenlinie von Formen, paths und Text.

SVG unterstützt zwei häufige Arten, Farben zu definieren:

Presentation attributes, zum Beispiel fill="red" oder stroke="#00ff00", die direkt am Element stehen.
Das style-Attribut, zum Beispiel style="fill:#ff0000; stroke:green; stroke-width:2", das normaler CSS-Syntax folgt.

Beide Ansätze nehmen an CSS cascade und inheritance rules teil, haben aber nicht dieselbe Priorität. Ein presentation attribute wie fill="red" ist leicht zu lesen und zu bearbeiten, während eine inline style-Deklaration dieselbe property als presentation attribute normalerweise überschreibt. Einen tieferen C#- und SVG-Styling-Leitfaden finden Sie unter SVG CSS vs Inline Styles vs Presentation Attributes.

Fill und Stroke erklärt

SVG nutzt zwei zentrale properties, um Farbe anzuwenden:

Property	Was sie beeinflusst	Standardverhalten
`fill`	Innenfläche einer Form oder eines geschlossenen path	Standardmäßig `black`
`stroke`	Kontur einer Form, Linie oder eines Textes	Wird standardmäßig nicht gerendert

Eine Form kann jede property unabhängig verwenden oder beide kombinieren. Ein Kreis kann zum Beispiel eine farbige Füllung und eine sichtbare Kontur haben, während ein Linienelement (<line>) nur mit stroke sichtbar gemacht wird. Geschlossene Formen wie <circle>, <rect> und <polygon> unterstützen sowohl fill als auch stroke.

Regeln für SVG-Farbwerte

SVG wendet beim Interpretieren von Farbwerten einige wichtige Regeln an:

Wenn fill nicht angegeben ist, wird die Form standardmäßig schwarz gefüllt.
fill="none" oder fill="transparent" macht die Innenfläche vollständig transparent.
Wenn stroke fehlt, wird keine Kontur gezeichnet, auch wenn stroke-width definiert ist.
fill und stroke akzeptieren mehrere Farbformate, darunter Farbnamen, HEX, RGB/RGBA und HSL/HSLA.
Fortgeschrittene paint sources wie gradients und patterns können ebenfalls als fill- oder stroke-Werte verwendet werden. Die Beispiele unten zeigen eine gradient-Füllung für Text, und die verwandten Ressourcen verlinken auf das eigene Gradient-Tutorial.

SVG-Farbcodes – HEX, RGB, HSL und Namen

Kurzüberblick

HEX – kompaktes Farbformat, häufig für statische SVG-Grafiken.
RGB/RGBA – nützlich für programmgesteuerte Farbsteuerung und dynamische Transparenz.
HSL/HSLA – besser geeignet für Designaufgaben und systematische Farbvariationen.

Eine Farbe kann auf mehrere Arten angegeben werden. Das beste Format hängt davon ab, ob die Farbe lesbar, kompakt, leicht im Code zu erzeugen oder teilweise transparent sein soll.

Farbformat	Am besten für	Beispiel
Farbname	Einfache lesbare Beispiele und Prototypen	`fill="green"`
HEX	Kompakte, stabile Farben in Icons und Illustrationen	`fill="#00FF00"`
RGB	Programmgesteuerte Farbwerte aus Rot-, Grün- und Blaukanälen	`fill="rgb(0,255,0)"`
RGBA	Farbe plus Transparenz in einem Wert	`fill="rgba(0,255,0,0.6)"`
HSL	Designfreundliche Anpassung über hue, saturation und lightness	`fill="hsl(120,100%,50%)"`
HSLA	HSL-Farbe plus Transparenz	`fill="hsla(120,100%,50%,0.6)"`
`url(#id)`	Gradients und patterns, die in `<defs>` definiert sind	`fill="url(#grad1)"`

Beispiele für SVG-Farbcodes

Die folgenden Beispiele verwenden denselben Kreis, damit nur die Farbsyntax verglichen wird. Jede Zeile setzt ein grünes fill und ein rotes stroke in einem anderen Farbformat.

1<circle cx="50" cy="50" r="40" fill="green" stroke="red" />
2<circle cx="50" cy="50" r="40" fill="#00FF00" stroke="#FF0000" />
3<circle cx="50" cy="50" r="40" fill="rgb(0,255,0)" stroke="rgb(255,0,0)" />
4<circle cx="50" cy="50" r="40" fill="rgba(0,255,0,0.6)" stroke="rgba(255,0,0,0.8)" />
5<circle cx="50" cy="50" r="40" fill="hsl(120,100%,50%)" stroke="hsl(0,100%,50%)" />
6<circle cx="50" cy="50" r="40" fill="hsla(120,100%,50%,0.6)" stroke="hsla(0,100%,50%,0.8)" />

Tipp:

Wenn Sie Transparenz benötigen, verwenden Sie RGBA/HSLA oder die speziellen Attribute fill-opacity und stroke-opacity.
Eine praktische Referenz für Farbnamen finden Sie im Artikel HTML Color Names.

So setzen Sie SVG-Farbe

Wählen Sie das Ziel-Element, zum Beispiel <circle>, <path>, <line>, <polygon> oder <text>.
Verwenden Sie fill für die Innenfarbe geschlossener Formen, paths und Text.
Verwenden Sie stroke und stroke-width für Konturen und Linienfarbe.
Wählen Sie ein Farbformat: Farbname, HEX, RGB/RGBA, HSL/HSLA oder url(#id) für gradients und patterns.
Verwenden Sie fill-opacity, stroke-opacity, RGBA oder HSLA, wenn Transparenz benötigt wird.
Prüfen Sie Standardwerte: Fehlendes fill wird schwarz, und fehlendes stroke bedeutet, dass keine Kontur gezeichnet wird.

Online SVG Color Converter

Verwenden Sie den Online-Farbkonverter, wenn Sie einen exakten Farbwert benötigen, bevor Sie ihn in ein SVG-fill, stroke, style oder einen gradient stop einsetzen. Sie können zum Beispiel eine Markenfarbe von RGB nach HEX konvertieren, um kompaktes SVG-Markup zu erhalten, oder HEX nach HSL umwandeln, wenn Sie hue, saturation oder lightness gezielter anpassen möchten. Der Konverter bearbeitet die SVG-Datei nicht direkt. Kopieren Sie den konvertierten Wert in das benötigte SVG-Attribut oder die CSS-Deklaration.

SVG-Shapes färben

SVG-Kreisfarbe

Ein Kreis ist eine der einfachsten SVG-Formen und eignet sich gut, um Farbe zu demonstrieren. Durch Ändern von fill und stroke steuern Sie die Farbe der Kreisfläche, der Kontur oder beider Teile.

Das Beispiel unten zeigt mehrere Kreise mit unterschiedlichen Farbkonfigurationen, von der Standarddarstellung bis zu frei wählbaren Kombinationen aus fill und stroke.

1<svg height="200" width="700" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="70"  cy="70" r="50" />
3  <circle cx="200" cy="70" r="50" fill="#79C99E" />
4  <circle cx="330" cy="70" r="50" fill="#79C99E" stroke="#508484" stroke-width="10" />
5  <circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" />
6  <circle cx="590" cy="70" r="50" fill="none" stroke="#508484" stroke-width="10" />
7</svg>

In diesem Beispiel:

Der erste Kreis verwendet Standardwerte und erscheint schwarz gefüllt.
Der zweite Kreis setzt nur eine fill-Farbe.
Der dritte Kreis kombiniert ein eigenes fill mit sichtbarem stroke.
Der vierte Kreis definiert stroke-width, aber keine stroke-Farbe, deshalb bleibt die Kontur unsichtbar.
Der letzte Kreis entfernt die Füllung vollständig und zeichnet nur die Kontur.

SVG-Kreise mit unterschiedlichen Kombinationen aus fill und stroke

SVG-Linie und Polyline färben

Anders als geschlossene Formen werden Linien und polylines in SVG vor allem über ihre Kontur definiert. Dadurch zeigen sie besonders klar, wie stroke Farbe, Stärke und Sichtbarkeit steuert.

Das Beispiel unten vergleicht einfache <line>-Elemente mit <polyline>-Elementen und zeigt, wie stroke color, stroke weight und fill in verschiedenen Fällen wirken.

1<svg height="400" width="700" xmlns="http://www.w3.org/2000/svg">
2    <line x1="30" y1="30" x2="30" y2="300" style="stroke:#4387be; stroke-width:10" />
3    <line x1="55" y1="27" x2="130" y2="300" style="stroke:#c4456d; stroke-width:10" />
4    <line x1="80" y1="20" x2="250" y2="300" style="stroke:#77bec1; stroke-width:10" />
5    <polyline points="300,100 360,50 420,100 480,50 540,100 600,50 660,100" style="fill:none; stroke:#fb6796; stroke-width:5" />
6    <polyline points="300,200 360,150 420,200 480,150 540,200 600,150 660,200" style="fill:#c9d7e1; stroke:#fb6796; stroke-width:5" />
7    <polyline points="300,300 360,250 420,300 480,250 540,300 600,250 660,300" style="stroke:#fb6796; stroke-width:5" />
8</svg>

In diesem Beispiel:

Die drei <line>-Elemente verwenden unterschiedliche stroke-Farben und sind vollständig von stroke abhängig, da Linien kein fill unterstützen.
Die erste polyline setzt ausdrücklich fill="none", sodass nur die Kontur sichtbar ist.
Die zweite polyline nutzt sowohl eine Füllfarbe als auch einen stroke, was möglich ist, weil die Punkte eine verbundene Form bilden.
Die letzte polyline definiert nur einen stroke. Die Füllung fällt deshalb auf den Standardwert zurück, also schwarz.

Drei SVG-Linien und drei Polylines mit stroke, fill und gemischtem Farbverhalten

SVG-Polyline und Polygon färben

Auf den ersten Blick wirken polylines und polygons ähnlich, beim Färben verhalten sie sich aber unterschiedlich. Der wichtigste Unterschied: Eine polyline ist eine offene Form, während ein polygon immer geschlossen ist.

Das Beispiel unten nutzt dieselben fill- und stroke-Werte, um deutlich zu zeigen, wie SVG Farbe bei offenen und geschlossenen Formen behandelt.

1<svg height="400" width="500" xmlns="http://www.w3.org/2000/svg">
2    <polyline points="60,290 130,20 200,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
3    <polygon points="260,290 330,20 400,290" style="fill:#86a9b9; stroke-width:5; stroke:#fb6796" />
4</svg>

Beide Formen verwenden dieselben fill- und stroke-Werte, sodass der Unterschied im Verhalten gut sichtbar wird:

Polyline als offene Form und Polygon als geschlossene Form mit identischem fill und stroke

SVG Path Color

Paths sind die flexibelsten Elemente in SVG und können offene wie geschlossene Formen beschreiben. Deshalb hängt ihr Farbverhalten davon ab, ob der path eine geschlossene Fläche bildet oder offen bleibt.

Im Beispiel unten werden dieselben path data zweimal verwendet, um zu zeigen, wie fill einen path beeinflusst, wenn es ausdrücklich deaktiviert oder angewendet wird.

 1<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
 2  <!-- Unfilled path -->
 3  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 4           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
 5           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
 6        stroke="#a06e84" stroke-width="3" fill="none" />
 7  <!-- Filled path -->
 8  <path d="M150,50 L150,300 M120,100 L150,50 L180,100
 9           M110,150 L150,90 L190,150 M90,220 L150,130 L210,220
10           M70,300 L150,190 L230,300 M110,310 L150,240 L190,310"
11        stroke="#a06e84" stroke-width="3" fill="#74aeaf" transform="translate(200)" />
12</svg>

Die Abbildung zeigt, wie fill="none" und fill="#74aeaf" dargestellt werden:

Zwei SVG-paths im Vergleich, einer mit fill none und einer mit farbiger Füllung

SVG-Textfarbe

Wie andere SVG-Formen kann auch Text sowohl stroke als auch fill verwenden. In diesem Codebeispiel sehen Sie, wie Sie fill color und stroke color von Text setzen und einen gradient als Füllung verwenden. Wie bei allen SVG-Formen wird Text standardmäßig schwarz angezeigt, wenn das fill-Attribut nicht angegeben ist:

 1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 4			<stop offset="10%" style="stop-color:lightsalmon" />
 5			<stop offset="50%" style="stop-color:teal" />
 6			<stop offset="90%" style="stop-color:lightpink" />
 7		</linearGradient>
 8    </defs>
 9    <text x="50" y="50" font-family="arial" font-size="40" >How to add SVG text color?</text>
10    <text x="50" y="130" font-family="arial" font-size="40" fill="lightpink" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
11    <text x="50" y="210" font-family="arial" font-size="40" fill="none" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
12    <text x="50" y="290" font-family="arial" font-size="40" fill="url(#grad1)" stroke="teal" stroke-width="1" >How to add SVG text color?</text>
13</svg>

Die Abbildung zeigt verschiedene Fälle, in denen fill und stroke verwendet werden, um Textfarbe hinzuzufügen:

SVG-Textbeispiele mit Standardfüllung, fill und stroke, Konturtext und gradient-Füllung

Mehr zum Stylen von Text finden Sie in den Artikeln Füllung und Kontur in SVG und SVG Gradients.

SVG Opacity und transparente Farben

Opacity bestimmt, wie transparent ein SVG-Element erscheint und wie es sich visuell mit Elementen dahinter mischt. In SVG kann Transparenz entweder direkt in einem Farbwert oder über spezielle Transparenz-properties definiert werden. Das folgende Beispiel vergleicht drei häufige Methoden für Transparenz und zeigt, wie jede Methode die finale Darstellung beeinflusst.

 1<svg height="200" width="1250" xmlns="http://www.w3.org/2000/svg">
 2  <!-- RGBA opacity -->
 3  <rect x="310" y="30" width="100" height="100" fill="rgba(0,50,255,0.8)" />
 4  <rect x="250" y="50" width="110" height="100" fill="rgba(0,50,255,0.7)" />
 5  <rect x="170" y="90" width="110" height="100" fill="rgba(0,50,255,0.6)" />
 6  <rect x="100" y="50" width="110" height="100" fill="rgba(0,50,255,0.4)" />
 7  <rect x="50"  y="30" width="110" height="100" fill="rgba(0,50,255,0.2)" />
 8
 9  <!-- HSLA opacity -->
10  <rect x="710" y="30" width="100" height="100" fill="hsla(0,100%,50%,0.8)" />
11  <rect x="650" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.7)" />
12  <rect x="570" y="90" width="110" height="100" fill="hsla(0,100%,50%,0.6)" />
13  <rect x="500" y="50" width="110" height="100" fill="hsla(0,100%,50%,0.4)" />
14  <rect x="450" y="30" width="110" height="100" fill="hsla(0,100%,50%,0.2)" />
15
16  <!-- HEX + fill-opacity -->
17  <rect x="1110" y="30" width="100" height="100" fill="#C1B900" fill-opacity="0.8" />
18  <rect x="1050" y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.7" />
19  <rect x="970"  y="90" width="110" height="100" fill="#C1B900" fill-opacity="0.6" />
20  <rect x="900"  y="50" width="110" height="100" fill="#C1B900" fill-opacity="0.4" />
21  <rect x="850"  y="30" width="110" height="100" fill="#C1B900" fill-opacity="0.2" />
22</svg>

In diesem Beispiel:

Die erste Gruppe verwendet RGBA-Farben, bei denen der Alpha-Kanal die Transparenz direkt im Farbwert steuert.
Die zweite Gruppe verwendet HSLA. Farbton und Helligkeit sind von opacity getrennt, was für Design-Einstellungen praktisch ist.
Die dritte Gruppe kombiniert HEX-Farben mit fill-opacity, sodass Farbe und opacity unabhängig definiert bleiben.
Alle drei Ansätze erzeugen visuell ähnliche Ergebnisse, unterscheiden sich aber in Flexibilität und späterer Änderbarkeit der Transparenz.

Drei Gruppen von SVG-Rechtecken, die RGBA, HSLA und HEX mit fill-opacity demonstrieren

Häufige Fehler und Korrekturen

Die folgenden Probleme gehören zu den häufigsten Ursachen für unerwartetes Farbverhalten in SVG.

Problem	Ursache	Korrektur
Stroke ist nicht sichtbar	`stroke-width` ist gesetzt, aber die `stroke`-Farbe fehlt	Fügen Sie einen `stroke`-Wert hinzu, zum Beispiel `stroke="#d80539" stroke-width="4"`
Form erscheint schwarz statt transparent	`fill` fehlt, und SVG verwendet die standardmäßige schwarze Füllung	Verwenden Sie `fill="none"`, wenn nur die Kontur sichtbar sein soll
Farbwert wird ignoriert	Die Farbangabe ist fehlerhaft oder nicht unterstützt	Verwenden Sie einen gültigen Farbnamen, 3- oder 6-stelligen HEX-Wert, RGB/RGBA oder HSL/HSLA
Opacity hat keine Wirkung	HEX-Farbe enthält keine Transparenz	Verwenden Sie RGBA, HSLA, `fill-opacity` oder `stroke-opacity`
CSS-Farbe wird nicht angewendet	Inline `style` oder eine spezifischere CSS-Regel überschreibt sie	Prüfen Sie computed styles und entfernen oder aktualisieren Sie konkurrierende `style`-, `fill`-, `stroke`- oder CSS-Regeln

Tipp: Wenn Farben nicht wie erwartet gerendert werden, öffnen Sie das SVG in den Entwicklerwerkzeugen Ihres Browsers. Fehlende namespaces (xmlns) oder kleine Syntaxfehler verhindern häufig korrektes Farb-Rendering.

Schnelle SVG-Farbrezepte

Ziel	Code-Snippet
Shape färben	`<circle cx="50" cy="50" r="40" fill="#E74C3C" />`
Shape halbtransparent machen	`<rect width="100" height="100" fill="rgba(0,155,0,0.5)" />`
Fill und stroke kombinieren	`<polygon points="30,90 90,90 60,20" fill="#3498DB" stroke="#1B4F72" stroke-width="4" />`
Nur stroke anwenden	`<line x1="0" y1="0" x2="100" y2="0" stroke="#ff6600" stroke-width="2" />`

FAQ – SVG-Farbe

Welches SVG-Farbformat sollte ich verwenden?

Verwenden Sie HEX für kompakte statische Grafiken, RGB/RGBA, wenn Werte aus Code kommen oder Alpha-Transparenz benötigen, und HSL/HSLA, wenn Sie hue, saturation oder lightness anpassen möchten. Farbnamen sind für einfache Beispiele nützlich, aber HEX- oder RGB-Werte sind in produktiven SVG-Dateien meist klarer.

Wie mache ich eine SVG-Farbe transparent?

Verwenden Sie rgba()- oder hsla()-Farbwerte, oder halten Sie die Farbe getrennt und ergänzen Sie fill-opacity oder stroke-opacity. Verwenden Sie opacity nur, wenn das gesamte Element transparent werden soll.

Kann ich CSS verwenden, um SVG-Farben zu stylen?

Ja. Sie können SVG-Farben mit inline styles, style blocks oder externem CSS über fill, stroke und verwandte properties anwenden. Inline style und presentation attributes können allgemeinere CSS-Regeln überschreiben.

Warum wird meine SVG-Form schwarz?

Wenn fill nicht angegeben ist, füllt SVG geschlossene Formen standardmäßig schwarz. Fügen Sie fill="none" für eine reine Konturform hinzu oder setzen Sie eine bestimmte Füllfarbe.

Kann SVG HEX-, RGB- und HSL-Farbwerte verwenden?

Ja. SVG akzeptiert Farbnamen, HEX-Werte, RGB/RGBA, HSL/HSLA und paint references wie url(#gradient-id). Verwenden Sie RGBA, HSLA oder opacity-Attribute, wenn die Farbe transparent sein soll.

Warum ändert fill die Farbe meiner SVG-Linie nicht?

Ein <line>-Element hat keine Innenfläche, daher macht fill es nicht sichtbar. Verwenden Sie stroke für SVG-Linien, polylines, Konturen und offene paths.

Kann SVG gradients als Farben verwenden?

Ja. Verwenden Sie fill="url(#gradient-id)" oder stroke="url(#gradient-id)", um einen gradient anzuwenden, der im <defs>-Abschnitt des SVG definiert ist.

Wie ändere ich SVG-Farben programmgesteuert?

Verwenden Sie einen SVG-DOM-Workflow: Datei laden, Ziel-Element auswählen, fill, stroke, style oder gradient stop values aktualisieren und das Dokument speichern. Siehe SVG-Farbe ändern für fokussierte Farbbeispiele oder SVG-Styles programmgesteuert in C# ändern, wenn die Farbe über inline styles, CSS rules oder allgemeine style normalization gesteuert wird. Für Python via .NET siehe SVG-Farben in Python ändern.

Spezifikation und verwandte Ressourcen

Der SVG-Spezifikationsabschnitt zu painting definiert SVG paint, fill, stroke, opacity, gradients, patterns und paint servers.
Die SVG-1.1-Liste der color keywords ist nützlich für benannte Farbwerte wie red, green oder DarkCyan.
Verwenden Sie Füllung und Kontur in SVG für stroke width, line caps, line joins, dash patterns und paint attributes.
Öffnen Sie SVG Gradients, um lineare oder radiale gradients auf fills und strokes anzuwenden.
Nutzen Sie SVG Styling, Fonts, and Gradients in C# als Hub für CSS, inline styles, fonts, gradients und programmgesteuerte style workflows.
Siehe Paint Builder für .NET API-Beispiele, die stroke- und fill-Werte programmgesteuert definieren.
Siehe SVG-Farbe ändern für C#-Beispiele, die SVG-Farben in Dateien aktualisieren.
Siehe SVG-Farben in Python ändern für Python via .NET-Beispiele, die fill, stroke, inline styles und gradient stops bearbeiten.

Nutzen Sie den kostenlosen Online- Color Mixer, wenn Sie zwei Farben mischen und das Ergebnis visuell prüfen möchten.

Füllung und Kontur in SVG SVG-Hintergrundfarbe