Sombras SVG

<defs> e <filtro>

Todos os filtros SVG são definidos dentro de um elemento <defs>. O elemento <defs> é a abreviação de definições e contém a definição de elementos especiais (como filtros).

O elemento <filter> é usado para definir um filtro SVG. O elemento <filter> possui um atributo id obrigatório que identifica o filtro. O gráfico então aponta para o filtro a ser usado.

SVG <feOffset>

Exemplo 1

O elemento <feOffset> é usado para criar efeitos de sombra projetada. A ideia é pegar um gráfico SVG (imagem ou elemento) e movê-lo um pouco no plano xy.

O primeiro exemplo desloca um retângulo (com <feOffset>) e, em seguida, mescla o original na parte superior da imagem deslocada (com <feBlend>):

Segue o código SVG:

Explicação do código:

• O atributo id do elemento <filter> define um nome exclusivo para o filtro
• O atributo de filtro do elemento <rect> vincula o elemento ao filtro "f1"

Exemplo 2

Agora, a imagem offset pode ser desfocada (com <feGaussianBlur>):

Segue o código SVG:

Explicação do código:

• O atributo stdDeviation do elemento <feGaussianBlur> define a quantidade de desfoque

Exemplo 3

Agora, faça a sombra preta:

Segue o código SVG:

Explicação do código:

• O atributo in do elemento <feOffset> é alterado para "SourceAlpha", que usa o canal Alpha para o desfoque em vez de todo o pixel RGBA

Exemplo 4

Agora, trate a sombra como uma cor:

Segue o código SVG:

Explicação do código:

• O filtro <feColorMatrix> é usado para transformar as cores na imagem offset mais próximas do preto. Os três valores de '0,2' na matriz são multiplicados pelos canais vermelho, verde e azul. Reduzir seus valores aproxima as cores do preto (preto é 0)