Formato Svg vs Png vs WebP… Svg contro tutti!

2 Aprile 2024

In questo articolo:

Formato Svg, Png, WebP… Quando e come usarli? Un articolo piuttosto tecnico ma che saprà tradurre la teoria in pratica. Un confronto per non-esperti informatici ma preciso e approfondito

Formato Svg

Formato WebP

Formato Png24

Formato Svg

Formato WebP

Formato Png24

Cosa è il formato Svg?

Un tantino sorprendente, forse, l’utilizzo dell’immagine di una copertina come esempio di file formato Svg. Forse ti aspettavi un semplice logo o un terzo gattino stilizzato.

Certo, sarebbe un uso corretto per questo formato, come gli standard raccomandano, ma… ho raggiunto il limite dei gattini rappresentabili in una mia pagina web!

Il fatto è che il formato Svg può fare molto di più. Ho voluto perciò esordire rendendo onore alle reali potenzialità del formato e non finisce qui, come ti mostrerò di seguito.

Per cominciare, lo descriverei semplicemente così: Il formato più avanzato per rappresentare oggetti vettoriali, oggetti misti vettoriali-raster e animazioni sul web o nelle pubblicazioni elettroniche (ebook).

Troppo semplice? Niente paura, lo renderemo un po’ più difficile ma soprattutto più interessante.

L’Svg è un formato creato per il Web dallo stesso gruppo che ne sviluppa quasi tutti gli standard come i linguaggi Xml, Html, Css ecc. Questi signori (in realtà un insieme di corporation associate) dicono come andrebbero fatte le cose e noi lo facciamo, semplice…

È basato su Xml (un linguaggio esteso di markup che può gestire del codice specifico al suo interno). Puoi trovarne tutte le specifiche a questa precisa pagina. Ma ecco qui un estratto per fornirti subito la versione dei capoccioni preposti:

L’SVG è un linguaggio per descrivere la grafica bidimensionale. Come formato autonomo o se combinato con altri XML, utilizza la sintassi XML [xml]. Il codice SVG utilizzato all’interno dei documenti HTML utilizza la sintassi HTML [HTML]W3c

Tutto chiaro, no? A me per niente ma non è un problema, ho scritto questo articolo tarandolo sui duri di comprendonio come me, ergo: è comprensibile da chiunque.

A cosa serve il formato Svg?

L’uso, si diceva, è destinato a immagini al tratto, immagini, cioè, con tratti e aree di colore nette, piene o sfumate. Questo è il logo Svg in formato (indovina?) Svg:

Logo formato file Svg

Ma l’Svg è il miglior formato anche per immagini miste tratto-tono continuo (come una foto con dei testi sopra, vedi esempio copertina poco in basso) e per le animazioni web.

Questa immagine è in formato Svg. L’illustrazione principale è un’immagine raster, realizzata con un programma a matrice di bit (Photoshop in questo caso) mentre i testi e il logo della testata sono vettoriali, tutti convertiti in tracciati. Io trovo il formato Svg ideale proprio per questo tipo di rappresentazioni: copertine, infografiche e simile da rappresentarsi sul web o su un ebook, formato Epub o Pdf (Copyright © Carlo Gislon/Nexus Edizioni, tutti i diritti riservati)

Ricapitolando, il formato Svg:

  • è scalabile a volontà senza perdita di qualità
  • i contorni sono più nitidi e sempre ugualmente nitidi ad ogni ingrandimento
  • consente le trasparenze, così da aggiungere un fondino o da mostrare ciò che sta sotto
  • consente le animazioni! E su questo non c’è competizione
  • il peso è… nullo e i tempi di caricamento rapidi (tranne per le illustrazioni complesse)
  • un file Svg può contenere sia elementi vettoriali che raster. Ottima cosa.

Icone in formato Svg, lo stesso file scalato che pesa appena una decina di Kbyte. Un peso d’altri tempi! (Copyright © Carlo Gislon, alcuni diritti riservati: puoi usare l’immagine citandone l’autore, altri usi previa richiesta)

Raccomandazioni d’uso

Il formato Svg è un po’ come una Formula 1: le prestazioni sono elevatissime ma la meccanica è sofisticata e ricca di trabocchetti per i non esperti.

Dopo averne fatto un uso frequente, sforzandomi di usarlo in immagini piuttosto sofisticate ho però isolato i problemi principali e le rispettive soluzioni.

Occhio ai testi!

Prima di creare il vostro file Svg, convertite il testo contenuto in tracciati altrimenti, se avete usato un font non disponibile nel dispositivi di destinazione o se avete effettuato regolazioni particolari, le incompatibilità sono assicurate.

