Stroke SVG Hilang Setelah Ekspor: Temukan Penyebabnya

Ketika stroke SVG hilang setelah ekspor, tentukan dahulu apakah geometri path masih ada. Garis yang tampak hilang mungkin tidak memiliki warna stroke, sama dengan latar, menjadi terlalu tipis pada skala baru, berada di luar viewBox, atau terpotong pada tepi halaman. Garis juga mungkin menggunakan kuas, profil lebar variabel, filter, atau aturan CSS yang tidak dipahami aplikasi tujuan.

Jangan langsung menelusuri ulang gambar atau mengembangkan setiap objek. Pertahankan sumber yang dapat diedit, buat salinan uji, dan isolasi satu garis bermasalah. Perbaikan terkecil biasanya mempertahankan lebih banyak struktur asli.

Diagnosis cepat

1. Buka SVG yang sama di browser terkini dan satu editor vektor.
2. Pilih garis yang hilang dan pastikan path serta node masih ada.
3. Berikan warna stroke mencolok, opasitas penuh, dan stroke sementara lebih lebar pada salinan uji.
4. Pindahkan menjauh dari tepi halaman dan nonaktifkan clip, mask, serta filter satu per satu.
5. Hapus transformasi atau periksa pengaruhnya pada lebar stroke.
6. Jika hanya satu tujuan gagal, ganti tampilan yang tidak didukung dalam salinan penyerahan.

Empat hasil stroke

Pertama, periksa apakah path masih ada

Buka salinan SVG di editor teks dan cari elemen bentuk biasa seperti <path>, <line>, <polyline>, <circle>, atau <rect>. Kemudian pilih objek yang hilang dalam editor vektor dan beralih ke tampilan kontur atau wireframe.

• Jika node dan path terlihat dalam tampilan kontur, geometri masih ada. Periksa pewarnaan, clipping, transformasi, dan dukungan aplikasi.
• Jika objek ada tetapi batasnya jauh di luar halaman, pindahkan kembali atau perbaiki viewBox.
• Jika garis yang diinginkan menjadi bentuk tertutup berisi, mungkin sudah dikembangkan menjadi kontur.
• Jika geometri terkait tidak ada, periksa dokumen sumber dan pengaturan ekspor. Pengekspor mungkin menghilangkan objek tidak didukung.

Bandingkan dua perender sebelum mengedit. Stroke terlihat di Chrome tetapi hilang di editor desktop mengarah pada keterbatasan impor atau ketergantungan CSS. Garis yang hilang di semua tempat lebih mungkin memiliki pewarnaan tidak valid, clipping, batas keliru, atau geometri tidak ada. Jika seluruh dokumen kosong, bukan hanya garisnya, ikuti diagnosis SVG kosong yang lebih luas.

Jika stroke khusus hilang di Penpot, gunakan pemeriksaan impor SVG Penpot untuk mengisolasi penyerahan.

Penyebab 1: stroke tidak memiliki pewarnaan terlihat

SVG memperlakukan isian dan stroke sebagai properti pewarnaan terpisah. Path dapat ada tanpa menampilkan garis. Panduan isian dan stroke MDN membahas properti inti, termasuk stroke, stroke-width, dan opasitas.

Periksa objek pilihan dan gaya yang diwarisi untuk:

• stroke="none";
• stroke tidak ada bersama fill="none";
• stroke-width="0" atau lebar sangat kecil;
• opacity="0" atau stroke-opacity="0";
• warna stroke sama dengan halaman atau bentuk sekitar;
• display="none" atau visibility="hidden" pada objek atau grup induk;
• kelas CSS yang menggantikan atribut presentasi.

Pada salinan uji, tetapkan warna jenuh, opasitas 100%, dan stroke beberapa kali lebih lebar. Jika kontur tebal menutupi permukaan huruf berisi, bandingkan urutan pewarnaan stroke dan isian SVG sebelum mengubah path. Letakkan persegi panjang kontras di belakangnya. Jika garis muncul, pulihkan warna yang diinginkan dan pilih lebar yang tetap terbaca pada ukuran penyerahan.

Ingat bahwa gaya pada elemen masih dapat digantikan aturan stylesheet yang lebih spesifik. Periksa gaya terhitung dalam alat pengembang browser ketika markup menyatakan satu hal tetapi browser menggambar hal lain.

Penyebab 2: garis terpotong pada tepi halaman atau bingkai

Stroke meluas ke kedua sisi path tengah. Jika bagian tengah berada pada batas viewBox, setengah stroke dapat berada di luar viewport. Garis tebal, ujung persegi, sambungan miter, blur, atau bayangan membutuhkan ruang lebih besar daripada koordinat path polos; spesifikasi pewarnaan SVG mendefinisikan bagaimana lebar stroke, ujung, sambungan, dan batas miter memperluas hasil pewarnaan di sekitar path. Jika bentuk tertutup membutuhkan garis seluruhnya di dalam atau di luar path, gunakan panduan penyelarasan stroke dalam atau luar untuk membandingkan area yang terwarnai sebelum mengubah artboard.

