Cara Mempertahankan Latar Belakang Transparan Saat Mengonversi ke SVG

Ini detail yang membuatnya begitu membingungkan: secara bawaan, SVG tidak punya latar belakang sama sekali. SVG transparan kecuali ada sesuatu yang menaruh bentuk solid di belakang karya Anda. Jadi ketika SVG hasil konversi muncul dengan kotak putih di sekelilingnya, pertanyaan yang perlu diajukan adalah: apa yang menambahkan warna putih itu? Biasanya penyebabnya salah satu dari tiga hal: bentuk latar belakang yang ada di desain Anda, pengaturan ekspor yang mengisi kanvas, atau konverter yang menjiplak area kosong sebagai blok putih alih-alih membiarkannya kosong. Perbaikannya tergantung penyebab mana yang terjadi, dan apakah file asli Anda memang punya transparansi sungguhan sejak awal. Mari kita bereskan.

Versi singkat

• SVG transparan secara bawaan. Latar belakang putih berarti ada sesuatu yang menambahkannya.
• Mengonversi PNG transparan? Gunakan konverter yang menghormati kanal alfa, sehingga subjek Anda dijadikan vektor dan sisanya dibiarkan kosong. Ubah PNG ke SVG lalu cek hasilnya.
• Mulai dari JPG? JPG tidak bisa transparan, jadi tidak ada transparansi yang bisa dipertahankan. Hapus latar belakangnya dulu, lalu konversi.
• Mengekspor dari Illustrator atau Inkscape? Hapus persegi panjang latar belakang putih di kanvas Anda dan cek pengaturan ekspornya.
• Selalu verifikasi: letakkan SVG di atas latar berwarna. Kalau masih terlihat putih, berarti memang ada sesuatu di sana.

Pertama, apa sebenarnya yang menambahkan warna putih?

Sebelum memperbaiki apa pun, cari tahu dari mana warna putih itu berasal. Ada tiga situasi, dan masing-masing perlu solusi yang berbeda.

Situasi Anda	Mengapa menjadi putih	Solusinya
Mengonversi PNG transparan ke SVG	Konverter mengisi area kosong, atau menjiplaknya sebagai bentuk	Gunakan konverter yang menghormati transparansi; hapus bentuk latar belakang liar yang mungkin ditambahkan
Mengonversi JPG, atau PNG dengan latar putih solid	Dari awal memang tidak ada transparansi yang bisa dipertahankan	Hapus latar belakangnya dulu, lalu konversi
Mengekspor SVG yang Anda desain di Illustrator atau Inkscape	Ada persegi panjang latar belakang di kanvas Anda, atau pengaturan ekspor menambahkan isian	Hapus bentuk latar belakang; cek opsi transparan saat ekspor

Dari mana warna putih berasal

Baris tengah adalah yang paling sering menjebak orang, jadi mulai dari sana.

Jika file Anda sebenarnya tidak transparan, konverter mana pun tidak bisa memperbaikinya

Ini bagian yang sering dilewatkan forum. JPG tidak pernah bisa menyimpan transparansi. Jika logo Anda berupa JPG, latar belakang solid sudah menyatu ke dalam pikselnya, bahkan ketika latar itu putih dan terlihat seperti "tidak ada apa-apa". Mengonversinya ke SVG tidak akan menghapus latar tersebut. Hasil tracing akan memasukkan latar belakang itu sebagai bentuk, atau berada tepat di atasnya. (Mengonversi JPG secara umum adalah pekerjaan yang sedikit berbeda, yang dibahas di cara mengonversi JPG ke SVG.)

Sebagian PNG punya masalah yang sama. PNG bisa menyimpan transparansi, yaitu kanal alfa, tetapi banyak file PNG disimpan dengan isian putih polos. Kalau Anda tidak yakin file Anda yang mana, buka file tersebut di atas latar gelap. Melihat persegi panjang putih di sekeliling logo? Berarti file itu tidak transparan. Ia hanya tampak begitu saat berada di halaman putih.

Solusi untuk kedua kasus ini sama: hapus latar belakang sebelum mengonversi, supaya konverter punya transparansi sungguhan untuk diproses. Potong subjek di editor foto apa pun, ekspor sebagai PNG transparan, lalu trace file itu. (PNG vs SVG menjelaskan mengapa PNG bisa menyimpan transparansi dan JPG tidak.)

Mengonversi PNG yang benar-benar transparan ke SVG

Jika sumber Anda adalah PNG yang benar-benar transparan, mempertahankan transparansi sepanjang proses konversi sebagian besar bergantung pada konverter yang Anda pakai. Secara prinsip, tugasnya sederhana: ubah subjek yang terlihat menjadi path vektor dan biarkan area transparan tetap berupa ruang kosong, bukan bentuk putih. Konverter yang baik melakukan persis itu. Konverter yang kurang cermat biasanya melakukan salah satu dari dua hal yang menjengkelkan:

• Mengisi area transparan dengan putih, sehingga Anda mendapat kotak solid.
• Menjadikan tepi area transparan sebagai path tersendiri, sehingga muncul persegi panjang yang tidak terlihat tetapi benar-benar ada di sekeliling desain Anda. Bentuk itu baru terlihat saat SVG diletakkan di atas latar berwarna atau dikirim ke mesin cutting. Pembuat kerajinan sering sekali mengalaminya. Ini masalah yang sama dengan kotak liar di sekitar desain Cricut.

