SVG-Farbtechniken: Fill, Stroke und Gradienten

SVG (Scalable Vector Graphics) verfügt über ein eigenes Farbsystem, das neben, aber getrennt von HTML/CSS existiert. Das Verständnis, wie SVG mit Farbe umgeht, erschließt auflösungsunabhängige Icons, animierte Illustrationen und Gradienteneffekte, die sich auf jede Bildschirmgröße perfekt skalieren lassen. Dieser Leitfaden behandelt alle wichtigen SVG-Farbtechniken – von einfachem Fill und Stroke bis hin zu komplexen Gradienten – mit praktischen Beispielen.

Das SVG-Fill-Attribut

Das fill-Attribut steuert die Farbe im Inneren einer Form. Es ist das SVG-Äquivalent zu background-color bei HTML-Elementen. Jede SVG-Form – <rect>, <circle>, <path>, <polygon>, <ellipse> – akzeptiert ein Fill.

Grundlegende Fill-Werte

Fill akzeptiert alle Farbformate wie CSS:

<!-- Hex-Farben -->
<circle cx="50" cy="50" r="40" fill="#3B82F6" />

<!-- Benannte Farben -->
<rect width="100" height="60" fill="tomato" />

<!-- RGB -->
<polygon points="50,10 90,90 10,90" fill="rgb(34, 197, 94)" />

<!-- HSL -->
<ellipse cx="60" cy="40" rx="50" ry="30" fill="hsl(220, 80%, 55%)" />

<!-- Transparentes Fill -->
<circle cx="50" cy="50" r="40" fill="none" stroke="#EF4444" stroke-width="3" />

Ein fill="none" entfernt das Fill vollständig und lässt nur den Stroke sichtbar – ein gängiges Muster für Outline-Icons.

Fill-Deckkraft

Das Attribut fill-opacity steuert die Transparenz unabhängig von der Farbe:

<!-- Halb-transparente Überlagerung -->
<rect width="200" height="120" fill="#1E3A8A" fill-opacity="0.3" />

<!-- Oder rgba() direkt verwenden -->
<rect width="200" height="120" fill="rgba(30, 58, 138, 0.3)" />

<!-- Oder 8-stelliges Hex verwenden -->
<rect width="200" height="120" fill="#1E3A8A4D" />

Alle drei obigen Beispiele erzeugen dasselbe Ergebnis. Das Attribut fill-opacity hat eine etwas bessere Unterstützung in älteren SVG-Renderern, während rgba() und 8-stelliges Hex moderne Browserversionen erfordern. Für alles, was auf moderne Browser abzielt, sind alle drei gleichwertig.

Fill-Regel

Wenn ein Pfad sich selbst kreuzt, bestimmt das Attribut fill-rule, welche Bereiche als innen gelten:

<!-- evenodd: abwechselnde Bereiche gefüllt und leer (für Donut-Formen, Sterne) -->
<path d="M50,10 L61,35 L90,35 L68,57 L79,82 L50,65 L21,82 L32,57 L10,35 L39,35 Z"
      fill="#F59E0B"
      fill-rule="evenodd" />

<!-- nonzero (Standard): die meisten Bereiche sind gefüllt -->
<path d="..." fill="#3B82F6" fill-rule="nonzero" />

Die evenodd-Regel ist besonders nützlich für Sternformen und hohle Pfad-Designs. Ohne sie wird ein fünfzackiger Stern, der als einzelner Pfad gezeichnet wird, in der Mitte ausgefüllt – evenodd macht die Mitte hohl.

SVG-Stroke-Eigenschaften

Der Stroke zeichnet eine Linie entlang des Pfads oder der Formkontur. Im Gegensatz zu HTMLs border ist SVG-Stroke standardmäßig auf der Pfadgrenze zentriert und erstreckt sich gleichermaßen nach innen und außen der Form.

Grundlegende Stroke-Attribute

<!-- Stroke-Farbe und -Breite -->
<circle cx="60" cy="60" r="40"
        fill="none"
        stroke="#0EA5E9"
        stroke-width="4" />

<!-- Stroke auf einer gefüllten Form -->
<rect width="120" height="80" rx="8"
      fill="#DBEAFE"
      stroke="#2563EB"
      stroke-width="2" />

Strichlinien-Muster

Die Attribute stroke-dasharray und stroke-dashoffset erzeugen gestrichelte Linien und animierte Zeicheneffekte:

<!-- Einfache Striche: 10px Strich, 5px Abstand -->
<line x1="10" y1="50" x2="290" y2="50"
      stroke="#64748B"
      stroke-width="2"
      stroke-dasharray="10 5" />

