PNG Vs SVG: è ora dell’armistizio

Di - 19 December 2013 - in
Post image for PNG Vs SVG: è ora dell’armistizio

Lungi dall’essere un’ennesima guerra di religione tra i sostenitori dell’uno piuttosto che dell’altro formato, questo vuole essere il più possibile un raffronto oggettivo tra i due formati, differenti in termini di tecnica e di resa… per trovare un compromesso che soddisfi l’unica persona che conta: l’utente.

Definizioni

PNG è l’acronimo di Portable Network Graphics. È uno standard aperto e royalty-free mantenuto dal W3C . Il PNG è il formato dominante per l’utilizzo sul web, in quanto fornisce un buon rapporto di compressione delle immagini raster senza perdite e consente l’utilizzo del canale alpha (trasparenza).

SVG è l’acronimo di Scalable Vector Graphics. È anch’esso un formato aperto e royalty- free tradotto in standard dal W3C. Si tratta di un formato vettoriale, ovvero un formato in cui l’immagine non viene descritta in termini di mappa di bit, ma vengono descritti i parametri che dovranno essere utilizzati dall’interprete per “ridisegnare” l’immagine di partenza (come un colore di riempimento o la posizione dei vertici di un poligono).

Applicazioni

PNG è un formato comodo per immagini che necessitano di alcuni piccoli ritocchi (per cui si possono usare software di editing come GIMP o Photoshop). Gli strumenti per disegnare immagini raster sono tanti e tutti supportano l’esportazione in PNG. Per quanto riguarda l’interoperabilità i software di fotoritocco generalmente supportano l’importazione di file SVG, ma non l’esportazione.

SVG è un formato comodo per la flessibilità che offre nella creazione di grafiche e illustrazioni; il fotoritocco non è tra i casi d’uso delle tipiche applicazioni per il disegno vettoriale. Molti software di illustrazione supportano questo formato (come Inkscape e Illustrator), che è un formato di markup (xml) e quindi “human readable” (e dunque anche editabile con una qualunque applicazione di editing di testi). Le tipiche applicazioni consentono l’importazione, l’embedding, il linking e l’esportazione di immagini raster.

Molto spesso si utilizzano software di illustrazione per creare immagini vettoriali che poi vengono esportate come PNG per essere utilizzate all’interno di siti web o documenti (si aprirebbe qui un altro capitolo circa il supporto SVG da parte delle applicazioni di office automation… ma lo chiudiamo subito dicendo che ad esempio le suite Open/LibreOffice supportano nativamente l’importazione di SVG).

Inoltre esistono diverse applicazioni in grado di vettorizzare un file raster, ovvero di convertire una immagine a mappa di bit in un insieme di forme che approssimano l’immagine di partenza; il contro è che gli algoritmi di vettorizzazione utilizzano molte risorse e producono file non troppo ottimizzati.

Ad oggi tutti i browser supportano nativamente entrambi i formati, anche se il formato SVG non è ancora completamente implementato in tutte le sue specifiche.

Dimensioni dei file

Un limite intrinseco delle immagini raster è rappresentato dalla risoluzione che è un parametro fissato nel momento del salvataggio: maggiore la risoluzione e maggiore è lo spazio su disco necessario per salvare il file. Con immagini che presentano una bassa complessità (colorazioni di sfondo uniformi, pochi colori) la compressione sarà più efficiente e anche immagini a grande risoluzione potranno essere compresse in file che occupano pochissimo spazio.

Essendo SVG un formato vettoriale è dunque indipendente dalla risoluzione ( e quindi l’immagine può essere scalata virtualmente all’infinito senza “sgranare“), ma la dimensione del file aumenta con il numero di forme e quindi con la complessità delle immagini da rappresentare. Una fotografia, ad esempio, non è un buon tipo di applicazione per una immagine vettoriale, ma lo sono uno sfondo o una clipart.

