Meshverlopen in SVG: wat vandaag werkt

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 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.

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.

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

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.

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.

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

Dit vertaalt bijna één op één naar CSS, vaak de betere plek ervoor. CSS-meshverlopen 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.

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.

De juiste methode kiezen

1. 1

   Kies drie tot vijf kleuren

   Naburige tinten vloeien schoon in elkaar. Tegenpolen ontmoeten elkaar in een modderig midden, zoals modderige verlopen uitlegt.

2. 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. 3

   Laat een rustig gebied

   Houd één gebied dicht bij de ondergrondkleur waar een kop komt te staan.

4. 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 de volgende stap.