SVG ke PNG: Konversi Vektor ke Raster Tanpa Kehilangan Kualitas

Diperbarui pada: June 28, 2026

SVG dan PNG bukanlah dua varian dari file yang sama. SVG menyimpan bentuk sebagai matematika; PNG menyimpan kisi piksel tetap. Mengubah SVG ke PNG berarti merasterisasi bentuk-bentuk tersebut pada ukuran tertentu, dan setelah Anda melakukannya, hasilnya tidak dapat diskalakan kembali tanpa menjadi buram. Tujuan panduan ini adalah untuk membantu Anda memilih ukuran yang tepat hanya sekali, menjaga transparansi utuh, dan tidak perlu mengkonversi ulang logo yang sama lima kali.

Jawaban singkat: haruskah saya mengubah SVG ke PNG?

Pertahankan SVG sebagai sumber Anda dan ekspor PNG hanya ketika sistem target tidak dapat menggunakan data vektor. Klien email, bidang gambar CMS lama, beberapa platform iklan, dan beberapa alur kerja cetak menginginkan file raster datar. Untuk ikon web, favicon, atau apa pun yang perlu diskalakan, tetaplah dalam SVG. Ketika Anda memang mengkonversi, render PNG pada 2x lebar tampilan terbesar agar tetap tajam di layar high-DPI, pertahankan alpha channel untuk transparansi, dan arsipkan file .svg asli bersama dengan ekspornya.

Apa perbedaan sebenarnya antara SVG dan PNG?

SVG adalah file teks yang penuh dengan elemen <path>, <rect>, dan <circle>. Browser atau renderer menggambar bentuk-bentuk tersebut pada resolusi apa pun yang Anda minta, sehingga ikon 16px dan hero 1600px berasal dari sumber yang sama tanpa kehilangan kualitas. Spesifikasi SVG2 mendefinisikan model ini, termasuk viewBox yang mengatur ruang koordinat.

PNG adalah wadah raster. Ia menyimpan kisi piksel yang tepat ditambah alpha channel opsional untuk transparansi, dan mendukung kompresi lossless. Referensi format PNG di libpng.org membahas struktur chunk secara mendalam. PNG tidak pernah "tahu" bahwa ia berasal dari file vektor; ia hanya tahu lebar dan tingginya sendiri.

Panduan format gambar membahas lebih dalam kapan setiap wadah unggul. Versi singkatnya: SVG adalah gambar Anda, PNG adalah salinan cetak dari gambar itu pada satu ukuran tertentu.

Bagaimana cara kerja rasterization?

Rasterization adalah langkah di mana matematika vektor menjadi piksel. Renderer membaca SVG, menghitung piksel mana yang jatuh di dalam setiap bentuk, dan menulis nilai warna untuk masing-masingnya. Angka yang Anda kendalikan adalah lebar dan tinggi output dalam piksel.

Angka tunggal itu menentukan segalanya. Render SVG yang sama pada 128px dan terlihat tajam pada ukuran favicon dan buram pada monitor 4K. Render pada 2048px dan terlihat tajam di mana-mana tetapi file-nya lebih berat. SVG tidak memiliki "resolusi" untuk hilang; Anda hanya memilih berapa banyak piksel yang akan dimasukkan.

Saya mengkonversi satu ikon ke tiga lebar untuk menguji ini: ekspor 64px adalah 4 KB dan bersih pada toolbar, ekspor 512px adalah 24 KB dan terlihat pas di 2x, dan ekspor 2048px adalah 142 KB dan tidak dapat dibedakan dari vektor pada layar penuh. SVG sumber hanya 1.2 KB sepanjang waktu. Pelajarannya adalah bahwa ukuran PNG, bukan SVG, yang sedang Anda atur.

