SVG memorizza un'immagine come forme matematiche che si adatta a qualsiasi dimensione senza sfocatura, mentre PNG memorizza una griglia fissa di pixel. Questa singola differenza decide la scelta: SVG per loghi, icone e grafica piatta che deve essere in scala, PNG per fotografie e dettagli complessi. SVG (Scalable Vector Graphics) è un formato basato su XML standardizzato dal W3C nel 2001; PNG (Portable Network Graphics) è un formato raster del 1996. Questo confronto spiega vettore e raster, come ciascuno gestisce il ridimensionamento e la dimensione del file, la trasparenza, la modifica, il supporto del browser e una regola chiara per cui utilizzare e dove.

Nessuno dei due formati è complessivamente migliore, perché risolvono problemi diversi. SVG è imbattibile per la grafica che appare in molte dimensioni; PNG è l'unica scelta sensata per fotografie e immagini dettagliate. Sapere a quale famiglia appartiene la tua immagine risponde alla domanda prima ancora di aprire un convertitore.

Vettore contro raster

I due formati descrivono le immagini in modi opposti. SVG elenca istruzioni come disegnare un cerchio qui, riempire questo percorso con quel colore, in modo che il browser lo renda fresco a qualsiasi dimensione. PNG memorizza il colore effettivo di ogni pixel in una griglia, come un mosaico. Vector si adatta a forme con bordi netti; raster si adatta alle fotografie, dove milioni di pixel unici non hanno forme da descrivere. Questa è la radice di ogni differenza pratica tra loro.

Un'analogia aiuta. Un vettore è una ricetta: seguila su qualsiasi scala e otterrai lo stesso piatto. Un raster è una fotografia del piatto finito: ingrandiscila e vedrai solo pixel più grandi e sfocati. La ricetta rimane perfetta a qualsiasi dimensione; la fotografia no.

Ridimensionamento: SVG vince

La scalabilità è il vantaggio decisivo di SVG. Rimane un logo SVG nitidissimo da una favicon da 16 pixel a un cartellone pubblicitario, perché i calcoli vengono ricalcolati a ogni dimensione. Un PNG sfoca nel momento in cui lo ingrandisci oltre la sua risoluzione, poiché il software deve inventare pixel che non sono mai stati catturati. Per qualsiasi cosa mostrata in più dimensioni, SVG serve un file mentre PNG necessita di diverse esportazioni con risoluzioni diverse.

Questo è più importante di quanto sembri. Gli schermi moderni variano dai piccoli telefoni ai grandi monitor 4K e il design deve apparire nitido su tutti. Un SVG gestisce ogni schermata da un singolo file. Un PNG necessita di una versione piccola, una versione grande e spesso una versione retina, che moltiplica le risorse gestite.

Dimensioni del file

La dimensione del file dipende dalla complessità, non dalle dimensioni, che è l'opposto di PNG. Un semplice logo bicolore come può pesare SVG qualche kilobyte e mantenere quelle dimensioni su qualsiasi scala, spesso più piccole del PNG. Ma le dimensioni dell'SVG crescono con il numero delle forme, quindi una fotografia ricalcata diventa molte volte più grande del PNG e viene visualizzata lentamente. La dimensione PNG aumenta con il numero di pixel, quindi una foto di grandi dimensioni risulta pesante, qualunque cosa accada.

La lezione è abbinare il formato al contenuto. Per un'icona piatta, SVG è più piccolo e infinitamente scalabile. Per una foto dettagliata, i palloncini SVG vengono suddivisi in migliaia di percorsi mentre il PNG mantiene una dimensione prevedibile. La complessità, non il nome del formato, determina il peso.

Trasparenza

Entrambi i formati supportano la trasparenza, quindi nessuno dei due vince qui. SVG lo gestisce in modo nativo, poiché una forma può semplicemente non avere alcun riempimento dietro di essa e PNG porta un file canale alfa completo per una trasparenza uniforme e parziale. Un logo rimane trasparente su qualsiasi sfondo in entrambi i formati. L'unica differenza è che la trasparenza di SVG è parte della descrizione della forma, mentre PNG memorizza un valore di opacità per ogni pixel.

Editing e flessibilità

La modifica favorisce SVG per la grafica. Perché un SVG è un testo che descrive le forme, i suoi percorsi ricolorare e animare con CSSe qualsiasi testo all'interno rimane testo reale che un'utilità per la lettura dello schermo può leggere e un motore di ricerca può indicizzare. Un PNG è composto da pixel fissi, quindi cambiare un colore significa riesportarlo dalla fonte. Per un logo che sottoporrai a restyling, tema o animazione, SVG è molto più flessibile.

Supporto del browser

Il supporto è universale per entrambi, quindi non decide la scelta. Ogni browser legge SVG e PNG senza plugin ed entrambi lo fanno da molti anni. La differenza pratica è il contesto: SVG è adatto alle pagine Web e alle interfacce delle app, mentre PNG funziona anche con e-mail, documenti e software meno recenti che potrebbero non accettare SVG. Per un sito web, entrambi sono sicuri; per un logo e-mail, PNG è la scelta più affidabile.

