O que você vai aprender

Editar filtros SVG no XML para criar efeitos personalizados
Combinar primitivas de filtro: feGaussianBlur, feColorMatrix, feComposite, feMerge
Criar efeitos de iluminação 3D com feDiffuseLighting e feSpecularLighting
Otimizar filtros para performance: reduzir primitivas e resoluções

Filtros SVG - Avançado🔗

Primitivos de Filtro🔗

Composition🔗

Primitivo	Uso
FeComposite	Combina camadas (over, in, out, atop, xor)
FeBlend	Mistura duas imagens
FeMerge	Empilha múltiplos resultados

Iluminação🔗

Primitivo	Uso
FeDiffuseLighting	Luz difusa
FeSpecularLighting	Luz especular
FePointLight	Luz pontual
FeDistantLight	Luz distante (sol)
FeSpotLight	Holofote

Ruído🔗

Primitivo	Uso
FeTurbulence	Ruído Perlin
FeDisplacementMap	Deslocamento baseado em mapa

Criar Filtro Customizado🔗

Exemplo: Sombra Realista🔗

FeGaussianBlur (desfoque)
FeOffset (deslocamento)
FeColorMatrix (escurecer)
FeMerge (combinar com original)

Dicas de Desenvolvimento🔗

Use Resultado nomeado para debug
Primitivos são processados em ordem
Ordem afeta o resultado final

displacementMap🔗

Desloca pixels baseado em um mapa de cores.

Parâmetros🔗

Scale: Intensidade do deslocamento
XChannelSelector: Canal R/G/B/A para X
YChannelSelector: Canal R/G/B/A para Y

Uso Comum🔗

Efeito de distorção de calor
Texturas orgânicas
Ondas

Turbulence🔗

Gera ruído Perlin para texturas.

Parâmetros🔗

Type: turbulence ou fractalNoise
BaseFrequency: Frequência do ruído
NumOctaves: Complexidade
Seed: Semente aleatória

Aplicações🔗

Madeira
Mármore
Nuvens
Texturas de papel

Combine FeTurbulence + FeDisplacementMap para criar efeitos de água ou vidro distorcido.

Você aprendeu

Editar filtros no XML (Shift+Ctrl+X) dá controle total sobre primitivas e parâmetros
Primitivas de filtro podem ser encadeadas: blur → colorMatrix → composite → merge
Filtros complexos impactam performance
testar em hardware real antes de usar em produção

Referências🔗