# Gradienti mesh in SVG: cosa funziona oggi [Canonical HTML page](https://gradiently.design/it/guide/mesh-gradient-svg) Puoi scrivere un elemento meshgradient, e Inkscape lo crea perfino per te, ma i browser non disegneranno nulla. Ecco le tecniche che danno lo stesso effetto morbido e multicolore e si vedono davvero. ## The short version - 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. Un vero **gradiente mesh SVG** oggi non funziona nei browser. L’elemento `` è 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](https://gradiently.design/it/guide/mesh-gradients), 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 - `` con `` e `` - Mesh di gradienti di Illustrator salvate come SVG vivo - Mesh di Inkscape esportata senza polyfill - Pattern ``, della stessa bozza ### Si vede ovunque - Forme sfocate con `feGaussianBlur` - Più riempimenti `` 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 `` 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. ```html ``` Allarga la regione del filtro così la sfocatura non viene tagliata ai bordi delle forme. Una stdDeviation attorno a un decimo della larghezza della tela dà l’effetto mesh. - Viola, rosa e cielo su inchiostro: `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)` - Brace, rosa e burro su crema: `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)` - Smeraldo, verde acqua e indaco: `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)` Anteprime di tre disposizioni di macchie sfocate. La prima è l’SVG qui sopra; i colori stanno dove stanno le macchie. 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](https://gradiently.design/it/guide/blurry-gradient). ## Metodo 2: gradienti radiali sovrapposti Ogni `` 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. ```html ``` Sfuma verso lo stesso colore a opacità zero invece che verso `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](https://gradiently.design/it/guide/css-mesh-gradient) 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](https://gradiently.design/it/guide/svg-gradients). Radiali sovrapposti, versione CSS: `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)` L’SVG qui sopra scritto come un unico sfondo CSS. Copialo se il gradiente vive solo in una pagina web. ## 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 `` o usarla come sfondo CSS. Perdi l’indipendenza dalla risoluzione, ma mantieni ogni curva della mesh originale. > **Aggiungi la grana prima di esportare** Le transizioni morbide di una mesh formano facilmente bande una volta compresse. Un leggero strato di rumore, come quello di [SVG feTurbulence](https://gradiently.design/it/guide/svg-noise-filter), nasconde i gradini e mantiene ragionevole il peso dei file. ## Scegliere il metodo giusto | Metodo | File | Scala | Ideale per | | --- | --- | --- | --- | | Forme sfocate | SVG minuscolo | Sì | Macchie organiche e in movimento, sfondi statici | | Radiali sovrapposti | SVG o CSS minuscolo | Sì | Sfondi web veloci e nitidi | | Esportazione raster | Immagine media | No | Mesh esatte da strumenti di illustrazione | | Inkscape più polyfill | SVG e script | Sì | Chi usa Inkscape e vuole vere patch | | Shader WebGL | Script | Sì | Superfici animate, illuminate, interattive | Tutti e cinque danno un effetto mesh. Solo il polyfill disegna vere patch mesh, e solo lo shader si muove a basso costo. 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](https://gradiently.design/it/guide/muddy-gradients). 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](https://gradiently.design/it/guide/shader-gradients) sono il passo successivo. ## FAQ ### 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.