Sostituzione colori SVG

Sì. Lo strumento di sostituzione colori SVG aggiorna insieme fill e stroke, così contorni e riempimenti restano allineati. Se vuoi modificare solo uno dei due, duplica il file ed esegui lo strumento con opzioni diverse per confrontare i risultati tra le varianti. Per un theming coerente, scegli colori dallo stesso set di token che usi nella tua UI e testa il risultato su sfondi chiari e scuri.

currentColor fa sì che lo SVG erediti il colore CSS dall'elemento padre. Lo strumento di sostituzione colori SVG può convertire tutti i colori pieni in currentColor così le icone rispondono ai token del tema. Abbina l'output dello strumento di sostituzione colori SVG a variabili CSS per un theming coerente tra componenti. Se usi variabili CSS, l'output recepirà gli aggiornamenti automaticamente senza dover modificare di nuovo lo SVG. Funziona molto bene con componenti icona che accettano una prop color.

Sì. Lo strumento di sostituzione colori SVG lascia invariati i valori none così le forme trasparenti restano trasparenti. Se vedi riempimenti inattesi, controlla la presenza di stili inline che sovrascrivono gli attributi prima di eseguire di nuovo lo strumento. Se fai affidamento sugli spessori di stroke per l'allineamento, verifica l'anteprima dopo la sostituzione per assicurarti che non ci siano variazioni visive.

Lo strumento di sostituzione colori SVG sostituisce solo i valori solidi. Gradienti e pattern restano definiti come in origine, così le illustrazioni più complesse rimangono intatte. Se hai bisogno di modificare i gradienti, intervieni nel tool di design e poi usa lo strumento di sostituzione colori SVG per i colori solidi rimanenti. Pattern e gradienti spesso includono più stop, quindi gestirli a monte evita tonalità incoerenti. Se vuoi un aspetto uniforme, regola i colori degli stop nel tuo editor di design ed esporta di nuovo.

No. Lo strumento di sostituzione colori SVG funziona in locale, quindi gli asset non lasciano mai il dispositivo. Questo flusso locale è adatto a icone di brand, UI di prodotto e librerie dei clienti, e funziona anche con policy di rete aziendali molto restrittive. L'elaborazione locale evita inoltre limiti di dimensione imposti dai servizi di upload e semplifica la conformità.

Sì. Dopo aver usato lo strumento di sostituzione colori SVG, esegui l'ottimizzazione per ridurre i byte. Lo strumento cambia solo i colori, quindi ottimizzazione e minificazione restano utili per dimensioni e prestazioni, soprattutto su grandi set di icone. Fai una rapida anteprima dopo l'ottimizzazione per verificare che i bordi restino nitidi e la trasparenza sia preservata.

Gli stili inline vengono trattati allo stesso modo degli attributi, quindi i colori solidi vengono sostituiti in modo coerente. Se vuoi più controllo, converti prima gli stili in attributi nel file sorgente. Se gli stili sono definiti in un tag style, valuta di portarli inline per ottenere risultati più prevedibili. Gli attributi di presentazione spesso prevalgono sugli stili ereditati, quindi è utile mantenere coerenza nel file sorgente. Questo è particolarmente utile quando le icone provengono da fonti diverse.

Questo strumento applica un'unica sostituzione a tutti i colori pieni. Se hai bisogno di modifiche selettive, duplica lo SVG e isola i colori nel tuo editor, poi applica la sostituzione a ogni versione. Per flussi più avanzati, mantieni uno SVG base e ricava le varianti tramite script di build o classi CSS. Puoi anche applicare temi differenti a runtime scambiando classi CSS.

Sì. Lo strumento di sostituzione colori SVG è gratuito e utilizzabile nel browser. Non sono necessari download né installazione.

No. Lo strumento di sostituzione colori SVG funziona subito nel browser senza registrazione e i file restano in locale.