Mengapa SVG Hasil Auto-Trace Anda Memiliki Terlalu Banyak Node (dan Cara Memperbaikinya)

Anda menelusuri PNG menjadi SVG, membukanya untuk mulai mengedit — dan path-nya terkubur di bawah titik-titik anchor. Ratusan titik, bergerombol di sepanjang kurva yang seharusnya cukup memakai lima atau enam titik saja. Setiap kali Anda mencoba menggeser sedikit satu bentuk, Anda harus melawan belasan handle yang tidak pernah Anda minta.

Jika itu terdengar familiar, alat vektorisasi Anda tidak rusak. Ia melakukan persis seperti kebanyakan auto-tracer: menyalin piksel, bukan menggambar bentuk. Berikut mengapa itu terjadi, mengapa dampaknya lebih memperlambat Anda daripada yang mungkin Anda kira, dan cara mendapatkan vektor yang benar-benar bersih sejak awal.

522 node vs 59 node

Apa arti "terlalu banyak node" sebenarnya

Setiap path dalam SVG dibangun dari titik anchor (juga disebut node) yang dihubungkan oleh segmen kurva. Setiap anchor memiliki sepasang handle Bézier yang membengkokkan garis di kedua sisinya. Beberapa anchor yang ditempatkan dengan baik dapat mendeskripsikan kurva panjang dan halus dengan sempurna — itulah inti grafik vektor.

Masalahnya dimulai ketika jumlah anchor jauh lebih banyak daripada yang dibutuhkan bentuknya. Kurva yang akan digambar desainer dengan lima titik bisa berakhir dengan lima puluh. Gambar tetap terlihat baik sekilas, tetapi path di baliknya berantakan.

Kemungkinan Anda sedang melihat node yang membengkak jika:

• Kurva sederhana memiliki titik anchor setiap beberapa piksel, bukan setiap beberapa inci.
• Memilih satu bentuk memunculkan puluhan titik padahal Anda memperkirakan hanya segelintir.
• Ukuran file terasa mengejutkan besar untuk karya yang sesederhana itu.

Mengapa auto-tracer menumpuk node

Sebagian besar alat tracing — Illustrator Image Trace, dan mesin berbasis potrace di balik banyak konverter online gratis — bekerja dengan mengikuti batas antara warna di gambar raster Anda dan meletakkan titik anchor di sepanjang batas itu.

Masalahnya ada pada di mana batas tersebut berada. PNG Anda memiliki anti-aliasing: piksel lembut dan semi-transparan yang menghaluskan tepi di layar. Bagi tracer, tepi lembut itu terlihat seperti garis yang sedikit bergelombang, jadi ia menambahkan titik untuk mengikuti setiap gelombang kecil. Ia tidak bertanya "apakah ini busur atau segmen lurus?" — ia menyalin kontur piksel, lengkap dengan jitter-nya. Seberapa agresif sebuah alat melakukan ini sangat bervariasi — lihat perbandingan alat vektorisasi gambar AI utama di sini.

Anda bisa melihatnya langsung di data path. Kira-kira seperti inilah satu jumbai telinga burung hantu itu ketika ditelusuri dibandingkan digambar dengan bersih:

<!-- Hasil auto-trace: satu jumbai telinga, 40+ titik -->
<path d="M312.4,98.1 C313.0,97.8 313.9,97.2 314.6,96.9 C315.2,96.7
316.1,96.4 316.8,96.2 C317.4,96.0 318.3,95.7 319.0,95.5 ...(many more) Z"/>
 
<!-- Bersih: jumbai yang sama, 6 titik -->
<path d="M312,98 C320,70 360,68 372,96 C378,112 340,140 312,98 Z"/>

Kurva yang sama. Yang satu adalah transkripsi setiap piksel; yang lain adalah sebuah bentuk.

Mengapa ini memperlambat Anda

Path yang membengkak tidak hanya terlihat tidak rapi di editor — ia merugikan Anda dalam tiga cara konkret.

Di alat desain

Di Illustrator atau Figma, setiap anchor tambahan adalah sesuatu yang harus Anda seleksi di sekitarnya, hindari, atau bersihkan sebelum bisa membuat perubahan sungguhan. Membentuk ulang kurva yang bersih hanya butuh satu atau dua titik. Membentuk ulang kurva yang ditranskripsi berarti bergulat dengan seluruh gerombolan titik — dan semoga berhasil menjaganya tetap halus.

Dipilih di Illustrator

Pada mesin cutting

Di sinilah masalahnya benar-benar terasa. Cricut, Silhouette, dan laser cutter mengikuti path secara harfiah. Terlalu banyak node membuat mesin tersendat di setiap segmen mikro: potongan lebih kasar, waktu potong lebih lama, dan peluang material robek lebih besar. Path yang bersih terpotong mulus.

Cara mendapatkan node yang bersih

Ada tiga jalan keluar, kira-kira diurutkan dari yang paling sedikit menyakitkan:

1. Sederhanakan setelahnya. Object → Path → Simplify di Illustrator dapat mengurangi titik anchor. Ini membantu, tetapi lossy — ia memperkirakan ulang path, sehingga sudut bisa melunak dan bentuk bisa terdistorsi. Anda juga tetap memulai dari trace yang sudah membengkak.
2. Turunkan detail tracing. Sebagian besar tracer memungkinkan Anda mengurangi kompleksitas, tetapi ini alat yang kasar: turunkan cukup jauh untuk memangkas node, lalu Anda mulai kehilangan detail yang sebenarnya Anda inginkan.
3. Mulai dari hasil yang bersih. Solusi sebenarnya adalah melakukan vektorisasi dengan alat yang sejak awal menghasilkan path bersih, sehingga tidak ada yang perlu dibersihkan.

Poin terakhir itulah alasan kami membangun PerfectVector. Alih-alih menyalin batas piksel, modelnya dilatih pada file desain sungguhan — tempat manusia sudah memutuskan di mana titik anchor seharusnya berada dan segmen mana yang merupakan satu kurva, bukan tiga. Hasilnya meniru penilaian itu: kurva Bézier halus, anti-aliasing tertangani, dan jumlah node yang terasa seperti sesuatu yang akan digambar oleh desainer.

Dan ini bukan hanya untuk ilustrasi — logo dan lettering juga membengkak dengan cara yang sama, dan efeknya paling terasa saat Anda membutuhkan tepi yang tajam dan potongan vinil yang bersih.

235 node vs 76 node

Coba sendiri

Masukkan PNG atau JPG ke PerfectVector — tanpa login, tanpa kartu kredit. Anda akan melihat jumlah node dan warna langsung pada hasilnya, sehingga Anda bisa menilai sendiri perbedaannya sebelum mengunduh apa pun.