Cambiare i colori di un SVG e risolvere i problemi

Ci sono tre modi per cambiare il colore di un file SVG, tutti gratuiti. Puoi caricarlo in uno strumento online per cambiare i colori degli SVG e fare clic sul campione da sostituire. Puoi aprirlo in un'app vettoriale come Inkscape, selezionare la forma e scegliere un nuovo riempimento. Oppure puoi aprire il file in un editor di testo e sostituire il codice esadecimale, perché un SVG è semplicemente testo. Cambiare i colori di un vettore non comporta perdita di qualità: riscrivi un'istruzione, senza ridipingere i pixel, quindi nulla si sfoca o si deteriora.

Il metodo da scegliere dipende dal contenuto del file. E quando un SVG non vuole cambiare colore, il motivo è quasi sempre ciò che contiene, non lo strumento che usi. Questa guida presenta prima i tre metodi, poi la diagnosi: i sei motivi più comuni per cui il cambio di colore non funziona, compreso quello che nessuno strumento può risolvere.

Dove un SVG conserva i colori

Un file SVG è un elenco di forme descritte come testo. Ogni forma può avere un fill per l'interno e uno stroke per il contorno, come spiega la guida MDN a riempimenti e contorni SVG. Non esiste un unico «colore dell'immagine» da sostituire in un solo punto. Un disegno che sullo schermo appare monocromatico può essere un unico tracciato ordinato oppure quaranta tracciati separati che condividono lo stesso riempimento.

È tutto qui. Ogni metodo seguente è semplicemente un modo diverso di trovare le forme e riscriverne il fill o lo stroke. Questo spiega anche perché i risultati cambiano tanto da un file all'altro: meno forme ci sono e più sono pulite, più è semplice cambiarne i colori.

Scegli il metodo

Metodo 1: uno strumento online

1. Apri nel browser uno strumento gratuito per i colori SVG e carica il file; quelli validi accettano anche codice SVG incollato.
2. Lo strumento elenca i colori trovati. Quelli utili raggruppano i riempimenti identici, quindi «il blu» è un solo campione anche se copre decine di forme.
3. Fai clic su un campione, scegli il colore sostitutivo e osserva l'anteprima.
4. Scarica il risultato e aprilo una volta in una scheda del browser per verificarlo.

Questo è il metodo giusto per la maggior parte delle persone, nella maggior parte dei casi. Prima di affidare un lavoro vero a uno strumento, controlla due cose: se elenca anche i colori dei contorni e come gestisce le sfumature. Se mostra meno colori di quelli visibili sullo schermo, una parte del file è una sfumatura o un'immagine incorporata, e la semplice sostituzione di un campione non la raggiungerà.

Metodo 2: un'app di grafica vettoriale

Inkscape è gratuito e fa tutto ciò che serve per questo lavoro; Illustrator e Figma funzionano allo stesso modo.

1. Apri l'SVG e fai clic sulla parte da modificare. Se l'intero disegno viene selezionato come un unico blocco, è raggruppato: fai doppio clic per entrare nel gruppo oppure separalo.
2. Cambia il riempimento nel pannello Fill & Stroke di Inkscape o nel campione del riempimento di Illustrator o Figma.
3. Quando un colore visivo è distribuito su molte forme, non selezionarle una per una. Fai clic destro su una forma e usa Select Same → Fill Color in Inkscape, oppure il comando documentato di Illustrator Select → Same → Fill Color. Ora tutte le forme con quel riempimento sono selezionate e una sola modifica le ricolora tutte.
4. Esporta o salva come SVG semplice.

Un'app di grafica serve anche per andare oltre i colori, per esempio spostando le forme o rielaborando le curve. Per questi strumenti aggiuntivi, consulta la nostra guida alla modifica di un SVG.

Metodo 3: un editor di testo

Dato che un SVG è testo, va bene qualsiasi editor: Notepad, TextEdit o VS Code.

1. Apri il file .svg e cerca fill=.
2. Cambia il valore, per esempio da fill="#1e3a5f" a fill="#c2410c", e salva.
3. Aggiorna il file in una scheda del browser per controllare il risultato.

Ci sono tre avvertenze. I colori possono essere scritti come nomi (fill="black") oltre che in esadecimale. I contorni usano stroke=, non fill=. Inoltre, molti file esportati non indicano il colore sulla forma: usano classi, con il valore esadecimale in un blocco <style> vicino all'inizio (.st0{fill:#1e3a5f;}). Modifica il valore nel blocco di stile e tutte le forme con quella classe seguiranno la modifica.

Questo metodo è particolarmente adatto alle icone monocromatiche, dove basta una singola ricerca e sostituzione, e alle modifiche in serie in una cartella. Per un'illustrazione con quaranta colori, è il metodo più lento.

Se l'SVG è su un sito

