Trazado de recorte
Un trazado vectorial cerrado que define el área visible de una imagen, ocultando todo lo que queda fuera. Se usa en producción de impresión y CSS web para recortes precisos.
Un trazado de recorte (clipping path) es un trazado vectorial cerrado que define la región visible de una imagen, haciendo transparente todo lo que queda fuera del trazado. Ha sido un pilar de la producción de impresión durante décadas, incrustado en archivos EPS y PSD para aislar fotos de productos de sus fondos.
Características y limitaciones clave:
- Bordes nítidos: Definidos por vectores, los bordes permanecen nítidos a cualquier escala. Ideal para logotipos y siluetas de productos
- Recorte binario: Dentro del trazado es completamente visible, fuera es completamente oculto. No son posibles bordes con gradientes semitransparentes
- Límites de puntos de ancla: Trazados excesivamente complejos (cientos de puntos) pueden causar errores en el RIP (procesador de imágenes ráster) en flujos de impresión
En desarrollo web, la propiedad CSS clip-path proporciona funcionalidad equivalente:
clip-path: circle(50%)- Recorte circularclip-path: polygon(50% 0%, 100% 100%, 0% 100%)- Recorte triangularclip-path: url(#svgClip)- Referencia a un elemento SVG<clipPath>
Elegir entre trazados de recorte y máscaras: usar trazados de recorte para bordes duros y precisos; usar máscaras cuando se necesiten bordes suaves o límites semitransparentes. Los flujos de impresión siguen estandarizando los trazados de recorte, pero las implementaciones web a menudo prefieren las máscaras por su mayor expresividad.
En SVG, se definen trazados dentro de un elemento <clipPath> y se aplican mediante clip-path="url(#id)". Combinado con transiciones CSS, esto permite efectos de recorte animados que responden a la interacción del usuario sin cálculos JavaScript.