# Meshgradienter i SVG: vad som fungerar i dag

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

Du kan skriva ett meshgradient-element, och Inkscape gör till och med ett åt dig, men webbläsare ritar ingenting. Här är teknikerna som ger samma mjuka, mångfärgade look och faktiskt ritas.

## The short version

- Elementet meshgradient föreslogs i utkasten till SVG 2, men ingen stor webbläsare implementerade det, och det ingår inte i den publicerade standard som webbläsare följer.
- Inkscape kan skapa meshgradienter, och dess exporter förlitar sig på en JavaScript-polyfill för att ritas i webbläsare.
- Det mest pålitliga sättet att få en meshlook i SVG är några färgade former som mjukas upp med feGaussianBlur, eller flera radialgradienter som staplas med genomskinliga kanter.
- En rasterbild som exporterats från ett designverktyg är det enklaste alternativet när gradienten aldrig behöver ändras, och WebP eller PNG håller den liten.
- Vilken metod du än väljer, lägg ett lätt korn över resultatet för att dölja banding i de mjuka övergångarna.

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](https://gradiently.design/sv/guide/mesh-gradients) 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.

### Ritas inte i webbläsare

- `<meshgradient>` med `<meshrow>` och `<meshpatch>`
- Gradientmesher från Illustrator sparade som levande SVG
- Inkscape-mesh exporterad utan sin polyfill
- `<hatch>`-mönster, från samma utkast

### Ritas överallt

- Former suddade med `feGaussianBlur`
- Flera `<radialGradient>`-fyllningar, staplade
- En inbäddad PNG- eller WebP-bild
- Staplade CSS-radialer eller en WebGL-canvas

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.

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

Förstora filterområdet så att suddet inte beskärs vid formernas kanter. En stdDeviation på ungefär en tiondel av dukbredden ger en meshkänsla.

- Violett, rosa och himmelsblått på bläck: `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)`
- Glöd, rosa och smör på kräm: `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, blågrönt och 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)`

Förhandsvisningar av tre layouter med suddade klumpar. Den första är SVG:n ovan, och färgerna sitter där klumparna sitter.

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](https://gradiently.design/sv/guide/blurry-gradient).

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

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

Tona till samma färg med noll opacitet i stället för till `transparent`, vilket håller kanterna rena i varje SVG-renderare, även äldre.

Det här översätts nästan ett till ett till CSS, som ofta är ett bättre hem för det. [CSS-meshgradienter](https://gradiently.design/sv/guide/css-mesh-gradient) 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](https://gradiently.design/sv/guide/svg-gradients).

Staplade radialer, 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)`

SVG:n ovan skriven som en enda CSS-bakgrund. Kopiera den om gradienten bara finns på en webbsida.

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

> **Lägg på korn innan du exporterar** Mjuka meshövergångar får lätt banding när de komprimeras. Ett lätt brusskikt, som det i [SVG feTurbulence](https://gradiently.design/sv/guide/svg-noise-filter), döljer stegen och håller filstorlekarna rimliga.

## Så väljer du rätt metod

| Metod | Fil | Skalar | Bäst för |
| --- | --- | --- | --- |
| Suddade former | Liten SVG | Ja | Organiska, rörliga klumpar, stilla bakgrunder |
| Staplade radialer | Liten SVG eller CSS | Ja | Snabba, skarpa webbbakgrunder |
| Rasterexport | Mellanstor bild | Nej | Exakta mesher från illustrationsverktyg |
| Inkscape plus polyfill | SVG och skript | Ja | Inkscape-användare som behöver äkta fält |
| WebGL-shader | Skript | Ja | Animerade, belysta, interaktiva ytor |

Alla fem ger en meshlook. Bara polyfillen ritar riktiga meshfält, och bara shadern rör sig billigt.

1. **Välj tre till fem färger** Angränsande nyanser blandas rent. Motsatser möts i en grumlig mitt, som [grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar.
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. **Lämna en lugn yta** Håll ett område nära bottenfärgen där en rubrik ska sitta.
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](https://gradiently.design/sv/guide/shader-gradients) nästa steg.

## FAQ

### Stöder webbläsare SVG-meshgradienter?

Nej. Elementet meshgradient föreslogs för SVG 2 men ingen stor webbläsare implementerade det, så det ritar ingenting utan en JavaScript-polyfill.

### Hur gör jag en meshgradient i SVG som fungerar?

Sudda några färgade cirklar med feGaussianBlur, eller stapla flera radialGradient-fyllningar som tonar till genomskinligt. Båda ritas i varje webbläsare.

### Kan jag använda Inkscape-meshgradienter på en webbplats?

Ja, om du tar med JavaScript-polyfillen som Inkscape kan lägga till vid sparande. Utan den ignorerar webbläsare meshen, och den fungerar inte i en img-tagg.

### Är en CSS-meshgradient bättre än SVG?

För en bakgrund som bara finns på en webbsida är staplade CSS-radialer enklare. SVG är bättre när gradienten måste finnas som en fristående fil.

### Varför har min suddade SVG-gradient hårda kanter?

Filterområdet beskär suddet. Förstora det med x="-50%" y="-50%" width="200%" height="200%" på filter-elementet.