Recorta un SVG de forma permanente, sin trazados ocultos

Para recortar permanentemente una ilustración SVG con rellenos, intersecta cada forma prevista con la región de recorte y exporta solo la geometría resultante. Guarda por separado un maestro editable. Un viewBox más pequeño o un trazado de recorte pueden cambiar lo que ves y dejar en el archivo los trazados exteriores originales.

Nuestro ejemplo usa cuatro objetos poligonales originales, opacos y cerrados, y un recorte rectangular. Un objeto contiene una abertura real. Recortamos los objetos por separado para conservar sus rellenos y orden de pintado, guardamos el resultado como SVG y reabrimos ese archivo real para comprobarlo. Es un flujo geométrico acotado, no un método general para recortar cualquier efecto SVG ni producir archivos probados para cortadoras.

Decide si necesitas ocultar o eliminar la ilustración

El recorte mediante clip es útil si quieres ajustarlo más adelante. La referencia de recorte de MDN distingue el resultado renderizado de la geometría subyacente del elemento. Eliminar la relación de recorte puede volver a mostrar la ilustración original.

El recorte permanente cambia la geometría que entregas. Úsalo cuando la siguiente persona necesite las propias formas delimitadas y conserva el original sin recortar como maestro independiente.

Eliminar todos los elementos invisibles es otra tarea. Una forma de recorte, un recurso de máscara o un símbolo referenciado pueden ser necesarios aunque no se pinten directamente. Nuestra guía de clip-path y máscaras explica esas relaciones de renderizado; la guía de coordenadas de recorte trata sus sistemas de coordenadas.

Empieza con rellenos cerrados identificables

Necesitas un original editable, una región de recorte definida y una forma de inspeccionar el SVG guardado. Este ejemplo ejecuta Paper.js 0.12.18 en un navegador. Trabaja con rellenos poligonales sólidos, totalmente opacos y sin trazos. Los operandos son objetos Path o CompoundPath, no grupos importados arbitrarios.

El original contiene un marco verde azulado con una abertura rectangular, un triángulo naranja, un rombo morado y un pequeño objeto amarillo completamente fuera del recorte. El rectángulo de recorte empieza en (60, 40) y mide 160 × 120 unidades de usuario SVG. Son coordenadas creadas para el ejemplo, no dimensiones físicas de impresión.

La abertura del marco pertenece a un trazado compuesto. No separes sus contornos en objetos rellenos sin relación solo para recorrerlos en un bucle. La guía de huecos SVG explica por qué un parche blanco y una abertura transparente real se comportan de manera distinta.

Guarda este ejemplo original como source.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="220" viewBox="0 0 300 220">
  <path id="frame" fill="#39786E" fill-rule="evenodd"
        d="M20 20H160V180H20Z M85 70V100H115V70Z"/>
  <path id="triangle" fill="#DE9252"
        d="M150 0L270 110L150 200Z"/>
  <path id="leaf" fill="#80618E"
        d="M180 130L240 150L180 190L120 150Z"/>
  <path id="outside" fill="#D4B35E" d="M250 10H280V30H250Z"/>
</svg>

Intersecta cada objeto y conserva solo su resultado

Una intersección conserva el área compartida por el objeto y el recorte. La documentación de intersect() de Paper.js describe un nuevo elemento de trazado que contiene la intersección. Aquí trace: true trata ambos operandos como áreas. Esta opción se refiere a la geometría booleana; no convierte una imagen ráster en vectores. Usamos insert: false para que ni el maestro importado ni el auxiliar de recorte entren automáticamente en la escena exportada.

Para reproducir el ejemplo localmente, instala la versión fijada de la biblioteca en una carpeta de trabajo vacía:

npm install --save-exact paper@0.12.18

Guarda lo siguiente como index.html, junto a source.svg y al archivo crop.js de abajo:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Permanent SVG crop</title>
<canvas id="work" width="300" height="220" hidden></canvas>
<p id="status">Running crop…</p>
<pre id="svg-output"></pre>
<pre id="receipt"></pre>
<script src="node_modules/paper/dist/paper-full.min.js"></script>
<script src="crop.js"></script>
</html>

Guarda esto como crop.js. Sirve la carpeta con un servidor HTTP local y abre index.html; el script obtiene el archivo SVG de la misma carpeta.

