Celah Putih Antar Bentuk SVG: Temukan Penyebab dan Perbaiki

Garis putih tipis antar bentuk SVG sering merupakan sambungan akibat render, bukan lubang dalam file. Model render SVG mengizinkan implementasi menggunakan antialiasing ketika merasterkan grafis vektor; tepi berdekatan yang disampel terpisah dapat memperlihatkan garis setipis rambut berwarna latar pada skala tertentu. Garis mungkin hilang pada pembesaran atau perender lain.

Terkadang celahnya nyata. Sebelum menumpuk bentuk, menambahkan stroke, atau menyatukan path, lakukan empat pemeriksaan: ubah pembesaran, ubah latar, ekspor raster, dan periksa path dalam tampilan kontur. Hasil menunjukkan apakah perlu memperbaiki pengambilan sampel tampilan atau geometri.

Sambungan render atau celah nyata?

• Berubah atau hilang saat pembesaran berubah: kemungkinan sambungan tampilan.
• Berubah warna bersama latar: latar sedang disampel di antara tepi.
• Tidak ada dalam tampilan kontur: batas vektor mungkin sudah bertemu.
• Terlihat dalam ekspor raster beresolusi tinggi: periksa presisi ekspor serta geometri lebih teliti.
• Tetap ada dalam mesh, pratinjau potong, atau pengukuran path: perlakukan sebagai masalah geometri nyata.

Mengapa path bersentuhan dapat memperlihatkan garis sambungan

Layar merender bentuk vektor pada kisi piksel. Ketika tepi melintasi piksel, antialiasing mencampur piksel antara bentuk dan latar agar tepi terlihat halus. Dua bentuk yang dirender terpisah masing-masing dapat mencampur piksel batasnya, meskipun koordinat vektor bertemu.

Skala menambahkan variabel lain. Koordinat bersama yang tepat berada pada batas piksel di satu ukuran mungkin berada di antara piksel pada ukuran lain. Pembulatan ekspor juga dapat menggeser satu batas sedikit. Itulah sebabnya garis dapat muncul hanya pada pembesaran 67%, hilang pada 100%, dan kembali pada thumbnail web kecil.

SVG mungkin tetap benar secara matematis. Mengedit geometri sebelum menguji dapat membuat tumpang tindih yang terlihat pada penggunaan transparan, cetak, potong, atau animasi.

Perbedaan utama adalah apakah kontur dasarnya berbagi tepi. Sambungan render dapat muncul pada geometri yang bersentuhan; celah nyata tetap terlihat di antara kontur itu sendiri.

Jalankan empat uji sebelum mengedit

1. Ubah pembesaran

Lihat SVG pada beberapa tingkat pembesaran, termasuk 100% dan pembesaran tinggi. Celah nyata tetap berada di antara path saat diperbesar. Sambungan akibat pengambilan sampel sering berkedip, berubah ketebalan, atau hilang.

Jangan gunakan pembesaran saja. Beberapa celah geometri lebih kecil daripada piksel dan tampilannya juga dapat berubah.

2. Ubah latar

Tempatkan SVG di atas putih, hitam, dan warna terang. Jika garis tipis mengikuti warna latar, perender memperlihatkan latar di antara tepi yang disampel terpisah. Itu mungkin sambungan pengambilan sampel atau celah transparan nyata, jadi lanjutkan pemeriksaan kontur.

3. Ekspor PNG beresolusi tinggi

Ekspor pada dua atau empat kali dimensi akhir, lalu periksa keluaran yang diperkecil. Jika garis hilang dalam ekspor beresolusi tinggi, masalah kemungkinan rasterisasi yang bergantung skala. Jika tetap ada dan dapat diukur, periksa koordinat serta presisi ekspor.

4. Gunakan tampilan kontur atau wireframe

Nonaktifkan isian dan periksa batas sebenarnya. Pilih node berdekatan dan bandingkan koordinatnya. Jika path bertemu persis, garis terlihat merupakan masalah perender. Jika titik akhir atau tepi tidak sesuai, perbaiki geometri.

Untuk pengeditan path lebih luas, lihat cara mengedit SVG. Simpan salinan karena solusi terbaik bergantung pada penggunaan file.

Perbaiki sambungan tampilan

Untuk gambar datar yang isian berdekatannya tidak boleh memiliki transparansi di antaranya, tumpang tindih kecil terkendali biasanya solusi paling andal. Perluas bentuk bawah atau lebih gelap sedikit ke bawah bentuk tetangganya. Tumpang tindih tidak boleh terlihat pada ukuran normal atau mengubah siluet luar.

Pilihan lain:

• Tambahkan stroke sangat tipis dengan warna sama seperti bentuk, diselaraskan agar menutupi sambungan.
• Letakkan bentuk dasar yang sesuai di belakang semua bagian berdekatan.
• Tingkatkan presisi koordinat ekspor SVG jika pembulatan memisahkan tepi bersama.
• Render raster lebih besar lalu perkecil ketika keluaran akhir berupa PNG.

Properti shape-rendering SVG dapat meminta presisi geometri atau tepi lebih tajam, tetapi MDN menyatakan bahwa itu petunjuk render, bukan jaminan portabel semua sambungan hilang. Lihat kapan crispEdges membantu dan kapan tidak sebelum menerapkan petunjuk pada seluruh file.

Pilih satu koreksi, lalu uji pada tujuan sebenarnya. Menumpuk beberapa solusi dapat membuat garis gelap atau tonjolan pada tumpang tindih bentuk.

Perbaiki celah geometri nyata

Jika tampilan kontur atau keluaran berikutnya memastikan lubang:

1. Snap node yang diinginkan ke koordinat sama.
2. Perluas tepi berdekatan hingga benar-benar bertemu.
3. Gabungkan titik akhir hanya ketika desain membutuhkan satu path kontinu.
4. Hapus segmen duplikat atau tidak perlu.
5. Ekspor ulang dengan presisi koordinat cukup.
6. Buka kembali file dan ulangi empat uji.

Hindari menggunakan bentuk putih untuk menutupi celah. Itu hanya menyembunyikan gejala pada latar putih dan tetap menjadi objek tambahan dalam file.

Jika celah berasal dari penelusuran raster dengan noise, mungkin terdapat banyak serpihan dan tepi yang hampir bertemu di seluruh desain. Memperbaiki satu per satu dapat lebih lama daripada menelusuri ulang sumber lebih bersih.

Tujuan mengubah solusi yang tepat

Retakan yang bertahan dalam permukaan CAD atau mesh berbeda secara mendasar dari sambungan browser satu piksel. Jika geometri keluaran terpisah, perbaiki path sumber atau toleransi konversi. Jika hanya thumbnail browser menunjukkan garis, geometri produksi mungkin sudah benar.

Daftar pemeriksaan SVG sebelum potong membahas pemeriksaan khusus mesin. Untuk tampilan lembut atau piksel tersembunyi, bukan sambungan, gunakan diagnosis SVG berpiksel.

Peran PerfectVector

Ketika celah tersebar dalam penelusuran dari PNG atau JPG, kembali ke raster sumber sebelum menambal puluhan path. Bersihkan blok kompresi yang jelas, hapus latar tidak perlu, dan pertahankan tepi asli terkuat. Kemudian gunakan alur gambar ke vektor untuk menyusun ulang area terlihat sebagai path yang dapat diedit dan periksa pratinjau.

PerfectVector tidak dapat mengetahui apakah dua area berwarna sama harus tetap terpisah untuk animasi, pemotongan, atau penyusunan. Gunakan pratinjau untuk memeriksa siluet serta ruang negatif, lalu uji SVG unduhan pada tujuan sebenarnya. Penelusuran ulang berguna ketika fragmentasi sumber menyebabkan celah, bukan ketika satu browser hanya melakukan antialiasing pada geometri berdekatan yang sudah benar.

FAQ

Mengapa ada garis putih antar path SVG? Browser atau aplikasi mungkin menerapkan antialiasing pada tepi berdekatan secara terpisah, sehingga latar terlihat pada skala tertentu. Path masih dapat bertemu persis. Ubah pembesaran, latar, perender, dan tampilan kontur sebelum mengedit.

Bagaimana menghilangkan sambungan antialiasing pada SVG? Untuk isian datar berdekatan, tambahkan tumpang tindih kecil terkendali, stroke tipis dengan warna sama, atau bentuk dasar. Uji hasil pada ukuran tampilan akhir. Jangan gunakan solusi ini tanpa pemeriksaan pada gambar potong, CAD, transparan, atau animasi.

Apakah menyatukan semua path menghilangkan celah? Mungkin, tetapi juga menghilangkan struktur warna serta pengeditan terpisah. Satukan path hanya ketika seharusnya satu bentuk. Gambar berwarna-warni biasanya membutuhkan objek terpisah, sehingga mencocokkan tepi atau tumpang tindih terkendali lebih aman.

Mengapa celah hanya muncul ketika SVG kecil? Penskalaan memindahkan batas vektor relatif terhadap kisi piksel. Pada beberapa ukuran, kedua tepi berdekatan bercampur dengan latar dalam baris atau kolom piksel sama. Render lebih besar atau tumpang tindih sedikit dapat mencegah latar terlihat.

Apakah celah SVG kecil penting untuk cetak 3D atau potong? Penting jika bertahan dalam permukaan, mesh, atau toolpath. Sambungan yang hanya ada di layar tidak membuktikan geometri rusak. Periksa pratinjau keluaran dan perbaiki retakan atau kontur terbuka yang mengubah benda hasil.

Sources

1. W3C — Model Render SVG 2 — Menjelaskan urutan pewarnaan SVG, clipping, compositing, dan antialiasing.
2. MDN — shape-rendering — Mendokumentasikan petunjuk render yang tersedia untuk bentuk SVG.
3. W3C — Sistem Koordinat SVG 2 — Mendefinisikan model koordinat, viewport, dan transformasi di balik render yang bergantung skala.

---

Jika penelusuran raster terpecah memiliki celah nyata, bangun ulang sebagai path vektor yang dapat diedit dan periksa pratinjau. Jika path sudah bertemu, pertahankan file dan terapkan hanya perbaikan tampilan terkecil yang sesuai tujuan.