Da PNG a VectorDrawable Android: controlli d'importazione

Android Studio non ricalca un PNG in tracciati vettoriali. Vector Asset Studio importa file SVG o PSD e converte la geometria supportata in XML VectorDrawable. Un flusso PNG affidabile ha quindi due fasi: ricalcare i pixel in un vero SVG, poi importare quell'SVG in Android Studio.

Un convertitore diretto da PNG a VectorDrawable può combinare entrambe le fasi. Può essere comodo per un'icona semplice, ma restano validi gli stessi controlli. Conferma che l'output contenga tracciati, corrisponda alla sorgente, usi il viewport previsto ed eviti funzioni che l'importatore Android non può rappresentare.

Per un'interfaccia Flutter, segui il flusso delle risorse SVG in Flutter. Dichiara e renderizza l'SVG tramite flutter_svg anziché convertirlo in XML VectorDrawable Android nativo.

Per un progetto .NET MAUI, usa la lista di controllo delle risorse immagine MAUI per verificare sorgente, output della build e dimensioni di visualizzazione. Segui la pipeline delle immagini del progetto prima di applicare i passaggi di importazione VectorDrawable Android nativa.

Il flusso breve

1. Parti da un PNG pulito simile a un'icona anziché da una fotografia o texture.
2. Ricalcalo in SVG e verifica che il file contenga tracciati modificabili, non un PNG incorporato.
3. Semplifica forme isolate e nodi eccessivi senza cambiare la silhouette.
4. Importa l'SVG tramite Vector Asset Studio di Android Studio.
5. Ispeziona l'XML generato per comportamento di viewport, tracciati, riempimenti, tratti, sfumature e ritagli.
6. Prova il drawable alla sua dimensione reale sulla versione Android più vecchia supportata dall'app.

Scegli tra un convertitore diretto e il percorso SVG

I due percorsi arrivano alla stessa destinazione, ma espongono punti di controllo diversi.

Il percorso con SVG intermedio è generalmente più facile da verificare. Puoi confrontare il ricalco con il PNG, ispezionare singole forme, correggere fori e ridurre l'affollamento dei tracciati prima che Android Studio traduca nuovamente il file.

I convertitori diretti non sono automaticamente sbagliati. Per esempio, SVG2Vector attualmente pubblicizza la conversione da PNG a VectorDrawable insieme a SVG e altri input. Considera il suo XML un candidato anziché una risorsa definitiva: visualizzalo in Android Studio, ispeziona i tracciati ed esegui gli stessi controlli sui dispositivi descritti sotto (SVG2Vector).

Fase 1: trasforma il PNG in veri tracciati SVG

Parti dalla sorgente più pulita disponibile. Icone piatte con bordi chiari e una palette limitata sono ottimi candidati. Fotografie, ombre morbide, bagliori e texture possono produrre molte piccole forme senza diventare risorse Android utili.

Usa la risoluzione originale del PNG. Ingrandire un'icona sfocata aggiunge pixel, non le informazioni mancanti sui bordi. Rimuovi ogni rettangolo di sfondo involontario e decidi prima del ricalco se la risorsa prevista è monocromatica, multicolore o basata su sfumature.

Ricalca i pixel

Carica la sorgente nel convertitore da PNG a SVG di PerfectVector oppure usa un altro strumento di ricalco che permetta di ispezionare il risultato. Se la sorgente è su un telefono e ti serve prima un SVG standard, segui il flusso SVG per telefoni Android. Confronta l'SVG con il PNG alla dimensione prevista nell'interfaccia, poi aprilo in un editor vettoriale e seleziona le forme.

Controlla che ci siano:

• una silhouette esterna pulita;
• fori e spazi negativi preservati;
• il numero previsto di regioni di colore;
• nessun puntino isolato o riquadro di sfondo;
• curve fluide senza fitte catene di punti;
• un viewBox che inquadra correttamente la grafica.

L'estensione .svg non prova che sia avvenuto il ricalco. SVG può contenere elementi raster tramite un elemento <image>, secondo la specifica W3C sui contenuti incorporati. Se la grafica si seleziona come un unico rettangolo o diventa quadrettata a forte ingrandimento, usa la diagnosi dei raster incorporati prima di passare ad Android Studio.

Semplifica soltanto dove serve

La complessità dei tracciati conta perché Android deve analizzare e disegnare la geometria generata. Non esiste un obiettivo universale per il numero di nodi. Una curva semplice con decine di punti molto ravvicinati merita un'ispezione; un bordo illustrato irregolare potrebbe davvero richiederne di più.

Rimuovi i frammenti isolati e semplifica le catene di punti evidenti confrontando il risultato con la sorgente. Se la pulizia cambia gli angoli o chiude piccoli fori, annullala. La guida agli SVG con troppi nodi spiega come distinguere il dettaglio utile dall'affollamento dei tracciati.

Due conversioni, tre controlli

Fase 2: importa l'SVG in Android Studio

