SVG Terbuka Kosong: Tujuh Pemeriksaan Sebelum Membuatnya Ulang

Jika SVG terbuka dalam keadaan kosong, duplikasikan file sebelum menyimpan atau mengekspor apa pun. Gambar mungkin masih ada, tetapi berada di luar viewBox yang terlihat, diberi warna transparan atau putih, disembunyikan oleh clip atau mask, atau dibuat dengan fitur yang tidak didukung suatu aplikasi. Menyimpan ulang dokumen kosong dapat mengubah file yang masih bisa dipulihkan menjadi file yang benar-benar kosong.

Buka salinannya di browser dan editor vektor. Perbandingan ini menentukan cabang diagnosis pertama: terlihat di satu aplikasi tetapi kosong di aplikasi lain biasanya menunjukkan masalah dukungan aplikasi atau struktur dokumen; kosong di semua aplikasi lebih mengarah pada viewport, pewarnaan, clipping, markup yang tidak valid, atau konten yang hilang.

Pemeriksaan ini merupakan peta diagnosis, bukan tujuh perbaikan yang tidak saling terkait. Pastikan geometrinya ada, lalu uji batas, skala, pewarnaan, clipping, efek yang didukung, dan dependensinya sebelum mengganti apa pun.

1. Simpan file dan periksa apakah ada data di dalamnya

Buat salinan dengan nama baru. Lalu periksa ukuran file dan buka di editor teks biasa.

File berukuran nol byte atau dokumen yang hanya memiliki elemen akar <svg> kosong menyisakan sedikit hal yang dapat dipulihkan dari salinan itu. File yang berisi path, grup, style, atau blok besar data terenkode tidaklah kosong hanya karena kanvas terlihat kosong.

Jangan mengambil terlalu banyak kesimpulan dari ukuran yang besar. File mungkin berisi gambar tertanam beresolusi tinggi, style berulang, atau data yang salah format. Ukuran hanya menunjukkan bahwa pemeriksaan lebih lanjut layak dilakukan.

2. Bandingkan browser dan editor vektor

Seret SVG ke browser versi terkini, lalu buka salinan yang sama di Inkscape, Illustrator, Figma, atau editor vektor lainnya.

Kemampuan browser menampilkan file tidak membuktikan bahwa file tersebut berisi path vektor yang dapat digunakan lintas aplikasi. Browser dapat merender gambar raster tertanam dan konten web yang diabaikan oleh CAD atau editor vektor.

3. Pilih semua objek dan periksa batasnya

Di editor vektor, gunakan Select All. Cari kotak seleksi, koordinat, lebar, dan tinggi.

• Kotak seleksi yang jauh di luar halaman berarti gambar berada di luar kanvas.
• Seleksi yang sangat besar dapat menunjukkan titik yang tersesat, objek clipping, atau persegi panjang latar belakang.
• Kotak seleksi normal dengan gambar yang tidak terlihat mengarah pada pewarnaan, opacity, atau clipping.
• Tidak ada objek yang dapat dipilih mengindikasikan konten yang tidak didukung, dokumen kosong, atau impor yang gagal.

Jika objek berada di luar kanvas, pindahkan seleksi ke halaman atau ubah ukuran halaman agar sesuai dengan gambar. Hindari mengubah skala path kecuali dimensi sebenarnya juga salah.

4. Bandingkan gambar dengan viewBox

Buka SVG sebagai teks dan periksa elemen akarnya:

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

Empat angka viewBox adalah x minimum, y minimum, lebar, dan tinggi, sebagaimana didefinisikan dalam spesifikasi sistem koordinat SVG. Gambar pada koordinat sekitar 10000,10000 tidak akan muncul di dalam viewBox="0 0 800 600". Dimensi viewBox bernilai nol atau negatif menonaktifkan rendering elemen tersebut.

Perbaiki batas yang terlihat berdasarkan geometri sebenarnya. Jangan menempelkan viewBox acak dari file lain. Panduan SVG berukuran salah menjelaskan interaksi viewBox dan dimensi viewport ketika gambar terlihat tetapi skalanya salah.

