Perché i colori SVG cambiano dopo l'esportazione

Un SVG cambia colore dopo l'esportazione quando l'aspetto sorgente e il file consegnato vengono interpretati diversamente. L'esportatore può convertire i valori colore. Un sito può sovrascrivere fill tramite CSS o risolvere currentColor da un genitore. Una sfumatura, impostazione di opacità, modalità di fusione o filtro possono dipendere da una funzione gestita diversamente dalla destinazione. A volte il markup esportato è corretto e un singolo importatore si comporta diversamente.

Non iniziare sostituendo ogni valore esadecimale. Prima individua il punto in cui cambia l'aspetto. Questo indica se correggere l'SVG, cambiare l'esportazione, semplificare una copia di consegna o mantenere la grafica in un altro formato.

Abbina il sintomo al primo controllo

Dove guardare prima

Isola il problema in cinque minuti

1. Mantieni intatto il master modificabile

Salva un duplicato per le prove. Non appiattire effetti, convertire ogni oggetto in contorni o sostituire colori nell'unica copia modificabile. Queste modifiche possono nascondere la causa e rendere il file più difficile da correggere dopo.

2. Apri l'SVG esportato in due posti

Usa un browser attuale come controllo neutrale, poi apri o importa lo stesso file nella destinazione reale. Confronta entrambi con la grafica sorgente sullo stesso sfondo.

• Se entrambe le visualizzazioni esportate sono sbagliate, indaga l'esportatore o l'SVG serializzato.
• Se il browser autonomo è corretto e la destinazione sbagliata, indaga incorporamento, CSS o supporto dell'importatore.
• Se differiscono soltanto regioni trasparenti o fuse, prova sfondo ed effetti prima di toccare i riempimenti uniformi.

Un browser è un controllo utile, non la prova che ogni app grafica o di produzione importerà lo stesso insieme di funzioni.

3. Ispeziona le istruzioni di pittura

Apri l'SVG in un editor di testo e cerca:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

Stai cercando la struttura, non riscrivendo ancora. Un valore letterale fill="#2F6BFF" indica un percorso diverso da fill="currentColor" o fill="url(#paint0)".

Se è la prima volta che apri markup SVG, la guida più ampia a modificare un SVG spiega i percorsi tramite codice ed editor visivo.

4. Riduci un oggetto problematico

Copia in un nuovo documento il più piccolo oggetto che cambia ancora ed esportalo. Rimuovi una funzione alla volta: prima il filtro, poi la modalità di fusione, poi la sfumatura e infine l'opacità del gruppo. La prima rimozione che corregge il risultato identifica la funzione non supportata o dipendente dal contesto.

Questa prova di riduzione è più sicura dell'appiattimento dell'intera illustrazione perché dà un vincolo di consegna specifico.

Causa 1: l'esportatore ha convertito lo spazio colore

I colori esadecimali e la nota sintassi rgb() descrivono colori sRGB. I CSS moderni possono anche esprimere spazi con gamma più ampia come Display P3 tramite color(), come definito da CSS Color Module Level 4. Un'app grafica può quindi contenere un colore sorgente che richiede conversione prima di diventare un valore esadecimale sRGB, e la conversione può cambiare i numeri o limitare un colore fuori gamma.

Controlla il problema in questo ordine:

1. annota spazio colore del documento sorgente e valore numerico dell'oggetto selezionato;
2. esporta un unico oggetto uniforme senza opacità o effetti;
3. apri l'SVG come testo e leggi il fill o stroke serializzato;
4. confronta il numero esportato con la sorgente;
5. prova lo stesso file nella destinazione.

Se il valore è cambiato nel file, la conversione è avvenuta durante l'esportazione. Scegli consapevolmente lo spazio colore obiettivo ed esporta nuovamente. Se il valore è invariato ma l'aspetto differisce, passa a CSS, effetti, sfondo o comportamento dell'importatore.

Per lavori di stampa che richiedono separazioni CMYK, colori spot o una specifica composizione del nero, mantieni il master autorevole per la stampa nel formato nativo dell'app grafica e consegna il formato richiesto dalla tipografia, spesso PDF. Un SVG può comunque essere utile per lo schermo, ma non deve diventare silenziosamente il riferimento colore di un flusso che non può descrivere affidabilmente.

Causa 2: currentColor o CSS hanno sostituito la pittura

