PNG vs. SVG.

Raster o vettoriale

Forse la differenza più importante tra PNG e SVG è che il primo è un tipo di file raster e l’altro è vettoriale.

Il PNG è un formato di immagine raster, ovvero basato su pixel. Se un’immagine raster viene ingrandita troppo, diventerà sgranata e comparirà un effetto pixel. Al contrario, se è troppo piccola può diventare sfocata. Anche se i PNG sono in grado di gestire risoluzioni molto elevate, non possono essere ingranditi all’infinito.

I file SVG sono basati su vettori, quindi sono costituiti da una complessa rete matematica di linee, punti, forme e algoritmi. Possono essere adattati a qualsiasi dimensione senza perdere la loro risoluzione.

Scopri di più sulla differenza tra file raster e vettoriali

Dimensioni del file.

I file PNG devono essere in grado di gestire risoluzioni elevate, quindi sono spesso di grandi dimensioni. Di conseguenza, le operazioni di elaborazione, condivisione, salvataggio e apertura possono richiedere più tempo. Questo può anche rallentare i tempi di caricamento delle pagine , motivo per cui per la fotografia online la scelta più comune è il JPEG. Esiste anche una variante a 8 bit del PNG che produce file di dimensioni inferiori, ma supporta solo 256 colori.

I file SVG sono molto più piccoli rispetto ai PNG ed è improbabile che rallentino il computer o un sito web (tuttavia, progetti molto dettagliati potrebbero rallentare un SVG). Trattandosi di un formato vettoriale, possono essere ingranditi o rimpiccioliti senza alcuna perdita di qualità.

Compressione.

I file SVG offrono una compressione senza perdita di dati , pertanto sono comprimibili in file di dimensioni inferiori senza sacrificare definizione, dettaglio o qualità.

Anche i file PNG offrono una compressione del 5-20% senza perdita di dati, utile per compensare le loro grandi dimensioni. Tuttavia, potrebbero comunque rimanere più grandi di un file SVG.

Fotografia.

Come abbiamo visto, i file PNG non sono una scelta comune per le foto online. Tuttavia, sono in grado di gestire foto digitali molto dettagliate e di alta qualità per la stampa, l’editing e altri utilizzi. Sono un formato di file comune in Adobe Photoshop.

I file SVG, invece, non usano i pixel , quindi hanno difficoltà a visualizzare le fotografie con uno standard elevato.

Uso web.

Sia i file PNG che gli SVG possono visualizzare grafica web, illustrazioni, loghi, infografiche e tabelle con livelli di dettaglio complessi.

Tuttavia, il formato SVG ha un importante vantaggio dato dal suo linguaggio di programmazione XML. Il fatto che ogni file SVG sia scritto in testo, anziché in codice, fa sì che screen reader e motori di ricerca possano analizzarlo, pertanto questo tipo di file è ottimo sia per la SEO che per l’accessibilità.

I file SVG di solito sono anche più piccoli, quindi più veloci da caricare su una pagina, ed è risaputo che i tempi di caricamento delle pagine sono un altro elemento critico del posizionamento sui motori di ricerca.

Anche i PNG supportano alcuni elementi grafici basati su testo , ma non nella stessa misura.

Compatibilità e complessità.

Gli SVG sono considerati un tipo di file più avanzato rispetto ai PNG, ma non sono compatibili con tutti i browser e i sistemi operativi. Inoltre, il loro linguaggio di programmazione e la composizione basata su vettori possono essere poco familiari e intimidire i nuovi utenti.

I PNG, invece, sono un formato online standard che riceve ampio supporto da browser web e sistemi operativi.

Animazione.

I PNG non supportano l’animazione, a differenza di un altro file di immagine simile basato su raster: il GIF.

I file SVG supportano l’animazione, ma non al pari di altri tipi di file come il formato nativo AI di Adobe Illustrator.

Scopri di più sui file AI

Trasparenza.

I file PNG e SVG supportano la trasparenza , quindi sono entrambi eccellenti per loghi e grafiche online.

È importante sottolineare che i PNG sono una delle scelte migliori per un file trasparente basato su raster. Se lavori con i pixel e la trasparenza, i PNG sono un’opzione migliore rispetto agli SVG.

1. Apri Adobe Illustrator.
2. Fai clic su File > Apri e seleziona l’immagine desiderata sul computer.
3. Fai clic su Apri.
4. Fai clic sull’opzione Ricalca nel menu in alto e seleziona Ricalco immagine.
5. Imposta la conversione in base alle tue esigenze , modificando il metodo colore se necessario.
6. Al termine dell’operazione, seleziona l’immagine ricalcata e fai clic su Separa. In questo modo, le forme di colore verranno separate in singole unità.
7. Fai clic su File > Esporta.
8. Salva il file in formato SVG.

1. Apri Adobe Photoshop.
2. Fai clic su File > Apri.
3. Seleziona il file SVG sul computer.
4. Fai clic su Esporta > Esporta come > PNG.
5. Salva il file in formato PNG.