# Mesh Verläufe in SVG: Was heute wirklich funktioniert [Canonical HTML page](https://gradiently.design/de/guide/mesh-gradient-svg) Du kannst ein meshgradient Element schreiben, und Inkscape erstellt dir sogar eines, aber Browser zeichnen nichts. Diese Techniken liefern denselben weichen, vielfarbigen Look und werden tatsächlich gerendert. ## The short version - Das Element meshgradient wurde in Entwürfen von SVG 2 vorgeschlagen, aber kein großer Browser hat es umgesetzt, und es gehört nicht zum veröffentlichten Standard, dem Browser folgen. - Inkscape kann Mesh Verläufe erstellen, und seine Exporte brauchen ein JavaScript Polyfill, um im Browser zu rendern. - Der zuverlässigste Weg zu einem Mesh Look in SVG sind ein paar farbige Formen, weichgezeichnet mit feGaussianBlur, oder mehrere radiale Verläufe mit transparenten Rändern übereinander. - Ein aus einem Designtool exportiertes Rasterbild ist die einfachste Option, wenn sich der Verlauf nie ändern muss, und WebP oder PNG halten es klein. - Egal welche Methode du wählst, leg leichte Körnung über das Ergebnis, um Banding in den weichen Übergängen zu verbergen. Ein echter **SVG Mesh Gradient** funktioniert heute in keinem Browser. Das Element `` 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](https://gradiently.design/de/guide/mesh-gradients) 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. ### Rendert nicht im Browser - `` mit `` und `` - Verlaufsgitter aus Illustrator als Live SVG gespeichert - Inkscape Mesh ohne sein Polyfill exportiert - `` Muster aus demselben Entwurf ### Rendert überall - Formen, weichgezeichnet mit `feGaussianBlur` - Mehrere `` Füllungen, gestapelt - Ein eingebettetes PNG oder WebP Bild - CSS Radial Stapel oder ein WebGL Canvas 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 `` 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. ```html ``` Vergrößere den Filterbereich, damit die Unschärfe an den Formkanten nicht abgeschnitten wird. Ein stdDeviation von etwa einem Zehntel der Canvasbreite ergibt ein Mesh Gefühl. - Violett, Pink und Himmelblau auf Tinte: `radial-gradient(circle at 22% 25%, #7c3aed 0%, transparent 45%), radial-gradient(circle at 75% 20%, #f472b6 0%, transparent 40%), radial-gradient(ellipse at 63% 80%, #0ea5e9 0%, transparent 50%), linear-gradient(#0f0b1e, #0f0b1e)` - Glut, Rosé und Butter auf Creme: `radial-gradient(circle at 20% 30%, #fb923c 0%, transparent 45%), radial-gradient(circle at 80% 25%, #f43f5e 0%, transparent 40%), radial-gradient(ellipse at 50% 85%, #fde68a 0%, transparent 55%), linear-gradient(#fff7ed, #fff7ed)` - Smaragd, Petrol und Indigo: `radial-gradient(circle at 25% 75%, #10b981 0%, transparent 45%), radial-gradient(circle at 70% 30%, #0891b2 0%, transparent 45%), radial-gradient(circle at 85% 85%, #6366f1 0%, transparent 40%), linear-gradient(#071a1a, #071a1a)` Vorschauen von drei Anordnungen weicher Farbflecken. Die erste ist das SVG oben; die Farben sitzen dort, wo die Flecken sitzen. 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](https://gradiently.design/de/guide/blurry-gradient). ## Methode 2: gestapelte radiale Verläufe Jeder `` 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. ```html ``` Lass zur selben Farbe mit Deckkraft null auslaufen statt zu `transparent`; so bleiben die Ränder in jedem SVG Renderer sauber, auch in älteren. Das lässt sich fast eins zu eins in CSS übertragen, und dort ist es oft besser aufgehoben. [CSS Mesh Verläufe](https://gradiently.design/de/guide/css-mesh-gradient) 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](https://gradiently.design/de/guide/svg-gradients). Gestapelte Radiale, CSS Version: `radial-gradient(circle at 20% 25%, #7c3aed 0%, transparent 48%), radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 44%), radial-gradient(circle at 60% 85%, #0ea5e9 0%, transparent 52%), linear-gradient(#0f0b1e, #0f0b1e)` Das SVG oben als ein einziger CSS Hintergrund geschrieben. Kopier es, wenn der Verlauf nur auf einer Webseite lebt. ## 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 `` einbetten oder als CSS Hintergrund nutzen. Du verlierst die Auflösungsunabhängigkeit, behältst aber jede Kurve des ursprünglichen Mesh. > **Füg vor dem Export Körnung hinzu** Weiche Mesh Übergänge bekommen nach der Kompression leicht Banding. Eine leichte Rauschebene, wie die in [SVG feTurbulence](https://gradiently.design/de/guide/svg-noise-filter), versteckt die Stufen und hält die Dateigröße im Rahmen. ## Die richtige Methode wählen | Methode | Datei | Skaliert | Am besten für | | --- | --- | --- | --- | | Weichgezeichnete Formen | Winziges SVG | Ja | Organische Farbflecken, statische Hintergründe | | Gestapelte Radiale | Winziges SVG oder CSS | Ja | Schnelle, scharfe Webhintergründe | | Rasterexport | Mittelgroßes Bild | Nein | Exakte Meshes aus Illustrationsprogrammen | | Inkscape plus Polyfill | SVG und Skript | Ja | Inkscape Nutzer, die echte Patches brauchen | | WebGL Shader | Skript | Ja | Animierte, beleuchtete, interaktive Flächen | Alle fünf ergeben einen Mesh Look. Nur das Polyfill rendert echte Mesh Patches, und nur der Shader bewegt sich ohne großen Aufwand. 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](https://gradiently.design/de/guide/muddy-gradients) erklärt. 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. **Eine ruhige Zone lassen** Halte einen Bereich nah an der Grundfarbe, dort, wo eine Headline stehen wird. 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](https://gradiently.design/de/guide/shader-gradients) der nächste Schritt. ## FAQ ### Unterstützen Browser SVG Mesh Verläufe? Nein. Das Element meshgradient stand im Entwurf von SVG 2, aber kein großer Browser hat es umgesetzt, also rendert es ohne JavaScript Polyfill nichts. ### Wie mache ich einen Mesh Verlauf in SVG, der funktioniert? Zeichne ein paar farbige Kreise mit feGaussianBlur weich oder stapel mehrere radialGradient Füllungen, die zu transparent auslaufen. Beides rendert in jedem Browser. ### Kann ich Mesh Verläufe aus Inkscape auf einer Website nutzen? Ja, wenn du das JavaScript Polyfill einbindest, das Inkscape beim Speichern hinzufügen kann. Ohne es ignorieren Browser das Mesh, und in einem img Tag funktioniert es nicht. ### Ist ein CSS Mesh Verlauf besser als SVG? Für einen Hintergrund, der nur auf einer Webseite lebt, sind gestapelte CSS Radiale einfacher. SVG ist besser, wenn der Verlauf als eigenständige Datei existieren muss. ### Warum hat mein weichgezeichneter SVG Verlauf harte Kanten? Der Filterbereich schneidet die Unschärfe ab. Vergrößere ihn mit x="-50%" y="-50%" width="200%" height="200%" am filter Element.