Icone SVG contro icone PNG nei siti web moderni

Mi chiedo perché così pochi siti web moderni utilizzino ancora solo PNG per le icone (ma questa ipotesi si basa solo sulla mia osservazione). Finora lo so, i motivi principali per l'utilizzo di PNG su SVG sono IE8 e che SVG utilizza più potenza della CPU (ma non credo che questo sia un problema per semplici icone 1K). Posso vedere (e attualmente usiamo) molti vantaggi nell'utilizzo di SVG, sia quando è usato come sprite, come immagini o come SVG in linea.

(Domanda Alla ricerca di una ricerca: PNG Sprite vs SVG sprite vs Icon fonts si concentra sulle prestazioni e non ha una risposta pertinente, Icon Font vs SVG caching e la preoccupazione di rete si concentra sul traffico di rete, ma è facilmente risolvibile, ad esempio, templating.)

Se il nuovo sito web supporta solo i browser moderni, c'è qualche motivo per non usare SVG (o - c'è qualche motivo per usare PNG per le icone)? Se non ci interessa IE8 e l'uso di SVG è supportato da modelli e / o cache, c'è qualche problema per fare affidamento solo su SVG?

Motivi per cui SVG può essere una buona scelta:

• supporta perfettamente browser di qualsiasi dimensione, specialmente con css background-size
• puoi ridimensionarli su / giù, ad esempio per un effetto hover
• puoi incorporare SVG e modificarli in tempo reale con JavaScript e DOM
• puoi modellare SVG e parti di SVG con CSS (cambiando colori, contorni, ecc.)
• puoi generare SVG dinamicamente, sul client o sul server. A causa della loro natura basata sul testo, non sono necessarie librerie di basso livello o potenti server per crearli.

Motivi per cui PNG può essere una buona scelta:

• supporto browser
• strumenti esistenti per la creazione di fogli sprite PNG
• la maggior parte delle persone ha un editor compatibile con PNG sul proprio computer
• i tuoi grafici sono foto o altre immagini difficili da vettorializzare

Altre preoccupazioni:

• alcuni editor SVG possono memorizzare metadati nei tuoi SVG, aumentando le dimensioni del file e probabilmente esponendo involontariamente i dati
  • ad es. quando esporti un PNG in Inkscape ha salvato / salva il percorso assoluto di questa directory nell'SVG quando salvi
  • I compressori SVG potrebbero rimuoverlo, ma non l'ho testato (sentiti libero di modificare se lo hai)

A meno che tu non mostri forme / design molto semplici o che tu debba modificare parti della grafica con l'app, non c'è molto incentivo a usare SVG. Puoi produrre un PNG al doppio della dimensione originale (per i display retina) e avere comunque una dimensione del file inferiore di un ordine di grandezza, per non parlare di una migliore copertura per i browser legacy (non c'è bisogno di javascript o polyfill).

Lo dico come qualcuno che costruisce interfacce utente con grafica vettoriale. È uno strumento di progettazione fantastico, ma per la consegna / larghezza di banda / copertura è difficile superare PNG. Proprio ieri sera ho provato un logo ben noto. CocaCola.svg era quasi 20K. Dato che era un colore solido / piatto, ho esportato come PNG-8 con compressione della tavolozza a 12 colori e l'ho ridotto a 1.6K (!!!) Per pochi loghi non è un grosso problema, ma quando devi mostrare 40 di loro .. beh, hai la foto.

La parte migliore è che puoi trasformare un PNG in un uri di dati base64 e incorporarli direttamente nel tuo foglio di stile. Questo non è consigliato con SVG, un formato già famoso per problemi di prestazioni e compatibilità, specialmente sui browser mobili.

In conclusione devo dire che ci sono punti di forza e casi d'uso per entrambi, ma PNG ha tracciato molte più piste e devi affrontare meno resistenza quando vai con la corrente. Per quei casi dispari in cui SVG si adatta meglio, consiglio vivamente questo articolo e questa risorsa di apprendimento

Progettazione felice!

SVG è bello (come FakeRainBrigand ben descritto) e rende magnificamente ma può essere piuttosto complesso. Un browser ha più lavoro da fare quando si tratta di dati vettoriali invece di immagini basate sui pixel. Un'immagine è un elemento, un SVG può avere molti figli che possono anche essere aggiunti al DOM se usati in linea.

Non ho eseguito alcun test di prestazioni di valore, ma da un punto di vista logico SVG dovrebbe essere usato con attenzione quando si tratta di prestazioni, specialmente quando si tratta di browser mobili di mezza età (stress della CPU). Sarebbe molto utile avere un grafico in cui puoi vedere la potenza della CPU consumata da 100 immagini SVG contro 100 immagini PNG su diversi dispositivi Android e IOS ...

Un altro problema con SVG è che il tag necessita di un attributo di larghezza e altezza per alcuni browser Android / Samsung e il nostro buon vecchio IE. E i più moderni editor SVG come A *** e Illustrator aggiungono semplicemente l'attributo "viewBox".

La cosa più bella di SVG è che rende bello e nitido con qualsiasi densità di pixel.

È vero, png è usato quasi ovunque. Penso che sia perché l'SVG, nella maggior parte dei casi, è piuttosto inutile, l'immagine dovrebbe essere più grande (penso) e il computer deve rigenerare l'immagine ogni volta che la ingrandisci (perché ingrandisci sempre le immagini, vero ?) Penso che questo sia il motivo più importante.

Notiamo che SVG in termini di prestazioni può diventare orribile. Anche sui browser moderni, come Chrome (scrivendo questo nel 2019!), Una pagina simile a CMS con poche centinaia (praticamente 3-800) di icone svg blocca letteralmente il browser per più di 5 secondi per completare il rendering. Massimizzare la CPU nel frattempo.

Come notato altrove, il conteggio degli SVG incorporati nella pagina aumenta espontenzialmente il carico sul browser, quindi se ti capita di affrontare tale situazione

Opzione n. 1: converti svgs in webfont (vedi grafico delle prestazioni qui: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Opzione n. 2: torna a semplici vecchi PNG

In tali situazioni in cui non vuoi mai fare nulla di stravagante come la modifica del colore al volo, e hai MOLTE istanze di SVG, il vecchio PNG fa il lavoro e salva la giornata!