Uji dengan memindahkan objek ke dalam atau memperbesar viewBox sementara. Jika bagian hilang kembali muncul, tambahkan margin yang direncanakan di sekitar gambar terlihat. Jangan terus memperbesar kanvas tanpa perhitungan; sediakan ruang cukup untuk lebar stroke maksimum, ujung, sambungan, dan efek.

Periksa juga referensi clipPath serta mask. Clip berukuran sesuai batas isian dapat memotong stroke yang meluas melewatinya. Elemen SVG bersarang dapat membuat viewport sendiri, dan perilaku overflow dapat berbeda antara browser dengan pengimpor alat desain.

Ketika hanya satu sudut hilang, cari interaksi stroke-miterlimit tinggi. Miter tajam dapat meluas jauh di luar path. Mengubah sambungan menjadi round atau bevel mungkin lebih sesuai daripada memperbesar viewport, tetapi hanya jika mempertahankan desain yang diinginkan.

Penyebab 3: penskalaan atau transformasi mengubah tampilan stroke

Transformasi dapat mengubah geometri objek dan tampilan stroke. Garis yang jelas pada ukuran pembuatan dapat menjadi setipis rambut setelah impor, terutama ketika aplikasi penerima menafsirkan satuan atau transformasi bersarang secara berbeda.

Periksa transform="scale(...)" pada path dan grup induk dalam SVG. Bandingkan viewBox, width, serta height dokumen, lalu uji pada pembesaran 100% dan ukuran fisik akhir. Jika seluruh desain diimpor pada dimensi keliru, perbaiki pemetaan dokumen melalui uji skala SVG berukuran diketahui, bukan mengompensasi dengan lebar stroke sembarang.

SVG juga mendukung vector-effect="non-scaling-stroke". Seperti dijelaskan referensi vector-effect MDN, nilai umum non-scaling-stroke menjaga lebar stroke yang dirender agar tidak mengikuti transformasi elemen. Itu berguna untuk diagram antarmuka dan peta; periksa hasil dalam pengimpor tujuan karena dukungan di luar browser berbeda menurut aplikasi.

Jangan menambahkan non-scaling-stroke sebagai solusi universal. Tentukan apakah garis harus mengikuti skala gambar. Jika logo diperbesar untuk cetak, stroke biasanya harus ikut membesar. Jika garis peta harus tetap satu piksel layar saat diperbesar, stroke tanpa penskalaan mungkin disengaja.

Penyebab 4: tujuan tidak dapat mereproduksi tampilannya

Tidak semua garis di aplikasi desain merupakan stroke SVG biasa. Garis mungkin berupa kuas sensitif tekanan, profil lebar variabel, kuas pola, efek aktif, blend, filter, atau rangkaian tampilan khusus aplikasi. Pengekspor mungkin memperkirakan konstruksi tersebut, dan aplikasi kedua mengabaikan perkiraannya.

Lakukan uji penyederhanaan pada duplikat:

1. hapus filter sambil mempertahankan stroke dasar;
2. ganti pola atau kuas dengan stroke padat biasa;
3. hapus lebar variabel;
4. ratakan transformasi bersarang;
5. ekspor satu objek sebagai SVG minimal;
6. buka file tersebut di tujuan.

Penyederhanaan pertama yang memulihkan garis menunjukkan fitur tidak didukung. Anda kemudian dapat memilih pengganti portabel, bukan meratakan seluruh dokumen.

CSS dan sumber daya eksternal juga berisiko bagi portabilitas. SVG yang disematkan dalam situs mungkin mewarisi aturan kelas atau properti khusus halaman, sementara file sama yang dibuka sendiri tidak. Sebaliknya, editor desktop mungkin membuang selektor yang tidak dipetakan ke model objeknya. Untuk file penyerahan mandiri, gunakan gaya lengkap di dalam file yang terbukti diimpor aplikasi tujuan.

Stroke aktif atau path berkontur?

Stroke aktif mempertahankan path tengah yang dapat diedit beserta pengaturan lebar, ujung, sambungan, garis putus-putus, dan pewarnaan. Bentuknya ringkas dan mudah disesuaikan. Stroke berkontur mengonversi pita terlihat menjadi geometri path berisi. Itu menetapkan tampilan tetapi mengorbankan garis tengah serta kontrol stroke asli.

Ubah salinan penyerahan menjadi kontur ketika tujuan tidak dapat mempertahankan tampilan kuas atau lebar variabel yang penting, atau vendor secara khusus meminta geometri berisi. Dokumentasi Expand objects Adobe menjelaskan pengembangan stroke menjadi objek komponennya.

Simpan master stroke aktif karena pengembangan dapat:

• meningkatkan jumlah node dan ukuran file;
• memperlambat perubahan lebar;
• mengubah tumpang tindih menjadi geometri rumit;
• membuat bagian terpisah yang perlu disatukan;
• mengubah makna path terbuka untuk plot, ukir, atau animasi.

