# Meshverlopen in SVG: wat vandaag werkt

[Canonical HTML page](https://gradiently.design/nl/guide/mesh-gradient-svg)

Je kunt een meshgradient-element schrijven en Inkscape maakt er zelfs een voor je, maar browsers tekenen niets. Dit zijn de technieken die dezelfde zachte, veelkleurige look geven en echt renderen.

## The short version

- Het meshgradient-element is voorgesteld in concepten van SVG 2, maar geen grote browser implementeerde het, en het maakt geen deel uit van de gepubliceerde standaard die browsers volgen.
- Inkscape kan meshverlopen maken, en de exports leunen op een JavaScript-polyfill om in browsers te renderen.
- De betrouwbaarste manier om een meshlook in SVG te krijgen zijn een paar gekleurde vormen verzacht met feGaussianBlur, of meerdere radiale verlopen gestapeld met transparante randen.
- Een rasterafbeelding geëxporteerd uit een ontwerptool is de simpelste optie als het verloop nooit hoeft te veranderen, en WebP of PNG houdt het klein.
- Welke methode je ook kiest, voeg een lichte korrel over het resultaat toe om banding in de zachte overgangen te verbergen.

Een echt **SVG-meshverloop** werkt vandaag niet in browsers. Het `<meshgradient>`-element verscheen in concepten van SVG 2, waarin kleuren op de hoeken van een raster van vlakken zitten en over elk vlak vloeien, maar Chrome, Safari en Firefox leverden het nooit uit. Voor de zachte, veelkleurige look die mensen met een [meshverloop](https://gradiently.design/nl/guide/mesh-gradients) bedoelen, bouw je het uit dingen die wel renderen: vervaagde vormen, gestapelde radiale verlopen, een rasterafbeelding of een shader.

## Wat er met meshgradient gebeurde

Het mesh-element was jarenlang onderdeel van de werkconcepten van SVG 2. Het beschreef een oppervlak als rijen Coons-vlakken, elk vlak met vier hoekkleuren en gebogen randen, zoals verloopmeshes in illustratiesoftware werken. Browsermakers implementeerden het niet, en de functie viel weg uit de versie van SVG 2 die verder ging. Plak je meshmarkup in een pagina, dan negeert de browser het en vult hij de vorm met niets, of met een terugvalkleur als je er een instelt.

### Rendert niet in browsers

- `<meshgradient>` met `<meshrow>` en `<meshpatch>`
- Verloopmeshes uit Illustrator opgeslagen als live SVG
- Inkscape-mesh geëxporteerd zonder polyfill
- `<hatch>`-patronen, uit hetzelfde concept

### Rendert overal

- Vormen vervaagd met `feGaussianBlur`
- Meerdere `<radialGradient>`-vullingen, gestapeld
- Een ingesloten PNG- of WebP-afbeelding
- CSS-radiale stapels of een WebGL-canvas

Inkscape is de opvallende uitzondering aan de maakkant. Zijn meshtool produceert echte meshmarkup, en bij opslaan voor het web kan hij een kleine JavaScript-polyfill meegeven die de mesh bij het laden tekent. Dat werkt, maar je levert script mee om een achtergrond te schilderen, en het rendert niet op plekken die geen scripts draaien, zoals een `<img>`-tag of veel e-mailclients.

## Methode 1: vervaagde vormen

Dit is het dichtst bij een mesh in pure SVG. Plaats drie tot vijf gevulde cirkels of ellipsen waar je elke kleur wilt en vervaag de groep sterk. De vervaging laat naburige kleuren in elkaar overvloeien precies zoals een mesh dat doet, en je kunt elke vlek los verplaatsen.

```html
<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>
```

Vergroot het filtergebied zodat de vervaging niet bij de vormranden wordt afgesneden. Een stdDeviation van ongeveer een tiende van de canvasbreedte geeft een meshgevoel.

- Violet, roze en hemel op inkt: `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)`
- Gloed, roos en boter op crème: `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, turkoois en 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)`

Voorbeelden van drie vervaagde vlekkenopmaken. De eerste is de SVG hierboven; de kleuren zitten waar de vlekken zitten.

Vervaging is niet gratis. Een grote `feGaussianBlur` wordt opnieuw berekend telkens als de SVG wordt hertekend, dus gebruik dit voor statische achtergronden en niet voor iets dat scrolt of beweegt. Voor hetzelfde idee volledig in CSS zie je [vervaagde verlopen](https://gradiently.design/nl/guide/blurry-gradient).

## Methode 2: gestapelde radiale verlopen

Elke `<radialGradient>` kan van een kleur naar transparant vervagen. Vul meerdere rechthoeken op volle grootte, één per verloop, en ze overlappen tot een mesh. Er is geen filter bij betrokken, dus het rendert lichter dan vervaging en blijft scherp bij elke zoom.

```html
<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>
```

Vervaag naar dezelfde kleur met nul dekking in plaats van naar `transparent`, wat de randen in elke SVG-renderer schoon houdt, ook in oudere.

Dit vertaalt bijna één op één naar CSS, vaak de betere plek ervoor. [CSS-meshverlopen](https://gradiently.design/nl/guide/css-mesh-gradient) toont dezelfde gelaagdheid met `radial-gradient()` en legt uit hoe je stuurt waar kleuren overlappen. De SVG-versie verdient haar plek als de achtergrond als bestand moet reizen, zoals een download of een asset in een designsysteem. Meer over verloopelementen staat in [SVG-verlopen](https://gradiently.design/nl/guide/svg-gradients).

Gestapelde radialen, CSS-versie: `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)`

De SVG hierboven als één CSS-achtergrond geschreven. Kopieer hem als het verloop alleen op een webpagina leeft.

## Methode 3: een raster exporteren

Heb je een echt verloopmesh in een illustratietool ontworpen en hoeft het nooit te veranderen, exporteer het dan als afbeelding. Een mesh van 1920×1080 comprimeert goed als WebP en blijft vloeiend als PNG; je kunt hem insluiten met een SVG-`<image>`-element of als CSS-achtergrond gebruiken. Je verliest resolutieonafhankelijkheid, maar behoudt elke curve van de originele mesh.

> **Voeg korrel toe vóór je exporteert** Vloeiende meshovergangen krijgen gemakkelijk banding na compressie. Een lichte ruislaag, zoals die in [SVG feTurbulence](https://gradiently.design/nl/guide/svg-noise-filter), verbergt de stappen en houdt bestandsgroottes redelijk.

## De juiste methode kiezen

| Methode | Bestand | Schaalt | Het best voor |
| --- | --- | --- | --- |
| Vervaagde vormen | Kleine SVG | Ja | Organische, bewegende vlekken, statische achtergronden |
| Gestapelde radialen | Kleine SVG of CSS | Ja | Snelle, scherpe webachtergronden |
| Rasterexport | Middelgrote afbeelding | Nee | Exacte meshes uit illustratietools |
| Inkscape plus polyfill | SVG en script | Ja | Inkscape-gebruikers die echte vlakken nodig hebben |
| WebGL-shader | Script | Ja | Geanimeerde, belichte, interactieve oppervlakken |

Alle vijf geven een meshlook. Alleen de polyfill rendert echte meshvlakken, en alleen de shader beweegt goedkoop.

1. **Kies drie tot vijf kleuren** Naburige tinten vloeien schoon in elkaar. Tegenpolen ontmoeten elkaar in een modderig midden, zoals [modderige verlopen](https://gradiently.design/nl/guide/muddy-gradients) uitlegt.
2. **Plaats kleuren, geen stops** Bepaal waar elke kleur op het canvas leeft. Dat is het hele verschil tussen een mesh en een lineair verloop.
3. **Laat een rustig gebied** Houd één gebied dicht bij de ondergrondkleur waar een kop komt te staan.
4. **Rond af met korrel** Een beetje ruis laat het oppervlak weloverwogen aanvoelen en verbergt banding.

Wil je een achtergrond in meshstijl zonder hem met de hand te bouwen, dan is een Gradiently-Mark een recept van kleuren, licht, materiaal en korrel dat live rendert op elk formaat, zijn rustigste gebied achter je woorden houdt en met Pro exporteert als PNG, SVG of pdf. Voor geanimeerde meshes op een website zijn [shaderverlopen](https://gradiently.design/nl/guide/shader-gradients) de volgende stap.

## FAQ

### Ondersteunen browsers SVG-meshverlopen?

Nee. Het meshgradient-element is opgesteld voor SVG 2, maar geen grote browser implementeerde het, dus het rendert niets zonder een JavaScript-polyfill.

### Hoe maak ik een meshverloop in SVG dat werkt?

Vervaag een paar gekleurde cirkels met feGaussianBlur, of stapel meerdere radialGradient-vullingen die naar transparant vervagen. Beide renderen in elke browser.

### Kan ik Inkscape-meshverlopen op een website gebruiken?

Ja, als je de JavaScript-polyfill meelevert die Inkscape bij het opslaan kan toevoegen. Zonder die negeren browsers de mesh en werkt hij niet binnen een img-tag.

### Is een CSS-meshverloop beter dan SVG?

Voor een achtergrond die alleen op een webpagina leeft, zijn CSS-radiale stapels eenvoudiger. SVG is beter als het verloop als los bestand moet bestaan.

### Waarom heeft mijn vervaagde SVG-verloop harde randen?

Het filtergebied snijdt de vervaging af. Vergroot het met x="-50%" y="-50%" width="200%" height="200%" op het filterelement.