Da icone PNG a SVG per un kit UI coerente

Non convertire tutta la cartella in una sola passata. Parti da un piccolo gruppo con l'icona più semplice, quella più complessa, una forma curva e un'icona con ritaglio interno. Definisci le regole SVG con quel campione, poi applicale al resto dell'insieme. Questo intercetta scelte di ricalco sbagliate prima che si diffondano in decine di file.

La conversione stessa è soltanto un passaggio. Un kit UI utilizzabile richiede anche un sistema di coordinate condiviso, dimensione ottica coerente, comportamento dei colori prevedibile, tracciati modificabili e una verifica di consegna nel prodotto che userà le icone.

Il flusso breve

1. Fai l'inventario dell'insieme PNG e trova duplicati o sorgenti mancanti.
2. Scegli icone rappresentative e definisci griglia comune, spazio circostante, modello di riempimento o tratto e regole dei colori.
3. Converti le icone campione in veri tracciati.
4. Ispeziona silhouette, nodi, spazio negativo e regioni di colore.
5. Uniforma l'insieme in un solo editor vettoriale, poi converti e controlla le icone rimanenti.
6. Prova gli SVG esportati nell'interfaccia e nella pipeline delle risorse effettive.

Decidi quali icone PNG devono diventare SVG

Icone piatte con confini chiari sono buoni candidati al ricalco. Altre immagini richiedono un percorso diverso. Ordina la cartella prima di aprire un convertitore.

Se la sorgente rimasta è un contenitore di icone anziché un PNG, recuperala prima tramite il flusso corrispondente da ICO a SVG o da ICNS a SVG. Poi uniforma la grafica risultante secondo le stesse regole del kit UI sotto.

Un nome di file SVG non prova che i pixel siano diventati tracciati vettoriali. Il formato può legittimamente contenere un raster incorporato tramite un elemento <image>, come spiega la specifica dei contenuti incorporati SVG. Se un file esportato si seleziona ancora come un'unica immagine rettangolare o diventa quadrettato a forte ingrandimento, usa i controlli dei raster incorporati prima di aggiungerlo al kit.

Definisci le regole del kit UI prima del ricalco

Una cartella di icone singolarmente pulite può comunque apparire incoerente nel suo insieme. Scrivi prima le regole dell'insieme, anche se i PNG originali non le rispettano ancora.

Scegli un unico spazio di coordinate

Usa un solo viewBox per icone che devono condividere la dimensione del componente. I numeri non devono essere per forza 24 per 24 o 16 per 16: devono corrispondere al tuo sistema. SVG mappa il rettangolo viewBox nel viewport visualizzato, quindi dimensioni esterne identiche aiutano soltanto quando la grafica è posizionata coerentemente al loro interno. La specifica dei sistemi di coordinate SVG 2 definisce questa mappatura.

Annota:

• il viewBox comune;
• il centro visivo e la linea di base previsti;
• lo spazio interno minimo;
• quali parti possono intenzionalmente estendersi oltre i normali limiti ottici.

Scegli un modello di riempimento o tratto

Decidi se la famiglia è costruita con silhouette riempite, tratti modificabili o una combinazione documentata. Un insieme di contorni basato sui tratti richiede estremità, giunzioni e peso apparente coerenti. Un insieme riempito richiede spazi negativi e trattamento dei bordi coerenti. Il ricalco può trasformare un tratto sottile in un contorno chiuso: ispeziona quindi la geometria anziché affidarti all'anteprima.

Decidi come controllare il colore

Per un sistema monocolore, usa una regola ripetibile che la destinazione possa mappare al token delle icone. Per icone multicolore, definisci palette consentita e regioni modificabili. Non conservare minuscoli colori quasi duplicati lasciati dall'antialiasing salvo che abbiano uno scopo visibile.

Converti prima un campione rappresentativo

Scegli da quattro a sei icone che espongano i casi difficili. Includi un cerchio o arco, una diagonale, un piccolo spazio interno o foro e l'icona più densa della famiglia. Se l'insieme usa più colori, includine anche una di quel tipo.

1. Prepara i PNG

Usa l'esportazione più pulita disponibile. Rimuovi rettangoli di sfondo involontari, ritaglia coerentemente ed evita di ingrandire una piccola sorgente sfocata soltanto per creare più pixel. La guida di preparazione per convertire PNG in SVG senza perdere qualità affronta i dettagli specifici del ricalco.

Mantieni una copia intatta di ogni originale. È più facile valutare la pulizia confrontando l'SVG con la sorgente anziché affidandoti alla memoria.

2. Ricalca le icone campione

Usa un vettorializzatore automatico o lo strumento di ricalco del software grafico. L'attuale flusso Image Trace di Illustrator espone controlli su colore, tracciati, angoli e rumore. L'attuale funzione Vectorize di Figma offre modalità colore dopo il ricalco e osserva che immagini complesse o a bassa risoluzione possono non vettorializzarsi bene (Adobe Image Trace; Figma Vectorize).

