Referensi · Baca 8 menit
PNG vs SVG: apa bedanya, dan mana yang sebaiknya dipakai?
PNG adalah kisi piksel; SVG adalah daftar bentuk. Satu perbedaan itu menentukan seberapa tajam, seberapa kecil, dan seberapa mudah diedit masing-masing. Inilah apa itu SVG, kenapa PNG bukan vektor, dan kapan memilih yang mana.
01 · Jawaban singkat
Piksel versus bentuk
Pakai SVG untuk desain yang harus bisa diperbesar. Pakai PNG untuk apa pun yang sebenarnya adalah gambar.
PNG (Portable Network Graphics) menyimpan gambar sebagai kisi piksel berwarna dengan ukuran tetap, dikompresi tanpa kehilangan kualitas, dengan kanal transparansi opsional. Ini format raster. Diperbesar, pikselnya hanya ikut membesar, dan Anda melihatnya sebagai buram atau tepi bergerigi seperti tangga. SVG (Scalable Vector Graphics) menyimpan gambar sebagai deskripsi bentuk — “lingkaran di sini, kurva ini diisi gradasi itu, teks ini” — sehingga perenderannya menggambar ulang dari awal pada ukuran apa pun yang diperlukan. Ini format vektor dan tidak pernah menjadi buram.
Itulah sebabnya logo lebih baik dalam SVG dan foto lebih baik dalam PNG, JPG, atau WebP: logo memang hanya beberapa bentuk, sedangkan foto memang jutaan titik yang sedikit berbeda satu sama lain.
| PNG | SVG | |
|---|---|---|
| Jenis | Raster (piksel) | Vektor (bentuk), disimpan sebagai teks XML |
| Diperbesar | Buram atau berpiksel | Tajam di ukuran berapa pun |
| Ukuran file | Bertambah sesuai jumlah piksel | Bertambah sesuai kerumitan; sangat kecil untuk logo dan ikon |
| Foto dan tekstur | Bagus (besar untuk foto) | Kurang: perlu bitmap di dalamnya atau jadi poster |
| Transparansi | Ya, alfa penuh | Ya, bawaan |
| Pengeditan | Piksel demi piksel di editor foto | Geser titik dan ganti isian di editor vektor atau editor teks |
| Gaya dan animasi | Tidak ada | CSS, skrip, animasi bila disematkan inline di halaman web |
| Dukungan | Di mana-mana | Semua browser dan aplikasi desain terkini; tidak merata di email dan beberapa formulir upload |
02 · Apa itu SVG?
Gambar yang bisa dibuka di editor teks
Huruf “S” dan “V” pada SVG adalah seluruh idenya.
File SVG adalah dokumen teks kecil dalam format standar W3C. Buka satu di Notepad dan Anda akan menemukan sesuatu seperti ini, yang merupakan gambar lengkap dan valid:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#8B5CF6"/>
</svg>Karena berupa teks, SVG bisa diedit dengan tangan, dicari, dikompres dengan baik oleh server web, dibuat oleh skrip, dan dilacak di version control. Karena menggambarkan bentuk, SVG mendukung gradasi sungguhan, transparansi sebagian, clipping, teks, dan — bila ditempatkan inline di halaman web — gaya dengan CSS serta animasi. Logo yang berupa PNG 40 KB pada 1000 piksel sering kali hanya beberapa kilobyte sebagai SVG.
Dua catatan praktis. Pertama, SVG bisa memuat skrip, jadi buka file hanya dari sumber yang Anda percaya, seperti dokumen lainnya; browser tidak menjalankan skrip di SVG yang dimuat lewat tag <img>. Kedua, SVG bisa menyematkan bitmap; file seperti itu sebenarnya bukan vektor dan tidak jadi lebih tajam. File SVG yang dibuat AnyToSVG hanya berisi path dan gradasi, satu path per warna, tidak pernah bitmap tersemat.
03 · Apakah PNG vektor?
Bukan — dan “PNG ke vektor” berarti penelusuran
Gambar sebuah lingkaran bukanlah lingkaran.
PNG bukan format vektor, setajam apa pun tampilannya pada 100 %. Logo PNG berisi sejuta piksel berwarna dan tidak tahu bahwa sebagian di antaranya membentuk lingkaran, huruf, atau kurva. Tidak ada pengaturan di editor foto yang mengubahnya jadi bentuk: mengganti nama logo.png menjadi logo.svg hanya menghasilkan file yang rusak.
Yang dicari orang dengan kata “PNG ke vektor” atau “PNG ke SVG” adalah penelusuran (tracing): software memeriksa piksel, menemukan batas antar area warna, dan membangunnya kembali sebagai kurva. Untuk desain datar — logo, ikon, clipart, sketsa garis, tanda tangan — ini bekerja hampir sempurna, karena bentuknya memang ada untuk ditemukan. Untuk foto hasilnya poster bergaya, karena tidak ada bentuk yang jelas, hanya nada yang berubah perlahan. Panduan raster vs. vektor menunjukkan apa yang bisa dan tidak bisa dilakukan penelusuran, langkah demi langkah, dan halaman gambar ke vektor membahas format bitmap lainnya.
04 · Pilih SVG ketika…
Desainnya harus bisa diperbesar atau diedit
- Logo dan tanda merek yang muncul di ukuran favicon, header situs, dan spanduk.
- Ikon dan grafik antarmuka untuk web: satu file untuk setiap kepadatan layar, bisa diwarnai ulang dengan CSS.
- Ilustrasi, diagram, grafik, dan peta yang terdiri dari bentuk datar dan garis.
- File potong untuk Cricut, Silhouette, vinyl, dan mesin laser, yang butuh garis tepi, bukan titik.
- Desain cetak yang akan diperbesar, dan apa pun yang nantinya akan diedit desainer.
05 · Pilih PNG ketika…
Gambarnya memang sebuah gambar
- Screenshot dan apa pun dengan teks yang harus tampil persis seperti hasil render.
- Foto dan karya bertekstur atau bergaya lukisan — pakai PNG bila butuh transparansi atau kualitas tanpa kehilangan, JPG atau WebP bila ukuran lebih penting.
- Pratinjau media sosial, tanda tangan email, dan ikon toko aplikasi, yang formulir upload dan aplikasi emailnya sering menolak SVG.
- Desain kompleks dengan ribuan bentuk kecil, di mana SVG-nya akan lebih besar daripada bitmap.
- Pixel art, di mana piksel persegi itu sendiri adalah desainnya.
Kebanyakan proyek akhirnya memakai keduanya: SVG sebagai file induk dan ekspor PNG untuk beberapa tempat yang bersikeras meminta bitmap.
06 · Konversi
PNG ke SVG, dan sebaliknya
Satu arah adalah penelusuran; arah lainnya sekadar menggambar.
PNG ke SVG: telusuri
Taruh PNG di konverter PNG ke SVG (atau langsung di konverter). Ia berjalan di browser Anda, memilih mode warna atau hitam putih, menghitung jumlah warna, mendeteksi gradasi halus, dan menampilkan SVG di samping gambar asli dalam sekitar satu detik. Centang Latar transparan jika logo berada di atas warna solid, turunkan slider Warna sampai kotak warnanya sesuai dengan desain, lalu download. Khusus untuk logo, lihat logo ke SVG; untuk JPG, JPG ke SVG.
SVG ke PNG: render
Arah ini tidak butuh penelusuran, hanya keputusan tentang ukuran, karena vektor tidak punya piksel sampai Anda menggambarnya. Buka SVG di browser, Inkscape, Figma, atau Illustrator dan ekspor PNG pada lebar yang Anda perlukan (ekspor pada 2× atau 3× untuk layar berkepadatan tinggi). Tombol PNG di konverter AnyToSVG melakukan persis ini untuk SVG yang baru ditelusurinya, pada 1×, 2×, atau 4×; itu bukan alat SVG ke PNG serbaguna.
Bagaimana dengan kualitas?
PNG ke SVG hanya sebaik bentuk di dalam PNG-nya. Logo datar pada 500 piksel atau lebih dikonversi hampir sempurna; yang kecil, buram, atau difoto menjadi vektor yang kecil, buram, atau miring. SVG ke PNG tidak kehilangan apa pun kecuali resolusi yang Anda pilih sendiri.
07 · Pertanyaan
PNG vs SVG — pertanyaan yang sering diajukan
Pertanyaan di balik “apa itu SVG”, “apakah PNG vektor”, dan “PNG atau SVG”. Selengkapnya di FAQ lengkap.
Apa itu file SVG?
SVG (Scalable Vector Graphics) adalah format gambar yang menggambarkan gambar sebagai bentuk — garis, kurva, isian warna, dan teks — yang ditulis sebagai teks XML biasa. Karena yang disimpan adalah bentuk, bukan piksel, SVG bisa diperbesar ke ukuran berapa pun tanpa kehilangan ketajaman, dan semua browser modern bisa menampilkannya.
Apakah PNG itu vektor?
Bukan. PNG adalah format raster: ia menyimpan kisi piksel berwarna dengan ukuran tetap. PNG bisa memuat gambar dari sebuah bentuk vektor, tetapi file-nya sendiri tidak berisi bentuk apa pun. Untuk mendapat vektor, PNG harus ditelusuri (tracing), dan itulah yang dilakukan konversi PNG ke SVG.
Apakah SVG lebih bagus daripada PNG?
Untuk logo, ikon, diagram, dan desain datar lainnya, ya: tetap tajam di semua ukuran dan biasanya lebih kecil. Untuk foto, screenshot, dan karya bertekstur, tidak: PNG (atau JPG/WebP) pilihan yang tepat. Tidak ada yang lebih baik secara umum; keduanya cocok untuk gambar yang berbeda.
Apakah file SVG lebih kecil daripada PNG?
Untuk desain sederhana, biasanya jauh lebih kecil, karena beberapa path memakan tempat jauh lebih sedikit daripada sejuta piksel. Untuk gambar kompleks dengan banyak bentuk, gradasi, atau tekstur, SVG bisa lebih besar daripada PNG yang setara.
Bisakah SVG dipakai di mana saja PNG dipakai?
Tidak sepenuhnya. Browser, aplikasi desain, mesin potong, dan sebagian besar situs menerima SVG. Banyak aplikasi email, formulir upload media sosial, kolom ikon toko aplikasi, dan gambar pratinjau Open Graph masih mewajibkan PNG atau JPG, jadi simpan ekspor bitmap untuk keperluan itu.
Apakah SVG mendukung transparansi?
Ya. SVG punya latar transparan kecuali Anda menggambarnya, dan setiap isian bisa sebagian transparan. PNG juga mendukung transparansi alfa penuh, makanya keduanya umum dipakai untuk logo.
Bagaimana cara convert PNG ke SVG tanpa kehilangan kualitas?
Penelusuran membangun ulang bentuk dari piksel, jadi PNG warna solid seperti logo atau ikon dikonversi hampir persis. Foto menjadi poster bergaya. Taruh PNG di konverter PNG ke SVG, periksa tampilan Bandingkan, lalu download SVG-nya.
Bagaimana cara mengubah SVG ke PNG?
Buka SVG di browser, Inkscape, Figma, atau Illustrator lalu ekspor atau screenshot pada ukuran yang Anda perlukan. Tombol PNG di konverter AnyToSVG merender SVG yang baru ditelusurinya pada 1×, 2×, atau 4×; itu bukan alat SVG ke PNG serbaguna.
Lanjut membaca
Lebih banyak tentang vektor
Langsung coba sambil membaca
Konverter ini gratis, tanpa akun, dan menampilkan SVG di samping gambar asli Anda dalam sekitar satu detik.