Kurva Bézier SVG: Perbaiki Tekukan Tanpa Node Baru

Untuk menghapus tekukan tajam yang tidak disengaja pada pertemuan dua segmen Bézier kubik biasa, pertahankan jangkar bersamanya dan sejajarkan gagang yang berdekatan pada satu garis lurus, di sisi berlawanan dari jangkar itu. Panjangnya dapat berbeda sementara kurva berbagi arah tangen. Gagang yang sama panjang dan saling tercermin menambahkan kondisi lain; tidak diperlukan untuk setiap sambungan yang tampak mulus.

Periksa bentuk sumber sebelum membuat perubahan itu. Ujung daun runcing, takik, atau sudut tulisan mungkin disengaja. Perbaikan di bawah menargetkan satu perubahan arah yang tidak diinginkan, dengan titik awal, sambungan, akhir, dan jumlah segmen tetap.

Temukan dua gagang yang mengendalikan sambungan

Perintah SVG kubik memiliki dua titik kontrol dan satu titik akhir:

C firstControlX firstControlY secondControlX secondControlY endX endY

Segmen dimulai pada titik saat ini. Titik kontrol pertama mengarahkan gerakan meninggalkan awal; titik kedua mengarahkan pendekatan ke titik akhir. Tutorial path MDN mengilustrasikan titik kontrol itu dan sintaks kubik. Untuk pasangan koordinat huruf kecil, ikuti perintah path relatif SVG untuk melacak acuan sebelum mengubah gagang.

Pada jangkar bersama, periksa titik kontrol terakhir segmen sebelumnya dan titik kontrol pertama segmen berikutnya. Jika gagang mengarah pada garis berbeda, sambungan berubah arah. Menambahkan node lain di dekatnya tidak menyelesaikan hubungan tersebut dengan sendirinya.

Perbaiki contoh asli dua segmen

Simpan SVG lengkap ini sebagai join-example.svg dan buka di browser. Ini adalah tanda melengkung asli dengan tekukan tajam yang sengaja dibuat di (150, 100).

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

Titik kontrol masuk adalah (100, 100), tepat di kiri sambungan. Titik kontrol keluar adalah (170, 50), di atas dan di kanannya. Kurva datang secara horizontal dan pergi dalam arah berbeda.

Ubah hanya titik kontrol pertama segmen kedua menjadi (175, 100):

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

Kedua gagang yang berdekatan kini berada pada garis horizontal melalui sambungan. Gagang masuk panjangnya 50 satuan, dan gagang keluar 25. Arah tangen sama meskipun panjangnya berbeda.

Untuk pasangan tercermin, ubah titik kontrol itu menjadi (200, 100) sebagai gantinya. Kedua gagang lalu memanjang 50 satuan dari jangkar bersama. Ini mengubah bentuk segmen kedua lebih banyak daripada suntingan gagang tidak sama panjang, jadi bandingkan keduanya dengan kontur yang ingin dipertahankan.

Setiap versi memiliki dua segmen kubik dan tiga jangkar pada kurva: awal, sambungan, dan akhir. Titik kontrol merupakan koordinat terpisah. Perbandingan adalah render browser asli, bukan hasil tracing PerfectVector atau tangkapan layar alat node editor.

Periksa arah terpisah dari panjang gagang

Untuk kurva kubik yang berakhir pada sambungan J dengan titik kontrol terakhir A, turunan titik akhirnya adalah 3 × (J − A). Kurva kubik berikutnya, yang dimulai di J dengan titik kontrol pertama B, memiliki turunan awal 3 × (B − J).

Dalam contoh kami, turunan masuk adalah (150, 0) pada setiap panel:

Arah tangen yang cocok disebut kontinuitas G1. Turunan pertama yang cocok disebut kontinuitas C1, memakai interval parameter nol-hingga-satu yang biasa untuk setiap kurva kubik ini. Catatan turunan Bézier Michigan Tech menurunkan kondisi titik ujung tersebut.

Pengujian arah mengasumsikan turunan titik ujung bukan nol. Gagang yang titik kontrolnya berimpit dengan jangkarnya memerlukan pemeriksaan terpisah karena turunan pertamanya nol. Selain itu, segaris saja tidak cukup jika kedua gagang berada pada sisi sambungan yang sama: arah gerakan dapat berbalik.

Kedua contoh sejajar tidak menjanjikan kelengkungan yang cocok melintasi sambungan. Kurva dapat tidak memiliki sudut tangen dan masih perlu dibentuk ulang agar sesuai siluet logo yang dimaksud. Periksa seluruh lengkungan, bukan hanya node terpilih.

Gunakan S hanya ketika pencerminan adalah bentuk yang diinginkan

Versi tercermin dapat ditulis lebih ringkas:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

Di sini, S menyimpulkan titik kontrol pertama dengan mencerminkan titik kontrol terakhir kurva kubik sebelumnya terhadap titik saat ini:

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

Pasangan tersisa dalam S240 50 270 50 menetapkan titik kontrol kedua dan titik akhir. Ini adalah versi gagang tercermin 50/50. Perintah ini tidak dapat menggantikan versi 50/25 tanpa mengubah kurva.