Per un percorso nel browser, carica il campione nel convertitore da PNG a SVG di PerfectVector. Confronta l'anteprima con l'originale, ispeziona forme e regioni di colore, poi scarica l'SVG da uniformare nell'editor vettoriale. Esegui il gruppo rappresentativo prima di elaborare il resto della cartella.

Se Figma è l'editor master del kit, il confronto tra Figma Vectorize e flusso SVG esterno aiuta a confrontare entrambi i percorsi sullo stesso campione. Valuta le forme dopo l'importazione, compresi fori e regioni di colore da modificare.

3. Ispeziona i tracciati, non soltanto l'anteprima

Apri ogni risultato in un editor vettoriale e seleziona le forme. I tracciati SVG sono costruiti da comandi e coordinate, inclusi segmenti rettilinei e curvi definiti nella specifica dei tracciati SVG 2. Servono nodi sufficienti per preservare la silhouette, senza un numero obiettivo universale.

Cerca:

• fitte catene di nodi attorno a una curva semplice;
• puntini isolati o rettangoli di sfondo;
• copie sovrapposte dello stesso bordo;
• minuscoli frammenti di colore causati dall'antialiasing;
• fori o spazi interni chiusi durante il ricalco;
• un rettangolo raster invece di tracciati selezionabili.

Se una forma semplice è sepolta sotto i punti, usa la diagnosi dei troppi nodi prima di semplificarla. Una pulizia aggressiva può spostare gli angoli e chiudere piccoli spazi: confronta quindi il tracciato modificato con il PNG.

Uniforma le icone come un'unica famiglia

Quando i ricalchi campione sono strutturalmente validi, posizionali sulla griglia condivisa e controllali insieme. È qui che un insieme diventa un sistema.

Verifica dell'intero insieme

Controlla l'insieme alla vera dimensione dell'interfaccia e a uno zoom maggiore per la modifica:

La correzione ottica è consentita. Un cerchio può richiedere una lieve sporgenza oltre il riquadro che contiene un quadrato affinché entrambi appaiano della stessa dimensione. La regola è una percezione coerente sostenuta da una griglia documentata, anziché forzare ogni forma in limiti geometrici identici. Il flusso delle schede stampabili per agende visive applica questa distinzione a riquadri illustrati, etichette separate e una pagina PDF misurata.

Per un insieme di immagini delle routine che richiede modifiche alle forme prima dell'impaginazione delle schede, usa il convertitore di grafica per supporti visivi su un disegno rappresentativo. Mantieni separate le etichette e verifica che l'immagine convertita conservi il significato previsto.

Come funziona con PerfectVector

PerfectVector si inserisce nella fase di ricalco tra preparazione della sorgente e uniformazione dell'insieme. Usalo per ricostruire un campione PNG rappresentativo come forme vettoriali modificabili, poi valuta l'output sui criteri importanti per il kit:

1. Ogni icona conserva silhouette e spazi negativi?
2. Puoi selezionare e ricolorare le regioni previste?
3. Le curve usano un insieme gestibile di nodi?
4. Il risultato è più facile da uniformare rispetto a un ricalco manuale o nativo dell'app?

Se il campione supera i controlli, converti i PNG adatti rimanenti e portali nello stesso file master per la verifica dell'intero insieme. Se fallisce, cambia sorgente o metodo di ricalco prima di elaborare altre icone. PerfectVector non sostituisce le decisioni di allineamento ottico e denominazione che appartengono al sistema grafico.

Ripulisci senza perdere la sorgente

Conserva due livelli di file:

• Archivio sorgente: PNG intatti, eventuali file grafici originali e note sulla provenienza.
• Master modificabile: icone vettoriali uniformate sulla griglia condivisa.
• Esportazioni di consegna: SVG ottimizzati usati dal prodotto.

Modifica le forme nel master, poi rigenera i file di consegna. Evita di modificare manualmente esportazioni separate perché le correzioni divergeranno tra le copie. Se un SVG richiede ricolorazione, rimodellazione o correzione dell'area di disegno, usa il flusso di modifica SVG e riporta la geometria corretta nel master dell'insieme.

Quando la consegna usa icone web riutilizzabili, segui il flusso degli sprite di simboli SVG dopo l'approvazione della grafica. Controlla ID dei simboli, riferimenti annidati, limiti delle coordinate, regole di pittura e nomi delle istanze prima che l'insieme entri nell'applicazione. Se l'interfaccia disegna icone su canvas, mappa i tracciati SVG su canvas con Path2D e verifica trasformazione delle coordinate, colori, aperture e risoluzione del buffer rispetto al master SVG.

