Perché i fori degli SVG si riempiono e come ripristinarli

Un foro SVG si riempie quando il file o la destinazione smette di trattare il contorno interno come esterno alla forma riempita. Le cause più comuni sono un tracciato composto rilasciato, un contorno interno salvato come oggetto riempito separato, una regola di riempimento o direzione del tracciato cambiata, un importatore che perde il rapporto tra i contorni oppure un ricalco raster che ha chiuso l'apertura prima della creazione dell'SVG.

Inizia aprendo l'SVG in un browser. Se il foro è già riempito lì, correggi il file. Se nel browser appare corretto ma un'altra app riempie il foro, il probabile responsabile è il passaggio di importazione.

Prima individua dove è scomparso il foro

Usa due renderer prima di cambiare la geometria:

1. Salva un duplicato dell'SVG.
2. Apri il duplicato direttamente in Chrome, Safari, Firefox o un altro browser.
3. Posizionalo su uno sfondo chiaro e poi scuro.
4. Apri lo stesso file nell'app di destinazione.
5. Confronta il foro specifico, non soltanto la silhouette complessiva.

Questo confronto distingue un SVG errato da un problema di importazione specifico della destinazione. Evita anche che operazioni casuali sui tracciati danneggino un file corretto prima dell'importazione.

Una forma bianca non è un foro

Un vero foro mostra ciò che sta dietro l'SVG. Una forma bianca sembra vuota soltanto su un'area di disegno bianca. Per la grafica usata in un'interfaccia web, la guida a pointer-events negli SVG mostra come un foro, una regione dipinta e un bersaglio di interazione separato rispondono ai clic.

Per provarlo, aggiungi un rettangolo scuro temporaneo dietro la grafica. Se il presunto foro rimane bianco, seleziona quell'oggetto interno. Puoi mantenerlo come elemento bianco intenzionale del progetto, ma non aspettarti che una macchina da taglio, uno strumento di incisione, una sovrapposizione nel browser o un importatore 3D lo interpreti come spazio vuoto.

Per un'apertura trasparente, usa un tracciato composto oppure sottrai la forma interna da quella esterna. Anche una maschera può creare trasparenza, ma molte app di produzione gestiscono la geometria semplice dei tracciati in modo più affidabile delle maschere. Per un flusso tramite script, prova a tagliare e unire tracciati importati con Paper.js, poi riapri l'SVG esportato per controllare l'apertura.

Per la grafica dei gobo, un'apertura trasparente corretta lascia comunque una decisione separata sul materiale. Il confronto tra gobo in acciaio e vetro segue la stessa lettera O in una disposizione con ponti d'acciaio e in un disegno sostenuto dal vetro e spiega perché invertire le regioni chiare e scure proiettate cambia ciò che deve restare collegato.

I tracciati composti conservano il rapporto del foro

Una lettera O, un anello e un logo con centro ritagliato usano spesso un unico elemento path con più sottotracciati chiusi. Il contorno esterno definisce la silhouette; un sottotracciato racchiuso definisce lo spazio interno o il ritaglio. Il modello dei tracciati SVG permette più sottotracciati all'interno di un unico tracciato.

Ecco perché Ungroup, Break Apart e Release Compound Path non sono intercambiabili. Rilasciare il tracciato composto può trasformare il contorno interno in un normale oggetto riempito. La geometria è ancora presente, ma il suo rapporto con il contorno esterno è scomparso.

Ripristinalo su un duplicato:

1. Seleziona il confine esterno e soltanto i contorni che devono essere fori.
2. Usa Make Compound Path, Combine o il comando equivalente.
3. Applica un solo riempimento all'oggetto risultante.
4. Controlla la regola di riempimento.
5. Riapri l'SVG salvato in un browser e nell'app di destinazione.

L'attuale documentazione Adobe sui tracciati composti usa questo stesso modello: i tracciati costituenti determinano regioni riempite e trasparenti tramite una regola di riempimento.

Ripristina il rapporto, non soltanto l'aspetto

Per la grafica dei timbri, controlla la geometria rialzata o incassata dei timbri per ceramica prima di decidere quali aree devono restare riempite.

Controlla nonzero ed evenodd

SVG ha due regole di riempimento. La specifica SVG 2 sul rendering imposta nonzero come valore iniziale e definisce evenodd come altra opzione.

• nonzero usa attraversamenti dei tracciati con segno. Un contorno interno nella direzione sbagliata può aggiungersi al riempimento anziché annullarlo.
• evenodd conta gli attraversamenti. Un punto racchiuso due volte è esterno, quindi un semplice contorno annidato diventa un foro indipendentemente dalla direzione dei contorni.

Questo tracciato minimo contiene due rettangoli con la stessa direzione. Con evenodd, il centro resta trasparente:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Cambiare la regola è utile quando corrisponde al progetto, ma non è una correzione universale. I due contorni devono comunque essere valutati come sottotracciati della stessa forma. Impostare fill-rule="evenodd" su due oggetti indipendenti non permette a uno di ritagliare l'altro.

Se mantieni nonzero, inverti soltanto il contorno interno quando l'editor offre quel comando. Illustrator espone entrambe le regole di riempimento e un controllo della direzione per i tracciati composti. Salva una copia prima di invertire qualsiasi cosa, perché autointersezioni e più spazi interni annidati possono produrre un risultato diverso da un semplice anello.

Quando l'SVG è corretto ma l'importatore sbaglia

