Perché il mio SVG diventa nero o perde i colori?
Scopri perché un SVG appare nero, trasparente o con colori errati nel browser, in Canva, Cricut o in un importatore e correggilo.
Risposta rapida
Un SVG diventa spesso nero perché le forme non hanno un riempimento esplicito, dipendono da CSS esterno, ereditano currentColor in un nuovo ambiente oppure perdono un gradiente, una maschera o uno stile durante l’importazione. Il nero è il riempimento predefinito quando non arriva un altro colore. Controlla il file prima di ricolorarlo: normalizza il markup con il pulitore SVG sicuro, poi usa il sostitutore colori SVG soltanto se conosci la palette corretta.
Individuare dove cambia il colore
Apri lo stesso file direttamente in un browser, nell’applicazione finale e in un editor vettoriale. Se è corretto nel browser ma nero dopo il caricamento, l’importatore probabilmente ignora un blocco di stile, una classe, un filtro o un colore ereditato. Se è nero ovunque, il file potrebbe non avere riempimenti validi.
| Sintomo | Causa probabile | Passo sicuro |
|---|---|---|
| Tutto diventa nero | Riempimenti mancanti o CSS rimosso | Aggiungere attributi fill diretti |
| L’icona segue il testo | currentColor è intenzionale | Impostare o sostituire il colore |
| Solo il gradiente è nero | Riferimento interrotto | Riparare l’ID o usare colori piatti |
| Il disegno scompare | fill none, opacità zero o maschera guasta | Controllare riempimento e maschera |
| Colori alterati nel caricamento | Supporto SVG limitato | Trasformare gli stili in attributi |
Riparare senza distruggere
- Conserva una copia intatta.
- Esegui il controllo file SVG e annota stili, currentColor, maschere, filtri, gradienti e immagini.
- Converti le classi necessarie in attributi diretti di riempimento e contorno.
- Mantieni la trasparenza intenzionale e non trasformare un disegno multicolore in monocromatico.
- Assegna ID unici a gradienti e maschere quando più SVG condividono una pagina.
- Prova il file riparato su sfondo bianco, scuro e a scacchi e nell’applicazione finale.
Casi particolari
In un’icona web inline, currentColor è utile perché il CSS ne controlla l’aspetto. Caricato come immagine o in un altro servizio, lo stesso SVG può perdere quel colore. Per una consegna prevedibile usa colori espliciti quando l’aspetto fisso è prioritario.
Alcune applicazioni di taglio supportano solo una parte semplice di SVG. Riempimenti piatti e tracciati sono più affidabili di CSS collegato, filtri o maschere complesse. Semplificare la compatibilità non significa rasterizzare.
Domande frequenti
Perché è nero in Cricut o Canva ma colorato nel browser?
Il browser può applicare stili che l’importatore ignora. Trasforma gli stili necessari in attributi diretti.
Posso recuperare automaticamente i colori originali?
Solo se esistono ancora nel file o conosci la palette approvata. Le informazioni mancanti non possono essere ricostruite con certezza.
Un SVG nero è sempre rotto?
No. Molte icone sono volutamente monocromatiche e usano currentColor affinché l’applicazione circostante scelga il colore.