Farben, Verläufe und Muster

Teil 1: Grundlagen · Kapitel 4 von 12 · Aktualisiert am 10. Oktober 2026 · 4 Minuten Lesezeit

Einfarbige Flächen sind schnell erklärt. Spannend wird es mit Verläufen und Mustern, denn die werden einmal definiert und dann per Verweis auf beliebig viele Formen angewendet.

Farben angeben

Für fill und stroke verstehen Browser dieselben Farbangaben wie in CSS: Farbnamen wie teal, Hex-Werte wie #1f5fd1 oder die Kurzform #25d, Funktionen wie rgb(31 95 209) und hsl(220 74% 47%). Transparenz regelst du entweder über eine Alphaangabe in der Farbe oder getrennt über fill-opacity und stroke-opacity.

Ein nützlicher Sonderwert ist currentColor. Er übernimmt die Textfarbe des umgebenden Elements. Steht ein Icon inline in einem Link und hat fill="currentColor", färbt es sich automatisch mit, wenn der Link beim Überfahren mit der Maus die Farbe wechselt.

Der lineare Verlauf

Verläufe stehen in einem <defs>-Block. Was darin liegt, wird nicht gezeichnet, sondern nur bereitgehalten. Jeder Verlauf bekommt eine id, über die eine Form ihn mit fill="url(#name)" anspricht.

Innerhalb des Verlaufs legen <stop>-Elemente die Farben fest. offset gibt an, wo die Farbe sitzt, von 0 (Anfang) bis 1 oder von 0 % bis 100 %. Ohne weitere Angaben verläuft ein linearer Verlauf von links nach rechts. Mit x1, y1, x2 und y2 änderst du die Richtung.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 120" width="330" height="120">
  <defs>
    <linearGradient id="vl-quer">
      <stop offset="0" stop-color="#163f8c"/>
      <stop offset="0.6" stop-color="#3b7be8"/>
      <stop offset="1" stop-color="#ffe3d3"/>
    </linearGradient>
    <linearGradient id="vl-schraeg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#163f8c"/>
      <stop offset="0.6" stop-color="#3b7be8"/>
      <stop offset="1" stop-color="#ffe3d3"/>
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="145" height="100" rx="6" fill="url(#vl-quer)"/>
  <rect x="175" y="10" width="145" height="100" rx="6" fill="url(#vl-schraeg)"/>
</svg>

Der radiale Verlauf

Ein radialer Verlauf breitet sich kreisförmig aus. Ohne Angaben beginnt er im Mittelpunkt der Form. cx, cy und r beschreiben den äußeren Kreis, fx und fy verschieben den Brennpunkt, von dem aus der Verlauf startet. Liegt der Brennpunkt oben links, wirkt ein Kreis wie eine beleuchtete Kugel.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 140" width="220" height="154">
  <defs>
    <radialGradient id="vr-kugel" cx="0.5" cy="0.5" r="0.5" fx="0.32" fy="0.3">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="0.35" stop-color="#7fa6ef"/>
      <stop offset="1" stop-color="#163f8c"/>
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="126" rx="48" ry="7" fill="#d6dce5"/>
  <circle cx="100" cy="66" r="56" fill="url(#vr-kugel)"/>
</svg>

Bezugssystem: gradientUnits

Die Werte 0 bis 1 in den Beispielen beziehen sich auf den Begrenzungsrahmen der jeweiligen Form. Das ist die Voreinstellung gradientUnits="objectBoundingBox": Derselbe Verlauf passt sich an jede Form an, egal wie groß sie ist. Mit gradientUnits="userSpaceOnUse" gelten dagegen die Koordinaten der Zeichenfläche. Dann läuft ein Verlauf über mehrere Formen hinweg durch, als läge er hinter ihnen und schiene nur durch.

Mit spreadMethod legst du fest, was jenseits des Verlaufs passiert: Die Endfarbe bleibt stehen (pad, Standard), der Verlauf wird gespiegelt (reflect) oder wiederholt (repeat).

Muster mit pattern

Ein <pattern> ist eine kleine Kachel, die über eine Fläche wiederholt wird. Du gibst Breite und Höhe der Kachel an und zeichnest ihren Inhalt mit normalen SVG-Elementen. Mit patternUnits="userSpaceOnUse" sind die Maße feste Einheiten der Zeichenfläche, sonst Anteile der Form.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 120" width="330" height="120">
  <defs>
    <pattern id="mu-punkte" width="16" height="16" patternUnits="userSpaceOnUse">
      <circle cx="8" cy="8" r="3" fill="#1f5fd1"/>
    </pattern>
    <pattern id="mu-schraffur" width="16" height="16" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect width="16" height="16" fill="#ffe3d3"/>
      <rect width="5" height="16" fill="#c2410c"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="145" height="100" fill="url(#mu-punkte)" stroke="#1f5fd1" stroke-width="2"/>
  <circle cx="245" cy="60" r="50" fill="url(#mu-schraffur)" stroke="#c2410c" stroke-width="2"/>
</svg>

Verläufe und Muster lassen sich nicht nur als Füllung verwenden, sondern auch als Umriss mit stroke="url(#…)". Und sie spielen eine Rolle bei Masken: Ein Verlauf von Weiß nach Schwarz als Maske blendet eine Grafik weich aus. Wie das geht, steht im Kapitel Beschneiden und Maskieren. Wer ein Muster in mehreren Grafiken braucht, findet im Kapitel use und symbol Wege, es nur einmal zu definieren.