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

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

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.

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

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.

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.

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

Tämä siirtyy lähes sellaisenaan CSS:ään, joka on usein parempi paikka sille. CSS-mesh-liukuvärit 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.

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.

Oikean menetelmän valinta

1. 1

   Valitse kolmesta viiteen väriä

   Naapurisävyt sekoittuvat puhtaasti. Vastavärit kohtaavat sameassa keskikohdassa, kuten sameat liukuvärit selittää.

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

   Jätä rauhallinen alue

   Pidä otsikon alue lähellä pohjaväriä.

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