SVG vs PNG: Guida Completa
al Confronto

La Differenza Fondamentale

PNG (Portable Network Graphics) è un formato raster. Memorizza le immagini come una griglia di pixel colorati. Ogni pixel ha una posizione, un colore e un'opacità fissi. Il numero totale di pixel — la risoluzione — determina quanto dettaglio può contenere l'immagine. Un PNG 1000×1000 contiene esattamente 1 milione di valori pixel. Quando ingrandisci l'immagine oltre la sua risoluzione nativa, il software deve interpolare (inventare) nuovi pixel tra quelli esistenti, producendo un risultato sfocato.

SVG (Scalable Vector Graphics) è un formato vettoriale. Descrive le immagini usando definizioni matematiche: percorsi, curve, forme, linee e riempimenti. Un cerchio è memorizzato come una coordinata centrale e un raggio — non come migliaia di pixel disposti. Poiché l'immagine è definita da equazioni anziché da una griglia di pixel fissa, può essere resa a qualsiasi dimensione con una nitidezza perfetta. Il motore di rendering ricalcola semplicemente la matematica per le dimensioni di destinazione.

Non si tratta di un formato "migliore" dell'altro. Si tratta del fatto che ciascun formato è progettato per diversi tipi di contenuto. PNG eccelle nella rappresentazione di contenuti fotografici e raster complessi. SVG eccelle nella rappresentazione di grafica geometrica, loghi, icone e illustrazioni.

Confronto Completo

Quando Usare SVG

SVG è la scelta ottimale per qualsiasi grafica fondamentalmente geometrica — composta da forme, linee e curve piuttosto che da dati fotografici pixel.

Loghi e Branding

Un logo aziendale appare ovunque: favicon del sito (16px), immagine dell'intestazione (200px), biglietto da visita (300 DPI stampa), banner per fiere (10 metri). Servire un PNG per ogni dimensione significa mantenere più file, ciascuno a una risoluzione diversa. Con SVG, mantieni un unico file che viene reso perfettamente a ogni dimensione. I CSS possono cambiare il colore del logo al passaggio del mouse, in modalità scura o in stampa. E il file è tipicamente 2–15 KB — più piccolo anche della versione PNG più piccola.

Icone ed Elementi UI

I set di icone (navigazione, social media, icone di funzionalità) sono candidati ideali per SVG. Ogni icona è una semplice forma geometrica che beneficia di:

• Indipendenza dalla risoluzione: Nitida su display 1x, 2x e 3x senza dover servire più PNG
• Stili CSS: Cambia i colori con le proprietà fill o stroke — nessun bisogno di varianti icona separate
• Animazione: Effetti hover, spinner di caricamento, micro-interazioni
• Dimensioni minuscole: Un tipico SVG icona è 200–500 byte. Un set di 50 icone inline in HTML aggiunge meno di 25 KB totali.

Illustrazioni Piatte e Infografiche

Le illustrazioni con colori solidi, bordi netti e forme geometriche si traducono naturalmente in formato vettoriale. Le illustrazioni di marketing, le schermate di onboarding e le infografiche sono tipicamente progettate in strumenti vettoriali (Illustrator, Figma) ed esportate come SVG. Il risultato è nitido a qualsiasi larghezza del viewport, stilizzabile con CSS e molto più piccolo rispetto ai PNG ad alta risoluzione equivalenti.

Grafici e Visualizzazioni Dati

Grafici a barre, grafici a linee, grafici a torta e visualizzazioni dati interattive sono naturalmente vettoriali. Librerie come D3.js, Chart.js e Highcharts rendono direttamente in SVG. L'output è indipendente dalla risoluzione, interattivo (tooltip, eventi click) e accessibile (i lettori di schermo possono analizzare il DOM SVG).

Web Design Responsive

SVG si adatta automaticamente a qualsiasi dimensione del contenitore. Un'illustrazione hero che occupa 1200px sul desktop e 360px su mobile usa lo stesso file SVG. Il browser ricalcola la matematica vettoriale a ogni dimensione. PNG richiede la distribuzione di immagini sovradimensionate (sprecando larghezza di banda su mobile) o più varianti srcset (più complessità e più file da mantenere).

Quando Usare PNG

PNG eccelle nella rappresentazione di contenuti intrinsecamente raster — contenuti catturati o creati come pixel che non possono essere ridotti in modo significativo a forme geometriche.

Fotografie

Una fotografia contiene milioni di valori di colore unici con gradienti fluidi e continui su tonalità della pelle, cielo, fogliame e tessuto. Il formato vettoriale non può rappresentare questi dati in modo efficiente. Convertire una foto in SVG produrrebbe migliaia di percorsi minuscoli, creando un file 10–100 volte più grande del PNG e con un aspetto peggiore. Per i contenuti fotografici, PNG (lossless) o JPEG (lossy, più piccolo) sono le scelte corrette.

Screenshot e Catture dell'Interfaccia

Gli screenshot contengono testo reso, elementi UI, gradienti e bordi anti-aliased mescolati insieme come pixel. La specifica disposizione dei pixel è importante. PNG la preserva esattamente. Vettorializzare uno screenshot produrrebbe un'interpretazione inaffidabile dei dati pixel, non una riproduzione fedele.

Artwork Digitale Complesso

Pitture digitali, effetti acquerello, illustrazioni ricche di texture e artwork con migliaia di colori e gradienti sono meglio serviti come PNG. Anche se l'originale potrebbe essere stato creato con alcuni elementi vettoriali, l'output reso finale con i suoi blend, effetti e texture è fondamentalmente dati raster.

