PerfectVector
Di Irene Kim9 min di lettura

L'SVG appare vuoto: sette controlli prima di rifarlo

Un SVG vuoto può essere fuori pagina, invisibile, ritagliato, non supportato, malformato o un raster incorporato. Conservalo e verifica sette aspetti prima di rifarlo.

In questa pagina

Se un SVG si apre vuoto, duplica il file prima di salvare o esportare qualsiasi cosa. La grafica potrebbe essere ancora presente ma fuori dal viewBox visibile, dipinta di bianco o trasparente, nascosta da un ritaglio o una maschera, oppure costruita con una funzionalità non supportata da un'app. Salvare nuovamente un documento vuoto può trasformare un file recuperabile in uno davvero vuoto.

Apri la copia in un browser e in un editor vettoriale. Questo confronto è la prima diramazione: visibile in uno e vuoto nell'altro indica di solito supporto dell'app o struttura del documento; vuoto ovunque suggerisce soprattutto viewport, colori, ritagli, markup non valido o contenuti mancanti.

I sette controlli
  1. Conserva l'originale e controlla le dimensioni del file.
  2. Confronta un browser con un editor vettoriale.
  3. Seleziona tutto e controlla i limiti degli oggetti.
  4. Confrontali con viewBox, width e height.
  5. Controlla riempimento, tratto, opacità, display e visibility.
  6. Esamina ritagli, maschere, pattern, filtri, <image> e <foreignObject>.
  7. Valida o riesporta il markup prima di decidere di vettorizzare di nuovo.

I controlli sono una mappa diagnostica, non sette riparazioni scollegate. Conferma che esista geometria, poi prova limiti, scala, colori, ritagli, effetti supportati e dipendenze prima di sostituire qualcosa.

Mappa diagnostica concettuale intorno a una tavola SVG vuota con geometria esistente, grafica fuori pagina, scala minuscola, bianco su bianco, ritaglio, effetti non supportati e immagine esterna mancante
Illustrazione diagnostica: una tela vuota può derivare da problemi di contenuto, viewport, scala, colori, ritagli, supporto o dipendenze.

1. Conserva il file e verifica che contenga dati

Crea una copia con un nuovo nome. Poi controllane le dimensioni e aprila in un editor di testo semplice.

Un file di zero byte o un documento con il solo elemento radice <svg> vuoto offre poco da recuperare. Un file che contiene tracciati, gruppi, stili o un grande blocco di dati codificati non è vuoto solo perché la tela sembra vuota.

Non dedurre troppo da dimensioni elevate. Il file potrebbe contenere un'immagine incorporata ad alta risoluzione, stili ripetuti o dati malformati. Le dimensioni indicano soltanto che vale la pena approfondire.

2. Confronta un browser e un editor vettoriale

Trascina l'SVG in un browser aggiornato, poi apri la stessa copia in Inkscape, Illustrator, Figma o un altro editor vettoriale.

BrowserEditorCausa probabile
VisibileVuotoFunzionalità non supportata, contenuto web incorporato, pattern, filtro, maschera o limite dell'importatore
VuotoVisibileProblema di markup per il browser, CSS, risorsa o sicurezza
VuotoVuotoViewport, colori, ritaglio, markup malformato o contenuto mancante
VisibileVisibileIl sintomo originale può riguardare miniature, metodo di importazione o una specifica app

Un browser che mostra il file non prova che contenga tracciati vettoriali portabili. I browser possono renderizzare raster incorporati e contenuti web che CAD o editor vettoriali ignorano.

3. Seleziona tutto e controlla i limiti

Nell'editor vettoriale usa Select All. Cerca riquadro di selezione, coordinate, larghezza e altezza.

  • Un riquadro molto lontano dalla pagina indica grafica fuori dalla tela.
  • Una selezione enorme può indicare un punto estraneo, un oggetto di ritaglio o un rettangolo di sfondo.
  • Un riquadro normale con grafica invisibile suggerisce colori, opacità o ritaglio.
  • Nessun oggetto selezionabile suggerisce contenuti non supportati, documento vuoto o importazione fallita.

