Ritaglia un SVG definitivamente senza tracciati nascosti

Per ritagliare definitivamente una grafica SVG riempita, interseca ogni forma desiderata con l'area di ritaglio, poi esporta soltanto la geometria risultante. Conserva separatamente un master modificabile. Un viewBox più piccolo o un tracciato di ritaglio può cambiare ciò che vedi lasciando nel file i tracciati esterni originali.

Il nostro esempio usa quattro oggetti poligonali originali, opachi e chiusi, e un ritaglio rettangolare. Un oggetto contiene un'apertura reale. Ritagliamo gli oggetti separatamente per mantenere riempimenti e ordine di disegno, salviamo il risultato come SVG e riapriamo quel file effettivo per verificarlo. È un flusso geometrico con un ambito limitato, non un metodo generico per ritagliare qualsiasi effetto SVG o produrre file collaudati per macchine da taglio.

Decidi se vuoi nascondere o rimuovere la grafica

Il ritaglio tramite clip è utile quando vuoi modificare il taglio in seguito. Il riferimento MDN sul clipping distingue il risultato renderizzato dalla geometria sottostante dell'elemento. Rimuovere il legame con la clip può rendere nuovamente visibile la grafica originale.

Un ritaglio permanente cambia la geometria che consegni. Usalo quando chi riceve il file ha bisogno delle forme delimitate stesse, conservando il sorgente non ritagliato come master separato.

Eliminare ogni elemento invisibile è un'altra attività. Una forma di ritaglio, una risorsa maschera o un simbolo referenziato può essere necessario anche quando non viene dipinto direttamente. La guida a clip-path e maschere spiega queste relazioni di rendering; la guida alle coordinate delle clip tratta i loro sistemi di coordinate.

Parti da riempimenti chiusi identificabili

Servono un sorgente modificabile, un'area di ritaglio definita e un modo per ispezionare l'SVG salvato. Questo esempio esegue Paper.js 0.12.18 nel browser. Gestisce riempimenti poligonali uniformi e completamente opachi, senza tratto. Gli operandi sono oggetti Path o CompoundPath, non gruppi importati arbitrari.

Il sorgente contiene una cornice verde petrolio con un'apertura rettangolare, un triangolo arancione, un rombo viola e un piccolo oggetto giallo completamente esterno al ritaglio. Il rettangolo di ritaglio parte da (60, 40) e misura 160 × 120 unità utente SVG. Sono coordinate definite per il disegno, non dimensioni fisiche di stampa.

L'apertura della cornice appartiene a un tracciato composto. Non separarne i contorni in oggetti riempiti indipendenti solo per poterli elaborare in un ciclo. La guida ai fori SVG spiega perché una toppa bianca e un'apertura realmente trasparente si comportano in modo diverso.

Salva questo campione originale come 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>

Interseca ogni oggetto e conserva solo il risultato

Un'intersezione mantiene l'area condivisa dall'oggetto e dal ritaglio. La documentazione di intersect() di Paper.js descrive un nuovo elemento tracciato contenente l'intersezione. Qui trace: true considera entrambi gli operandi come aree. L'opzione riguarda la geometria booleana: non converte la grafica raster in vettori. Usiamo insert: false per evitare che il master importato o l'oggetto ausiliario di ritaglio entrino automaticamente nella scena esportata.

Per un esempio locale riproducibile, installa la versione fissata della libreria in una cartella di lavoro vuota:

npm install --save-exact paper@0.12.18

Salva questo codice come index.html, accanto a source.svg e al file crop.js riportato sotto:

<!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>

Salva questo codice come crop.js. Servi la cartella con un server HTTP locale e apri index.html; lo script recupera l'SVG nella stessa cartella.

(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;
});

L'elenco esplicito dei nomi segue l'ordine di disegno del sorgente. Ogni risultato conservato riceve il proprio riempimento uniforme e viene aggiunto in quell'ordine. Unire prima tutta la grafica in una sola sagoma eliminerebbe le regioni di colore separate che vogliamo mantenere. La guida alle operazioni booleane di Paper.js tratta il diverso compito di unione e sottrazione.

