# Mesh gradient em SVG: o que funciona hoje [Canonical HTML page](https://gradiently.design/pt-br/guide/mesh-gradient-svg) Você pode escrever um elemento meshgradient, e o Inkscape até cria um para você, mas os navegadores não vão desenhar nada. Estas são as técnicas que dão o mesmo visual suave, de muitas cores, e que realmente aparecem na tela. ## The short version - O elemento meshgradient foi proposto nos rascunhos do SVG 2, mas nenhum navegador importante o implementou, e ele não faz parte do padrão publicado que os navegadores seguem. - O Inkscape consegue criar mesh gradients, e as exportações dele dependem de um polyfill em JavaScript para aparecer nos navegadores. - O jeito mais confiável de obter um visual de malha em SVG é usar algumas formas coloridas suavizadas com feGaussianBlur, ou vários gradientes radiais empilhados com bordas transparentes. - Uma imagem rasterizada exportada de uma ferramenta de design é a opção mais simples quando o gradiente nunca precisa mudar, e WebP ou PNG mantêm o arquivo leve. - Seja qual for o método escolhido, adicione um granulado leve sobre o resultado para esconder o banding nas transições suaves. Um **mesh gradient em SVG** de verdade não funciona nos navegadores hoje. O elemento `` apareceu nos rascunhos do SVG 2, em que as cores ficam nos cantos de uma grade de retalhos e se misturam em cada um deles, mas Chrome, Safari e Firefox nunca o lançaram. Para conseguir o visual suave, de muitas cores, que as pessoas chamam de [mesh gradient](https://gradiently.design/pt-br/guide/mesh-gradients), você o constrói com o que de fato é renderizado: formas desfocadas, gradientes radiais empilhados, uma imagem rasterizada ou um shader. ## O que aconteceu com o meshgradient O elemento de malha fez parte dos rascunhos de trabalho do SVG 2 por vários anos. Ele descrevia uma superfície como fileiras de retalhos de Coons, cada um com quatro cores nos cantos e bordas curvas, que é como as malhas de gradiente funcionam nos programas de ilustração. Os fabricantes de navegadores não o implementaram, e o recurso ficou de fora da versão do SVG 2 que seguiu adiante. Se você colar a marcação de malha numa página, o navegador a ignora e preenche a forma com nada, ou com uma cor reserva se você tiver definido uma. ### Não aparece nos navegadores - `` com `` e `` - Malhas de gradiente do Illustrator salvas como SVG editável - Malha do Inkscape exportada sem o polyfill - Padrões ``, do mesmo rascunho ### Aparece em todo lugar - Formas desfocadas com `feGaussianBlur` - Vários preenchimentos ``, empilhados - Uma imagem PNG ou WebP incorporada - Radiais empilhados em CSS ou um canvas WebGL O Inkscape é a exceção notável do lado da criação. A ferramenta de malha dele gera marcação de malha de verdade e, quando você salva para a web, pode incluir um pequeno polyfill em JavaScript que desenha a malha no carregamento. Isso funciona, mas você está enviando script para pintar um fundo, e não vai aparecer em lugares que não executam scripts, como uma tag `` ou muitos clientes de email. ## Método 1: formas desfocadas É o mais perto de uma malha em SVG puro. Coloque de três a cinco círculos ou elipses preenchidos onde você quer cada cor e depois desfoque bastante o grupo. O desfoque mistura as cores vizinhas exatamente como uma malha faz, e você pode mover cada mancha de forma independente. ```html ``` Aumente a região do filtro para o desfoque não ser cortado nas bordas das formas. Um stdDeviation de cerca de um décimo da largura da tela dá a sensação de malha. - Violeta, rosa e céu sobre tinta: `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)` - Brasa, rosa e manteiga sobre creme: `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)` - Esmeralda, petróleo e índigo: `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)` Prévias de três arranjos de manchas desfocadas. O primeiro é o SVG acima; as cores ficam onde as manchas estão. Desfoque tem custo. Um `feGaussianBlur` grande é recalculado sempre que o SVG é redesenhado, então use isso em fundos estáticos, não em algo que rola ou se anima. Para a mesma ideia feita só com CSS, veja [gradientes desfocados](https://gradiently.design/pt-br/guide/blurry-gradient). ## Método 2: gradientes radiais empilhados Cada `` pode ir de uma cor até o transparente. Preencha vários retângulos do tamanho total, um por gradiente, e eles se sobrepõem formando uma malha. Não há filtro envolvido, então a renderização é mais leve que o desfoque e fica nítida em qualquer zoom. ```html ``` Esmaeça para a mesma cor com opacidade zero em vez de `transparent`, o que mantém as bordas limpas em qualquer renderizador de SVG, inclusive os mais antigos. Isso se traduz quase um para um em CSS, que muitas vezes é o melhor lugar para ele. [Mesh gradients em CSS](https://gradiently.design/pt-br/guide/css-mesh-gradient) mostra as mesmas camadas com `radial-gradient()` e explica como controlar onde as cores se sobrepõem. A versão em SVG vale a pena quando o fundo precisa viajar como arquivo, como um download ou um recurso num design system. Mais sobre os elementos de gradiente em [gradientes SVG](https://gradiently.design/pt-br/guide/svg-gradients). Radiais empilhados, versão 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)` O SVG acima escrito como um único fundo CSS. Copie se o gradiente só vive numa página da web. ## Método 3: exportar uma imagem Se você desenhou uma malha de gradiente de verdade numa ferramenta de ilustração e ela nunca precisa mudar, exporte como imagem. Uma malha de 1920×1080 comprime bem em WebP e fica suave em PNG; você pode incorporá-la com um elemento SVG `` ou usá-la como fundo em CSS. Você perde a independência de resolução, mas mantém cada curva da malha original. > **Adicione granulado antes de exportar** Transições suaves de malha criam banding com facilidade depois de comprimidas. Uma camada leve de ruído, como a de [SVG feTurbulence](https://gradiently.design/pt-br/guide/svg-noise-filter), esconde os degraus e mantém o tamanho do arquivo razoável. ## Como escolher o método certo | Método | Arquivo | Escala | Ideal para | | --- | --- | --- | --- | | Formas desfocadas | SVG minúsculo | Sim | Manchas orgânicas e soltas, fundos estáticos | | Radiais empilhados | SVG ou CSS minúsculo | Sim | Fundos web rápidos e nítidos | | Exportar imagem | Imagem média | Não | Malhas exatas de ferramentas de ilustração | | Inkscape com polyfill | SVG e script | Sim | Quem usa Inkscape e precisa de retalhos reais | | Shader WebGL | Script | Sim | Superfícies animadas, iluminadas e interativas | Os cinco dão um visual de malha. Só o polyfill renderiza retalhos de malha reais, e só o shader se move sem pesar. 1. **Escolha de três a cinco cores** Matizes vizinhos se misturam bem. Opostos se encontram num meio turvo, como explica [gradientes turvos](https://gradiently.design/pt-br/guide/muddy-gradients). 2. **Posicione cores, não paradas** Decida onde cada cor fica na tela. Essa é toda a diferença entre uma malha e um gradiente linear. 3. **Deixe uma área calma** Mantenha uma região próxima da cor de fundo onde vai ficar o título. 4. **Termine com granulado** Um pouco de ruído faz a superfície parecer intencional e esconde o banding. Quando você quer um fundo no estilo malha sem montá-lo à mão, um Mark do Gradiently é uma receita de cores, luz, material e granulado que é renderizada ao vivo em qualquer tamanho, mantém a área mais calma atrás das suas palavras e exporta com o Pro em PNG, SVG ou PDF. Para malhas animadas num site, [gradientes com shader](https://gradiently.design/pt-br/guide/shader-gradients) são o próximo passo. ## FAQ ### Os navegadores suportam mesh gradients em SVG? Não. O elemento meshgradient foi rascunhado para o SVG 2, mas nenhum navegador importante o implementou, então ele não exibe nada sem um polyfill em JavaScript. ### Como faço um mesh gradient em SVG que funcione? Desfoque alguns círculos coloridos com feGaussianBlur, ou empilhe vários preenchimentos radialGradient que vão até o transparente. Os dois funcionam em qualquer navegador. ### Posso usar mesh gradients do Inkscape num site? Sim, se você incluir o polyfill em JavaScript que o Inkscape pode adicionar ao salvar. Sem ele, os navegadores ignoram a malha, e ela não funciona dentro de uma tag img. ### Um mesh gradient em CSS é melhor que em SVG? Para um fundo que só vive numa página da web, radiais empilhados em CSS são mais simples. SVG é melhor quando o gradiente precisa existir como arquivo independente. ### Por que meu gradiente SVG desfocado tem bordas duras? A região do filtro está cortando o desfoque. Aumente-a com x="-50%" y="-50%" width="200%" height="200%" no elemento filter.