Saya baru saja menjalankan tes dan satu-satunya perbedaan tampaknya ada di browser seluler.
Saya membuat gambar 990 x 900px dari ikon Twitter (ikon itu tampaknya terlalu detail untuk penskalaan yang baik, sangat bagus untuk pengujian ini). Saya menyimpan ini sebagai SVG, JPG, GIF, Transparent GIF (hanya bentuk burung, tanpa warna latar belakang, alih-alih menambahkan ini dengan CSS), PNG, PNG transparan.
Saya kemudian menyusut menjadi 15px, 25px, 50px, 100px dan 150px.
Inilah hasilnya di Firefox:
Inilah hasilnya di Chrome:
Jika kita memperbesar screengrab dari hasil terkecil sehingga kita dapat melihat piksel apa yang dihasilkan, maka Firefox (atas) sedikit menggelapkan tepi pada versi yang tidak transparan, tetapi semua hasil lainnya sangat mirip.
Namun, pada peramban IPod Touch Safari, versi SVG tampaknya cukup kabur, dan yang lainnya cukup pixelated:
Hasil serupa juga terlihat di Android Chrome. Saya belum mengambil tangkapan layar ini.
Saya bertanya-tanya apakah alasan untuk ini mungkin ada hubungannya dengan kerapatan piksel, yang merupakan perbedaan utama dalam tampilan, meskipun itu akan lebih masuk akal bagi saya jika semua gambar ditangani secara berbeda pada ponsel, bukan hanya pada SVG.
Jika seseorang dapat menjelaskan mengapa hal ini terjadi, maka saya akan mentransfer centang jawaban yang diterima. Kalau tidak, saya kira jawaban TL; DR itu tergantung apakah Anda lebih suka ikon yang buram atau pixelated (atau untuk membuat banyak ikon pada ukuran pixel sempurna untuk breakpoint responsif Anda).
sunting: Saya telah mengamati bahwa svgs biasanya jauh lebih jelas pada perangkat apple - burung twitter mungkin terlalu detail untuk ditampilkan dalam pengujian saya di atas, jadi rasakan bahwa mereka adalah format yang tepat untuk digunakan untuk ikon.