L'attuale flusso di Vector Asset Studio di Android accetta un file SVG o PSD locale, ne mostra l'anteprima e genera un drawable vettoriale XML (Android Developers).

1. Nella finestra Project, fai clic destro sulla cartella res.
2. Scegli New > Vector Asset.
3. Seleziona Local file (SVG, PSD) come tipo di risorsa.
4. Scegli l'SVG e controlla nell'anteprima eventuali errori o cambiamenti visibili.
5. Imposta il nome della risorsa e le dimensioni previste.
6. Prosegui con Next, conferma la destinazione e seleziona Finish.

La risorsa generata va inserita tra le risorse drawable dell'app come XML. Mantieni l'SVG verificato come master modificabile. Se la risorsa richiede una modifica visiva successiva, modifica l'SVG e rigenera il drawable anziché mantenere manualmente due versioni scollegate.

Cosa viene preservato nell'importazione da SVG a VectorDrawable?

VectorDrawable non è un renderer SVG completo. Vector Asset Studio supporta un sottoinsieme definito, quindi un SVG può apparire corretto nel browser e cambiare durante l'importazione.

Questi limiti provengono dall'attuale tabella di compatibilità di Vector Asset Studio. L'importatore segnala anche che sono supportati soltanto tratti centrati. Se la sorgente usa un tratto interno o esterno, espandilo in una forma riempita o ridisegna il bordo prima dell'importazione.

Le sfumature richiedono un controllo aggiuntivo della versione. L'API VectorDrawable documenta valori di sfumatura o elenco di stati colore per fillColor e strokeColor dal livello API 24. Documenta anche le opzioni evenOdd e nonZero di fillType dal livello API 24 (riferimento API VectorDrawable). Se l'app supporta versioni precedenti, prova il preciso percorso di compatibilità usato dalla build anziché presumere che l'anteprima Android Studio risolva la questione.

Leggi l'XML generato prima di accettarlo

Non devi scrivere manualmente l'XML VectorDrawable, ma una rapida verifica strutturale intercetta molti problemi di importazione.

Larghezza, altezza e viewport

L'elemento radice <vector> separa la dimensione visualizzata dalle coordinate di disegno:

• android:width e android:height sono le dimensioni predefinite del drawable, generalmente in dp;
• android:viewportWidth e android:viewportHeight definiscono lo spazio di coordinate usato dai tracciati.

Cambiare soltanto larghezza e altezza scala la stessa geometria. Cambiare il viewport modifica il modo in cui le coordinate dei tracciati si mappano nell'area visualizzata. Se l'icona appare ritagliata, con spazio aggiuntivo o deformata, confronta questi quattro valori con il viewBox dell'SVG e con le dimensioni previste della risorsa.

Tracciati, riempimenti e tratti

Ogni <path> contiene android:pathData, i cui comandi seguono la stessa sintassi generale dei tracciati dell'attributo SVG d. Controlla fillColor, strokeColor, strokeWidth, estremità e giunzioni delle linee e fillType, quando presenti.

Non ottimizzare eliminando comandi dei tracciati che non conosci. Confronta prima l'anteprima con la sorgente, poi semplifica nel master SVG, dove la forma resta più facile da ispezionare.

Gruppi e ritagli

I gruppi possono contenere valori di traslazione, scala, rotazione e punto di rotazione. Un <clip-path> limita la geometria visibile. Se il risultato è spostato o una regione mascherata scompare, ispeziona la gerarchia dei gruppi e confrontala con trasformazioni e struttura dei ritagli dell'SVG sorgente.

Prova il drawable dove verrà usato dall'app

L'anteprima di importazione dimostra che Android Studio ha analizzato il file. Non dimostra che la risorsa sia corretta durante l'esecuzione.

Usa questa lista di accettazione:

• Il drawable corrisponde alla silhouette prevista del PNG alla normale dimensione dell'interfaccia.
• Fori, spazi interni e regioni sovrapposte rimangono corretti.
• Riempimenti uniformi e tratti usano i colori previsti.
• Le sfumature vengono renderizzate correttamente sulla versione Android più vecchia supportata.
• Il viewport conserva spazio circostante e proporzioni previsti.
• L'icona rimane leggibile negli stati chiaro, scuro, disabilitato e con tinta applicata usati dall'app.
• L'XML non contiene frammenti involontari o dati dei tracciati palesemente eccessivi.
• La risorsa viene provata nel componente reale, non soltanto nell'anteprima di importazione.
• Il PNG originale e il master SVG modificabile restano archiviati.

Prova alla dimensione effettiva in dp su almeno un emulatore o dispositivo rappresentativo della versione minima supportata. Controlla anche ogni stato o tema che cambia la tinta. Un tracciato tecnicamente valido può comunque fallire se spazio circostante, peso visivo o presupposti sui colori differiscono dal resto delle icone.