Spesifikasi perintah kubik SVG membatasi aturan pencerminan itu untuk perintah sebelumnya berupa C, c, S, atau s. Jika perintah sebelumnya adalah garis atau kurva kuadratik, titik kontrol pertama implisit menjadi titik saat ini.

Misalnya:

M30 150 L150 100 S240 50 270 50

Setelah garis, segmen terakhir itu berperilaku seperti C150 100 240 50 270 50. Titik kontrol gagang pertamanya berimpit dengan titik awal. Segmen masih dapat melengkung karena geometri kontrol sisanya tidak segaris; S setelah garis tidak memaksakan segmen lurus.

Pemeriksaan browser kami membandingkan path S tercermin dengan padanan C eksplisit, lalu memeriksa contoh garis-diikuti-S ini terhadap perluasan eksplisitnya sendiri. Kedua perbandingan cocok pada posisi sampel. Itu mengonfirmasi contoh ini, sementara spesifikasi mendefinisikan aturan umum.

Lakukan perbaikan yang sama dalam editor node

Kerjakan salinan, pilih path, dan tampilkan gagang di sekitar sambungan yang dicurigai. Pastikan ada satu jangkar bersama. Dua titik ujung terpisah yang hanya bertumpang tindih mungkin memerlukan perbaikan topologi sebelum mengubah arah gagang.

Dalam Inkscape, panduan jenis node membedakan node smooth, yang gagangnya berbagi garis, dari node symmetric, yang gagangnya juga tetap sama panjang. Gunakan jenis node yang sesuai kontur alih-alih memaksa setiap sambungan menjadi simetris.

Pertahankan jangkar saat menyesuaikan arah gagang. Lalu pendekkan atau panjangkan gagang untuk memulihkan bentuk yang dimaksud di sekitar sambungan. Bandingkan hasil pada pembesaran tinggi maupun ukuran tampilan normal, dan buka kembali SVG tersimpan untuk memeriksa path ekspor.

Jika path memiliki jangkar yang berdesakan di seluruh lengkungan, suntingan gagang lokal mungkin tidak cukup. Panduan jumlah node SVG membahas penyederhanaan, sementara alur penyuntingan SVG membahas perubahan lebih luas. Pertahankan sudut yang disengaja selama kedua operasi.

Bandingkan bentuk yang diperbaiki dengan sumbernya

Sambungan mulus adalah satu pemeriksaan kualitas. Itu tidak membuktikan logo hasil tracing cocok dengan asli. Bandingkan siluet, bukaan, dan sudut yang disengaja memakai daftar pemeriksaan kualitas tracing vektor.

Jika hanya PNG atau JPG tanda yang tersedia, vektorisasi logo PerfectVector dapat menyiapkan kandidat SVG yang bisa diedit. Periksa konturnya, lalu gunakan perbaikan gagang lokal ketika tekukan tak diinginkan masih ada. Simpan referensi raster di samping path yang disunting agar penghalusan tidak menghapus fitur yang ingin dipertahankan.

Gunakan master vektor yang ada jika tersedia. Geometri merek yang persis atau sumber yang sangat rusak mungkin memerlukan rekonstruksi manual; panduan vektorisasi logo menjelaskan pilihan itu. Memperbaiki satu sambungan berguna ketika sisa kontur sudah sesuai.

FAQ

Apakah kedua gagang Bézier harus sama panjang untuk sambungan mulus? Tidak. Gagang bukan nol dapat berbeda panjang sambil berbagi arah tangen yang sama. Pada jangkar bersama, gagang harus berada pada satu garis, di sisi berlawanan. Gagang sama panjang yang saling tercermin menambahkan turunan pertama yang cocok untuk dua segmen kubik yang dipakai di sini.

Mengapa perintah S SVG mengubah kurva saya? S menyimpulkan titik kontrol pertamanya. Setelah C atau S, S mencerminkan titik kontrol terakhir kurva kubik sebelumnya; setelah jenis perintah lain, S memakai titik saat ini. Titik yang disimpulkan itu mungkin berbeda dari titik kontrol eksplisit yang Anda maksud.

Haruskah saya menghaluskan setiap node dalam logo hasil tracing? Tidak. Pertahankan sudut, ujung, dan takik yang disengaja. Perbaiki tekukan tak diinginkan secara lokal, lalu bandingkan seluruh siluet dengan sumber. Sambungan dengan tangen kontinu saja tidak membuktikan rekonstruksi akurat.

Sources

1. MDN — Path SVG — Menjelaskan titik kontrol kubik dan sintaks perintah path.
2. Michigan Tech — Turunan Bézier — Menurunkan tangen titik ujung dan kondisi penyambungan kurva.
3. W3C — Perintah Bézier kubik SVG — Mendefinisikan aturan pencerminan dan titik kontrol pengganti untuk S.
4. Inkscape — Jenis node — Membedakan perilaku node cusp, smooth, symmetric, dan automatic.

Jika logo Anda berasal dari gambar raster, siapkan kandidat SVG dengan PerfectVector, periksa sambungan dan siluet, lalu perbaiki hanya kurva yang membutuhkan sambil mempertahankan sudut yang disengaja.