SVG vs PNG: quale formato immagine dovresti usare?

Risposta rapida

Scegli SVG per loghi, icone, diagrammi, disegni al tratto e illustrazioni realizzati con forme distinte. Scegli PNG per screenshot, grafica con texture e immagini con dettagli a livello di pixel. Per le fotografie, JPEG, WebP o AVIF saranno generalmente più efficienti di entrambi i formati.

La differenza fondamentale

PNG è un formato raster: memorizza una griglia rettangolare di pixel colorati. SVG è un formato vettoriale: descrive la geometria con elementi XML come tracciati, cerchi, rettangoli, riempimenti e tratti.

Questa differenza influisce sul ridimensionamento. L'ingrandimento di un PNG alla fine rivela i pixel perché il file ha una risoluzione fissa. Un SVG viene ridisegnato da istruzioni matematiche alla dimensione richiesta, quindi un vettore ben realizzato rimane nitido su un piccolo schermo o su un grande segno.

Quando SVG è la scelta migliore

SVG è solitamente migliore quando la grafica ha confini chiari e un numero gestibile di colori. Esempi tipici includono marchi, icone dell'interfaccia, infografiche, diagrammi, illustrazioni piatte, mappe, grafici e percorsi ritagliati.

È inoltre possibile applicare stili o animazioni a SVG in un browser. I singoli riempimenti e tratti possono rispondere ai CSS e il testo significativo può rimanere ricercabile quando viene archiviato come testo anziché come percorsi delineati.

Un vettore è più facile da adattare. Un designer può selezionare una forma, modificare un colore, regolare una curva o rimuovere un dettaglio senza ridipingere i pixel circostanti.

Quando PNG è la scelta migliore

PNG è una scelta efficace per contenuti raster senza perdita di dati e piena trasparenza alfa. Usalo per screenshot, pixel art, texture dettagliate, illustrazioni dipinte ed esportazioni raster i cui pixel esatti devono rimanere invariati.

Cercare di descrivere migliaia di transizioni di colore fotografico come tracciati vettoriali crea un SVG grande e difficile da modificare. Il risultato potrebbe apparire posterizzato pur pesando più dell'immagine originale.

Le prestazioni web non riguardano solo l'estensione

Una semplice icona può essere notevolmente più piccola come un SVG ottimizzato. Un'illustrazione complessa può diventare più grande di un PNG o WebP equivalente se contiene troppi percorsi e coordinate.

Misura i file reali. Ottimizza i metadati SVG e la precisione numerica, quindi testa il rendering. Per PNG, esporta quando possibile alle dimensioni di visualizzazione effettive ed evita di spedire una fonte enorme semplicemente per mostrare una piccola miniatura.

SVG in linea può salvare una richiesta e abilitare lo stile CSS, ma aumenta anche il documento HTML. Le icone riutilizzate a livello di sito sono spesso meglio servite come file esterni, memorizzabili nella cache o come parte di un sistema di icone controllato.

Considerazioni su accessibilità e sicurezza

Un'immagine informativa necessita comunque di un nome accessibile o di un testo adiacente, indipendentemente dal formato. Le immagini decorative dovrebbero essere ignorate dalla tecnologia assistiva.

SVG è un contenuto XML attivo e può contenere collegamenti, stili o script. Accetta solo file SVG attendibili o disinfetta il markup fornito dall'utente prima di visualizzarlo in linea. PNG non è un markup eseguibile, il che rende il suo modello di rendering più semplice.

Quale formato dovrebbe utilizzare un logo?

Mantieni un logo principale come SVG quando sono disponibili percorsi vettoriali puliti. Esporta copie PNG per sistemi che non accettano SVG, firme e-mail o posizionamenti raster specifici. Questo ti dà una fonte modificabile e fallback prevedibili.

Per un logo solo raster, converti la versione pulita alla massima risoluzione, ispeziona i contatori delle lettere e le curve e verifica il risultato in un editor vettoriale. Non dare per scontato che la modifica di un nome file da .png a .svg crei percorsi vettoriali.

Lista di controllo decisionale

Utilizza SVG quando la grafica è composta principalmente da forme, deve essere scalabile in molte dimensioni, necessita di percorsi modificabili o deve essere utilizzata da una macchina da taglio. Utilizza PNG quando l'immagine si basa su pixel, texture, screenshot esatti o trasparenza dettagliata.

Converti un logo raster con Immagine in formato SVG o crea un file di consegna raster con Convertitore da SVG a PNG.