(async () => {
  paper.setup(document.getElementById('work'));
 
  const source = await (await fetch('source.svg')).text();
  const imported = paper.project.importSVG(source, {
    insert: false,
    expandShapes: true
  });
  const crop = new paper.Path.Rectangle({
    rectangle: new paper.Rectangle(60, 40, 160, 120),
    insert: false
  });
  const delivery = new paper.Group({ insert: false });
  const rows = [];
 
  for (const name of ['frame', 'triangle', 'leaf', 'outside']) {
    const operand = imported.getItem({ name });
    if (!(operand instanceof paper.Path || operand instanceof paper.CompoundPath)) {
      throw new Error('Expected filled path: ' + name);
    }
 
    const result = operand.intersect(crop, { insert: false, trace: true });
    if (Math.abs(result.area) < 1e-8) {
      rows.push({ name, removed: true });
      result.remove();
      continue;
    }
 
    result.fillColor = operand.fillColor.clone();
    result.fillRule = operand.fillRule;
    result.strokeColor = null;
    result.opacity = 1;
    result.name = 'cropped-' + name;
    delivery.addChild(result);
    rows.push({
      name,
      result: result.className,
      fill: result.fillColor.toCSS(true),
      area: result.area
    });
  }
 
  delivery.translate(new paper.Point(-60, -40));
  paper.project.activeLayer.addChild(delivery);
  const output = paper.project.exportSVG({
    asString: true,
    precision: 6,
    bounds: new paper.Rectangle(0, 0, 160, 120)
  });
 
  document.getElementById('svg-output').textContent = output;
  document.getElementById('receipt').textContent = JSON.stringify({
    paper: paper.version,
    rows,
    export_precision: 6,
    viewport: [0, 0, 160, 120]
  }, null, 2);
  document.getElementById('status').textContent = 'Intersection/export executed. Save the exact visible SVG output as cropped.svg and open that saved file independently.';
})().catch(e => {
  document.getElementById('status').textContent = 'FAIL: ' + e.message;
});

La lista explícita de nombres sigue el orden de pintado de este original. Cada resultado conservado recibe su propio relleno sólido y se añade en ese orden. Unir primero toda la ilustración en una silueta descartaría las regiones de color separadas que queremos conservar. Nuestra guía de operaciones booleanas de Paper.js aborda la tarea distinta de unión y sustracción.

El objeto amarillo completamente exterior genera una intersección vacía y se omite. El umbral de área pequeño solo es una protección para este ejemplo, no un permiso para eliminar detalles finos de cualquier ilustración.

Trasladamos la geometría conservada mediante (-60, -40) y la exportamos a un área de visualización de 160 × 120 que empieza en cero. Esa traslación cambia el origen de coordenadas de la salida. La intersección es lo que elimina la geometría exterior no deseada; cambiar solo el origen o el área de visualización no lo haría. La referencia de exportación de proyectos de Paper.js documenta los límites explícitos y la precisión numérica usados aquí.

Guarda, reabre e inspecciona el SVG real

Copia exactamente el marcado SVG mostrado en cropped.svg. Abre ese archivo guardado de forma independiente, sin depender solo de la vista previa que el programa mantiene en memoria. En nuestro ejemplo, una página separada cargó el archivo guardado, lo importó en un ámbito nuevo de Paper.js y lo mostró mediante el renderizador de imágenes SVG del navegador.

Las comprobaciones separan estructura, geometría y apariencia del archivo:

• El SVG exportado contiene tres elementos de trazado resultantes, con cuatro contornos cerrados porque el marco conserva su abertura.
• Este resultado controlado no contiene el auxiliar de recorte, los ID de objetos originales, trazados de recorte, máscaras, imágenes ráster ni elementos de efectos.
• Todos los contornos reabiertos están cerrados y tienen segmentos rectos. Todos sus vértices quedan dentro de la región de salida de 0…160 por 0…120, con una tolerancia de 0.00001 unidades de usuario.
• La abertura prevista queda fuera de la geometría rellena y permanece transparente en el archivo renderizado. La región naranja sigue apareciendo sobre la verde azulada en el punto de solapamiento comprobado.
• Una comparación renderizada en navegador contrasta la vista previa solo con clip y el archivo recortado al mismo tamaño, por separado de la inspección geométrica.

Para esta región rectangular y este ejemplo de segmentos rectos, revisar todos los vértices y las aristas de cierre demuestra que los contornos guardados permanecen dentro de la región. Una curva con manejadores o un recorte cóncavo necesitan otra comprobación de contención; unos pocos puntos de muestra no demostrarían el mismo resultado.

Nuestra comparación de imágenes usa un ráster de 640 × 480 y una tolerancia declarada del 0.5% de píxeles modificados cuando un canal difiere en más de uno. El renderizado del archivo guardado difirió en 77 de 307200 píxeles, aproximadamente un 0.0251%, por lo que aprobó ese criterio. No fue idéntico píxel por píxel: la mayor diferencia de un canal individual fue de 255. Esa es una tolerancia de comparación visual, distinta de la tolerancia geométrica. El suavizado junto a un borde y un trazado exterior que realmente sigue en el archivo son problemas diferentes.

