Mengapa Lubang SVG Tertutup Isian dan Cara Memulihkannya

Lubang SVG tertutup isian ketika file atau aplikasi tujuan berhenti memperlakukan kontur dalam sebagai bagian di luar bentuk berisi. Penyebab umumnya adalah compound path yang dilepas, kontur dalam disimpan sebagai objek berisi terpisah, aturan isian atau arah path berubah, importer menghilangkan hubungan, atau trace raster menutup bukaan sebelum SVG dibuat.

Mulai dengan membuka SVG di browser. Jika lubang sudah tertutup di sana, perbaiki file. Jika browser terlihat benar tetapi aplikasi lain menutup lubang, tahap impor kemungkinan bermasalah.

Pertama, cari tempat lubang hilang

Gunakan dua renderer sebelum mengubah geometri:

1. Simpan duplikat SVG.
2. Buka duplikat langsung di Chrome, Safari, Firefox, atau browser lain.
3. Letakkan di atas latar terang dan gelap.
4. Buka file yang sama dalam aplikasi tujuan.
5. Bandingkan lubang yang persis sama, bukan hanya siluet keseluruhan.

Perbandingan ini memisahkan SVG buruk dari masalah impor khusus tujuan. Ini juga mencegah operasi path acak merusak file yang benar sebelum impor.

Bentuk putih bukan lubang

Lubang sungguhan memperlihatkan apa pun yang berada di belakang SVG. Bentuk putih hanya terlihat kosong pada kanvas putih. Untuk karya dalam antarmuka web, panduan pointer-events SVG menunjukkan respons klik pada lubang, area berwarna, dan target klik terpisah.

Untuk mengujinya, tambahkan persegi panjang gelap sementara di belakang karya. Jika lubang yang dimaksud tetap putih, pilih objek dalam tersebut. Anda boleh mempertahankannya sebagai elemen desain putih yang disengaja, tetapi jangan berharap mesin potong, alat engraving, overlay browser, atau importer 3D menafsirkannya sebagai ruang kosong.

Untuk bukaan transparan, gunakan compound path atau kurangkan bentuk dalam dari bentuk luar. Mask juga dapat menciptakan transparansi, tetapi banyak aplikasi produksi menangani geometri path sederhana lebih andal daripada mask. Untuk alur menggunakan script, coba memotong dan menggabungkan path impor dengan Paper.js, lalu buka kembali SVG hasil ekspor untuk memeriksa bukaan.

Untuk karya gobo, bukaan transparan yang benar tetap memerlukan keputusan bahan terpisah. Perbandingan gobo baja dan kaca mengikuti huruf O yang sama melalui tata letak jembatan baja dan desain yang ditopang kaca, serta menjelaskan mengapa pembalikan area terang dan gelap yang diproyeksikan mengubah bagian yang harus tetap tersambung.

Compound path menyimpan hubungan lubang

Huruf O, cincin, dan logo dengan bagian tengah berlubang sering memakai satu elemen path dengan beberapa subpath tertutup. Kontur luar menentukan siluet; subpath di dalamnya menentukan ruang dalam huruf atau cutout. Model path SVG mengizinkan beberapa subpath dalam satu path.

Karena itu, Ungroup, Break Apart, dan Release Compound Path tidak saling menggantikan. Melepas compound path dapat mengubah kontur dalam menjadi objek berisi biasa. Geometrinya tetap ada, tetapi hubungannya dengan kontur luar hilang.

Pulihkan pada duplikat:

1. Pilih batas luar dan hanya kontur yang seharusnya menjadi lubang.
2. Gunakan Make Compound Path, Combine, atau perintah setara.
3. Terapkan satu isian pada objek hasilnya.
4. Periksa aturan isian.
5. Buka kembali SVG tersimpan di browser dan aplikasi tujuan.

Dokumentasi compound path Adobe saat ini memakai model yang sama: path penyusun menentukan area berisi dan transparan melalui aturan isian.

Pulihkan hubungannya, bukan hanya tampilannya

Untuk karya stempel, periksa geometri stempel keramik timbul versus cekung sebelum menentukan area yang harus tetap berisi.

Periksa nonzero versus evenodd

SVG memiliki dua aturan isian. Spesifikasi painting SVG 2 menetapkan nonzero sebagai nilai awal dan mendefinisikan evenodd sebagai opsi lainnya.

• nonzero memakai perpotongan path dengan tanda arah. Kontur dalam dengan arah salah dapat menambah isian, bukan membatalkannya.
• evenodd menghitung perpotongan. Titik yang dilingkupi dua kali berada di luar, sehingga kontur bersarang sederhana menjadi lubang tanpa bergantung pada arah kontur.

Path minimal ini berisi dua persegi panjang berarah sama. Dengan evenodd, bagian tengah tetap transparan:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Mengubah aturan berguna ketika sesuai dengan desain, tetapi bukan perbaikan universal. Kedua kontur tetap harus dievaluasi sebagai subpath dari bentuk yang sama. Menetapkan fill-rule="evenodd" pada dua objek yang tidak terkait tidak membuat satu memotong objek lainnya.

Jika mempertahankan nonzero, balikkan hanya kontur dalam ketika editor menyediakan perintah tersebut. Illustrator menyediakan kedua pilihan aturan isian dan kontrol arah path untuk compound path. Simpan salinan sebelum membalikkan apa pun, karena perpotongan dengan diri sendiri dan banyak ruang dalam huruf bersarang dapat menghasilkan hasil berbeda dari cincin sederhana.

Ketika SVG benar tetapi importer salah

Sebagian alat pemotongan, CAD, 3D, dan animasi hanya mendukung subset SVG praktis. Browser dapat merender compound path dengan benar, sementara tujuan mengimpor setiap kontur sebagai objek solid.

