Kenapa SVG Tidak Punya Ukuran Sampai Anda Mengonversinya
Orang sering bertanya cara mengonversi SVG ke PNG "tanpa kehilangan kualitas", dan pertanyaan itu mengandung kesalahpahaman yang perlu diluruskan dulu. SVG tidak punya kualitas yang bisa hilang. Ia tidak punya piksel sama sekali.
Vektor Mendeskripsikan, Piksel Menyimpan
SVG adalah deskripsi bentuk (kurva, isian, teks) dalam sistem koordinat tanpa ukuran piksel tetap. PNG adalah kisi piksel yang tetap. Karena itu, mengonversi SVG ke PNG selalu berarti memilih ukuran, dan hasilnya tajam pada ukuran apa pun yang Anda pilih.
Buka SVG di editor teks dan Anda akan menemukan instruksi: pindah ke titik ini, lengkung ke titik itu, isi dengan warna ini. Tidak ada yang menyebut berapa piksel lebar gambarnya. Browser yang memutuskan itu saat menampilkan, dan keputusannya bisa berbeda setiap kali.
Apa Sebenarnya Arti viewBox, width, dan height
Tiga atribut pada elemen root mengendalikan ukuran. viewBox mendefinisikan sistem koordinat: "gambar ini membentang 0 sampai 240 ke samping dan 0 sampai 160 ke bawah". width dan height, kalau ada, menyarankan ukuran tampilan default. Banyak SVG hanya punya viewBox, sebagian hanya punya width dan height, dan beberapa tidak punya keduanya.
Konverter ini membaca mana pun yang ada, menghitung ukuran intrinsik seperti yang dilakukan browser, dan memakainya sebagai basis 1×. Kalau tidak ada yang dideklarasikan, ia jatuh ke 1.024 piksel supaya Anda tetap mendapat gambar yang bisa dipakai.
Kenapa "Tanpa Kehilangan Kualitas" Adalah Pertanyaan yang Keliru
Karena SVG bisa dirender ke ukuran apa pun dari instruksi yang sama, PNG 4.000 piksel sama tajamnya dengan PNG 400 piksel: renderer hanya menggambar lebih banyak detail. Satu-satunya cara kehilangan kualitas adalah merender kecil lalu memperbesar PNG-nya setelah itu. Solusinya: pilih ukuran final di sini, saat konversi, dan jangan pernah memperbesar PNG.
Apa yang Dilakukan Konverter SVG ke PNG Ini
Alat ini membaca file SVG Anda di browser, membuang apa pun yang bisa dieksekusi, merender masing-masing pada ukuran pilihan Anda dengan mesin browser sendiri, dan mengembalikan PNG lossless dengan transparansi utuh, satu per satu atau sebagai ZIP.
Renderer yang Sama dengan Browser Anda
Konverter sisi server memakai pustaka terpisah (librsvg, Inkscape, ImageMagick), dan masing-masing punya celah: filter yang tidak didukung, font yang diganti, gradien yang digambar sedikit berbeda. PNG yang Anda terima bisa jadi tidak cocok dengan SVG yang Anda lihat.
Di sini render dilakukan oleh Blink, Gecko, atau WebKit (browser mana pun yang Anda pakai) yang menggambar SVG ke canvas. Kalau SVG tampak benar di browser Anda, PNG-nya akan tampak sama, karena itu benar-benar gambar yang sama.
Skrip Dibuang, Tidak Ada yang Diunggah
SVG adalah XML, dan bisa berisi elemen <script>, handler onload, dan HTML tersemat. File dari sumber tak dikenal bukan sesuatu yang bisa dibuka sembarangan. Sebelum render, konverter membuang skrip, atribut event, dan blok foreignObject, lalu merender hasilnya di dalam elemen image yang memang tidak bisa menjalankan kode. Dua lapis, keduanya lokal.
Tidak ada yang diunggah kapan pun. Panel Network di developer tools browser Anda tetap kosong selama batch dikonversi.
Cara Mengonversi SVG ke PNG dalam 3 Langkah
Jatuhkan file SVG Anda
Seret satu atau beberapa file .svg ke area bergaris putus-putus, atau klik untuk memilih. Hingga 10 file sekaligus di desktop. Setiap baris menampilkan pratinjau langsung vektornya: browser menampilkan SVG secara native, jadi yang Anda lihat adalah yang akan dirender.
Pilih ukuran dan latar
Di Pengaturan Konversi, pilih Skala (1×, 2×, 3×, atau 4× dari ukuran asli SVG) atau Lebar (preset atau lebar piksel apa pun; tinggi mengikuti rasio aspek). Lalu pilih latar: transparan secara default, atau putih, hitam, atau warna apa pun untuk diratakan.
Unduh PNG atau ZIP
Tekan Konversi. Setiap file menampilkan dimensi output dan ukuran PNG-nya. Unduh satu per satu, atau tekan Unduh Semua untuk ZIP dengan nama asli dan ekstensi .png.
Jatuhkan hingga 10 file SVG. File dibaca secara lokal dan tidak pernah diunggah.
Pilih skala atau ketik lebar, lalu pilih latar transparan atau warna solid.
Unduh tiap PNG satu per satu, atau semuanya sebagai ZIP.
Memilih Ukuran Output yang Tepat
Karena ukuran adalah pilihan, ada baiknya tahu untuk apa masing-masing pilihan. Dua mode mencakup hampir semua kasus.
1×, 2×, 3×: Menyesuaikan Kepadatan Layar
Monitor standar menampilkan satu piksel per poin CSS. Layar Retina atau HiDPI menampilkan dua; kebanyakan ponsel modern menampilkan tiga. Ikon 32 poin di layar karenanya butuh PNG 32 piksel untuk yang pertama, 64 untuk yang kedua, dan 96 untuk yang ketiga. Itulah seluruh arti 1×, 2×, dan 3×.
Pekerjaan web dan aplikasi biasanya mengekspor SVG yang sama pada ketiga skala. Jatuhkan file sekali, konversi pada 1×, ubah pengaturan, konversi lagi; atau cukup ekspor pada 3× dan biarkan platform yang memperkecil.
Tabel Ukuran untuk Target Umum
Favicon: 16, 32, dan 48 piksel, paling baik dibuat dengan alat PNG ke ICO dari PNG 512 piksel. Ikon aplikasi: 1024 piksel untuk toko aplikasi, lalu generator set ikon. Avatar media sosial: 400 sampai 800 piksel. Gambar Open Graph: 1200 × 630. Listing marketplace: biasanya 2000 piksel di sisi panjang.
Lebar Kustom untuk Cetak dan Marketplace
Untuk cetak, hitung mundur dari ukuran fisik pada 300 DPI: halaman A4 lebarnya 2.480 piksel, A3 3.508, stiker 6 inci 1.800. Beralih ke mode Lebar, ketik angkanya, dan tinggi mengikuti rasio aspek SVG. Konverter membatasi output pada 16.384 piksel di sisi terpanjang (batas yang dikenakan browser pada canvas) dan memberi tahu kalau permintaan harus dikurangi.
Transparansi, Latar, dan Tepi
Kebanyakan SVG (logo, ikon, ilustrasi) tidak punya latar: bentuknya mengambang di atas kekosongan. PNG bisa menyimpan itu, dan itu salah satu dari dua alasan memilihnya ketimbang JPG untuk tugas ini.
Mempertahankan Latar Transparan
Transparan adalah default di sini. Setiap piksel yang tidak dilukis SVG tetap kosong, termasuk piksel yang tertutup sebagian di sepanjang tepi lengkung dan diagonal. Piksel tepi yang halus itulah yang membuat PNG bisa duduk di slide gelap, tombol berwarna, atau foto tanpa garis tepi yang terlihat.
Hasil ditampilkan di atas pola papan catur supaya Anda bisa memastikan transparansinya sebelum mengunduh.
Kapan Meratakan ke Sebuah Warna
Beberapa tujuan tidak bisa menangani alpha: klien email lama, alur cetak tertentu, beberapa pengunggah marketplace yang diam-diam mengonversi ke JPG. Untuk itu, pilih Putih, Hitam, atau warna kustom di pengaturan latar. Bentuknya dikomposit ke warna itu dan PNG jadi sepenuhnya buram.
Pilih warna yang sesuai dengan tempat gambar akan diletakkan. Ratakan ke putih lalu letakkan PNG di latar gelap, dan piksel tepinya (kini oranye pucat, biru pucat, apa pun warna bentuknya) tampak sebagai halo samar. Halo itu adalah keluhan paling umum soal logo hasil konversi, dan itu soal pilihan latar, bukan cacat render.
Apa yang Bisa Salah (dan Cara Memperbaikinya)
Merender di browser berarti PNG sesuai dengan layar, tapi juga mewarisi aturan browser tentang apa yang boleh dimuat oleh sebuah gambar.
Font Hilang
Teks di SVG dirender dengan font apa pun yang disebutkannya. Kalau font itu tidak terpasang di mesin Anda dan tidak tersemat di file, browser menggantinya, dan PNG menampilkan font pengganti. Font web yang dirujuk lewat URL juga tidak akan dimuat: SVG yang dirender sebagai gambar tidak boleh mengambil sumber daya eksternal.
Perbaikan yang andal adalah mengubah teks menjadi outline di alat desain Anda sebelum mengekspor SVG. Huruf menjadi path dan dirender identik di mana pun.
Gambar Tertaut Hilang
Aturan yang sama berlaku untuk <image href="https://…">. Gambar raster yang ditarik dari URL akan keluar kosong. Sematkan saja: kebanyakan editor punya opsi ekspor "embed images", yang mengubah tautan menjadi data URI di dalam SVG. Gambar tersemat dirender dengan baik.
Output Kosong atau Sangat Kecil
SVG tanpa viewBox maupun width dan height dirender di sini pada ukuran fallback; kalau gambarnya jauh dari titik asal, bisa jatuh di luar area yang terlihat. Tambahkan viewBox yang melingkupi karyanya. Output yang sangat kecil hampir selalu berarti SVG mendeklarasikan width dan height yang kecil: beralih ke mode Lebar dan ketik ukuran yang benar-benar Anda inginkan.
Gejala, Penyebab, Perbaikan
| Gejala | Kemungkinan penyebab | Perbaikan |
|---|---|---|
| Font salah di PNG | Font tidak terpasang / font web diblokir | Ubah teks menjadi outline sebelum ekspor |
| Foto di dalam SVG kosong | Ditautkan lewat URL, bukan disematkan | Ekspor ulang dengan gambar tersemat |
| PNG sangat kecil | SVG mendeklarasikan width/height kecil | Pakai mode Lebar dan ketik targetnya |
| Karya terpotong | viewBox tidak melingkupi gambar | Perbaiki viewBox di editor |
| Halo di latar gelap | Diratakan ke putih | Biarkan transparan, atau ratakan ke warna latar sebenarnya |
| Filter atau blur tampak berbeda | Konverter server memakai mesin berbeda | Konversi di sini: browser yang merender |
Apa yang Orang Buat dengan SVG sebagai PNG
Kalau SVG bisa diskalakan sempurna, kenapa perlu mengonversi SVG ke PNG? Karena banyak sekali perangkat lunak yang masih tidak bisa menerima vektor.
Set Ikon dan Favicon
Toko aplikasi, format favicon, dan banyak sistem ikon menginginkan PNG berukuran tetap. Konversi sekali pada ukuran terbesar yang Anda butuhkan, lalu potong sisanya dengan generator ikon atau PNG ke ICO.
Platform yang Menolak SVG
Media sosial, marketplace, forum komunitas, dan kebanyakan pustaka media CMS menolak unggahan SVG, sebagian demi keamanan, karena SVG bisa membawa skrip. PNG 2× dengan latar transparan adalah pengganti universal.
Tanda Tangan Email dan Newsletter
Klien email membuang SVG atau menampilkan gambar rusak. Logo di email adalah PNG, idealnya diekspor pada 2× dan ditampilkan setengah ukuran agar tetap tajam di layar Retina.
Cetak dan Format Besar
Percetakan menerima PDF dan raster resolusi tinggi. Pakai mode Lebar untuk merender logo pada 3.000 atau 4.000 piksel dan hasilnya akan tercetak bersih pada ukuran poster: vektor yang dirasterisasi pada ukuran target tidak punya blur pembesaran.
Konverter SVG Berbasis Browser vs Berbasis Server
Hampir setiap konverter SVG ke PNG online mengunggah file dan merendernya di server dengan librsvg, Inkscape, atau browser headless. Itu bekerja untuk bentuk sederhana dan melenceng pada apa pun yang rumit.
Fidelitas
Setiap pustaka render mendukung irisan spesifikasi SVG yang sedikit berbeda. Filter, mask, blend mode, CSS di dalam file, dan teks pada path adalah korban yang biasa. Mesin browser adalah renderer SVG paling lengkap yang ada, dan merender dengan mesin di mesin Anda sendiri berarti PNG tidak mungkin berbeda dari pratinjau.
Privasi dan Batasan
Logo yang belum dirilis, diagram produk, grafik dengan angka internal: mengunggahnya ke konverter adalah kebocoran kecil yang tidak diinginkan siapa pun. Alat server juga membatasi ukuran file dan pemakaian harian karena render membebani biaya mereka. Merender di perangkat sendiri menghapus keduanya: tidak ada yang bocor dan tidak ada yang perlu dijatah.
Yang lebih baik dilakukan server: perangkat keras yang sangat tua akan merender batch SVG rumit lebih lambat daripada pusat data. Untuk sepuluh logo, tidak ada bedanya.
Apa yang Dilakukan dengan PNG Selanjutnya
Output-nya adalah PNG standar, jadi setiap alat di sini menerimanya tanpa unggahan lagi.
Untuk web, jalankan lewat Kompres PNG atau konversi ke WebP: keduanya mempertahankan transparansi dan memangkas ukuran. Untuk email atau foto, PNG ke JPG meratakan dan mengecilkan. Untuk dimensi yang persis setelahnya, Ubah Ukuran Gambar. Dan kalau Anda mulai dari raster dan berharap punya vektor, PNG ke SVG berjalan ke arah sebaliknya.