SVG ke PNG — saat Anda benar-benar butuh piksel (dan saat tak seharusnya)

Ada jenis frustrasi tersendiri saat punya logo sempurna tapi tak ada tempat untuk menaruhnya. SVG-nya tajam pada ukuran berapa pun, bobotnya nyaris nol, dan tampak tanpa cela di browser — lalu Anda coba menjatuhkannya ke email, atau menjadikannya gambar pratinjau sosial, atau menempelkannya ke perangkat lunak yang sedikit terlalu tua, dan ia sama sekali tak muncul. Kosong. Filenya baik-baik saja. Tempat Anda menaruhnya sekadar tak paham vektor.

Itulah seluruh alasan SVG-ke-PNG ada sebagai tugas. Bukan karena PNG lebih baik — biasanya tidak — melainkan karena sebagian besar dunia hanya bisa membaca piksel.

Vektor dan raster, singkat saja

SVG bukan gambar. Ia sekumpulan instruksi — gambar lingkaran di sini, path ini di sana, isi warna ini. Browser mengikuti instruksinya dan me-render-nya segar pada ukuran berapa pun yang Anda minta, jadi ia setajam silet pada 16 piksel maupun 16.000, dan filenya tetap mungil karena ia cuma matematika.

PNG kebalikannya. Ia kisi piksel berwarna yang tetap, ditentukan sekali, pada satu resolusi. Perbesar melebihi ukuran aslinya dan ia jadi lembut serta kotak-kotak, karena tak ada piksel lagi untuk digambar — cuma yang sudah terpanggang. Sisi baiknya, segalanya bisa membaca kisi piksel. Ia mata uang universal gambar.

Jadi mengonversi SVG ke PNG adalah menukar skalabilitas tak terbatas demi kompatibilitas universal. Apakah itu pertukaran baik sepenuhnya tergantung ke mana gambarnya pergi.

Kapan Anda benar-benar butuh PNG

Tiga kasus saat saya meraster tanpa ragu, karena vektor sekadar takkan berfungsi:

Email. Klien email tak me-render SVG — Gmail, Outlook, Apple Mail, pada dasarnya semuanya menolaknya demi alasan keamanan. Logo di tanda tangan email atau buletin harus format raster. PNG, karena Anda ingin transparansinya.

Gambar pratinjau sosial dan OG. Kartu kecil yang muncul saat Anda membagikan tautan — gambar Open Graph — harus raster berukuran tetap, biasanya 1200x630. Platform takkan me-render SVG di situ. Kalau karya sumber Anda vektor, Anda mengekspor PNG pada ukuran persis itu.

Perangkat lunak lawas atau luring. Banyak aplikasi desktop, alat presentasi, editor dokumen, dan alur kerja cetak entah tak bisa mengimpor SVG atau membuatnya berantakan. Menyerahkan PNG pada resolusi murah hati langsung berhasil, tiap kali, tanpa kejutan.

Pada ketiganya, faktor penentunya sama: tujuannya secara fisik tak bisa membaca vektor, jadi skalabilitas tak relevan. Format yang ter-render mengalahkan format yang tidak, selalu.

Satu hal yang harus tepat: resolusi

Inilah kesalahan yang paling sering saya lihat, dan saya buat sendiri di awal. Karena PNG tetap pada ukuran saat Anda mengekspornya, Anda harus mengekspornya cukup besar — dan idealnya pada ukuran persis yang akan Anda tampilkan.

Ekspor logo sebagai PNG 100x100 lalu tampilkan pada 300 piksel di layar berkepadatan tinggi, dan ia akan tampak lembut serta bergerigi. Piksel untuk mengisi ruang itu tak ada. Solusinya mudah: ekspor pada ukuran yang benar-benar akan Anda pakai, atau lebih besar, terutama untuk layar Retina dan 4K tempat Anda kerap ingin 2x ukuran nominal. Ini satu keunggulan nyata yang Anda korbankan dengan meninggalkan vektor, jadi luangkan sejenak untuk menetapkan resolusi target dengan benar.

Kapan Anda TAK seharusnya meraster

Kalau tujuannya bisa membaca SVG, jaga tetap SVG. Titik.

Di situs web Anda sendiri, ikon atau logo sebaiknya tetap vektor. Ia akan tajam di tiap layar pada tiap tingkat zoom, akan lebih kecil dari PNG setara, dan Anda takkan pernah harus mengekspor ulang versi lebih besar saat layar berkepadatan lebih tinggi muncul. Meraster di situ murni kerugian — Anda akan membuang sifat terbaik format itu demi kompatibilitas yang sudah Anda miliki.

Dan jangan meraster master Anda. SVG adalah sumber kebenaran; ia bisa menghasilkan PNG pada ukuran berapa pun, kapan pun. PNG tak bisa balik ke arah sebaliknya — Anda tak bisa memulihkan path vektor bersih dari kisi piksel. Jadi simpan SVG-nya, dan perlakukan tiap PNG sebagai ekspor sekali pakai untuk satu tempat tertentu. Prinsip yang sama seperti segala hal lain: konversikan salinan yang Anda kirim, simpan aslinya yang Anda sunting.

Bagaimana saya benar-benar melakukannya

Saat saya butuh piksel dari vektor, saya pakai konverter SVG ke PNG di sini. Ia me-render SVG di browser Anda dan menyerahkan PNG-nya, jadi tak ada yang diunggah ke mana pun — semuanya terjadi di mesin Anda. Pilih ukuran yang cocok untuk ke mana ia menuju, dapatkan PNG bersih dengan transparansi tetap utuh.

Tapi keterampilan sesungguhnya bukan konversinya. Melainkan pertanyaan yang Anda ajukan lebih dulu: apakah tempat ini membaca vektor? Kalau ya, biarkan SVG-nya dan nikmati opsi paling tajam serta paling kecil yang ada. Kalau tidak — email, kartu OG, aplikasi tua yang keras kepala — maka raster, pada ukuran yang tepat, dan jaga SVG Anda aman untuk lain kali. Buat keputusan itu dengan benar dan Anda takkan pernah lagi punya kotak kosong di tempat logo Anda seharusnya berada.