<!-- Punkte: sehr kurzer Strich, größerer Abstand -->
<line x1="10" y1="50" x2="290" y2="50"
      stroke="#EF4444"
      stroke-width="3"
      stroke-dasharray="1 8"
      stroke-linecap="round" />

<!-- Unregelmäßiges Muster -->
<path d="M10,50 Q150,10 290,50"
      fill="none"
      stroke="#8B5CF6"
      stroke-width="2"
      stroke-dasharray="15 5 3 5" />

Die klassische SVG-Zeichenanimation verwendet stroke-dashoffset:

/* CSS-Animation: Pfad "zeichnet" sich beim Laden der Seite */
.animated-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-in-out forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

Stroke-Linienenden und -Verbindungen

stroke-linecap steuert das Aussehen der Linienenden. stroke-linejoin steuert, wie Pfadecken aufeinandertreffen:

<!-- Butt Cap (Standard): Enden bündig abgeschnitten -->
<line x1="20" y1="20" x2="180" y2="20"
      stroke="#1A1A2E" stroke-width="12"
      stroke-linecap="butt" />

<!-- Round Cap: Enden haben Halbkreise -->
<line x1="20" y1="50" x2="180" y2="50"
      stroke="#3B82F6" stroke-width="12"
      stroke-linecap="round" />

<!-- Square Cap: Enden ragen über den Endpunkt hinaus -->
<line x1="20" y1="80" x2="180" y2="80"
      stroke="#22C55E" stroke-width="12"
      stroke-linecap="square" />

stroke-linecap="round" ist die Standardwahl für Icon-Strokes – es verleiht ein glatteres, freundlicheres Erscheinungsbild, das bei allen Größen gut funktioniert.

Stroke-Deckkraft

Wie fill-opacity steuert stroke-opacity die Stroke-Transparenz:

<circle cx="60" cy="60" r="40"
        fill="none"
        stroke="#EF4444"
        stroke-width="6"
        stroke-opacity="0.5" />

Lineare Gradienten in SVG

SVG definiert Gradienten in <defs>-Blöcken und referenziert sie per ID. Diese Trennung von Definition und Verwendung ermöglicht es, eine einzelne Gradientdefinition auf mehrere Formen anzuwenden.

Einen linearen Gradienten definieren

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#3B82F6" />
      <stop offset="100%" stop-color="#1E3A8A" />
    </linearGradient>
  </defs>

  <rect width="300" height="200" fill="url(#blueGradient)" />
</svg>

Die Attribute x1/y1/x2/y2 definieren die Gradientenrichtung als Vektor innerhalb des Begrenzungsrahmens der Form:

Mehrere Farbstopps

<defs>
  <linearGradient id="sunsetGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%"   stop-color="#FF6B6B" />
    <stop offset="50%"  stop-color="#FFC300" />
    <stop offset="100%" stop-color="#FF3C00" />
  </linearGradient>
</defs>

Dieser erzeugt einen Sonnenuntergangsgradienten von #FF6B6B über #FFC300 zu #FF3C00.

Gradienteneinheiten

Standardmäßig (gradientUnits="objectBoundingBox") sind die Gradientenkoordinaten Prozentsätze des Begrenzungsrahmens der Form. Mit gradientUnits="userSpaceOnUse" sind die Koordinaten im Pixelraum der SVG-Leinwand:

<defs>
  <!-- Absolute Koordinaten in SVG-Pixeln -->
  <linearGradient id="absGradient"
                  x1="0" y1="0" x2="300" y2="0"
                  gradientUnits="userSpaceOnUse">
    <stop offset="0%"   stop-color="#667EEA" />
    <stop offset="100%" stop-color="#764BA2" />
  </linearGradient>
</defs>

userSpaceOnUse ist nützlich, wenn mehrere Formen einen einzigen großen Gradienten teilen, der die gesamte SVG-Leinwand überspannt.

Gradientstopps animieren

SVG unterstützt native SMIL-Animation innerhalb von Gradientdefinitionen:

<linearGradient id="animGradient" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="#3B82F6">
    <animate attributeName="stop-color"
             values="#3B82F6; #8B5CF6; #EC4899; #3B82F6"
             dur="4s"
             repeatCount="indefinite" />
  </stop>
  <stop offset="100%" stop-color="#1E3A8A">
    <animate attributeName="stop-color"
             values="#1E3A8A; #5B21B6; #9D174D; #1E3A8A"
             dur="4s"
             repeatCount="indefinite" />
  </stop>
</linearGradient>

Dies animiert die Gradientenfarben durch einen Blau → Lila → Pink → Blau-Zyklus. CSS-Animationen können Gradientstoppfarben nicht direkt animieren (nur CSS-Custom-Properties über @property können es), daher ist SVG-SMIL-Animation die direkteste Methode für diesen Effekt.

