Introducción a los filtros SVG

Actualmente, CSS proporciona una forma de aplicar efectos de color a imágenes (por ejemplo, luminosidad, saturación, contraste, etc.) mediante la propiedad filter. Sin embargo, los filtros CSS son limitados. Los efectos creados con ellos suelen ser aplicables a imágenes, pero se limitan a la manipulación del color y al desenfoque. Para crear efectos potentes, necesitaremos otras funciones. Estas funciones están disponibles en SVG.

Los filtros SVG agregan varios efectos a los gráficos SVG.

Primitivas de filtro

En SVG, cada elemento <filter> incluye un conjunto de elementos de filtro como hijos. Cada primitiva de filtro realiza una operación gráfica básica sobre una o más entradas, pero solo produce un resultado. La entrada se especifica en un atributo llamado in. El resultado de la operación se especifica en el atributo result. El resultado luego puede usarse como entrada para otras operaciones. Sin embargo, si se omite el atributo in, la primitiva toma por defecto SourceGraphic para la primera operación, o el resultado de la primitiva anterior para operaciones encadenadas. Todas las primitivas tienen el mismo prefijo: fe (abreviatura de “filter effect”). Se nombran según lo que es o hace un elemento. Por ejemplo, la primitiva que aplica un efecto de desenfoque gaussiano al gráfico de origen se llama feGaussianBlur.

Además de usar el resultado de otras primitivas como entrada, una primitiva de filtro también puede aceptar otras entradas como SourceGraphic (un elemento al que se aplica todo el filtro) y SourceAlpha (igual que SourceGraphic, pero este gráfico contiene solo el canal alfa del elemento).

Actualmente, existen 17 primitivas de filtro definidas en la especificación de filtros SVG.

Elementos de filtro en SVG

Elemento	Descripción
<feBlend>	Mezcla dos objetos utilizando los modos de fusión estándar en software de imagen.
<feColorMatrix>	Aplica una transformación de matriz.
<feComponentTransfer>	Realiza un remapeo componente por componente de los datos.
<feComposite>	Combina dos imágenes de entrada píxel por píxel en el espacio de imagen.
<feConvolveMatrix>	Aplica un efecto de filtro de convolución de matriz.
<feDiffuseLighting>	Ilumina una imagen usando el canal alfa como mapa de relieve.
<feDisplacementMap>	Usa los valores de píxel de la entrada in2 para desplazar la imagen de entrada in.
<feFlood>	Crea un rectángulo relleno con los valores de opacidad y color de las propiedades flood-opacity y flood-color.
<feGaussianBlur>	Aplica un desenfoque gaussiano a la imagen de entrada.
<feImage>	Hace referencia a un gráfico externo que se carga o renderiza en un mapa de bits RGBA, convirtiéndose en el resultado de la primitiva.
<feMerge>	Mezcla las capas de la imagen de entrada.
<feMorphology>	Realiza un "adelgazamiento" o "engrosamiento".
<feOffset>	Desplaza la imagen de entrada.
<feSpecularLighting>	Ilumina un gráfico de origen usando el canal alfa como mapa de relieve.
<feTile>	Rellena un rectángulo objetivo con un patrón repetido de una imagen de entrada.
<feTurbulence>	Crea una imagen con la función de turbulencia de Perlin.
<feDropShadow>	Crea un efecto de sombra proyectada.

Ejemplo de uso

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="blue" filter="url(#blur)" />
</svg>

Práctica

¿Qué permite hacer el Filtro SVG en HTML?

El Filtro SVG permite cambiar las propiedades de las imágenes y los textos.El Filtro SVG se utiliza para ejecutar bucles en HTML.El Filtro SVG permite agregar efectos como desenfoque, brillo, contraste, etc., a un gráfico SVG.El Filtro SVG se utiliza para modificar atributos CSS.