Risposte:
Direi PNG semplicemente per il fatto che sembra essere un formato più accettato di SVG.
Il fatto che tu abbia chiamato SVG come opzione, significa che possiamo escludere la grafica fotografica come un caso d'uso previsto, perché gli SVG sono buoni solo per la grafica line-art come loghi, icone e illustrazioni simili a clip art.
Se stai prendendo in considerazione questa scelta per la grafica fotografica, non c'è scelta; Il PNG probabilmente sarà sempre migliore. Per la grafica in cui SVG è un'opzione praticabile, SVG è l'opzione migliore con un fallback PNG / JPEG. PNG ha molti punti di forza, ma in termini di scalabilità e dimensione del file, spesso non corrisponde a SVG.
Pesandoli l'uno contro l'altro, PNG sarà sicuramente supportato da più browser rispetto a SVG in questo momento, ma le risoluzioni dei dispositivi appena rilasciati sono in costante aumento, il che significa che i PNG dovranno essere serviti in base a un'ampia varietà di risoluzioni diverse (tramite Media Query, JavaScript o User Agent Sniffing) o ridimensionato dai browser, che potrebbe produrre alcuni risultati imperfetti.
Guardando ciò che sappiamo il futuro riserva; risoluzioni sempre più alte, supporto più ampio e uso più ampio di SVG su Internet; ha senso costruire per quello che sta arrivando.
In generale, i siti Web dovrebbero essere costruiti per durare per molti anni; tra 5 anni il tuo sito Web meravigliosamente retrocompatibile potrebbe sembrare sorprendente per il 2% degli utenti di Internet che usano ancora vecchi browser, ma abbastanza scarso sui browser aggiornati con risoluzioni pazze - quindi è davvero una pila di scelte difficili su come compromesso.
Solo PNG
Per motivi di qualità dovrai servire almeno cinque versioni diverse a seconda delle dimensioni e delle risoluzioni dello schermo - e questa è una stima molto conservativa, potresti finire con 10-15 versioni della stessa immagine se vuoi essere estremamente accurato . Anche questo richiede del tempo per essere implementato.
Se scegli di pubblicare un singolo elemento grafico e di ridimensionarlo con il browser, i risultati saranno probabilmente meno che perfetti e potrebbero persino essere brutti a seconda della quantità di ridimensionamento.
Un gran numero di media query potrebbe gonfiare inutilmente il CSS e influire negativamente sulla velocità di caricamento della pagina.
Apparirà fantastico su browser e dispositivi più vecchi, ma non così tanto su quelli più recenti.
SVG con fallback PNG / JPEG / GIF singolo
È possibile utilizzare SVG ovunque e quindi ripristinarlo in un altro formato per i browser che non supportano SVG. Il vantaggio principale è che è necessario un solo file per tutte le diverse risoluzioni.
Se scendi a compromessi e accetti che gli utenti di browser obsoleti possano vivere con grafica in scala imperfetta, avrai bisogno solo di un'altra versione di ciascun file in formato PNG, JPEG o GIF.
Ciò richiederebbe un tempo simile per essere implementato come le query multimediali solo PNG - forse anche meno, il che significa che probabilmente avrebbe lo stesso prezzo.
Avrà un bell'aspetto su tutti i nuovi dispositivi, con sacrifici sulla tecnologia più vecchia.
SVG con fallback multipli PNG / JPEG / GIF dipendenti dalla risoluzione e dalle dimensioni dello schermo
Potresti prima servire SVG e poi PNG dipendenti dalla risoluzione per browser che non supportano SVG. Questa sarebbe l' opzione più completa, più retrocompatibile e più avanzata, più coerente e costosa in termini di tempo.
Probabilmente ci vorrebbe tanto tempo quanto 1 e 2 combinati, oltre a un piccolo extra per elaborare i nodi.
Apparirà fantastico su quasi tutti i dispositivi.
<picture>sull'elemento che aiuta con varie dimensioni di immagine
SVG è scalabile, se hai una grafica vettoriale che è un chiaro vantaggio. Per la pixel grafica PNG è meglio. Un aspetto negativo è che Internet Explorer supporta SVG solo con la prossima versione 9 (prima con plugin). I browser mobili possono anche avere un supporto limitato per SVG.
EDIT : Come sottolinea ClemDesm, le versioni precedenti di IE non supportano il PNG completamente trasparente, poiché è supportato IE8. I PNG non trasparenti funzionano bene. La risposta di Computerish ha un'ottima soluzione per la gestione delle immagini vettoriali per ora: tienili come SVG, ma esportali per il web come PNG. Sono pienamente d'accordo con questa soluzione.
Sicuramente usare PNG per un sito Web. SVG semplicemente non è sufficientemente ampiamente supportato e ha pochi (se presenti) vantaggi significativi rispetto al PNG per un'esportazione appiattita. Detto questo, conserva tutte le tue copie funzionanti in SVG.
Vorrei rimanere con PNG per essere al sicuro. SVG non è ancora pienamente accettato da molte grandi aziende e browser Internet. Sebbene gli SVG siano scalabili e siano vettori, spesso non sono necessari, occupano più spazio e complicano il sito Web.
Spero che abbia risposto alla tua domanda :)
Anche se SVG non è accettato a livello globale e alcune persone hanno un frustrante ridimensionamento dei PNG, ho sempre scoperto che la creazione di un'icona all'interno di Adobe Illustrator funziona meglio nel ridimensionare o ridurre un importo "ragionevole".