Apakah gambar SVG terlihat lebih diperkecil daripada png, jpg, atau gif resolusi tinggi?

Saya tahu bahwa jika Anda ingin memperbesar gambar, maka SVG adalah pilihan yang bijaksana.

Namun, situasi saya adalah saya memiliki ikon yang saya inginkan agar pengguna dapat mengunggah melalui CMS. SVG hanya sedikit lebih sulit untuk dibuat, dan jpg, gif atau png tampaknya merupakan format yang ideal untuk admin.

Jika diunggah sama atau lebih besar dari ukuran tampilan, dan dijaga dalam rasio yang tepat, dapatkah jpgs, gifs atau pngs menjadi kualitas tinggi seperti SVG ketika dikurangi ukurannya?

Asumsi saya adalah bahwa browser perlu antialiase svg di bawah ukuran tertentu juga, sehingga mereka cenderung mengaburkan sama seperti format lainnya, meskipun gif tampaknya lebih kabur.

(Catatan: harap baca jawaban OP sendiri sebelum ini, karena jawaban saya adalah komentar pada investigasi OP)

Ini adalah masalah yang diketahui dari Android Chrome. Pada beberapa build mereka menonaktifkan anti aliasing yang menyebabkan bentuk vektor di-render dengan edge yang tajam. Alasan untuk ini adalah untuk mengurangi kelebihan yang diciptakan oleh perhitungan anti aliasing. Karena keluhan mereka merilis pembaruan yang seharusnya mengaktifkan anti aliasing kembali.

Ada beberapa utas dalam Stack Overflow yang membahas masalah ini. Inilah salah satunya:
/programming/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas

Saya tidak dapat menemukan referensi untuk masalah yang sama pada IPod Touch Safari tetapi mungkin lebih aman untuk memperkirakan dan menganggap masalahnya sama.

Ada cara untuk mencoba memaksa anti-aliasing bahkan ketika dinonaktifkan, seperti trik ini yang pada dasarnya menambahkan sedikit lapisan di sekitar elemen yang menyebabkan browser untuk beberapa alasan untuk menerapkan anti aliasing. Anda juga dapat mencoba menyetel atribut render bentuk elemen menjadi sesuatu yang berbeda dari tepi tajam dan melihat apakah browser menghormatinya.

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.

Ada perbedaan yang sangat penting antara gambar vektor dan gambar bitmap. Gambar vektor, jika kami sederhanakan, diberikan oleh klien sementara gambar bitmap sedang dibuat oleh Anda.

Ini berarti bahwa aplikasi yang Anda kirimi gambar memiliki lebih banyak pendapat tentang bagaimana perilakunya. Hasil akhirnya adalah Anda memiliki kelemahan berikut :

• Dibutuhkan lebih banyak sumber daya untuk membuat gambar lebih rapi
  • Dalam hal ini yang diberikan mungkin memilih untuk menurunkan kualitas karena tidak memiliki sumber daya yang cukup untuk melakukannya dengan lebih baik.
• Setiap sistem pencitraan memiliki serangkaian kebiasaan dan kelemahannya sendiri
  • Membuatnya lebih sulit untuk konsisten
  • Anda mendapatkan masalah seorang programmer

Di sisi lain ada beberapa manfaat dari ini:

• Gambar dapat diskalakan secara bebas dan memiliki opsi yang lebih manipulatif.
  • Ini hanyalah hasil dari pekerjaan yang dilakukan pada klien sehingga mereka dapat menghabiskan lebih banyak waktu pada komputasi piksel untuk mendapatkan gambar yang lebih besar jika Anda mengirim elemen yang tahu bagaimana skala.
• Data dalam banyak kasus lebih kecil dari gambar piksel (meskipun tidak harus)

Tidak banyak yang dapat Anda lakukan jika sistem memiliki penyaji buggy. Aplikasi akhir Anda memberi pilihan dan mereka dapat menggunakan pilihan itu untuk membuat keputusan yang buruk.

Mana yang lebih baik

Itu tergantung pada seberapa baik Anda dapat membuat gambar Anda dan berapa banyak bandwidth yang Anda miliki. Tentu memungkinkan untuk melakukan render yang lebih baik daripada yang dilakukan browser. Tidak terlalu mengejutkan orang dapat melakukan pekerjaan yang lebih baik daripada Illustrator juga. Tetapi kemudian Anda kehilangan semua manfaat dari memiliki rendering yang ditangguhkan.

Ada opsi ketiga.

Jika Anda tidak puas dengan hasilnya, Anda selalu dapat mencoba membuat mesin rendering sendiri. Dengan platform yang mendukung webgl, Anda bisa. Lihat di sini untuk contoh . Tapi ini cukup hardcore dan tidak menyelamatkan Anda dari detail implementasi.

(Belum cukup poin untuk mengomentari jawaban Richard B secara langsung.)

Untuk menjawab pertanyaan Anda Richard B, Kita sering melihat efek ini pada elemen yang membutuhkan anti-aliasing pada perangkat keras yang lebih rendah. Ini bahkan terjadi pada elemen DOM yang terpojok, ketika anti-aliasing dikurangi atau dihilangkan dari lingkungan tersebut.

Di perusahaan kami, kami memiliki beberapa kasus di mana kami menggunakan perangkat keras berdaya rendah, dan mulai menghadapi masalah "bentuk sangat bergerigi" ini. Kami telah menonaktifkan / mengurangi jumlah anti-aliasing untuk meningkatkan kinerja. Ini kemungkinan alasan yang sama dengan pengujian Anda di ponsel mengembalikan hasil yang mereka lakukan.