SVG può essere formattato tramite CSS. La specifica degli stili SVG 2 afferma che attributi di presentazione come fill partecipano alla cascata CSS con specificità zero, quindi i CSS dell'autore possono sovrascriverli. Un SVG inline condivide anche il documento con la pagina circostante, quindi nomi di classi generici possono collidere con gli stili del sito.

currentColor è un riferimento indiretto intenzionale. Il riferimento MDN al colore SVG spiega che fornisce un valore per fill, stroke, punti di colore delle sfumature e altre proprietà di pittura. È utile per icone che devono seguire il testo circostante, ma significa anche che il file non ha un colore fisso in quel punto.

Usa una delle due strategie di consegna:

• Per un'icona web adattabile al tema, mantieni currentColor e imposta un color esplicito sull'SVG o sul genitore previsto.
• Per una risorsa autonoma che deve mantenere la propria palette, scrivi riempimenti e tratti espliciti e delimita le classi interne con nomi che non collidano.

Quando più SVG inline contengono ID come paint0, clip0 o gradient1, rendili univoci e aggiorna insieme i riferimenti. Non cambiare soltanto l'id; ogni url(#id) deve ancora risolversi.

Se l'obiettivo è una ricolorazione deliberata anziché recuperare un cambiamento nell'esportazione, usa la guida separata a cambiare i colori SVG in sicurezza.

Causa 3: una sfumatura o un riferimento di pittura si è interrotto

Sfumature e motivi SVG sono server di pittura. Una forma vi punta tramite un riferimento come fill="url(#brandGradient)", mentre la definizione della sfumatura generalmente vive in <defs>. La specifica dei server di pittura SVG 2 definisce anche come coordinate e trasformazioni delle sfumature influenzino il risultato.

Tre controlli intercettano la maggior parte dei problemi strutturali:

1. ogni url(#id) ha una definizione corrispondente;
2. gli ID restano univoci dopo aver combinato più SVG in una pagina o documento;
3. la destinazione conserva tipo di pittura, unità, trasformazioni e punti di colore delle sfumature usati dal file.

Se un riempimento uniforme semplice si importa correttamente ma la sfumatura no, mantieni la sfumatura nel master e crea una copia di consegna per la destinazione. Prova prima una sfumatura lineare o radiale più semplice. Se la destinazione ancora non la riproduce e l'aspetto esatto conta più della pittura modificabile, usa un formato o una risorsa appiattita supportati dal flusso ricevente. Etichetta chiaramente quella copia affinché non sostituisca la sorgente modificabile.

Causa 4: opacità e fusione hanno cambiato il risultato visibile

Il pixel visibile non è sempre il riempimento memorizzato. fill-opacity influenza il riempimento di una forma, l'opacity del gruppo viene applicata dopo aver combinato i figli e una modalità di fusione mescola la sorgente con lo sfondo. La specifica W3C Compositing and Blending definisce ordine di renderizzazione e formule di fusione dipendenti dallo sfondo.

Ci sono due conseguenze pratiche:

• Lo stesso SVG può apparire diverso su bianco, nero o una pagina colorata senza che cambi alcun valore colore.
• Spostare l'opacità da un gruppo a ogni figlio può cambiare le sovrapposizioni perché cambia l'ordine di compositing.

Prova sullo sfondo reale. Poi rimuovi mix-blend-mode, filtri, maschere e opacità del gruppo uno alla volta su un duplicato. Se la destinazione non conserva un effetto essenziale, scegli tra un trattamento vettoriale semplificato e una risorsa di consegna appiattita. Non appiattire parti estranee del disegno.

Un rettangolo bianco o colorato dietro la grafica è un caso separato. La guida agli SVG con sfondo trasparente mostra come distinguere una vera forma di sfondo da un'area vuota.

Causa 5: la destinazione ha importato soltanto parte dell'SVG

SVG è uno standard web, ma molti strumenti desktop, di stampa, taglio, presentazione e creazione di siti lo traducono nel proprio modello di oggetti. Il supporto può differire secondo applicazione e versione. Evita regole come «questa app non supporta mai le sfumature», salvo che lo dica la documentazione ufficiale attuale e corrisponda alla tua versione esatta.

Usa invece una prova di importazione controllata:

1. importa un singolo tracciato con riempimento uniforme;
2. aggiungi la sfumatura originale;
3. aggiungi l'opacità;
4. aggiungi fusione o filtro;
5. fermati alla prima versione che cambia.

Ora conosci il limite di quella destinazione. Mantieni il master completo ed esporta una copia di consegna entro il limite provato. Se sono i tratti a scomparire, segui la diagnosi di esportazione specifica dei tratti anziché convertire ogni linea in riempimento.

Scegli la minima correzione sicura

Dove si inserisce PerfectVector

PerfectVector è utile quando la sorgente vettoriale è già persa o inutilizzabile e la migliore grafica rimasta è raster. Puoi trasformare quell'immagine in forme vettoriali modificabili, poi ispezionare palette, trasparenza e tracciati prima di aprire il risultato nella destinazione.

Non corregge CSS ereditati, non ripristina definizioni di sfumatura mancanti, non recupera il profilo colore di un'app grafica, non preserva modalità di fusione non supportate e non cambia il parser dell'importatore. Se l'SVG contiene ancora buoni tracciati e istruzioni di pittura, correggi il file anziché ricalcare uno screenshot. Questo conserva più struttura originale.

Lista di controllo della consegna

• Mantieni il master modificabile e applica le correzioni in un duplicato.
• Confronta il file esportato nel browser e nella destinazione reale sullo stesso sfondo.
• Controlla se sono cambiati i valori serializzati di fill e stroke.
• Cerca currentColor, classi generiche e ID ripetuti.
• Abbina ogni riferimento url(#id) alla sua definizione.
• Prova separatamente opacità dei gruppi, modalità di fusione, filtri e maschere.
• Semplifica soltanto la funzione che la destinazione non riesce a riprodurre.
• Riapri o reimporta il file finale di consegna prima di sostituire la versione precedente.

FAQ

Perché il mio SVG appare corretto nel browser ma sbagliato dopo l'importazione? Probabilmente usa una funzione o un contesto di stile che la destinazione traduce diversamente. Importa un tracciato uniforme, poi aggiungi di nuovo sfumatura, opacità, fusione o filtro uno alla volta. Il primo passaggio che fallisce identifica il limite della destinazione senza danneggiare il master.

I file SVG sono sempre RGB? I comuni colori esadecimali e rgb() sono sRGB, mentre i CSS moderni possono esprimere anche spazi come Display P3. App grafiche e di stampa possono convertirli durante esportazione o importazione. Ispeziona il colore serializzato e usa il formato di produzione richiesto dalla tipografia per lavori CMYK o con colori spot.

Perché il mio SVG è diventato nero dopo l'esportazione? Controlla se usa currentColor, ha perso una regola CSS o fa riferimento a una sfumatura o un ID di pittura mancanti. Il nero può essere un colore ereditato o un sintomo di ripiego anziché la sostituzione del riempimento originale. Confronta il file autonomo con la versione incorporata o importata.

Dovrei sostituire ogni valore esadecimale quando i colori appaiono sbagliati? No. Prima determina se i valori sono cambiati durante l'esportazione. Se i numeri sono intatti, sostituirli può nascondere un problema di CSS, riferimenti di pittura, fusione, sfondo o importatore e rendere il file meno accurato altrove.

PerfectVector può correggere un SVG con colori cambiati dopo l'esportazione? Non quando l'SVG richiede soltanto la correzione di CSS, sfumature, opacità, profilo o comportamento dell'importatore. PerfectVector è adatto quando il vettore originale è perso e devi ricostruire grafica raster piatta adatta come forme vettoriali modificabili.

Fonti

1. W3C — Stili SVG 2 — Definisce stili CSS, attributi class e style, attributi di presentazione, cascata ed ereditarietà in SVG.
2. MDN — Attributo SVG color — Spiega come currentColor fornisca valori di pittura per riempimenti, tratti, punti di colore delle sfumature e proprietà collegate.
3. W3C — Server di pittura SVG 2 — Definisce sfumature lineari e radiali, riferimenti di pittura, sistemi di coordinate, trasformazioni e interpolazione colore.
4. W3C — CSS Color Module Level 4 — Definisce sintassi colore sRGB e spazi predefiniti più ampi, incluso Display P3.
5. W3C — Compositing and Blending Level 1 — Definisce gruppi di opacità, ordine di compositing, sfondi e modalità di fusione per SVG e CSS.

Se la migliore sorgente rimasta è un PNG o JPG, ricostruiscila come SVG con PerfectVector, poi confronta il risultato in un browser autonomo e nella destinazione finale prima di sostituire il vecchio file.