Quando utilizzarli ciascuno

La regola è semplice e vale la pena memorizzarla:

Utilizza SVG per loghi, icone, grafici, diagrammi e disegni al tratto che devono essere in scala e rimanere nitidi.
Usa PNG per screenshot, grafica dettagliata e qualsiasi immagine con bordi sfumati o molti colori.
Non utilizzare nessuno dei due per le foto a lungo termine: JPG o WebP comprimono fotografie molto più piccole di PNG.

Conserva un file vettoriale principale per le risorse del brand ed esporta copie PNG laddove SVG non è accettato, come email o caricamenti di alcune app.

SVG e design reattivo

Il design reattivo è il luogo in cui SVG si guadagna da vivere. Un sito moderno deve apparire nitido su un telefono, un laptop e un monitor 4K e un SVG li gestisce tutti e tre un file con qualsiasi densità di pixel. Non sono necessarie esportazioni separate di piccole, grandi e retina e nessuna sfocatura quando il browser ridimensiona l'immagine per uno schermo ad alta risoluzione. Il vettore si ridisegna semplicemente in modo nitido a qualsiasi dimensione richiesta dal layout.

PNG non può corrispondere a questo. Per rimanere nitido su un display Retina, un PNG deve essere esportato a doppia risoluzione, il che raddoppia le dimensioni del file, e anche in questo caso risulta sfocato se allungato oltre. La gestione di più dimensioni PNG per layout reattivi è un costo di manutenzione reale che un singolo SVG rimuove.

Quando PNG batte SVG nella pratica

PNG vince in più casi di quanto suggerisca la sua reputazione. Qualsiasi immagine con dettagli fotografici, sfumature, trame o ombre morbide appartiene a PNG, perché tracciarlo in SVG produce un pasticcio gonfio e brutto. Gli screenshot sono territorio PNG, poiché mescolano testo con dettagli dell'interfaccia che non vettorizzano. E un'illustrazione complessa con centinaia di colori è più piccola e più pulita come PNG che come un gigantesco SVG con migliaia di percorsi.

L'errore che le persone commettono è dare per scontato che SVG sia sempre la scelta moderna e superiore. È superiore solo per la grafica piatta e dai bordi netti. Inserisci un'immagine dettagliata in SVG e otterrai un file più grande che viene visualizzato lentamente, l'opposto di quello che volevi.

Una nota su SVG e sicurezza

SVG porta una considerazione che PNG non fa: poiché è codice, un file SVG può contenere script. Un SVG dannoso caricato su un sito potrebbe, in teoria, eseguire JavaScript quando viene visualizzato. Questo è il motivo per cui molte piattaforme disinfettano o rifiutano gli SVG caricati dagli utenti e perché dovresti fidarti solo degli SVG provenienti da una fonte nota. PNG, essendo dati di pixel puri, non comporta tale rischio. Per i tuoi loghi e icone questo non è un problema, ma spiega perché alcuni moduli di caricamento accettano PNG e non SVG.

Errori comuni durante la conversione in SVG

Due errori rovinano la maggior parte delle conversioni da PNG a SVG. Il primo è cercando di vettorizzare una fotografia, che produce migliaia di percorsi e un file più grande dell'originale. Il secondo è lasciare la bitmap originale incorporata nell'SVG dopo una traccia automatica, quindi il file è in realtà un PNG in un wrapper SVG, senza alcun guadagno. Traccia solo la grafica piatta e, per il logo di un marchio, ridisegnalo in un editor vettoriale invece di affidarti a una traccia automatica, che fornisce una geometria pulita e il file più piccolo.

Come convertire PNG in SVG

Convertire un PNG in SVG significa vettorizzare: tracciare i pixel in tracciati. Questo funziona per loghi piatti, icone e disegni al tratto, e fallisce per le fotografie, che non hanno forme pulite da tracciare. Il nostro Convertitore da PNG a SVG traccia la grafica semplice nel tuo browser, quindi non viene caricato nulla. Per il logo di un marchio di tua proprietà, ridisegnarlo in un editor vettoriale produce un risultato più pulito rispetto a qualsiasi traccia automatica. Per le foto usate il nostro Convertitore da PNG a JPG invece.

Domande frequenti

SVG è adatto al design reattivo?

Sì, ideale. Un SVG rimane nitido su ogni schermo e densità di pixel, eliminando la necessità di esportare PNG separati piccoli, grandi e Retina.

Perché alcuni siti rifiutano i caricamenti SVG?

Perché un SVG può contenere script, a differenza di un PNG. Le piattaforme disinfettano o bloccano gli SVG degli utenti per motivi di sicurezza, motivo per cui alcuni moduli accettano solo PNG.

Perché il mio SVG convertito è più grande del PNG?

