Mengganti nama file bukan berarti mengonversi

Mengganti nama file dari logo.png jadi logo.svg tidak mengubah isinya. Isinya tetap PNG, jadi program yang mengharapkan kode SVG tidak akan menemukannya.

SVG yang hanya membawa PNG di dalam elemen <image> juga bukan vektor. File itu terbuka seperti SVG, tapi gambarnya tetap berupa grid piksel: buram saat diperbesar, dan editor vektor atau mesin potong tidak bisa memilih satu bentuk pun di dalamnya. Konversi yang sebenarnya melakukan tracing pada gambar, membangun ulang setiap area warna sebagai path tertutup. Cara membedakan vektor asli dari PNG yang dibungkus.

Ubah PNG ke SVG dengan png2svg.art

Tiga langkah: gambar, kaca pembesar untuk pratinjau, dan unduhan

  1. Unggah PNG, JPG, WebP, atau HEIC hingga 25 MB di konverter. Gambar yang sisi panjangnya lebih dari 2048 px diperkecil ke ukuran itu sebelum tracing.
  2. Pilih preset: Standar (mulai dari 8 warna), Cricut / Vinyl (mulai dari 4 warna, menghapus latar, dan menggabungkan bentuk yang terlalu sempit untuk dipotong), Line art / Stensil (selalu 2 nada), atau Artwork detail (mulai dari 16 warna).
  3. Atur Warna, hingga (2 sampai 24) sesuai jumlah warna yang terlihat. Ini batas atas: artwork flat hanya memakai warna yang memang ada di dalamnya.
  4. Biarkan Kurva halus tetap aktif. Aktifkan Hapus latar belakang kalau gambarnya ada di atas latar polos yang tidak kamu mau di SVG.
  5. Cek seluruh hasilnya di pratinjau, dengan watermark dan gratis tanpa daftar (5 pratinjau per hari sebagai tamu). Ubah pengaturan dan lakukan tracing ulang sampai hasilnya pas.
  6. Buka SVG bersihnya seharga 1 kredit (3 kredit gratis dengan akun; masuknya pakai Google), lalu unduh atau buka di editor SVG.

SVG-nya dikelompokkan per objek: latar (kalau gambarnya punya latar) dan setiap objek jadi grup sendiri, dan di dalam sebuah objek setiap bentuk adalah path berisi warna tersendiri, bersarang sesuai bentuk yang mengelilinginya. Jadi di editor kamu bisa menyembunyikan, memindahkan, atau menghapus satu objek, atau satu bagiannya. Atur Layer ke Per warna di Pengaturan untuk susunan lama, yaitu satu path per warna. Area transparan pada PNG atau WebP tetap transparan, dan setiap hasil dicek agar hanya berisi path vektor, tanpa bitmap yang disisipkan.

Stiker corgi sebagai PNG dan sebagai SVG hasil tracing, berdampingan

Salah satu gambar contoh kami sebagai PNG (kiri) dan SVG yang di-tracing png2svg.art darinya (kanan): 7 warna dalam 33 path, dengan pinggiran stiker putih tetap ada.

Ubah PNG ke SVG di Inkscape

Inkscape adalah editor vektor desktop yang gratis dan open-source. Alat Trace Bitmap-nya bekerja seperti ini:

  1. Buka PNG-nya, atau masukkan lewat File > Import, lalu pilih dengan Selector tool.
  2. Pilih Path > Trace Bitmap (Shift+Alt+B).
  3. Untuk siluet satu warna, pilih Single scan dengan Brightness cutoff. Untuk tracing berwarna, pilih Multiple scans dengan Colors lalu atur jumlah scan; mode ini juga punya opsi Remove background. Multiple scans membuat objek terpisah untuk setiap scan.
  4. Klik Update untuk melihat pratinjau hasilnya, lalu Apply untuk membuat path-nya.
  5. Hasil tracing diletakkan di atas bitmap. Geser ke samping dengan Selector tool, cek, lalu hapus bitmap-nya.
  6. Simpan lewat File > Save As… dan pilih Plain SVG, yang tidak menyertakan data edit khusus Inkscape.

Ubah PNG ke SVG di Adobe Illustrator

Illustrator adalah software berbayar dari Adobe. Fitur Image Trace-nya bekerja seperti ini:

  1. Pilih File > Place untuk memasukkan PNG ke dokumen, lalu pilih gambarnya.
  2. Buka Window > Image Trace.
  3. Pilih preset, misalnya salah satu preset jumlah warna atau Black and White Logo. Untuk tracing hitam putih, Ignore White tidak menyertakan area putih di hasilnya.
  4. Klik Expand di panel Control atau Properties. Langkah ini mengubah hasil tracing jadi path yang bisa diedit, dalam satu grup; setelah di-expand, opsi tracing tidak bisa diubah lagi.
  5. Pilih File > Export > Export As… lalu pilih SVG sebagai formatnya.

Kalau Expand dilewati, hasil tracing tetap berupa objek tracing, bukan path biasa. Jadi lakukan expand sebelum mengekspor.

Ubah PNG jadi garis potong di Cricut Design Space

Kalau tujuannya hanya memotong dengan mesin Cricut, Design Space bisa langsung memakai PNG-nya:

  1. Pilih Upload lalu buka PNG atau JPG-nya.
  2. Hapus latarnya dengan alat Select dan Erase.
  3. Pilih Single Layer untuk potongan satu warna, atau Flat Graphic untuk Print Then Cut, lalu beri nama gambarnya dan unggah.

Cricut sesekali mengganti nama opsi-opsi ini, jadi label di layarmu mungkin sedikit berbeda. Mengubah gambar flat jadi beberapa layer warna dengan Convert to Layers butuh langganan Cricut Access. Hasil tracing png2svg.art, yang dikelompokkan per objek dengan setiap bentuk sebagai path tersendiri, terunggah sebagai gambar bergrup yang layer-nya bisa kamu pisahkan: lihat PNG ke SVG untuk Cricut dan Silhouette.

Cara mana yang dipakai

Cara Cocok saat Perlu diingat
png2svg.art Logo multiwarna dan gambar flat, di-tracing online tanpa instal Pratinjau ber-watermark gratis; SVG bersih seharga 1 kredit
Inkscape Kamu mau alat desktop gratis, dan ingin mengatur tracing atau mengedit node Pengaturannya lebih banyak untuk dipelajari
Adobe Illustrator Kamu sudah memakainya Expand hasil tracing sebelum mengekspor
Cricut Design Space Tujuannya hanya potongan satu warna atau Print Then Cut Kamu mendapat garis potong di dalam Design Space, bukan file SVG

Pertanyaan

Apakah latar transparan tetap terjaga setelah konversi?

Di png2svg.art, ya untuk PNG dan WebP: hanya piksel dengan opasitas lebih dari setengah yang di-tracing, jadi area transparan tetap transparan dan SVG-nya tidak punya kotak latar. JPG tidak punya transparansi; aktifkan Hapus latar belakang agar latar polosnya tidak ikut. Selengkapnya di Apakah PNG ke SVG mempertahankan latar transparan?

Apakah warnanya bisa dipertahankan?

Hingga 24 warna datar, dikelompokkan per objek, dengan setiap bentuk sebagai path tersendiri. Bayangan dan gradasi disederhanakan jadi pita warna datar. Berapa banyak warna yang sebaiknya dimiliki SVG hasil tracing.

Bisakah PNG diubah ke SVG tanpa kehilangan kualitas?

Tracing menggambar ulang gambarnya, bukan mengonversinya tanpa kehilangan apa pun. Logo dan ikon flat hasilnya sangat mirip dengan aslinya dan setelah itu bisa diperbesar tanpa buram. Foto dan gradasi kehilangan detail, karena disederhanakan jadi maksimal 24 warna datar. Tracing tidak bisa menambah detail yang memang tidak ada di PNG berukuran kecil.

Apakah gratis?

Di png2svg.art, pratinjau ber-watermark gratis tanpa daftar, dan SVG bersih seharga 1 kredit (3 kredit gratis dengan akun). Inkscape adalah software gratis; Illustrator berbayar.