SVG vs PNG: Perbedaan Gambar Vektor dan Raster yang Perlu Anda Tahu
SVG dan PNG menyelesaikan masalah berbeda. SVG menjelaskan geometri vektor dan dapat menyematkan raster; PNG menyimpan kisi piksel tetap. Pilihan bergantung pada karya sumber, batas keamanan, aksesibilitas, jalur edit, render, dan ukuran terukur.
Perbedaan utama SVG dan PNG
Perbedaan SVG-PNG sejalan dengan grafis vektor dan raster.
SVG berbasis XML dan menjelaskan bentuk, path, teks, filter, gaya, serta sumber tertanam. Bagian vektor digambar ulang pada ukuran render, tetapi ketajaman bergantung pada geometri, stroke, efek, penyelarasan, dan raster tertanam.
PNG menyimpan kisi piksel tetap. Pembesaran memerlukan resampling dan dapat lembut atau berpiksel. Mengirim sumber jauh lebih besar daripada slot menambah transfer dan dekode, kecuali kandidat responsif memungkinkan browser memilih.
Perbedaan ini memengaruhi ukuran, skala, pengeditan, dan jenis gambar yang ditangani baik oleh tiap format.
Kapan memakai SVG
SVG adalah kandidat kuat untuk karya vektor yang ditinjau ketika kebutuhan keamanan, aksesibilitas, render, dan penyematannya dipahami:
- Logo — satu SVG bersih mencakup banyak ukuran tanpa pembesaran raster; tanda sangat kecil mungkin perlu penyederhanaan, penyesuaian stroke, atau varian.
- Ikon — UI, navigasi, dan sosial dapat berbagi geometri serta gaya. SVG mungkin lebih kecil daripada beberapa resolusi raster, tetapi path kompleks atau pengulangan inline dapat membalikkan hasil.
- Ilustrasi dan diagram — garis bersih dan warna datar. Teks SVG dapat tetap dipilih, tetapi aksesibilitas dan indeksasi memerlukan markup serta penyematan yang benar.
- Animasi — SVG dapat dianimasikan dengan CSS, JavaScript, atau mekanisme SVG. Preferensi gerak, CPU, CSP, aksesibilitas, dan interaksi harus diperiksa.
- Favicon — browser utama saat ini memakai SVG, tetapi set lengkap mungkin masih memerlukan raster atau ICO. Buat keluaran umum dengan Generator Favicon.
SVG didukung luas di browser dan alat desain saat ini. Popularitas tidak memastikan aset harus berupa vektor; bandingkan kompleksitas, keamanan, cache, aksesibilitas, dan render.
Kapan memakai PNG
PNG adalah kandidat kuat ketika piksel raster lossless atau alfa penting dan ukurannya sesuai anggaran:
- Foto transparan — PNG menawarkan alfa dan piksel lossless, tetapi foto rinci dapat besar. Bandingkan WebP/AVIF beralfa; tanpa transparansi uji JPEG dan format foto modern.
- Tangkapan layar — PNG dapat menjaga piksel terkode; profil, metadata, penskalaan, dan konversi palet tetap terpisah.
- Karya kompleks dengan banyak warna — lukisan, tekstur, dan ilustrasi fotorealistik yang tidak dapat disederhanakan menjadi bentuk vektor bersih.
- Raster bertulisan — ketika tepi harus tepat per piksel, PNG menghindari artefak format lossy.
Perbandingan ukuran file dan performa
Untuk ikon, logo, dan ilustrasi sederhana, SVG teroptimasi atau raster dapat lebih kecil, tergantung geometri, dimensi, pengulangan, kompresi, dan cache:
| Jenis grafik | Ukuran PNG | Ukuran SVG | Penghematan |
|---|---|---|---|
| Ikon sederhana | Satu ukuran raster per kandidat | Geometri vektor sering ringkas | Ukur keduanya |
| Logo | Mungkin perlu beberapa resolusi | Sering cocok jika ada sumber vektor | Ukur keduanya |
| Koleksi ikon | File terpisah menambah permintaan dan byte | Sprite, eksternal, dan inline punya biaya cache berbeda | Ukur seluruh halaman |
| Ilustrasi sederhana | Tumbuh bersama dimensi dan detail | Tumbuh bersama path, gaya, dan filter | Tergantung konten |
Kompresi teks seperti Brotli atau gzip dapat mengurangi transfer SVG sesuai markup dan server. Bandingkan byte transfer terkompresi, bukan hanya file di disk.
SVG inline menghindari permintaan terpisah tetapi menambah HTML dan tidak dicache sendiri. SVG eksternal dapat dicache. Vektor biasanya tidak butuh varian kepadatan, sedangkan SVG kompleks atau beraster mungkin butuh penanganan responsif. Ukur halaman.
Untuk foto dan tekstur, tracing membuat geometri berlebihan atau membuang detail. Menyematkan raster dalam SVG menambah wadah dan sering base64 tanpa menjadikannya vektor. Gunakan PNG, JPEG, WebP, atau AVIF.
SVG vs PNG: perbandingan cepat
| Fitur | SVG | PNG |
|---|---|---|
| Jenis gambar | Vektor (bentuk dan path) | Raster (kisi piksel) |
| Skalabilitas | Bagian vektor digambar ulang; render tetap penting | Kisi tetap; pembesaran dapat lembut |
| Transparansi | Ya | Ya (alfa) |
| Konten foto | Biasanya tidak cocok kecuali raster tertanam | Opsi alfa lossless; bandingkan ukuran |
| Ikon/logo | Kuat jika sumber vektor bersih dan ditinjau | Berfungsi pada dimensi piksel yang disiapkan |
| Animasi | Ya (SVG/CSS/JS) | Ekstensi APNG |
| Dapat diedit dengan kode | Ya (XML) | Tidak |
| Teks dan aksesibilitas | Mungkin dengan markup dan penyematan benar | Memerlukan teks sekitar atau alt setara |
| Browser | Browser utama saat ini; aturan penyematan berbeda | Sangat luas |
| Ukuran | Tergantung geometri dan markup | Tergantung dimensi dan konten |
Contoh praktis: mendesain ulang situs perusahaan
Bayangkan situs dengan logo, 30 ikon navigasi dan fitur, foto utama, serta tangkapan layar produk. Tetapkan format berikut:
- Logo → SVG bila ada sumber vektor bersih; uji stroke dan keterbacaan kecil.
- Koleksi ikon → sprite atau komponen SVG dapat memakai ulang geometri; validasi aksesibilitas, cache, CSP, dan markup.
- Foto utama → uji JPEG, WebP, dan AVIF pada dimensi serta kualitas terlihat yang sama, dengan fallback yang dibutuhkan. Lihat panduan optimasi.
- Tangkapan produk → mulai dengan PNG bila piksel harus dijaga, lalu bandingkan opsi lossless lain dan versi lossy yang dapat diterima.
Cara mengonversi antara SVG dan PNG
Konversi file yang didukung di browser tanpa memasang perangkat lunak. Vizua memproses file di browser dan tidak mengirimnya ke server gambar; layanan halaman masih dapat memakai jaringan:
- SVG ke PNG — rasterisasi SVG pada skala yang tersedia lalu tinjau hasil
- Vectorize Image — telusuri raster menjadi path perkiraan; tidak memulihkan geometri asli
- Generator Favicon — buat keluaran umum dari sumber yang didukung
Untuk dimensi dan anggaran byte per halaman, lihat panduan ukuran file gambar.
Pertanyaan yang sering diajukan
Bisakah SVG menggantikan PNG sepenuhnya?
Tidak. SVG sangat baik untuk grafis, ikon, dan ilustrasi, tetapi tidak efisien untuk foto. Foto dalam SVG akan sangat besar jika disematkan sebagai raster atau kehilangan detail jika ditelusuri menjadi bentuk. Gunakan SVG untuk konten vektor dan PNG, JPEG, atau WebP untuk raster kompleks.
Apakah SVG aman untuk web?
SVG adalah XML aktif dan dapat memuat skrip, event handler, referensi eksternal, tautan, CSS, filter, dan fitur lain. Perlakukan SVG tak tepercaya sebagai kode: validasi dengan allowlist, sanitasi dengan alat terawat, sajikan dengan tipe serta isolasi yang tepat, dan terapkan CSP. Sumber tepercaya tidak menggantikan pemeriksaan.
Mengapa SVG terlihat buram?
Geometri vektor digambar ulang tanpa memperbesar raster, tetapi penyelarasan pecahan, stroke, filter, transformasi, antialiasing, raster tertanam, atau layar dapat melembutkannya. Periksa viewBox, dimensi render, perilaku stroke, dan konten raster.
SVG atau font ikon?
SVG sering cocok karena setiap ikon dapat diberi nama aksesibel atau disembunyikan bila dekoratif dan gayanya terisolasi. Ini tidak otomatis lebih cepat atau aksesibel: inline menambah HTML, sprite eksternal dapat dicache, dan ARIA harus benar. Bandingkan kebutuhan sistem.
Bisakah PNG dikonversi ke SVG?
Ya. Vectorize Image Vizua menelusuri PNG atau JPEG menjadi path SVG perkiraan. Hasil terbaik pada logo, ikon, dan ilustrasi sederhana dengan sedikit warna dan tepi bersih, bukan foto kompleks.
Konversi gambar Anda
Tanpa akun. File terpilih diproses di browser dan tidak dikirim ke server pemrosesan gambar.