Konverter SVG ke PNG: Rasterisasi Grafis Vektor pada Ukuran Apapun

Terakhir diperbarui: June 28, 2026

SVG dan PNG adalah jenis gambar yang secara fundamental berbeda. SVG adalah format vektor — ia menyimpan bentuk sebagai matematika, sehingga dapat diskalakan ke ukuran apa pun tanpa kehilangan ketajaman. PNG adalah format raster — ia menyimpan kisi piksel tetap, jadi ia memiliki satu resolusi asli dan menjadi buram saat diperbesar. Mengubah SVG menjadi PNG berarti memilih ukuran piksel, karena setelah di-rasterisasi, skalabilitasnya hilang. Panduan ini membahas cara memilih resolusi yang tepat, kapan Anda benar-benar perlu mengonversi, dan cara mengekspor PNG tajam dari SVG.

Jawaban cepat: bagaimana cara mengubah SVG ke PNG?

Buka SVG dalam konverter atau alat desain, atur dimensi piksel target (perhitungkan retina jika diperlukan — ekspor pada 2x ukuran tampilan), dan ekspor sebagai PNG. Pilih ukuran yang cukup besar untuk setiap tempat PNG akan digunakan, karena Anda tidak dapat memperbesar PNG nanti tanpa kehilangan kualitas. Gunakan SVG to PNG converter untuk ekspor tunggal cepat, atau alat desain untuk pekerjaan batch. Simpan SVG aslinya, karena ia tetap menjadi sumber yang skalabel jika Anda pernah membutuhkan ukuran berbeda.

Apa perbedaan antara SVG dan PNG?

Perbedaan vektor versus raster menjelaskan segalanya tentang mengapa dan kapan harus mengonversi.

• SVG tetap tajam pada resolusi apa pun — logo terlihat jelas di 16px dan 1600px dari satu file.
• PNG terkunci pada dimensi pikselnya — ekspor terlalu kecil dan tidak dapat diperbesar dengan bersih.
• SVG tidak dapat merepresentasikan foto; PNG bisa, itulah sebabnya foto tidak pernah berupa SVG.

Kapan Anda harus mengubah SVG ke PNG?

SVG adalah format yang lebih baik ketika lingkungan mendukungnya, jadi konversi adalah cadangan untuk kasus di mana SVG tidak berfungsi. Konversi saat Anda harus, simpan SVG jika tidak.

• Lingkungan yang tidak didukung — beberapa klien email dan alat lama tidak merender SVG.
• Persyaratan raster tertanam — sistem yang hanya menerima PNG atau JPG.
• Konten fotografi bercampur — meskipun dalam kasus itu sumber seharusnya bukan SVG.
• Caching dan kinerja — PNG prarender dapat lebih cepat disajikan daripada mengurai SVG di setiap pemuatan.

Untuk situs web, SVG biasanya lebih disukai karena tetap tajam pada layar retina dan unduhan kecil. retina display guide menjelaskan mengapa grafis vektor menghilangkan masalah resolusi sepenuhnya untuk logo dan ikon.

Bagaimana cara memilih resolusi yang tepat?

Keputusan resolusi bersifat permanen, jadi itu penting. Ekspor PNG pada ukuran terbesar yang akan pernah ditampilkan, dikalikan dengan rasio piksel perangkat untuk ketajaman retina.

• Jika PNG akan digunakan pada berbagai ukuran, ekspor pada yang terbesar dan biarkan CSS mengecilkannya.
• Untuk ketajaman retina, ekspor pada 2x (atau 3x untuk ponsel) dimensi tampilan.
• Mengekspor terlalu kecil adalah kesalahan umum yang tidak dapat dipulihkan.

Matematikanya sederhana: tentukan lebar tampilan terbesar, gandakan untuk retina, dan ekspor pada lebar piksel itu. retina display guide membahas alur kerja 2x dan 3x secara detail.

Bagaimana cara mengubah SVG ke PNG?

Beberapa metode berhasil, tergantung pada volume dan kebutuhan kontrol.

1. Konverter online — unggah SVG, atur dimensi, unduh PNG. Cepat untuk penggunaan tunggal.
2. Alat desain (Figma, Illustrator, Inkscape) — buka SVG, ekspor pada ukuran yang dipilih. Kontrol terbaik.
3. Command line (rsvg-convert, ImageMagick) — dapat di-scripting untuk pemrosesan batch.
4. Browser — buka SVG, tangkapan layar pada ukuran target.

Untuk pekerjaan batch, command line menang karena menerapkan pengaturan identik ke setiap file. Untuk logo penting tunggal, alat desain memberikan kontrol paling besar atas opsi ekspor.

Konversi batch untuk set ikon

Mengubah folder ikon SVG menjadi PNG umum dilakukan saat meluncurkan aplikasi atau sistem desain — Anda membutuhkan setiap ikon pada beberapa ukuran, dan melakukannya secara manual tidak skalabel. Pendekatan batch menerapkan pengaturan ekspor yang sama ke setiap file dalam set.