5. Periksa pewarnaan dan visibilitas

Pilih satu objek dan periksa fill maupun stroke. Keadaan umum yang membuat objek tidak terlihat antara lain:

• fill="none" tanpa stroke;
• fill putih pada kanvas putih;
• opacity="0", fill-opacity="0", atau stroke-opacity="0";
• display="none" atau visibility="hidden";
• class yang stylesheet-nya menerapkan salah satu nilai tersebut;
• stroke yang sangat tipis pada skala saat ini.

Untuk sementara, letakkan persegi panjang berwarna di belakang gambar atau berikan fill uji yang mencolok pada salinan satu path. Jika objek muncul, pulihkan style yang diinginkan alih-alih membiarkan warna diagnosis pada file akhir.

Jika fill tetap terlihat tetapi garis tertentu menghilang setelah ekspor, gunakan panduan stroke SVG yang menghilang untuk menguji pewarnaan stroke, clipping, skala, dan tampilan yang tidak didukung tanpa menjiplak ulang geometri yang sudah baik.

6. Periksa fitur yang mungkin tidak didukung aplikasi tujuan

Cari clipPath, mask, pattern, filter, <image>, dan <foreignObject> dalam markup.

Clip dan mask dapat menyembunyikan semuanya ketika sistem koordinat atau referensinya rusak; model rendering SVG menempatkan clipping, masking, filtering, dan compositing dalam alur rendering. Pattern dan filter dapat dirender secara berbeda oleh pengimpor yang berbeda. Elemen <image> menanamkan konten gambar di dalam wadah SVG, sedangkan <foreignObject> dapat berisi konten dari namespace XML lain, sebagaimana dijelaskan dalam spesifikasi konten tertanam SVG.

Jika bentuk tetap ada tetapi label HTML menghilang, bandingkan foreignObject dengan teks SVG native dan ganti hanya label yang bermasalah.

Jika path terlihat tetapi bayangannya terpotong, periksa penyebab bayangan SVG yang terpotong dengan menguji wilayah filter dan viewport luar secara terpisah.

