SVG menyimpan gambar sebagai bentuk matematika yang berskala ke ukuran apa pun tanpa buram, sementara PNG menyimpan kisi-kisi piksel yang tetap. Perbedaan tunggal tersebut menentukan pilihan: SVG untuk logo, ikon, dan grafik datar yang harus diskalakan, PNG untuk foto, dan detail kompleks. SVG (Scalable Vector Graphics) adalah format berbasis XML yang distandarisasi oleh W3C pada tahun 2001; PNG (Portable Network Graphics) adalah format raster dari tahun 1996. Perbandingan ini menjelaskan vektor versus raster, bagaimana masing-masing menangani penskalaan dan ukuran file, transparansi, pengeditan, dukungan browser, dan aturan yang jelas untuk menggunakan tempat mana.

Secara keseluruhan tidak ada format yang lebih baik, karena keduanya memecahkan masalah yang berbeda. SVG tidak ada duanya untuk grafik yang muncul dalam berbagai ukuran; PNG adalah satu-satunya pilihan masuk akal untuk foto dan gambar detail. Mengetahui keluarga mana gambar Anda termasuk menjawab pertanyaan bahkan sebelum Anda membuka konverter.

Vektor versus raster

Kedua format tersebut mendeskripsikan gambar dengan cara yang berlawanan. SVG mencantumkan instruksi seperti menggambar lingkaran di sini, mengisi jalur ini dengan warna itu, sehingga browser menampilkannya segar dalam ukuran berapa pun. PNG menyimpan warna sebenarnya setiap piksel dalam kotak, seperti mosaik. Vektor sesuai dengan bentuk dengan tepi yang bersih; raster cocok untuk foto, di mana jutaan piksel unik tidak memiliki bentuk untuk dijelaskan. Inilah akar dari setiap perbedaan praktis di antara keduanya.

Sebuah analogi membantu. Vektor adalah sebuah resep: ikuti dalam skala apa pun dan Anda akan mendapatkan hidangan yang sama. Raster adalah foto hidangan yang sudah jadi: perbesar dan Anda akan melihat piksel yang lebih besar dan lebih buram. Resepnya tetap sempurna dalam ukuran berapa pun; fotonya tidak.

Penskalaan: SVG menang

Penskalaan adalah keunggulan SVG yang menentukan. Logo SVG tetap ada setajam silet dari favicon 16 piksel hingga papan reklame, karena matematika menghitung ulang pada setiap ukuran. PNG menjadi kabur saat Anda memperbesarnya melebihi resolusinya, karena perangkat lunak harus menciptakan piksel yang tidak pernah ditangkap. Untuk apa pun yang ditampilkan dalam berbagai ukuran, SVG menyajikan satu file di mana PNG memerlukan beberapa ekspor dengan resolusi berbeda.

Ini lebih penting daripada kedengarannya. Layar modern bervariasi dari ponsel kecil hingga monitor 4K besar, dan desainnya harus terlihat tajam pada semuanya. SVG menangani setiap layar dari satu file. PNG memerlukan versi kecil, versi besar, dan sering kali versi retina, yang melipatgandakan aset yang Anda kelola.

Ukuran berkas

Ukuran file bergantung pada kompleksitas, bukan dimensi, yang merupakan kebalikan dari PNG. Logo dua warna sederhana yang dapat ditimbang oleh SVG beberapa kilobyte dan pertahankan ukuran tersebut pada skala apa pun, seringkali lebih kecil dari PNG. Namun ukuran SVG bertambah seiring dengan jumlah bentuk, sehingga foto yang dijiplak menjadi beberapa kali lebih besar dibandingkan PNG dan dirender dengan lambat. Ukuran PNG bertambah seiring dengan jumlah piksel, jadi foto yang besar tetap berat, apa pun yang terjadi.

Pelajarannya adalah mencocokkan format dengan konten. Untuk ikon datar, SVG lebih kecil dan dapat diskalakan tanpa batas. Untuk foto yang lebih detail, SVG menggelembung menjadi ribuan jalur sementara PNG tetap dalam ukuran yang dapat diprediksi. Kompleksitas, bukan nama format, yang menentukan bobotnya.

