SVG-Farbverläufe: linear, radial, Konturen, Text und Masken

Ein SVG-Farbverlauf ist eine Füllung, die du einmal definierst und auf jede Form, Linie oder jedes Textstück in einem SVG anwendest. Du schreibst ein Element <linearGradient> oder <radialGradient> in <defs>, gibst ihm <stop>-Kinder für seine Farben und eine id und setzt dann fill oder stroke einer Form auf url(#id). Anders als ein CSS-Hintergrund kann er eine Kontur oder ein einzelnes Wort färben, und er skaliert mit der Zeichnung.

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="dusk" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1e1b4b" />
      <stop offset="0.55" stop-color="#7c3aed" />
      <stop offset="1" stop-color="#f472b6" />
    </linearGradient>
  </defs>
  <rect width="200" height="120" rx="16" fill="url(#dusk)" />
</svg>

linearGradient und seine Stopps

x1, y1, x2 und y2 legen Anfang und Ende der Verlaufslinie fest. Jeder <stop> nimmt einen offset von 0 bis 1 (oder 0 % bis 100 %), eine stop-color und optional eine stop-opacity. stop-color ist auch eine CSS-Eigenschaft, also kannst du Verläufe aus einem Stylesheet heraus gestalten, zum Beispiel mit stop { stop-color: var(--accent); }.

href spart Wiederholung. Definiere deine Stopps einmal in einem Basisverlauf und leg dann Varianten an, die darauf verweisen und nur Richtung oder Einheiten ändern. Die MDN-Referenz zu linearGradient behandelt jedes Attribut.

radialGradient: Mittelpunkt, Radius und Brennpunkt

Ein radialer Verlauf nimmt einen Mittelpunkt (cx, cy) und einen Radius (r), alle standardmäßig 0,5, er füllt die Form also von der Mitte aus. Er hat außerdem etwas, das CSS fehlt: einen eigenen Brennpunkt (fx, fy), an dem die erste Farbe beginnt. Rückst du den Brennpunkt aus der Mitte, wirkt eine Kugel wie von einer Seite beleuchtet.

<radialGradient id="orb" cx="0.5" cy="0.5" r="0.5" fx="0.32" fy="0.28">
  <stop offset="0" stop-color="#e0f2fe" />
  <stop offset="0.45" stop-color="#0ea5e9" />
  <stop offset="1" stop-color="#082f49" />
</radialGradient>

<circle cx="60" cy="60" r="50" fill="url(#orb)" />

gradientUnits: objectBoundingBox oder userSpaceOnUse

Mit dem Standard objectBoundingBox bedeuten 0 und 1 die Ränder der jeweils gefüllten Form, also bekommt jede Form den ganzen Verlauf, passend gedehnt. Mit userSpaceOnUse stehen die Koordinaten in den eigenen Einheiten des SVG, der Verlauf bleibt also an seinem Platz, und Formen zeigen den Teil, den sie überdecken. So kann eine Reihe von Balken einen durchgehenden Verlauf teilen.

Farbverläufe auf Konturen und Text

stroke="url(#id)" malt Umrisse, so entstehen Verlaufs-Icons, Fortschrittsringe und Diagrammlinien. Auf <text> färbt fill="url(#id)" die Buchstaben, und die Worte bleiben auswählbar und durchsuchbar. Setz eine flache Farbe hinter die URL, etwa fill="url(#dusk) #7c3aed", dann wird sie genutzt, wenn der Verlauf nicht gefunden wird.

<svg viewBox="0 0 320 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="line" gradientUnits="userSpaceOnUse" x1="20" y1="0" x2="300" y2="0">
      <stop offset="0" stop-color="#22d3ee" />
      <stop offset="1" stop-color="#a855f7" />
    </linearGradient>
  </defs>
  <path d="M20 90 C 90 20, 160 110, 300 30" fill="none" stroke="url(#line)" stroke-width="6" stroke-linecap="round" />
  <text x="20" y="115" font-size="20" font-weight="700" fill="url(#line) #7c3aed">Growth</text>
</svg>

Für Verlaufsschrift in HTML statt SVG ist Farbverlaufstext in CSS meist einfacher. Greif zu SVG-Text, wenn die Worte Teil einer Illustration oder eines Logos sind oder einem Pfad folgen sollen.

spreadMethod: pad, reflect und repeat

Ist die Verlaufslinie kürzer als die Form, entscheidet spreadMethod, was den Rest füllt. pad hält die Endfarben, reflect spiegelt den Übergang hin und her, und repeat beginnt ihn mit harter Kante neu. Hier läuft jeder Verlauf von 30 % bis 70 % der Breite.

Ausblenden mit SVG-Masken

Eine Maske arbeitet mit Helligkeit: Weiße Bereiche zeigen, was maskiert ist, schwarze verbergen es, und Grautöne liegen dazwischen. Ein Verlauf von Weiß zu Schwarz in einer <mask> blendet also jede Form und jedes Bild weich ins Nichts aus. So machst du den Rand eines Fotos weicher oder lässt eine Diagrammlinie an ihrem Anfang ausblenden.

<defs>
  <linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0.4" stop-color="#fff" />
    <stop offset="1" stop-color="#000" />
  </linearGradient>
  <mask id="soft-bottom">
    <rect width="100%" height="100%" fill="url(#fade)" />
  </mask>
</defs>

<image href="photo.jpg" width="100%" height="100%" mask="url(#soft-bottom)" />

Für HTML-Elemente erledigt CSS mask-image: linear-gradient(#000 40%, transparent) dieselbe Aufgabe, mit Alpha statt Helligkeit. Die Maskentechnik steckt auch hinter transparenten CSS-Farbverlaufsrahmen.