Filtros SVG: cómo aplicarlos a elementos HTML

Puede usar CSS3 para agregar desenfoque, sombra, brillo o contraste a un elemento. En general, hay diez filtros disponibles. El formato SVG también conoce los efectos de filtro. Parcialmente, estas opciones se superponen, por ejemplo, cuando se trata de desenfoque. Sin embargo, el formato SVG conoce varios filtros adicionales que CSS3 por sí solo no puede crear. Con poco esfuerzo, puede agregar cualquier filtro SVG que desee a un elemento HTML.

Estos filtros SVG existen

Mientras que CSS3 tiene un total de diez filtros diferentes, el formato SVG ofrece 19 de ellos. Por ejemplo, está ««, que mezcla píxeles en una imagen con píxeles adyacentes. Esto crea un efecto borroso similar al desenfoque de movimiento en Photoshop. El uso de «» le permite aplicar un desenfoque gaussiano, mientras que «» se asegura de que los píxeles de una imagen sean más delgados o gruesos.

Imagen original y el filtro «» aplicado

Puede usar el filtro «» para diferentes manipulaciones de color, por ejemplo, para alterar la saturación, el tono y el brillo de una imagen. Los dos filtros «» y «» le permiten agregar efectos de iluminación como luz difusa o reflejada a una imagen. Con ««, «» o ««, puede definir diferentes fuentes de luz.

Imagen con filtro de iluminación

Hay varios otros filtros, algunos de los cuales son bastante poco espectaculares, ««, que solo mueve una imagen, y algunos de los cuales son bastante especiales, como ««, que crea turbulencias y fractales.

Creación y aplicación de filtros SVG

Si desea aplicar filtros SVG a cualquier elemento HTML, todo lo que necesita hacer es configurar el filtro a través de SVG. Esto debe hacerse dentro de la sección ««. Está hecho para elementos como patrones, flujos o filtros, es decir, elementos que no son visibles pero que se aplican a otros elementos. Además, los filtros deben colocarse dentro del elemento ««.

<svg>
  <defs>
    <filter id="blurryexample">
      <feConvolveMatrix order="20, 1" kernelMatrix="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" />
    </filter>
  </defs>
</svg>

En el ejemplo, se establece el filtro ««. El atributo «orden» define cuántos píxeles adyacentes en los ejes x e y deben incluirse. En el ejemplo, solo se mezclan los píxeles en el eje x, lo que crea un desenfoque de movimiento. Los valores definidos por «orden» forman una matriz: 20 veces 1 píxel en este ejemplo. «kernelMatrix» se utiliza para definir los valores de cada píxel de la matriz. Como nuestra matriz solo consta de una línea, es necesario definir 20 valores para esta línea. Los valores para otras líneas se establecerán divididos por una coma.

Imagen con desenfoque de movimiento

El filtro necesita una ID para ser aplicable a otros elementos dentro del documento HTML. Luego, debe transferir la ID del filtro SVG al atributo «filter()» de CSS3.

img {
  filter: url(#motionblur);
}

En el ejemplo, el filtro se aplica a todos los elementos ««. Debe tener en cuenta el hecho de que el atributo «filtro» solo funciona con un prefijo de proveedor adecuado en algunos navegadores. Si bien los navegadores modernos como Chrome y Firefox admiten la opción de aplicar filtros SVG a cualquier elemento, esto no funciona en Internet Explorer y el nuevo navegador Edge de Microsoft (todavía).

Combinar filtros y aplicarlos a los textos

Por supuesto, también puedes combinar filtros. Para hacerlo, simplemente configure múltiples filtros dentro de un elemento ««.

Imagen con desenfoque de movimiento y cambios de tono

<svg>
  <defs>
    <filter id="motionblur_huevalue">
      <feConvolveMatrix order="20, 1" kernelMatrix="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" />
      <feColorMatrix type="hueRotate" values="-90" />
    </filter>
  </defs>
</svg>

En el ejemplo, se combinan los filtros «» y ««. Este último se asegura de que la rotación de tono («hueRotate») de 90 grados se logre a través de «tipo».

Texto con desenfoque de movimiento

Como se mencionó al principio, los filtros no solo funcionan para imágenes, sino para todos los elementos HTML. Esto le permite crear efectos de texto interesantes. Cuando se aplica a un encabezado, por ejemplo, podría obtener un efecto de desenfoque de movimiento.

Ejemplos en Codepen

• Filtro SVG: Desenfoque de movimiento
• Filtro SVG: desenfoque de movimiento y rotación de tono
• Filtro SVG: Iluminación

(dpe)