L'oggetto giallo interamente esterno produce un'intersezione vuota e viene omesso. La piccola soglia d'area è solo una protezione per questo campione, non un'autorizzazione a eliminare dettagli fini da una grafica qualsiasi.

Trasliamo la geometria conservata di (-60, -40) e la esportiamo in un viewport 160 × 120 che parte da zero. La traslazione cambia l'origine delle coordinate dell'output. È l'intersezione a rimuovere la geometria esterna indesiderata; cambiare soltanto origine o viewport non lo farebbe. Il riferimento di esportazione del progetto documenta limiti espliciti e precisione numerica usati qui.

Salva, riapri e ispeziona l'SVG effettivo

Copia esattamente il markup SVG visualizzato in cropped.svg. Apri il file salvato in modo indipendente, senza affidarti soltanto all'anteprima in memoria del programma. Nel nostro esempio una pagina separata ha caricato il file salvato, lo ha importato in un nuovo scope Paper.js e lo ha mostrato tramite il renderer di immagini SVG del browser.

I controlli distinguono struttura del file, geometria e aspetto:

• L'SVG esportato contiene tre elementi path risultanti, con quattro contorni chiusi perché la cornice conserva la propria apertura.
• In questo output controllato sono assenti l'oggetto ausiliario di ritaglio, gli ID degli oggetti originali, tracciati di ritaglio, maschere, immagini raster ed elementi di effetto.
• Ogni contorno riaperto è chiuso e ha segmenti rettilinei. Tutti i suoi vertici ricadono nella regione di output 0…160 per 0…120, con una tolleranza di 0.00001 unità utente.
• L'apertura prevista resta esterna alla geometria riempita e trasparente nel file renderizzato. La regione arancione appare ancora sopra quella verde petrolio nel punto di sovrapposizione controllato.
• Un confronto dei rendering nel browser verifica l'anteprima con sola clip rispetto al file ritagliato alle stesse dimensioni, separatamente dall'ispezione geometrica.

Per questa regione rettangolare e questo campione a segmenti rettilinei, controllare ogni vertice e i lati di chiusura dimostra che i contorni memorizzati rimangono nella regione. Una curva con maniglie o un ritaglio concavo richiede un controllo di contenimento diverso; pochi punti campionati non dimostrerebbero lo stesso risultato.

Il confronto usa un raster 640 × 480 e una soglia dichiarata dello 0,5% di pixel cambiati quando un canale differisce di oltre uno. Il rendering del file salvato differiva in 77 pixel su 307.200, circa lo 0,0251%, superando quindi il criterio. Non era identico pixel per pixel: la differenza massima di un singolo canale era 255. È una tolleranza del confronto visivo, non quella geometrica. L'antialiasing vicino a un bordo e un tracciato esterno effettivamente conservato sono problemi diversi.

Questa operazione elimina la geometria esterna al ritaglio. Non elimina ogni sovrapposizione fra gli oggetti colorati mantenuti. Le sovrapposizioni interne restano nell'ordine di disegno; il punto verificato conferma il colore superiore previsto. Appiattire ogni sovrapposizione dipinta ma nascosta sarebbe un'attività separata.

Fermati quando serve una rappresentazione diversa

Questo esempio non dimostra il supporto per linee centrali aperte, tratti, operandi curvi, gradienti, maschere morbide, immagini raster, filtri, pile arbitrarie di clip annidate o pitture traslucide sovrapposte. Non eliminare queste funzionalità presumendo che l'aspetto rimanga invariato.

Un percorso con tratto e il contorno riempito di quel tratto sono geometrie diverse. Se il lavoro richiede l'area visibile del tratto come forma riempita, prepara e ispeziona una copia convertita in contorni in un editor adatto prima di scegliere un flusso booleano. Conserva il tratto originale se la modificabilità conta. Una maschera morbida non può essere sostituita da un'intersezione netta preservando tutti i suoi bordi sfumati.