Se gli oggetti sono fuori dalla tela, sposta la selezione sulla pagina o adatta la pagina al disegno. Evita di ridimensionare i tracciati se le loro dimensioni reali non sono anch'esse sbagliate.

4. Confronta la grafica con il viewBox

Apri l'SVG come testo e controlla l'elemento radice:

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

I quattro numeri del viewBox sono x minimo, y minimo, larghezza e altezza, come definisce la specifica dei sistemi di coordinate SVG. Una grafica con coordinate intorno a 10000,10000 non apparirà dentro viewBox="0 0 800 600". Una dimensione del viewBox pari a zero o negativa disabilita il rendering dell'elemento.

Correggi i limiti visibili in base alla geometria effettiva. Non incollare un viewBox casuale da un altro file. La guida agli SVG di dimensioni errate spiega come interagiscono viewBox e dimensioni del viewport quando la grafica è visibile ma ridimensionata male.

5. Controlla colori e visibilità

Seleziona un oggetto e controlla riempimento e tratto. Gli stati invisibili comuni includono:

  • fill="none" senza tratto;
  • riempimento bianco su tela bianca;
  • opacity="0", fill-opacity="0" o stroke-opacity="0";
  • display="none" o visibility="hidden";
  • una classe il cui foglio di stile applica uno di questi valori;
  • un tratto estremamente sottile alla scala attuale.

Metti temporaneamente un rettangolo colorato dietro la grafica oppure assegna un riempimento vistoso a una copia di un tracciato. Se appare, ripristina gli stili previsti invece di lasciare il colore diagnostico nel file finale.

Se i riempimenti restano visibili ma singole linee spariscono dopo l'esportazione, usa la guida ai tratti SVG che scompaiono per provare colori dei tratti, ritaglio, scala e aspetti non supportati senza ricalcare geometria valida.

6. Esamina le funzionalità non supportate dalla destinazione

Cerca nel markup clipPath, mask, pattern, filter, <image> e <foreignObject>.

Ritagli e maschere possono nascondere tutto se sistemi di coordinate o riferimenti si rompono; il modello di rendering SVG colloca ritaglio, mascheratura, filtri e compositing nella sequenza di rendering. Pattern e filtri possono rendere diversamente nei vari importatori. Un elemento <image> incorpora contenuti immagine nel contenitore SVG, mentre <foreignObject> può contenere dati di un altro namespace XML, come descrive la specifica dei contenuti incorporati SVG.

Se le forme restano ma le etichette HTML scompaiono, confronta foreignObject e testo SVG nativo e sostituisci solo l'etichetta problematica.

Se i tracciati sono visibili ma un'ombra viene tagliata, diagnostica un'ombra SVG ritagliata provando separatamente la regione del filtro e il viewport esterno.

