Gradientes SVG: lineares, radiais, contornos, texto e máscaras

Um gradiente SVG é uma tinta que defines uma vez e aplicas a qualquer forma, linha ou texto num SVG. Escreves um elemento <linearGradient> ou <radialGradient> dentro de <defs>, dás-lhe filhos <stop> para as cores e um id, e depois defines o fill ou o stroke de uma forma como url(#id). Ao contrário de um fundo CSS, pode colorir um contorno ou uma única palavra, e acompanha a escala do desenho.

<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="dusk" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1e1b4b" />
      <stop offset="0.55" stop-color="#7c3aed" />
      <stop offset="1" stop-color="#f472b6" />
    </linearGradient>
  </defs>
  <rect width="200" height="120" rx="16" fill="url(#dusk)" />
</svg>

linearGradient e as suas paragens

x1, y1, x2 e y2 definem o início e o fim da linha do gradiente. Cada <stop> recebe um offset de 0 a 1 (ou de 0% a 100%), um stop-color e um stop-opacity opcional. stop-color também é uma propriedade CSS, por isso podes dar tema aos gradientes a partir de uma folha de estilos, por exemplo stop { stop-color: var(--accent); }.

href poupa repetição. Define as tuas paragens uma vez num gradiente base e depois cria variações que apontam para ele e mudam só a direção ou as unidades. A referência de linearGradient na MDN explica todos os atributos.

radialGradient: centro, raio e ponto focal

Um gradiente radial recebe um centro (cx, cy) e um raio (r), todos com 0.5 por omissão, por isso preenche a forma a partir do meio. Tem também algo que falta ao CSS: um ponto focal separado (fx, fy) onde começa a primeira cor. Deslocar o ponto focal para fora do centro faz uma esfera parecer iluminada de um lado.

<radialGradient id="orb" cx="0.5" cy="0.5" r="0.5" fx="0.32" fy="0.28">
  <stop offset="0" stop-color="#e0f2fe" />
  <stop offset="0.45" stop-color="#0ea5e9" />
  <stop offset="1" stop-color="#082f49" />
</radialGradient>

<circle cx="60" cy="60" r="50" fill="url(#orb)" />

gradientUnits: objectBoundingBox ou userSpaceOnUse

Com o valor por omissão objectBoundingBox, 0 e 1 significam as margens da forma que estiver a ser pintada, por isso cada forma recebe o gradiente inteiro, esticado para caber. Com userSpaceOnUse, as coordenadas estão nas unidades do próprio SVG, por isso o gradiente fica parado e as formas revelam a parte dele que cobrem. É assim que uma fila de barras pode partilhar um gradiente contínuo.

Gradientes em contornos e em texto

stroke="url(#id)" pinta contornos, e é assim que se desenham ícones com gradiente, anéis de progresso e linhas de gráficos. Em <text>, fill="url(#id)" colore as letras, e as palavras continuam selecionáveis e pesquisáveis. Junta uma cor lisa depois do URL, como fill="url(#dusk) #7c3aed", e ela é usada se o gradiente não for encontrado.

<svg viewBox="0 0 320 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="line" gradientUnits="userSpaceOnUse" x1="20" y1="0" x2="300" y2="0">
      <stop offset="0" stop-color="#22d3ee" />
      <stop offset="1" stop-color="#a855f7" />
    </linearGradient>
  </defs>
  <path d="M20 90 C 90 20, 160 110, 300 30" fill="none" stroke="url(#line)" stroke-width="6" stroke-linecap="round" />
  <text x="20" y="115" font-size="20" font-weight="700" fill="url(#line) #7c3aed">Growth</text>
</svg>

Para letras com gradiente em HTML e não em SVG, texto com gradiente em CSS é normalmente mais simples. Recorre ao texto SVG quando as palavras fazem parte de uma ilustração ou de um logótipo, ou precisam de seguir um traçado.

spreadMethod: pad, reflect e repeat

Quando a linha do gradiente é mais curta do que a forma, spreadMethod decide o que preenche o resto. pad mantém as cores das pontas, reflect espelha a mistura para trás e para a frente e repeat recomeça-a com uma aresta nítida. Aqui cada gradiente vai de 30% a 70% da largura.

Esbater com máscaras SVG

Uma máscara usa a luminosidade: as áreas brancas mostram o que está mascarado, as pretas escondem-no e os cinzentos ficam no meio. Assim, um gradiente de branco a preto dentro de uma <mask> esbate suavemente qualquer forma ou imagem até ao nada, e é assim que se suaviza a margem de uma foto ou se faz uma linha de gráfico desaparecer no início.

<defs>
  <linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0.4" stop-color="#fff" />
    <stop offset="1" stop-color="#000" />
  </linearGradient>
  <mask id="soft-bottom">
    <rect width="100%" height="100%" fill="url(#fade)" />
  </mask>
</defs>

<image href="photo.jpg" width="100%" height="100%" mask="url(#soft-bottom)" />

Em elementos HTML, o CSS mask-image: linear-gradient(#000 40%, transparent) faz o mesmo trabalho, usando o alfa em vez da luminosidade. A técnica da máscara também está por trás dos contornos com gradiente em CSS transparentes.