() translation by (you can also view the original English article)
En este tutorial vamos a explorar el mundo de los filtros SVG. Con los filtros SVG puedes crear efectos de texto únicos, efectos de imagen, y con un poco de JavaScript algunos efectos fractales dinámicos realmente interesantes.
Vídeo: Filtros SVG
En este tutorial
Esto es lo que veremos:
- ¿Qué son los filtros SVG?
- El elemento de filtro y las primitivas de filtro
- Aplicación de un efecto de filtro SVG (Ejemplo)
- Soporte del navegador
¿Qué son los filtros SVG?
Para entender qué son los filtros SVG, echemos primero un vistazo a los filtros CSS. En CSS tenemos ciertas funciones que podemos usar para añadir desenfoque, sombras paralelas y modificaciones de color (como cambiar el tono, la saturación, el brillo, etc.). Puedes obtener más información sobre estos filtros CSS en los siguientes tutoriales:
CSS3Edición de imágenes en CSS: Filtros
CSSDos formas de crear un efecto de vidrio esmerilado en CSS
CSSCómo aplicar filtros de Instagram en el navegador usando CSS puro
Los filtros CSS son estupendos, pero son bastante limitados. Realmente sólo se pueden utilizar ampliamente con imágenes de mapa de bits, y lo que puedes hacer es bastante simple. Si necesitas algo más avanzado, en su lugar tienes que dirigir tu atención a los filtros SVG.
Nota: Los filtros CSS son realmente un subconjunto de los filtros SVG. Lo creas o no, ¡los filtros SVG han existido desde 2007!
Se oye hablar con mayor frecuencia de los filtros CSS porque son más fáciles de implementar. Sin embargo, si con los filtros CSS podríamos aplicar un desenfoque a una imagen, con los filtros SVG podemos aplicar un desenfoque horizontal, así como otros tipos de efectos.
Importante: Los filtros SVG se pueden aplicar a cualquier elemento HTML.
El elemento de filtro y las primitivas de filtro
Para crear filtros SVG utilizamos el elemento filter() y funciones especiales que llamamos primitivas de filtro. Comenzamos con un <svg> y definimos un filtro (con un ID) dentro de él:
1 |
<svg>
|
2 |
<filter id="demofilter"> |
3 |
... |
4 |
</filter>
|
5 |
|
6 |
<img xlink:href="" width="100" height="100" x="0" y="0" filter="url(demoFilter)"/> |
7 |
</svg>
|
Dentro del filtro añadimos las primitivas de filtro concretas que necesitemos (más sobre esto en un momento) y finalmente creamos los elementos sobre los que queremos influir usando el atributo filter="" y haciendo referencia al ID que hemos creado antes.
Primitivas
Actualmente existen 17 primitivas que podemos usar:
<feGaussianBlur><feDropShadow><feMorphology><feDisplacementMap><feBlend><feColorMatrix><feConvolveMatrix><feComponentTransfer><feSpecularLighting><feDiffuseLighting><feFlood><feTurbulence><feImage><feTile><feOffset><feComposite><feMerge>
Observa el prefijo fe en todos ellas. Significa efecto de filtro, de las siglas del ingles "filter effect". Estas primitivas nos permiten crear efectos simples como sombras paralelas, pero también efectos similares a los de Photoshop como mezclas de color, mapas de desplazamiento y mucho más.
Aplicar un efecto de filtro SVG
Empieza con un elemento <svg>, dale algunas dimensiones (estas coinciden con las dimensiones de una imagen que voy a usar) y un viewbox:
1 |
<svg width="1000" height="577" viewBox="0 0 1000 577"> |
2 |
</svg>
|
A continuación, el elemento de filtro, con un identificador:
1 |
<svg width="1000" height="577" viewBox="0 0 1000 577"> |
2 |
<filter id="demoFilter"> |
3 |
|
4 |
</filter>
|
5 |
</svg>
|
Ahora tenemos que añadir un elemento al que podamos aplicar nuestros filtros.
1 |
<svg width="1000" height="577" viewBox="0 0 1000 577"> |
2 |
<filter id="demoFilter"> |
3 |
|
4 |
</filter>
|
5 |
|
6 |
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/17119/redcharlie-k2zWqv_yfNM-unsplash.jpg" width="100%" height="100%" x="0" y="0" filter="url(#demoFilter)"/> |
7 |
</svg>
|
Primitivas
Después dentro de nuestro <filter> colocamos algunas primitivas de filtro. Me gustaría añadir primero un filtro de color, y después un filtro de modo de fusión. Así que el primero utiliza la primitiva feFlood:
1 |
<feFlood flood-color="#2da0fb" flood-opacity="1" result="FLOOD"/> |
Aquí hemos definido un color, una opacidad y el resultado (que definimos como FLOOD). ¿Cuál es el resultado? Los filtros SVG se pueden combinar, por lo que podemos usar el ID que definimos aquí como una entrada para otra primitiva. Vamos a añadir ahora nuestra segunda primitiva:
1 |
<feBlend mode="color-burn" in="SourceGraphic" in2="FLOOD" result="BLEND"/> |
Este feBlend nos permite definir un modo de fusión, y luego dos datos de entrada. Nuestros datos de entrada son SourceGraphic (que es el elemento al que estamos aplicando todo esto) y FLOOD (que es la primera primitiva que habíamos definido.
Nota: las mayúsculas de este ejemplo no son obligatorias, pero me gusta poder distinguir visualmente estos valores mientras trabajo.
Esto es con lo que terminamos (¡bifúrcalo y juega tú mismo!):
Para ver más ejemplos, visualiza el video anterior. En él, creamos lo siguiente:
Conclusión
¡Eso es todo! Los filtros SVG son muy potentes, así que ponte en marcha y empieza a jugar. Te sorprenderá lo que puedes crear.
En términos de soporte del navegador, ¡es posible que te sorprendas al saber que los filtros SVG son realmente más compatibles que los filtros CSS! Ten en cuenta, sin embargo: mientras que diferentes navegadores pueden admitir características de filtro SVG, es posible que difieran en la forma en que representan los resultados finales.
Más lecturas