Nel file in formato Svg forme e colori sono descritti con righe di codice che, anche per rappresentare il più piccolo elemento del nostro disegno, possono essere parecchie e tenere impegnato il nostro browser un po’ di tempo per il rendering quando esageriamo con la complessità.

Usate con moderazione il formato Svg per illustrazioni complesse, ma usatelo se offre dei vantaggi, anche estetici. Non fatevi ingabbiare dalle “buone pratiche”.

Con le “buone pratiche” si va sul sicuro ma non si va avanti e, sopratutto, non ci si diverte!

Occhio alla complessità del file

Se ne avete la possibilità, magari creando il file Svg con un programma di disegno come Illustrator, cercate di semplificare il più possibile il file eliminando punti di ancoraggio isolati, semplificando curve, chiudendo i tracciati, rinunciando a qualche dettaglio, se possibile.

Tracciati complessi potrebbero aggiungere molto peso all’immagine e allungare i tempi di caricamento o rendere addirittura impossibile un rendering corretto.

Di solito un file vettoriale appena creato è un po’ “grezzo”. Scoprirete che ci sono un sacco di punti di ancoraggio inutili o elementi ragruppabili e perfino oggetti trasparenti dimenticati.

Quando si rende vettoriale un’immagine raster con un programma come Illustrator, metà del codice che ne deriva è inutile o rinunciabile specie in una rappresentazione per il web.

Occhio alla compatibilità

L’unico limite del formato Svg è un… limite di altri. Molti servizi on line, molti social, non lo supportano. Richiedono il caricamento di formati Png o Jpg, il più delle volte.

In tal caso non resta che ricorrere ai vecchi, cari formati Png, Jpg o Gif a seconda del caso.

Anche i Cms (il sistema di gestione del nostro sito web) potrebbe, di default, impedirne l’uso ma in tal caso la cosa è risolvibile modificando le impostazioni.


Sopra, il formato Svg, sotto il Jpg alla massima qualità. Notate che è più difficile leggere i testi piccoli sul Jpg e che tale immagine è meno nitida. (Potrebbe venire convertita automaticamente dal mio sito web in WebP – qualità 75% ma la sostanza non cambia. Copyright © Carlo Gislon, alcuni diritti riservati: puoi usare l’immagine citandone l’autore. Altri usi, previa autorizzazione esplicita dell’autore)

A questo punto, penso di aver già spiegato in modo semplice e abbastanza pratico il formato e abbiamo già cominciato con qualche raffronto come nell’esempio sopra.

Ma approfondiamo il confronto con qualche “collega illustre”.

WebP, un altro bel tipetto

Il logo del formato WebP

Ho già descritto bene il formato WebP e ne ho riportato vari test in un altro mio articolo perciò qui ne voglio fare solo un rapidissimo riepilogo.

Cos’è il formato WebP? È un formato escogitato da Google con lo scopo di poter usare sul web immagini di alta qualità senza appesantire le pagine. Usa lo stesso algoritmo di compressione dei video e questo permette di arrivare a ridimensionamenti impensabili perfino dal jpg.

Anche qui vi voglio offrire la versione seria della definizione, direttamente dai progettisti del formato, stralcio ricavato dal link cui potete riferirvi per altri approfondimenti:

WebP è un formato di immagine moderno che offre una compressione senza perdita di dati e con perdita di dati superiore per le immagini sul web. Con WebP, webmaster e sviluppatori web possono creare immagini più piccole e complete che rendono il web più veloce Google developer team

Diciamo che permette di salvare un altro 30/40% di spazio rispetto al formato Jpg a parità di qualità e se non ci curiamo della qualità anche il 60 – 70% e più. In ogni caso è un bel traguardo.

Il risparmio di spazio è ancora maggiore se si usano trasparenze dove il suo rivale, il formato Png 24, perde nettamente producendo file di dimensioni molto, molto più grandi.

Il formato WebP è quindi per le immagini fotografiche con o senza trasparenze e per quel che l’ho testato io (lo uso da qualche anno e il mio sito web converte i file di questo tipo tutti in WebP automaticamente) ha reso privo di significato l’uso dei formati Jpg e Png. Mi spiace per loro.

L’handicap rispetto al formato Svg è quindi quello di non supportare le descrizioni vettoriali e ovviamente quelle misto vettoriali-raster.

Se vuoi approfondire e valutare dei miei test vai a questo articolo Formato WebP e Jpg a confronto. Teoria semplificata e test (molto) pratici

