Apakah PNG ke SVG tetap menjaga latar transparan?

Input transparan, output transparan

PNG dan WebP bisa menyimpan kanal alfa — opasitas per piksel. JPEG tidak bisa. Saat kamu mengunggah PNG atau WebP, tracer membaca kanal alfa itu dan hanya memberi warna pada piksel yang opasitasnya lebih dari setengah. Piksel di bawah batas itu tidak masuk ke warna mana pun dan tidak menghasilkan path, jadi area kosong di sekitar logo yang sudah dipotong tetap kosong di SVG. <svg> hasilnya tidak punya persegi panjang latar; apa pun yang ada di bawahnya akan terlihat.

Kamu bisa mengeceknya di pratinjau: panel hasil menggambar path hasil tracing di atas pola kotak-kotak, dan area transparan menampilkan pola kotak-kotak itu, bukan kotak putih.

Piksel semi-transparan ditangani dalam dua langkah. Pertama, setiap piksel masuk ke sebuah warna atau tidak sama sekali, dengan batas di tengah opasitas: pinggiran lembut (anti-aliasing) sebuah logo dipotong di titik itu, jadi garis luarnya jatuh tepat di bagian tepi yang setengah tertutup. Kedua, setiap warna mempertahankan opasitas tintanya, yang diukur di dalam bentuknya, bukan di pinggiran yang lembut. Tinta solid ditulis dengan opasitas penuh, jadi teks hitam di logo transparan tetap hitam, bukan abu-abu yang lebih terang. Warna yang tembus pandang di sumbernya — bayangan jatuh yang lembut atau lapisan warna transparan — ditulis dengan opasitas itu sebagai fill-opacity-nya, jadi bayangan di-tracing jadi satu bentuk datar yang semi-transparan secara merata (misalnya dengan opasitas 54 %). Yang tidak bisa dipertahankan tracing adalah gradasi pudarnya: bagian luar bayangan yang samar, di bawah setengah opasitas, tidak disertakan, dan bentuk yang dihasilkan punya tepi tegas dan satu opasitas yang rata, bukan pudar bertahap.

PNG transparan logo berang-berang kami dengan tambahan bayangan jatuh yang lembut (kiri), SVG hasil tracing-nya di atas pola kotak-kotak (tengah) dan di atas warna (kanan). Tidak ada kotak latar, putih matanya tetap ada, dan bayangannya jadi bentuk datar dengan opasitas 60 %, bertepi tegas di bagian yang di PNG-nya memudar.

Kenapa detail putih tetap ada setelah latar dihapus

"Hapus latar belakang" bekerja dari tepi gambar ke arah dalam. Fitur ini melihat pita di sepanjang tepi gambar, mengambil satu atau dua warna yang masing-masing menutupi minimal 15 % pita itu, lalu mulai dari tepi menandai setiap piksel yang tersambung dengan warna-warna itu — dan warna yang mirip — sebagai transparan. Setelah itu, fitur ini juga membersihkan pinggiran lembut tempat latar bertemu artwork (piksel tepat di sebelah area yang dihapus yang warnanya masih dekat dengan warna latar) serta bintik kecil yang menyentuh tepi gambar. Apa pun yang tidak tersambung ke tepi tidak disentuh — ruang putih di dalam huruf "A", sorotan putih di lencana, celah putih di antara dua garis.

Ini disengaja: detail logo berwarna putih yang dikelilingi artwork yang lebih gelap tetap ada setelah latar dihapus. Kalau kamu pernah melihat alat lain menghapus semua piksel putih, itu teknik yang berbeda (color keying), dan itulah sebabnya "hapus latar" di tempat lain bisa membuat desain jadi bolong.

Sisi sebaliknya: kalau area putih yang tertutup itu ternyata tersambung ke tepi — karena garis luarnya punya celah, walau hanya satu piksel — hapus latar akan masuk lewat celah itu dan menghapusnya. Perbaiki celahnya di gambar sumber, atau biarkan hapus latar mati lalu hapus path latar di editor setelahnya.

Artwork putih di atas latar putih

Tracer tidak bisa memisahkan warna yang identik. Ikon putih yang diekspor di kanvas putih, bagi tracer, adalah satu area putih, dan hasilnya hanya satu persegi panjang putih atau konversi kosong ("Gambar ini tidak bisa di-tracing"). Perbaiki sebelum mengunggah:

1. Di editor gambar apa pun, taruh ikon di atas latar solid yang sangat kontras (abu-abu tua atau warna yang tidak ada di ikon).
2. Unggah dengan Hapus latar belakang aktif. Latarnya tersambung ke tepi, jadi akan terhapus; ikon putihnya tetap ada.
3. Kalau ikon punya area transparan tertutup yang harus tetap transparan, ekspor sebagai PNG dengan alfa asli saja, jadi tidak perlu latar sama sekali.

Mengecek alfa di hasilnya

• Buka SVG yang sudah diunduh di browser: latar halaman (putih secara default) terlihat di area transparan.
• Ubah jadi raster dengan alat SVG ke PNG — hasilnya RGBA dan transparansinya tetap terjaga.
• Buka file di editor teks: tidak ada path latar seukuran penuh, kecuali sumbermu punya latar yang tidak transparan dan hapus latar dimatikan.

Perilaku terkait yang perlu diketahui

• Preset Line art / Stensil menilai setiap piksel dari kecerahannya seperti kalau dilihat di atas kertas putih: yang gelap jadi tinta hitam, yang terang jadi kertas putih, dan area transparan tetap transparan. Karena itu artwork putih menjadi kertas putih, bukan tinta, dan tepi semi-transparan dari garis gelap di atas latar transparan tidak disertakan, alih-alih berubah jadi lingkaran cahaya pucat.
• PNG pratinjau ber-watermark dan berupa raster; hanya SVG yang sudah dibuka yang berisi path vektor dan transparansi yang sebenarnya.