Cara Mengonversi SVG ke PNG (Dan Kapan Anda Harus Melakukannya)

SVG sangat ideal untuk web, namun banyak platform tidak menerimanya: jejaring sosial, klien email, dan banyak layanan cetak semuanya menginginkan gambar raster sebagai gantinya. Mengonversi SVG ke PNG hanya memakan waktu sebentar, dan jika Anda memilih ukuran ekspor yang tepat, hasilnya akan sama tajam dengan aslinya. Satu catatan penting: PNG tidak dapat dikembalikan ke SVG secara utuh, jadi simpanlah file asli Anda. Jika Anda sudah mengetahui kebutuhan Anda, langsung buka konverter SVG ke PNG; jika belum, panduan ini membahas kapan harus mengonversi, ukuran piksel apa yang harus diekspor untuk web, retina, dan cetak, serta cara mempertahankan latar belakang transparan Anda tetap utuh.

SVG vs PNG dalam satu menit

SVG adalah format vektor: sekumpulan instruksi menggambar (jalur dan bentuk) yang tampil tajam pada ukuran apa pun, mulai dari 16px hingga 16.000px, dan tetap berukuran kecil untuk logo, ikon, dan seni geometris. File ini dapat diedit menggunakan editor teks dan bahkan mendukung animasi.

PNG adalah format raster: grid piksel yang tetap. Tajam pada ukuran aslinya, namun menjadi buram saat diperbesar. Format ini unggul dalam menampilkan gradien, bayangan, dan detail fotografi, serta dirender secara konsisten di semua perangkat.

Kesalahpahaman yang paling sering terjadi: mengonversi SVG ke PNG tidak "kehilangan" kualitas saat proses ekspor. Piksel dihasilkan dari perhitungan matematika vektor, sehingga ekspor dengan ukuran yang tepat akan sempurna secara piksel. Biaya sebenarnya adalah bahwa PNG terkunci pada satu resolusi selamanya.

Aturan praktis: pertahankan SVG sebagai sumber kebenaran utama, dan ekspor PNG setiap kali tujuan memerlukan format tersebut.

Kapan Anda harus mengonversi SVG ke PNG

Anda melakukan konversi ketika tujuan akhir tidak dapat menangani SVG, bukan karena PNG dianggap lebih baik. Dalam praktiknya, situasi berikut sering muncul:

• Media sosial. Instagram, X/Twitter, Facebook, dan LinkedIn tidak menerima unggahan SVG. Konversikan ke PNG atau JPG sebelum mempostingnya.
• Email. Sebagian besar klien email memiliki dukungan SVG yang terbatas atau tidak ada sama sekali. Gunakan PNG untuk gambar buletin dan tanda tangan email.
• Favicon dan ikon aplikasi. Peramban modern menerima favicon SVG, namun ikon sentuh Apple dan peramban lama masih memerlukan versi PNG. Panduan kami tentang cara membuat favicon dari logo membahas proses tersebut secara menyeluruh.
• Layanan cetak. Banyak pencetak produk foto (stiker, kartu nama, merchandise) menerima PNG tetapi tidak SVG.
• Perangkat lunak lama dan beberapa CMS. Alat-alat lama dan alur kerja dokumen mungkin merender SVG secara tidak benar atau sama sekali tidak; PNG adalah pilihan yang lebih aman. Beberapa versi Office dan alur kerja dokumen lama menangani SVG secara tidak konsisten.

Dan kapan tidak perlu mengonversi: di situs web. Di sana, SVG tetap tajam pada setiap ukuran, dapat diberi gaya dan dianimasikan dengan CSS, dan seringkali lebih ringan daripada PNG berukuran besar. Jika tujuan Anda hanya situs web Anda sendiri, lewati konversi sepenuhnya.

Sumber untuk poin dukungan platform di atas: ConverterUp.

Cara mengonversi SVG ke PNG di Tool Cloud (langkah demi langkah)

1. Buka halaman konverter SVG ke PNG.
2. Unggah file SVG Anda. Anda dapat mengunggah beberapa file sekaligus jika sedang mengonversi satu set file.
3. Konversi dan unduh file PNG. Untuk mendapatkan ukuran piksel yang tepat, atur bidang lebar dan tinggi (atau gunakan opsi resolusi, yang berkisar dari 72 hingga 1200) sebelum mengonversi; terdapat juga pengalih untuk mempertahankan rasio aspek. File yang diunggah akan dihapus secara otomatis setelah diproses.

