Vektor masuk, piksel keluar
File SVG tidak berisi piksel. Isinya adalah deskripsi teks tentang bentuk: lingkaran di koordinat ini, path yang melewati titik-titik ini, diisi warna ini. Itulah sebabnya logo SVG terlihat tajam di ponsel maupun di monitor 5K, dan file yang sama bisa berukuran 4 KB di ukuran tampilan berapa pun.
Banyak tempat tidak bisa memakai deskripsi itu secara langsung. Media sosial, marketplace, newsletter email, dokumen Office, sebagian besar aplikasi pesan, app store, dan banyak sistem konten membutuhkan gambar raster. Mengonversi ke PNG merender bentuk-bentuk itu pada ukuran tetap, dengan transparansi tetap utuh, sehingga hasilnya bisa dipakai di mana pun gambar diterima.
Karena penggambaran terjadi saat konversi, ukuran target tidak mengurangi kualitas. PNG yang dirender pada 3000 px langsung dari SVG akan tajam sempurna, sementara logo yang sama yang diekspor pada 300 px lalu diperbesar akan buram.
Bagaimana ukuran hasil ditentukan
Hanya ada satu pengaturan, yaitu "Lebar, px". Tinggi selalu dihitung dari proporsi SVG, jadi gambar tidak pernah tertarik.
Jika kolom dikosongkan, konverter memakai ukuran SVG itu sendiri:
- Atribut
widthdanheightpada elemen<svg>utama, jika keduanya berupa angka biasa atau nilai piksel, sepertiwidth="512" height="256". - Jika tidak,
viewBox:viewBox="0 0 120 80"menghasilkan 120×80 px. Ini juga yang terjadi jika ukuran diberikan dalam persen, em, atau sentimeter. - Jika tidak juga, ukuran apa pun yang diberikan browser ke gambar.
Banyak set ikon mendeklarasikan ukuran 24×24 atau 16×16, yang menghasilkan PNG sangat kecil. Masukkan lebar untuk merendernya lebih besar: 512 untuk ikon bergaya aplikasi yang tajam, 1200 untuk grafis pratinjau media sosial. Daftar file menampilkan lebar × tinggi hasil dan ukuran file setiap PNG, jadi Anda bisa memastikan hasilnya sebelum mengunduh.
Semua file dalam satu batch memakai lebar yang sama. Untuk ikon dengan proporsi campuran, artinya lebarnya sama tetapi tingginya berbeda.
Memilih lebar untuk kebutuhan umum
- Layar retina dan berkerapatan tinggi: render dua atau tiga kali ukuran tampilnya. Logo yang ditampilkan selebar 200 px di header halaman sebaiknya selebar 400 atau 600 px sebagai PNG.
- Dokumen dan slide: lebar 1500 sampai 2000 px menjaga logo tetap tajam bahkan saat slide diproyeksikan layar penuh.
- Cetak: kalikan lebar cetak dalam inci dengan 300. Logo yang dicetak selebar 4 inci membutuhkan 1200 px.
- Favicon dan ikon aplikasi: untuk set lengkap ukuran ikon sekaligus, Pembuat favicon lebih praktis.
Lebar yang sangat besar dibatasi oleh browser, bukan oleh alat ini. Browser membatasi total jumlah piksel canvas; di iPhone dan iPad batasnya sekitar 16 juta piksel, kira-kira 4000×4000. Jika konversi gagal pada lebar besar di ponsel, coba yang lebih kecil atau gunakan browser desktop.
Kenapa PNG bisa berbeda dari pratinjau di editor
SVG dirender oleh browser Anda sebagai gambar terisolasi, sama seperti tag <img> di halaman web menampilkannya. Demi keamanan, SVG dalam mode ini tidak bisa menjalankan script atau memuat apa pun dari jaringan. Dalam praktiknya, ini menimbulkan beberapa perbedaan khas:
- Font. Teks dengan web font yang ditautkan, bukan disematkan, beralih ke font bawaan. Nama font yang kebetulan terpasang di perangkat Anda akan dipakai, artinya SVG yang sama bisa dirender berbeda di komputer lain. Mengubah teks menjadi outline di alat desain menghilangkan masalah ini.
- Gambar tertaut. Gambar raster yang dirujuk lewat URL tidak muncul; gambar yang disematkan sebagai data di dalam SVG tampil normal.
- Animasi dan interaktivitas. Efek hover dan perilaku berbasis script tidak berlaku, dan SVG beranimasi ditangkap sebagai satu gambar diam.
- Efek. Filter dan blend mode bergantung pada dukungan SVG di browser, jadi efek kompleks bisa sedikit berbeda antara Chrome, Firefox, dan Safari.
Latar belakang, file, dan privasi
Area kosong tetap transparan di PNG. Jika Anda butuh latar solid, misalnya untuk platform yang menampilkan transparansi sebagai hitam, jalankan hasilnya lewat Konversi PNG ke JPG dan pilih warna latar belakang di sana.
File SVG hingga 20 MB diterima. Rendering dan encoding PNG terjadi di browser Anda, jadi file-file yang sering berisi logo dan aset merek yang belum dirilis tidak pernah diunggah. Hasilnya bisa diunduh satu per satu atau sebagai ZIP.