Bandingkan
PNG vs SVG
PNG adalah gambar raster yang tersusun dari piksel; SVG mendeskripsikan bentuk vektor yang dapat diskalakan tanpa kisi piksel tetap. Pilih sesuai apakah aset berupa gambar piksel atau geometri yang perlu tetap tajam pada berbagai ukuran.
Format mana yang sebaiknya dipilih?
Gunakan PNG untuk tangkapan layar, karya raster final, dan kompatibilitas luas; gunakan SVG untuk logo, ikon, dan diagram yang perlu diskalakan setelah memeriksa keamanannya.
Cocok untuk PNG
Grafik antarmuka · Tangkapan layar · Gambar transparan
- Gambar yang memerlukan transparansi
- Teks dan seni garis
Cocok untuk SVG
Logo, ikon, dan diagram
- Ilustrasi berskala
- Bentuk yang dapat disunting
Informasi dasar
| Item | PNG | SVG |
|---|---|---|
| Ekstensi | .png | .svg |
| Tipe MIME | image/png | image/svg+xml |
| Penggunaan umum | Grafik antarmuka · Tangkapan layar · Gambar transparan | Logo, ikon, dan diagram |
| Cara membuka | Sebagian besar penampil sistem, peramban web, dan editor gambar dapat membuka file PNG. | Buka SVG di browser, editor vektor, atau penampil kompatibel. |
| Ekspor atau konversi | Ekspor ke JPEG hanya bila transparansi dan kualitas lossless tidak lagi dibutuhkan. Simpan PNG asli. | Ekspor PNG bila diperlukan dan periksa ukuran, font, warna, serta transparansi. |
Pilih menurut penggunaan
Gambar yang memerlukan transparansi
Grafik antarmuka · Tangkapan layar · Gambar transparan
PNGTeks dan seni garis
Grafik antarmuka · Tangkapan layar · Gambar transparan
PNGIlustrasi berskala
Logo, ikon, dan diagram
SVGBentuk yang dapat disunting
Logo, ikon, dan diagram
SVGPoin utama 1
PNG menyimpan piksel dan didukung luas untuk karya raster.
Perbedaan lebih lanjutPoin utama 2
SVG mendeskripsikan bentuk vektor dan dapat tetap tajam saat diskalakan jika kontennya sesuai.
Perbedaan lebih lanjutPerbedaan lebih lanjut
Uji aset pada ukuran tampilan sebenarnya dan periksa transparansi, font, serta efek visual setelah konversi. Perlakukan SVG dari sumber luar sebagai konten aktif dan tinjau sebelum disematkan.
- PNG cocok untuk gambar yang selesai pada tingkat piksel dan tangkapan layar.
- SVG berguna untuk logo dan ikon yang membutuhkan beberapa ukuran.
- Efek rumit dapat tampil berbeda di berbagai alat SVG dan browser.
Pertanyaan umum
Haruskah semua logo berupa SVG?
SVG sering cocok untuk logo yang diskalakan, tetapi periksa dukungan perender dan konten sumbernya. Simpan alternatif raster jika alur kerja memerlukannya.