Anche i riferimenti possono fallire. Controlla che gli ID usati da url(#name) esistano davvero e siano unici. Se l'SVG dipende da un'immagine esterna, un font, un foglio di stile o un file collegato, lo spostamento potrebbe aver interrotto l'accesso alla risorsa.

Per un'app Qt, la guida al rendering SVG in Qt separa i controlli di moduli e caricamento dai limiti delle funzionalità supportate. Confronta prima una fonte piccola, poi esamina la grafica nel percorso di rendering scelto.

Quando il browser mostra il disegno ma il CAD non importa nulla, cerca geometria vettoriale ordinaria come <path>, <rect> e <circle>. Un PNG incorporato visibile non ha curve utilizzabili dal CAD.

7. Valida o riesporta il file

XML malformato, attributi non validi e strutture specifiche dell'esportatore possono essere tollerati da un renderer e rifiutati da un altro. Se hai il disegno sorgente, riaprilo nell'app che lo ha creato ed esporta una copia SVG semplice o semplificata. Espandi soltanto le funzionalità che la destinazione non gestisce e confronta il nuovo file con la fonte.

Se non hai il sorgente, usa un validatore SVG/XML o un editor di testo che segnali errori di sintassi. Lavora su una copia e correggi prima il primo errore strutturale: i messaggi successivi potrebbero esserne conseguenze.

Non eseguire un ottimizzatore sull'unica copia. L'ottimizzazione riscrive la struttura e può rendere più difficile il recupero quando il problema non è chiaro.

Quando ricostruire o vettorizzare di nuovo

Una nuova vettorizzazione è appropriata quando il file contiene solo un raster incorporato, la struttura SVG generata è inutilizzabile fuori dal browser o non sopravvive alcuna fonte modificabile. Estrai o trova il raster di qualità più alta, poi ricalcalo in veri tracciati.

Non è la soluzione giusta per tracciati fuori pagina, un viewBox errato, riempimenti bianchi o una sola maschera non supportata. Questi file hanno già geometria, e conservarla evita una perdita di qualità inutile.

Se tutto il disegno si seleziona come un'immagine di pixel o appare a blocchi con un forte zoom, usa la diagnosi dei pixel nascosti prima di ricostruirlo.

Dove entra PerfectVector

Il procedimento da immagine a vettore di PerfectVector è per il caso solo raster. Carica il miglior PNG, JPG o un'altra immagine supportata e controlla nell'anteprima vettoriale forme reali, bordi puliti, spazio negativo e tracciati gestibili.

Non ripara markup SVG arbitrario e non recupera risorse esterne. Se il file contiene già buoni tracciati, correggi viewport, stili o funzionalità non supportata nell'editor vettoriale. Se è soltanto un raster dentro un contenitore SVG, ricostruire la grafica visibile come tracciati ti dà un vettore portabile invece di un altro contenitore.

FAQ

Perché l'SVG è vuoto in Illustrator ma visibile in Chrome? Potrebbe usare una funzionalità supportata dal browser ma non importata da Illustrator, come contenuti web incorporati, un pattern complesso, un filtro, una maschera o un contenitore raster. Esamina il markup e verifica che contenga normali tracciati vettoriali prima di riesportare una copia SVG più semplice.

Come trovo la grafica SVG fuori dalla tela? Usa Select All e controlla limiti o coordinate della selezione. Se il riquadro è lontano dalla pagina, spostalo sulla pagina oppure adatta la pagina al disegno. Poi aggiorna il viewBox affinché corrisponda alla geometria visibile prevista.

Un SVG può essere bianco e sembrare vuoto? Sì. Riempimenti o tratti bianchi scompaiono su una tela bianca. Il file può anche usare opacità zero, display="none" o visibility="hidden". Provalo su uno sfondo colorato e controlla gli stili calcolati.

Perché l'SVG viene importato vuoto in Fusion o in un altro CAD? Potrebbe contenere un bitmap incorporato o contenuti web non supportati invece di curve vettoriali. Il CAD richiede geometria di tracciati importabile. Cerca <path> e forme correlate, e controlla se il contenuto visibile si trova invece dentro <image> o <foreignObject>.

Devo convertire un SVG vuoto in PNG e poi di nuovo in SVG? Solo se l'SVG non ha geometria vettoriale recuperabile e l'aspetto raster è la migliore fonte rimasta. Passare dal PNG distrugge la struttura dei tracciati esistenti. Diagnostica prima problemi di viewport, visibilità, ritaglio e supporto.

Fonti

  1. W3C — Sistemi di coordinate SVG 2 — Definisce viewport, viewBox, unità e trasformazioni.
  2. W3C — Modello di rendering SVG 2 — Documenta ritaglio, mascheratura, filtri, compositing e ordine di rendering.
  3. W3C — Contenuti incorporati SVG 2 — Definisce immagini incorporate e contenuti esterni in SVG.
  4. W3C — Servizio di validazione del markup — Offre validazione basata sugli standard per diagnosticare il markup.

Quando il file rimasto è solo pixel dentro un contenitore SVG, ricostruisci la grafica come tracciati vettoriali modificabili e controlla l'anteprima. Quando ci sono già buoni tracciati, conservali e ripara la più piccola parte difettosa del documento.

Altro dal blog

Riparti da un SVG più pulito
e facile da modificare