Referensi juga dapat bermasalah. Pastikan ID yang digunakan oleh url(#name) benar-benar ada dan unik. Jika SVG bergantung pada gambar eksternal, font, stylesheet, atau file tertaut, pemindahan SVG mungkin membuat sumber daya tersebut tidak dapat ditemukan.

Untuk aplikasi Qt, panduan renderer SVG di Qt memisahkan pemeriksaan modul dan pemuatan dari batas dukungan fitur. Bandingkan sumber kecil terlebih dahulu, lalu periksa gambar melalui jalur rendering yang dipilih.

Ketika browser menampilkan desain tetapi CAD tidak mengimpor apa pun, cari <path>, <rect>, <circle>, dan geometri vektor biasa lainnya. PNG tertanam yang terlihat tidak memiliki kurva yang dapat digunakan CAD.

7. Validasi atau ekspor ulang file

XML salah format, atribut yang tidak valid, dan struktur khusus aplikasi pengekspor mungkin ditoleransi oleh satu renderer dan ditolak oleh renderer lain. Jika Anda memiliki desain sumber, buka kembali di aplikasi pembuatnya dan ekspor salinan SVG biasa atau yang disederhanakan. Expand hanya fitur yang tidak dapat ditangani aplikasi tujuan, lalu bandingkan file baru dengan sumbernya.

Jika Anda tidak memiliki sumbernya, gunakan validator SVG/XML atau editor teks yang melaporkan kesalahan sintaks. Kerjakan pada salinan dan perbaiki kesalahan struktur pertama terlebih dahulu karena pesan berikutnya mungkin merupakan akibatnya.

Jangan jalankan pengoptimal pada satu-satunya salinan. Pengoptimalan menulis ulang struktur dan dapat mempersulit pemulihan ketika masalahnya belum dipahami.

Kapan perlu membuat ulang atau melakukan vektorisasi ulang

Vektorisasi ulang sesuai dilakukan ketika file hanya berisi gambar raster tertanam, struktur SVG yang dihasilkan tidak dapat digunakan di luar browser, atau tidak ada sumber yang dapat diedit yang tersisa. Ekstrak atau temukan raster berkualitas tertinggi, lalu jiplak menjadi path nyata.

Ini bukan perbaikan yang tepat untuk path di luar kanvas, viewBox rusak, fill putih, atau satu mask yang tidak didukung. File tersebut sudah memiliki geometri, dan mempertahankannya menghindari penurunan kualitas yang tidak perlu.

Jika seluruh desain terseleksi sebagai satu gambar piksel atau tampak kotak-kotak saat diperbesar jauh, gunakan diagnosis piksel tersembunyi sebelum membuatnya ulang.

Peran PerfectVector

Alur kerja gambar ke vektor PerfectVector ditujukan untuk kondisi file yang hanya berisi raster. Unggah PNG, JPG, atau gambar lain yang didukung dengan kualitas terbaik, lalu periksa pratinjau vektor untuk memastikan adanya bentuk nyata, tepi bersih, ruang negatif, dan path yang mudah dikelola.

Alur ini tidak memperbaiki markup SVG sembarang atau memulihkan sumber daya eksternal. Jika file sudah berisi path yang baik, perbaiki viewport, style, atau fitur yang tidak didukung di editor vektor. Jika file hanya berupa raster dalam pembungkus SVG, membuat ulang gambar yang terlihat sebagai path menghasilkan vektor yang dapat digunakan lintas aplikasi, bukan pembungkus lain.

FAQ

Mengapa SVG saya kosong di Illustrator tetapi terlihat di Chrome? File mungkin menggunakan fitur yang didukung browser tetapi tidak diimpor Illustrator, seperti konten web tertanam, pattern kompleks, filter, mask, atau pembungkus raster. Periksa markup dan pastikan file berisi path vektor biasa sebelum mengekspor ulang salinan SVG yang lebih sederhana.

Bagaimana cara menemukan gambar SVG yang berada di luar kanvas? Gunakan Select All dan periksa batas seleksi atau koordinatnya. Jika kotak muncul jauh dari halaman, pindahkan ke halaman atau ubah ukuran halaman agar sesuai dengan gambar. Lalu perbarui viewBox agar sesuai dengan geometri yang ingin ditampilkan.

Bisakah SVG berwarna putih sehingga terlihat kosong? Ya. Fill atau stroke putih menghilang pada kanvas putih. File juga mungkin menggunakan opacity nol, display="none", atau visibility="hidden". Uji pada latar berwarna dan periksa style hasil komputasi.

Mengapa SVG saya diimpor dalam keadaan kosong ke Fusion atau aplikasi CAD lain? File mungkin berisi bitmap tertanam atau konten web yang tidak didukung, bukan kurva vektor. CAD membutuhkan geometri path yang dapat diimpor. Cari <path> dan bentuk terkait, lalu periksa apakah konten yang terlihat justru berada di dalam <image> atau <foreignObject>.

Haruskah saya mengubah SVG kosong menjadi PNG lalu kembali ke SVG? Hanya jika SVG tidak memiliki geometri vektor yang dapat dipulihkan dan tampilan raster merupakan sumber terbaik yang tersisa. Konversi melalui PNG menghancurkan struktur path yang sudah ada. Periksa penyebab masalah viewport, visibilitas, clipping, dan dukungan terlebih dahulu.

Sources

1. W3C — Sistem Koordinat SVG 2 — Mendefinisikan viewport, viewBox, unit, dan transformasi.
2. W3C — Model Rendering SVG 2 — Mendokumentasikan clipping, masking, filtering, compositing, dan urutan rendering.
3. W3C — Konten Tertanam SVG 2 — Mendefinisikan gambar tertanam dan konten asing dalam SVG.
4. W3C — Markup Validation Service — Menyediakan validasi dokumen berbasis standar untuk menelusuri masalah markup.

Ketika file yang tersisa hanya berupa piksel di dalam wadah SVG, buat ulang gambar sebagai path vektor yang dapat diedit dan periksa pratinjaunya. Ketika path yang baik sudah ada, pertahankan dan perbaiki bagian terkecil dari dokumen yang bermasalah.