clipPath frente a mask en SVG: elige bordes definidos o fundidos suaves

Usa un <clipPath> SVG cuando quieras que una imagen termine en un contorno definido. Usa un <mask> SVG cuando deba desvanecerse mediante transparencia parcial. Una máscara también puede crear un corte definido, pero un trazado de recorte expresa de forma más sencilla la intención de un borde geométrico definido. La especificación CSS Masking los define como operaciones de visibilidad independientes.

La elección importa cuando una imagen con forma de logotipo va a otro editor. Ambos métodos controlan lo que ves; ninguno convierte los píxeles ocultos en geometría eliminada ni convierte la imagen en trazados vectoriales. Esta guía usa una escena rasterizada original y un contorno y cambia solo la regla de visibilidad. Puedes aplicar la misma prueba a tu ilustración antes de exportar.

Elige según el borde que necesitas

El borde visible de un recorte puede seguir teniendo el suavizado normal de renderizado. Lo que no puede expresar es una banda deliberada de visibilidad parcial mediante un degradado de grises u opacidad dentro de la forma recortada. El tutorial de recorte y máscaras de MDN muestra esa distinción con pequeños ejemplos SVG.

Compara una imagen con tres reglas de visibilidad

Para esta prueba, dibujé un pequeño paisaje, lo rastericé en un PNG de 400 × 240 y coloqué los mismos píxeles bajo el mismo contorno similar a una hoja en cada panel. El panel izquierdo recorta a ese contorno. El central usa una máscara de luminancia de blanco a negro; el derecho, una máscara alfa de opaco a transparente. Ambos degradados se eligieron para crear el mismo fundido de izquierda a derecha. Cada resultado aparece sobre fondos claros y oscuros, lo que facilita evaluar el borde que desaparece.

Las dos columnas de máscaras se parecen por un motivo: el degradado de luminancia de blanco a negro y el degradado de opacidad blanca codifican valores comparables de máscara. No son entradas intercambiables. El negro opaco oculta con una máscara de luminancia, pero sigue visible con una máscara alfa. En modo alfa, la opacidad del píxel determina el resultado; su color negro o blanco no lo hace. La definición de procesamiento de máscaras de CSS Masking especifica ambos cálculos.

Crea el recorte y la máscara a partir de un contorno

Guarda lo siguiente como clip-or-mask.svg, coloca tu propio photo.png junto a él y sirve ambos archivos desde la misma carpeta mediante HTTP. Las dos imágenes usan un sistema de coordenadas de 400 × 240. Solo difieren en clip-path frente a mask.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

Los IDs de referencia deben ser únicos dentro del SVG. Tanto el recorte como la máscara usan userSpaceOnUse para que las coordenadas del motivo se alineen con el área local de 400 × 240 de cada imagen. La referencia de <clipPath> de MDN describe el recorte como una restricción de pintura sin cambiar la geometría inherente del destino. La referencia de <mask> de MDN separa maskUnits, que posiciona la región de máscara, de maskContentUnits, que posiciona su ilustración.

Para probar luminancia, duplica la máscara con otro ID, establece mask-type="luminance" y cambia las paradas del degradado a blanco opaco al inicio y negro opaco al final. Mantén la referencia mask sincronizada con el nuevo ID. Por defecto, un <mask> SVG usa luminancia; este ejemplo nombra el modo para que una edición futura no cambie silenciosamente el significado del negro. Consulta la referencia de mask-type de MDN.

Comprueba el resultado antes de exportar

1. Renderiza el SVG sobre un fondo claro y otro oscuro. Un fundido que parece invisible sobre blanco puede ser evidente sobre oscuro.
2. Confirma que imagen y motivo usan las mismas coordenadas. Si redimensionas solo la imagen, el contorno puede dejar de alinearse. Para recortes reutilizables en destinos de tamaños diferentes, la guía de unidades de clipPath explica las opciones de coordenadas.
3. Si un borde suave termina bruscamente, inspecciona x, y, width y height de la máscara, además del degradado. La región de máscara puede cortar ilustración fuera de sus límites; ampliar solo el degradado no corrige una región estrecha. MDN enumera los valores predeterminados de la región de máscara, pero los límites explícitos son más fáciles de revisar en una entrega.
4. Vuelve a abrir el SVG guardado en la aplicación que lo usará. Un renderizado correcto en navegador no demuestra que otro importador conserve el recorte, máscara, imagen vinculada o editabilidad necesarios.
5. Inspecciona la estructura. Si sigue conteniendo <image>, sigue conteniendo píxeles rasterizados aunque el contorno de recorte sea vectorial. La comprobación de imágenes rasterizadas incrustadas muestra cómo detectar la diferencia.

La imagen de este ejemplo sigue siendo PNG. El recorte y la máscara no la vectorizan. Si el trabajo requiere geometría real de corte o un hueco transparente permanente, crea los trazados correspondientes en tu editor e inspecciona la exportación. La guía para resolver huecos rellenos ayuda a distinguir una abertura real de una zona blanca que solo parece vacía sobre lienzo blanco.

Dónde encaja PerfectVector

Si el contorno necesario solo existe en un logotipo PNG o JPG, el flujo de imagen a vector de PerfectVector puede proporcionar una primera versión SVG editable. Inspecciona su trazado exterior, espacios pequeños y formas de fondo no deseadas antes de copiar un contorno a un <clipPath> o <mask>. Sigues eligiendo el método de visibilidad y creando el efecto en un editor SVG. Conserva un archivo maestro vectorial limpio existente cuando esté disponible.

No necesitas vectorizar una fotografía solo para ponerla detrás de una máscara. Conserva los píxeles fotográficos como imagen cuando importe su detalle. Para un icono de un solo color controlado por CSS en lugar de una imagen dentro de SVG, la guía de máscaras CSS con SVG cubre ese flujo independiente.

Preguntas frecuentes

¿Puede un clipPath SVG crear un fundido gradual? No. Un trazado de recorte define qué partes del destino son visibles, aparte del suavizado normal de su límite. Usa una máscara con valores intermedios de opacidad o luminancia para un fundido deliberado.

¿El negro oculta una imagen en todas las máscaras SVG? No. El negro opaco oculta con luminancia, pero revela con alfa porque el píxel sigue siendo opaco. La ilustración completamente transparente oculta en ambos modos.

¿Recortar o enmascarar convierte un PNG en ilustración vectorial? No. Ambos cambian la visibilidad durante el renderizado. Un SVG puede seguir conteniendo un <image> rasterizado y necesitar vectorización o edición de trazados independiente para una entrega solo vectorial.

Fuentes

1. W3C — CSS Masking Module Level 1 — Definiciones de recorte, máscaras y valores de máscara alfa frente a luminancia.
2. MDN — recorte y máscaras — Ejemplos de recorte definido y máscara suave.
3. MDN — <clipPath> — Comportamiento de recorte, elección de coordenadas y geometría subyacente intacta.
4. MDN — <mask> — Región de máscara, sistema de coordenadas del contenido y comportamiento de referencias.
5. MDN — mask-type — Interpretación alfa y de luminancia de la ilustración de máscara SVG.

Si un logotipo rasterizado necesita primero contornos editables, crea una primera versión SVG con PerfectVector, inspecciona el trazado recuperado, aplica un recorte o máscara y vuelve a abrir el archivo exportado en su destino.