Spazi bianchi tra forme SVG: diagnosi e soluzioni

Le sottili linee bianche tra forme SVG sono spesso fessure dovute alla renderizzazione, non fori nel file. Il modello di renderizzazione SVG permette alle implementazioni di usare l'antialiasing durante la rasterizzazione della grafica vettoriale; bordi adiacenti campionati separatamente possono quindi esporre una linea sottilissima del colore dello sfondo a una certa scala. La linea può scomparire a un altro livello di zoom o in un altro renderer.

A volte lo spazio è reale. Prima di sovrapporre forme, aggiungere tratti o unire tracciati, esegui quattro controlli: cambia lo zoom, cambia lo sfondo, esporta la grafica in raster e ispeziona i tracciati nella vista contorno. I risultati indicano se correggere il campionamento visivo o la geometria.

Fessura del renderer o spazio reale?

• Cambia o scompare con lo zoom: probabilmente una fessura visiva.
• Cambia colore con lo sfondo: lo sfondo viene campionato tra i bordi.
• Assente nella vista contorno: i confini vettoriali potrebbero già incontrarsi.
• Visibile in un'esportazione raster ad alta risoluzione: ispeziona più attentamente precisione di esportazione e geometria.
• Rimane in una mesh, anteprima di taglio o misurazione dei tracciati: trattalo come un vero problema geometrico.

Perché tracciati che si toccano possono mostrare una fessura

Gli schermi renderizzano le forme vettoriali su una griglia di pixel. Quando un bordo attraversa un pixel, l'antialiasing mescola quel pixel tra forma e sfondo per rendere fluido il bordo. Due forme renderizzate separatamente possono entrambe mescolare i pixel dei propri confini, anche quando le coordinate vettoriali si incontrano.

La scala aggiunge un'altra variabile. Una coordinata condivisa che cade esattamente sul confine di un pixel a una dimensione può cadere tra pixel a un'altra. L'arrotondamento nell'esportazione può anche spostare leggermente un confine. Ecco perché una linea può comparire soltanto allo zoom del 67%, scomparire al 100% e tornare in una piccola miniatura web.

L'SVG potrebbe essere ancora matematicamente corretto. Modificare la geometria prima delle prove può creare sovrapposizioni visibili in usi trasparenti, stampati, da taglio o animati.

La distinzione essenziale è se i contorni sottostanti condividano un bordo. Una fessura di renderizzazione può apparire su geometria che si tocca; un vero spazio resta visibile tra i contorni stessi.

Esegui quattro prove prima di modificare

1. Cambia lo zoom

Visualizza l'SVG a diversi livelli di zoom, inclusi 100% e un forte ingrandimento. Un vero spazio resta tra i tracciati quando lo ingrandisci. Una fessura di campionamento spesso lampeggia, cambia spessore o scompare.

Non usare soltanto lo zoom. Alcuni spazi geometrici sono più piccoli di un pixel e possono anch'essi cambiare aspetto.

2. Cambia lo sfondo

Posiziona l'SVG su bianco, nero e un colore acceso. Se la linea sottile assume il colore dello sfondo, il renderer mostra lo sfondo tra bordi campionati separatamente. Può essere una fessura di campionamento o un vero spazio trasparente: continua quindi con l'ispezione dei contorni.

3. Esporta un PNG ad alta risoluzione

Esporta a due o quattro volte le dimensioni finali, poi ispeziona l'output ridotto. Se la fessura scompare nell'esportazione ad alta risoluzione, il problema era probabilmente una rasterizzazione dipendente dalla scala. Se rimane e diventa misurabile, ispeziona coordinate e precisione di esportazione.

4. Usa la vista contorno o reticolare

Disattiva i riempimenti e ispeziona i confini reali. Seleziona i nodi vicini e confronta le coordinate. Se i tracciati si incontrano esattamente, la linea visibile è un problema del renderer. Se estremità o bordi non corrispondono, correggi la geometria.

Per un insieme più ampio di modifiche ai tracciati, consulta come modificare un SVG. Conserva una copia perché la correzione migliore dipende dall'uso del file.

Correggi una fessura visiva

Per grafica piatta i cui riempimenti adiacenti non devono avere trasparenza tra loro, una minuscola sovrapposizione controllata è generalmente la correzione più affidabile. Estendi la forma sottostante o più scura sotto quella vicina di una piccola quantità. La sovrapposizione deve essere invisibile alla dimensione normale e non alterare la silhouette esterna.

Altre opzioni:

• Aggiungi un tratto molto sottile dello stesso colore della forma, allineato in modo da coprire la fessura.
• Metti una forma di base corrispondente dietro tutti i pezzi adiacenti.
• Aumenta la precisione delle coordinate di esportazione SVG se l'arrotondamento ha separato i bordi condivisi.
• Renderizza un raster più grande e riducilo quando il file finale è PNG.

La proprietà SVG shape-rendering può richiedere precisione geometrica o bordi più netti, ma MDN osserva che è un suggerimento di renderizzazione, non una garanzia portabile che ogni fessura scompaia. Consulta quando crispEdges aiuta e quando no prima di applicare quel suggerimento a tutto il file.