Karena konverter memerlukan lebar dan tinggi yang eksplisit, Anda tidak perlu mengubah viewport SVG atau menyesuaikan ukuran apa pun di editor desain: cukup tentukan ukuran output (bagian berikutnya) dan masukkan angkanya.

Mengonversi SVG ke PNG tanpa alat web

Anda tidak memerlukan konverter daring untuk hal ini. Setiap alat desain mengekspor PNG secara langsung:

• Figma, Illustrator, Affinity, Inkscape: gunakan dialog ekspor, pilih PNG, dan atur ukuran ekspor dalam piksel (di sinilah Anda menerapkan faktor skala di bawah ini). Ini adalah opsi terbaik jika Anda memiliki file sumber, karena Anda dapat mengonversi teks menjadi outline dan menghapus persegi panjang latar belakang yang tidak diinginkan dalam satu proses.
• Dari situs web: klik kanan pada SVG (atau file SVG itu sendiri setelah dibuka di tab peramban) dan gunakan "Simpan gambar sebagai" — biasanya Anda akan mendapatkan file SVG, sehingga lakukan ekspor atau konversi dari sana.
• Solusi terakhir, tanpa alat sama sekali: buka SVG di peramban, perbesar tampilan sejauh masih tajam, dan ambil tangkapan layar. Anda akan kehilangan transparansi kecuali menggunakan alat tangkapan layar yang mendukungnya, dan tepi gambar tidak akan sebersih hasil ekspor sungguhan. Cukup baik untuk mockup cepat, namun tidak untuk produksi.

Ukuran piksel berapa yang harus Anda ekspor? (Panduan faktor skala)

Pilih ukuran ekspor Anda dengan mengalikan dimensi viewport SVG oleh faktor skala: SVG dengan viewport 200×200 yang diekspor pada 1x menghasilkan PNG 200×200px, pada 2x menghasilkan 400×400px, dan pada 3x menghasilkan 600×600px. Pada konverter, perhitungan yang sama hanyalah lebar dan tinggi yang Anda masukkan. Kemudian sesuaikan skalanya dengan tujuan penggunaan:

Untuk ikon dan logo web sehari-hari, 2x adalah titik ideal yang praktis: satu file pada 2x mencakup layar standar maupun retina, karena tetap menyusut dengan mulus pada tampilan standar. Jika spesifikasi secara harfiah meminta satu ukuran tetap, 1x dari viewport yang sesuai adalah jawabannya. Untuk cetak, gunakan 3x–4x; ini memberikan cukup piksel untuk item cetak kecil seperti stiker atau kartu nama, sedangkan cetakan berukuran besar membutuhkan piksel secara proporsional lebih banyak.

Tidak ada penalti kualitas untuk mengekspor lebih besar dari yang diperlukan, karena piksel berasal dari matematika vektor, bukan dari peregangan. Kerugian utamanya hanyalah ukuran file, yang bertambah seiring kuadrat skala: PNG 4x memiliki enam belas kali jumlah piksel dibandingkan 1x. Jadi, pilih ukuran berdasarkan tempat file akan digunakan, bukan anggapan "lebih besar lebih aman."

Mempertahankan transparansi (dan kapan harus menggunakan latar belakang putih)

Saluran alpha PNG mempertahankan transparansi SVG secara bawaan, yang merupakan hal yang Anda inginkan untuk logo dan ikon yang perlu ditempatkan pada berbagai latar belakang. Ekspor pada skala berapapun dan transparansi akan tetap terjaga tanpa perubahan.

Namun, ada jebakan klasik di sini. SVG dapat tampil seolah memiliki latar belakang putih di peramban ketika Anda sebenarnya melihat halaman di baliknya. Sebelum mengonversi, uji tampilkan pada latar belakang gelap. Jika bentuk masih terbaca dengan benar, Anda memiliki transparansi asli; jika Anda melihat kotak putih, SVG Anda memiliki persegi panjang latar belakang yang tertanam di dalamnya.