Esta operación elimina geometría fuera del recorte. No elimina todos los solapamientos entre los objetos de colores conservados. Esos solapamientos internos mantienen el orden de pintado; el punto comprobado confirma el color superior previsto. Aplanar todos los solapamientos pintados ocultos sería otra tarea.

Detente si la ilustración necesita otra representación

Este ejemplo no demuestra compatibilidad con líneas centrales abiertas, trazos, operandos curvos, degradados, máscaras suaves, imágenes ráster, filtros, pilas arbitrarias de clips anidados ni pinturas translúcidas superpuestas. No elimines esas características dando por hecho que se conserva la apariencia.

Una ruta con trazo y el contorno relleno de ese trazo son geometrías diferentes. Si necesitas el área visible del trazo como forma rellena, prepara e inspecciona una copia con el trazo convertido a contorno en un editor adecuado antes de elegir un flujo booleano. Conserva el trazo original si importa la editabilidad. Una máscara suave no puede sustituirse por una intersección de borde duro conservando todos sus bordes desvanecidos.

Para una edición puntual, quizá sea más fácil seleccionar e inspeccionar los objetos necesarios en un editor vectorial. Elijas la herramienta que elijas, revisa los huecos, colores y límites del resultado guardado. La precisión de exportación y los detalles muy pequeños merecen especial atención antes de usar el archivo en la siguiente etapa.

Recupera ilustraciones vectoriales faltantes solo si es necesario

Si el original ya es un SVG editable, recorta directamente esa geometría. Si solo queda una imagen prediseñada ráster adecuada y necesitas formas editables, el flujo de imágenes prediseñadas de PerfectVector puede crear primero una propuesta SVG. Inspecciona los contornos recuperados, las aberturas y los rellenos separados antes de recortar. La vectorización crea trazados a partir de píxeles; no identifica el límite de recorte deseado ni valida el resultado booleano. Nuestro ejemplo original se creó directamente y no se trazó.

Conserva una ilustración ráster cuando necesites su textura y el formato de entrega admita el recorte ráster previsto. Un recorte vectorial es útil porque el siguiente paso requiere geometría, no porque todas las imágenes deban convertirse en SVG.

Completa el recorte sin perder el maestro

1. Conserva el maestro sin recortar e identifica los objetos cerrados y rellenos previstos.
2. Define el recorte en el mismo contexto de coordenadas que esos objetos.
3. Intersecta cada objeto, conserva su estilo y orden de pintado comprobados y excluye auxiliares y originales de la escena de entrega.
4. Exporta solo la geometría conservada con límites y precisión elegidos deliberadamente.
5. Reabre el archivo guardado y revisa por separado sus trazados reales, aberturas, apariencia y destino previsto.

El recorte acotado termina cuando el archivo guardado contiene la geometría prevista dentro de la región y conserva las relaciones necesarias de huecos y colores. Si queda geometría exterior, revisa si exportaste el contenido original del proyecto o si solo cambiaste un clip o el área de visualización. Si una abertura se rellena, comprueba el trazado compuesto y la regla de relleno antes de combinar más objetos.

Completamos la tarea del archivo guardado para el ejemplo poligonal original. No lo importamos en una cortadora, no probamos resultados físicos ni establecimos una garantía general de compatibilidad SVG.

Preguntas frecuentes

¿Aplicar un clip a un SVG elimina permanentemente sus trazados exteriores? El clip restringe el renderizado y conserva la geometría referenciada. Un recorte geométrico permanente necesita una operación de trazados adecuada y una exportación que contenga solo los resultados.

¿Puedo recortar todos los colores uniendo primero las formas? Una sola unión puede descartar las regiones de relleno separadas que querías conservar. Este ejemplo intersecta cada objeto de relleno sólido por separado y mantiene el orden de pintado del original.

¿Un viewBox más pequeño elimina la ilustración oculta? Cambia la asignación del área de visualización y la región mostrada. Por sí solo no elimina los trazados originales fuera de esa región. Revisa la geometría guardada además de la vista previa.

¿El resultado funcionará en todas las aplicaciones de corte? Esta prueba en navegador no lo demuestra. Inspecciona la geometría importada y las operaciones del destino previsto y después realiza la comprobación de producción adecuada.

Fuentes

1. MDN: clipPath de SVG — El clip afecta al renderizado sin cambiar la geometría del elemento referenciado.
2. Paper.js: PathItem — Resultados de intersección y opciones booleanas basadas en áreas.
3. Paper.js: Project — Importación SVG, contenido de proyectos, límites de exportación y precisión numérica.

¿Necesitas trazados de una imagen prediseñada que solo existe como mapa de bits? Prepara una propuesta SVG, revisa sus huecos y rellenos, recorta una copia de trabajo independiente y reabre el resultado guardado antes de entregarlo.