Tracing Gambar SVGcode: Periksa Bentuk Hasil Ekspor

Untuk penelusuran gambar SVGcode, muat karya seni raster Anda, pilih Color SVG atau Monochrome SVG, sesuaikan jejaknya, lalu periksa sendiri SVG yang diekspor. Periksa warna, lubang interior, dan kanvasnya sebelum menerimanya. Dalam pengujian warna datar kami, SVGcode menghasilkan jalur nyata dan mempertahankan pembukaan bingkai, namun kedua varian yang diekspor mengubah palet asli dan menggunakan kanvas berbeda.

Jika Anda menginginkan alur kerja browser lain untuk gambar yang sudah Anda miliki, pratinjau gambar tersebut secara gratis di PerfectVector. Anda harus membuka kunci hasilnya sebelum dapat mengedit atau mengekspornya. Gunakan pemeriksaan bentuk dan warna yang sama di bawah ini; panduan ini tidak membandingkan kualitas keluaran kedua alat.

Coba dengan gambar Anda sendiri

Buka alat lengkap

PNGJPGWEBPPNGSVGLetakkan gambar Anda di siniatau klik · tempel ⌘VPilih GambarLepaskan untuk memeriksa gambar

Gratis dicoba. Letakkan gambar untuk melihat pratinjau vektor Anda, tanpa perlu mendaftar.

Apa yang dilacak SVGcode, dan apa yang harus dipersiapkan

SVGcode mengonversi gambar raster menjadi grafik vektor SVG. Penulisnya menjelaskan implementasi WebAssembly berbasis Potrace yang menelusuri warna demi warna; repositori sumber resmi mendokumentasikan implementasi tersebut. Itu menjelaskan pendekatannya, namun file yang diekspor adalah bukti karya seni Anda sendiri.

Mulailah dengan salinan PNG atau gambar raster lain yang didukung, browser yang dapat mengakses SVGcode, dan izin untuk memproses karya seni. Untuk rute clipboard di bawah ini, browser Anda harus mengizinkan akses clipboard gambar. Sediakan editor teks biasa untuk menyimpan markup SVG yang disalin, ditambah penampil atau editor SVG untuk pemeriksaan penyelesaian.

Tanda datar dengan daerah berwarna berbeda merupakan masukan pertama yang berguna. Catat warna dan bukaan yang perlu Anda pertahankan sebelum mengubah pengaturan. Untuk foto atau gradien lembut, tentukan detail mana yang dapat Anda sederhanakan; penelusuran tidak dapat menyimpulkan setiap batas yang diinginkan dari piksel. panduan vektorisasi gambar menjelaskan keputusan raster-ke-jalur secara lebih detail.

1. Muat gambar dan pilih mode penelusuran

Buka SVGcode dan muat gambar Anda. Untuk rute yang kami uji, letakkan gambar sebenarnya di clipboard dan pilih Tempel Gambar. Konfirmasikan pratinjau menampilkan gambar yang diinginkan, termasuk area transparan dan detail interior kecil, sebelum menyesuaikan apa pun.

Pilih Color SVG (Warna SVG) jika masing-masing wilayah berwarna penting. Gunakan Monochrome SVG bila hasil yang diinginkan adalah siluet satu warna. Panduan ini menggunakan Color SVG secara keseluruhan; itu tidak melaporkan tes monokrom terpisah.

Biarkan raster asli tetap terbuka di samping pratinjau. Jangan menilai jejak hanya dari apakah tepinya terlihat mulus saat diperbesar. Bagian tengah yang kosong, celah kecil, atau warna yang sengaja dipisahkan bisa lebih berarti daripada tepi luar yang halus.

2. Ubah pengaturan dengan mempertimbangkan satu detail yang terlihat

Mulailah dengan satu cacat yang dapat Anda tunjukkan, seperti titik-titik yang tidak diinginkan di luar karya seni atau lubang kecil yang hilang. Ubah satu kontrol, tunggu hingga pratinjau diperbarui, lalu bandingkan lagi detailnya.