Transparansi

Kedua format mendukung transparansi, jadi tidak ada yang menang di sini. SVG menanganinya secara asli, karena suatu bentuk tidak memiliki isi di belakangnya, dan PNG membawa a saluran alfa penuh untuk transparansi parsial yang halus. Logo tetap tembus pandang pada latar belakang apa pun dalam format apa pun. Bedanya hanya transparansi SVG merupakan bagian dari deskripsi bentuknya, sedangkan PNG menyimpan nilai opacity untuk setiap piksel.

Pengeditan dan fleksibilitas

Pengeditan mendukung SVG untuk grafis. Karena SVG adalah teks yang mendeskripsikan bentuk, jalurnya mewarnai ulang dan menganimasikan dengan CSS, dan teks apa pun di dalamnya tetap berupa teks asli yang dapat dibaca oleh pembaca layar dan dapat diindeks oleh mesin telusur. PNG adalah piksel tetap, jadi mengubah warna berarti mengekspor ulang dari sumbernya. Untuk logo yang akan Anda gaya ulang, temakan, atau animasikan, SVG jauh lebih fleksibel.

Dukungan peramban

Dukungan bersifat universal untuk keduanya, sehingga tidak menentukan pilihan. Setiap browser membaca SVG dan PNG tanpa plugin, dan keduanya sudah bertahun-tahun. Perbedaan praktisnya adalah konteks: SVG termasuk dalam halaman web dan antarmuka aplikasi, sementara PNG juga berfungsi di email, dokumen, dan perangkat lunak lama yang mungkin tidak menerima SVG. Untuk sebuah situs web, keduanya aman; untuk logo email, PNG adalah pilihan yang lebih andal.

Kapan menggunakan masing-masing

Aturannya sederhana dan patut diingat:

Gunakan SVG untuk logo, ikon, bagan, diagram, dan seni garis yang harus diskalakan dan tetap tajam.
Gunakan PNG untuk tangkapan layar, grafik detail, dan gambar apa pun dengan tepi lembut atau banyak warna.
Gunakan keduanya untuk foto dalam jangka panjang: foto kompres JPG atau WebP jauh lebih kecil daripada PNG.

Simpan file vektor master untuk aset merek, dan ekspor salinan PNG yang tidak menerima SVG, seperti email atau beberapa unggahan aplikasi.

SVG dan desain responsif

Desain responsif adalah keunggulan SVG. Situs modern harus terlihat tajam di ponsel, laptop, dan monitor 4K, dan SVG menangani ketiganya dari satu file dengan kepadatan piksel berapa pun. Tidak perlu memisahkan ekspor kecil, besar, dan retina, dan tidak ada keburaman saat browser memperbesar gambar untuk layar resolusi tinggi. Vektor hanya menggambar ulang dirinya sendiri dengan jelas pada ukuran apa pun yang diminta tata letaknya.

PNG tidak bisa menandingi ini. Agar tetap tajam pada layar retina, PNG harus diekspor dengan resolusi ganda, yang menggandakan ukuran filenya, dan bahkan menjadi buram jika dibentangkan lebih dari itu. Mengelola beberapa ukuran PNG untuk tata letak responsif adalah biaya pemeliharaan nyata yang dihilangkan oleh satu SVG.

Saat PNG mengalahkan SVG dalam praktiknya

PNG menang dalam lebih banyak kasus dibandingkan reputasinya. Gambar apa pun dengan detail fotografi, gradien, tekstur, atau bayangan lembut termasuk dalam PNG, karena menelusurinya ke SVG menghasilkan kekacauan yang besar dan jelek. Tangkapan layar adalah wilayah PNG, karena menggabungkan teks dengan detail antarmuka yang tidak melakukan vektorisasi. Dan ilustrasi kompleks dengan ratusan warna lebih kecil dan lebih bersih sebagai PNG dibandingkan sebagai SVG raksasa dengan ribuan jalur.

Kesalahan yang dilakukan orang adalah menganggap SVG selalu merupakan pilihan yang modern dan unggul. Ini lebih unggul hanya untuk grafik datar dan tepi keras. Dorong gambar detail ke dalam SVG dan Anda akan mendapatkan file lebih besar yang ditampilkan dengan lambat, kebalikan dari yang Anda inginkan.

