I tratti SVG scompaiono dopo l'esportazione: le cause

Quando un tratto SVG scompare dopo l'esportazione, verifica prima se la geometria del tracciato esiste ancora. Una linea apparentemente assente potrebbe non avere uno stile di tratto visibile, avere lo stesso colore dello sfondo, diventare troppo sottile alla nuova scala, trovarsi fuori dal viewBox o essere ritagliata al bordo della pagina. Potrebbe anche usare un pennello, un profilo a larghezza variabile, un filtro o una regola CSS che l'applicazione di destinazione non comprende.

Non ricalcare subito la grafica e non espandere ogni oggetto. Conserva la sorgente modificabile, crea una copia di prova e isola una linea problematica. La correzione minima di solito conserva più struttura originale.

La diagnosi rapida

1. Apri lo stesso SVG in un browser aggiornato e in un editor vettoriale.
2. Seleziona la linea mancante e verifica che il suo tracciato e i nodi esistano ancora.
3. Assegna alla copia di prova un colore di tratto vistoso, opacità piena e un tratto temporaneamente più largo.
4. Allontanala dal bordo della pagina e disattiva ritagli, maschere e filtri uno alla volta.
5. Rimuovi le trasformazioni oppure verifica come influiscono sulla larghezza del tratto.
6. Se il problema si presenta in una sola destinazione, sostituisci l'aspetto non supportato in una copia da consegnare.

Quattro risultati per un tratto

Prima verifica se il tracciato esiste ancora

Apri una copia dell'SVG in un editor di testo e cerca normali elementi di forma come <path>, <line>, <polyline>, <circle> o <rect>. Poi seleziona l'oggetto mancante in un editor vettoriale e passa alla vista contorni o wireframe.

• Se nella vista contorni sono visibili nodi e tracciato, la geometria è sopravvissuta. Esamina stile, ritaglio, trasformazioni e supporto dell'applicazione.
• Se l'oggetto esiste ma i suoi limiti sono molto lontani dalla pagina, riportalo dentro o correggi il viewBox.
• Se la linea prevista è diventata una forma chiusa piena, potrebbe essere già stata espansa in contorni.
• Se non esiste una geometria corrispondente, controlla documento sorgente e impostazioni di esportazione. L'esportatore potrebbe aver omesso un oggetto non supportato.

Confronta due motori di visualizzazione prima di modificare. Un tratto visibile in Chrome ma assente in un editor desktop suggerisce un limite di importazione o una dipendenza dai CSS. Una linea assente ovunque ha più probabilmente uno stile non valido, un ritaglio, limiti errati o una geometria mancante. Se è vuoto l'intero documento anziché soltanto le linee, segui la diagnosi generale per SVG vuoti.

Se il tratto scompare specificamente in Penpot, usa i controlli di importazione SVG in Penpot per isolare il passaggio.

Causa 1: il tratto non ha uno stile visibile

SVG tratta riempimento e tratto come proprietà di pittura separate. Un tracciato può esistere senza mostrare una linea. La guida MDN a riempimenti e tratti descrive le proprietà principali, tra cui stroke, stroke-width e opacità.

Controlla l'oggetto selezionato e gli stili ereditati cercando:

• stroke="none";
• un stroke mancante insieme a fill="none";
• stroke-width="0" o una larghezza estremamente piccola;
• opacity="0" o stroke-opacity="0";
• un colore del tratto uguale alla pagina o alla forma circostante;
• display="none" o visibility="hidden" sull'oggetto o su un gruppo genitore;
• una classe CSS che sovrascrive gli attributi di presentazione.

Su una copia di prova, assegna un colore saturo, imposta l'opacità al 100% e aumenta la larghezza del tratto diverse volte. Se un contorno spesso copre la superficie di lettere piene, consulta l'ordine di pittura SVG per tratto e riempimento prima di cambiare i tracciati. Posiziona dietro un rettangolo contrastante. Se la linea appare, ripristina il colore previsto e scegli una larghezza leggibile alle dimensioni di consegna.

Ricorda che uno stile dichiarato sull'elemento può essere sovrascritto da una regola più specifica del foglio di stile. Controlla lo stile calcolato negli strumenti per sviluppatori del browser quando il markup indica una cosa ma il browser ne disegna un'altra.

Causa 2: la linea è ritagliata al bordo della pagina o del riquadro

Un tratto si estende su entrambi i lati del tracciato centrale. Se il centro si trova sul confine del viewBox, metà del tratto può cadere fuori dal viewport. Una linea spessa, un'estremità quadrata, una giunzione a spigolo, una sfocatura o un'ombra richiedono più spazio di quanto suggeriscano le sole coordinate del tracciato; la specifica di pittura SVG definisce come larghezza, estremità, giunzioni e limiti degli spigoli estendano il risultato dipinto intorno al tracciato. Se una forma chiusa richiede la linea interamente all'interno o all'esterno del tracciato, usa la guida all'allineamento interno o esterno del tratto per confrontarne l'ingombro dipinto prima di ridimensionare la tavola da disegno.

