Le immagini SVG sembrano ridimensionate meglio di un png, jpg o gif ad alta risoluzione?

So che se vuoi ingrandire un'immagine, allora un SVG è una scelta saggia.

Tuttavia, la mia situazione è che ho icone che voglio che gli utenti possano caricare tramite un CMS. Gli SVG sono un po 'più difficili da creare, quindi jpg, gif o png sembrano il formato ideale per gli amministratori.

Se caricati di dimensioni uguali o maggiori delle dimensioni del display e mantenuti nel giusto rapporto, jpg, gif o png possono avere la stessa qualità di un file SVG quando sono di dimensioni ridotte?

La mia ipotesi sarebbe che i browser debbano antialiarizzare uno svg anche al di sotto di una certa dimensione, quindi è probabile che sfocino tanto quanto qualsiasi altro formato, anche se le gif sembrano sfocare di più.

(Nota: leggere la risposta dell'OP prima di questa, poiché la mia risposta è un commento sull'indagine dell'OP)

Questo è un problema noto di Android Chrome. In alcune delle loro build hanno disabilitato l'anti-aliasing causando il rendering delle forme vettoriali con bordi nitidi. La ragione di ciò era di ridurre il sovraccarico creato dai calcoli anti aliasing. A causa di lamentele, hanno rilasciato un aggiornamento che avrebbe dovuto consentire l'antialiasing.

Esistono diversi thread in Stack Overflow che trattano questo problema. Eccone uno:
/programming/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas

Non sono riuscito a trovare un riferimento allo stesso problema su IPod Touch Safari, ma probabilmente è sicuro estrapolare e supporre che il problema sia lo stesso.

Ci sono modi per provare a forzare l'anti aliasing anche quando è disabilitato, come questo trucco che fondamentalmente aggiunge un po 'di padding attorno all'elemento causando per qualche motivo il browser ad applicare l'anti aliasing. Puoi anche provare a impostare l' attributo di rendering delle forme dell'elemento su qualcosa di diverso dai bordi nitidi e vedere se il browser lo onora.

Ho appena eseguito un test e l'unica differenza sembra essere sui browser mobili.

Ho creato un'immagine 990 x 900px dell'icona di Twitter (quell'icona sembra un progetto troppo dettagliato per un buon ridimensionamento, quindi ottimo per questo test). L'ho salvato come SVG, JPG, GIF, GIF trasparente (solo la forma dell'uccello, nessun colore di sfondo, invece aggiungendolo con CSS), PNG, PNG trasparente.

Poi li ho ridotti a 15px, 25px, 50px, 100px e 150px.

Ecco i risultati in Firefox:

Ecco i risultati in Chrome:

Se eseguiamo lo zoom in uno screengrab dei risultati più piccoli in modo da poter vedere quali pixel vengono generati, Firefox (in alto) sta scurendo leggermente i bordi delle versioni non trasparenti, ma tutti gli altri risultati sono molto simili.

Tuttavia, su un browser IPod Touch Safari, la versione SVG sembra piuttosto sfocata e le altre piuttosto pixelate:

Un risultato simile si vede anche su Android Chrome. Non ho preso uno screenshot di questo.

Mi chiedo se la ragione di ciò potrebbe essere qualcosa a che fare con la densità dei pixel, che è la principale differenza nel display, anche se ciò avrebbe più senso per me se tutte le immagini fossero gestite in modo diverso sui dispositivi mobili, piuttosto che su SVG.

Se qualcuno può spiegare perché questo è il caso, allora trasferirò la spunta di risposta accettata. Altrimenti, immagino che la risposta TL; DR sia che dipende se preferisci icone sfocate o pixelate (o per creare molte icone con dimensioni pixel perfette per i tuoi punti di interruzione reattivi).

modifica: da allora ho osservato che gli svgs sono di solito molto più chiari sui dispositivi Apple - l'uccello twitter potrebbe essere stato troppo dettagliato per essere mostrato nei miei test sopra, quindi senti che sono il formato giusto da usare per le icone.

Esiste una distinzione molto importante tra immagini vettoriali e immagini bitmap. Le immagini vettoriali, se semplificiamo un po ', vengono renderizzate dal client mentre le immagini bitmap vengono eseguite da te.

Ciò significa che l'applicazione a cui stai inviando l'immagine ha più voce in capitolo su come si comporta. Il risultato finale è che hai i seguenti aspetti negativi :

• Ci vogliono più risorse per rendere l'immagine presentabile
  • In questo caso, il rendering potrebbe scegliere di ridurre la qualità perché non dispone di risorse sufficienti per farlo meglio.
• Ogni sistema di imaging ha una propria serie di stranezze e difetti
  • Rende più difficile essere coerenti
  • Hai i problemi di un programmatore

D'altra parte ci sono alcuni vantaggi di questo:

• L'immagine può essere ridimensionata liberamente e avere opzioni più manipolative.
  • Questo è semplicemente il risultato del lavoro svolto alla fine dei clienti, in modo che possano dedicare più tempo al calcolo dei pixel per ottenere un'immagine più ampia se si inviano elementi che sa come ridimensionare.
• I dati in molti casi sono più piccoli dell'immagine pixel (anche se non deve essere)

Non c'è molto che puoi fare se un sistema ha un renderer buggy. La tua applicazione finale dà una scelta e possono usare quella scelta per prendere decisioni sbagliate.

Che è migliore

Dipende da quanto bene puoi renderizzare la tua immagine e quanta larghezza di banda hai a tua disposizione. È certamente possibile fare un rendering migliore di quello che fanno i browser. Non sorprende che si possa fare anche un lavoro migliore di Illustrator. Ma poi perdi tutti i vantaggi di avere un rendering differito.

C'è una terza opzione.

Se non sei soddisfatto dei risultati, puoi sempre provare a creare il tuo motore di rendering. Con piattaforme che supportano webgl puoi. Vedi qui per un esempio . Ma questo è piuttosto hardcore e non ti salva dai dettagli di implementazione.

(Non ci sono abbastanza punti per commentare direttamente la risposta di Richard B.)

Per rispondere alla tua domanda Richard B, vediamo spesso questo effetto su elementi che richiedono l'antialiasing su hardware a basso consumo. Ciò accade anche su elementi DOM con angoli arrotondati, quando l'antialiasing viene ridotto o rimosso da tali ambienti.

Nella nostra azienda, abbiamo alcuni casi in cui utilizziamo hardware a basso consumo e abbiamo iniziato a riscontrare questo problema delle "forme estremamente irregolari". Abbiamo disabilitato / ridotto la quantità di antialiasing per migliorare le prestazioni. Questo è probabilmente lo stesso motivo per cui i test sui dispositivi mobili hanno restituito i risultati ottenuti.