Jadi langkahnya adalah mengonversi dengan alat yang menangani kanal alfa dengan bersih, lalu memverifikasinya (selengkapnya di bawah). Logo transparan adalah contoh paling umum dari kasus ini.

Seperti apa hasilnya dengan PerfectVector

PerfectVector membaca transparansi PNG Anda dan hanya melakukan tracing pada bagian yang benar-benar ada. Bagian logo yang terlihat menjadi path vektor yang bersih dan dapat diedit, sementara area transparan tetap transparan: tanpa kotak putih, tanpa persegi pembatas tersembunyi. Hasilnya bisa diletakkan di atas latar warna apa pun, situs web, lembar stiker, mat Cricut, dan warna di belakangnya akan langsung terlihat menembus. Anda bisa mengonversi PNG transparan Anda dan mengeceknya di atas latar berwarna dalam beberapa detik. Konversi pertama gratis, tanpa kartu kredit.

Namun terus terang: PerfectVector mempertahankan transparansi yang memang sudah ada di file Anda. PerfectVector tidak bisa menciptakan transparansi yang sejak awal tidak pernah ada. Jika sumber Anda adalah JPG atau PNG dengan isian putih, potong latar belakangnya dulu seperti di atas, lalu hasil konversinya akan tetap bersih.

Cara mengecek apakah hasilnya benar-benar berhasil

Jangan percaya thumbnail. SVG transparan terlihat sama persis dengan SVG berlatar putih saat berada di halaman putih, dan itulah sebabnya banyak orang mengira file mereka sudah aman sampai akhirnya bermasalah. Dua pengecekan cepat:

• Letakkan di atas warna. Tempatkan SVG di atas latar berwarna di browser, Figma, Canva, atau Design Space. Transparansi sungguhan membiarkan warna terlihat menembus. Kotak putih tidak.
• Cari persegi panjang liar. Buka SVG dan pilih bentuk-bentuknya. Jika ada persegi panjang ukuran penuh di belakang karya Anda, hapus. Itulah biang masalah dalam kebanyakan kasus "masih putih".

Mengekspor SVG yang Anda desain sendiri (situasi lainnya)

Jika Anda bukan mengonversi raster, melainkan mengekspor SVG yang Anda gambar sendiri, warna putih biasanya berasal dari kanvas Anda sendiri, bukan dari konverter:

• Illustrator: hapus persegi panjang putih apa pun yang berfungsi sebagai latar belakang. Warna artboard memang tidak ikut diekspor, jadi setelah bentuk latar belakangnya hilang, simpan atau ekspor sebagai SVG dan hasilnya akan transparan.
• Inkscape: pastikan tidak ada persegi panjang latar belakang yang terseleksi, sembunyikan atau hapus raster asli jika Anda melakukan tracing, lalu ekspor vektornya. SVG dari Inkscape transparan kecuali Anda menambahkan isian.

Apa pun caranya, aturan dari awal tetap berlaku: SVG tidak punya latar belakang kecuali Anda memberikannya.

FAQ

Apakah SVG mendukung latar belakang transparan? Ya, dan SVG transparan secara bawaan. SVG tidak punya latar belakang kecuali ada bentuk atau isian yang ditambahkan, jadi transparansi adalah kondisi awalnya, bukan sesuatu yang harus Anda aktifkan. Warna putih hanya muncul ketika ada sesuatu yang menaruhnya di sana.

Bagaimana cara menyimpan SVG dengan latar belakang transparan? Pastikan tidak ada persegi panjang latar belakang di desain Anda, lalu ekspor tanpa isian latar belakang (kebanyakan alat mengekspor transparan secara bawaan). Setelah itu, verifikasi dengan menempatkan SVG di atas latar berwarna. Jika Anda melihat putih, cari dan hapus bentuk latar belakangnya.

Mengapa SVG saya punya latar belakang putih setelah dikonversi? Kemungkinan konverter menambahkan isian putih atau menjiplak area kosong sebagai bentuk, atau file asli Anda sebenarnya tidak transparan. Cek sumbernya dulu: jika berupa JPG atau PNG dengan isian putih, tidak ada transparansi yang bisa dipertahankan, dan Anda perlu menghapus latar belakang sebelum mengonversi.

Bisakah saya mengonversi JPG ke SVG dengan latar belakang transparan? Tidak secara langsung, karena JPG tidak bisa menyimpan transparansi. Latar belakangnya sudah menyatu ke dalam piksel. Hapus latar belakangnya dulu (potong subjek dan ekspor sebagai PNG transparan), lalu konversi file itu ke SVG.

Bagaimana cara mempertahankan transparansi saat mengonversi PNG ke SVG? Mulai dari PNG yang benar-benar transparan dan gunakan konverter yang menghormati kanal alfa, sehingga subjek Anda dijadikan vektor dan sisanya dibiarkan kosong. Lalu konfirmasi hasilnya di atas latar berwarna dan hapus persegi panjang liar apa pun yang mungkin ditambahkan oleh proses tracing.

Bagaimana cara menghapus latar belakang putih dari SVG? Buka SVG, pilih bentuk-bentuknya, lalu hapus persegi panjang putih ukuran penuh di belakang karya Anda. Jika warna putih adalah bagian dari raster tertanam, bukan bentuk, konversi ulang dari sumber yang benar-benar transparan.

---

Punya logo transparan yang masih berupa PNG? Ubah menjadi SVG yang bersih yang mempertahankan transparansinya, lalu letakkan di atas latar berwarna untuk memastikan hasilnya benar-benar tembus.