Catatan tentang SVG dan keamanan

SVG membawa pertimbangan yang tidak dimiliki PNG: karena ini adalah kode, file SVG dapat berisi skrip. SVG berbahaya yang diunggah ke situs, secara teori, dapat menjalankan JavaScript saat ditampilkan. Inilah sebabnya banyak platform membersihkan atau menolak SVG yang diunggah pengguna, dan mengapa Anda sebaiknya hanya memercayai SVG dari sumber yang dikenal. PNG, sebagai data piksel murni, tidak membawa risiko seperti itu. Untuk logo dan ikon Anda sendiri, hal ini bukan masalah, namun ini menjelaskan mengapa beberapa formulir unggahan menerima PNG dan bukan SVG.

Kesalahan umum saat mengonversi ke SVG

Ada dua kesalahan yang merusak sebagian besar konversi PNG-ke-SVG. Yang pertama adalah mencoba memvektorisasi sebuah foto, yang menghasilkan ribuan jalur dan file lebih besar dari aslinya. Yang kedua adalah membiarkan bitmap asli tertanam di dalam SVG setelah pelacakan otomatis, sehingga file tersebut benar-benar PNG dalam pembungkus SVG, dan tidak memperoleh apa pun. Lacak hanya grafik datar, dan untuk logo merek, gambar ulang dalam editor vektor daripada mempercayai penelusuran otomatis, yang memberikan geometri bersih dan file terkecil.

Bagaimana mengkonversi PNG ke SVG

Mengonversi PNG ke SVG berarti melakukan vektorisasi: menelusuri piksel menjadi jalur. Ini berfungsi untuk logo datar, ikon, dan seni garis, dan gagal untuk foto, yang tidak memiliki bentuk bersih untuk dijiplak. Kami Konverter PNG ke SVG melacak grafik sederhana di browser Anda, jadi tidak ada yang diunggah. Untuk logo merek yang Anda miliki, menggambar ulang logo tersebut di editor vektor akan menghasilkan hasil yang lebih bersih dibandingkan jejak otomatis apa pun. Untuk foto, gunakan milik kami Konverter PNG ke JPG sebagai gantinya.

Pertanyaan yang sering diajukan

Apakah SVG bagus untuk desain responsif?

Ya, idealnya. Satu SVG tetap tajam di setiap layar dan kepadatan piksel, menghilangkan kebutuhan ekspor PNG kecil, besar, dan retina secara terpisah.

Mengapa beberapa situs menolak unggahan SVG?

Karena SVG dapat berisi skrip, tidak seperti PNG. Platform membersihkan atau memblokir SVG pengguna demi keamanan, itulah sebabnya beberapa formulir hanya menerima PNG.

Mengapa SVG saya yang dikonversi lebih besar dari PNG?

Anda mungkin menelusuri foto atau membiarkan bitmap tertanam. Buat vektor hanya grafik datar, dan hapus gambar asli setelah penelusuran sehingga SVG menyimpan jalur, bukan piksel.

Apakah SVG lebih baik dari PNG?

Untuk grafis ya. Skala SVG tanpa blur pada ukuran kecil. Untuk foto, PNG menang, karena foto tidak memiliki bentuk yang bersih untuk disimpan sebagai vektor.

Apa perbedaan antara SVG dan PNG?

SVG adalah matematika terukur; PNG adalah grid piksel yang tetap. SVG tetap tajam pada ukuran berapa pun, sedangkan PNG menjadi buram saat diperbesar melebihi resolusinya.

Bisakah saya menggunakan SVG untuk foto?

Tidak, tidak berguna. Foto memiliki jutaan warna dan tepian lembut tanpa bentuk untuk dijiplak, sehingga foto SVG berukuran besar dan berantakan. Gunakan PNG atau JPG.

Mana yang lebih kecil, SVG atau PNG?

Untuk grafik sederhana, SVG. Logo dua warna berukuran beberapa kilobyte seperti SVG dalam ukuran berapa pun. Untuk foto, PNG lebih kecil, karena balon foto dijiplak.