Scegli una correzione, poi provala nella destinazione effettiva. Accumulare più soluzioni può creare creste scure o rigonfiamenti dove le forme si sovrappongono.

Correggi un vero spazio geometrico

Se la vista contorno o l'output successivo confermano un foro:

1. Aggancia i nodi previsti alla stessa coordinata.
2. Estendi i bordi vicini finché si incontrano davvero.
3. Unisci le estremità soltanto quando il progetto richiede un tracciato continuo.
4. Rimuovi segmenti duplicati o isolati.
5. Riesporta con sufficiente precisione delle coordinate.
6. Riapri il file e ripeti le quattro prove.

Evita una forma bianca per coprire lo spazio. Nasconde il sintomo soltanto su sfondo bianco e rimane un oggetto aggiuntivo nel file.

Se gli spazi provengono dal ricalco di un raster rumoroso, possono esserci molti frammenti sottili e bordi che quasi si toccano nel disegno. Correggerli singolarmente può richiedere più tempo che ricalcare di nuovo una sorgente più pulita.

La destinazione cambia la correzione giusta

Una fessura che rimane in una faccia CAD o mesh successiva è sostanzialmente diversa da una linea di un pixel nel browser. Se la geometria successiva si separa, correggi i tracciati sorgente o la tolleranza di conversione. Se la linea compare soltanto in una miniatura nel browser, la geometria di produzione potrebbe essere già corretta.

La lista di controllo SVG prima del taglio affronta la verifica specifica per le macchine. Per sfocatura sullo schermo o pixel nascosti anziché fessure, usa la diagnosi degli SVG pixelati.

Dove si inserisce PerfectVector

Quando gli spazi sono sparsi in un ricalco creato da PNG o JPG, torna alla sorgente raster prima di rattoppare decine di tracciati. Ripulisci i blocchi di compressione evidenti, rimuovi lo sfondo indesiderato e mantieni i bordi originali più netti. Poi usa il flusso da immagine a vettore per ricostruire le regioni visibili come tracciati modificabili e ispeziona l'anteprima.

PerfectVector non può sapere se due regioni dello stesso colore debbano restare separate per animazione, taglio o assemblaggio. Usa l'anteprima per controllare silhouette e spazio negativo, poi prova l'SVG scaricato nella vera destinazione. Un nuovo ricalco è utile quando la frammentazione della sorgente ha causato gli spazi, non quando un browser sta semplicemente applicando antialiasing a geometria adiacente corretta.

FAQ

Perché ci sono linee bianche tra i tracciati SVG? Il browser o l'app potrebbe applicare antialiasing separatamente ai bordi adiacenti, lasciando apparire lo sfondo a certe scale. I tracciati possono comunque incontrarsi esattamente. Cambia zoom, sfondo, renderer e vista contorno prima di modificare.

Come rimuovo le fessure di antialiasing in un SVG? Per riempimenti piatti adiacenti, aggiungi una minuscola sovrapposizione controllata, un tratto sottilissimo dello stesso colore o una forma sottostante. Prova il risultato alle dimensioni finali di visualizzazione. Non usare queste soluzioni alla cieca su grafica da taglio, CAD, trasparente o animata.

Unire tutti i tracciati rimuoverà gli spazi? Può farlo, ma elimina anche la struttura separata dei colori e di modifica. Unisci i tracciati soltanto quando devono essere una sola forma. La grafica multicolore generalmente richiede oggetti separati, quindi far corrispondere i bordi o una sovrapposizione controllata è più sicuro.

Perché gli spazi compaiono soltanto quando l'SVG è piccolo? Il ridimensionamento sposta i confini vettoriali rispetto alla griglia dei pixel. A certe dimensioni, entrambi i bordi adiacenti si mescolano con lo sfondo nella stessa riga o colonna di pixel. Un rendering più grande o una lieve sovrapposizione possono impedire allo sfondo di apparire.

Piccoli spazi SVG contano per stampa 3D o taglio? Contano se rimangono nella faccia, mesh o percorso utensile. Una fessura soltanto sullo schermo non prova che la geometria sia danneggiata. Ispeziona l'anteprima successiva e correggi qualsiasi fessura o contorno aperto che cambi l'oggetto prodotto.

Fonti

1. W3C — Modello di renderizzazione SVG 2 — Descrive ordine di pittura SVG, ritaglio, compositing e antialiasing.
2. MDN — shape-rendering — Documenta i suggerimenti di renderizzazione disponibili per le forme SVG.
3. W3C — Sistemi di coordinate SVG 2 — Definisce il modello di coordinate, viewport e trasformazioni alla base della renderizzazione dipendente dalla scala.

---

Se un ricalco raster frammentato contiene spazi reali, ricostruiscilo come tracciati vettoriali modificabili e ispeziona l'anteprima. Se i tracciati si incontrano già, conserva il file e applica soltanto la minima correzione visiva specifica della destinazione.