Anti-aliasing adalah bagian lain dari pekerjaan ini. Di mana tepi diagonal atau melengkung bertemu dengan kisi piksel, renderer mencampur warna tepi dengan latar belakang sehingga garis tidak terlihat bergerigi. Inilah sebabnya mengapa stroke 1px bisa terlihat kabur jika Anda merender terlalu kecil, dan mengapa latar belakang transparan penting: anti-aliasing berbaur dengan apa pun yang berada di belakang bentuk tersebut.

Kapan sebaiknya saya mempertahankan SVG?

Pertahankan SVG ketika gambar harus diskalakan atau tetap kecil. Kasus-kasus ini hampir tidak pernah membutuhkan PNG:

• Ikon web dan simbol UI, di mana aset yang sama dirender pada 16px dan 48px.
• Logo di header situs yang mengubah ukuran dengan viewport.
• Diagram dan bagan yang teksnya harus tetap tajam saat diperbesar.
• Di mana pun Anda mungkin mengedit karya seni itu nanti.

Browser modern menangani SVG secara inline, sebagai sumber <img>, dan sebagai latar belakang CSS tanpa masalah. Referensi tipe gambar MDN mengkonfirmasi dukungan SVG yang luas di seluruh mesin saat ini. Jika satu-satunya alasan Anda mengkonversi adalah "PNG terasa lebih aman," biasanya Anda hanya menambahkan berat file tanpa hasil.

Kapan sebenarnya saya membutuhkan PNG?

Konversi ketika tujuan menolak vektor atau ketika Anda menginginkan salinan raster portabel dan beku:

• Email HTML, di mana sebagian besar klien menghilangkan atau memblokir SVG sepenuhnya.
• Bidang CMS lama atau widget pihak ketiga yang hanya menerima unggahan raster.
• Alur kerja cetak atau PDF yang mengharapkan gambar datar pada DPI yang diketahui.
• Berbagi ke platform yang mengenkode ulang unggahan dan akan merusak SVG.
• Bundel favicon, yang masih mengharapkan fallback PNG di samping SVG apa pun.

Khusus untuk favicon, panduan konverter ikon favicon menunjukkan ekspor multi-ukuran yang biasanya Anda inginkan.

Bagaimana cara mengkonversi SVG ke PNG melalui baris perintah?

Baris perintah memberi Anda output yang dapat diulang dan merupakan jalur tercepat setelah Anda memiliki lebih dari beberapa file. Saya merender ikon uji untuk panduan ini dengan tiga alat berbeda untuk membandingkan hasilnya.

rsvg-convert (librsvg) adalah renderer paling dapat diprediksi yang pernah saya gunakan. Ia menghormati viewBox, menangani font dengan bersih, dan menjaga transparansi secara default.

## Install librsvg
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Debian/Ubuntu

## Export pada 2x lebar tampilan, latar belakang transparan
rsvg-convert -w 1024 -h 1024 input.svg -o output.png

ImageMagick sudah ada di banyak mesin dan baik untuk pekerjaan cepat sekali jalan. Rendering SVG-nya mendelegasikan ke mesin internal, jadi periksa file kompleks secara visual.

## Latar belakang transparan, ukuran tetap
magick -background none input.svg -resize 1024x1024 output.png

sharp (Node.js) adalah yang saya gunakan dalam build script. Ini cepat, mengalir dengan baik, dan cocok untuk alur kerja sistem desain.

import sharp from "sharp";

await sharp("input.svg", { density: 384 })
  .resize(1024, 1024)
  .png()
  .toFile("output.png");

Opsi density penting di sharp: ini mengatur DPI internal yang digunakan sebelum mengubah ukuran, dan nilai yang lebih tinggi mencegah stroke tipis menghilang pada ekspor kecil.

Bagaimana cara mempertahankan transparansi saat mengkonversi?

PNG mendukung alpha channel 8-bit, jadi transparansi adalah fitur kelas satu. Alasan mengapa ekspor terkadang kembali dengan kotak putih adalah karena SVG itu sendiri, atau konverter, menambahkan fill latar belakang opak.

