Ubah SVG ke PNG

Menetapkan resolusi yang tadinya tidak pernah ditetapkan

SVG tidak punya piksel dan tidak punya ukuran. Ia adalah sekumpulan instruksi menggambar — path ini, isian itu, kurva ini — itulah sebabnya ia tetap tajam di perbesaran berapa pun dan mengapa logo sebaiknya tetap dalam bentuk ini selama mungkin. Rasterisasi mengunci satu ukuran untuk selamanya. Jadi pilih ukuran untuk tempat terbesar gambar itu akan tampil, dan ingat bahwa layar dengan kepadatan dua atau tiga kali lipat butuh piksel dua atau tiga kali lipat: ikon yang ditampilkan pada 64 poin butuh 192 piksel agar terlihat pas di ponsel modern.

Teks adalah bagian yang paling sering bermasalah, dan alasannya layak dipahami. SVG berkata “tulis teks ini dengan Helvetica Neue”; jika perangkat yang merendernya tidak punya Helvetica Neue, font lain dipakai sebagai gantinya dan tata letaknya bergeser — judul yang tadinya pas di kotaknya kini meluap. Web font yang dirujuk lewat URL sama sekali tidak dimuat di sini, karena SVG yang dirender sebagai gambar sengaja diisolasi dan tidak bisa menjangkau jaringan. Solusinya adalah yang akhirnya dipelajari setiap desainer: ubah teks menjadi outline sebelum mengekspor, sehingga bentuk hurufnya menjadi path yang sama sekali tidak butuh font.

Isolasi yang sama menjelaskan kejutan lainnya. Bitmap yang ditautkan — elemen image yang menunjuk ke sebuah .png di suatu tempat — tidak dirender sama sekali. Script tidak berjalan, jadi SVG yang menggambar dirinya lewat JavaScript keluar kosong atau setengah jadi. Animasi deklaratif dirender dalam keadaan awalnya, yaitu gambar diam dari frame pertama. Semua yang mandiri berfungsi sempurna: gradien, filter, clipping path, mask, gambar data URI tertanam, dan efek blur semuanya dirender sesuai gambarnya.

PNG adalah tujuan yang tepat untuk ini, sedangkan JPEG tidak. Karya vektor berupa warna rata dan tepi tegas, persis yang dikompres dengan baik oleh PNG dan dirusak oleh JPEG — setiap tepi tajam di JPEG mendapat lingkaran cahaya. Transparansi terbawa sebagai kanal alfa sungguhan, jadi logo yang diekspor di ukuran yang tepat bisa ditempatkan di background apa pun. Jika SVG sama sekali tidak mencantumkan dimensi, hanya viewBox, rasio aspeknya diambil dari situ dan ukurannya bebas Anda tentukan.

Jika Anda butuh hal lain

resvg dan rsvg-convert merender SVG dari command line dengan koleksi font sungguhan, sehingga teks tampil dengan jenis huruf yang dimaksud, bukan pengganti — rsvg-convert -w 512 in.svg -o out.png sudah merupakan perintah lengkapnya. Inkscape --export-type=png --export-dpi=300 adalah implementasi spesifikasi paling lengkap yang ada, dan menangani filter serta blend mode yang hanya didekati oleh renderer yang lebih ringan.

Sebelum merasterisasi, periksa dulu apakah memang ada yang butuh PNG. Semua browser sudah menampilkan SVG secara native selama lebih dari satu dekade, dan untuk logo atau ikon di situs web, SVG lebih kecil, tajam tanpa batas, dan bisa diberi gaya dengan CSS. Kasus yang benar-benar butuh piksel lebih sempit dari yang dikira orang: favicon, gambar pratinjau media sosial, email, aset app store, dan software yang tidak bisa membaca vektor.