PerfectVector
Di Claire Yoon10 min di lettura

Ridurre i colori di un SVG senza rovinare la grafica

Riduci la tavolozza SVG in base al ruolo visivo, non a un numero arbitrario. Unisci colori simili conservando contrasto, spazi vuoti, livelli e operazioni.

In questa pagina

Per ridurre in sicurezza i colori di un SVG, raggruppali secondo la loro funzione nella grafica e poi unisci i quasi duplicati all'interno di ciascun gruppo. Mantieni separati i colori con significati diversi, come luci e ombre, primo piano e sfondo oppure operazioni di taglio e marcatura.

L'errore comune è scegliere un obiettivo come «quattro colori» e lasciare ogni decisione a uno strumento di raggruppamento automatico. Può essere un primo passaggio utile, ma la tavolozza finale richiede una verifica visiva e produttiva. Due blu quasi identici possono essere uniti senza problemi. Due grigi altrettanto simili possono invece essere l'unico contrasto che distingue un occhio dal volto.

Una riduzione sicura della tavolozza
  • Salva una copia intatta.
  • Elenca riempimenti, tratti, gradienti e opacità.
  • Assegna ai colori un nome basato sul ruolo prima di cambiare i valori esadecimali.
  • Unisci colori simili un ruolo alla volta.
  • Controlla contrasto, fori e piccoli dettagli alle dimensioni finali.
  • Per Cricut o file produttivi, verifica che colori delle operazioni e livelli mantengano lo stesso significato.

Ricolorare e ridurre i colori sono lavori diversi

Ricolorare significa sostituire un valore con un altro. Se un logo blu diventa verde ma usa ancora lo stesso numero di riempimenti, la dimensione della tavolozza non cambia.

La riduzione dei colori fa convergere più valori in un numero inferiore di valori. Un ricalco può contenere #173f75, #184076 e #194177 perché i pixel con antialiasing sono diventati regioni separate. Assegnare a tutti e tre lo stesso blu riduce la tavolozza e, dopo la pulizia della geometria, il numero di frammenti da gestire.

LavoroPrimaDopo
RicolorazioneTre bluTre verdi
Riduzione della tavolozzaTre blu quasi identiciUn blu
Riduzione dei livelliDiverse forme o livelli con lo stesso ruoloUn livello produttivo, dove la geometria lo consente

Queste operazioni possono avvenire insieme, ma non sono intercambiabili. La guida a come cambiare i colori SVG tratta la sostituzione diretta dei colori. Questo articolo aiuta a decidere quali colori possono diventare uno solo.

Una volta definita la tavolozza, il procedimento di separazione dei colori sulla stessa tavola da disegno esporta un file allineato per ogni colore esatto, senza annullare quelle decisioni.

Prima trova i colori effettivamente usati nel file

Apri l'SVG in un editor vettoriale che elenchi i colori del documento o selezioni gli oggetti per riempimento. Illustrator, per esempio, documenta la selezione di oggetti con lo stesso riempimento e tratto. Per un file semplice, anche un editor di testo mostra i valori espliciti fill e stroke.

Conta più dei soli codici esadecimali:

  • Riempimenti pieni delle forme
  • Colori dei tratti dei contorni
  • Punti di colore dei gradienti
  • Opacità che fa apparire un colore più chiaro sopra uno sfondo
  • Stili memorizzati in classi anziché direttamente sulle forme
  • Immagini raster incorporate, i cui colori dei pixel non costituiscono una tavolozza SVG

Dieci valori esadecimali elencati non significano sempre dieci colori visibili. Lo stesso valore a opacità diverse può apparire diverso. Un gradiente può contenere solo due punti di colore ma mostrare molti toni intermedi. Un <image> raster può mostrare migliaia di colori mentre l'SVG circostante ha un solo riempimento. La specifica di pittura SVG distingue colori pieni, gradienti, motivi, opacità di riempimento e tratto e altri comportamenti di pittura.

Se il file contiene un raster dentro un contenitore anziché forme modificabili, la riduzione dei colori va eseguita prima o durante un nuovo ricalco. Il controllo degli SVG pixelati ti dirà se esistono veri tracciati da modificare.

Dai ai colori nomi basati sul ruolo

Prima di cambiare i valori, crea una piccola mappa della tavolozza:

RuoloColori attualiTenerli separati?
Silhouette principaleBlu navy scuro, quasi navyDi solito unirli
LuceAzzurro chiaroConservarlo se definisce la forma
ContornoNeroConservarlo se il bordo è intenzionale
SfondoRettangolo biancoRimuoverlo se è prevista trasparenza
Operazione di taglioRossoMantenerlo separato da marcatura o incisione

Questo impedisce alla somiglianza automatica di prendere la decisione sbagliata. La distanza cromatica è utile, ma prevale il contesto. Una piccola luce accanto a una forma scura può richiedere una separazione numerica inferiore rispetto a due grandi regioni di sfondo, eppure contribuire maggiormente alla leggibilità.

Associa i colori simili ai loro compiti prima di scegliere quelli da conservare. Una tinta di sfondo, un riempimento principale, un contorno e un accento focale possono essere numericamente vicini ad altri campioni, ma ciascuno ha un motivo diverso per restare distinto.

Mappa concettuale della tavolozza che collega molti campioni quasi duplicati ai ruoli di sfondo, riempimento principale, contorno e dettaglio focale, scegliendo poi un colore deliberato per ogni ruolo
Illustrazione concettuale: riduci i colori simili all'interno di un ruolo, non tra ruoli con significati visivi o produttivi diversi.

Nei file da taglio, il ruolo può essere letterale. In Cricut Design Space, gli SVG importati conservano livelli separati e il controllo Operation assegna ai livelli selezionati comportamenti come Basic Cut, Draw, Score ed Engrave. In altri procedimenti laser o CNC, i colori possono essere usati anche per organizzare le operazioni. Non unire livelli che indicano operazioni solo perché i colori sembrano simili sullo schermo.

Unisci i colori simili in un editor vettoriale

Procedi dalla coppia meno rischiosa a quella più visibile.

  1. Duplica il file o la tavola da disegno.
  2. Seleziona un colore candidato con Select Same Fill o il comando equivalente dell'editor.
  3. Sostituiscilo temporaneamente con il colore vicino della tavolozza.
  4. Controlla piccoli elementi, intersezioni e spazi negativi alle dimensioni normali di visualizzazione.
  5. Alterna la copia originale e quella ridotta.
  6. Mantieni l'unione solo se gerarchia delle forme e significato produttivo sono conservati.
  7. Ripeti con la coppia successiva.

Quando i colori coincidono, le forme adiacenti non diventano automaticamente un solo tracciato. Uniscile solo se devono essere un'unica forma modificabile o da tagliare. Due oggetti possono condividere un riempimento restando separati per animazione, impaginazione o modifica.

Qui conta anche la qualità di nodi e frammenti. Se un unico blu visivo è diviso in centinaia di striscioline, selezionare per riempimento aiuta, ma il file può restare difficile da modificare. Un ricalco più pulito può essere più rapido della riparazione di ogni frammento.

Cosa può e non può fare il raggruppamento automatico

Gli strumenti per tavolozze spesso raggruppano i colori in base alla distanza numerica. K-means e metodi simili possono trasformare un lungo elenco di valori vicini in un numero scelto di colori rappresentativi. È utile per illustrazioni create da sorgenti raster rumorose.

Il raggruppamento automatico non sa:

  • quale elemento sia un volto, una lettera, un foro o un contorno;
  • quali colori indichino operazioni della macchina;
  • se un piccolo accento abbia un significato per il marchio;
  • se la trasparenza su uno sfondo abbia creato il colore apparente;
  • se due forme debbano restare modificabili indipendentemente.

Usa il risultato come bozza. Confrontalo alle dimensioni finali, non soltanto ingrandito. Un'unione apparentemente innocua all'800% può cancellare un piccolo occhio o una controforma alle dimensioni di un adesivo.

Quando rasterizzare e ricalcare è ragionevole

Esportare l'SVG in PNG, ridurre la tavolozza raster e ricalcarlo di nuovo è un azzeramento distruttivo. Appiattisce gruppi, nomi, simboli riutilizzabili, struttura del testo e tracciati posizionati con cura in pixel, prima di ricostruirli.

Usa quel percorso solo quando la struttura SVG attuale è già inutilizzabile e non hai una sorgente più pulita. Può aiutare con un ricalco automatico molto frammentato il cui unico valore è l'aspetto. Conserva l'SVG esistente come riferimento, esporta un raster grande con trasparenza, riduci i colori deliberatamente, poi ricalca e controlla i nuovi tracciati.

