Referensi · Baca 7 menit
Raster vs. vektor: yang bisa dan tidak bisa dilakukan tracing gambar
Bitmap adalah kisi titik berwarna. Vektor adalah daftar bentuk. Tracing adalah seni menebak bentuk dari titik-titik itu — hasilnya indah untuk sebagian gambar dan hanya mendekati untuk yang lain. Inilah alasannya.
01 · Dua jenis gambar
Titik versus bentuk
Gambar yang sama, dua deskripsi yang sama sekali berbeda.
Gambar raster (atau bitmap) — PNG, JPG, GIF, WebP, BMP, foto, screenshot — adalah persegi panjang berisi piksel, masing-masing satu warna. Logo 1000 × 1000 berarti sejuta angka. Tidak ada lingkaran atau huruf di dalam file, hanya titik-titik yang kebetulan tampak seperti lingkaran dan huruf pada ukuran itu. Perbesar, dan titik-titiknya ikut membesar; perender bisa memburamkan di antaranya, tetapi tidak bisa tahu di mana tepi seharusnya berada.
Gambar vektor — SVG, EPS, PDF, AI — menyimpan bentuknya sendiri: "lingkaran berjari-jari 40 di (100, 100), berisi warna biru", atau lebih umum, path berupa garis lurus dan kurva Bézier. Tidak ada resolusi. Logo vektor tampil identik sebagai favicon 16 piksel maupun di spanduk 10 meter, dan logo yang 200 KB sebagai PNG sering hanya 5 KB sebagai SVG.
| Raster (PNG, JPG…) | Vektor (SVG…) | |
|---|---|---|
| Terdiri dari | Kisi piksel | Garis, kurva, dan isian |
| Diperbesar | Buram atau pecah | Tetap tajam di ukuran berapa pun |
| Terbaik untuk | Foto, tekstur, screenshot | Logo, ikon, tipografi, diagram, file potong |
| Pengeditan | Piksel demi piksel | Geser satu titik, ubah satu isian |
| Ukuran file | Naik seiring resolusi | Naik seiring kompleksitas |
Membandingkan dua format tertentu? Panduan PNG vs SVG membahas ukuran file, dukungan browser, dan kapan memilih masing-masing.
02 · Cara kerja tracing
Dari piksel kembali ke bentuk
Tracing (vektorisasi) membalik prosesnya. AnyToSVG melakukannya dalam lima tahap, semuanya di perangkat Anda:
- Temukan wilayah berbayangan halus. Piksel yang hanya sedikit berbeda dari semua tetangganya dikelompokkan menjadi wilayah; setiap wilayah besar dicocokkan dengan model warna linear atau radial, dan jika modelnya menjelaskan wilayah itu dengan baik, wilayah tersebut menjadi satu bentuk dengan isian gradasi SVG.
- Kelompokkan piksel sisanya berdasarkan warna. Warna dominan menjadi palet 2 sampai 32 entri dan setiap piksel ditetapkan ke yang terdekat. Piksel tepi ber-anti-aliasing, yang merupakan campuran, dibersihkan agar tidak menjadi warna tipis tersendiri.
- Buat satu mask per isian — gambar hitam putih tentang "di mana warna (atau gradasi) ini berada".
- Telusuri setiap mask dengan Potrace, yang menyusuri batas setiap gumpalan, menentukan sudut mana yang benar-benar sudut, dan mencocokkan kurva Bézier halus pada sisanya.
- Tumpuk path dari area terbesar ke atas menjadi SVG, satu
<path>per isian.
Perhatikan apa yang tidak pernah dilakukan algoritma ini: ia tidak mengenali huruf "A" atau wajah. Ia hanya melihat gumpalan, batas, dan landaian warna yang halus. Itulah sebabnya ia unggul pada satu kelas gambar dan sekadar layak pada kelas lain.
03 · Warna transisi
Ke mana bayangan pergi: gradasi, bukan pita
Langkah yang dilewati kebanyakan tracer, dan alasan langit mereka bergaris-garis.
Tracer yang memulai dengan menyederhanakan gambar menjadi warna solid sudah kehilangan setiap transisi lembut. Langit, sorotan pada bola, bayangan pada strip balon — masing-masing menjadi tangga dua, empat, atau delapan pita warna solid dengan tepi keras di antaranya, dan semakin banyak warna yang Anda izinkan, semakin banyak pita dan semakin besar filenya.
AnyToSVG menjalankan satu tahap tambahan sebelum kuantisasi warna. Piksel yang hanya sedikit berbeda dari keempat tetangganya dikelompokkan menjadi wilayah halus (tepi ber-anti-aliasing berfungsi sebagai dinding, jadi sebuah wilayah tidak pernah bocor ke bentuk di sebelahnya). Setiap wilayah besar lalu dicocokkan dengan model warna: model linear (arah perubahan dan titik warna di sepanjangnya) atau model radial (sebuah pusat dan titik warna menurut jarak). Jika model menjelaskan piksel dengan baik, seluruh wilayah ditelusuri sebagai satu bentuk dan diisi dengan <linearGradient> atau <radialGradient> asli. Bayangan yang melengkung mengikuti kurva — yang tidak bisa diikuti satu gradasi satu dimensi — dipecah menjadi beberapa bagian, masing-masing dengan gradasinya sendiri, di sepanjang sambungan tempat model-model tetangga saling cocok.
Yang masih menjadi pita: bayangan yang mengikuti bentuk rumit, beberapa bayangan lembut yang bertumpuk, atau tekstur fotografis. Wilayah itu gagal uji model dan kembali ke warna solid, di mana slider jumlah warna mengambil alih.
04 · Hasilnya indah
Gambar yang terdiri dari bentuk datar
- Logo dan wordmark — kasus klasik. Beberapa warna, tepi tajam: SVG-nya praktis sama dengan karya aslinya.
- Ikon dan clipart dengan isian solid.
- Sketsa garis, gambar tangan, tanda tangan, stempel dalam mode hitam putih: satu path, beberapa kilobyte.
- Lettering dan kaligrafi — kurvanya halus; hanya tulisan yang sangat kecil yang bisa menyatu.
- Siluet, stensil, dan file potong untuk mesin potong vinyl dan laser cutter.
- Peta, diagram, flowchart dengan warna solid (teks menjadi bentuk, bukan tipografi yang bisa diedit).
05 · Hasilnya hanya mendekati
Gambar yang terdiri dari nada
- Fotografi menjadi poster: 8–32 warna solid dengan tepi keras di antaranya. Memukau sebagai ilustrasi atau separasi sablon; tidak berguna untuk "memperbesar".
- Bayangan kompleks — beberapa bayangan lembut yang bertumpuk, atau gradasi yang membungkus bentuk rumit — hanya sebagian tertangkap: yang cocok dengan gradasi linear atau radial (atau beberapa potongannya) menjadi gradasi, sisanya menjadi pita solid. Langit, sorotan, strip berbayang, dan bola tetap utuh, seperti terlihat di atas.
- JPG yang terkompresi berat membawa noise blok yang dengan setia digaris oleh tracer. Haluskan noise dulu dan ukuran bintik yang lebih tinggi membantu; sumber yang lebih baik membantu lebih banyak.
- Gambar mungil (di bawah 200 px) punya terlalu sedikit piksel untuk mendefinisikan kurva; sudut menjadi membulat dan detail menyatu.
- Teks yang perlu Anda edit — hurufnya akan menjadi bentuk yang sempurna, tetapi bukan font. Ketik ulang di editor Anda dengan hasil penelusuran sebagai panduan.
06 · Telusuri atau gambar ulang?
Aturan keputusan cepat
Penelusuran menyalin apa yang ada. Menggambar ulang membuat apa yang seharusnya ada.
Telusuri ketika bitmap adalah render yang setia dari desain yang sejak awal datar — Anda memulihkan vektor yang dulu pernah ada. Sepuluh detik, selesai.
Telusuri, lalu rapikan ketika sumbernya agak kasar: logo dari situs web pada 300 px, tanda tangan hasil scan, sketsa yang difoto. Penelusuran memberi Anda 90 % dan editor vektor memberi sisanya — menghapus bentuk nyasar, meluruskan garis, merapatkan sudut.
Gambar ulang ketika bitmap adalah foto dari benda itu, bukan bendanya: logo di papan nama toko, kartu nama di bawah lampu, emblem bordir. Di sana piksel memuat perspektif, pencahayaan, dan tekstur yang tidak seharusnya direproduksi tracer mana pun, dan hasil penelusuran paling baik dipakai sebagai templat di bawah gambar Anda sendiri.
Dalam ketiga kasus itu, pratinjau memberi tahu Anda sedang berada di kasus yang mana sebelum Anda mendownload apa pun — dan itulah gunanya pratinjau.
Lanjut membaca
Lebih banyak tentang vektor
Langsung coba sambil membaca
Konverter ini gratis, tanpa akun, dan menampilkan SVG di samping gambar asli Anda dalam sekitar satu detik.