# SVG-mesh-liukuväri: mikä toimii nykyään

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

Voit kirjoittaa meshgradient-elementin ja luoda sen Inkscapella, mutta selain ei piirrä mitään. Näillä tekniikoilla saat pehmeän monivärisen ilmeen, joka todella näkyy.

## The short version

- meshgradient-elementti ehdotettiin SVG 2:n luonnoksissa, mutta mikään suuri selain ei toteuttanut sitä. Se ei kuulu selainten seuraamaan julkaistuun standardiin.
- Inkscapella voi tehdä mesh-liukuvärejä, joiden vienti käyttää JavaScript-polyfilliä selaimessa piirtämiseen.
- Luotettavin mesh-ilme SVG:ssä syntyy feGaussianBlurilla pehmennetyistä värimuodoista tai päällekkäisistä säteittäisistä liukuväreistä läpinäkyvin reunoin.
- Suunnittelutyökalusta viety rasterikuva on helpoin, kun liukuväri ei muutu. WebP tai PNG pitää tiedoston pienenä.
- Lisää menetelmästä riippumatta kevyttä rakeisuutta peittämään pehmeiden siirtymien raitautumista.

Aito **SVG-mesh-liukuväri** ei nykyään toimi selaimissa. `<meshgradient>` oli SVG 2:n luonnoksissa: värit sijoittuvat pintapalaverkon kulmiin ja sekoittuvat palojen yli. Chrome, Safari ja Firefox eivät koskaan toteuttaneet sitä. [Mesh-liukuvärin](https://gradiently.design/fi/guide/mesh-gradients) pehmeä monivärinen ilme tehdään toimivilla osilla: sumennetuilla muodoilla, säteittäisillä kerroksilla, rasterikuvalla tai shaderilla.

## Mitä meshgradientille tapahtui

Mesh-elementti kuului vuosia SVG 2:n työluonnoksiin. Se kuvasi pinnan Coons-palariveinä, joilla on neljä kulmaväriä ja kaarevat reunat, kuten kuvitusohjelmien liukuväriverkoissa. Selainvalmistajat eivät toteuttaneet sitä, ja ominaisuus jäi pois edenneestä SVG 2 -versiosta. Sivulle liitetyn mesh-koodin selain ohittaa ja jättää muodon tyhjäksi tai käyttää määrittämääsi varaväriä.

### Ei piirry selaimissa

- `<meshgradient>`, `<meshrow>` ja `<meshpatch>`
- Illustratorin elävänä SVG:nä tallennetut liukuväriverkot
- Inkscapen mesh ilman polyfilliä
- Saman luonnoksen `<hatch>`-kuviot

### Piirtyy kaikkialla

- `feGaussianBlur`-sumennetut muodot
- Pinotut `<radialGradient>`-täytöt
- Upotettu PNG- tai WebP-kuva
- CSS:n säteittäiset kerrokset tai WebGL-piirtopinta

Inkscape on merkittävä poikkeus luontipuolella. Sen mesh-työkalu tekee oikeaa mesh-koodia ja voi verkkotallennuksessa lisätä pienen JavaScript-polyfillin piirtämään verkon latautuessa. Se toimii, mutta toimitat taustan piirtämiseen skriptiä. Se ei piirry skriptittömissä paikoissa, kuten `<img>`-elementissä tai monissa sähköpostiohjelmissa.

## Menetelmä 1: sumennetut muodot

Tämä on puhtaan SVG:n lähin mesh-vastine. Sijoita kolmesta viiteen täytettyä ympyrää tai ellipsiä värien kohdille ja sumenna ryhmää voimakkaasti. Sumennus yhdistää naapurivärit meshin tapaan, ja voit siirtää joka muotoa erikseen.

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

Laajenna suodatinalue, ettei sumennus leikkaudu muotojen reunoilta. Noin kymmenesosan piirtopinnan leveydestä oleva stdDeviation tuo mesh-tuntua.

- Violetti, pinkki ja taivas musteella: `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)`
- Hiillos, ruusu ja voi kermalla: `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)`
- Smaragdi, sinivihreä ja 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)`

Kolmen sumennetun muotosommittelun esikatselut. Ensimmäinen vastaa yllä olevaa SVG:tä: värit ovat muotojen kohdalla.

Sumennus kuluttaa resursseja. Suuri `feGaussianBlur` lasketaan uudelleen aina SVG:n piirtyessä, joten käytä staattisilla taustoilla vierivien tai animoitujen sijaan. Sama idea pelkkänä CSS:nä löytyy oppaasta [sumennetut liukuvärit](https://gradiently.design/fi/guide/blurry-gradient).

## Menetelmä 2: pinotut säteittäiset liukuvärit

Jokainen `<radialGradient>` voi häipyä väristä läpinäkyväksi. Täytä koko pinnan suorakulmioita, yksi kutakin liukuväriä kohti, ja ne muodostavat päällekkäin mesh-ilmeen. Suodatinta ei tarvita, joten piirtäminen on sumennusta kevyempää ja terävää kaikilla zoomaustasoilla.

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

Häivytä samaan väriin nollapeittävyydellä, älä arvoon `transparent`. Reunat pysyvät puhtaina kaikissa SVG-piirtimissä, myös vanhoissa.

Tämä siirtyy lähes sellaisenaan CSS:ään, joka on usein parempi paikka sille. [CSS-mesh-liukuvärit](https://gradiently.design/fi/guide/css-mesh-gradient) näyttää `radial-gradient()`-kerrokset ja värien päällekkäisyyden hallinnan. SVG sopii, kun taustan pitää kulkea tiedostona, kuten latauksena tai designjärjestelmän aineistona. Lisää elementeistä löytyy oppaasta [SVG-liukuvärit](https://gradiently.design/fi/guide/svg-gradients).

Pinotut säteittäiset, CSS-versio: `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)`

Yllä oleva SVG yhtenä CSS-taustana. Kopioi, jos liukuväriä käytetään vain verkkosivulla.

## Menetelmä 3: rasterivienti

Jos teit aidon liukuväriverkon kuvitusohjelmassa eikä se muutu, vie se kuvaksi. 1920×1080-mesh pakkautuu hyvin WebP:nä ja pysyy tasaisena PNG:nä. Voit upottaa sen SVG:n `<image>`-elementillä tai käyttää CSS-taustana. Menetät tarkkuusriippumattomuuden mutta säilytät alkuperäisen verkon jokaisen kaaren.

> **Lisää rakeisuutta ennen vientiä** Pehmeät mesh-siirtymät raitautuvat helposti pakkauksessa. Kevyt kohinakerros, kuten [SVG feTurbulence](https://gradiently.design/fi/guide/svg-noise-filter), peittää portaat ja pitää tiedostokoon kohtuullisena.

## Oikean menetelmän valinta

| Menetelmä | Tiedosto | Skaalautuu | Paras käyttö |
| --- | --- | --- | --- |
| Sumennetut muodot | Pieni SVG | Kyllä | Orgaaniset liikkuvat muodot, staattiset taustat |
| Säteittäiset kerrokset | Pieni SVG tai CSS | Kyllä | Nopeat, terävät verkkotaustat |
| Rasterivienti | Keskikokoinen kuva | Ei | Kuvitusohjelmien tarkat verkot |
| Inkscape ja polyfill | SVG ja skripti | Kyllä | Inkscape-käyttäjien aidot pintapalat |
| WebGL-shader | Skripti | Kyllä | Animoidut, valaistut, vuorovaikutteiset pinnat |

Kaikki viisi antavat mesh-ilmeen. Vain polyfill piirtää aidot verkkopalat, ja vain shader liikkuu kevyesti.

1. **Valitse kolmesta viiteen väriä** Naapurisävyt sekoittuvat puhtaasti. Vastavärit kohtaavat sameassa keskikohdassa, kuten [sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) selittää.
2. **Sijoita värit, älä väripisteitä** Päätä, missä kukin väri sijaitsee pinnalla. Tässä on meshin ja lineaarisen liukuvärin koko ero.
3. **Jätä rauhallinen alue** Pidä otsikon alue lähellä pohjaväriä.
4. **Viimeistele rakeisuudella** Pieni kohina tekee pinnasta harkitun ja peittää raitautumista.

Jos haluat mesh-taustan tekemättä sitä käsin, Gradientlyn Mark on värien, valon, materiaalin ja rakeisuuden resepti. Se piirtyy reaaliajassa joka kokoon, pitää rauhallisimman alueen sanojen takana ja viedään Prolla PNG:nä, SVG:nä tai PDF:nä. Verkkosivun animoituihin mesheihin seuraava askel on [shader-liukuvärit](https://gradiently.design/fi/guide/shader-gradients).

## FAQ

### Tukevatko selaimet SVG-mesh-liukuvärejä?

Eivät. meshgradient luonnosteltiin SVG 2:een, mutta suuret selaimet eivät toteuttaneet sitä. Ilman JavaScript-polyfilliä mitään ei piirry.

### Miten teen toimivan SVG-mesh-liukuvärin?

Sumenna värillisiä ympyröitä feGaussianBlurilla tai pinoa läpinäkyväksi häipyviä radialGradient-täyttöjä. Molemmat piirtyvät kaikissa selaimissa.

### Voinko käyttää Inkscapen mesh-liukuvärejä verkkosivulla?

Kyllä, kun mukana on Inkscapen tallennukseen lisäämä JavaScript-polyfill. Ilman sitä selain ohittaa verkon, eikä se toimi img-elementissä.

### Onko CSS-mesh-liukuväri SVG:tä parempi?

Vain verkkosivulla käytettävään taustaan CSS:n säteittäiset kerrokset ovat yksinkertaisempia. SVG sopii paremmin itsenäiseen tiedostoon.

### Miksi sumennetussa SVG-liukuvärissäni on kovat reunat?

Suodatinalue leikkaa sumennusta. Laajenna sitä suodatinelementin arvoilla x="-50%" y="-50%" width="200%" height="200%".