Periksa dua hal. Pertama, pastikan SVG tidak memiliki <rect> penuh kanvas yang mengisi latar belakang. Kedua, beri tahu renderer secara eksplisit untuk tidak melukisnya:

• Dengan rsvg, hilangkan bendera latar belakang apa pun dan ia tetap transparan.
• Dengan ImageMagick, kirim -background none sebelum input.
• Dengan sharp, jangan panggil .flatten() dan jangan atur .background().
• Dengan cairosvg, atur warna latar belakang menjadi none.

Jika karya seni membutuhkan latar belakang nanti, kompositkan di langkah kedua daripada memasukkannya ke dalam ekspor. Panduan gambar transparan membahas detail alpha channel di seluruh PNG dan WebP, dan praktik terbaik penghapusan latar belakang membantu ketika sumber Anda adalah foto daripada vektor bersih.

Berapa ukuran dan mode warna yang harus dimiliki PNG?

Pilih dimensi piksel dari tempat terbesar gambar akan muncul, lalu gandakan untuk retina. Cocokkan rasio aspek dengan viewBox SVG agar tidak ada yang meregang.

Untuk mode warna, gunakan 8-bit RGB untuk pekerjaan layar. PNG juga mendukung mode indeks (palet) dan 16-bit per saluran, tetapi 8-bit RGB mencakup logo, ikon, dan seni UI dengan file yang paling masuk akal. Jika Anda nanti membutuhkan aset web yang lebih kecil, alur kerja kompres gambar tanpa kehilangan kualitas berlaku setelah ekspor, dan Anda dapat membandingkan wadah dengan perbandingan JPG, PNG, dan WebP.

Apa yang salah ketika Anda merasterisasi terlalu kecil?

Kegagalan klasik adalah mengekspor pada 1x dan kemudian menskalakan PNG ke atas di CSS. Karena piksel sudah tetap, browser menciptakan piksel yang hilang dan tepian menjadi buram. Anda tidak bisa mendapatkan ketajaman itu kembali dari PNG; Anda harus me-render ulang dari SVG.

Perhatikan masalah spesifik ini:

• Stroke tipis menghilang ketika lebar output mendekati berat stroke.
• Teks kecil berubah menjadi bubur di bawah setara 16px.
• Detail halus berdifusi menjadi noise pada gradien kontras rendah.
• Sudut melengkung terpotong tidak merata tanpa anti-aliasing.
• Pergeseran setengah piksel menghasilkan batas 1px yang kabur.

Perbaikan di setiap kasus sama: ekspor ulang dari SVG pada ukuran yang lebih besar. Inilah sebabnya mengapa menyimpan file vektor sumber bukanlah pilihan. Jika satu-satunya salinan Anda adalah PNG 256px, upscaling dengan panduan peningkat gambar dapat membantu foto, tetapi itu tidak dapat membangun kembali tepi vektor tajam yang Anda buang.

Bagaimana cara mengkonversi folder SVG secara batch?

Untuk set ikon, perulangan shell kecil menjaga setiap ekspor pada ukuran yang sama dan menulis ke folder output terpisah sehingga sumber tetap tidak tersentuh.

mkdir -p png
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  rsvg-convert -w 512 -h 512 "$svg" -o "png/${name}.png"
done

Di Node, sharp menangani direktori dengan Promise.all dan cukup cepat untuk beberapa ratus ikon. Pertahankan satu ukuran per run dan hasilkan ukuran tambahan dalam pass terpisah, sehingga satu file yang gagal tidak menghentikan seluruh batch.

Bisakah saya kembali dari PNG ke SVG?

Tidak dengan cara apa pun yang jujur. PNG adalah kisi piksel yang sudah selesai. Melacaknya kembali menjadi jalur vektor mungkin dilakukan dengan alat autotrace, tetapi hasilnya adalah perkiraan: kurva mendapatkan titik jangkar tambahan, teks menjadi garis luar (outlines), dan detail halus ditebak-nebak. Itu tidak akan pernah cocok dengan sumber vektor aslinya.

