Lewati ke konten
Toolars
Jelajahi

Konversi SVG ke PNG

Buka SVG dan halaman ini membersihkannya dengan daftar izin yang ketat, lalu merender versi amannya ke PNG transparan pada skala pilihan Anda, semuanya di dalam browser. Skrip tidak pernah dijalankan dan berkas tidak diunggah. Yang perlu diketahui: apa pun di luar daftar izin, seperti gaya CSS, filter, marker, atau gambar tertanam, dihapus sebelum render.

Fakta alat

Batas ukuran SVG
2 MiB markup, dikenali sebagai image/svg+xml
Skala
Tombol 1x, 2x, 3x, dan 4x dengan 2x sebagai preset di sini; “Skala ekspor” juga menerima 0,01 hingga 32
Batas keluaran
8.192 px per sisi dan 24 MP setelah penskalaan
Dihapus sebelum render
Skrip, event handler, atribut style dan <style>, filter, marker, <image>, foreignObject, URL eksternal dan data:
Langsung ditolak
Deklarasi DOCTYPE atau ENTITY, serta berkas tanpa width/height maupun viewBox
Latar
Transparan pada PNG; warna isi hanya diterapkan bila Anda beralih ke JPEG

Jalur tugas / dari masukan ke hasil

Cara merender SVG menjadi PNG

  1. 01

    Tambahkan SVG

    “Pilih berkas” menerima satu .svg setiap kali. Markup mentah tidak pernah dimasukkan ke halaman; pratinjau baru muncul setelah render yang sudah disanitasi.

  2. 02

    Tentukan ukuran

    Klik 1x, 2x, 3x, atau 4x di bawah “Skala ekspor”, atau ketik nilai piksel pasti di “Lebar keluaran” dan “Tinggi keluaran”.

  3. 03

    Sanitasi & konversi

    Tekan “Sanitasi & konversi”. Ringkasan menyebutkan ukuran piksel akhir dan berapa banyak item yang tidak aman atau tidak didukung telah dihapus.

  4. 04

    Periksa dan unduh

    Jika jumlah item yang dihapus lebih dari nol, bandingkan pratinjau dengan karya aslinya sebelum mengunduh PNG.

Mengubah karya vektor menjadi piksel

SVG mendeskripsikan bentuk, sehingga tetap tajam di ukuran berapa pun, tetapi banyak tujuan seperti aplikasi presentasi, editor dokumen, dan halaman toko aplikasi meminta bitmap berukuran tetap. Merender ke PNG mempertahankan transparansi dan tidak menghilangkan apa pun selain yang ditentukan grid piksel pilihan Anda.

Grid itulah keputusan yang paling menentukan. Skala mengalikan width dan height milik SVG, atau viewBox-nya bila atribut itu tidak ada, sehingga ikon 64×64 menjadi 128×128 pada 2x. Memperbesar PNG belakangan akan membuatnya buram, jadi render pada ukuran terbesar yang Anda butuhkan.

Sanitasi menjelaskan sebagian besar kejutan. Path, bentuk dasar, teks, gradien, clip path, mask, pattern, dan referensi <use> lokal tetap ada, begitu pula atribut presentasi seperti fill dan stroke. Gaya yang berada di kelas CSS, atribut style, atau blok <style> dibuang, jadi karya yang diekspor dengan cara itu bisa tampil hitam atau tanpa isi.

Pertanyaan umum

Mengapa PNG saya tampak hitam atau kehilangan warnanya?
Warnanya kemungkinan diatur dengan CSS: blok <style>, aturan kelas, atau atribut style. Semua itu dihapus, dan bentuk SVG secara bawaan diisi hitam. Ekspor ulang SVG dengan atribut presentasi (fill, stroke) alih-alih CSS, atau minta alat desain Anda mengekspor dengan atribut inline.
Skala mana yang cocok untuk layar berkepadatan tinggi?
Halaman ini dibuka pada 2x, yang menggandakan dimensi yang dideklarasikan SVG dan cocok untuk sebagian besar layar berkepadatan tinggi. Gunakan 3x atau 4x untuk penempatan yang lebih besar, dengan catatan hasilnya tetap harus muat dalam 8.192 px per sisi dan 24 MP.
Mengapa mata panah atau bayangan jatuh hilang?
Dalam SVG, mata panah digambar dengan elemen marker dan bayangan jatuh dengan elemen filter, dan keduanya tidak ada di daftar izin sanitizer. Ubah efek tersebut menjadi path biasa di editor sebelum mengekspor SVG.
Mengapa SVG saya ditolak?
Penyebab umumnya adalah deklarasi DOCTYPE atau ENTITY, berkas lebih dari 2 MiB, berkas yang tidak dilaporkan sebagai image/svg+xml, atau elemen root tanpa width, height, maupun viewBox. Skala yang akan membuat render melewati batas piksel juga ditolak dengan menyebutkan batasnya.
Apakah font dan gambar tertaut muncul di PNG?
Tidak. URL eksternal, URL data:, dan elemen <image> dihapus, sehingga gambar tertaut dan font web tidak pernah dimuat. Teks digambar dengan font yang sudah dimiliki browser untuk font-family yang disebutkan, jadi ubah teks menjadi outline di editor bila bentuk hurufnya harus persis.

Konversi SVG ke Gambar