Gunakan urutan perbaikan ini:

1. Simpan salinan yang disederhanakan dari editor sumber.
2. Ubah teks yang masih bisa diedit menjadi kontur dalam salinan itu ketika impor teks merupakan titik lemah.
3. Ganti mask, clip, dan efek tampilan dengan geometri path biasa hanya jika diperlukan.
4. Pertahankan setiap lubang yang dimaksud bersama kontur luarnya sebagai satu compound path.
5. Uji evenodd dan nonzero secara sengaja alih-alih beralih berulang kali.
6. Jika importer tetap menutup bukaan, impor kedua batas dan kurangkan profil dalam di aplikasi tujuan.

Untuk alur ekstrusi, tujuan juga harus mengenali profil tertutup yang bisa dipilih. Diagnosis ekstrusi SVG membahas titik ujung terbuka, duplikat, dan validitas profil setelah lubang berhasil dipertahankan.

Ketika tracing menutup bukaan

Tracer dapat menutup ruang dalam huruf kecil atau menyatukan celah sempit ketika raster sumber mungil, buram, atau berkontras rendah. Ini masalah geometri, bukan aturan isian: batas dalam tidak pernah masuk ke SVG.

Kembali ke raster sumber dan:

• perbesar atau ambil ulang tanpa menambahkan blur;
• tingkatkan pemisahan di sekitar bukaan penting;
• hapus noise kompresi di dekat celah;
• kurangi smoothing atau penggabungan warna jika alat menyediakan kontrol itu;
• bandingkan trace baru pada ukuran keluaran akhir.

Di sinilah PerfectVector dapat membantu. Gunakan alur gambar ke vektor ketika Anda memiliki raster asli dan memerlukan trace SVG baru. Periksa setiap ruang dalam huruf dan ruang negatif sebelum unduh. Jika SVG benar hingga editor melepas compound path, perbaiki SVG itu; tracing ulang tidak memulihkan riwayat pengeditan yang hilang.

Pendekatan yang memulai dari sumber ini juga berguna untuk lettering. Panduan vektor hand-lettering menunjukkan cara mempertahankan ruang dalam huruf kecil tetap terbuka tanpa menghilangkan karakter seluruh gambar.

Pemeriksaan akhir yang aman

Sebelum mengirim SVG yang diperbaiki:

• lihat pada latar terang, gelap, dan transparan;
• pilih objek sasaran dan pastikan berupa satu compound path yang dimaksud;
• periksa aturan isian dalam editor atau sumber SVG;
• periksa setiap ruang dalam huruf, cincin, dan ruang negatif tertutup;
• buka kembali file hasil ekspor alih-alih mempercayai kanvas yang belum disimpan;
• uji aplikasi tujuan yang persis sama;
• pisahkan sumber yang bisa diedit dari salinan penyerahan yang disederhanakan.

Jika objek kini berperilaku sebagai satu seleksi, itu mungkin benar. Compound path memang satu objek sesuai desainnya. Gunakan panduan ungrouping SVG sebelum memecahnya kembali.

FAQ

Mengapa lubang tertutup setelah saya memakai Break Apart? Break Apart memisahkan kontur dalam dari compound path luar. Bekas lubang menjadi objek berisi biasa. Batalkan perintah atau gabungkan kembali setiap kontur luar dengan kontur dalam yang benar, lalu verifikasi aturan isian.

Sebaiknya saya memakai fill-rule="evenodd" untuk lubang SVG? evenodd sering praktis untuk kontur bersarang karena arah kontur tidak menentukan hasil. Aturan itu tetap bekerja di dalam satu bentuk; bukan mengurangi objek terpisah. Pertahankan nonzero ketika sumber dan tujuan menjaga arah kontur yang dimaksud.

Mengapa SVG terlihat benar di browser tetapi solid dalam aplikasi saya? Importer tujuan mungkin tidak mempertahankan compound path, aturan isian, mask, atau arah kontur. Sederhanakan salinan menjadi path biasa, lalu uji lagi. Jika perlu, impor batas luar dan dalam lalu kurangkan lubang di tujuan.

Bisakah saya membuat lubang dengan menempatkan bentuk putih di atas? Itu hanya meniru lubang pada latar putih. Objek putih tetap berisi, sehingga dapat dicetak, dipotong, atau diimpor sebagai solid lain. Gunakan compound path, pengurangan bentuk, atau struktur transparansi lain ketika latar harus terlihat menembusnya.

Bisakah PerfectVector memperbaiki lubang tertutup dalam SVG yang sudah ada? PerfectVector berguna ketika Anda dapat kembali ke raster sumber yang sesuai dan membuat trace baru dengan bukaan yang dimaksud terlihat. Alat ini tidak memperbaiki compound path yang dilepas editor atau diabaikan importer. Perbaiki hubungan itu dalam editor vektor atau aplikasi tujuan.

Sources

1. W3C — SVG 2 Painting — Mendefinisikan nonzero, evenodd, dan nilai awal aturan isian.
2. W3C — SVG Paths — Mendefinisikan path, subpath, dan geometri path tertutup.
3. Adobe Illustrator — Create compound paths — Mendokumentasikan lubang gabungan, aturan isian, dan pembalikan arah path penyusun.
4. PerfectVector — Image to Vector — Alur raster ke SVG saat ini yang digunakan pada kondisi tracing ulang.

Jika bukaan hilang selama tracing raster, buat vektor baru dari sumber bersih dan periksa setiap ruang dalam huruf sebelum penyerahan. Jika versi browser sudah benar, pertahankan geometri itu dan perbaiki hanya impor yang gagal.