Quando Penpot è la destinazione della libreria grafica, inserisci un SVG campione nell'area di disegno e prova una regione di colore e un contorno prima di aggiungere il resto del kit. La guida all'importazione SVG in Penpot distingue importazione dei file di progetto e inserimento della grafica e spiega come controllare forme native, contenuto SVG grezzo ed etichette modificabili. Intercetta così un'icona che appare corretta ma non supporta le modifiche necessarie al kit.

Prima della consegna, prova alcune icone in ogni ambiente importante: libreria grafica, componente dell'applicazione ed eventuali passaggi di build o ottimizzazione. Controlla stati disabilitati e a colori invertiti se il sistema li usa. Un file strutturalmente pulito può comunque fallire nel kit se i presupposti su colore o dimensioni non corrispondono al componente. Se la destinazione è Android, usa la lista di controllo di importazione da PNG a VectorDrawable per verificare viewport, riempimenti, complessità dei tracciati e supporto dell'importatore prima che la risorsa entri nell'app. Per progetti Godot, usa la lista di controllo di importazione SVG in Godot per scegliere il tipo di importazione della texture e verificare dimensione raster, sovracampionamento e grafica supportata. Per progetti Unity, usa la lista di controllo di importazione SVG in Unity per scegliere l'importatore compatibile con l'editor e verificare la destinazione UI Toolkit o sprite.

Per progetti SwiftUI, controlla il flusso di catalogo risorse SVG e renderizzazione per confermare risorsa immagine denominata, comportamento del colore in modalità original o template e dimensione finale di visualizzazione.

Lista di controllo della consegna del kit UI

• Ogni icona ricalcata proviene dalla sorgente più pulita disponibile.
• Le icone condividono le regole documentate di viewBox, spazio circostante e allineamento.
• Dimensione ottica e peso apparente sono coerenti alla vera dimensione UI.
• Icone riempite e con tratti seguono il modello dichiarato del sistema.
• Le regioni di colore si mappano prevedibilmente alla palette approvata o alla regola dei token.
• Le curve usano nodi sufficienti per la fedeltà senza evidente affollamento dei tracciati.
• Nessun SVG contiene raster incorporati involontari, riquadri di sfondo o bordi duplicati.
• I nomi di file e componenti sono univoci e stabili.
• L'insieme esportato è stato provato dopo il normale passaggio di ottimizzazione del prodotto.
• Archivio sorgente, master modificabile e file di consegna sono mantenuti separati.

FAQ

Posso convertire in serie tutte le icone PNG prima di ripulirle? Puoi, ma un campione rappresentativo è più sicuro. Converti poche icone che coprano le forme più difficili dell'insieme, stabilisci griglia e regole dei tracciati e soltanto dopo elabora il resto. Altrimenti una scelta di ricalco sbagliata può creare pulizia ripetitiva in tutta la cartella.

Ogni icona SVG dovrebbe usare lo stesso viewBox? Le icone che condividono un componente UI generalmente beneficiano dello stesso viewBox, ma la grafica interna può richiedere adattamenti ottici. Mantieni coerente lo spazio di coordinate permettendo a cerchi, forme appuntite o icone insolitamente dense sporgenze o variazioni dello spazio circostante documentate.

Quanti nodi dovrebbe avere un'icona UI? Non esiste un numero universale. Usa il minimo di nodi che conservi silhouette, angoli e spazi negativi previsti. Confronta icone di complessità simile e indaga ogni curva semplice che contenga una fitta catena di punti.

Dovrei conservare le icone PNG dopo aver completato l'insieme SVG? Sì. Conserva PNG originali ed eventuali sorgenti grafiche precedenti in un archivio. Forniscono provenienza e riferimento visivo quando un ricalco va rifatto. Usa il master vettoriale uniformato per le modifiche e genera da quello gli SVG di consegna.

Fonti

1. W3C — Sistemi di coordinate, trasformazioni e unità SVG — Definisce viewport SVG, sistemi di coordinate, viewBox e mappatura della grafica in una regione visualizzata.
2. W3C — Tracciati SVG — Definisce comandi rettilinei e curvi della geometria modificabile dei tracciati SVG.
3. W3C — Contenuti incorporati SVG — Conferma che SVG può contenere immagini raster anziché tracciati vettoriali.
4. Adobe Illustrator — Vettorializzare immagini con Image Trace — Documenta il flusso attuale di ricalco raster e l'output di tracciati modificabili.
5. Figma Learn — Convertire immagini statiche in livelli vettoriali — Documenta il flusso Vectorize attuale di Figma, modalità colore e limiti delle immagini sorgente.

---

Parti dalle poche icone più difficili, non dall'intera cartella. Converti i PNG campione in SVG, ispeziona tracciati e regioni di colore, poi uniforma il risultato migliore secondo le regole del kit UI prima di ampliare il flusso.