Pengembangan terutama berisiko ketika plotter pena atau alur ukir mengharapkan alat mengikuti path tengah sekali. Stroke berkontur memberikan dua batas kepada mesin. Untuk alur itu, gunakan panduan SVG satu garis.

Pilih solusi sesuai tujuan

Uji tujuan persisnya, bukan hanya editor lain dari vendor sama. Browser, kanvas desain, alur cetak, mesin potong, dan pengimpor CAD dapat mendukung bagian SVG yang berbeda.

Urutan perbaikan yang aman

Mulai dari pemeriksaan yang dapat dibatalkan menuju konversi struktur:

1. pertahankan sumber yang dapat diedit dan buat duplikat;
2. pastikan geometri ada;
3. bandingkan dua perender;
4. uji warna stroke, lebar, dan opasitas eksplisit;
5. periksa kontras latar dan CSS yang diwarisi;
6. periksa batas halaman, clip, mask, serta viewport bersarang;
7. periksa transformasi dan render ukuran akhir;
8. sederhanakan satu tampilan tidak didukung setiap kali;
9. ubah hanya stroke yang diperlukan menjadi kontur dalam salinan penyerahan;
10. buka kembali SVG penyerahan dan bandingkan dengan sumber.

Jangan menggunakan rasterisasi sebagai perbaikan perantara ketika path baik masih ada. Rasterisasi menghilangkan geometri yang ingin dipertahankan dan menambahkan penelusuran yang dapat melembutkan sudut, mengubah kurva, serta membuat node tidak perlu.

Peran PerfectVector

PerfectVector hanya berguna ketika geometri vektor asli hilang atau tidak dapat digunakan dan sumber terbaik yang tersisa berupa raster. Alat ini dapat menyusun ulang logo datar, ikon, atau ilustrasi yang sesuai sebagai bentuk vektor yang dapat diedit.

Alat ini tidak memperbaiki CSS, memulihkan stroke aktif yang tidak diekspor, atau mengonversi kuas tidak didukung sambil mempertahankan garis tengahnya yang dapat diedit. Jika path masih ada, perbaiki pewarnaan, batas, transformasi, atau tampilan di editor vektor. Itu mempertahankan lebih banyak informasi daripada menelusuri tangkapan layar.

FAQ

Mengapa stroke SVG hilang setelah ekspor? Path mungkin masih ada tetapi tanpa stroke terlihat, opasitas nol, warna sama dengan latar, lebar sangat tipis, clipping, masalah skala, atau tampilan yang tidak dapat diimpor tujuan. Pastikan geometri dahulu, lalu isolasi pewarnaan, batas, transformasi, dan dukungan.

Bagaimana mengetahui apakah path masih ada? Pilih objek hilang di editor vektor dan beralih ke tampilan kontur atau wireframe. Anda juga dapat membuka SVG sebagai teks dan mencari elemen path atau bentuk terkait. Node yang ada tanpa garis terlihat mengarah pada masalah render atau gaya, bukan geometri hilang.

Mengapa stroke terpotong pada tepi SVG? Stroke meluas melewati path tengah, sehingga path pada batas viewBox dapat kehilangan setengah lebar. Ujung, sambungan, filter, clip, dan mask mungkin juga membutuhkan margin tambahan. Pindahkan path ke dalam atau atur viewport serta clip secara sengaja di sekeliling seluruh tampilan.

Apakah stroke SVG perlu dikembangkan sebelum ekspor? Hanya ketika tujuan tidak dapat mempertahankan tampilan stroke penting atau secara eksplisit membutuhkan geometri berisi. Kembangkan salinan penyerahan dan simpan master stroke aktif yang dapat diedit. Pengembangan menambah geometri dan tidak cocok ketika plotter atau alat ukir harus mengikuti satu garis tengah.

Bisakah PerfectVector memulihkan stroke SVG yang hilang? Tidak dari SVG yang path atau gayanya hanya perlu diperbaiki. PerfectVector dapat menyusun ulang gambar terlihat dari raster terbaik yang tersisa ketika geometri vektor asli tidak tersedia, tetapi tidak memulihkan CSS, pengaturan kuas, atau path tengah asli yang dapat diedit.

Sources

1. W3C — Pewarnaan SVG 2 — Mendefinisikan isian, stroke, lebar stroke, ujung, sambungan, dan efek vektor.
2. W3C — Sistem Koordinat SVG 2 — Mendokumentasikan viewport, viewBox, satuan, dan transformasi.
3. MDN — vector-effect — Menjelaskan perilaku non-scaling-stroke.
4. Adobe Illustrator — Mengelompokkan dan mengembangkan objek — Mendokumentasikan pengembangan stroke menjadi objek komponen yang dapat diedit.

---

Ketika geometri vektor asli hilang dan sumber terbaik yang tersisa raster, bangun ulang gambar sebagai path vektor bersih dengan PerfectVector, lalu periksa di aplikasi tujuan. Jika path masih ada, perbaiki SVG alih-alih menelusuri ulang.