Fai una prova spostando l'oggetto verso l'interno o ingrandendo temporaneamente il viewBox. Se la parte mancante ritorna, aggiungi un margine deliberato intorno alla grafica visibile. Non continuare ad ampliare l'area di lavoro alla cieca: calcola lo spazio per larghezza massima del tratto, estremità, giunzioni ed effetti.

Controlla anche i riferimenti clipPath e mask. Un ritaglio dimensionato sui limiti del riempimento può tagliare il tratto che li supera. Gli elementi SVG annidati possono creare propri viewport e il comportamento di overflow può differire tra browser e importatore di uno strumento di progettazione.

Quando scompare solo un angolo, cerca un'interazione con un valore alto di stroke-miterlimit. Uno spigolo acuto può estendersi molto oltre il tracciato. Una giunzione arrotondata o smussata può essere più appropriata dell'ampliamento del viewport, ma solo se conserva il disegno previsto.

Causa 3: scala o trasformazioni rendono ingannevole il tratto

Una trasformazione può cambiare sia la geometria dell'oggetto sia il tratto apparente. Una linea adeguata alle dimensioni di creazione può diventare sottilissima dopo l'importazione, soprattutto quando l'applicazione ricevente interpreta diversamente unità o trasformazioni annidate.

Cerca nell'SVG transform="scale(...)" sul tracciato e sui gruppi genitori. Confronta viewBox, width e height del documento, poi prova all'ingrandimento del 100% e alle dimensioni fisiche finali. Se l'intero disegno viene importato con dimensioni errate, correggi la mappatura del documento con la prova di scala SVG a dimensione nota anziché compensare con larghezze arbitrarie dei tratti.

SVG supporta anche vector-effect="non-scaling-stroke". Come spiega il riferimento MDN a vector-effect, il comune valore non-scaling-stroke impedisce alla larghezza del tratto renderizzato di seguire le trasformazioni dell'elemento. Può essere utile per diagrammi di interfaccia e mappe; verifica il risultato nell'importatore previsto, perché fuori dai browser il supporto varia tra applicazioni.

Non aggiungere non-scaling-stroke come soluzione universale. Decidi se la linea deve ridimensionarsi insieme alla grafica. Quando un logo viene ingrandito per la stampa, normalmente i suoi tratti devono crescere con esso. Se una linea di mappa deve restare larga un pixel sullo schermo durante lo zoom, un tratto non ridimensionabile può essere intenzionale.

Causa 4: la destinazione non riproduce l'aspetto

Non ogni linea mostrata in un'applicazione di progettazione è un semplice tratto SVG. Può essere un pennello sensibile alla pressione, un profilo a larghezza variabile, un pennello con motivo, un effetto dinamico, una fusione, un filtro o una pila di aspetti proprietaria. Un esportatore può approssimare quella costruzione e una seconda applicazione può ignorare l'approssimazione.

Esegui una prova di riduzione su una copia:

1. rimuovi il filtro mantenendo il tratto di base;
2. sostituisci un motivo o pennello con un normale tratto pieno;
3. rimuovi la larghezza variabile;
4. appiattisci le trasformazioni annidate;
5. esporta il singolo oggetto come SVG minimo;
6. apri quel file nella destinazione.

La prima semplificazione che ripristina la linea identifica la funzione non supportata. Puoi quindi scegliere un sostituto portabile anziché appiattire l'intero documento.

CSS e risorse esterni sono un altro rischio per la portabilità. Un SVG incorporato in un sito può ereditare dalla pagina una regola di classe o una proprietà personalizzata, mentre lo stesso file aperto da solo non lo fa. Al contrario, un editor desktop può scartare selettori che non sa associare al proprio modello di oggetti. Per un file di consegna autonomo, usa stili autosufficienti che l'applicazione di destinazione dimostri di importare.

Tratto modificabile o tracciato convertito in contorni?

Un tratto modificabile conserva un tracciato centrale più impostazioni di larghezza, estremità, giunzione, tratteggio e pittura. È compatto e semplice da regolare. Un tratto convertito in contorni trasforma la fascia visibile in geometria di tracciati pieni. Questo fissa l'aspetto, ma sacrifica linea centrale e controlli originali del tratto.

Converti in contorni una copia da consegnare quando la destinazione non conserva un pennello essenziale o un aspetto a larghezza variabile, oppure quando un fornitore richiede esplicitamente geometria piena. La documentazione Adobe su Expand descrive l'espansione dei tratti nei loro oggetti componenti.

Conserva l'originale con tratti modificabili perché l'espansione può:

