SVG vs PNG untuk Grafik Web: Kapan Menggunakan Setiap Format

SVG dan PNG memiliki tujuan yang berbeda secara mendasar, namun keduanya cukup tumpang tindih sehingga menimbulkan kebingungan. Seseorang menyimpan bentuk matematika. Yang lain menyimpan piksel. Memilih yang salah akan merugikan kualitas atau kinerja — terkadang keduanya.

SVG (Scalable Vector Graphics) adalah format vektor berdasarkan XML. Daripada menyimpan data piksel, ini mendeskripsikan bentuk, jalur, dan teks menggunakan koordinat matematika. File SVG pada dasarnya adalah kode — Anda dapat membukanya di editor teks dan membaca instruksi yang memberi tahu browser cara menggambar gambar.

SVG dapat ditata dengan CSS dan dimanipulasi dengan JavaScript. Anda dapat mengubah warna saat mengarahkan kursor, menganimasikan elemen individual, dan membuat SVG responsif dengan menyesuaikan atribut viewBox. Untuk grafik sederhana seperti logo dan ikon, SVG biasanya berbobot 1-5 KB.

PNG (Portable Network Graphics) adalah format raster yang menyimpan gambar sebagai kisi piksel berwarna. Ini menggunakan kompresi lossless, sehingga kualitasnya identik dengan aslinya — tidak ada artefak kompresi seperti JPEG. PNG mendukung transparansi penuh (saluran alfa), menjadikannya favorit untuk gambar yang membutuhkan latar belakang transparan.

PNG unggul dalam mereproduksi citra kompleks: tangkapan layar, foto dengan transparansi, tekstur detail, dan gradien halus. Namun, karena menyimpan setiap piksel, file PNG bisa berukuran besar. Tangkapan layar 4K sebagai PNG dapat dengan mudah melebihi 5 MB.

Untuk logo perusahaan pada umumnya, versi SVG mungkin berbobot 2-5 KB. Logo yang sama yang diekspor sebagai PNG dengan resolusi 2x untuk tampilan retina dapat berukuran 30-80 KB. Itu perbedaan 10-15x.

Lipat gandakan di seluruh ikon, logo, dan elemen UI pada halaman, dan SVG memberikan muatan yang jauh lebih ringan. Dari pengujian pada situs e-commerce dengan 60+ ikon, peralihan dari PNG ke SVG memotong bandwidth terkait ikon sebesar 87%.

Namun keunggulan ini terbalik untuk grafis yang kompleks. Ilustrasi SVG dengan ribuan titik jangkar dan jalur mendetail sebenarnya dapat melebihi ukuran file PNG yang dikompresi dengan baik. Jika desainer Anda membuat ilustrasi dengan ratusan elemen individual, periksa kedua format tersebut dan bandingkan.

Ini adalah keunggulan SVG yang menentukan. SVG terlihat sempurna piksel baik ditampilkan pada lebar 32 piksel atau 3200 piksel. Tidak ada konsep resolusi — browser menggambar ulang jalur vektor dengan ukuran berapa pun yang diperlukan.

Hal ini penting pada layar mulai dari monitor desktop 72 DPI hingga ponsel 460+ DPI. Satu file SVG mencakup setiap perangkat. Satu PNG tidak.

PNG memiliki kisi piksel tetap. Tampilkan PNG 200x200 pada 400x400 piksel (yang terjadi pada tampilan retina), dan browser melakukan interpolasi, membuat gambar terlihat lembut atau buram. Solusinya adalah mengekspor PNG dengan resolusi 2x atau 3x, tetapi hal itu meningkatkan ukuran file secara proporsional — kumpulan ikon 3x bisa 9 kali lebih besar.

PNG adalah pilihan yang tepat setiap kali gambarnya bersifat fotografis atau rumit secara fotografis. Tangkapan layar, foto produk dengan transparansi, tekstur kompleks, gambar dengan ribuan warna dan gradien halus — semuanya termasuk dalam format raster.

PNG juga unggul dalam seni piksel dan gambar yang setiap pikselnya penting pada ukuran tertentu. Sprite game, detail favicon berukuran 16x16, dan gambar yang perilaku anti-aliasingnya memerlukan kontrol yang tepat, semuanya lebih baik disajikan sebagai PNG.

SVG jelas merupakan pemenang untuk logo, ikon, ilustrasi, infografis, peta, bagan, dan elemen UI — segala sesuatu yang terdiri dari bentuk, garis, dan warna solid yang bersih. Jika grafik dibuat di Figma atau Illustrator, mengekspor sebagai SVG akan menjaga kualitas sumber dengan sempurna.

SVG juga unggul untuk desain responsif. Anda dapat membuat ilustrasi SVG yang mengalirkan ulang atau menyembunyikan elemen pada breakpoint berbeda menggunakan kueri media CSS di dalam SVG itu sendiri. Ikon di SVG dapat berubah warna berdasarkan tema (mode gelap/mode terang) tanpa menyajikan file gambar terpisah.

SVG dapat berisi elemen teks sebenarnya yang dapat diindeks oleh mesin pencari. Jika infografis Anda memiliki judul dan label sebagai teks SVG, Google dapat membacanya. Ini adalah keunggulan SEO yang berarti dibandingkan PNG, di mana semua teks dimasukkan ke dalam kisi piksel dan tidak terlihat oleh crawler.

Untuk pembaca layar, sebarkan SVG dengan file yang tepat role dan aria-label atribut memberikan aksesibilitas yang lebih baik daripada gambar raster. Gambar PNG sepenuhnya bergantung pada alternatif atribut untuk aksesibilitas.

Perlu beralih antar format? Anda bisa mengonversi SVG ke PNG ketika Anda memerlukan versi raster untuk berbagi media sosial, klien email yang tidak merender SVG, atau platform yang hanya menerima gambar raster.

Jika Anda pergi ke arah lain, Anda bisa mengonversi PNG ke SVG untuk gambar yang mendapat manfaat dari skalabilitas vektor. Konversi berfungsi paling baik pada grafik sederhana dengan tepi bersih dan warna terbatas. Foto detail tidak akan dikonversi dengan baik ke SVG.

Untuk perubahan format cepat tanpa menginstal perangkat lunak apa pun, iformat.io menangani kedua konversi secara langsung di browser Anda. Unggah, konversi, dan unduh dalam waktu kurang dari 10 detik.

Gunakan SVG untuk logo, ikon, ilustrasi, dan apa pun dengan bentuk yang bersih — SVG dapat diskalakan dengan sempurna dan menjaga file tetap kecil (umumnya 1-5 KB). Gunakan PNG untuk tangkapan layar, foto dengan transparansi, dan karya seni dengan presisi piksel. Untuk sebagian besar proyek web, mengonversi kumpulan ikon Anda dari PNG ke SVG akan mengurangi bobot halaman dan meningkatkan rendering pada layar DPI tinggi. Uji kedua format jika ragu — perbandingan ukuran file memerlukan waktu 30 detik dan pilihan yang tepat biasanya sudah jelas.