# Mesh-gradienter i SVG: hva som fungerer i dag

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

Du kan skrive et meshgradient-element, og Inkscape kan til og med lage et for deg, men nettleseren tegner ingenting. Disse teknikkene gir det samme myke, flerfargede uttrykket og blir faktisk vist.

## The short version

- Elementet meshgradient ble foreslått i SVG 2-utkast, men ingen av de store nettleserne implementerte det, og det er ikke del av den publiserte standarden nettleserne følger.
- Inkscape kan lage mesh-gradienter, og eksportene bruker en JavaScript-polyfill for å vises i nettlesere.
- Den mest pålitelige måten å få mesh-uttrykk i SVG er noen fargede former myknet med feGaussianBlur eller flere radiale gradienter i lag med gjennomsiktige kanter.
- Et rasterbilde eksportert fra et designverktøy er det enkleste valget når gradienten aldri trenger å endres, og WebP eller PNG holder filen liten.
- Uansett metode bør du legge litt korn over resultatet for å skjule bånding i de myke overgangene.

En ekte **SVG mesh-gradient** fungerer ikke i nettlesere i dag. Elementet `<meshgradient>` dukket opp i SVG 2-utkast, der fargene ligger i hjørnene av et rutenett med flater og blandes over hver flate. Chrome, Safari og Firefox har aldri lansert støtte for det. For å få det myke, flerfargede uttrykket folk mener med en [mesh-gradient](https://gradiently.design/nb/guide/mesh-gradients), bygger du med ting som faktisk gjengis: uskarpe former, radiale gradienter i lag, et rasterbilde eller en shader.

## Hva skjedde med meshgradient

Mesh-elementet var med i arbeidsutkastene til SVG 2 i flere år. Det beskrev en overflate som rader av Coons-flater, hver med fire hjørnefarger og buede kanter. Slik fungerer gradientnett i illustrasjonsprogrammer. Nettleserutviklerne implementerte det ikke, og funksjonen ble utelatt fra SVG 2-versjonen som gikk videre. Limer du mesh-markup inn på en side, ignorerer nettleseren den og lar formen stå uten fyll, eller med en reservefarge hvis du har angitt en.

### Gjengis ikke i nettlesere

- `<meshgradient>` med `<meshrow>` og `<meshpatch>`
- Gradientnett fra Illustrator lagret som redigerbar SVG
- Mesh eksportert fra Inkscape uten polyfill
- `<hatch>`-mønstre fra samme utkast

### Gjengis overalt

- Former uskarpet med `feGaussianBlur`
- Flere `<radialGradient>`-fyll i lag
- Et innebygd PNG- eller WebP-bilde
- Radiale CSS-lag eller et WebGL-lerret

Inkscape er det viktige unntaket på produksjonssiden. Mesh-verktøyet lager ekte mesh-markup, og ved lagring for nettet kan det legge til en liten JavaScript-polyfill som tegner nettet ved innlasting. Det fungerer, men du sender med et skript for å tegne en bakgrunn. Det vises ikke der skript ikke kjøres, som i en `<img>`-tagg eller mange e-postklienter.

## Metode 1: uskarpe former

Dette er det nærmeste du kommer et mesh i ren SVG. Plasser tre til fem fylte sirkler eller ellipser der du vil ha hver farge, og gjør gruppen kraftig uskarp. Uskarpheten blander nabofarger i hverandre slik et mesh gjør, og du kan flytte hver fargeklump uavhengig.

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

Utvid filterområdet så uskarpheten ikke beskjæres ved formkantene. stdDeviation på rundt en tidel av lerretsbredden gir et mesh-uttrykk.

- Fiolett, rosa og himmelblå på blekk: `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ør, rosa og smørgul på krem: `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ønn og 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)`

Forhåndsvisninger av tre oppsett med uskarpe fargeklumper. Det første er SVG-en over; fargene ligger der klumpene ligger.

Uskarphet er ikke gratis. En stor `feGaussianBlur` beregnes på nytt hver gang SVG-en tegnes, så bruk den til statiske bakgrunner fremfor noe som ruller eller animeres. Se [uskarpe gradienter](https://gradiently.design/nb/guide/blurry-gradient) for samme idé laget helt i CSS.

## Metode 2: radiale gradienter i lag

Hver `<radialGradient>` kan gå fra en farge til gjennomsiktig. Fyll flere rektangler i full størrelse, ett per gradient, så overlapper de og gir et mesh-uttrykk. Det brukes ikke noe filter, så gjengivelsen er lettere enn uskarphet og holder seg skarp ved all 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>
```

