Introdução aos Filtros SVG

Atualmente, o CSS fornece uma maneira de aplicar efeitos de cor a imagens (ex.: luminosidade, saturação, contraste, etc.) usando a propriedade filter. No entanto, os filtros CSS são limitados. Eles oferecem um conjunto fixo de funções de finalidade única (blur(), brightness(), drop-shadow(), etc.) que você aplica a um elemento inteiro, principalmente para manipulação de cores e desfoque. Para criar efeitos mais poderosos e compostos, precisaremos de outras funções. Essas funções estão disponíveis no SVG.

Esta página apresenta o que os filtros SVG fazem, o elemento <filter> e sua região de filtro, e como as primitivas de filtro são encadeadas com o mecanismo in/result.

O Que os Filtros SVG Fazem (e Quando Usá-los)

Um filtro SVG é um pequeno pipeline de processamento de imagens. Em vez de um único efeito pré-definido, você descreve uma cadeia de operações de baixo nível — chamadas de primitivas de filtro — onde a saída de uma etapa se torna a entrada da próxima. Ao encadear primitivas, você pode criar efeitos que o CSS não consegue expressar por conta própria:

• Sombras e brilhos construídos deslocando, desfocando, recolorindo e recompondo o gráfico original.
• Texturas e ruído gerados com <feTurbulence> (ruído de Perlin) para nuvens, papel, mármore, etc.
• Deslocamento / distorção com <feDisplacementMap>, que move pixels usando outra imagem como mapa de altura.
• Efeitos de iluminação que tratam o canal alfa como um mapa de relevo 3D.

Quando escolher filtros SVG em vez de filtros CSS: use a propriedade CSS filter quando precisar de um efeito rápido e único (um desfoque, um ajuste de brilho, uma sombra) em qualquer elemento HTML ou SVG. Use filtros SVG quando precisar combinar várias operações em um efeito composto, gerar texturas ou fazer deslocamento — qualquer coisa que exija alimentar a saída de uma operação em outra.

O Elemento <filter> e Sua Região

Você define um filtro uma vez dentro de <defs> e o referencia a partir de uma forma com o atributo filter="url(#id)" (ou a propriedade CSS filter). O próprio elemento <filter> não desenha nada — ele é um contêiner para as primitivas que realizam o trabalho.

Um filtro tem uma região de filtro: uma caixa delimitadora que limita onde o resultado filtrado é renderizado. Qualquer coisa pintada fora dessa região é recortada. A região é controlada por estes atributos em <filter>:

Essa região é o problema mais comum. Efeitos como desfoque e sombras se estendem para fora da forma original, e a região padrão de 120% costuma ser pequena demais — a sombra fica cortada nas bordas. Se o seu efeito parecer cortado, aumente a região, por exemplo x="-50%" y="-50%" width="200%" height="200%".

Primitivas de Filtro

No SVG, cada elemento <filter> inclui um conjunto de elementos de filtro como seus filhos. Cada primitiva de filtro realiza uma operação gráfica básica em uma ou mais entradas, mas gera apenas um resultado. A entrada é especificada em um atributo chamado in. O resultado da operação é especificado no atributo result. O resultado pode então ser usado como entrada para outras operações. No entanto, se o atributo in for omitido, a primitiva assume SourceGraphic como padrão para a primeira operação, ou o resultado da primitiva anterior para operações encadeadas. Todas as primitivas têm o mesmo prefixo: fe (abreviação de "filter effect"). Elas são nomeadas de acordo com o que um elemento é ou faz. Ex.: a primitiva que aplica um efeito de Desfoque Gaussiano ao gráfico de origem é chamada de feGaussianBlur.

Palavras-Chave de Entrada Especiais

Além de nomear o result de uma primitiva anterior, o atributo in pode referenciar estas entradas integradas:

Nota: BackgroundImage, BackgroundAlpha, FillPaint e StrokePaint fazem parte da especificação, mas têm suporte mínimo ou nenhum nos navegadores atualmente; na prática, você trabalhará com SourceGraphic, SourceAlpha e o result de outras primitivas.

Atualmente existem 17 primitivas de filtro definidas na especificação SVG Filter.

Elementos de Filtro no SVG

Um Exemplo com Uma Única Primitiva

O filtro mais simples tem uma única primitiva. Aqui, feGaussianBlur recebe o SourceGraphic e o desfoca:

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="blue" filter="url(#blur)" />
</svg>

Encadeando Primitivas: uma Sombra

O verdadeiro poder vem do encadeamento. Para construir uma sombra manualmente, pegamos a silhueta do elemento, a empurramos para baixo e para a direita, desfocamos e então colocamos o gráfico original de volta no topo. Siga os atributos result/in para ver a saída de cada etapa fluindo para a próxima:

<svg width="220" height="220">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <!-- 1. Take the alpha (silhouette) of the source -->
      <feOffset in="SourceAlpha" dx="6" dy="6" result="offset" />
      <!-- 2. Blur that offset silhouette -->
      <feGaussianBlur in="offset" stdDeviation="4" result="blur" />
      <!-- 3. Stack the blurred shadow under the original graphic -->
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="20" y="20" width="160" height="160" rx="12"
        fill="#1e88e5" filter="url(#shadow)" />
</svg>

Como os dados fluem:

1. feOffset lê SourceAlpha (a silhueta da forma) e a desloca por dx/dy, escrevendo result="offset".
2. feGaussianBlur lê in="offset" e a suaviza, escrevendo result="blur".
3. feMerge empilha camadas de baixo para cima: primeiro o blur (a sombra), depois o SourceGraphic não desfocado no topo — assim a forma nítida fica sobre sua sombra suave.

Observe a região de filtro ampliada (width="140%" height="140%") para que a sombra deslocada e desfocada não seja recortada.

Para atalhos prontos para uso, consulte a primitiva <feDropShadow> e o capítulo efeitos de desfoque SVG. Uma listagem completa de atributos para cada primitiva está na referência SVG.

Prática