1. Atur SVG ke dalam satu folder, dengan nama yang konsisten.
2. Tentukan ukuran ekspor (misalnya, 16, 32, 64 untuk set ikon).
3. Jalankan rasterizer batch yang mengekspor setiap SVG pada setiap ukuran.
4. Verifikasi beberapa hasil untuk ketajaman dan transparansi.

Keuntungan dari rasterisasi batch adalah konsistensi — setiap ikon diekspor dengan pengaturan yang persis sama, sehingga set terlihat seragam. batch processing guide membahas alur kerja yang lebih luas untuk menerapkan operasi di seluruh folder gambar, dan setelah di-rasterisasi, PNG dapat dikompres bersama-sama untuk meminimalkan ukuran yang disajikan.

Kesalahan konversi umum

• Ekspor terlalu kecil — PNG tidak dapat diperbesar nanti. Ekspor pada 2x ukuran tampilan.
• Kehilangan SVG asli — selalu simpan; itu adalah sumber skalabel untuk ukuran di masa depan.
• Mengonversi padahal SVG sudah cukup — banyak lingkungan modern mendukung SVG secara langsung.
• Lupa transparansi — PNG mendukung alpha; pastikan ekspor mempertahankan hal itu jika diperlukan.
• Mencampur vektor dan raster — jika sumber memiliki foto tertanam, hasilnya adalah hibrida yang kehilangan keuntungan SVG.

Kapan harus menyimpan SVG alih-alih mengonversi

Default terkuat adalah menyimpan SVG dan hanya mengonversi ketika dipaksa. SVG menyediakan satu file yang tajam di setiap layar, unduhan kecil, dan tetap dapat diedit. PNG masuk akal ketika lingkungan menolak SVG, ketika Anda membutuhkan raster tetap untuk persyaratan sistem, atau ketika kinerja menuntut file prarender yang dapat di-cache oleh browser tanpa mengurai.

Mengonversi karena kenyamanan daripada kebutuhan hanya membuang skalabilitas yang membuat SVG menjadi pilihan yang tepat sejak awal. Untuk spesifikasi teknis, W3C SVG standard mendefinisikan apa yang dapat diekspresikan oleh SVG, dan PNG specification mendokumentasikan format raster yang dikonversinya. Cocokkan format dengan kendala — dan ketika tidak ada kendala yang memaksa PNG, biarkan SVG melakukan tugasnya.

Pertanyaan yang sering diajukan

Apa perbedaan antara SVG dan PNG?

SVG adalah format vektor (bentuk dijelaskan secara matematis, independen resolusi); PNG adalah raster (kisi piksel). SVG diskalakan tanpa kehilangan ketajaman; PNG tetap pada dimensi pikselnya. Konversi SVG ke PNG ketika Anda membutuhkan gambar raster tetap.

Kapan saya harus mengubah SVG ke PNG?

Ketika target tidak mendukung SVG (beberapa klien email, perangkat lunak lama), ketika Anda membutuhkan raster ukuran tetap, atau ketika SVG memiliki efek kompleks yang dirender secara tidak konsisten. Untuk web, sajikan SVG secara langsung di tempat yang didukung.

Bagaimana cara memilih resolusi yang tepat?

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 retina.

Bisakah saya mengubah batch SVG ke PNG?

Ya — ImageMagick (magick mogrify), rsvg-convert, atau browser headless menangani folder SVG. Untuk set ikon, skrip merender setiap SVG pada setiap ukuran yang Anda butuhkan dalam satu kali jalan. Lihat SVG to PNG guide.

Apakah SVG mendukung transparansi?

Ya — SVG adalah vektor dan mendukung transparansi secara asli, jadi SVG dengan area transparan di-rasterisasi menjadi PNG transparan. Ini adalah salah satu alasan mengapa SVG cocok untuk logo dan ikon. JPEG tidak akan mempertahankan transparansi.

Apakah mengubah SVG ke PNG menghilangkan kualitas?

Tidak — Anda merasterisasi vektor pada resolusi apa pun yang Anda pilih, jadi PNG sehalus ukuran yang Anda render. Kehilangan kualitas hanya akan datang dari rendering pada resolusi yang terlalu rendah. Render pada 2x ukuran tampilan untuk ketajaman di layar retina, dan PNG tidak dapat dibedakan dari raster asli pada ukuran itu.

Bisakah saya mengubah SVG ke PNG pada ukuran apa pun?

Ya — karena SVG adalah vektor dan independen resolusi, Anda merasterisasikannya pada ukuran piksel apa pun yang Anda butuhkan, mulai dari ikon 16px hingga spanduk 4000px, tanpa kehilangan kualitas. Itu adalah keuntungan utama dibandingkan format raster. Render pada 2x ukuran tampilan untuk ketajaman di layar retina. SVG itu sendiri tidak pernah kehilangan ketajaman; hanya PNG yang di-rasterisasi yang tetap pada ukuran ekspornya.