La fargen gå til samme farge med null opasitet fremfor `transparent`. Det holder kantene rene i alle SVG-gjengivere, også eldre.

Dette kan overføres nesten direkte til CSS, som ofte er et bedre sted for det. [CSS mesh-gradienter](https://gradiently.design/nb/guide/css-mesh-gradient) viser samme lagdeling med `radial-gradient()` og forklarer hvordan du styrer hvor fargene overlapper. SVG-versjonen passer når bakgrunnen må følge med som fil, for eksempel en nedlasting eller en ressurs i et designsystem. Les mer om gradientelementer i [SVG-gradienter](https://gradiently.design/nb/guide/svg-gradients).

Radiale lag, CSS-versjon: `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-en over skrevet som én CSS-bakgrunn. Kopier den hvis gradienten bare skal brukes på en nettside.

## Metode 3: eksporter et rasterbilde

Hvis du har laget et ekte gradientnett i et illustrasjonsprogram og det aldri trenger å endres, eksporter det som bilde. Et mesh i 1920×1080 komprimeres godt som WebP og holder seg jevnt som PNG. Du kan bygge det inn med et SVG `<image>`-element eller bruke det som CSS-bakgrunn. Du mister uavhengigheten av oppløsning, men beholder hver kurve i det opprinnelige nettet.

> **Legg til korn før eksport** Myke mesh-overganger får lett bånding ved komprimering. Et lett støylag, som det i [SVG feTurbulence](https://gradiently.design/nb/guide/svg-noise-filter), skjuler trinnene og holder filstørrelsene fornuftige.

## Velg riktig metode

| Metode | Fil | Skaleres | Passer best til |
| --- | --- | --- | --- |
| Uskarpe former | Liten SVG | Ja | Organiske, bevegelige fargeklumper og statiske bakgrunner |
| Radiale lag | Liten SVG eller CSS | Ja | Raske, skarpe nettbakgrunner |
| Rastereksport | Middels stort bilde | Nei | Nøyaktige gradientnett fra illustrasjonsverktøy |
| Inkscape med polyfill | SVG og skript | Ja | Inkscape-brukere som trenger ekte mesh-flater |
| WebGL-shader | Skript | Ja | Animerte, belyste og interaktive overflater |

Alle fem gir mesh-uttrykk. Bare polyfillen gjengir ekte mesh-flater, og bare shaderen gir bevegelse med lav kostnad.

1. **Velg tre til fem farger** Nærliggende fargetoner blandes rent. Motsatte farger møtes i en grumsete midte, som [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer.
2. **Plasser farger, ikke stopp** Bestem hvor hver farge skal ligge på lerretet. Det er hele forskjellen mellom et mesh og en lineær gradient.
3. **La et rolig område stå igjen** Hold ett område nær bakgrunnsfargen der en overskrift skal stå.
4. **Avslutt med korn** Litt støy får overflaten til å føles gjennomtenkt og skjuler bånding.

Når du vil ha en bakgrunn i mesh-stil uten å bygge den for hånd, er en Gradiently-Mark en oppskrift med farger, lys, materiale og korn som gjengis direkte i alle størrelser, holder det roligste området bak ordene og med Pro eksporteres som PNG, SVG eller PDF. For animerte mesh-bakgrunner på en nettside er [shader-gradienter](https://gradiently.design/nb/guide/shader-gradients) neste steg.

## FAQ

### Støtter nettlesere SVG mesh-gradienter?

Nei. Elementet meshgradient var med i SVG 2-utkast, men ingen av de store nettleserne implementerte det. Det gjengir derfor ingenting uten en JavaScript-polyfill.

### Hvordan lager jeg en mesh-gradient i SVG som fungerer?

Gjør noen fargede sirkler uskarpe med feGaussianBlur, eller stable flere radialGradient-fyll som går mot gjennomsiktig. Begge vises i alle nettlesere.

### Kan jeg bruke Inkscape mesh-gradienter på en nettside?

Ja, hvis du tar med JavaScript-polyfillen Inkscape kan legge til ved lagring. Uten den ignorerer nettleserne nettet, og det fungerer ikke inni en img-tagg.

### Er en CSS mesh-gradient bedre enn SVG?

For en bakgrunn som bare brukes på en nettside, er radiale CSS-lag enklere. SVG er bedre når gradienten må finnes som en selvstendig fil.

### Hvorfor har den uskarpe SVG-gradienten harde kanter?

Filterområdet beskjærer uskarpheten. Utvid det med x="-50%" y="-50%" width="200%" height="200%" på filterelementet.