Meshgradienter i SVG: vad som fungerar i dag

En äkta SVG-meshgradient fungerar inte i webbläsare i dag. Elementet <meshgradient> dök upp i utkasten till SVG 2, där färger sitter i hörnen på ett rutnät av fält och blandas över vart och ett, men Chrome, Safari och Firefox lanserade det aldrig. För att få den mjuka, mångfärgade look som folk menar med en meshgradient bygger du den av sådant som ritas: suddade former, staplade radialgradienter, en rasterbild eller en shader.

Vad hände med meshgradient

Mesh-elementet ingick i arbetsutkasten till SVG 2 under flera år. Det beskrev en yta som rader av Coons-fält, där varje fält hade fyra hörnfärger och böjda kanter, vilket är hur gradientmesher fungerar i illustrationsprogram. Webbläsartillverkarna implementerade det inte, och funktionen lämnades utanför den version av SVG 2 som gick vidare. Om du klistrar in meshkod på en sida ignorerar webbläsaren den och fyller formen med ingenting, eller med en reservfärg om du har angett en.

Inkscape är det anmärkningsvärda undantaget på skaparsidan. Dess mesh-verktyg skapar riktig meshkod, och när du sparar för webben kan det ta med en liten JavaScript-polyfill som ritar meshen vid laddning. Det fungerar, men du levererar skript för att måla en bakgrund, och det ritas inte på ställen som inte kör skript, som en <img>-tagg eller många e-postklienter.

Metod 1: suddade former

Det här är det närmaste en mesh i ren SVG. Placera tre till fem fyllda cirklar eller ellipser där du vill ha varje färg och sudda sedan gruppen kraftigt. Suddet blandar angränsande färger i varandra precis som en mesh gör, och du kan flytta varje klump för sig.

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

Sudd är inte gratis. Ett stort feGaussianBlur räknas om varje gång SVG:n ritas om, så använd det för stilla bakgrunder snarare än något som scrollar eller animeras. För samma idé gjord helt i CSS, se suddiga gradienter.

Metod 2: staplade radialgradienter

Varje <radialGradient> kan tona från en färg till genomskinligt. Fyll flera rektanglar i full storlek, en per gradient, så överlappar de till en mesh. Inget filter ingår, så det är lättare att rita än sudd och förblir skarpt vid varje zoomnivå.

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

Det här översätts nästan ett till ett till CSS, som ofta är ett bättre hem för det. CSS-meshgradienter visar samma lagring med radial-gradient() och förklarar hur du styr var färger överlappar. SVG-versionen förtjänar sin plats när bakgrunden måste färdas som en fil, till exempel en nedladdning eller en tillgång i ett designsystem. Mer om gradientelement finns i SVG-gradienter.

Metod 3: exportera ett raster

Om du har designat en äkta gradientmesh i ett illustrationsverktyg och den aldrig behöver ändras, exportera den som en bild. En mesh i 1920×1080 komprimeras bra som WebP och förblir len som PNG, och du kan bädda in den med ett SVG-element av typen <image> eller använda den som CSS-bakgrund. Du förlorar upplösningsoberoendet, men du behåller varje kurva i den ursprungliga meshen.

Så väljer du rätt metod

1. 1

   Välj tre till fem färger

   Angränsande nyanser blandas rent. Motsatser möts i en grumlig mitt, som grumliga gradienter förklarar.

2. 2

   Placera färger, inte stopp

   Bestäm var varje färg ska finnas på ytan. Det är hela skillnaden mellan en mesh och en linjär gradient.

3. 3

   Lämna en lugn yta

   Håll ett område nära bottenfärgen där en rubrik ska sitta.

4. 4

   Avsluta med korn

   Lite brus får ytan att kännas avsiktlig och döljer banding.

När du vill ha en bakgrund i meshstil utan att bygga en för hand är en Gradiently-Mark ett recept av färger, ljus, material och korn som ritas live i valfri storlek, behåller sin lugnaste yta bakom dina ord och exporteras med Pro som PNG, SVG eller PDF. För animerade mesher på en webbplats är shadergradienter nästa steg.