Ikon SVG vs. ikon PNG di situs web modern

92

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?

html  svg  icons 
— Robert Goldwein
sumber
12
Para down-voter, bisakah Anda memberi tahu saya apa yang secara spesifik berdasarkan opini pada pertanyaan ini, di mana saya menanyakan alasan - teknis - spesifik ? Saya menghargai umpan balik tersebut, jadi saya dapat meningkatkan pertanyaan saya selanjutnya.
— Robert Goldwein
27
Robert, sepertinya tidak berdasarkan opini, tetapi orang terkadang masuk ke mode zombie dan hanya membaca sepintas pertanyaan tanpa benar-benar membacanya.
— Brigand
Saya lebih suka png karena kesederhanaan dan DOM yang lebih bersih. Satu poin untuk ditambahkan ke jawaban di bawah ini adalah bahwa dengan svg, Anda dapat mengubah warna secara dinamis. Jika sebuah ikon memiliki tiga warna: regular, active & hover, itu berarti 3 gambar png tetapi hanya satu svg.
— CodeToad
@Robert [ZOMBIE MODE] adalah pria yang luar biasa :): D
— QMaster

Jawaban:

105

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)
— Perampok
sumber
Terima kasih, orang-orang grafis kami membuat SVG di Illustrator, dan kemudian mengeditnya dengan tangan, jadi biasanya <svg> dengan sedikit elemen dan atribut, jadi kekhawatiran ini tidak terdengar - kekhawatiran saya adalah saya mengabaikan sesuatu yang serius, karena saya melihat hampir hanya manfaat di atas PNG klasik - tetapi mungkin intinya adalah <= IE8 atau> IE8. Misalnya, ikon standar dengan lingkaran dengan tanda tambah bahkan lebih ringkas di SVG daripada di PNG.
— Robert Goldwein
Ya, beberapa orang mendapatkan SVG mereka dari pihak ketiga, dan tidak membukanya di editor teks, atau memastikannya dikompresi. Hanya tidak ingin mengabaikannya. Ada masalah yang sama dengan PNG sekarang setelah saya memikirkannya; seringkali data yang tidak berguna (dalam konteks web) disimpan di dalamnya. Data ini digunakan oleh editor, browser file, dan program lainnya. Ini lebih umum terjadi pada jpegs (merek toko kamera, model, lensa, pengaturan, dll.).
— Brigand
1
Terima kasih, jadi saya kira sebenarnya tidak ada kerugian untuk menggunakan SVG dalam proyek kami dan kami akan mengintegrasikannya lebih dalam. Terima kasih atas pemaparan anda.
— Robert Goldwein
Cara yang tepat untuk menggunakan ikon vektor adalah Font Ikon. Bagi saya, kerugian terbesar dengan ikon SVG adalah, atribut data di CSS tidak berfungsi untuk IE10 / 11.
— Gerfried
Font Ikon @Gerried memiliki banyak masalah aksesibilitas. Segera setelah pengguna memutuskan untuk memblokir font Web atau menimpa semua font dengan milik mereka (untuk alasan apa pun), semua ikon cantik itu langsung rusak. Ada beberapa fallback tetapi saya sendiri belum melihat solusi yang 100% berfungsi. Ini tidak terjadi pada gambar SVG.
— tomasz86
13

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!

— Steven Garcia
sumber
IMO, ini jawaban terbaik.
— Marco Demaio
Anda harus menentukan logo Coca Cola mana yang Anda gunakan. Logo saat ini dari tahun 2007 sangat sederhana dan berukuran sekitar 8KB . Ini masih tidak seberapa dibandingkan dengan PNG-8, tetapi jauh lebih baik dari 20KB.
— Caleb Taylor
12

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.

— corpirate
sumber
3

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.

— barbaanto
sumber
26
SVG sangat berguna untuk ikon, yang ada di mana-mana di situs web modern (seluler). Mereka menawarkan penskalaan dan gaya css tanpa penalti kualitas, dua fitur penting yang tidak ada pada png.
— pengguna1884155
Dari sudut pandang pengguna, ini tidak ada gunanya, tetapi sebagai pengembang multimedia, sebaiknya hanya menggunakan satu file yang dapat digunakan di layar mana pun dan akan selalu mempertahankan kualitas yang sama.
— sebastian romero
2

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!

— Joe7
sumber
saya rasa tidak, SVG memiliki kinerja yang lebih baik. akan merekomendasikan untuk membaca ini: vecta.io/blog/comparing-svg-and-png-file-sizes
— Harry Sarshogh
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.