Puoi cambiare il colore di un SVG con il CSS? Il modo più diretto è inserire il codice SVG inline nell'HTML. In quel caso fill funziona come una proprietà CSS, e impostando i riempimenti su currentColor l'icona eredita il colore del testo circostante. Un SVG caricato come <img> esterno viene trattato come un'immagine; MDN precisa che JavaScript non può manipolare la struttura SVG in questa configurazione, e gli stili della pagina non selezionano direttamente i tracciati interni.

Se non puoi inserire il file inline, devi tornare ai metodi precedenti: cambia il colore all'interno dell'SVG e ricaricalo. Per scegliere come inserirlo nella pagina, confronta SVG inline e immagine esterna usando la stessa grafica e una prova con il CSS della pagina.

Per una sagoma monocromatica dell'interfaccia, le maschere CSS SVG e le forme trasparenti delle icone offrono un'altra possibilità: colora l'elemento dell'icona con il CSS lasciando intatti i colori dei tracciati nell'immagine sorgente.

Per un effetto cromatico reversibile, confronta feColorMatrix con le modifiche dirette del riempimento. Un filtro cambia i colori renderizzati lasciando intatti quelli originali, un aspetto importante quando consegni grafica modificabile.

Perché l'SVG non cambia colore

Questa è la parte che i tutorial saltano, ed è qui che fallisce la maggior parte dei cambi di colore. Segui la tabella dall'alto verso il basso.

Due casi meritano un esame più approfondito.

Il riquadro di sfondo inatteso

Alcuni SVG contengono un rettangolo di sfondo a tutta pagina, invisibile su una pagina bianca. Se ricolori «tutto», il riquadro appare come un blocco colorato dietro il disegno; alcune app lo selezionano anche quando fai clic. È una forma normale, quindi selezionala e cancellala oppure assegnale il colore che vuoi. Se in altri programmi il riquadro appare bianco, si tratta di un problema collegato ma diverso, descritto nella guida per mantenere uno sfondo trasparente.

L'SVG che non è un vettore

Il caso ostinato si presenta così: nessuna forma è selezionabile, ogni modifica al riempimento non produce effetti e, ingrandendo, i bordi mostrano pixel. Apri il file in un editor di testo e, invece degli elementi <path>, trovi un unico tag <image> con una parete di testo base64. È un'immagine raster racchiusa in un contenitore .svg. I convertitori che non eseguono un vero ricalco producono questi file, e nessuno strumento per i colori può aiutarti perché non ci sono forme da ricolorare. I filtri che li «colorizzano» tingono soltanto i pixel, di solito male. I due file sembrano identici sullo schermo, ma nel codice la differenza è evidente:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

La soluzione è tornare all'immagine stessa, idealmente al PNG o JPG originale, e convertirla in un vero vettore con veri tracciati. La nostra guida agli SVG che continuano a sembrare pixelati spiega come nascono questi falsi e come riconoscerli prima di affidarti al file. Una volta create forme reali, tutti i metodi di questa guida iniziano a funzionare.

Ricolorare un file da taglio: ogni colore è un livello

Una Cricut o una Silhouette tratta ogni colore dell'SVG come un livello, e ogni livello comporta un altro passaggio, un altro foglio di materiale e più spellicolatura. Ricolorare un file da taglio significa quindi pianificare i livelli: assegnare lo stesso riempimento a due elementi li riunisce in un unico taglio, mentre dividere un colore crea un nuovo livello.

Questo rende una modifica particolarmente utile per chi crea lavori manuali: unire i colori quasi identici. La grafica ricalcata spesso contiene tre blu praticamente uguali, che aggiungono livelli senza aggiungere nulla di visibile. Uniscili in uno solo e il file si taglierà più velocemente e sarà molto più facile da spellicolare. Il procedimento per ridurre la palette SVG mostra come unire i colori in base alla funzione visiva senza cancellare il contrasto o il significato delle operazioni. Se stai creando intenzionalmente disegni a più livelli, la nostra guida agli SVG a livelli descrive l'intero procedimento, mentre la pagina SVG per Cricut tratta la preparazione della grafica per le macchine da taglio dall'inizio alla fine.

Se dopo il cambio di colori ti servono file scaricabili separati, salva ogni colore esatto come file SVG allineato.

Come funziona con PerfectVector

Prima, un limite da chiarire: PerfectVector non modifica i file SVG che possiedi già. Converte immagini PNG, JPG e WebP in SVG. Ma molti problemi del tipo «come ricoloro questo SVG?» risalgono proprio alla conversione: il file che resiste è di solito un ricalco disordinato, oppure non è affatto un vero vettore.

Quindi, quando l'SVG proviene da un'immagine o hai ancora l'originale, il cambio di colori più pulito parte dalla fonte. Converti l'immagine in un SVG pensato per essere modificato: tracciati puliti, pochi nodi e ogni colore conservato come forma modificabile indipendente. Poi usa l'editor dei colori integrato prima di scaricare, per sostituire qualsiasi colore o unire quelli simili lavorando per colore, senza cercare i singoli tracciati. Ottieni la palette desiderata e un file più semplice con la stessa operazione; le prime conversioni sono gratuite e non richiedono una carta di credito.

