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.

Sekilas

Pelacak Gambar ke SVG mengubah bitmap menjadi jalur vektor SVG dengan mereduksinya ke lapisan warna dan melacak setiap garis tepi. Anda membandingkan hasilnya dengan gambar asli, lalu menyalin atau mengunduh SVG.

Pelacak Gambar ke SVG: fitur sekilas

Fitur	Yang didapat	Cocok untuk
Lima pratetap	Logo, Siluet, Sketsa Garis, Poster Foto, dan Seni Detail mengatur jumlah warna, penghalusan, dan penyederhanaan untuk Anda.	Memulai dari pengaturan yang cocok untuk logo, gambar, atau foto
Mode pelacakan	Lacak menjadi lapisan warna bertumpuk, satu bentuk monokrom, atau garis tepi.	Logo, bentuk potongan, dan gambar pensil
Lapisan warna	Pertahankan 2 hingga 16 warna. Palet yang diekstrak muncul sebagai sampel warna di samping pratinjau.	Membatasi logo ke warna merek yang rata
Penghalusan dan penyederhanaan	Penggeser terpisah membulatkan sudut piksel dan menggabungkan titik berlebih, menggunakan penghalusan Chaikin dan penyederhanaan Ramer-Douglas-Peucker. Penyederhanaan yang lebih tinggi menghasilkan berkas yang lebih kecil.	Memperbaiki hasil yang kotak-kotak atau memperkecil SVG
Resolusi pelacakan	Bitmap diresampel ke lebar kerja 64 hingga 512 px sebelum dilacak. Nilai yang lebih tinggi menangkap lebih banyak detail dan menghasilkan SVG yang lebih besar.	Ikon sekitar 240 px, foto detail 400 hingga 512 px
Ekspor	Salin markup SVG, unduh berkas .svg, atau unduh .png yang dirender dari SVG.	Menyunting jalur individual di editor vektor
Format masukan	Menerima PNG, JPG, GIF, WebP, BMP dan SVG. Pratinjau berdampingan diperbarui saat Anda menyesuaikan pengaturan, dan gambar tetap di perangkat Anda.	Mengubah logo bitmap menjadi berkas yang dapat diskalakan

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.