Si tratta dunque di trovare il compromesso tra la qualità dell’immagine e la sua complessità: immagini complesse di ottima qualità saranno sempre e comunque “pesanti” qualunque sia il formato prescelto. Sulle immagini di piccole dimensioni (icone) il confronto si fa invece più interessante… e su quello ci concentreremo nella comparativa che segue, fatta utilizzando una icona di complessità media (4 colori fondamentali, una discreta quantità di forme), lasciando al lettore i commenti (commentate!).

Ricerca

I file PNG sono facili da trovare e sui siti di immagini stock ne esistono a milioni, essendo un formato utilizzato e supportato da oramai tutte le applicazioni; non dimentichiamo inoltre il supporto alla trasparenza, essendo una evoluzione del GIF (che era limitato dalla palette di 256 colori e dalla trasparenza a un solo livello).

I file SVG sono più difficili da trovare con una ricerca e anche sui siti di immagini stock non sono tra i formati più diffusi. Esistono però dei repository “public domain” che offrono decine di migliaia di clipart e immagini gratuite, anche se non sempre di qualità eccelsa (come openclipart.org). La natura “in chiaro” del formato si presta alla modifica e alla rielaborazione ed è come avere in mano il codice sorgente di una applicazione: è naturale che gli artisti che vendono le proprie opere siano più restii a pubblicarne il file originale.

Performance

Facendo una ricerca in rete circa i pro e contro dei due formati in esame emergono molte opinioni contrastanti. Considerando che molte discussioni nascono dalla metà dello scorso decennio, occorre prendere con le pinze le valutazioni circa le scarse performance dei file vettoriali. Infatti, a differenza dei formati raster, la processazione e il calcolo necessari alla renderizzazione di tali immagini è a carico dell’applicazione host (che sia di illustrazione o un browser web), mentre per un file PNG è necessaria solo la decompressione. È opinione dello scrivente che le prestazioni delle macchine odierne siano più che sufficienti a garantire una UX di pari livello per entrambi i formati.

Web

A differenza del formato PNG, che necessariamente risiede su una risorsa esterna ad una pagina web, il formato SVG può essere inserito “inline” nel markup HTML e trasferito al browser assieme alla pagina in una unica transazione. Per numerose e piccole immagini potrebbe avere senso limitare le chiamate a immagini esterne per migliorare i tempi di caricamento di una pagina anche se i Kb totali scambiati potrebbero essere superiori. Per immagini di grandi dimensioni potrebbe invece essere più proficuo rinviare il caricamento di una immagine dopo quello della pagina stessa.

Inoltre, la natura markup del formato SVG rende gli attributi dei tracciati accessibili dai linguaggi di scripting e di conseguenza possono essere resi interattivi mediante l’inserimento e l’implementazione di eventi Javascript.

Alcuni spunti di riflessione

In linea di principio sarebbe dunque possibile utilizzare solo JS + SVG per sviluppare UI accattivanti, evolute e nativamente “responsive” (cos’è meglio di un vettore se si deve poter ridimensionare?) senza necessariamente ricorrere a risorse quali librerie e file di immagini esterni, delegando a browser sempre più performanti il compito di disegnare l’interfaccia.

Dall’altro lato il PNG è così radicato e performante nel dominio delle immagini di piccole dimensioni, che difficilmente potrà essere rimpiazzato dal ruolo di sovrano delle icone e delle piccole grafiche di contorno.

Per il resto lasciamo la parola a voi per raccontarci delle vostre esperienze!

Fonti:

Standard PNG – http://www.w3.org/Graphics/PNG/

Standard SVG – http://www.w3.org/Graphics/SVG/

 

Leave a Reply

Michele Brami Articolo scritto da

Progettista di sistemi di automazione e supervisione industriali, appassionato di tecnologie e design innovativi. Ex-marinaio, sommergibilista a vita.

Contatta l'autore

Previous post:

Next post: