Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG

Introducción a los filtros SVG

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (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:

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:

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:

A continuación, el elemento de filtro, con un identificador:

Ahora tenemos que añadir un elemento al que podamos aplicar nuestros filtros.

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:

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:

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.