Mesh Verläufe in SVG: Was heute wirklich funktioniert

Ein echter SVG Mesh Gradient funktioniert heute in keinem Browser. Das Element <meshgradient> tauchte in Entwürfen von SVG 2 auf: Farben sitzen auf den Ecken eines Rasters aus Feldern und gehen über jedes Feld ineinander über. Chrome, Safari und Firefox haben es aber nie ausgeliefert. Für den weichen, vielfarbigen Look, den man mit einem Mesh Verlauf meint, baust du ihn aus Dingen, die wirklich rendern: weichgezeichnete Formen, gestapelte radiale Verläufe, ein Rasterbild oder ein Shader.

Was aus meshgradient wurde

Das Mesh Element stand mehrere Jahre in den Arbeitsentwürfen von SVG 2. Es beschrieb eine Fläche als Reihen von Coons Patches, jedes mit vier Eckfarben und gebogenen Kanten, so wie Verlaufsgitter in Illustrationsprogrammen funktionieren. Die Browserhersteller haben es nicht umgesetzt, und die Funktion fiel aus der Version von SVG 2 heraus, die weiterverfolgt wurde. Fügst du Mesh Markup in eine Seite ein, ignoriert der Browser es und füllt die Form mit nichts oder mit einer Ersatzfarbe, falls du eine gesetzt hast.

Inkscape ist die bemerkenswerte Ausnahme auf der Seite der Erstellung. Sein Mesh Werkzeug erzeugt echtes Mesh Markup, und beim Speichern fürs Web kann es ein kleines JavaScript Polyfill mitliefern, das das Mesh beim Laden zeichnet. Das funktioniert, aber du lieferst Skript aus, um einen Hintergrund zu malen, und es rendert nicht dort, wo keine Skripte laufen, etwa in einem <img> Tag oder in vielen E-Mail Programmen.

Methode 1: weichgezeichnete Formen

Das kommt einem Mesh in reinem SVG am nächsten. Setz drei bis fünf gefüllte Kreise oder Ellipsen dorthin, wo jede Farbe sein soll, und zeichne die Gruppe dann stark weich. Die Unschärfe lässt benachbarte Farben genau so ineinanderfließen wie ein Mesh, und du kannst jeden Farbfleck einzeln verschieben.

<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <defs>
    <filter id="soften" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="120" />
    </filter>
  </defs>
  <rect width="1200" height="800" fill="#0f0b1e" />
  <g filter="url(#soften)">
    <circle cx="260" cy="200" r="260" fill="#7c3aed" />
    <circle cx="900" cy="160" r="240" fill="#f472b6" />
    <ellipse cx="760" cy="640" rx="360" ry="220" fill="#0ea5e9" />
    <circle cx="200" cy="700" r="200" fill="#312e81" />
  </g>
</svg>

Unschärfe ist nicht gratis. Ein großer feGaussianBlur wird bei jedem Neuzeichnen des SVG neu berechnet, also nutze das für statische Hintergründe und nicht für etwas, das scrollt oder animiert ist. Dieselbe Idee komplett in CSS findest du bei unscharfen Verläufen.

Methode 2: gestapelte radiale Verläufe

Jeder <radialGradient> kann von einer Farbe zu transparent auslaufen. Füll mehrere Rechtecke in voller Größe, eines pro Verlauf, und sie überlagern sich zu einem Mesh. Es ist kein Filter beteiligt, daher rendert das leichter als Unschärfe und bleibt bei jedem Zoom scharf.

<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <defs>
    <radialGradient id="a" cx="0.2" cy="0.25" r="0.6">
      <stop offset="0" stop-color="#7c3aed" />
      <stop offset="1" stop-color="#7c3aed" stop-opacity="0" />
    </radialGradient>
    <radialGradient id="b" cx="0.8" cy="0.2" r="0.55">
      <stop offset="0" stop-color="#f472b6" />
      <stop offset="1" stop-color="#f472b6" stop-opacity="0" />
    </radialGradient>
    <radialGradient id="c" cx="0.6" cy="0.85" r="0.65">
      <stop offset="0" stop-color="#0ea5e9" />
      <stop offset="1" stop-color="#0ea5e9" stop-opacity="0" />
    </radialGradient>
  </defs>
  <rect width="1200" height="800" fill="#0f0b1e" />
  <rect width="1200" height="800" fill="url(#a)" />
  <rect width="1200" height="800" fill="url(#b)" />
  <rect width="1200" height="800" fill="url(#c)" />
</svg>

Das lässt sich fast eins zu eins in CSS übertragen, und dort ist es oft besser aufgehoben. CSS Mesh Verläufe zeigt dieselbe Schichtung mit radial-gradient() und erklärt, wie du steuerst, wo sich Farben überlagern. Die SVG Version lohnt sich, wenn der Hintergrund als Datei reisen muss, etwa als Download oder als Asset in einem Designsystem. Mehr zu Verlaufselementen in SVG Verläufe.

Methode 3: als Rasterbild exportieren

Hast du ein echtes Verlaufsgitter in einem Illustrationsprogramm gestaltet und muss es sich nie ändern, exportiere es als Bild. Ein Mesh in 1920×1080 komprimiert sich als WebP gut und bleibt als PNG glatt; du kannst es mit einem SVG Element <image> einbetten oder als CSS Hintergrund nutzen. Du verlierst die Auflösungsunabhängigkeit, behältst aber jede Kurve des ursprünglichen Mesh.

Die richtige Methode wählen

1. 1

   Drei bis fünf Farben wählen

   Benachbarte Farbtöne gehen sauber ineinander über. Gegensätze treffen sich in einer schlammigen Mitte, wie schlammige Verläufe erklärt.

2. 2

   Farben platzieren, nicht Farbstopps

   Entscheide, wo jede Farbe auf der Fläche lebt. Das ist der ganze Unterschied zwischen einem Mesh und einem linearen Verlauf.

3. 3

   Eine ruhige Zone lassen

   Halte einen Bereich nah an der Grundfarbe, dort, wo eine Headline stehen wird.

4. 4

   Mit Körnung abschließen

   Ein wenig Rauschen lässt die Fläche bewusst wirken und versteckt Banding.

Wenn du einen Hintergrund im Mesh Stil willst, ohne ihn von Hand zu bauen: Ein Mark von Gradiently ist ein Rezept aus Farben, Licht, Material und Körnung, das live in jeder Größe rendert, seine ruhigste Zone hinter deinen Worten hält und mit Pro als PNG, SVG oder PDF exportiert. Für animierte Meshes auf einer Website sind Shader Verläufe der nächste Schritt.