Dua file yang sama-sama berakhiran .svg

Buka dua SVG "hasil konversi" di editor teks. File pertama berisi satu elemen <image> yang href-nya berupa string panjang data:image/png;base64,…. File kedua berisi elemen <path> dengan data koordinat d="M12 4 L…" dan masing-masing punya warna fill. Keduanya terbuka di browser dan sama-sama terlihat benar di ukuran aslinya. Hanya file kedua yang vektor.

Pembungkus itu persis seperti namanya: bitmap aslinya, dibawa di dalam wadah SVG. Kalau diperbesar, browser ikut memperbesar pikselnya, jadi tepinya buram sama seperti PNG. Mesin potong dan editor vektor tidak bisa memilih bentuk di dalamnya, karena memang tidak ada bentuk — hanya satu persegi panjang berisi piksel.

SVG hasil tracing menggambarkan gambar sebagai geometri. Setiap area warna jadi garis luar tertutup yang tersusun dari segmen lurus dan kurva Bézier; renderer mengisi garis luar itu di ukuran berapa pun yang kamu minta, jadi tepinya tetap tajam di 10 mm maupun 10 m.

Output png2svg.art

Tracer mengelompokkan piksel gambarmu jadi sejumlah kecil warna datar, lalu membuat garis luar setiap area warna dengan segmen lurus dan kurva Bézier. Di tempat dua warna bertemu, keduanya berbagi satu batas, jadi tidak ada celah di antaranya. Hasilnya adalah satu <path> untuk setiap bentuk, diisi warnanya, dikelompokkan per objek dan bersarang sesuai bentuk yang mengelilinginya (dengan Layer diatur ke Per warna, satu <path> per warna). Lubang, seperti bagian dalam huruf "O", tetap terbuka dengan fill rule SVG mana pun. Tidak ada elemen <image>, tidak ada bitmap yang disisipkan, dan tidak ada skrip: setiap hasil dicek sebelum disimpan, dan hanya boleh berisi path, grup, dan judul.

Karena geometrinya asli, pratinjau melaporkan jumlah path yang sebenarnya dan palet yang dipakai. Kalau logo kembali sebagai 6 path dengan 6 warna, memang itulah isi file-nya.

Huruf Fe dari sebuah logo teks yang diperbesar dua kali: di kiri sebagai piksel PNG 256 px, dengan tepi bertangga; di kanan sebagai SVG hasil tracing, dengan tepi halus

Huruf "Fe" dari salah satu contoh logo teks kami, diperbesar dengan skala yang sama: PNG 256 px memperlihatkan grid pikselnya (kiri); SVG yang di-tracing dari gambar ukuran penuh menggambar tepi yang sama sebagai kurva, tajam di ukuran berapa pun (kanan).

Cara mengecek SVG apa pun sendiri

  1. Buka file-nya di editor teks biasa. Cari elemen <path, <polygon, atau <circle — itu geometri. Cari <image — itu pembungkus.
  2. Buka di browser lalu zoom ke 800 %. Tepi vektor tetap tajam; pembungkus jadi buram atau kotak-kotak.
  3. Impor ke editor vektor seperti Inkscape. Hasil tracing memungkinkanmu mengklik bentuk satu per satu; pembungkus terpilih sebagai satu gambar.
  4. Bandingkan ukuran file-nya. PNG yang dibungkus setidaknya sebesar PNG-nya (base64 menambah sekitar sepertiga); logo hasil tracing biasanya hanya beberapa kilobyte.

Yang tidak bisa dilakukan tracing

Tracing merekonstruksi area datar. Tracing tidak bisa memulihkan detail yang memang tidak pernah ada di pikselnya: ikon selebar 64 piksel yang di-tracing dengan pengaturan apa pun tetap desain selebar 64 piksel, dengan kurva yang ditebak dari piksel tersebut. Foto dan gradasi halus jadi pita-pita warna datar (lihat panduan tentang kenapa foto jadi terposterisasi). Teks jadi outline, bukan teks yang bisa diedit. Itu sifat tekniknya, bukan pengaturan yang bisa kamu matikan. Jenis gambar mana yang bagus divektorisasi, dan mana yang tidak, dibahas di halaman ubah gambar ke vektor.

Kenapa pratinjau itu penting

png2svg.art menampilkan pratinjau ber-watermark dari hasil tracing sebelum kamu membuka apa pun; SVG bersihnya baru disiapkan untuk diunduh setelah dibuka. Pratinjau digambar dari path yang sama dengan yang akan kamu unduh, jadi kalau huruf kecil menyatu atau garis tipis terputus, kamu sudah melihatnya sebelum memakai kredit. Membuka SVG bersih seharga 1 kredit; setiap akun terverifikasi mendapat 3 kredit gratis.