Tonjolan Tajam Miter SVG: Perbaiki Sudut Tajam Tanpa Pemotongan

Ujung menyerupai jarum pada outline SVG biasanya berasal dari sambungan miter pada sudut lancip. Jika Anda tidak menginginkan ujung itu, turunkan stroke-miterlimit atau pilih sambungan bevel atau round. Jika ujung merupakan bagian desain tetapi puncaknya hilang, berikan lebih banyak ruang untuk stroke yang digambar dalam viewBox. Ini adalah perbaikan berbeda: satu mengubah bentuk sudut; yang lain mengubah apa yang dapat ditampilkan file.

Simpan salinan SVG asli saat pengujian. Logo dengan ujung tajam yang disengaja mungkin perlu mempertahankan miter, sementara tonjolan tajam tidak sengaja pada outline impor mungkin memerlukan sambungan lebih datar. Pertama, tentukan sudut mana yang memang harus bertahan.

Mengapa sudut sempit menumbuhkan tonjolan tajam

Path dengan stroke memiliki lebar pada kedua sisi garis tengah. Dengan stroke-linejoin="miter", tepi luar stroke berlanjut hingga bertemu. Semakin tajam belokannya, semakin jauh titik pertemuan tersebut. SVG memakai miter sebagai gaya sambungan awal, dan stroke-miterlimit awal adalah 4, menurut definisi pewarnaan SVG 2.

Batas tersebut adalah rasio, bukan jarak dalam piksel atau satuan SVG. Jika panjang miter dibagi stroke-width melampaui batas, sambungan miter biasa menjadi bevel. Batas lebih tinggi mengizinkan ujung lebih panjang; batas lebih rendah membuat lebih banyak sudut lancip menjadi datar. Referensi miter-limit MDN menunjukkan hubungan dengan sudut dan mencatat bahwa properti CSS dapat menimpa atribut presentasi SVG.

Satu path, empat hasil terlihat

Untuk pengujian ini, kami menggambar satu segmen lambang terbuka bersudut dengan d="M130 520 L180 200 L230 520" dan stroke 26 satuan. Dua panel pertama memakai batas miter 10. Panel kedua menerapkan batas terlihat rapat pada y=170, yang memotong ujung. Panel ketiga memakai batas 4, sehingga sudut ini menjadi bevel. Panel keempat memakai round. Ini adalah ilustrasi terkontrol path dan renderer tersebut, bukan janji bahwa setiap SVG impor memiliki bentuk sudut yang sama.

Path tengah putus-putus merah tidak berubah pada keempat panel. Itu penting: mengubah sambungan stroke dapat memperbaiki outline yang digambar tanpa merekonstruksi path vektor yang mendasarinya.

Apakah tonjolan tajam, bevel, atau ujung terpotong?

Ujung yang terpotong dapat sekilas menyerupai bevel yang disengaja. Perbesar dan periksa apakah ujungnya sejajar batas file. Diagnosis stroke SVG yang hilang membahas penyebab pewarnaan dan pemotongan lain; pengujian ini mengisolasi sudut miter.

Perbaiki sudut tanpa mengubah bagian yang salah

1. Temukan path dan sambungan efektifnya

Pilih sudut di editor vektor, atau periksa teks SVG untuk stroke, stroke-width, stroke-linejoin, dan stroke-miterlimit. Periksa grup induk dan aturan CSS selain atribut path sendiri. Properti stroke-miterlimit inline atau stylesheet dapat mendapat prioritas atas atribut presentasi yang sama pada elemen, sebagaimana didokumentasikan MDN.

Jika objek terpilih adalah outline terisi alih-alih stroke aktif, hentikan penyesuaian miter. Anda harus mengubah path isian itu atau kembali ke master stroke yang belum diekspansi. Jika seluruh impor berukuran salah, jalankan pengujian impor SVG dengan ukuran diketahui sebelum mengompensasi dengan perubahan lebar stroke.

2. Ubah satu pengaturan sambungan pada duplikat

Coba bevel terlebih dahulu ketika sudut datar mekanis dapat diterima. Coba round ketika desain mengizinkan tepi yang dilembutkan. Pertahankan miter ketika ujung yang tepat merupakan bagian tanda, dan pilih batas yang mempertahankan hanya ujung yang dimaksud. Referensi stroke-linejoin SVG mendefinisikan perbedaan bentuk sambungan umum.

Berikut salinan pengujian kecil dari path di atas:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

Ubah stroke-miterlimit menjadi 4 untuk melihat bevel pengganti pada sudut khusus ini. Lalu pulihkan 10 dan ubah stroke-linejoin menjadi round atau bevel. Nilai stroke-miterlimit tidak relevan untuk kedua gaya sambungan terakhir itu. Jangan menurunkannya pada seluruh logo hanya karena satu sudut bermasalah; ujung lain mungkin disengaja.

3. Berikan cukup kanvas untuk ujung yang diinginkan

