Pelacak Gambar ke SVG

Alat Pelacak Gambar ke SVG mengubah PNG, JPG, atau bitmap raster lainnya menjadi vektor SVG bersih yang dapat diskalakan tanpa batas. Berbeda dengan pelacak berbasis server yang mengharuskan pengunggahan file Anda atau menghasilkan SVG "palsu" yang hanya menyematkan bitmap base64, alat ini berjalan sepenuhnya di browser Anda — mengkuantisasi gambar menjadi beberapa lapisan warna dan melacak kembali garis tepi setiap lapisan menjadi jalur vektor nyata menggunakan kombinasi metode pelacakan batas (boundary following), penyederhanaan Ramer–Douglas–Peucker, dan penghalusan sudut Chaikin. Seret logo, ikon, sketsa, atau foto, saksikan pratinjau berdampingan yang terbentuk ulang secara waktu nyata, lalu salin markup SVG atau unduh file .svg yang dapat Anda edit di Figma, Illustrator, atau Inkscape.

Apa yang Membuat Pelacak Ini Berbeda

Cara Kerjanya (Alur proses 5 tahap)

Cara Penggunaan

1. Unggah bitmap. Seret PNG/JPG ke area jatuhkan, klik untuk menjelajah, tempel dari papan klip (Ctrl+V), atau klik salah satu sampel bawaan untuk melihat pelacak beraksi.
2. Pilih prasetel. Logo untuk tanda bermaterial 2–4 warna, Siluet untuk bentuk potongan dasar, Sketsa Garis untuk seni gambar tangan, Poster Foto untuk foto bergaya poster, Seni Mendetail untuk output bernuansa 10 warna.
3. Sesuaikan penggeser. Lapisan warna mengontrol berapa banyak warna berbeda yang dipertahankan pelacak. Penghalusan membulatkan tangga piksel. Penyederhanaan memotong jalur lurus yang panjang (lebih rendah = lebih detail, lebih tinggi = file lebih kecil). Resolusi lacak menentukan lebar kerja internal.
4. Salin atau unduh. Gunakan Salin SVG untuk markup mentah, Unduh .svg untuk file vektor yang dapat diedit, atau Unduh .png untuk merender SVG yang telah dibersihkan kembali menjadi gambar raster resolusi tinggi.

Tips untuk Hasil Pelacakan Paling Bersih

• Mulai dengan gambar kontras tinggi. Latar belakang polos dan tepi yang tajam melacak jauh lebih baik daripada foto yang penuh dengan gradasi warna.
• Gunakan prasetel yang tepat untuk tugas Anda. Prasetel Logo standar mengasumsikan 3 warna datar — ini akan terlihat aneh pada foto. Ubah ke Poster Foto atau Seni Mendetail untuk gambar alami.
• Tingkatkan penyederhanaan terlebih dahulu, baru penghalusan kedua. Penyederhanaan menghapus titik-titik; penghalusan melembutkan apa yang tersisa. Melakukannya dengan urutan tersebut menjaga hasilnya tetap kecil DAN halus.
• Turunkan resolusi lacak untuk logo. 240 px sudah sangat cukup untuk sebuah ikon — menaikkannya hanya akan menghasilkan jalur yang lebih penuh gangguan (noise).
• Aktifkan Latar belakang transparan jika Anda ingin SVG dimasukkan ke dalam tata letak berwarna. Jika tidak, pelacak akan mengisi latar belakang dengan warna putih.
• Untuk sketsa, gunakan mode Garis Tepi. Mode ini menjalankan filter Sobel terlebih dahulu dan melacak peta garis tepi yang dihasilkan — sangat cocok untuk seni garis dan gambar pensil.

Di Mana SVG Hasil Pelacakan Paling Berperan

Logo dan ikon vektor tetap tajam di setiap ukuran layar dan DPI — mulai dari favicon 16×16 hingga banner utama 4K. SVG hasil pelacakan juga merupakan bahan masukan yang sempurna untuk pengeditan lebih lanjut: buka file di Figma, Adobe Illustrator, atau Inkscape dan Anda dapat mewarnai ulang, mengubah bentuk, atau menganimasikan jalur individual apa pun. SVG juga merupakan format web kelas utama: tempel markup secara inline ke dalam HTML untuk menghindari permintaan jaringan ekstra, masukkan ke dalam CSS sebagai background-image melalui URI data:, atau animasikan coretan jalur dengan stroke-dasharray untuk efek menulis dengan tangan.

Latar Belakang Algoritmama

Pelacak standar emas klasik adalah Potrace (Peter Selinger, 2003), yang menggunakan tahapan pencocokan poligon dan pengoptimalan kurva untuk menghasilkan jalur Bezier yang sangat halus. Porting Potrace penuh memakan beberapa ribu baris kode, jadi alat ini menggunakan alur yang lebih ringan namun dipahami dengan baik: Pelacakan batas lingkungan Moore (Moore-neighborhood boundary following) untuk ekstraksi kontur, Ramer–Douglas–Peucker (juga disebut algoritma Douglas–Peucker) untuk penyederhanaan jalur, dan algoritma pemotongan sudut Chaikin untuk penghalusan. Setiap tahapan berjalan dalam waktu O(n) terhadap panjang jalur, sehingga seluruh proses pelacakan menyelesaikan gambar berukuran 240 px biasa dalam waktu kurang dari satu detik.

