Ikon SVG vs. ikon PNG di situs web modern

Saya bertanya-tanya mengapa begitu sedikit situs web modern yang masih menggunakan hanya PNG untuk ikon (tetapi asumsi ini hanya berdasarkan pengamatan saya). Sejauh ini saya tahu, alasan utama menggunakan PNG daripada SVG adalah IE8 dan SVG menggunakan lebih banyak daya CPU (tapi saya tidak percaya ini adalah masalah untuk ikon 1K sederhana). Saya dapat melihat (dan saat ini kami menggunakan) banyak keuntungan dalam menggunakan SVG, baik ketika digunakan sebagai sprite, sebagai gambar, atau sebagai SVG inline.

(Pertanyaan Mencari penelitian: PNG Sprite vs SVG sprite vs Font ikon berfokus pada kinerja dan tidak memiliki jawaban yang relevan, Font Ikon vs. caching SVG dan perhatian jaringan berfokus pada lalu lintas jaringan, tetapi mudah dipecahkan dengan, misalnya, membuat template.)

Jika situs web baru hanya mendukung browser modern, adakah alasan untuk tidak menggunakan SVG (atau - adakah alasan untuk menggunakan PNG untuk ikon)? Jika kita tidak peduli dengan IE8 dan penggunaan SVG didukung oleh templating dan / atau caching, apakah ada tangkapan yang hanya mengandalkan SVG?

Alasan SVG bisa menjadi pilihan yang baik:

• itu secara mulus mendukung browser dengan ukuran berapa pun, terutama dengan css background-size
• Anda dapat menaikkan / menurunkan skala keinginan, seperti untuk efek hover
• Anda dapat menyematkan SVG dan melakukan modifikasi waktu nyata dengan JavaScript dan DOM
• Anda dapat mengatur gaya SVG dan bagian SVG dengan CSS (mengubah warna, garis besar, dll.)
• Anda dapat membuat SVG secara dinamis, baik di klien atau server. Karena sifatnya yang berbasis teks, Anda tidak memerlukan perpustakaan tingkat rendah atau server yang kuat untuk membuatnya.

Alasan PNG mungkin merupakan pilihan yang baik:

• dukungan browser
• perkakas yang ada untuk membuat spritesheets PNG
• kebanyakan orang memiliki editor yang kompatibel dengan PNG di komputer mereka
• grafik Anda adalah foto atau gambar lain yang sulit untuk di-vektorisasi

Kekhawatiran lainnya:

• beberapa editor SVG mungkin menyimpan metadata di SVG Anda, memperbesar ukuran file dan mungkin secara tidak sengaja mengekspos data
  • misalnya ketika Anda mengekspor PNG di Inkscape, itu / tidak menyimpan jalur absolut ke direktori ini di SVG saat Anda menyimpan
  • Kompresor SVG dapat menghapus ini, tetapi saya belum mengujinya (silakan edit jika Anda punya)

Kecuali jika Anda menunjukkan bentuk / desain yang sangat sederhana atau secara khusus perlu memodifikasi bagian grafik dengan aplikasi, tidak banyak insentif untuk menggunakan SVG. Anda dapat menghasilkan PNG dengan ukuran dua kali lipat dari ukuran aslinya (untuk tampilan retina) dan ukuran file masih dalam urutan yang lebih kecil - belum lagi cakupan yang lebih baik untuk browser lama (tidak perlu javascript atau polyfill).

Saya mengatakan ini sebagai seseorang yang membangun UI dengan grafik vektor. Ini adalah alat desain yang luar biasa, tetapi untuk pengiriman / bandwidth / jangkauan, sulit untuk melampaui PNG. Tadi malam saya menguji logo terkenal. CocaCola.svg hampir 20K. Karena itu adalah warna solid / datar, saya mengekspor sebagai PNG-8 dengan kompresi palet 12 warna dan menurunkannya menjadi 1.6K (!!!) Hanya untuk beberapa logo, itu bukan masalah besar, tetapi ketika Anda harus menunjukkan 40 dari mereka .. baiklah, Anda mendapatkan gambarannya.

Bagian terbaiknya adalah Anda dapat mengubah PNG menjadi data uri base64 dan menyematkannya langsung di stylesheet Anda. Ini tidak disarankan dengan SVG - format yang sudah terkenal dengan masalah kinerja dan kompatibilitasnya, terutama pada browser seluler.

Sebagai penutup, saya harus mengatakan ada kekuatan dan kasus penggunaan untuk keduanya, tetapi PNG telah merintis lebih banyak jalan dan Anda menghadapi lebih sedikit perlawanan ketika Anda mengikuti arus. Untuk kasus-kasus aneh di mana SVG memang lebih cocok, saya sangat merekomendasikan artikel ini dan sumber belajar ini

Selamat Mendesain!

SVG itu keren (bagaimana FakeRainBrigand dijelaskan dengan baik) dan ditampilkan dengan indah tetapi bisa sangat rumit. Browser memiliki lebih banyak pekerjaan yang harus dilakukan saat menangani data vektor daripada gambar berbasis piksel. Gambar adalah salah satu elemen, SVG mungkin memiliki banyak turunan yang bahkan dapat ditambahkan ke DOM saat digunakan sebaris.

Saya tidak melakukan tes kinerja yang berharga tetapi dari sudut pandang logis, SVG harus digunakan dengan hati-hati dalam hal kinerja terutama ketika berhadapan dengan peramban seluler paruh baya (tekanan CPU). Akan sangat berguna memiliki bagan di mana Anda dapat melihat daya CPU yang dikonsumsi oleh 100 gambar SVG vs 100 gambar PNG di perangkat Android dan iOS yang berbeda ...

Hal lain yang mengganggu dengan SVG adalah bahwa Tag memerlukan atribut lebar dan tinggi untuk beberapa Android / Samsung browser apa pun dan IE lama kami yang baik. Dan kebanyakan Editor SVG modern seperti A *** e Illustrator hanya menambahkan atribut "viewBox".

Hal paling keren tentang SVG adalah ia membuatnya bagus dan tajam dalam kerapatan piksel apa pun.

Memang benar, png digunakan hampir di semua tempat. Saya pikir itu karena SVG, dalam banyak kasus, cukup tidak berguna, gambar harus lebih besar (menurut saya) dan komputer harus meregenerasi gambar setiap kali Anda memperbesarnya (karena Anda selalu memperbesar gambar, bukan? ?) Saya pikir ini adalah alasan terpenting.

Perhatikan bahwa performa SVG bisa menjadi mengerikan. Bahkan di browser modern, seperti Chrome (menulis ini pada tahun 2019!), Halaman mirip CMS dengan beberapa ikon svg 100-an (praktis 3-800) secara harfiah menggantung browser selama 5+ detik untuk menyelesaikan rendering. Memaksimalkan CPU sementara itu.

Seperti disebutkan di tempat lain, jumlah SVG yang disematkan di halaman secara eksponensial meningkatkan beban pada browser, jadi jika Anda kebetulan menghadapi situasi seperti itu

Opsi # 1: ubah svgs menjadi font web (Lihat bagan kinerja di sini: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Opsi # 2: kembali ke PNG lama biasa

Dalam situasi seperti itu di mana Anda ~ tidak pernah ingin melakukan sesuatu yang mewah seperti modifikasi warna saat itu juga, dan Anda memiliki BANYAK contoh SVG, PNG lama melakukan pekerjaan itu dan menyelamatkan hari!