Png – Png24. Fine di un’era?

Che dire di questo formato dopo tale stroncatura? Una ragione valida per usarlo ci sarebbe ancora come svelerò nei capoversi che seguono.

Il motivo per cui il Png è uno, se non il più diffuso formato immagini sul Web è semplicemente che risale a trent’anni fa e che qualsiasi programmino riesce a esportare tale formato e qualsiasi applicazione lo supporta.

Una veneranda età che si riflette curiosamente anche nel fatto che non vi sia disponibile un’icona decente per tale formato (critica da designer con la puzza sotto il naso).

Nelle immagini fotografiche con trasparenze è superato dal WebP che consente una compressione molto superiore (anche senza perdita di dati).

Nelle immagini al tratto, con trasparenze o no, è “invece” surclassato dall’Svg che è più leggero e scalabile all’infinito e che consente perfino animazioni.

A essere cattivelli, ma più precisi, il principale motivo per cui ancora oggi viene usato è semplicemente “inadeguatezza tecnica” del supporto o dell’utente.

In effetti, per creare un file Svg da zero c’è bisogno di un programma un po’ sofisticato come Illustrator o programmi di disegno vettoriale gratuiti ma comunque un po’ impegnativi.

Un profano ha ancora ottimi motivi per creare dei Png, un grafico, un web designer o uno sviluppatore, certamente no tranne quando un service chiede specificatamente tale formato.

Conclusioni

Ricapitolando, ti ho presentato il formato Svg in relazione a due altri due formati: l’emergente WebP e il tramontante (quasi) Png. Mancherebbe il Jpg…

Ne ho evitato il confronto perché il suo competitor è praticamente solo il WebP e tale contesa è stata ben trattata nell’articolo del mio blog già citato in precedenza.

Per quel che conta, i “miei” formati web sono ormai da un po’ quasi esclusivamente WebP e Svg così come vedi in questo sito web e non ho mai notato problemi di compatibilità tranne nei tentativi di usare immagini veramente complesse.

Spero che queste riflessioni ti siano di pratico aiuto.

Formato Svg vs Png vs WebP… Svg contro tutti!

Formato Svg, Png, WebP… Quando e come usarli? Un articolo piuttosto tecnico ma che saprà tradurre la teoria in pratica. Un confronto per non-esperti informatici ma preciso e approfondito

Formato Svg

Formato WebP

Formato Png24

Formato Svg

Formato WebP

Formato Png24

Cosa è il formato Svg?

Un tantino sorprendente, forse, l’utilizzo dell’immagine di una copertina come esempio di file formato Svg. Forse ti aspettavi un semplice logo o un terzo gattino stilizzato.

Certo, sarebbe un uso corretto per questo formato, come gli standard raccomandano, ma… ho raggiunto il limite dei gattini rappresentabili in una mia pagina web!

Il fatto è che il formato Svg può fare molto di più. Ho voluto perciò esordire rendendo onore alle reali potenzialità del formato e non finisce qui, come ti mostrerò di seguito.

Per cominciare, lo descriverei semplicemente così: Il formato più avanzato per rappresentare oggetti vettoriali, oggetti misti vettoriali-raster e animazioni sul web o nelle pubblicazioni elettroniche (ebook).

Troppo semplice? Niente paura, lo renderemo un po’ più difficile ma soprattutto più interessante.

L’Svg è un formato creato per il Web dallo stesso gruppo che ne sviluppa quasi tutti gli standard come i linguaggi Xml, Html, Css ecc. Questi signori (in realtà un insieme di corporation associate) dicono come andrebbero fatte le cose e noi lo facciamo, semplice…

È basato su Xml (un linguaggio esteso di markup che può gestire del codice specifico al suo interno). Puoi trovarne tutte le specifiche a questa precisa pagina. Ma ecco qui un estratto per fornirti subito la versione dei capoccioni preposti:

L’SVG è un linguaggio per descrivere la grafica bidimensionale. Come formato autonomo o se combinato con altri XML, utilizza la sintassi XML [xml]. Il codice SVG utilizzato all’interno dei documenti HTML utilizza la sintassi HTML [HTML]W3c

Tutto chiaro, no? A me per niente ma non è un problema, ho scritto questo articolo tarandolo sui duri di comprendonio come me, ergo: è comprensibile da chiunque.

A cosa serve il formato Svg?

L’uso, si diceva, è destinato a immagini al tratto, immagini, cioè, con tratti e aree di colore nette, piene o sfumate. Questo è il logo Svg in formato (indovina?) Svg:

Logo formato file Svg

Ma l’Svg è il miglior formato anche per immagini miste tratto-tono continuo (come una foto con dei testi sopra, vedi esempio copertina poco in basso) e per le animazioni web.

Questa immagine è in formato Svg. L’illustrazione principale è un’immagine raster, realizzata con un programma a matrice di bit (Photoshop in questo caso) mentre i testi e il logo della testata sono vettoriali, tutti convertiti in tracciati. Io trovo il formato Svg ideale proprio per questo tipo di rappresentazioni: copertine, infografiche e simile da rappresentarsi sul web o su un ebook, formato Epub o Pdf (Copyright © Carlo Gislon/Nexus Edizioni, tutti i diritti riservati)

Ricapitolando, il formato Svg:

  • è scalabile a volontà senza perdita di qualità
  • i contorni sono più nitidi e sempre ugualmente nitidi ad ogni ingrandimento
  • consente le trasparenze, così da aggiungere un fondino o da mostrare ciò che sta sotto
  • consente le animazioni! E su questo non c’è competizione
  • il peso è… nullo e i tempi di caricamento rapidi (tranne per le illustrazioni complesse)
  • un file Svg può contenere sia elementi vettoriali che raster. Ottima cosa.

Icone in formato Svg, lo stesso file scalato che pesa appena una decina di Kbyte. Un peso d’altri tempi! (Copyright © Carlo Gislon, alcuni diritti riservati: puoi usare l’immagine citandone l’autore, altri usi previa richiesta)

Raccomandazioni d’uso

Il formato Svg è un po’ come una Formula 1: le prestazioni sono elevatissime ma la meccanica è sofisticata e ricca di trabocchetti per i non esperti.

Dopo averne fatto un uso frequente, sforzandomi di usarlo in immagini piuttosto sofisticate ho però isolato i problemi principali e le rispettive soluzioni.

Occhio ai testi!

Prima di creare il vostro file Svg, convertite il testo contenuto in tracciati altrimenti, se avete usato un font non disponibile nel dispositivi di destinazione o se avete effettuato regolazioni particolari, le incompatibilità sono assicurate.

Nel file in formato Svg forme e colori sono descritti con righe di codice che, anche per rappresentare il più piccolo elemento del nostro disegno, possono essere parecchie e tenere impegnato il nostro browser un po’ di tempo per il rendering quando esageriamo con la complessità.

Usate con moderazione il formato Svg per illustrazioni complesse, ma usatelo se offre dei vantaggi, anche estetici. Non fatevi ingabbiare dalle “buone pratiche”.

Con le “buone pratiche” si va sul sicuro ma non si va avanti e, sopratutto, non ci si diverte!

Occhio alla complessità del file

Se ne avete la possibilità, magari creando il file Svg con un programma di disegno come Illustrator, cercate di semplificare il più possibile il file eliminando punti di ancoraggio isolati, semplificando curve, chiudendo i tracciati, rinunciando a qualche dettaglio, se possibile.

Tracciati complessi potrebbero aggiungere molto peso all’immagine e allungare i tempi di caricamento o rendere addirittura impossibile un rendering corretto.

Di solito un file vettoriale appena creato è un po’ “grezzo”. Scoprirete che ci sono un sacco di punti di ancoraggio inutili o elementi ragruppabili e perfino oggetti trasparenti dimenticati.

Quando si rende vettoriale un’immagine raster con un programma come Illustrator, metà del codice che ne deriva è inutile o rinunciabile specie in una rappresentazione per il web.

Occhio alla compatibilità

L’unico limite del formato Svg è un… limite di altri. Molti servizi on line, molti social, non lo supportano. Richiedono il caricamento di formati Png o Jpg, il più delle volte.

In tal caso non resta che ricorrere ai vecchi, cari formati Png, Jpg o Gif a seconda del caso.

Anche i Cms (il sistema di gestione del nostro sito web) potrebbe, di default, impedirne l’uso ma in tal caso la cosa è risolvibile modificando le impostazioni.


Sopra, il formato Svg, sotto il Jpg alla massima qualità. Notate che è più difficile leggere i testi piccoli sul Jpg e che tale immagine è meno nitida. (Potrebbe venire convertita automaticamente dal mio sito web in WebP – qualità 75% ma la sostanza non cambia. Copyright © Carlo Gislon, alcuni diritti riservati: puoi usare l’immagine citandone l’autore. Altri usi, previa autorizzazione esplicita dell’autore)

