Ubah SVG ke PNG dengan Mempertahankan Latar Belakang Transparan

Gunakan SVG ke PNG saat situs web, dokumen, atau editor membutuhkan salinan raster dari desain vektor Anda. Area transparan yang sudah ada pada SVG hasil render dapat tetap transparan dalam PNG. Konverter tidak menghapus latar belakang yang tidak transparan.

Mengapa Memilih PNG Transparan?

PNG transparan penting untuk:

• Penempatan logo - Dapat digunakan pada latar belakang warna apa pun
• Kumpulan ikon - Tampilan konsisten di mana saja
• Lapisan tambahan - Lapisan dalam desain dan komposisi
• Grafis web - Penempatan fleksibel tanpa kotak putih
• Aset aplikasi - Elemen antarmuka pengguna yang menyesuaikan tema

SVG dan Transparansi

PNG dapat menyimpan alpha channel, tetapi ekstensi PNG saja tidak membuktikan bahwa pikselnya transparan. Istilah seperti PNG-24 dan PNG-32 adalah label pada editor; konverter ini tidak menyediakan pemilih mode warna. Bentuk latar belakang di dalam SVG tetap merupakan isi gambar dan perlu disunting pada sumbernya.

Cara SVG Menangani Transparansi

SVG mendukung transparansi secara bawaan:

• Tidak memiliki latar belakang secara bawaan (transparan)
• Warna RGBA untuk isian semitransparan
• Atribut opasitas untuk elemen
• Mode pencampuran untuk efek kompleks

Mempertahankan Transparansi dalam PNG

PNG mendukung alpha channel penuh:

• 256 tingkat transparansi (8-bit)
• Tepi halus dengan anti-aliasing
• Gradasi semitransparan

Mengonversi satu SVG

1. Pilih satu file SVG berukuran maksimal 20 MB dan tunggu hingga unggahan selesai.
2. Kosongkan dimensi untuk mempertahankan ukuran sumber, atau masukkan batas piksel hingga 8192 px per sisi. Jika keduanya diisi, gambar dimuat secara proporsional di dalam kotak tersebut.
3. Mulailah dengan kompresi PNG Seimbang. Upaya kompresi lebih tinggi mungkin mengurangi ukuran, tetapi tidak meningkatkan kualitas gambar atau transparansi.
4. Konversi, unduh, lalu periksa PNG di atas latar belakang terang dan gelap.

Tidak ada kotak centang Pertahankan Transparansi, pengaturan kekuatan alpha, opsi penghapusan latar belakang, atau pemilih mode warna PNG. File diproses di server. Segera unduh hasilnya dan simpan SVG asli.

Menyiapkan desain sumber

Hapus persegi panjang latar belakang yang tidak diinginkan di editor vektor sebelum konversi. Jika memungkinkan, simpan gambar tertaut dan gaya tampilan di dalam file agar tidak bergantung pada sumber luar. Font yang tidak tersedia bagi perender dapat mengubah tampilan; ubah huruf penting menjadi outline di editor sumber jika bentuk persisnya penting.

PNG memiliki piksel tetap dan tidak mempertahankan jalur atau lapisan yang dapat disunting. Memperbesar bitmap yang disematkan tidak dapat mengembalikan detail yang hilang. Pilih dimensi sesuai tampilan yang dituju, lalu periksa hasil sebenarnya.

Contoh Penggunaan

Konversi Logo

Untuk file logo:

1. Hapus latar belakang apa pun di dalam SVG
2. Ekspor dalam beberapa ukuran
3. Periksa pada latar belakang terang dan gelap
4. Sertakan versi transparan dan berlatar belakang putih

Kumpulan Ikon

Untuk ikon aplikasi atau web:

1. Seragamkan dimensi (misalnya, 512x512)
2. Pertahankan ruang tepi yang konsisten
3. Konversi setiap ikon secara terpisah dan pastikan transparansi yang sudah ada tetap terjaga
4. Uji pada ukuran penggunaan yang sebenarnya

Grafis Web

Untuk elemen situs web:

1. Ekspor pada resolusi yang sesuai
2. Pertimbangkan versi Retina (2x)
3. Pastikan ukuran file wajar
4. Uji penempatan gambar di atas berbagai latar belakang

Beberapa file atau beberapa ukuran

Halaman ini menerima satu SVG per tugas. Untuk beberapa hasil ekspor, konversi dan periksa satu per satu. Tidak ada unggahan folder, pengaturan transparansi menyeluruh, atau perintah untuk mengekspor semuanya sekaligus. Atur sendiri nama file dan dimensinya.

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 (transparansi)
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 tampilannya untuk memastikan tidak muncul kotak putih.

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

Pertanyaan Umum

Apakah preset kompresi yang lebih kuat mempertahankan lebih banyak transparansi?

Tidak. Preset mengubah upaya pengodean PNG lossless. Preset tidak mengubah area sumber mana yang transparan.

Mengapa latar belakang berwarna putih atau tepinya berbeda?

Periksa apakah warna putih merupakan bagian dari sumber atau hanya latar belakang penampil. Lihat pemecahan masalah transparansi SVG untuk pemeriksaan sumber, font, dan tepi.

Bisakah Anda mengonversi PNG kembali menjadi SVG yang dapat disunting?

Konverter ini tidak melakukan penelusuran vektor. Simpan SVG asli untuk penyuntingan berikutnya.