Radiale Gradienten in SVG

Radiale Gradienten in SVG strahlen vom Mittelpunkt (dem Brennpunkt) nach außen zu einem äußeren Kreis aus. Sie unterstützen zwei unabhängige Mittelpunkte: den Gradientmittelpunkt (cx/cy) und den Brennpunkt (fx/fy).

Einfacher radialer Gradient

<defs>
  <radialGradient id="glowGradient" cx="50%" cy="50%" r="50%">
    <stop offset="0%"   stop-color="#FFF176" />
    <stop offset="100%" stop-color="#F57F17" />
  </radialGradient>
</defs>

<circle cx="150" cy="100" r="80" fill="url(#glowGradient)" />

Dies erzeugt einen sonnenartigen Schein: helles Gelb #FFF176 in der Mitte, das sich zu Bernstein #F57F17 am Rand vertieft.

Außermittiger Brennpunkt

Das separate Setzen von fx/fy von cx/cy erzeugt einen Perspektiveffekt – wie eine von einer Seite beleuchtete Kugel:

<defs>
  <radialGradient id="sphereGradient"
                  cx="50%" cy="50%" r="50%"
                  fx="35%" fy="35%">
    <stop offset="0%"   stop-color="#A8E6CF" stop-opacity="1" />
    <stop offset="60%"  stop-color="#2D6A4F" stop-opacity="1" />
    <stop offset="100%" stop-color="#1B4332" stop-opacity="1" />
  </radialGradient>
</defs>

<circle cx="150" cy="150" r="120" fill="url(#sphereGradient)" />

Der Highlight-Bereich bei 35%, 35% (oben links) verleiht dem Kreis ein dreidimensionales Kugelaussehen.

Transparenter Stopp für Leuchteffekte

Transparente Stopps erzeugen Leuchtüberlagerungen:

<defs>
  <radialGradient id="glowOverlay" cx="50%" cy="50%" r="50%">
    <stop offset="0%"   stop-color="#60A5FA" stop-opacity="0.8" />
    <stop offset="100%" stop-color="#60A5FA" stop-opacity="0" />
  </radialGradient>
</defs>

<!-- Dunkler Hintergrund -->
<rect width="300" height="200" fill="#0F172A" />
<!-- Leuchtüberlagerung -->
<rect width="300" height="200" fill="url(#glowOverlay)" />

Verwende den Gradientgenerator, um Farbkombinationen zu erkunden, bevor du dich auf SVG-Gradientcode festlegst. Setze deine Start- und Endfarben visuell und kopiere die Hex-Werte für deine stop-color-Attribute.

Das currentColor-Schlüsselwort

currentColor ist eine der mächtigsten SVG-Farbtechniken. Es lässt ein SVG-Element seine Farbe von der CSS-color-Eigenschaft seines übergeordneten HTML-Elements erben, was CSS erlaubt, SVG-Farben zu steuern, ohne das SVG-Markup zu berühren.

Wie currentColor funktioniert

<!-- HTML: CSS color-Eigenschaft kaskadiert in SVG -->
<button class="icon-button" style="color: #3B82F6;">
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5" />
  </svg>
  Exportieren
</button>

.icon-button {
  color: #3B82F6;      /* Icon füllt sich mit Blau */
}

.icon-button:hover {
  color: #1D4ED8;      /* Icon füllt sich mit Dunkelblau beim Hover */
}

.icon-button:disabled {
  color: #9CA3AF;      /* Icon füllt sich mit Grau bei Deaktivierung */
}

Keine zusätzlichen SVG-spezifischen Regeln nötig – eine einzelne color-Deklaration steuert alle Zustände.

currentColor in Strokes

Das Schlüsselwort funktioniert ebenso gut für Strokes:

<svg viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round">
  <circle cx="12" cy="12" r="10" />
  <polyline points="12 6 12 12 16 14" />
</svg>

Dieses Uhr-Icon erbt seine Stroke-Farbe vom CSS-color-Wert des Elternelements – eine einzige CSS-Eigenschaft ändert sowohl die Icon- als auch die benachbarte Textfarbe.

Gemischtes currentColor und feste Farben

Du kannst currentColor mit festen Farben in einem einzelnen SVG für mehrfarbige Icons kombinieren:

<svg viewBox="0 0 24 24">
  <!-- Körper: erbt von currentColor -->
  <path fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
  <!-- Abzeichen: feste Akzentfarbe -->
  <circle cx="18" cy="6" r="4" fill="#EF4444" />
</svg>

Dieses Muster ist für Benachrichtigungs-Badges gebräuchlich: Die Haupticonfarbe folgt der Textfarbe des Elternelements, aber das Abzeichen bleibt rot, unabhängig vom Kontext.