A questo punto, penso di aver già spiegato in modo semplice e abbastanza pratico il formato e abbiamo già cominciato con qualche raffronto come nell’esempio sopra.

Ma approfondiamo il confronto con qualche “collega illustre”.

WebP, un altro bel tipetto

Il logo del formato WebP

Ho già descritto bene il formato WebP e ne ho riportato vari test in un altro mio articolo perciò qui ne voglio fare solo un rapidissimo riepilogo.

Cos’è il formato WebP? È un formato escogitato da Google con lo scopo di poter usare sul web immagini di alta qualità senza appesantire le pagine. Usa lo stesso algoritmo di compressione dei video e questo permette di arrivare a ridimensionamenti impensabili perfino dal jpg.

Anche qui vi voglio offrire la versione seria della definizione, direttamente dai progettisti del formato, stralcio ricavato dal link cui potete riferirvi per altri approfondimenti:

WebP è un formato di immagine moderno che offre una compressione senza perdita di dati e con perdita di dati superiore per le immagini sul web. Con WebP, webmaster e sviluppatori web possono creare immagini più piccole e complete che rendono il web più veloce Google developer team

Diciamo che permette di salvare un altro 30/40% di spazio rispetto al formato Jpg a parità di qualità e se non ci curiamo della qualità anche il 60 – 70% e più. In ogni caso è un bel traguardo.

Il risparmio di spazio è ancora maggiore se si usano trasparenze dove il suo rivale, il formato Png 24, perde nettamente producendo file di dimensioni molto, molto più grandi.

Il formato WebP è quindi per le immagini fotografiche con o senza trasparenze e per quel che l’ho testato io (lo uso da qualche anno e il mio sito web converte i file di questo tipo tutti in WebP automaticamente) ha reso privo di significato l’uso dei formati Jpg e Png. Mi spiace per loro.

L’handicap rispetto al formato Svg è quindi quello di non supportare le descrizioni vettoriali e ovviamente quelle misto vettoriali-raster.

Se vuoi approfondire e valutare dei miei test vai a questo articolo Formato WebP e Jpg a confronto. Teoria semplificata e test (molto) pratici

Png – Png24. Fine di un’era?

Che dire di questo formato dopo tale stroncatura? Una ragione valida per usarlo ci sarebbe ancora come svelerò nei capoversi che seguono.

Il motivo per cui il Png è uno, se non il più diffuso formato immagini sul Web è semplicemente che risale a trent’anni fa e che qualsiasi programmino riesce a esportare tale formato e qualsiasi applicazione lo supporta.

Una veneranda età che si riflette curiosamente anche nel fatto che non vi sia disponibile un’icona decente per tale formato (critica da designer con la puzza sotto il naso).

Nelle immagini fotografiche con trasparenze è superato dal WebP che consente una compressione molto superiore (anche senza perdita di dati).

Nelle immagini al tratto, con trasparenze o no, è “invece” surclassato dall’Svg che è più leggero e scalabile all’infinito e che consente perfino animazioni.

A essere cattivelli, ma più precisi, il principale motivo per cui ancora oggi viene usato è semplicemente “inadeguatezza tecnica” del supporto o dell’utente.

In effetti, per creare un file Svg da zero c’è bisogno di un programma un po’ sofisticato come Illustrator o programmi di disegno vettoriale gratuiti ma comunque un po’ impegnativi.

Un profano ha ancora ottimi motivi per creare dei Png, un grafico, un web designer o uno sviluppatore, certamente no tranne quando un service chiede specificatamente tale formato.

Conclusioni

Ricapitolando, ti ho presentato il formato Svg in relazione a due altri due formati: l’emergente WebP e il tramontante (quasi) Png. Mancherebbe il Jpg…

Ne ho evitato il confronto perché il suo competitor è praticamente solo il WebP e tale contesa è stata ben trattata nell’articolo del mio blog già citato in precedenza.

Per quel che conta, i “miei” formati web sono ormai da un po’ quasi esclusivamente WebP e Svg così come vedi in questo sito web e non ho mai notato problemi di compatibilità tranne nei tentativi di usare immagini veramente complesse.

Spero che queste riflessioni ti siano di pratico aiuto.

Ricordati di condividere l'articolo se ti è piaciuto:

Sullo stesso argomento:

© Carlo Gislon – Se vuoi usare gli articoli del mio blog cita l’autore (Carlo Gislon) e inserisci un link al mio articolo originale. Fare altrimenti viola le leggi sul copyright e può essere perseguito legalmente. Articoli copiati possono essere facilmente rintracciati.