Privasi dan Keamanan

Semuanya berjalan secara lokal. Elemen <input type="file"> membaca file Anda secara langsung ke dalam browser, Canvas API mengekstrak data piksel di perangkat Anda, dan pelacak JavaScript tidak pernah membuat permintaan jaringan dengan membawa gambar Anda. Anda dapat mengonfirmasi hal ini dengan membuka DevTools → Network dan melihat saat Anda melakukan pelacakan — tidak ada lalu lintas unggahan yang muncul. Itu membuat alat ini aman untuk logo kepemilikan, aset merek yang belum dirilis, dan foto pribadi.

FAQ

Apakah gambar saya diunggah ke server Anda?

Tidak. Pelacak Gambar ke SVG berjalan 100% di sisi klien. Bitmap Anda dibaca ke dalam browser, diproses dengan Canvas API, dilacak dengan JavaScript murni, dan tidak pernah dikirim melalui jaringan. Putuskan sambungan Wi-Fi Anda dan pelacak ini akan tetap berfungsi.

Format gambar apa saja yang bisa saya lacak?

Format raster apa pun yang dapat dirender oleh browser Anda: PNG, JPG, GIF (bingkai pertama), WebP, dan BMP. Anda juga dapat melacak SVG yang sudah ada (akan dirasterisasi terlebih dahulu), yang berguna untuk menyederhanakan vektor yang kompleks atau mengkuantisasi ulang warnanya.

Prasetel mana yang harus saya gunakan pertama kali?

Untuk logo dan ikon berwarna pekat, gunakan prasetel Logo. Untuk potongan hitam-putih murni, gunakan Siluet. Untuk gambar dan seni garis, gunakan Sketsa Garis. Untuk foto, gunakan Poster Foto atau Seni Mendetail. Kemudian geser sedikit bilah kontrolnya — pratinjau langsung membuat efek dari setiap kontrol terlihat jelas.

Mengapa SVG hasil pelacakan saya terlihat kotak-kotak?

Tingkatkan penggeser Penghalusan untuk membulatkan sudut piksel yang tajam, dan tingkatkan penggeser Penyederhanaan untuk meruntuhkan bagian lurus yang panjang. Resolusi Resolusi lacak yang lebih tinggi juga menangkap lebih banyak detail sebelum pelacakan, yang memberikan garis tepi yang lebih halus.

Apakah saya bisa mengedit SVG hasil pelacakan setelahnya?

Ya. Outputnya adalah markup SVG biasa dengan satu <path> per lapisan warna (atau satu per siluet dalam mode mono/garis tepi). Buka di Inkscape, Illustrator, Affinity Designer, Figma, atau editor teks apa pun untuk mewarnai ulang, mengubah bentuk, atau menganimasikan jalur individual. Jalur diurutkan berdasarkan urutan perenderaan (paling terang terlebih dahulu), sehingga panel lapisan di editor vektor mana pun akan cocok.

Seberapa besar ukuran gambar masukan yang diperbolehkan?

Ukuran berapa pun — tetapi pelacak secara internal mengubah sampel bitmap Anda ke Resolusi lacak pilihan (64–512 px). Memilih yang lebih tinggi menangkap detail yang lebih halus dengan konsekuensi ukuran file SVG yang lebih besar. Untuk sebagian besar logo, 200–300 px adalah ukuran yang paling pas; untuk foto mendetail, cobalah 400–512 px.

Apakah SVG hasil pelacakan akan terlihat persis seperti bitmap aslinya?

Mendekati, tetapi tidak pernah sempurna hingga tingkat piksel — itulah konsekuensi dari vektorisasi. Mengurangi warna menjadi N warna dominan tentu membuang gradasi warna, dan penyederhanaan jalur menghapus fitur-fitur yang sangat kecil. Untuk aset penting merek, Anda harus selalu memulai dari file vektor asli jika ada; alat ini digunakan untuk situasi di mana Anda hanya memiliki bitmap dan membutuhkan versi vektor yang layak darinya.

Apakah saya boleh menggunakan SVG hasil pelacakan ini secara komersial?

Pelacak tidak menambahkan tanda air, atribusi, maupun analitik apa pun ke dalam output. Apakah Anda dapat menggunakan hasilnya secara komersial bergantung pada hak yang Anda miliki terhadap bitmap asli — melacak logo orang lain tidak mengalihkan kepemilikannya kepada Anda. Gunakan alat ini pada aset yang Anda buat sendiri atau yang Anda miliki lisensinya untuk divektorisasi.