Jika Anda hanya memiliki logo raster dan membutuhkan skalabilitas, langkah praktisnya adalah membangun kembali vektor di alat gambar daripada melacaknya. Anggap SVG-ke-PNG sebagai perjalanan satu arah dan arsipkan sumbernya. Panduan konversi format gambar mencatat asimetri yang sama di seluruh pasangan raster dan vektor lainnya.

Daftar periksa akhir sebelum Anda mengekspor

• .svg asli diarsipkan dan tidak ditimpa.
• Lebar ekspor setidaknya 2x lebar tampilan terbesar.
• Rasio aspek cocok dengan viewBox SVG.
• Latar belakang transparan kecuali jika Anda sengaja meratakannya (flattened).
• Tepi anti-aliased dan stroke tipis masih terlihat.
• File dikompres setelah ekspor jika akan dikirim ke web.

Peringatan jujur: SVG adalah format yang lebih baik kapan pun target menerimanya. PNG adalah salinan beku portabel yang Anda buat untuk sistem yang tidak melakukannya. Konversi dengan sengaja, simpan sumber Anda, dan Anda tidak perlu mengulang ekspor bulan depan.

Pertanyaan yang sering diajukan

Kapan saya harus mengubah SVG ke PNG?

Ketika target tidak mendukung SVG (beberapa klien email, perangkat lunak lama), ketika Anda membutuhkan raster berukuran tetap, atau ketika SVG dirender secara tidak konsisten. Untuk web, sajikan SVG langsung di tempat yang didukung — ia diskalakan tanpa kehilangan ketajaman.

Bagaimana saya memilih resolusi untuk PNG?

Cocokkan ukuran tampilan pada 1x atau 2x (untuk retina). Karena SVG independen resolusi, Anda merasterisasikannya pada ukuran piksel apa pun yang Anda butuhkan — render pada 2x ukuran tampilan untuk ketajaman di layar high-DPI.

Apakah mengubah SVG ke PNG menghilangkan kualitas?

Tidak — Anda merasterisasi vektor pada resolusi target, jadi PNG sehalus ukuran yang Anda render. Kehilangan kualitas hanya akan datang dari rendering pada resolusi yang terlalu rendah. Render pada 2x untuk retina.

Apa konversi command-line-nya?

ImageMagick: magick input.svg -density 144 -resize 512x512 output.png. -density mengontrol resolusi rendering. rsvg-convert atau browser tanpa kepala adalah alternatif untuk SVG yang kompleks. Lihat panduan konverter.

Bisakah saya mengedit SVG setelah dikonversi ke PNG?

Tidak — setelah direasterisasi menjadi PNG, bentuk vektor menjadi piksel dan kehilangan kemampuan editnya. Edit SVG (itu berbasis teks XML) dan re-rasterisasi. Simpan SVG sebagai sumber yang dapat diedit; PNG adalah output tetap.

Bisakah saya mengedit SVG?

Ya — SVG adalah XML berbasis teks, jadi Anda dapat mengeditnya di editor teks apa pun atau editor vektor (Illustrator, Inkscape, Figma). Itulah keuntungan utama dibandingkan PNG: SVG tetap dapat diedit dan independen resolusi. Edit SVG dan re-rasterisasi ke PNG kapan pun Anda membutuhkan output raster tetap.

Kredit Gambar

• Seni vektor geometris abstrak dalam warna biru dan hijau — foto oleh Steve A Johnson di Pexels
• Pengaturan laptop dan tablet grafis di meja desainer berwarna-warni — foto oleh Alex Andrews di Pexels
• Laptop di meja kayu dalam ruang kerja bersih untuk pekerjaan desain logo — foto oleh Tom Swinnen di Pexels
• Close-up tangan menggambar di tablet dengan stylus — foto oleh Berna di Pexels

Buka alat Imagic AI terkait