Cosa non può fare un cambio di colori

• Una sfumatura non è un solo campione. È una transizione fra punti colore. Puoi modificarli, ma una semplice operazione «sostituisci questo colore» può cambiare soltanto parte della transizione: ecco perché la grafica con sfumature può apparire strana dopo una sostituzione troppo semplice.
• I colori a schermo non sono i colori di stampa. L'SVG conserva istruzioni cromatiche pensate per lo schermo, mentre un lavoro di stampa può richiedere un colore di marca preciso, una tinta piatta o una determinata composizione del nero. Se un'esportazione cambia ciò che vedi, diagnostica la variazione dei colori SVG prima di sostituire la palette; il formato di produzione richiesto dalla tipografia rimane il riferimento per i colori.
• Ricolorare non pulisce la geometria. I nuovi riempimenti non uniscono frammenti sottili, non chiudono spazi e non riducono i nodi. Un ricalco disordinato con colori nuovi resta disordinato.

Prima di salvare

• Apri da zero il file ricolorato in una scheda del browser e confrontalo con l'originale.
• Controlla i contorni: sono cambiati insieme ai riempimenti dove necessario?
• Cerca un eventuale rettangolo di sfondo ricolorato per sbaglio.
• Per i file da taglio, conta i livelli dopo aver unito i colori: averne meno è quasi sempre meglio.
• Conserva una copia intatta del file originale.

FAQ

Come cambio il colore di un SVG senza Illustrator o Photoshop? Usa uno strumento online gratuito per cambiare i colori degli SVG: carica, fai clic su un campione e scarica. Oppure usa Inkscape, un editor vettoriale desktop gratuito. Per un'icona monocromatica funziona anche aprire il file in un editor di testo qualsiasi e cambiare il valore esadecimale dopo fill=. Tutti questi metodi sono gratuiti.

Perché l'SVG resta nero qualunque cosa provi? Se è su un sito, il CSS non può cambiare lo stile di un SVG caricato tramite un tag img: inseriscilo inline o modifica il file. Se è in un editor, controlla se c'è un gruppo che ostacola la selezione, se il colore proviene da un contorno o se è definito in un blocco di stile. Se nulla è selezionabile e lo zoom mostra pixel, il file è un raster racchiuso in un .svg e non contiene forme da ricolorare.

Si può ricolorare un SVG in Canva? L'editor SVG dedicato di Canva dichiara che puoi caricare, ricolorare e scaricare un SVG gratuitamente e senza filigrana. Le funzionalità SVG complesse possono comunque essere renderizzate diversamente nei vari editor, quindi controlla il file scaricato prima di sostituire l'originale.

Un file SVG può usare più di un colore? Sì. Ogni forma nel file ha il proprio riempimento e contorno, quindi un SVG può contenere tanti colori quante sono le forme, oltre alle sfumature. Per questo ricolorare una grafica multicolore significa cambiare diversi riempimenti, non un'unica impostazione globale.

Come cambio i colori SVG per un progetto Cricut? Puoi ricolorare i livelli in Cricut Design Space, ma il programma lavora per livello, non per forma. Per cambiare quali parti condividono un colore e quindi vengono tagliate insieme, modifica l'SVG prima del caricamento: unisci i colori da tenere sullo stesso livello e assegna un riempimento distinto a tutto ciò che va tagliato separatamente.

Cambiare il colore di un SVG riduce la qualità? No. Il colore di un vettore è un'istruzione testuale, quindi cambiarlo riscrive l'istruzione senza toccare la geometria. A differenza delle modifiche a un PNG, puoi ricolorare un SVG quante volte vuoi senza alcuna perdita di qualità.

Fonti

1. MDN: riempimenti e contorni SVG — Spiega fill, stroke, opacità e le proprietà SVG correlate.
2. MDN: aggiungere grafica vettoriale al web — Confronta gli SVG inline con quelli caricati tramite <img>.
3. Adobe Illustrator: selezionare oggetti con lo stesso riempimento e contorno — Documenta la selezione della grafica in base agli attributi cromatici condivisi.
4. W3C: contenuti incorporati in SVG 2 — Definisce i contenuti raster <image> nei documenti SVG.
5. Canva: editor SVG — Fonte attuale delle dichiarazioni di Canva su caricamento, cambio dei colori e download degli SVG.

Ricolorare un SVG è rapido quando il file collabora: scegli il metodo adatto a ciò che hai e individua la causa prima di lottare con gli strumenti. Se il problema è il file stesso, evita la lotta. Converti l'immagine originale in un SVG pulito e modificabile e scegli i colori quando è ancora facile farlo.