Clip Path SVG para recortes creativos de imágenes

Introducción

El recorte de imágenes es una técnica fundamental en el diseño web moderno, pues permite mostrar partes específicas de recursos gráficos sin necesidad de editar el archivo original. Una de las soluciones más potentes y flexibles es SVG clip-path, que ofrece control vectorial sobre la forma del recorte. En este artículo exploraremos en detalle cómo funciona clip-path en SVG, sus sintaxis, usos prácticos y consejos para crear recortes creativos y accesibles.

¿Qué es clip-path en SVG

El atributo clip-path define una región (un recorte) que limita la parte visible de un elemento SVG o un elemento HTML al que se aplica. Fuera de esa región, el contenido queda oculto. A diferencia de recortes basados en máscaras de píxel (mask), clip-path emplea primitivas vectoriales, lo cual aporta ventajas de escalabilidad y precisión.

En CSS, también existe una propiedad homónima que permite aplicar la misma lógica a elementos HTML. Sin embargo, al trabajar con SVG se dispone de una mayor variedad de formas y rutas personalizadas.

Sintaxis básica

La forma general de uso en SVG es:

ltsvggt
  ltclipPath id=miClipgt
    ltrect x=0 y=0 width=200 height=200 /gt
  lt/clipPathgt

  ltimage href=imagen.jpg clip-path=url(#miClip) /gt
lt/svggt
  

Para CSS en HTML (niveles moderados de soporte):

ltdiv class=caja style=
  clip-path: circle(50% at 50% 50%)
gt
  ltimg src=imagen.jpg alt=Ejemplo /gt
lt/divgt
  

Formas básicas de clip-path

SVG proporciona varias primitivas predefinidas para definir regiones de recorte:

• ltrectgt: rectángulo.
• ltcirclegt: círculo.
• ltellipsegt: elipse.
• ltpolygongt: polígono con vértices definidos.
• ltpathgt: ruta arbitraria (el más flexible).

Primitiva	Atributos principales	Descripción
ltrectgt	x, y, width, height, rx, ry	Rectángulo, opcionalmente con esquinas redondeadas.
ltcirclegt	cx, cy, r	Círculo centrado en (cx, cy).
ltellipsegt	cx, cy, rx, ry	Elipse centrada.
ltpolygongt	points	Polígono con vértices definidos.
ltpathgt	d	Ruta arbitraria (movimientos, líneas, curvas).

Valores CSS para recortes simples

En CSS también se pueden usar funciones integradas, si bien no todas tienen equivalente SVG directo:

• circle(radio at x y)
• ellipse(rx ry at x y)
• inset(top right bottom left round rx ry)
• polygon(x1 y1, x2 y2, ...)

Uso práctico con imágenes

Para recortar imágenes en HTML con clip-path y SVG incrustado:

En CSS puro (soporte moderno):

Recortes complejos con rutas personalizadas

La capacidad de SVG ltpathgt permite recortes arbitrarios:

ltclipPath id=clip-wave clipPathUnits=objectBoundingBoxgt
  ltpath d=M0,0.3 C0.25,0.5 0.75,0.1 1,0.3 L1,1 L0,1 Z /gt
lt/clipPathgt

ltimage href=imagen.jpg width=400 height=300
       clip-path=url(#clip-wave) /gt
  

En este ejemplo el atributo clipPathUnits=objectBoundingBox escala la ruta en proporción al contenedor.

Compatibilidad y consideraciones

• La mayoría de navegadores modernos soportan clip-path en CSS (Chrome, Firefox, Safari, Edge).
  Consulta: Can I Use: clip-path
• Para SVG nativo, el soporte es casi universal. Ojo con versiones antiguas de IE.
• Los clipPathUnits pueden ser userSpaceOnUse (coordenadas absolutas) o objectBoundingBox (coordenadas relativas [0–1]).
• En HTML, algunas funciones CSS (especialmente path()) tienen soporte parcial. Ver MDN clip-path.

Herramientas y generadores

Existen editores visuales que facilitan la creación de clip-path sin escribir rutas manuales:

• Clippy: generador CSS de clip-path.
• SVG Path Editor: editor de rutas SVG.

Buenas prácticas

1. Optimizar rutas: elimina comandos innecesarios y minimiza puntos.
2. Accesibilidad: provee alt o texto alternativo para imágenes recortadas.
3. Fallback: ofrece estilo alternativo (border-radius, overflow: hidden) para navegadores no compatibles.
4. Rendimiento: usa clipPathUnits=objectBoundingBox para escalado automático y evita múltiples definiciones innecesarias.

Ejemplos avanzados

A continuación un ejemplo de combinación de animaciones con clip-path:

Recursos y enlaces fiables

• MDN: SVG ltclipPathgt
• MDN: CSS clip-path
• SVG2 Specification: clip-path

Con estas herramientas, consejos y ejemplos, podrás aprovechar al máximo SVG clip-path para crear recortes creativos, responsivos y accesibles en tus proyectos web.