Rendering Pixel-Perfect

Quando la posizione esatta dei pixel è importante — pixel art, sprite sheet, asset per giochi a bassa risoluzione — PNG è il formato corretto. Il rendering SVG comporta anti-aliasing e calcoli sub-pixel che possono spostare gli elementi di frazioni di pixel, il che distrugge l'allineamento preciso richiesto dalla pixel art.

Confronto delle Prestazioni Web

Scegliere il formato giusto per ogni risorsa influisce direttamente sulla velocità di caricamento del tuo sito e sui punteggi Core Web Vitals.

Dimensione del File

Per icone e loghi, SVG vince decisamente. Un'icona tipica:

• SVG: 200–800 byte (testo normale, si comprime a 100–400 byte con gzip)
• PNG @1x: 1–5 KB
• PNG @2x (Retina): 3–15 KB
• PNG @3x (Hi-DPI): 5–25 KB

Servire un singolo SVG sostituisce tre file PNG essendo più piccolo anche del più piccolo. Per un sito con 20 icone, questo fa risparmiare 100–400 KB di dati immagine.

Per i loghi:

• SVG: 2–15 KB (gzippato: 1–8 KB)
• PNG @2x: 20–200 KB

Compressione (Gzip/Brotli)

SVG è testo XML, che si comprime eccezionalmente bene con gzip (riduzione del 50–70%) e Brotli (riduzione del 60–80%). I server web comprimono SVG al volo, quindi la dimensione del trasferimento è molto inferiore al file su disco. PNG ha una compressione deflate integrata e non beneficia significativamente di gzip/Brotli aggiuntivi.

Vantaggio di SVG Inline

SVG può essere incorporato direttamente in HTML con un tag <svg>, eliminando completamente la richiesta HTTP. Per icone e loghi critici above-the-fold, questo può migliorare il Largest Contentful Paint (LCP) perché il browser non deve attendere un download di immagine separato. PNG richiede sempre una richiesta HTTP separata (o un URI dati, che aumenta le dimensioni dell'HTML di circa il 33%).

Google Core Web Vitals

Tre metriche chiave sono influenzate dalle scelte del formato immagine:

• LCP (Largest Contentful Paint): I file immagine più piccoli si caricano più velocemente. Loghi e icone SVG contribuiscono meno all'LCP rispetto ai PNG ad alta risoluzione.
• CLS (Cumulative Layout Shift): SVG con dimensioni viewBox esplicite consente al browser di riservare spazio prima del rendering, prevenendo i layout shift. PNG richiede attributi width e height espliciti per lo stesso beneficio.
• INP (Interaction to Next Paint): Meno richieste di immagini significano meno lavoro sul thread principale. SVG inline riduce l'overhead HTTP.

Conversione Tra Formati

Da PNG a SVG (Vettorializzazione)

Convertire PNG in SVG è un processo di vettorializzazione (tracciamento). Il convertitore analizza i confini dei pixel, rileva i bordi e genera curve di Bézier che approssimano quei bordi come percorsi matematici. Funziona bene per:

• Loghi con colori solidi su sfondi puliti
• Linee arte, schizzi e design disegnati a mano
• Icone e illustrazioni semplici
• Testo e tipografia

Non funziona bene per fotografie, gradienti complessi o texture dettagliate. L'output è un'interpretazione, non una copia pixel-perfect.

Da SVG a PNG (Rasterizzazione)

Convertire SVG in PNG è la rasterizzazione — il rendering dei percorsi matematici a una specifica risoluzione pixel. Questo è un processo diretto senza perdita di qualità alla risoluzione scelta. Basta specificare le dimensioni di destinazione e il renderer riempie i pixel. Strumenti come ImageMagick, Inkscape e ogni browser web possono rasterizzare SVG in PNG.

Motivi comuni per convertire SVG in PNG:

• Piattaforme social media che non accettano upload SVG
• Client email con scarso rendering SVG
• Software più vecchi che supportano solo formati raster
• Generazione di miniature a risoluzione fissa per gallerie di immagini

Consigli per Ottimizzare SVG

I file SVG esportati dagli strumenti di design spesso contengono dati non necessari che aumentano le dimensioni del file senza influenzare l'output visivo. L'ottimizzazione può ridurre le dimensioni del file SVG del 60–80%.

Rimuovere i Metadati dell'Editor

Illustrator, Figma e Sketch incorporano metadati proprietari, commenti e informazioni del generatore negli SVG esportati. Questi dati sono invisibili ai browser ma possono rappresentare il 30–50% del file. Strumenti come SVGO (SVG Optimizer) li eliminano automaticamente.

Semplificare i Percorsi

Gli editor vettoriali spesso creano percorsi con più punti di controllo di quanti siano visivamente necessari. Ridurre il numero di punti in ogni percorso (semplificazione del percorso) può ridurre drasticamente l'SVG producendo un output visivamente identico. In Inkscape, usa Percorso > Semplifica (Ctrl+L). Il plugin convertPathData di SVGO gestisce questo automaticamente.

Minificare l'XML

Rimuovi spazi bianchi, interruzioni di riga e attributi non necessari. Converti le coordinate di percorso assolute in relative (stringhe più corte). Rimuovi i valori degli attributi predefiniti. SVGO gestisce tutte queste ottimizzazioni in un unico passaggio.

Usare Simboli SVG per i Set di Icone

Se usi più icone su una pagina, definiscile una volta in uno sprite SVG <symbol> e riferisciti a esse con <use>. Questo evita di duplicare gli stessi dati di percorso nella pagina.