• aumentare numero di nodi e dimensione del file;
• rallentare i cambiamenti di larghezza;
• trasformare le sovrapposizioni in geometria complicata;
• creare pezzi separati da unire;
• cambiare il significato dei tracciati aperti per plotter, incisione o animazione.

L'espansione è particolarmente rischiosa quando un plotter a penna o un procedimento di incisione prevede che l'utensile segua una sola volta il tracciato centrale. Il tratto convertito fornisce alla macchina due confini. Per quel lavoro usa invece la guida agli SVG a linea singola.

Scegli la correzione per la destinazione

Prova la destinazione esatta, non soltanto un altro editor dello stesso produttore. Browser, area di progettazione, processo di stampa, macchina da taglio e importatore CAD possono supportare sottoinsiemi diversi di SVG.

Un ordine sicuro per la correzione

Procedi dai controlli reversibili alla conversione strutturale:

1. conserva la sorgente modificabile e crea una copia;
2. verifica che la geometria esista;
3. confronta due motori di visualizzazione;
4. prova pittura del tratto, larghezza e opacità esplicite;
5. controlla contrasto dello sfondo e CSS ereditati;
6. esamina limiti della pagina, ritagli, maschere e viewport annidati;
7. controlla trasformazioni e visualizzazione alle dimensioni finali;
8. semplifica un aspetto non supportato alla volta;
9. converti in contorni solo i tratti necessari in una copia da consegnare;
10. riapri l'SVG consegnato e confrontalo con la sorgente.

Non usare la rasterizzazione come correzione intermedia quando sopravvivono buoni tracciati. Elimina la geometria che cerchi di conservare e aggiunge un ricalco che può ammorbidire gli angoli, cambiare le curve e creare nodi inutili.

Dove serve PerfectVector

PerfectVector è utile solo quando la geometria vettoriale originale è perduta o inutilizzabile e la migliore sorgente rimasta è un'immagine raster. Può ricostruire un logo, un'icona o un'illustrazione piatta adatti in forme vettoriali modificabili.

Non corregge CSS, non ripristina un tratto modificabile omesso e non converte un pennello non supportato conservandone la linea centrale modificabile. Se il tracciato esiste ancora, correggine pittura, limiti, trasformazioni o aspetto in un editor vettoriale. Conserva più informazioni rispetto al ricalco di uno screenshot.

Domande frequenti

Perché i tratti SVG scompaiono dopo l'esportazione? Il tracciato può esistere ancora ma non avere un tratto visibile, avere opacità zero, un colore uguale allo sfondo, una larghezza estremamente sottile, un ritaglio, un problema di scala o un aspetto che la destinazione non importa. Verifica prima la geometria, poi isola pittura, limiti, trasformazioni e supporto.

Come verifico se il tracciato esiste ancora? Seleziona l'oggetto mancante in un editor vettoriale e passa alla vista contorni o wireframe. Puoi anche aprire l'SVG come testo e cercare l'elemento tracciato o forma corrispondente. Nodi esistenti senza linea visibile indicano un problema di visualizzazione o stile anziché geometria assente.

Perché un tratto è ritagliato al bordo di un SVG? Un tratto supera il tracciato centrale, quindi un tracciato sul confine del viewBox può perdere metà larghezza. Anche estremità, giunzioni, filtri, ritagli e maschere possono richiedere più margine. Sposta il tracciato verso l'interno o dimensiona deliberatamente viewport e ritaglio intorno all'intero aspetto.

Devo espandere i tratti SVG prima dell'esportazione? Solo quando la destinazione non conserva un aspetto essenziale del tratto o richiede esplicitamente geometria piena. Espandi una copia da consegnare e conserva l'originale con tratti modificabili. L'espansione aggiunge geometria ed è inadatta quando un plotter o uno strumento di incisione deve seguire un'unica linea centrale.

PerfectVector può ripristinare un tratto SVG mancante? Non da un SVG il cui tracciato o stile richiede soltanto una correzione. PerfectVector può ricostruire la grafica visibile dal migliore raster rimasto quando la geometria vettoriale originale non è disponibile, ma non recupera CSS, impostazioni dei pennelli o tracciato centrale modificabile originale.

Fonti

1. W3C — Pittura SVG 2 — Definisce riempimento, tratto, larghezza, estremità, giunzioni ed effetti vettoriali.
2. W3C — Sistemi di coordinate SVG 2 — Documenta viewport, viewBox, unità e trasformazioni.
3. MDN — vector-effect — Spiega il comportamento di non-scaling-stroke.
4. Adobe Illustrator — Raggruppare ed espandere oggetti — Documenta l'espansione dei tratti in oggetti componenti modificabili.

---

Quando la geometria vettoriale originale è perduta e la migliore sorgente rimasta è raster, ricostruisci la grafica in tracciati vettoriali puliti con PerfectVector, poi verificala nell'app di destinazione. Se i tracciati esistono ancora, correggi l'SVG anziché ricalcarlo di nuovo.