Jika miter benar tetapi hilang di tepi, perbesar atau posisikan ulang viewBox di sekitar hasil yang digambar, bukan hanya koordinat path. Definisi sistem koordinat SVG 2 menjelaskan persegi panjang terlihat; stroke dapat melampaui koordinat path tengahnya. Periksa pula viewport SVG bersarang dan clip path. Clip induk dapat terus memotong ujung meskipun viewBox akar diperluas.

Jangan memperlakukan kanvas lebih besar sebagai obat untuk jarum yang tidak disengaja. Kanvas itu hanya memperlihatkan lebih banyak jarum tersebut. Sebaliknya, mengubah sambungan menjadi bevel hanya agar muat di artboard rapat dapat menghapus sudut desain. Bandingkan file yang diserahkan dengan tanda asli pada ukuran tampilan atau cetak sebenarnya. Jika vendor mengukur ukuran SVG fisik, pertahankan lebar dan tinggi yang dimaksud sambil mengubah pemetaan viewBox secara sengaja.

4. Buka kembali file yang diserahkan

Periksa hasil dalam browser dan editor atau aplikasi produksi target. Periksa ujung pada 100% dan ukuran akhir yang dimaksud. Jika penyerahan memerlukan kontur terisi alih-alih stroke aktif yang bisa diedit, simpan master asli, ubah stroke menjadi outline pada salinan penyerahan dalam editor, lalu periksa batas terisi baru. Mengubah menjadi outline mengubah geometri; bukan pengaturan miter yang dapat dibatalkan. Untuk pemeriksaan isian dan outline lebih luas, lihat panduan paint-order SVG.

Ketika logo raster memerlukan path baru terlebih dahulu

Kontrol miter hanya bekerja pada stroke vektor aktif. Jika logo yang tersisa hanya PNG atau JPG, alur vektorisasi logo PerfectVector dapat membuat kandidat SVG sebelum Anda menyunting sudut. Bandingkan siluet, celah kecil, dan struktur path hasil rekonstruksi dengan sumber. Tracing mungkin merepresentasikan garis raster tebal sebagai outline terisi, bukan garis tengah asli yang bisa diedit, jadi jangan mengharapkan stroke-miterlimit otomatis memperbaiki hasil tersebut. Gambar ulang titik geometris kritis ketika harus cocok persis dengan master merek.

Jika SVG asli tersedia, perbaiki file itu alih-alih memvektorisasikan tangkapan layar. Panduan vektorisasi logo membantu ketika Anda memang harus membuat ulang karya dari piksel; artikel ini dimulai setelah stroke aktif yang sesuai sudah ada.

Pemeriksaan sudut akhir

1. Simpan master vektor yang belum disentuh.
2. Pastikan apakah sudut berupa stroke aktif atau kontur terisi.
3. Bandingkan miter, bevel, dan round pada satu path terkait.
4. Jika mempertahankan miter, uji batasnya dan sisakan ruang terlihat yang cukup untuk seluruh ujung yang digambar.
5. Buka kembali SVG dalam aplikasi tujuan sebenarnya dan periksa pada ukuran akhir.

FAQ

Mengapa SVG saya memiliki tonjolan tajam pada sudut tajam? Sambungan miter memperpanjang tepi luar stroke hingga bertemu. Pada sudut lancip, titik pertemuan itu dapat jauh dari path tengah. Turunkan batas miter atau gunakan bevel atau round ketika ujung tidak disengaja.

Mengapa menurunkan stroke-miterlimit membuat sudut datar? Ketika rasio panjang-miter-terhadap-lebar-stroke melampaui batas, sambungan miter biasa beralih ke bevel. Nilai lebih rendah memicu peralihan itu pada lebih banyak sudut. Pertahankan batas lebih tinggi jika ujung tajam disengaja, lalu periksa batasnya.

Mengapa ujung SVG saya masih terpotong setelah batas miter dinaikkan? Batas lebih tinggi mungkin membuat ujung lebih panjang sementara viewBox atau clip masih memotongnya. Perluas wilayah terlihat di sekitar stroke yang digambar atau posisikan ulang tanda, lalu buka kembali SVG yang diserahkan dalam aplikasi tujuan.

Sources

1. W3C — Pewarnaan SVG 2 — Mendefinisikan sambungan stroke, nilai awal, dan perilaku peralihan miter.
2. MDN — stroke-miterlimit — Menjelaskan rasio batas dan hubungannya dengan sudut tajam.
3. MDN — stroke-linejoin — Mendefinisikan bentuk sudut umum untuk path dengan stroke.
4. MDN — CSS stroke-miterlimit — Mendokumentasikan prioritas properti CSS atas atribut presentasi SVG.
5. W3C — Sistem Koordinat SVG 2 — Mendefinisikan hubungan viewBox dan viewport yang dipakai untuk pemeriksaan batas.

Jika tanda yang hanya berupa raster memerlukan path layak sebelum perbaikan ini, buat kandidat SVG dari logo, periksa geometrinya, lalu sesuaikan atau gambar ulang sudut yang penting.