SVG: Diferencias entre Clipping y Masking

Buenos días a todos,

 

Los SVG son excelentes para trabajar en la web, y el Clipping (recorte) y el Masking (enmascaramiento) tienen la capacidad de ocultar total o parcialmente partes de un objeto mediante el uso de formas simples o complejas.  

 

El uso de estas técnicas también permite una mayor flexibilidad con sus diseños, ya que no tiene que hacer cambios manualmente y crear nuevas imágenes, todo se hace con código. Al usar una combinación de técnicas de enmascaramiento y recorte CSS, tendrás muchas opciones para los gráficos de su sitio web. 

 

¿Cuál es la diferencia entre recortar y enmascarar? Vamos a echar un vistazo a cada uno para obtener una mejor comprensión.

 

Clipping: recortar

Clipping se refiere a eliminar partes de elementos definidos por otras partes.

El clipping (trazado de recorte) es un objeto donde todo lo que está dentro de la forma definida es visible, mientras que la parte exterior se «recorta» y no aparece en el lienzo. En este caso, los efectos semitransparentes no son posibles, es un enfoque de todo o nada.  El limite de la forma se llama clip path, no se debe confundir con la propiedad clip.  Creas un «trazado de recorte» utilizando la propiedad <clip-path>.

 

 

 

La forma final corresponde al código siguiente, en el cual se puede ver que se hace referencia al ID del clipPath en el HTML y cómo utiliza la URL del clip-path para hacer el recorte.

 

 

 

 

Herramienta para el clipping

 

Para ayudarnos a crear formas complejas, existe una herramienta online, que se llama Clippy, es muy fácil de uso y os la recomiendo:

 

 

 

Masking: enmascaramiento

El masking, por otro lado, permite bordes suaves teniendo en cuenta la transparencia y los valores grises de la máscara.

El masking se realiza utilizando una imagen PNG, un degradado CSS o un elemento SVG para ocultar parte de una imagen u otro elemento en la página. Hoy veremos los gráficos SVG, pero tenga en cuenta que esto se puede hacer con otros tipos de estilos de imágenes.

En el código siguiente, tenéis un ejemplo de una mascara, de estilo degradado.

 

 

 

 

 

La propiedad mask y el elemento mask

Para ayudar a visualizar, es importante tener en cuenta que el elemento enmascarado es la imagen original. 

Es posible que no desee ver la imagen entera, por lo que ocultar partes se realiza con la propiedad mask en CSS. Mask es la abreviatura en CSS para un grupo de propiedades individuales.

El elemento <mask> se usa dentro de un gráfico SVG para agregar efectos de enmascaramiento.

 

Usar el elemento de mascara SVG en un gráfico SVG

Para tener una idea del elemento <mask> de SVG, estaremos enmascarando con un gráfico SVG.

Puede ser un poco complejo a primera vista, pero todo funciona en conjunto para enmascarar la imagen subyacente. Tenemos una imagen real como fondo, entonces, ¿dónde entra en juego el SVG? Esta imagen de fondo está técnicamente dentro de un elemento SVG. Utilizaremos CSS para aplicar esta máscara a la imagen. Las propiedades provendrán del elemento mask de SVG, y le daremos la identificación class de masked-element en nuestro CSS. 

 

 

 

Con este CSS, estamos especificando dónde encontrar la máscara. Buscará la ID de #mask-this:

 

 

 

¿Nota un gradiente en la forma del círculo? Se ha aplicado un degradado, así como establecer la forma del círculo para la máscara. 

 

 

 

 

Soporte de los navegadores

Antes de comprometerse con esta nueva forma de trabajar con gráficos, es importante tener en cuenta que el soporte de los navegadores. El recorte es más compatible que el enmascaramiento. No permita que las limitaciones te desanimen: siempre es bueno estar a la vanguardia y una vez que el soporte sea más convencional, sabrá exactamente cómo revolucionar sus gráficos. En caso de duda, consulte el sitio Can I Use para comprobar el soporte. 

 

En este articulo hemos visto unos ejemplos para una introducción al enmascaramiento y recorte. Como has podido comprobar las propiedades clip-path y mask, nos dan muchas posibilidades en diseño web. Por eso os animo a poner el clipping y el masking en practica y en un proximo articulo veremos más del making y de los efectos que se pueden conseguir con esta técnica.

 

Saludos y hasta el próximo articulo!