Non rasterizzare un SVG pulito e organizzato solo per cambiare quattro riempimenti. La modifica vettoriale diretta conserva molte più informazioni.

Verifica il file ridotto

Esegui questi controlli prima di sovrascrivere qualsiasi cosa:

  • Visualizzalo su sfondi chiari e scuri.
  • Controlla silhouette e spazi negativi.
  • Verifica che i contorni non siano scomparsi nei riempimenti.
  • Controlla gradienti e opacità separatamente dai colori pieni.
  • Conta i livelli finali Cricut o le operazioni produttive.
  • Guarda testo piccolo e icone alle dimensioni reali di uscita.
  • Riapri l'SVG esportato in un altro visualizzatore.

Se il file è per Cricut, il procedimento SVG a livelli spiega come i colori corrispondano a materiali e assemblaggio. La guida ai file difficili da spellicolare tratta i problemi geometrici che la sola riduzione dei colori non risolve.

Dove serve PerfectVector

PerfectVector non modifica un SVG esistente. Aiuta quando la proliferazione dei colori nasce da un'immagine raster. Il procedimento SVG per Cricut converte la sorgente in tracciati modificabili e permette di controllare e regolare le regioni cromatiche ricalcate prima del download.

Usalo quando un PNG o JPG ha prodotto decine di colori simili e livelli frammentati in un altro convertitore. Parti dal raster più pulito disponibile, elimina ombre indesiderate o variazioni dello sfondo e confronta l'anteprima vettoriale. Unisci i colori secondo i livelli di materiale che prevedi davvero di tagliare.

L'obiettivo non è sempre il minor numero possibile di colori. È la tavolozza più piccola che comunica ancora il disegno e il piano produttivo.

Domande frequenti

Come riduco il numero di colori in un SVG? Elenca riempimenti, tratti, gradienti e opacità del file, raggruppali per ruolo visivo o produttivo, poi unisci i quasi duplicati una coppia alla volta. Usa la selezione per riempimento in un editor vettoriale e confronta con una copia intatta dopo ogni unione.

Assegnare lo stesso valore esadecimale a due riempimenti unisce i livelli SVG? Non necessariamente. Le forme ora condividono un colore, ma restano oggetti separati finché non unisci o combini la geometria. Tenerle separate può essere utile per modifica, animazione o impaginazione anche se vengono tagliate nello stesso materiale.

Posso limitare automaticamente un SVG a quattro colori? Gli strumenti di raggruppamento della tavolozza possono produrre una bozza a quattro colori, ma non comprendono dettagli semantici o operazioni produttive. Controlla piccoli elementi, contrasto, fori, gradienti e significato dei livelli prima di usare il risultato.

Perché il ricalco di un'immagine a quattro colori ne ha creati a decine? Il raster probabilmente conteneva antialiasing, ombre, variazioni da compressione o bordi ammorbiditi. Il ricalcatore ha trattato quelle differenze tra pixel come regioni separate. Pulisci selettivamente il raster o unisci i colori simili nel risultato vettoriale.

Devo ridurre i colori SVG prima del caricamento in Cricut? Di solito sì quando diversi colori sono quasi duplicati involontari. Prevedi un colore significativo per ogni materiale o livello, conserva ciò che deve essere tagliato separatamente e verifica il numero di livelli dopo l'importazione. Pochi livelli deliberati sono più facili da tagliare e assemblare di un ricalco pieno di minuscole variazioni cromatiche.

Fonti

  1. W3C — Pittura SVG 2 — Definisce riempimenti, tratti, gradienti, motivi e opacità di pittura.
  2. Adobe Illustrator — Selezionare oggetti con lo stesso riempimento e tratto — Documenta un procedimento pratico di selezione per aspetto.
  3. Cricut — Caricare immagini in Design Space — Spiega come i livelli SVG vengono conservati nel caricamento.
  4. Cricut — Selezionare Operation — Definisce le operazioni della macchina assegnate ai livelli Design Space.

Se il problema della tavolozza nasce da un'immagine raster, preparala per Cricut e controlla i colori ricalcati. Tieni l'originale accanto all'anteprima e approva ogni unione in base al materiale finito, non soltanto allo schermo.

Altro dal blog

Riparti da un SVG più pulito
e facile da modificare