Cara Mengubah JPG ke SVG atau PNG ke SVG

Untuk mengubah JPG ke SVG (atau PNG ke SVG), Anda menelusuri (tracing) gambarnya. Software mencari tepi di antara warna lalu menggambarnya ulang sebagai bentuk vektor. Alat tracing berbasis browser melakukannya dalam satu langkah, dan editor gratis Inkscape melakukannya lewat Path > Trace Bitmap. Tracing bekerja baik untuk logo, ikon, dan gambar garis, dan buruk untuk foto.

Apa yang terjadi saat gambar diubah ke SVG

JPG, PNG, dan SVG menyimpan gambar dengan cara yang sama sekali berbeda. JPG atau PNG adalah grid piksel berwarna. SVG menggambarkan bentuk dalam teks: "kurva dari titik ini ke titik itu, diisi biru tua." Tidak ada terjemahan langsung di antara keduanya, jadi konverter harus mencari tahu di mana letak bentuk-bentuknya.

Proses ini disebut tracing atau vektorisasi. Software mengelompokkan warna yang mirip, mengikuti garis luar setiap kelompok, lalu menghaluskannya menjadi kurva. Hasilnya adalah perkiraan gambar Anda yang tersusun dari path. Dengan sedikit warna datar dan tepi yang jelas, hasilnya bisa hampir identik dengan aslinya dan bisa diperbesar ke ukuran apa pun. Dengan gradasi, tekstur, dan detail halus, software harus banyak menyederhanakan.

Waspadai konverter yang melewatkan tracing. Sebagian alat hanya membungkus JPG atau PNG di dalam file SVG lalu menganggapnya selesai. Filenya berakhiran .svg, tetapi isinya tetap piksel yang sama dan jadi buram saat diperbesar. Jika mesin pemotong, program bordir, atau mesin laser engraving menolak "SVG" Anda, kemungkinan inilah penyebabnya. Untuk memeriksanya, buka file di editor teks. Jika Anda melihat blok panjang yang diawali data:image/png;base64 atau data:image/jpeg;base64 dan elemen path yang sedikit, berarti file itu tidak pernah ditelusuri.

Gambar mana yang bagus diubah ke SVG (dan mana yang tidak)

Kandidat yang baik:

• Logo dengan beberapa warna rata.
• Ikon dan ilustrasi sederhana.
• Gambar garis hitam putih, stempel, dan clip art.
• Tanda tangan dan tulisan tangan yang dipindai dengan ukuran layak.
• Teks dengan huruf tebal dan bersih.

Kandidat yang buruk:

• Foto orang, tempat, atau produk.
• Gambar dengan bayangan lembut, gradasi, atau blur.
• File kecil beresolusi rendah yang tepinya sudah kabur.
• JPG yang dikompres berat dengan artefak terlihat di sekitar tepinya.

Foto yang ditelusuri menjadi SVG terlihat seperti poster dari petak-petak warna datar. Filenya bahkan bisa lebih besar dari aslinya, karena berisi ribuan bentuk kecil. Untuk foto, tetap gunakan format raster seperti JPG atau WebP.

JPG atau PNG: mana sumber yang lebih baik?

PNG, jika ada pilihan. Kompresi JPG meninggalkan noda dan riak samar di sekitar tepi tajam, dan alat tracing mengubahnya menjadi tonjolan dan bintik liar. PNG dari logo yang sama punya tepi bersih dan sering berlatar transparan, sehingga hasil tracing-nya jauh lebih baik. Jika yang Anda punya hanya JPG, gunakan versi terbesar yang bisa ditemukan dan bersihkan dulu (tips di bawah). Panduan file PNG kami menjelaskan kenapa format ini menjaga tepi tetap utuh.

Cara mengubah PNG ke SVG di browser Anda

Alat PNG ke SVG menelusuri gambar PNG dan JPG dengan library open-source ImageTracer. Alat ini berjalan sepenuhnya di browser Anda, jadi logo yang sedang Anda kerjakan tidak diunggah ke mana pun.

1. Buka alatnya lalu tambahkan PNG atau JPG Anda.
2. Jalankan penelusuran dan lihat pratinjaunya.
3. Jika tepinya bergerigi atau terlalu banyak bintik liar, siapkan gambar sumber yang lebih bersih atau lebih besar lalu telusuri lagi.
4. Unduh SVG-nya.
5. Buka SVG di browser dan perbesar untuk memeriksa kurvanya sebelum Anda memakainya.

Periksa juga ukuran file. Logo yang bersih biasanya menghasilkan SVG kecil. Jika hasil unduhan jauh lebih besar dari gambar sumber, alat tracing menemukan banyak bentuk kecil, tanda bahwa sumbernya terlalu banyak noise atau detail.

Ini jalur tercepat untuk logo atau ikon yang bersih. Untuk desain yang rumit, harapkan Anda perlu merapikan hasilnya di editor vektor.

Pikirkan untuk apa SVG ini sebelum menetapkan hasil. Logo untuk situs web cukup terlihat benar di layar, jadi ketidaksempurnaan kecil jarang jadi masalah. Mesin pemotong dan plotter vinyl mengikuti setiap path persis, jadi bintik liar akan menjadi potongan kecil dan sebaiknya dihapus. Untuk cetak, pastikan warna hasil tracing sesuai warna persis yang Anda harapkan, karena alat tracing merata-ratakan warna yang berdekatan.

Cara mengubah JPG ke SVG di Inkscape

Inkscape adalah editor vektor gratis dan open-source untuk Windows, Mac, dan Linux. Fitur tracing-nya memberi kontrol lebih. Manualnya sendiri mengingatkan agar tidak mengharapkan salinan gambar yang benar-benar persis, dan itu ringkasan yang adil tentang tracing secara umum.

1. Buka Inkscape lalu impor JPG atau PNG (File > Import, atau seret ke kanvas).
2. Pilih gambarnya.
3. Pilih Path > Trace Bitmap, atau tekan Shift+Alt+B.
4. Pilih mode. Brightness cutoff membuat siluet satu warna, cocok untuk logo hitam dan tanda tangan. Centerline tracing mengubah goresan tipis menjadi garis tunggal, cocok untuk tulisan tangan. Multiple scans menelusuri beberapa warna sebagai layer terpisah.
5. Klik Apply. Jalur hasil penelusuran ditempatkan di atas gambar asli.
6. Seret hasilnya ke samping untuk membandingkan, lalu hapus bitmap aslinya.
7. Simpan dengan File > Save As dan pilih format SVG.

Multiple scans memberi lebih banyak detail warna tetapi menciptakan banyak objek bertumpuk yang perlu dirapikan. Mulailah dengan sedikit warna dan tambahkan lebih banyak hanya jika perlu.

Cara mendapatkan penelusuran yang lebih bersih

Sebagian besar kualitas berasal dari gambar masukan. Beberapa menit persiapan membuat perbedaan besar.

• Mulailah dengan versi terbesar dan tertajam yang bisa Anda temukan. Lebih banyak piksel di sepanjang setiap tepi berarti kurva lebih halus.
• Buang semua selain logo dengan alat crop, agar noda liar tidak menjadi bentuk.
• Hapus atau ratakan latar belakang. Latar putih polos atau transparan jauh lebih baik ditelusuri daripada latar bertekstur.
• Kurangi jumlah warna. Untuk logo satu warna, mengubahnya dulu menjadi hitam putih dengan alat grayscale dan menaikkan kontras membantu alat tracing menemukan tepi yang bersih.
• Hindari sumber yang sangat kecil. Logo selebar 100 piksel punya terlalu sedikit informasi tepi, dan kurvanya akan terlihat bergelombang di ukuran berapa pun.

Setelah tracing, perbesar tampilan di sudut dan teks kecil. Alat tracing cenderung membulatkan sudut tajam dan menyatukan huruf yang letaknya berdekatan. Jika itu terjadi, coba sumber yang lebih besar atau perbaiki bagian itu secara manual.

Kapan menggambar ulang, bukan menelusuri

Jika logonya penting, misalnya merek perusahaan untuk papan nama atau kaos, hasil tracing hanyalah titik awal. Desainer bisa menggambarnya ulang di editor vektor dengan hasil tracing sebagai panduan, dan menghasilkan path yang bersih dan minimal dengan warna yang tepat.

Sebelum itu semua, minta file vektor asli kepada pembuat logonya. File AI, EPS, PDF, atau SVG dari desainer selalu lebih baik daripada hasil tracing. Dan jika Anda hanya butuh gambar tajam di satu ukuran tertentu, PNG beresolusi tinggi mungkin sudah cukup tanpa konversi apa pun.

Arah sebaliknya jauh lebih sederhana, karena SVG bisa dirender ke ukuran piksel berapa pun. Panduan membuka file SVG dan menyimpannya sebagai PNG atau JPG membahasnya.

Pertanyaan yang sering diajukan