# Gradientes mesh em SVG: o que funciona hoje [Canonical HTML page](https://gradiently.design/pt-pt/guide/mesh-gradient-svg) Podes escrever um elemento meshgradient, e o Inkscape até cria um por ti, mas os navegadores não desenham nada. Estas são as técnicas que dão o mesmo visual suave e multicolor e que realmente se desenham. ## The short version - O elemento meshgradient foi proposto nos rascunhos do SVG 2, mas nenhum navegador importante o implementou, e não faz parte do padrão publicado que os navegadores seguem. - O Inkscape consegue criar gradientes mesh, e as suas exportações dependem de um polyfill em JavaScript para se desenharem nos navegadores. - A forma mais fiável de obter um visual mesh em SVG é com algumas formas coloridas suavizadas com feGaussianBlur, ou vários gradientes radiais empilhados com margens transparentes. - Uma imagem raster exportada de uma ferramenta de design é a opção mais simples quando o gradiente nunca precisa de mudar, e o WebP ou o PNG mantêm-na leve. - Seja qual for o método, acrescenta um grão leve por cima do resultado para esconder o banding nas transições suaves. Um verdadeiro **gradiente mesh em SVG** não funciona hoje nos navegadores. O elemento `` apareceu nos rascunhos do SVG 2, onde as cores ficam nos cantos de uma grelha de remendos e se misturam ao longo de cada um, mas o Chrome, o Safari e o Firefox nunca o lançaram. Para obter o visual suave e multicolor a que as pessoas se referem como [gradiente mesh](https://gradiently.design/pt-pt/guide/mesh-gradients), constrói-lo a partir de coisas que se desenham: formas desfocadas, gradientes radiais empilhados, uma imagem raster ou um shader. ## O que aconteceu ao meshgradient O elemento mesh fez parte dos rascunhos de trabalho do SVG 2 durante vários anos. Descrevia uma superfície como filas de remendos de Coons, cada remendo com quatro cores nos cantos e margens curvas, que é como funcionam as malhas de gradiente em software de ilustração. Os fabricantes de navegadores não o implementaram, e a funcionalidade ficou de fora da versão do SVG 2 que avançou. Se colares marcação mesh numa página, o navegador ignora-a e preenche a forma com nada, ou com uma cor de recurso, se definires uma. ### Não se desenha nos navegadores - `` com `` e `` - Malhas de gradiente do Illustrator guardadas como SVG vivo - Mesh do Inkscape exportado sem o seu polyfill - Padrões ``, do mesmo rascunho ### Desenha-se em todo o lado - Formas desfocadas com `feGaussianBlur` - Vários preenchimentos ``, empilhados - Uma imagem PNG ou WebP incorporada - Pilhas radiais em CSS ou uma tela WebGL O Inkscape é a exceção notável do lado da criação. A sua ferramenta mesh produz marcação mesh verdadeira e, quando guardas para a web, pode incluir um pequeno polyfill em JavaScript que desenha o mesh ao carregar. Funciona, mas estás a enviar um script para pintar um fundo, e não se desenhará em sítios que não executam scripts, como uma etiqueta `` ou muitos clientes de email. ## Método 1: formas desfocadas É a coisa mais próxima de um mesh em SVG puro. Coloca três a cinco círculos ou elipses preenchidos onde queres cada cor e depois desfoca o grupo com intensidade. O desfoque mistura as cores vizinhas umas nas outras exatamente como um mesh faz, e podes mover cada mancha de forma independente. ```html ``` Aumenta a região do filtro para que o desfoque não seja cortado nas margens das formas. Um stdDeviation de cerca de um décimo da largura da tela dá um ar de mesh. - 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, verde-azulado 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é-visualizações de três disposições de manchas desfocadas. A primeira é o SVG acima; as cores ficam onde ficam as manchas. O desfoque não é grátis. Um `feGaussianBlur` grande é recalculado sempre que o SVG se redesenha, por isso usa-o em fundos estáticos e não em algo que se desloque ou anime. Para a mesma ideia feita inteiramente em CSS, vê [gradientes desfocados](https://gradiently.design/pt-pt/guide/blurry-gradient). ## Método 2: gradientes radiais empilhados Cada `` pode esbater de uma cor para transparente. Preenche vários retângulos de tamanho total, um por gradiente, e sobrepõem-se num mesh. Não há filtro envolvido, por isso é mais leve de desenhar do que o desfoque e mantém-se nítido a qualquer ampliação. ```html ``` Esbate para a mesma cor com opacidade zero em vez de `transparent`, o que mantém as margens limpas em todos os renderizadores de SVG, incluindo os mais antigos. Isto traduz-se quase um para um em CSS, que costuma ser a melhor casa para ele. [Gradientes mesh em CSS](https://gradiently.design/pt-pt/guide/css-mesh-gradient) mostra as mesmas camadas com `radial-gradient()` e explica como controlar onde as cores se sobrepõem. A versão SVG justifica-se quando o fundo tem de viajar como ficheiro, como numa transferência ou num recurso de um sistema de design. Há mais sobre elementos de gradiente em [gradientes SVG](https://gradiently.design/pt-pt/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 só fundo CSS. Copia-o se o gradiente só viver numa página web. ## Método 3: exportar um raster Se desenhaste uma verdadeira malha de gradiente numa ferramenta de ilustração e ela nunca precisa de mudar, exporta-a como imagem. Um mesh de 1920×1080 comprime bem em WebP e mantém-se suave em PNG; podes incorporá-lo com um elemento SVG `` ou usá-lo como fundo CSS. Perdes a independência de resolução, mas manténs todas as curvas da malha original. > **Acrescenta grão antes de exportar** As transições suaves do mesh formam banding com facilidade depois de comprimidas. Uma camada leve de ruído, como a de [SVG feTurbulence](https://gradiently.design/pt-pt/guide/svg-noise-filter), esconde os degraus e mantém os ficheiros com tamanhos razoáveis. ## Escolher o método certo | Método | Ficheiro | Escala | Ideal para | | --- | --- | --- | --- | | Formas desfocadas | SVG minúsculo | Sim | Manchas orgânicas e em movimento, fundos estáticos | | Radiais empilhados | SVG minúsculo ou CSS | Sim | Fundos web rápidos e nítidos | | Exportação raster | Imagem média | Não | Meshes exatos de ferramentas de ilustração | | Inkscape com polyfill | SVG e script | Sim | Utilizadores do Inkscape que precisam de remendos verdadeiros | | Shader WebGL | Script | Sim | Superfícies animadas, iluminadas e interativas | Os cinco dão um visual mesh. Só o polyfill desenha remendos mesh verdadeiros, e só o shader se move a baixo custo. 1. **Escolhe três a cinco cores** Tons vizinhos misturam-se com limpeza. Os opostos encontram-se num meio turvo, como explica [gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients). 2. **Coloca cores, não paragens** Decide onde vive cada cor na tela. É essa a diferença toda entre um mesh e um gradiente linear. 3. **Deixa uma zona calma** Mantém uma região perto da cor de fundo onde vai ficar um título. 4. **Termina com grão** Um pouco de ruído faz a superfície parecer deliberada e esconde o banding. Quando queres um fundo de estilo mesh sem o construir à mão, um Mark do Gradiently é uma receita de cores, luz, material e grão que se desenha em direto em qualquer tamanho, mantém a sua zona mais calma por trás das tuas palavras e exporta-se com o Pro em PNG, SVG ou PDF. Para meshes animados num site, os [gradientes com shader](https://gradiently.design/pt-pt/guide/shader-gradients) são o passo seguinte. ## FAQ ### Os navegadores suportam gradientes mesh em SVG? Não. O elemento meshgradient foi proposto para o SVG 2, mas nenhum navegador importante o implementou, por isso não desenha nada sem um polyfill em JavaScript. ### Como faço um gradiente mesh em SVG que funcione? Desfoca alguns círculos coloridos com feGaussianBlur, ou empilha vários preenchimentos radialGradient que esbatem para transparente. Ambos se desenham em todos os navegadores. ### Posso usar gradientes mesh do Inkscape num site? Sim, se incluíres o polyfill em JavaScript que o Inkscape pode acrescentar ao guardar. Sem ele, os navegadores ignoram o mesh, e não funciona dentro de uma etiqueta img. ### Um gradiente mesh em CSS é melhor do que em SVG? Para um fundo que só vive numa página web, as pilhas radiais em CSS são mais simples. O SVG é melhor quando o gradiente tem de existir como ficheiro autónomo. ### Porque é que o meu gradiente SVG desfocado tem arestas duras? A região do filtro está a cortar o desfoque. Aumenta-a com x="-50%" y="-50%" width="200%" height="200%" no elemento filter.