Kapan sebaiknya mengisi latar belakang sebagai gantinya: beberapa platform dan alat lama tidak menangani transparansi dengan baik. Untuk unggahan tersebut, latar belakang solid (biasanya putih) adalah pilihan yang lebih aman.

Dan jika SVG Anda memang berisi persegi panjang latar belakang yang tidak Anda inginkan, hapuslah di file desain Anda sebelum mengekspor. Itu adalah perbaikan pada file desain, bukan pengaturan konversi.

Jebakan yang merusak ekspor SVG

Sebagian besar konversi SVG ke PNG berjalan lancar. Yang tidak lancar biasanya gagal dengan salah satu dari tiga cara berikut:

• Font. Teks SVG dirender menggunakan font yang tersedia pada mesin perender, sesuai spesifikasi SVG 1.1. Jika rasterizer tidak memiliki font Anda, terjadi substitusi teks atau tata letak rusak. Solusinya sederhana: konversikan teks menjadi jalur/kontur di alat desain sebelum mengekspor SVG. Ini adalah penyebab paling umum dari pertanyaan "mengapa logo saya terlihat salah di PNG?"
• Pemotongan. Beberapa konverter memotong output sesuai viewport yang dinyatakan SVG, dan konten SVG dapat meluap di luarnya, sehingga apa pun di luar mungkin hilang. Pastikan tidak ada hal penting yang berada di luar kanvas sebelum mengekspor.
• Filter rumit. Perenderan filter dan gradien SVG dapat bervariasi antar perender. Rasterizer sisi server menanganinya berbeda dari browser; misalnya, ImageMagick mendelegasikan ke librsvg jika tersedia dan beralih ke perender internal yang lebih lemah jika tidak. Gradien itu sendiri dirasterisasi dengan mulus pada skala apa pun (MDN), tetapi rantai filter yang kompleks dapat terlihat berbeda dari pratinjau di browser Anda. Jika itu terjadi, sederhanakan efeknya atau lakukan pra-rasterisasi di alat desain Anda.

Mengonversi set ikon secara massal

Set ikon sangat bergantung pada konsistensi. Campuran ukuran, atau sebagian ikon berlatar belakang transparan dan sebagian berlatar belakang putih, akan terlihat rusak di UI produk atau aplikasi, meskipun masing-masing file individual baik-baik saja.

Jadi putuskan dua hal di awal:

1. Satu skala. 2x untuk web adalah pilihan biasa.
2. Satu kebijakan latar belakang. Biasanya transparan, kecuali tujuan tidak dapat menangani alpha.

Kemudian terapkan keduanya ke setiap file. Cara praktis: unggah beberapa SVG sekaligus ke konverter dan ekspor seluruh batch dengan lebar dan tinggi yang sama, daripada mengonversi file satu per satu dan menyimpang.

Jika Anda membutuhkan beberapa ukuran dari satu SVG sumber setelahnya (misalnya 16, 32 dan 512px), ekspor ulang dari SVG pada setiap ukuran, atau jalankan PNG melalui pengubah ukuran gambar — jangan perbesar PNG kecil, karena hasilnya hanya akan buram.

Pertanyaan umum, dijawab di satu tempat

Apakah mengonversi SVG ke PNG akan kehilangan kualitas?

Tidak, bukan jika Anda mengekspor pada ukuran yang tepat. Piksel PNG dihasilkan dari matematika vektor, jadi hasilnya sama tajam seperti SVG pada resolusi tersebut. Satu kerugian nyata adalah fleksibilitas: PNG tetap pada satu ukuran piksel selamanya.

Dapatkah saya mengonversi PNG kembali ke SVG?

Tidak secara sempurna. Pelacakan (tracing) mendekati grid piksel alih-alih mengembalikan jalur asli, sehingga hasilnya tidak pernah bebas kehilangan — logo berwarna datar dapat dilacak dengan cukup baik, sedangkan foto dan gradien dilacak dengan buruk. Simpan SVG asli Anda sebagai file master, maka Anda tidak akan memerlukan pelacakan sama sekali.

Latar belakang apa yang harus saya gunakan?

Transparan untuk apa pun yang berada di atas latar belakang yang bervariasi, yang saluran alpha PNG tangani secara asli. Hanya isi latar belakang solid (biasanya putih) ketika tujuan tidak mendukung transparansi.