Efectos de filtros SVG: creación de efectos visuales avanzados
Domina los filtros SVG para desenfoque, sombras, efectos de color y tratamientos visuales complejos. Guía completa de primitivas de filtro y combinaciones creativas.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- Los filtros SVG aplican efectos visuales acelerados por GPU como desenfoque, sombra y distorsión directamente en el navegador
- Las primitivas de filtro (feGaussianBlur, feColorMatrix, feTurbulence, etc.) se pueden encadenar para crear efectos complejos
- Recetas creativas como vidrio esmerilado, brillo neón y relieve se construyen combinando primitivas de filtro simples
- El rendimiento varía ampliamente — feColorMatrix es ligero mientras que feTurbulence es computacionalmente pesado
- Usa filtros CSS como alternativa para efectos simples y reserva los filtros SVG para composiciones avanzadas
El poder de los filtros SVG
Los filtros SVG permiten efectos visuales sofisticados sin imágenes rasterizadas. Desde sombras simples hasta distorsiones complejas, los filtros transforman los gráficos vectoriales de maneras poderosas.
Fundamentos de filtros
Estructura del filtro
<defs>
<filter id="myFilter">
<!-- Primitivas de filtro aquí -->
</filter>
</defs>
<rect filter="url(#myFilter)" .../>Región del filtro
Controla los límites del filtro:
<filter id="f" x="-20%" y="-20%" width="140%" height="140%">
<!-- Extiende el área del filtro más allá del elemento -->
</filter>Pro Tip: Siempre extiende la región del filtro (ej: x="-20%") al usar efectos de desenfoque o sombra. Si la salida de tu filtro se ve recortada, la región del filtro es demasiado pequeña.
Efectos de filtro comunes
Desenfoque (feGaussianBlur)
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>Desenfoque variable:
<!-- Solo desenfoque horizontal -->
<feGaussianBlur stdDeviation="10 0"/>
<!-- Solo desenfoque vertical -->
<feGaussianBlur stdDeviation="0 10"/>Sombra paralela (feDropShadow)
Sombra simple:
<filter id="shadow">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.5"/>
</filter>Sombra personalizada
Más control:
<filter id="custom-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offset"/>
<feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
<feComposite in="color" in2="offset" operator="in" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealEfectos de color
Matriz de color (feColorMatrix)
Conversión a escala de grises:
<filter id="grayscale">
<feColorMatrix type="saturate" values="0"/>
</filter>Tono sepia:
<filter id="sepia">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"/>
</filter>Rotación de matiz:
<filter id="hue-rotate">
<feColorMatrix type="hueRotate" values="90"/>
</filter>Ajuste de color
Brillo/contraste:
<filter id="bright">
<feComponentTransfer>
<feFuncR type="linear" slope="1.5" intercept="0"/>
<feFuncG type="linear" slope="1.5" intercept="0"/>
<feFuncB type="linear" slope="1.5" intercept="0"/>
</feComponentTransfer>
</filter>"Los filtros SVG son el Photoshop del navegador — capéalos con cuidado y podrás crear efectos que de otro modo requerirían un software de edición de imágenes pesado.
Desplazamiento y distorsión
Turbulencia
Creación de ruido:
<filter id="turbulence">
<feTurbulence type="turbulence"
baseFrequency="0.05"
numOctaves="2"/>
</filter>Mapa de desplazamiento
Distorsión con patrón:
<filter id="displace">
<feTurbulence type="turbulence"
baseFrequency="0.02"
numOctaves="3"
result="noise"/>
<feDisplacementMap in="SourceGraphic"
in2="noise"
scale="30"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>Efectos de iluminación
Iluminación difusa
Iluminación tipo 3D:
<filter id="diffuse">
<feDiffuseLighting lighting-color="#white" surfaceScale="5">
<fePointLight x="100" y="100" z="200"/>
</feDiffuseLighting>
</filter>Iluminación especular
Reflejos brillantes:
<filter id="specular">
<feSpecularLighting specularConstant="1"
specularExponent="30"
lighting-color="white"
surfaceScale="5">
<fePointLight x="150" y="60" z="200"/>
</feSpecularLighting>
</filter>Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeCombinar filtros
Operaciones de fusión
Superposición de resultados:
<filter id="glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>Operaciones de composición
Combinar con operadores:
<filter id="cutout">
<feImage href="mask.svg" result="mask"/>
<feComposite in="SourceGraphic"
in2="mask"
operator="in"/>
</filter>Recetas creativas
Vidrio esmerilado
<filter id="frosted">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feColorMatrix in="blur" type="saturate" values="1.5" result="saturate"/>
<feTurbulence type="fractalNoise" baseFrequency="0.1" result="noise"/>
<feDisplacementMap in="saturate" in2="noise" scale="5"/>
</filter>Brillo neón
<filter id="neon">
<feFlood flood-color="#ff00ff" result="flood"/>
<feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
<feGaussianBlur in="mask" stdDeviation="5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>Efecto de relieve
<filter id="emboss">
<feConvolveMatrix
order="3"
kernelMatrix="-2 -1 0
-1 1 1
0 1 2"/>
</filter>
Animación con filtros
Desenfoque animado
<filter id="animated-blur">
<feGaussianBlur stdDeviation="0">
<animate attributeName="stdDeviation"
values="0;10;0"
dur="2s"
repeatCount="indefinite"/>
</feGaussianBlur>
</filter>Turbulencia dinámica
<feTurbulence baseFrequency="0.02">
<animate attributeName="baseFrequency"
values="0.01;0.05;0.01"
dur="5s"
repeatCount="indefinite"/>
</feTurbulence>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealConsideraciones de rendimiento
Impacto en el rendimiento
Rendimiento de filtros:
feGaussianBlur: Pesado (depende del radio)
feColorMatrix: Ligero
feTurbulence: Muy pesado
feDisplacementMap: Pesado
Filtros encadenados: AcumulativoConsejos de optimización
- Minimizar la región del filtro
- Reducir el radio de desenfoque
- Limitar los efectos encadenados
- Cachear filtros estáticos
- Usar filtros CSS cuando sea posible
Para efectos simples como desenfoque, escala de grises o sombra paralela, el filter de CSS es significativamente más rápido que los filtros SVG porque aprovecha el compositing acelerado por hardware. Reserva los filtros SVG para efectos que CSS no puede replicar.
Alternativa con filtros CSS
Cuando sea posible, usa CSS:
.blurred {
filter: blur(5px);
}
.grayscale {
filter: grayscale(100%);
}Compatibilidad con navegadores
Estado del soporte
Soporte amplio:
- feGaussianBlur
- feColorMatrix
- feOffset
- feMerge
Soporte variable:
- feDisplacementMap
- feTurbulence
- feDiffuseLightingEstrategias de respaldo
.element {
/* Respaldo */
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
@supports (filter: url(#shadow)) {
.element {
box-shadow: none;
filter: url(#shadow);
}
}Conclusión
Los filtros SVG permiten efectos sofisticados imposibles solo con CSS. Aunque son computacionalmente intensivos, ofrecen un control preciso sobre los tratamientos visuales. Úsalos con criterio para efectos impactantes, siempre considerando el rendimiento y proporcionando alternativas de respaldo.
Crear efectos vectoriales filtrados
| Primitiva de filtro | Efecto | Coste de rendimiento |
|---|---|---|
| feGaussianBlur | Desenfoque suave / vidrio esmerilado | Medio (acelerado por GPU) |
| feColorMatrix | Cambio de color, desaturación | Bajo |
| feTurbulence | Ruido, texturas orgánicas | Alto (cálculo a nivel de píxel) |
| feDisplacementMap | Distorsión, efectos de ondulación | Alto |
| feDropShadow | Sombras paralelas | Bajo–Medio |
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeFuentes y lecturas adicionales
- MDN Web Docs: Efectos de filtros SVG — Referencia detallada para cada primitiva de filtro SVG y sus atributos
- W3C SVG 2: Efectos de filtro — Especificación oficial del pipeline de filtros SVG y modelo de composición
- CSS-Tricks: Filtros SVG — Ejemplos visuales y recetas para combinaciones creativas de filtros SVG
- Smashing Magazine: Filtros SVG — Tutoriales avanzados sobre encadenamiento de primitivas de filtro para efectos visuales en producción