CSS-Styling von SVGs

Wenn SVG inline in HTML eingebettet ist (nicht in einem <img>-Tag), kann Standard-CSS es direkt stylen. Das erschließt CSS-Custom-Properties, Pseudo-Klassen, Übergänge und Animationen – weit flexibler als SVG-Attribute allein.

CSS überschreibt SVG-Präsentationsattribute

CSS hat eine höhere Spezifität als SVG-Präsentationsattribute (die fill="" und stroke=""-Attribute direkt im SVG-Markup). Das bedeutet, du kannst jedes Attribut mit CSS überschreiben:

/* Jedes Inline-Fill-Attribut überschreiben */
.icon-danger path {
  fill: #EF4444;
}

/* Stroke für eine bestimmte Variante überschreiben */
.icon-outline circle,
.icon-outline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

CSS-Custom-Properties in SVG

Custom-Properties kaskadieren in Inline-SVG-Elemente und ermöglichen dynamisches Theming:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"
          fill="var(--chart-primary, #3B82F6)"
          stroke="var(--chart-border, #1E3A8A)"
          stroke-width="2" />
</svg>

:root {
  --chart-primary: #3B82F6;
  --chart-border:  #1E3A8A;
}

[data-theme="dark"] {
  --chart-primary: #60A5FA;
  --chart-border:  #93C5FD;
}

Das SVG-Element übernimmt automatisch die Dunkelmodus-Farben, wenn sich das Theme ändert – ohne JavaScript.

CSS-Übergänge auf SVG

CSS-Übergänge funktionieren auf SVG-Farbeigenschaften:

.icon path {
  fill: #6B7280;
  transition: fill 200ms ease;
}

.icon:hover path {
  fill: #3B82F6;
}

Dies erzeugt einen sanften Farbübergang beim Hover über das Icon – mit SVG-Attributen allein nicht möglich.

Clipping und Masking für Farbeffekte

Für fortgeschrittene Effekte können CSS-Clip-Pfade und SVG-Masken Gradienten durch komplexe Formen enthüllen:

<!-- Gradiententext mit SVG -->
<svg viewBox="0 0 400 100">
  <defs>
    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#667EEA" />
      <stop offset="100%" stop-color="#764BA2" />
    </linearGradient>
  </defs>
  <text x="10" y="80" font-size="72" font-weight="bold"
        fill="url(#textGrad)">ColorFYI</text>
</svg>

Der Gradientgenerator kann helfen, die Gradient-Farbpaare zu gestalten. Verwende den Farbkonverter, um beliebige HSL- oder RGB-Farben in die Hex-Werte zu übersetzen, die für SVG-stop-color-Attribute benötigt werden.

Farbformat-Kompatibilität

SVG-Farbattribute akzeptieren dieselben Formate wie CSS, aber es gibt einige Kompatibilitätshinweise, die es wert sind, bekannt zu sein:

Für maximale Kompatibilität in SVG-Fills bleibe bei 6-stelligen Hex-Codes. Für Transparenz verwende fill-opacity statt 8-stelligem Hex oder rgba(), wenn du ältere SVG-Renderer unterstützen musst (wie SVGs in PDF-Export-Pipelines).

Wichtigste Erkenntnisse

• SVG verwendet fill- und stroke-Attribute, um Formen bzw. Pfade zu färben. Beide akzeptieren alle standardmäßigen CSS-Farbformate einschließlich Hex, RGB, HSL und benannter Farben.
• fill-opacity und stroke-opacity steuern Transparenz unabhängig von der Farbe, mit etwas besserer Kompatibilität in älteren SVG-Umgebungen als 8-stelliges Hex oder rgba().
• SVG-Gradienten werden in <defs>-Blöcken mit einer eindeutigen id definiert und dann mit fill="url(#id)" angewendet. Lineare Gradienten verwenden Vektorkoordinaten für die Richtung; radiale Gradienten unterstützen unabhängige Brennpunkte (fx/fy) für Perspektiveffekte.
• Das currentColor-Schlüsselwort ist die wichtigste SVG-Farbtechnik für Icon-Systeme – es erbt die CSS-color-Eigenschaft, sodass eine einzige CSS-Regel die Icon-Farbe in allen Zuständen (Hover, Deaktiviert, Aktiv) steuern kann.
• Inline-SVG kann mit Standard-CSS einschließlich Custom-Properties, Pseudo-Klassen-Selektoren und Übergängen gestylt werden – dynamisches Theming und interaktive Animationen werden dadurch einfach umsetzbar.
• Verwende den Gradientgenerator, um Gradientenfarbenpaare visuell zu gestalten, und den Farbkonverter, um Farben zwischen den für SVG-Attribute benötigten Formaten zu übersetzen.