Apakah SVG menjaga transparansi?

Ya. SVG mendukung transparansi secara asli, seperti saluran alfa PNG, sehingga logo tetap tembus pandang di latar belakang apa pun.

Apakah semua browser mendukung SVG?

Ya. Setiap browser modern membaca SVG dan PNG tanpa plugin. SVG cocok untuk halaman web, sementara PNG juga berfungsi di email dan perangkat lunak lama.

Bagaimana cara mengonversi PNG ke SVG?

Lacak itu. Alat vektor menelusuri PNG datar ke jalur SVG, yang berfungsi untuk logo dan ikon tetapi tidak untuk foto.

Bisakah saya mengedit SVG setelah membuatnya?

Ya. Jalur SVG terbuka di editor vektor mana pun dan mewarnai ulang atau menganimasikan dengan CSS, karena file tersebut berupa teks yang mendeskripsikan bentuk, bukan piksel tetap.

Format apa yang harus saya gunakan untuk logo situs web?

SVG. Skalanya tajam di setiap layar dari satu file, dan teksnya tetap dapat dibaca oleh mesin telusur. Simpan PNG untuk email yang tidak menerima SVG.

Apakah PNG atau SVG lebih baik untuk sebuah ikon?

SVG, untuk penskalaan. Ikon SVG tetap tajam dalam ukuran apa pun, sedangkan ikon PNG memerlukan banyak ekspor dan buram saat diperbesar.

SVG dan PNG memecahkan masalah yang berbeda: SVG menyimpan matematika terukur yang tetap tajam pada ukuran berapa pun, sementara PNG menyimpan grid piksel tetap yang kabur saat diperbesar. SVG menang untuk logo, ikon, dan seni garis yang harus diskalakan, diedit, dan dianimasikan dengan CSS, dan menyajikan setiap layar dari satu file. PNG menang untuk foto, tangkapan layar, dan gambar detail, dan berfungsi di tempat yang tidak menerima SVG. Sesuaikan format dengan konten, dan gunakan konverter kami di atas untuk membuat vektor grafik sederhana atau menangani foto raster, semuanya di browser Anda.

Referensi cepat: SVG atau PNG

Raihlah SVG ketika gambar berupa logo, ikon, bagan, atau gambar garis yang harus diskalakan, ketika Anda ingin mewarnai ulang atau menganimasikannya dengan CSS, atau ketika satu file harus melayani setiap ukuran layar. Raihlah PNG saat gambar berupa tangkapan layar, grafik mendetail, atau apa pun dengan gradien, tekstur, atau tepi lembut, dan saat Anda memerlukannya untuk berfungsi di email atau perangkat lunak lama yang menolak SVG. Garis pemisahnya sederhana: grafik datar dan tepi tajam menjadi vektor, semua detail menjadi raster.

Mempertahankan master vektor

Untuk aset merek apa pun, simpan yang asli sebagai master vektor dan ekspor salinan raster sesuai kebutuhan. Satu logo SVG dapat menghasilkan favicon, avatar sosial, dan file cetak, masing-masing diekspor ke format dan ukuran yang tepat sesuai permintaan. Bekerja dengan cara lain, dari PNG raster kembali ke vektor, berarti penelusuran, yang tidak pernah sepenuhnya memulihkan geometri yang bersih. Jadi simpan master sebagai SVG bila Anda bisa, dan perlakukan ekspor PNG sebagai salinan sekali pakai yang dapat Anda buat ulang kapan saja.

Intinya

SVG dan PNG bukanlah saingan, melainkan spesialis. Vektor menggambarkan bentuk dan skala selamanya, sehingga logo dan ikon menjadi milik SVG. Piksel menangkap detail, sehingga foto dan tangkapan layar menjadi milik PNG. Pilih dengan mengajukan satu pertanyaan: apakah gambar ini memiliki bentuk yang bersih, datar, atau detail fotografis yang bagus? Jawaban tersebut menentukan format setiap saat, dan mempertahankan master vektor berarti Anda selalu dapat mengekspor salinan raster yang Anda perlukan.