Per una modifica occasionale, un editor vettoriale può essere il posto più semplice in cui selezionare e ispezionare gli oggetti necessari. Qualunque strumento tu scelga, verifica fori, colori e confini del risultato salvato. Precisione d'esportazione e dettagli molto piccoli meritano particolare attenzione prima dell'uso successivo.

Recupera la grafica vettoriale solo quando serve

Se il sorgente è un SVG modificabile esistente, ritaglia direttamente quella geometria. Se rimane soltanto una clipart raster adatta e ti servono forme modificabili, il flusso clipart di PerfectVector può prima creare un SVG candidato. Esamina contorni recuperati, aperture e riempimenti separati prima di applicare il ritaglio. La vettorializzazione crea tracciati dai pixel; non identifica il confine di ritaglio desiderato né convalida il risultato booleano. Il nostro campione originale è stato disegnato direttamente e non ricalcato.

Conserva un'illustrazione raster quando la sua texture è necessaria e il formato di consegna supporta il ritaglio raster previsto. Un ritaglio vettoriale è utile perché la fase successiva richiede geometria, non perché ogni immagine debba diventare SVG.

Completa il ritaglio senza perdere il master

1. Conserva il master non ritagliato e identifica gli oggetti chiusi e riempiti desiderati.
2. Definisci il ritaglio nello stesso contesto di coordinate degli oggetti.
3. Interseca ogni oggetto, preserva lo stile verificato e l'ordine di disegno ed escludi oggetti ausiliari e originali dalla scena di consegna.
4. Esporta solo la geometria conservata, con limiti e precisione scelti consapevolmente.
5. Riapri il file salvato e verifica separatamente tracciati effettivi, aperture, aspetto e destinazione prevista.

Il ritaglio delimitato è completo quando il file salvato contiene la geometria voluta dentro la regione e mantiene le relazioni richieste fra fori e colori. Se resta geometria esterna, verifica se hai esportato il contenuto originale del progetto o cambiato soltanto una clip o il viewport. Se un'apertura si riempie, controlla tracciato composto e regola di riempimento prima di unire altri oggetti.

Abbiamo completato il lavoro sul file salvato per il campione poligonale originale. Non lo abbiamo importato in una macchina da taglio, provato l'output fisico o stabilito una garanzia generale di compatibilità SVG.

Domande frequenti

Una clip SVG elimina definitivamente i tracciati esterni? Il clipping limita il rendering mantenendo la geometria referenziata. Un ritaglio geometrico permanente richiede un'operazione sui tracciati adatta e un'esportazione contenente solo i risultati.

Posso ritagliare tutti i colori unendo prima le forme? Un'unica unione può eliminare le regioni di riempimento separate che volevi conservare. Questo esempio interseca separatamente ogni oggetto a riempimento uniforme e mantiene l'ordine di disegno del sorgente.

Un viewBox più piccolo rimuove la grafica nascosta? Cambia la mappatura del viewport e la regione visualizzata. Da solo non elimina i tracciati sorgente esterni a quella regione. Ispeziona la geometria salvata oltre all'anteprima.

Il risultato funzionerà in ogni applicazione di taglio? Questa prova nel browser non lo dimostra. Esamina geometria importata e operazioni nella destinazione prevista, poi esegui il controllo produttivo appropriato.

Fonti

1. MDN: SVG clipPath — Il clipping influenza il rendering senza cambiare la geometria dell'elemento referenziato.
2. Paper.js: PathItem — Risultati d'intersezione e opzioni booleane basate sull'area.
3. Paper.js: Project — Importazione SVG, contenuti del progetto, limiti d'esportazione e precisione numerica.

Ti servono tracciati da una clipart disponibile solo come bitmap? Prepara un SVG candidato, esamina fori e riempimenti, poi ritaglia una copia di lavoro separata e riapri il risultato salvato prima della consegna.