Cara Mengubah PNG ke SVG: Tracing Logo, Ikon, dan Gambar Garis

PNG adalah gambar raster: kisi piksel yang tetap, masing-masing dengan warna dan, bila ada, nilai opasitas. Logo 500 × 500 px berisi tepat 250.000 kotak seperti itu dan tidak lebih, sehingga memperbesarnya ke ukuran poster hanya bisa membuat setiap kotak lebih besar atau mengaburkan celah di antaranya. SVG adalah gambar vektor, yaitu file teks yang mencantumkan bentuk seperti <path>, <circle>, dan <rect> beserta koordinat dan warna isiannya. Browser atau mesin pemotong menggambar ulang bentuk itu pada ukuran berapa pun yang dibutuhkan, itulah sebabnya logo vektor tetap tajam di layar ponsel maupun di spanduk pameran.

Mengubah vektor ke raster itu mudah, karena perender tinggal melukis bentuk-bentuk tadi menjadi piksel; SVG ke PNG melakukannya dalam sedetik. Arah sebaliknya tidak punya jalan pintas tanpa kehilangan informasi, karena kisi piksel tidak menyimpan catatan bentuk yang menghasilkannya. Harus ada sesuatu yang membaca piksel dan menebak di mana setiap bentuk dimulai dan berakhir. Langkah menebak itu disebut tracing atau vektorisasi, dan setiap konverter PNG ke SVG yang jujur, dari Illustrator hingga program baris perintah, pada dasarnya adalah tracer.

Sebagian konverter melewatkan bagian yang sulit. Mereka menulis file SVG yang valid berisi satu elemen <image> dengan PNG asli disematkan sebagai teks base64, yang juga membuat file sekitar sepertiga lebih besar daripada PNG-nya. Hasilnya terbuka sebagai SVG dan lolos pemeriksaan jenis file, tetapi tetap gambar piksel dalam bungkus vektor: perbesar dan Anda melihat tepi bergerigi yang sama, dan mesin pemotong tidak menemukan path untuk diikuti. Buka SVG apa pun di editor teks dan cari data:image/png; jika string itu ada, tidak ada yang divektorkan.

Tracing menguntungkan gambar yang sejak awal memang digambar sebagai bentuk. Logo yang diekspor dari aplikasi desain, ikon datar, kartun dengan garis tepi hitam, tanda tangan hasil scan, atau stensil semuanya terdiri dari beberapa warna solid yang dipisahkan tepi yang jelas. Tracer mengelompokkan setiap warna menjadi wilayah, mengikuti batasnya, dan memasang kurva halus di sepanjangnya, sehingga SVG yang dihasilkan mendekati bentuk yang semula digambar desainer. Huruf tebal pada wordmark juga mudah di-trace, karena huruf besar hanyalah bentuk berisi lainnya, dan setiap glyph menjadi garis bentuk yang bisa Anda ganti warna atau ukurannya, tetapi tidak bisa lagi diketik ulang.

Foto adalah kebalikannya. Potret atau foto produk berisi ribuan nada yang sedikit berbeda dan saling berbaur, dan format vektor tidak punya cara efisien untuk menggambarkannya. Minta tracer menghasilkan 16 warna dan Anda mendapat ilustrasi bergaya poster dengan pita warna yang terlihat; minta 64 dan Anda mendapat puluhan ribu bentuk kecil dalam file yang jauh lebih besar daripada PNG-nya, tetapi tetap tidak tampak seperti foto. Gradasi lembut, bayangan jatuh, dan efek cahaya berubah menjadi tumpukan pita tipis dengan cara yang sama. Teks kecil adalah titik masalah ketiga: pada 10–12 px, anti-aliasing membaurkan setiap huruf dengan latarnya, dan tracer tidak bisa membedakan "e" dari "o".

Resolusi lebih menentukan daripada pengaturan apa pun. Tracer memasang setiap kurva pada anak tangga piksel di sepanjang tepi, dan semakin halus anak tangganya, semakin akurat kurvanya. Jika Anda sendiri yang mengekspor PNG dari Figma, Canva, Photoshop, atau file presentasi, ekspor ulang dengan dua atau tiga kali ukuran tampilannya; logo selebar 1500–2000 px memberi tracer bahan yang lebih dari cukup. Jangan memperbesar PNG kecil dengan alat pembesar AI terlebih dahulu kecuali hasilnya tampak bersih pada zoom 100 %, karena tekstur tepi buatan akan di-trace sama setianya dengan tepi asli.

Selanjutnya, sederhanakan latarnya. PNG mendukung transparansi penuh, dan latar transparan adalah kasus termudah: setiap piksel yang sepenuhnya transparan diperlakukan sebagai ruang kosong, sehingga SVG tidak memiliki kotak putih di belakang gambar. Jika PNG punya latar solid, potong rapat di sekitar gambar terlebih dahulu; panduan kami tentang cara memotong gambar sesuai rasio membahas pembingkaian yang presisi. Latar yang ramai, misalnya logo yang difoto di kaus, sebaiknya dihapus atau ditutup dengan satu warna datar sebelum tracing.

Terakhir, kurangi jumlah warna sebelum tracer melakukannya untuk Anda. Sembunyikan bayangan, efek cahaya, dan lapisan gradasi di file sumber, dan ganti isian gradasi dengan warna tengahnya jika versi vektornya tidak membutuhkan gradasi. Hitung warna solid yang tersisa, termasuk warna garis tepi, lalu catat angkanya; itulah angka paling berguna yang akan Anda masukkan di langkah berikutnya. Jika Anda harus memilih antara JPEG dan PNG dari logo yang sama, ambil PNG, karena kompresi JPEG menambah noise di sekitar setiap tepi, seperti dijelaskan dalam JPG vs JPEG vs PNG.

Setiap tracer mengajukan tiga pertanyaan yang sama, meskipun labelnya berbeda. Yang pertama adalah berapa warna yang dipertahankan. Di konverter PNG ke SVG, Mode warna memilih antara Warna, Skala abu-abu, dan Hitam putih, dan Jumlah warna menentukan ke berapa kelompok piksel akan dipilah, dari 2 hingga 64. Samakan dengan angka yang Anda catat tadi. Jika terlalu tinggi, tracer memecah piksel tepi yang ter-anti-alias menjadi warna tipis tersendiri, yang tampak sebagai lingkaran samar di sekitar setiap bentuk; jika terlalu rendah, dua warna merek akan melebur menjadi satu.

Pertanyaan kedua adalah cara memperlakukan tepi. Penghalusan membulatkan anak tangga yang ditinggalkan piksel, dan Detail menentukan seberapa kecil sebuah bintik masih boleh menjadi bentuk. Halaman PNG dimulai dengan Detail 70 dan Penghalusan 40, yang mempertahankan sudut-sudut kecil pada hasil ekspor yang bersih. Turunkan Detail jika muncul debu dan titik-titik liar, naikkan Penghalusan jika kurva tampak bergelombang, dan atur Kurva ke Garis lurus untuk logo geometris yang tersusun dari tepi lurus atau ke Tepi piksel untuk pixel art yang ingin tetap kotak-kotak.

Pertanyaan ketiga hanya berlaku untuk tracing hitam putih: di mana garis batas antara tinta dan kertas. Ambang batas berkisar dari 1 hingga 254 dengan 128 sebagai bawaan. Piksel yang lebih gelap dari ambang batas menjadi hitam, yang lebih terang menjadi kosong. Untuk tanda tangan dengan bolpoin biru yang tipis, naikkan ke arah 160–180 agar goresan samar tetap terbawa; untuk gambar spidol tebal di kertas yang agak abu-abu, turunkan ke arah 100 agar tekstur kertas tidak berubah menjadi bintik. Ubah satu pengaturan setiap kali lalu bandingkan, karena efeknya saling memengaruhi.

Jangan berhenti di gambar mini. Buka SVG di browser dan perbesar hingga 400–800 % pada kurva yang paling rapat, misalnya lengkungan huruf atau ujung sebuah sudut lancip. Hasil tracing yang baik menampilkan busur halus dan sudut tajam di tempat desainnya memang bersudut; hasil yang lemah menampilkan goyangan, lekukan, dan ujung yang membulat. Lalu lihat file itu di editor vektor seperti Inkscape, Illustrator, atau Figma dan aktifkan tampilan outline atau node. Logo dua warna yang sederhana biasanya hanya butuh beberapa ratus node; jika milik Anda menampilkan beberapa ribu, tracer telah mengikuti noise dan path-nya akan menyulitkan saat diedit atau dipotong.

Ukuran file adalah cara cepat untuk memastikan semuanya wajar. SVG logo datar yang sudah dioptimalkan biasanya berukuran beberapa kilobyte hingga beberapa puluh kilobyte, sering lebih kecil daripada PNG asalnya. File hasil tracing yang beberapa kali lebih besar dari PNG sumber biasanya berarti warna terlalu banyak, detail terlalu tinggi, atau foto yang seharusnya tidak di-trace. Biarkan Optimalkan SVG aktif, karena opsi ini membulatkan koordinat dan menggabungkan path tanpa perubahan yang terlihat, lalu terakhir perbesar gambar ke ukuran poster dan perkecil ke ukuran favicon untuk memastikan keduanya tetap terbaca dengan baik.

Pilihan desktop gratis adalah Inkscape. Impor PNG, pilih gambarnya, lalu buka Path > Trace Bitmap (Shift+Alt+B). Mode pindai tunggal seperti Brightness cutoff menghasilkan satu path hitam, cocok untuk gambar garis; mode pindai ganda men-trace sejumlah warna atau tingkat abu-abu tertentu sebagai lapisan bertumpuk. Tracing hitam putih Inkscape dibangun di atas Potrace, pustaka tracing yang dirilis Peter Selinger pada 2001. Potrace sendiri adalah program baris perintah yang membaca PBM, PGM, PPM, atau BMP alih-alih PNG, hanya menangani gambar dua warna, dan menulis SVG, PDF, EPS, atau DXF, sehingga cocok untuk memproses banyak scan sekaligus lewat skrip.

Di Adobe Illustrator, Image Trace menggantikan Live Trace yang lebih lama sejak Illustrator CS6. Tempatkan PNG, buka Window > Image Trace, dan mulai dari preset seperti Black and White Logo, 3 Colors, atau 16 Colors, lalu sesuaikan Paths, Corners, dan Noise di bagian lanjutan. Hasil tracing tetap "hidup" sampai Anda mengklik Expand, yang mengubahnya menjadi path biasa yang bisa diedit. Jika Anda tidak memasang kedua program itu, konverter browser menjalankan proses yang sama, yaitu mengurangi warna, menemukan tepi, lalu memasang kurva; konverter gambar ke SVG juga menerima JPG, WebP, dan HEIC serta bisa menulis EPS, PDF, atau DXF sebagai pengganti SVG.

Di web, SVG telah menjadi Rekomendasi W3C sejak 2001 dan setiap browser saat ini menampilkannya di tag <img>, sebagai latar CSS, atau langsung di dalam HTML, tempat warnanya bahkan bisa berubah saat kursor diarahkan. Logo hasil tracing biasanya menggantikan beberapa ukuran PNG untuk layar retina dengan satu file kecil. Untuk mesin pemotong, SVG adalah format yang diharapkan Cricut Design Space dan Silhouette Studio: setiap bentuk hasil tracing menjadi jalur potong, dan tracing multiwarna tiba sebagai lapisan terpisah yang bisa Anda potong dari vinil berwarna berbeda. Laser cutter dan perangkat lunak CNC biasanya lebih menyukai DXF, yang dihasilkan PNG ke DXF dengan pengaturan tracing yang sama.

Percetakan meminta gambar vektor karena mesin cetak, digitizer bordir, atau pemotong papan reklame membutuhkan tepi, bukan piksel, dan SVG hasil tracing sering kali sudah memenuhi syarat itu untuk stiker, kaus, atau spanduk. Namun, hasilnya tetap perkiraan: kurvanya adalah tebakan yang dipaskan, warnanya dirata-rata dari piksel, dan teksnya diubah menjadi garis bentuk. Jadi, sebelum men-trace logo perusahaan, tanyakan kepada pembuatnya. Desainer atau agensi hampir selalu menyimpan file AI, EPS, PDF, atau SVG asli dengan kurva persis, warna bernama, dan font, dan mengirimkannya hanya butuh semenit. Tracing adalah alat yang tepat ketika file asli itu hilang, ketika logo hanya tersisa di kop surat hasil scan, atau ketika gambar itu adalah karya Anda sendiri.