Gradientes mesh em SVG: o que funciona hoje

Um verdadeiro gradiente mesh em SVG não funciona hoje nos navegadores. O elemento <meshgradient> 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, 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.

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

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

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.

Método 2: gradientes radiais empilhados

Cada <radialGradient> 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.

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

Isto traduz-se quase um para um em CSS, que costuma ser a melhor casa para ele. Gradientes mesh em CSS 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.

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 <image> ou usá-lo como fundo CSS. Perdes a independência de resolução, mas manténs todas as curvas da malha original.

Escolher o método certo

1. 1

   Escolhe três a cinco cores

   Tons vizinhos misturam-se com limpeza. Os opostos encontram-se num meio turvo, como explica gradientes turvos.

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

   Deixa uma zona calma

   Mantém uma região perto da cor de fundo onde vai ficar um título.

4. 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 são o passo seguinte.