Se converti un'intera famiglia, applica prima questo processo a un campione rappresentativo. Il flusso di conversione dei kit UI affronta viewport condivisi, dimensione ottica, comportamento dei colori e controlli di consegna dell'intero insieme.

Quando mantenere il PNG

VectorDrawable funziona meglio per icone e illustrazioni semplici. Le indicazioni Android avvertono che la grafica dettagliata, comprese molte immagini di avvio delle app, può essere gestita meglio come risorsa raster. Osservano anche che il costo di caricamento iniziale di un drawable vettoriale può essere superiore a quello di un'immagine raster e consigliano di mantenere le risorse vettoriali a 200 per 200 dp o meno per evitare tempi di disegno lunghi (Android Developers).

Mantieni o riprogetta il raster quando la sorgente dipende da:

• dettaglio fotografico;
• texture morbide, sfocature o ombre complesse;
• molte minuscole regioni di colore;
• un effetto non supportato che definisce l'aspetto;
• geometria così densa da rendere difficile verificare e mantenere l'XML.

L'obiettivo non è sostituire ogni PNG. È usare VectorDrawable dove la geometria scalabile dei tracciati rende la risorsa Android più piccola, chiara o facile da adattare al tema, senza trasformare un'immagine dettagliata in un costoso mucchio di tracciati.

Come funziona con PerfectVector

PerfectVector gestisce la prima conversione. Per un'icona adatta, converti il PNG in SVG, confronta le forme ricalcate con la sorgente e scarica l'SVG da mantenere come master modificabile. Poi importa quel file tramite Vector Asset Studio e verifica l'XML generato.

Valuta il risultato lungo l'intera catena:

1. Il ricalco ha conservato silhouette e fori della sorgente?
2. Le forme SVG sono modificabili e prive di raster incorporati?
3. Android Studio importa riempimenti, sfumature, ritagli e trasformazioni necessari?
4. Il drawable viene renderizzato correttamente alla dimensione reale e al livello API minimo?

Un SVG pulito migliora il passaggio intermedio, ma non fa funzionare caratteristiche Android non supportate. Semplifica il progetto o mantieni il PNG quando la destinazione non può riprodurne fedelmente l'aspetto.

FAQ

Android Studio può convertire direttamente un PNG in VectorDrawable? No. L'attuale Vector Asset Studio importa file SVG o PSD locali, non PNG. Ricalca prima il PNG in un vero SVG oppure usa un convertitore diretto e verifica l'XML risultante in Android Studio.

Un SVG è sempre un vero vettore? No. SVG può incorporare contenuti raster con un elemento image. Apri il file in un editor vettoriale o ispeziona il markup e conferma che la grafica prevista sia composta da tracciati o altre forme vettoriali prima di importarla.

Le sfumature SVG funzionano in VectorDrawable Android? Vector Asset Studio supporta sfumature lineari, radiali e angolari, ma il supporto durante l'esecuzione dipende dall'XML generato e dalla strategia adottata per le versioni Android. L'API VectorDrawable documenta colori di riempimento e tratto sfumati dal livello API 24, quindi prova la risorsa sulla versione più vecchia supportata dall'app.

Perché fori, maschere o testo sono cambiati dopo l'importazione? L'importatore supporta un sottoinsieme SVG limitato. Le regole di riempimento richiedono prove che tengano conto della versione, i ritagli sono limitati e il testo non è supportato. Converti il testo necessario in tracciati, semplifica le strutture di ritaglio e confronta l'anteprima Android con l'SVG prima di accettare il drawable.

Ogni PNG di un'app Android dovrebbe diventare XML VectorDrawable? No. Icone e illustrazioni semplici sono i candidati più adatti. Mantieni fotografie, immagini ricche di texture, effetti complessi e grafica troppo dettagliata come risorse raster, salvo quando un ridisegno intenzionale produce geometria di tracciati più semplice.

Fonti

1. Android Developers — Aggiungere grafica vettoriale per più densità — Documenta l'importazione SVG e PSD di Vector Asset Studio, il sottoinsieme SVG supportato, le avvertenze sulle prestazioni e le risorse drawable generate.
2. Android Developers — Riferimento API VectorDrawable — Definisce gli attributi XML di vector, path, group e clip-path, compresi viewport, proprietà di riempimento e tratto, regole di riempimento e comportamento secondo il livello API.
3. W3C — Contenuti incorporati SVG — Conferma che SVG può contenere immagini raster tramite l'elemento image.
4. Manuale Inkscape — Ricalcare un'immagine — Spiega la distinzione tra ricalcare pixel raster e lavorare con la bitmap originale.
5. SVG2Vector — Conversione da PNG a VectorDrawable — Fornisce l'attuale percorso di conversione diretta discusso nel confronto dei flussi.

---

Pronto a provare un'icona di produzione? Converti il PNG in SVG, ispeziona i tracciati e poi importa il file verificato in Android Studio. Mantieni il drawable soltanto dopo che viewport, colori, fori e rendering durante l'esecuzione hanno superato la lista di controllo.