Cambia i colori di un SVG

Cambiare i colori di un SVG

Un SVG è testo. Da qualche parte lì dentro una forma dice fill="#1f2937", ed è tutta lì la ragione per cui l'icona è grigio scuro. Cambia quei sette caratteri e l'icona diventa quello che vuoi.

Il guaio è trovarli. Un vero export da Illustrator o da Figma non mette i colori in un posto ovvio: li sparpaglia fra attributi fill, attributi style, un blocco <style> pieno di regole di classe e gli stop di una sfumatura. Apri il file in un editor di testo e ti ritrovi a cercare, fra mille righe, le undici che contano.

Questo strumento legge tutto il file, raccoglie ogni colore che usa e li mette in una tabella. Cambia il colore a destra di una riga e cambiano con lui tutte le forme che lo usavano, nell'anteprima modificata, mentre scegli. Quello che torna è il tuo file con nuovi valori di colore: nient'altro è stato toccato.

Due modi di cambiare un colore

• Per colore — la tabella sotto le immagini elenca ogni colore distinto del file: a sinistra com'è, a destra come diventa. Ogni riga parte dal proprio originale, quindi non cambia nulla finché non lo dici tu. Cambiane uno e tutti i suoi usi cambiano insieme. È quello che serve per «fai diventare verdi le parti blu» e per ricolorare un'icona su una palette di marca.
• Per forma — clicca una qualsiasi forma nell'immagine e colorala da sola, anche se condivide il colore con altre venti. Il suo riempimento e il suo contorno ricevono valori propri, e nient'altro si muove.

I due modi lavorano insieme: prima imposti la palette, poi sistemi l'unica forma che doveva essere diversa.

Tutto di un colore solo

Di gran lunga il lavoro più frequente. Un'icona arriva in cinque grigi e ti serve bianca piatta per un'intestazione scura, nera piatta per la stampa, o in un colore di marca per una fila di pulsanti.

Scegli un colore, premi Applica, e ogni colore del file diventa quello. Le forme senza riempimento restano senza riempimento, così i contorni restano contorni e i vuoti restano vuoti.

Dove cerca i colori

• fill e stroke scritti come attributi
• Le stesse proprietà dentro un attributo style
• i blocchi <style> — regole di classe come .cls-1 { fill: #231f20; }, che è come Illustrator scrive praticamente ogni export
• stop-color nelle sfumature, così una sfumatura si ricolora stop per stop
• flood-color e lighting-color sui filtri

I colori scritti in qualunque modo il CSS consenta vengono capiti — #f00, #ff0000, rgb(255,0,0), rgba(255,0,0,.5) e nomi come red o darkslategray. La trasparenza è conservata: una forma mezza trasparente resta mezza trasparente nel suo nuovo colore.

Ciò che non tocca

• Le sfumature e i motivi in quanto tali. Gli stop di una sfumatura si possono ricolorare; la sfumatura stessa non viene trasformata in un colore piatto, e una forma riempita con url(#pattern) viene lasciata stare.
• I bitmap incorporati. Un PNG incollato dentro un SVG è una fotografia, non una forma, e non ha un riempimento da cambiare. Per quelli usa Selettore di colore da immagine o un editor di immagini.
• Tutto ciò che non è un colore. Opacità, spessore del tratto, trasformazioni e testo escono come sono entrati.

Non viene caricato nulla

Il file viene letto, ricolorato e riscritto dentro il tuo browser. Non raggiunge mai un server, cosa che conta quando il file è un logo non ancora uscito, il marchio di un cliente o un lavoro sotto riservatezza.

Significa anche nessuna attesa di caricamento, nessun limite di dimensione, e lo strumento continua a funzionare offline una volta caricata la pagina.

Un'eccezione voluta a «non viene cambiato nulla»: se il file contiene un blocco <script>, viene rimosso e la pagina te lo dice. Un'immagine non ha motivo di portarsi dietro codice eseguibile, e questo strumento deve disegnare il file per mostrartelo.

A cosa serve

• Ricolorare un set di icone su una palette di marca senza aprire un programma di grafica
• Rendere un logo bianco piatto per un'intestazione scura, o nero piatto per la stampa
• Sistemare l'unica forma uscita del colore sbagliato
• Produrre versioni chiara e scura della stessa grafica
• Cambiare gli stop di una sfumatura senza ricostruirla
• Provare colori in fretta, dato che l'immagine si aggiorna mentre scegli

Buono a sapersi

• Le due anteprime sono il file prima e dopo, disegnate alla stessa scala — e quella modificata è il documento vero, quindi quello che vedi è esattamente quello che viene scaricato
• Una modifica forma per forma viene scritta come un semplice attributo fill o stroke quando basta, e come style in linea solo quando una regola <style> del file avrebbe la meglio — lo strumento verifica che cosa è successo davvero invece di darlo per scontato
• I colori sono raggruppati per valore, quindi #FFF, #ffffff e white sono una riga sola
• Ogni riga ha il suo annulla, e Rimetti tutti i colori riporta l'intero file a come è arrivato
• Un file con centinaia di colori è quasi sempre una fotografia vettorializzata; sono elencati solo i più usati
• Per ritagliare lo spazio vuoto attorno al risultato, usa Ritaglia SVG
• Per trasformare il risultato in un PNG, usa Da SVG a PNG

Come si usa

• Clicca su Clicca per caricare, oppure trascina il tuo SVG sul riquadro
• Ogni colore del file compare come riga della tabella, l'originale a sinistra
• Imposta il colore a destra — con il selettore o digitando un esadecimale — per cambiarlo ovunque sia usato
• Oppure clicca una forma nell'immagine modificata per colorare solo quella
• Usa Tutto di un colore solo per una versione piatta a tinta unita
• Premi Scarica l'SVG, oppure Copia il codice SVG per incollarlo direttamente in una pagina

Strumenti collegati

• Ritaglia SVG — togliere lo spazio vuoto attorno al risultato
• Da SVG a PNG — trasformare l'SVG ricolorato in un bitmap
• Da SVG a JPG — un SVG come immagine piatta
• Immagine in SVG — vettorializzare prima un logo
• Palette di colori da un'immagine — estrarre una palette da una foto
• Contrasto dei colori — controllare che i colori scelti restino leggibili