Probabilmente ricalcato una foto o lasciato la bitmap incorporata. Vettorializza solo la grafica piatta ed elimina l'immagine originale dopo averla tracciata in modo che SVG contenga percorsi e non pixel.

SVG è migliore di PNG?

Per la grafica, sì. SVG si ridimensiona senza sfocature a dimensioni ridotte. Per le fotografie, vince PNG, perché le foto non hanno forme pulite da memorizzare come vettori.

Qual è la differenza tra SVG e PNG?

SVG lo è matematica scalabile; PNG è una griglia fissa di pixel. SVG rimane nitido a qualsiasi dimensione, mentre PNG sfoca se ingrandito oltre la sua risoluzione.

Posso usare SVG per le foto?

No, non in modo utile. Le foto hanno milioni di colori e bordi sfumati senza forme da tracciare, quindi una foto SVG è grande e disordinata. Utilizza PNG o JPG.

Cos'è più piccolo, SVG o PNG?

Per una grafica semplice, SVG. Un logo a due colori pesa pochi kilobyte come SVG a qualsiasi dimensione. Per le foto, il formato PNG è più piccolo, poiché i palloncini di una foto vengono tracciati.

SVG mantiene la trasparenza?

SÌ. SVG supporta la trasparenza in modo nativo, come il canale alfa di PNG, quindi il logo rimane trasparente su qualsiasi sfondo.

Tutti i browser supportano SVG?

SÌ. Ogni browser moderno legge SVG e PNG senza plugin. SVG è adatto alle pagine Web, mentre PNG funziona anche con la posta elettronica e con i software meno recenti.

Come converto PNG in SVG?

Traccialo. Un vettorizzatore traccia un PNG piatto nei percorsi SVG, che funziona per loghi e icone ma non per fotografie.

Posso modificare un SVG dopo averlo creato?

SÌ. I percorsi SVG si aprono in qualsiasi editor vettoriale e ricolorare o animare con CSS, poiché il file è testo che descrive forme, non pixel fissi.

Quale formato dovrei utilizzare per il logo di un sito web?

SVG. Si ridimensiona nitidamente su ogni schermo da un filee il suo testo rimane leggibile ai motori di ricerca. Conserva un PNG per le email in cui SVG non è accettato.

PNG o SVG sono migliori per un'icona?

SVG, per il ridimensionamento. Un'icona SVG rimane nitida a qualsiasi dimensione, mentre un'icona PNG necessita di più esportazioni e risulta sfocata se ingrandita.

SVG e PNG risolvono problemi diversi: SVG memorizza calcoli scalabili che rimangono nitidi a qualsiasi dimensione, mentre PNG memorizza una griglia fissa di pixel che si sfuma quando viene ingrandita. SVG vince per loghi, icone e disegni al tratto che devono essere ridimensionati, modificati e animati con CSS e servono ogni schermo da un unico file. PNG vince per fotografie, screenshot e immagini dettagliate e funziona dove SVG non è accettato. Abbina il formato al contenuto e utilizza i nostri convertitori qui sopra per vettorizzare una semplice grafica o gestire una foto raster, tutto nel tuo browser.

Riferimento rapido: SVG o PNG

Raggiungi SVG quando l'immagine è un logo, un'icona, un grafico o un disegno al tratto che deve essere ridimensionato, quando desideri ricolorarlo o animarlo con CSS o quando un file deve supportare tutte le dimensioni dello schermo. Raggiungi PNG quando l'immagine è uno screenshot, una grafica dettagliata o qualsiasi cosa con sfumature, trame o bordi sfumati e quando ne hai bisogno per funzionare con la posta elettronica o con software meno recenti che rifiutano SVG. La linea di demarcazione è semplice: la grafica piatta e dai contorni netti diventa vettoriale, tutto ciò che è dettagliato diventa raster.

Mantenere un master vettoriale

Per qualsiasi risorsa del marchio, mantieni l'originale come master vettoriale ed esporta copie raster secondo necessità. Un singolo logo SVG può generare una favicon, un avatar social e un file di stampa, ciascuno esportato nel formato e nelle dimensioni corretti su richiesta. Lavorare al contrario, da un PNG raster al vettoriale, significa ricalcare, che non recupera mai completamente la geometria pulita. Quindi archivia il master come SVG quando puoi e tratta le esportazioni PNG come copie usa e getta che puoi rigenerare in qualsiasi momento.

La conclusione

SVG e PNG non sono tanto rivali quanto specialisti. I vettori descrivono forme e scalano per sempre, quindi i loghi e le icone appartengono a SVG. I pixel catturano i dettagli, quindi fotografie e screenshot appartengono a PNG. Scegli ponendo una domanda: questa immagine ha forme pulite e piatte o dettagli fotografici fini? Questa risposta decide ogni volta il formato e mantenere un master vettoriale significa che puoi sempre esportare la copia raster di cui hai bisogno.