SVG ke PNG: Mengatasi Masalah PNG Transparan

Panduan ini berfokus pada pemeriksaan hasil konversi SVG ke PNG, terutama masalah PNG transparan. Untuk langkah konversi dasar, lihat Konversi SVG dengan latar belakang transparan.

Latar belakang putih tidak selalu berarti transparansi hilang

Buka PNG di editor yang menampilkan transparansi, atau letakkan di atas latar belakang berwarna. Penampil gambar mungkin hanya menampilkan warna putih di belakang piksel transparan. Jika area putih tetap menjadi bagian dari gambar, periksa apakah SVG memiliki persegi panjang latar belakang yang tidak transparan, bentuk dengan isian warna, atau gambar raster yang disematkan.

Konverter SVG ke PNG tidak menghapus objek tersebut. Sunting SVG sumber jika memungkinkan. Untuk memisahkan subjek pada gambar raster, Pembuat Latar Belakang Transparan merupakan proses terpisah yang hasilnya perlu diperiksa.

Tidak ada pengaturan transparansi yang perlu diaktifkan

Konverter ini membaca satu SVG dan menyediakan pengaturan lebar serta tinggi dalam piksel dan kompresi PNG. Area yang sudah transparan dapat tetap transparan tanpa kotak centang Pertahankan Transparansi atau Alpha Channel. Alat ini tidak memiliki penghapus warna latar belakang atau pemilih mode PNG-8/PNG-24.

Memeriksa tepi dan elemen yang hilang

Kasus Khusus

Periksa setiap efek dalam PNG yang diunduh, bukan menganggap semua perender SVG menghasilkan piksel identik. Foto yang disematkan mempertahankan latar belakangnya sendiri yang tidak transparan kecuali gambar sumber tersebut disunting. Opasitas jalur vektor tidak dapat menghilangkan persegi panjang putih di bawahnya.

SVG dengan Gambar Raster yang Disematkan

Jika SVG berisi gambar raster:

• Bagian raster mempertahankan transparansi aslinya
• Bagian vektor dikonversi seperti biasa
• Pastikan gambar yang disematkan memiliki transparansi

Efek Transparansi yang Kompleks

Untuk SVG dengan:

• Efek blur
• Bayangan jatuh
• Mode pencampuran

Efek tersebut dapat menghasilkan tampilan berbeda setelah konversi. Uji dan sesuaikan jika diperlukan.

Elemen Semitransparan

SVG dengan nilai opasitas:

• Dapat memperbesar ukuran file
• Perlu diperiksa ketepatan tampilannya setelah konversi

Menguji Transparansi

Lakukan pemeriksaan berikut pada PNG yang diunduh. Pola kotak-kotak yang tergambar dalam file asli merupakan isi gambar biasa; pola kotak-kotak pada penampil adalah bantuan tampilan. Bandingkan di atas setidaknya dua warna berbeda untuk membedakannya. Contoh HTML berikut digunakan pada halaman pengujian Anda sendiri.

Metode Uji Cepat

1. Buka PNG di editor gambar
2. Cari latar belakang kotak-kotak (transparan)
3. Tambahkan lapisan berwarna di belakangnya
4. Pastikan grafis terlihat benar

Pengujian di Browser

<div style="background: linear-gradient(45deg, #333, #666)">
  <img src="your-graphic.png" alt="Uji transparansi">
</div>

Periksa dan pastikan tidak muncul kotak putih.

Mengoptimalkan PNG Transparan

Mulailah dengan dimensi yang benar-benar dibutuhkan. Kompresi PNG lossless mengubah upaya pengodean, bukan menentukan piksel mana yang transparan. Pengurangan palet warna di editor lain dapat mengurangi jumlah byte, tetapi bisa mengubah gradasi dan tepi yang lembut. Perubahan dimensi membuang atau menyampel ulang piksel.

Simpan salinan berukuran asli, ubah satu pengaturan setiap kali, lalu bandingkan hasil unduhan. Periksa tepi pada latar belakang terang dan gelap setelah setiap optimasi. Tidak ada penghematan tetap sebesar 20–50% atau 40–80% yang berlaku untuk semua grafis. Jika tempat tujuan menerima WebP, bandingkan ekspor WebP terpisah dengan PNG, bukan menganggap salah satunya selalu lebih kecil.

Membandingkan satu perubahan setiap kali

Simpan SVG asli, ubah hanya satu properti sumber atau dimensi hasil, lalu bandingkan PNG baru pada latar belakang terang dan gelap. Kolom ukuran menerima hingga 8192 px per sisi. Kompresi mengubah upaya pengodean PNG, bukan kekuatan alpha atau kualitas gambar.

Memeriksa dimensi dan ruang tepi secara terpisah dari alpha

Logo transparan tetap bisa terlihat kurang tepat karena subjeknya terlalu kecil di dalam kanvas. Periksa viewBox SVG dan posisi gambar di editor sumbernya. Tambahkan atau kurangi ruang tepi di sana; kolom lebar dan tinggi pada konverter mengubah ukuran dalam kotak pembatas dan tidak menyediakan editor ruang tepi kanvas.

Untuk aset layar 2×, hitung dua kali dimensi tampilan yang dituju dan pertahankan proporsinya. Ekspor dan periksa setiap ukuran secara terpisah. Nama file seperti logo@2x.png adalah konvensi penamaan, bukan pengaturan yang menghasilkan detail tambahan.

<img src="logo.png" srcset="logo@2x.png 2x" alt="Logo perusahaan">

Kedua file harus tersedia di situs web Anda. Uji ukuran dan latar belakang yang benar-benar dirender; markup tersebut tidak menambahkan transparansi pada salah satu gambar. Jika logo memiliki halo pada kedua ukuran, kembali periksa tepi pada sumber alih-alih terus memperbesarnya.

Pertanyaan Umum

Apakah kompresi yang lebih kuat memperbaiki tepi transparan?

Tidak. Periksa desain sumber dan dimensi piksel. Kompresi bukan pengaturan untuk memperbaiki tepi.

Bisakah Anda menerapkan perbaikan ke seluruh folder di sini?

Tidak. Halaman ini menerima satu SVG per tugas. Siapkan perbaikan sumber di editor, lalu konversi dan periksa setiap file secara terpisah.