Alcuni strumenti di taglio, CAD, 3D e animazione supportano soltanto un sottoinsieme pratico di SVG. Un browser può renderizzare correttamente il tracciato composto mentre la destinazione importa ogni contorno come oggetto pieno.

Segui questo ordine di correzione:

1. Salva una copia semplificata dall'editor sorgente.
2. Converti il testo modificabile in tracciati in quella copia quando l'importazione del testo è il punto debole.
3. Sostituisci maschere, ritagli ed effetti di aspetto con semplice geometria di tracciati soltanto dove necessario.
4. Mantieni ogni foro previsto insieme al suo contorno esterno in un unico tracciato composto.
5. Prova evenodd e nonzero consapevolmente anziché alternarli ripetutamente.
6. Se l'importatore riempie ancora l'apertura, importa entrambi i confini e sottrai il profilo interno nella destinazione.

Per un flusso di estrusione, la destinazione deve anche riconoscere un profilo chiuso selezionabile. La diagnosi dell'estrusione SVG affronta estremità aperte, duplicati e validità del profilo dopo che il foro è stato preservato.

Quando il ricalco ha chiuso l'apertura

Uno strumento di ricalco può chiudere lo spazio interno di una piccola lettera o unire un'apertura stretta quando la sorgente raster è minuscola, sfocata o a basso contrasto. È un problema geometrico, non della regola di riempimento: il confine interno non è mai arrivato nell'SVG.

Torna alla sorgente raster e:

• ingrandiscila o acquisiscila nuovamente senza aggiungere sfocatura;
• aumenta la separazione attorno all'apertura importante;
• rimuovi il rumore di compressione vicino allo spazio;
• riduci smussamento o fusione dei colori se lo strumento espone questi controlli;
• confronta il nuovo ricalco alla dimensione finale dell'output.

Questo è il caso in cui PerfectVector può aiutare. Usa il flusso da immagine a vettore quando hai il raster originale e ti serve un nuovo ricalco SVG. Ispeziona ogni spazio interno e negativo prima del download. Se l'SVG era corretto finché un editor non ha rilasciato i tracciati composti, correggi invece quell'SVG; un nuovo ricalco non recupererà la cronologia delle modifiche persa.

Lo stesso approccio che parte dalla sorgente è utile per le lettere. La guida vettoriale al lettering a mano mostra come mantenere aperti i piccoli spazi interni senza privare l'intero disegno del suo carattere.

Un controllo finale sicuro

Prima di inviare l'SVG corretto:

• visualizzalo su sfondi chiari, scuri e trasparenti;
• seleziona l'elemento e conferma che sia un unico tracciato composto intenzionale;
• ispeziona la regola di riempimento nell'editor o nel sorgente SVG;
• controlla ogni spazio interno delle lettere, anello e spazio negativo racchiuso;
• riapri il file esportato anziché fidarti dell'area di disegno non salvata;
• prova l'esatta app di destinazione;
• mantieni separati sorgente modificabile e copia semplificata di consegna.

Se ora l'oggetto si comporta come un'unica selezione, può essere corretto. Un tracciato composto è un solo oggetto per definizione. Usa la guida alla separazione dei gruppi SVG prima di scomporlo di nuovo.

FAQ

Perché i fori si sono riempiti dopo aver usato Break Apart? Break Apart ha separato i contorni interni dal tracciato composto esterno. Gli ex fori sono diventati normali oggetti riempiti. Annulla il comando o ricombina ogni contorno esterno con i contorni interni corretti, poi verifica la regola di riempimento.

Dovrei usare fill-rule="evenodd" per i fori SVG? evenodd è spesso comodo per contorni annidati perché la loro direzione non decide il risultato. Funziona comunque all'interno di una sola forma; non sottrae un oggetto separato. Mantieni nonzero quando sorgente e destinazione conservano le direzioni previste dei contorni.

Perché l'SVG appare corretto nel browser ma pieno nella mia app? L'importatore di destinazione potrebbe non conservare tracciato composto, regola di riempimento, maschera o direzione dei contorni. Semplifica una copia in tracciati semplici e riprova. Se necessario, importa i confini esterno e interno e sottrai il foro nella destinazione.

Posso creare un foro mettendo sopra una forma bianca? Simula un foro soltanto su uno sfondo bianco. L'oggetto bianco resta riempito, quindi può essere stampato, tagliato o importato come un'altra forma piena. Usa un tracciato composto, una sottrazione o un'altra struttura di trasparenza quando lo sfondo deve vedersi attraverso.

PerfectVector può correggere fori riempiti in un SVG esistente? PerfectVector è utile quando puoi tornare a una sorgente raster adatta e creare un nuovo ricalco con le aperture previste visibili. Non ripara un tracciato composto rilasciato da un editor o ignorato da un importatore. Correggi questi rapporti in un editor vettoriale o nell'app di destinazione.

Fonti

1. W3C — Rendering SVG 2 — Definisce nonzero, evenodd e il valore iniziale della regola di riempimento.
2. W3C — Tracciati SVG — Definisce tracciati, sottotracciati e geometria dei tracciati chiusi.
3. Adobe Illustrator — Creare tracciati composti — Documenta fori composti, regole di riempimento e inversione della direzione dei tracciati costituenti.
4. PerfectVector — Da immagine a vettore — Il flusso attuale da raster a SVG usato nel caso condizionale del nuovo ricalco.

Se l'apertura è andata persa durante il ricalco raster, crea un nuovo vettore dalla sorgente pulita e ispeziona ogni spazio interno prima della consegna. Se la versione nel browser è già corretta, mantieni quella geometria e correggi soltanto l'importazione che fallisce.