Menekan Bintik menghilangkan area kecil. Menaikkannya mungkin membantu mengatasi titik-titik yang menyimpang, tetapi periksa detail kecil yang ingin Anda pertahankan. Posterisasi Gambar Masukan mengurangi variasi warna sebelum dijiplak; posterisasi mengelompokkan warna ke dalam tingkat yang lebih sedikit. SVGcode penulis menjelaskan kontrol dan posterisasi per saluran.

Aplikasi saat ini juga memaparkan Lebar Stroke dan pengaturan ahli. Biarkan kontrol yang tidak Anda perlukan sampai Anda memiliki ekspor dasar. Serangkaian besar perubahan yang terjadi secara bersamaan membuat sulit untuk membedakan mana yang mengubah hasilnya.

Ilustrasi

Apa yang ditunjukkan oleh pengujian warna datar asli kami

Kami membuat 512 × 512 PNG dengan latar belakang transparan, bingkai persegi panjang biru tua dengan bukaan, persegi panjang emas, dan persegi panjang teal yang tumpang tindih. Kami menempelkan gambar asli tersebut ke aplikasi SVGcode publik, menggunakan Color SVG, Suppress Speckles 2 dan Stroke width 0, lalu menyalin dua keluaran SVG sebenarnya.

Yang pertama menggunakan Posterize Input Image dengan warna merah, hijau dan biru masing-masing 7 Langkah dan alfa pada 1 Langkah. Yang kedua menggunakan gambar yang sama dengan Posterize Input Image tidak dicentang. Kontrol RGB dan alfa menjadi dinonaktifkan pada kondisi kedua tersebut.

Menonaktifkan posterisasi tidak mengembalikan warna asli gambar ini. Kedua SVG juga menempatkan karya seni di dalam kanvas yang berbeda. Ini adalah observasi dari satu gambar yang dikontrol, bukan tolok ukur atau prediksi untuk setiap file. Ini adalah alasan bagus untuk memeriksa ekspor sebenarnya sebelum menggunakannya sebagai master warna atau tata letak.

3. Salin SVG dan pertahankan markup sebenarnya

Saat pratinjau sudah siap, pilih Copy SVG (Salin SVG). Tunggu hingga Optimizing SVG (Pengoptimalan SVG) selesai sebelum membaca atau menempelkan clipboard. Dalam proses kami, pembacaan clipboard langsung kosong; membacanya setelah pengoptimalan mengembalikan markup SVG.

Tempelkan markup ke dalam editor teks biasa dan simpan dengan ekstensi .svg, seperti artwork-trace.svg. Konfirmasikan bahwa ini berisi elemen <svg> dan </svg> penutup, bukan tangkapan layar atau dokumen kaya teks. Simpan nama file terpisah untuk setiap varian pengaturan sehingga ekspor selanjutnya tidak menggantikan referensi Anda.

Ini adalah rute markup salinan yang kami selesaikan. SVGcode juga menampilkan Simpan SVG, namun panduan ini tidak membuktikan perilaku dialog penyimpanan file asli atau impor yang berhasil ke aplikasi lain.

4. Periksa warna, bukaan dan kanvas di file yang disimpan

Buka SVG yang disimpan di penampil atau editor, di samping sumber yang tidak tersentuh. Periksa ini secara terpisah:

1. Palette: bandingkan isian penting dengan nilai warna yang diinginkan. Jejak dapat mempertahankan tiga wilayah sekaligus mengubah ketiga warna. Jika diperlukan warna yang tepat, pulihkan dan verifikasi isian yang diinginkan di editor Anda.
2. Bukaan: tempatkan latar belakang yang kontras di belakang karya seni. Latar belakang baru harus terlihat melalui lubang yang diinginkan dan ruang luar. Bentuk yang dicat putih bisa terlihat seperti bukaan pada warna putih. panduan latar belakang SVG transparan menunjukkan cara membedakan keduanya.
3. Kanvas: periksa batas dokumen serta batas karya seni. viewBox mendefinisikan persegi panjang koordinat internal SVG; itu bukan janji dimensi fisik. Periksa margin dan ukuran di aplikasi tempat Anda akan menggunakan file.
4. Geometri: pilih wilayah penting satu per satu dan coba warnai ulang atau pindahkan sedikit, lalu batalkan. File yang berisi jalur masih memerlukan pemeriksaan kemampuan edit untuk pekerjaan yang Anda inginkan.

SVG dapat mewakili sebuah bukaan dengan beberapa kontur di dalam satu jalur gabungan; Standar jalur SVG menjelaskan subjalur dan lubang. Anda tidak memerlukan elemen jalur terpisah untuk setiap batas yang terlihat. Sebaliknya, jumlah jalur yang rendah saja tidak membuktikan bahwa semua detail yang diharapkan masih ada.

Pemeriksaan penyelesaian kami bersifat digital: periksa markup yang disalin dan render SVG sebenarnya. Bukaan dan ruang luar transparan di kedua varian. Tidak ada hasil impor, cetak atau potong editor tujuan yang diuji. Untuk tinjauan serah terima yang lebih luas, gunakan kartu skor kualitas jejak vektor.

Pulihkan dari pemeriksaan pertama yang gagal

Jika lubang tetap salah, panduan pemecahan masalah lubang SVG memisahkan geometri jejak yang hilang dari interpretasi aturan pengisian. Untuk alur kerja penelusuran desktop dengan alat pembersihan langsung, lihat Bitmap Jejak Inkscape.

Simpan gambar asli dan SVG yang diterima bersama-sama. Tuliskan koreksi palet atau penyesuaian kanvas apa pun yang dibutuhkan orang berikutnya. Jika Anda ingin mencoba karya seni yang ada di alat browser lain, mulai gratis dengan PerfectVector dan periksa siluet dan bukaan pratinjau.

Pertanyaan Umum

Dapatkah SVGcode melacak PNG ke jalur SVG sebenarnya?

Ya. PNG warna datar asli kami menghasilkan salinan markup SVG yang berisi tiga jalur dan tidak ada gambar tersemat. Periksa file Anda yang diekspor; hasil tersebut tidak menjamin struktur atau fidelitas yang sama untuk setiap gambar.

Apakah mematikan posterisasi akan mempertahankan warna aslinya?

Itu tidak terjadi dalam pengujian terkontrol kami. Kedua pengaturan tersebut mengubah nilai warna solid asli. Bandingkan isian yang diekspor dengan palet yang Anda inginkan dan perbaiki jika warna yang tepat penting.

Mengapa kanvas SVG berbeda dengan ukuran PNG saya?

SVG yang disalin dalam pengujian kami menggunakan viewBox 1024 × 1024 dari input 512 × 512. Periksa kanvas yang diekspor, batas karya seni, dan ukuran tampilan yang diinginkan secara terpisah daripada mengasumsikan dimensi piksel sumber akan dipertahankan.

Bagaimana saya tahu suatu pembukaan transparan?

Tempatkan latar belakang kontras di belakang SVG yang disimpan. Itu harus terlihat melalui pembukaan. Jika tidak, periksa apakah jejaknya kehilangan kontur bagian dalam atau ada bentuk yang tergambar di sana.

Sumber

1. Aplikasi SVGcode — antarmuka penelusuran gambar dan kontrol saat ini.
2. Panduan penulis SVGcode di web.dev — penelusuran warna demi warna, penekanan bintik, dan posterisasi.
3. Repositori SVGcode resmi — implementasi proyek dan dokumentasi sumber.
4. Jalur SVG W3C — jalur gabungan, subjalur, dan bukaan.