In breve
- L’elemento meshgradient era stato proposto nelle bozze di SVG 2, ma nessun browser importante lo ha implementato e non fa parte dello standard pubblicato che i browser seguono.
- Inkscape può creare gradienti mesh, e le sue esportazioni si affidano a un polyfill JavaScript per essere mostrate nei browser.
- Il modo più affidabile per ottenere un effetto mesh in SVG è usare poche forme colorate ammorbidite con feGaussianBlur, oppure più gradienti radiali sovrapposti con i bordi trasparenti.
- Un’immagine raster esportata da uno strumento di design è l’opzione più semplice quando il gradiente non deve mai cambiare, e WebP o PNG la mantengono leggera.
- Qualunque metodo scelga, aggiungi una leggera grana sul risultato per nascondere le bande nelle transizioni morbide.
In questa pagina
Un vero gradiente mesh SVG oggi non funziona nei browser. L’elemento <meshgradient> è comparso nelle bozze di SVG 2, dove i colori stanno agli angoli di una griglia di patch e si fondono dentro ciascuna, ma Chrome, Safari e Firefox non lo hanno mai rilasciato. Per ottenere l’effetto morbido e multicolore che la gente intende con gradiente mesh, lo costruisci con cose che si vedono: forme sfocate, gradienti radiali sovrapposti, un’immagine raster o uno shader.
Che fine ha fatto meshgradient
L’elemento mesh è stato per anni nelle bozze di lavoro di SVG 2. Descriveva una superficie come file di patch di Coons, ciascuna con quattro colori d’angolo e bordi curvi, che è il modo in cui funzionano le mesh di gradienti nei programmi di illustrazione. I produttori di browser non lo hanno implementato, e la funzione è stata lasciata fuori dalla versione di SVG 2 che è andata avanti. Se incolli il codice di una mesh in una pagina, il browser lo ignora e riempie la forma con niente, oppure con un colore di riserva se ne hai impostato uno.
Non si vede nei browser
<meshgradient>con<meshrow>e<meshpatch>- Mesh di gradienti di Illustrator salvate come SVG vivo
- Mesh di Inkscape esportata senza polyfill
- Pattern
<hatch>, della stessa bozza
Si vede ovunque
- Forme sfocate con
feGaussianBlur - Più riempimenti
<radialGradient>sovrapposti - Un’immagine PNG o WebP incorporata
- Radiali CSS sovrapposti o un canvas WebGL
Inkscape è la notevole eccezione sul lato della creazione. Il suo strumento mesh produce vero codice mesh e, quando salvi per il web, può includere un piccolo polyfill JavaScript che disegna la mesh al caricamento. Funziona, ma spedisci uno script per dipingere uno sfondo, e non verrà mostrata dove gli script non girano, come in un tag <img> o in molti client email.
Metodo 1: forme sfocate
È la cosa più vicina a una mesh in puro SVG. Metti da tre a cinque cerchi o ellissi pieni dove vuoi ciascun colore, poi sfoca molto il gruppo. La sfocatura fonde i colori vicini l’uno nell’altro esattamente come fa una mesh, e puoi spostare ogni macchia in modo indipendente.
<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>La sfocatura non è gratis. Un feGaussianBlur grande viene ricalcolato a ogni ridisegno dell’SVG, quindi usalo per sfondi statici e non per qualcosa che scorre o si anima. Per la stessa idea fatta interamente in CSS, vedi i gradienti sfocati.
Metodo 2: gradienti radiali sovrapposti
Ogni <radialGradient> può sfumare da un colore al trasparente. Riempi più rettangoli a dimensione piena, uno per gradiente, e si sovrappongono in una mesh. Non c’è alcun filtro, quindi si disegna più leggero della sfocatura e resta nitido a qualsiasi zoom.
<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>transparent, che mantiene i bordi puliti in ogni renderer SVG, compresi quelli più vecchi.Si traduce quasi uno a uno in CSS, che spesso è la casa migliore. I gradienti mesh in CSS mostrano la stessa sovrapposizione con radial-gradient() e spiegano come controllare dove i colori si sovrappongono. La versione SVG si guadagna il posto quando lo sfondo deve viaggiare come file, per esempio un download o una risorsa in un design system. Altro sugli elementi gradiente negli gradienti SVG.
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)Metodo 3: esporta un raster
Se hai disegnato una vera mesh di gradienti in uno strumento di illustrazione e non deve mai cambiare, esportala come immagine. Una mesh 1920×1080 si comprime bene in WebP e resta liscia in PNG; puoi incorporarla con un elemento SVG <image> o usarla come sfondo CSS. Perdi l’indipendenza dalla risoluzione, ma mantieni ogni curva della mesh originale.
Scegliere il metodo giusto
File
Scala
Ideale per
File
Scala
Ideale per
File
Scala
Ideale per
File
Scala
Ideale per
File
Scala
Ideale per
- 1
Scegli da tre a cinque colori
Le tinte vicine si fondono bene. I contrari si incontrano in un centro fangoso, come spiegano i gradienti sporchi.
- 2
Posiziona i colori, non gli arresti
Decidi dove vive ogni colore sulla tela. È tutta la differenza tra una mesh e un gradiente lineare.
- 3
Lascia un’area calma
Tieni una zona vicina al colore di fondo dove starà un titolo.
- 4
Finisci con la grana
Un po’ di rumore fa sembrare la superficie voluta e nasconde le bande.
Quando vuoi uno sfondo in stile mesh senza costruirlo a mano, un Mark di Gradiently è una ricetta di colori, luce, materiale e grana che si disegna dal vivo a qualsiasi dimensione, tiene la sua area più calma dietro le tue parole ed esporta con Pro in PNG, SVG o PDF. Per mesh animate in un sito web, gli shader gradient sono il passo successivo.
Le domande più frequenti
I browser supportano i gradienti mesh SVG?
No. L’elemento meshgradient era previsto per SVG 2 ma nessun browser importante lo ha implementato, quindi non mostra nulla senza un polyfill JavaScript.
Come faccio un gradiente mesh in SVG che funzioni?
Sfoca alcuni cerchi colorati con feGaussianBlur, oppure sovrapponi più riempimenti radialGradient che sfumano verso il trasparente. Entrambi si vedono in ogni browser.
Posso usare i gradienti mesh di Inkscape in un sito web?
Sì, se includi il polyfill JavaScript che Inkscape può aggiungere al salvataggio. Senza, i browser ignorano la mesh, e non funzionerà dentro un tag img.
Un gradiente mesh in CSS è meglio di uno SVG?
Per uno sfondo che vive solo in una pagina web, i radiali CSS sovrapposti sono più semplici. L’SVG è meglio quando il gradiente deve esistere come file a sé.
Perché il mio gradiente SVG sfocato ha i bordi netti?
La regione del filtro sta tagliando la sfocatura. Allargala con x="-50%" y="-50%" width="200%" height="200%" sull’elemento filter.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo