Imagyc›Artikel

Cara mengubah PNG menjadi SVG dan menggunakannya di situs

Diterbitkan 12 Oktober 2026 · 6 menit baca

Logo terlihat tajam pada ukuran kecil, tetapi pecah ketika diperbesar. Anda mengganti ekstensi menjadi .svg, lalu hasilnya tetap sama. Masalahnya ada pada isi file: perubahan nama belum mengubah piksel menjadi bentuk vektor.

Untuk mengubah PNG menjadi vektor, gambar perlu ditelusuri menjadi bentuk dan kurva. Proses ini disebut tracing atau vektorisasi. Menyimpan PNG di dalam file SVG merupakan cara pengemasan lain, tetapi tidak membuat foto tersebut menjadi vektor.

Panduan ini membantu memilih sumber yang sesuai, memeriksa hasil konversi, dan menyelesaikan masalah umum ketika SVG digunakan pada situs atau Elementor.

Apa perbedaan PNG dan SVG?

PNG menyimpan gambar sebagai susunan piksel. SVG dapat menjelaskan bentuk, garis, kurva, dan teks melalui struktur XML. Bentuk vektor dapat diperbesar tanpa mengikuti batas resolusi foto raster. SVG juga dapat memuat gambar raster di dalam elemen image.^{1, 2}

Karena itu, ekstensi SVG tidak membuktikan semua isinya berupa vektor. Logo yang benar-benar terdiri dari bentuk berbeda dari SVG yang hanya membungkus satu PNG.

Bayangkan dua file berisi simbol toko. File pertama menjelaskan lingkaran, garis atap, dan persegi. File kedua menyimpan tangkapan layar simbol yang sama. Keduanya dapat memakai ekstensi SVG, tetapi hanya bentuk vektor pada contoh pertama yang mengikuti pembesaran tanpa batas piksel raster.

Kapan PNG layak diubah menjadi SVG?

Mulailah dari tujuan penggunaan. Logo sederhana yang perlu muncul pada beberapa ukuran adalah kandidat yang berbeda dari foto produk dengan tekstur rumit.

Tabel ini merupakan saran pemilihan pekerjaan. Tidak ada jaminan bahwa setiap logo dapat dikonversi otomatis dengan hasil siap pakai.

Jika mempunyai file vektor asli dari desainer, gunakan sumber tersebut. Mengubah pratinjau PNG kembali menjadi vektor dapat menambah pekerjaan dan mengubah bentuk logo.

Cara mengonversi PNG menjadi vektor dengan alat gratis

Salah satu pilihan gratis adalah Inkscape. Dokumentasi resminya menjelaskan tracing bitmap menjadi satu atau lebih elemen path. Hasil perlu diperiksa; tracing bukan jaminan salinan sempurna.³

Alur dasarnya:

1. Simpan salinan sumber PNG.
2. Buka atau impor gambar pada Inkscape.
3. Pilih gambar yang akan ditelusuri.
4. Buka Path → Trace Bitmap.
5. Pilih pendekatan sesuai isi, misalnya gambar satu warna atau beberapa warna.
6. Buat hasil, lalu bandingkan dengan sumber.
7. Pastikan objek raster yang tidak diperlukan tidak ikut pada ekspor akhir.
8. Simpan hasil sebagai SVG dan uji tampilannya.^{3, 4}

Nama kontrol dapat berbeda menurut versi dan bahasa aplikasi. Pada tahap pemeriksaan, fokuslah pada kesesuaian bentuk, bukan sekadar keberhasilan menyimpan file.

Untuk logo, coba letakkan sumber dan hasil berdampingan pada ukuran penggunaan yang sama. Periksa ujung huruf, ruang di antara bentuk, ketebalan garis, dan posisi elemen. Perbedaan kecil pada logo dapat lebih penting daripada penghematan beberapa KB.

Jika sumber terlalu buram, cari versi yang lebih baik. Tracing foto kecil dapat menghasilkan perkiraan bentuk, tetapi tidak mengetahui garis asli yang sudah hilang.

PNG192 × 192 px · diperbesar 5×

SVG3,4 KB · 4 kontur · zoom yang sama

Cara mengetahui apakah hasilnya benar-benar vektor

Buka hasil di editor vektor. Periksa apakah Anda dapat memilih bentuk atau titik pada jalur. Jika yang terpilih hanya satu gambar bitmap, file mungkin masih berisi raster.

Pemeriksaan kode juga dapat membantu. Elemen seperti path, rect, dan circle menjelaskan bentuk. Elemen image dapat menyimpan atau merujuk gambar raster.^{1, 2}

Namun, jangan menilai hanya berdasarkan satu kata pada kode. SVG dapat menggabungkan beberapa jenis konten. Periksa bagian yang penting untuk tujuan Anda.

Contoh berikut merupakan SVG sederhana yang dibuat langsung dari bentuk, bukan hasil tracing suatu foto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80">
  <rect x="10" y="10" width="100" height="60" rx="8"
        fill="#155eef"/>
  <circle cx="60" cy="40" r="14" fill="#ffffff"/>
</svg>

Contoh ini berguna untuk memahami struktur. Jangan memakai bentuk generik sebagai pengganti logo yang harus mengikuti identitas visual tertentu.

Periksa viewBox dan ruang kosong

viewBox menentukan area koordinat SVG melalui empat nilai: posisi awal X, posisi awal Y, lebar, dan tinggi. Area tersebut dipetakan ke ruang tampilan.⁵

Jika gambar tampak kecil di dalam kotak besar, mungkin ada banyak ruang kosong pada area ekspornya. Jika tepi terpotong, periksa apakah gambar keluar dari batas area yang ditentukan.

Sebagai pengujian, letakkan SVG pada wadah dengan latar berwarna. Ini membantu melihat apakah ruang kosong berasal dari file atau margin halaman. Ubah satu bagian, lalu bandingkan kembali pada ukuran kecil dan besar.

Mengubah viewBox tanpa memahami posisi objek bisa memotong gambar. Simpan sumber sebelum memperbaiki batas ekspor.

Cara menggunakan SVG di Elementor

Elementor menyediakan dukungan untuk SVG pada kontrol ikon. Dokumentasinya menjelaskan unggahan melalui Upload SVG dan pengaktifan fitur ketika diperlukan. Nama menu mengikuti versi editor.⁶

Pada dokumentasi saat ini, pengaturan dapat ditemukan melalui Elementor → Editor → Settings → Advanced. Periksa hak akses dan kebijakan situs sebelum mengubah pengaturan unggahan. Elementor memproses SVG yang diunggah, dan sumber file yang terpercaya tetap diperlukan.⁶

Setelah memasukkan file, periksa pratinjau halaman dan halaman yang dipublikasikan. Jika pengaturan ukuran tidak bekerja, lihat dimensi atau gaya ukuran yang tertanam pada file. Ekspor tanpa gaya inline yang tidak diperlukan dapat membantu kontrol editor bekerja.⁶

Mengapa warna SVG tidak berubah di editor?

SVG dapat mempunyai warna atau gaya yang sudah ditentukan. Cara mengganti warna bergantung pada widget dan struktur file. Dokumentasi kontrol ikon Elementor menyarankan persiapan tertentu untuk fill dan stroke; jangan menganggap aturan itu berlaku otomatis pada setiap gambar SVG.⁶

SVG yang dipasang sebagai file pada img juga berbeda dari SVG inline. MDN menjelaskan bahwa metode pemasangan memengaruhi kemampuan penyuntingan melalui CSS dan JavaScript.¹

Uji kebutuhan secara terpisah: apakah hanya ukuran yang perlu berubah, atau warna tiap bagian juga perlu dikendalikan? Jika logo harus mempertahankan warna merek, ekspor yang sudah berwarna bisa lebih tepat daripada memaksakan kontrol satu warna.

Perhatikan keamanan file SVG

SVG merupakan dokumen yang dapat mempunyai perilaku berbeda menurut cara pemuatannya. Pada konteks gambar seperti img, browser membatasi JavaScript dan sumber daya eksternal. Pembatasan tersebut berbeda dari SVG yang dibuka sebagai dokumen atau ditanam melalui metode lain.⁷

Gunakan file dari sumber terpercaya dan pemeriksaan unggahan yang sesuai pada situs. Hindari menempelkan kode yang belum diperiksa hanya untuk mengatasi kegagalan unggahan. Langkah ini mempertahankan manfaat SVG tanpa mengabaikan cara file diproses.

Apakah SVG selalu lebih ringan dan lebih baik untuk SEO?

Nilai hasilnya, bukan ekstensinya saja. Jika tracing menghasilkan bentuk sangat rumit, bandingkan ukuran dan penampilan dengan sumber raster yang dioptimalkan. Foto tidak harus diubah menjadi SVG untuk memperbaiki halaman.

Gunakan panduan format gambar untuk membandingkan pilihan raster. Jika masalahnya latar foto, hapus latar belakang sebelum menentukan ekspor. Menghapus latar bukan vektorisasi.

SEO juga membutuhkan konteks. Nama seperti logo-imagyc.svg membantu pengelolaan, sedangkan teks alternatif perlu sesuai fungsi gambar. Untuk gambar informatif yang dipasang melalui img, gunakan deskripsi berguna. Gambar dekoratif dapat memakai alt="". Lihat panduan nama file dan alt text.

Periksa hasil pada halaman nyata. Panduan diagnosis gambar yang membuat situs lambat membantu membandingkan pengiriman dan tampilan. Imagyc dapat menjadi bagian dari alur persiapan gambar raster sebelum digunakan pada situs.

Pertanyaan yang sering diajukan

Apakah mengganti nama PNG menjadi SVG sudah cukup?

Tidak. Ekstensi tidak mengubah piksel menjadi kurva. Gunakan tracing, gambar ulang, atau sumber vektor asli.

Mengapa SVG hasil konversi masih pecah ketika diperbesar?

Periksa apakah PNG masih tertanam pada file. Ekstensi SVG dapat membungkus gambar raster tanpa mengubahnya menjadi vektor.

Apakah semua foto sebaiknya diubah menjadi SVG?

Tidak. Pilih proses sesuai tujuan dan bandingkan hasil. Format raster sering lebih sesuai untuk fotografi penuh detail.

Apakah SVG mendukung latar transparan?

Area yang tidak digambar dapat menampilkan latar halaman. Periksa juga apakah file menyertakan bentuk persegi atau gambar latar yang tidak diperlukan.