DevToolPal
ID

Konverter SVG ke PNG

Ubah kode atau file SVG menjadi gambar PNG, JPG, atau WebP yang tajam pada 1×–4× atau lebar berapa pun, dengan latar transparan atau solid.

Berjalan lokal, tidak pernah diunggah

Opsi

Ukuran
Format
Latar

Kode SVG

Pratinjau

Fungsinya

Alat ini mengubah kode SVG atau file .svg menjadi gambar PNG, JPG, atau WebP. Tempel markup-nya, letakkan file, pilih skala atau lebar yang tepat, lalu unduh bitmap-nya. Rendering terjadi di browser Anda, jadi ikon, logo, dan diagram tidak pernah meninggalkan komputer Anda.

Alat ini berguna setiap kali suatu tempat tidak menerima SVG: ikon aplikasi, gambar media sosial, slide presentasi, dokumen, tanda tangan email, atau perangkat lunak lama. Anda mendapat pratinjau langsung di atas pola papan catur sehingga bisa melihat persis bagian mana yang transparan.

Cara menggunakannya

  1. Tempel kode <svg> ke editor, klik Unggah untuk membuka file, atau seret file ke halaman. Contoh memuat sebuah logo kecil.
  2. Pilih ukuran: 1× memakai dimensi asli SVG, 2×–4× mengalikannya. Atau ketik lebar kustom dalam piksel; tingginya mengikuti rasio aspek.
  3. Pilih format: PNG untuk output lossless dengan transparansi, JPG untuk foto dan kompatibilitas, WebP untuk file kecil.
  4. Pilih latar: transparan, putih, atau warna apa pun.
  5. Klik Unduh. Baris di bawah pratinjau menunjukkan ukuran piksel akhir, format, dan ukuran file.

Cara ukuran ditentukan

Alat ini memeriksa elemen root <svg>. width dan height dalam px, pt, mm, cm, in, atau em dikonversi ke piksel. Jika tidak ada atau ditulis dalam persen, lebar dan tinggi viewBox yang dipakai. Skala atau lebar kustom yang dipilih kemudian diterapkan, dan SVG ditulis ulang dengan ukuran piksel eksplisit agar semua browser menggambarnya dengan cara yang sama.

Contoh

Ikon dengan viewBox="0 0 24 24" tanpa width atau height menjadi PNG 24 × 24 pada 1×. Pada 4× menjadi 96 × 96, dan dengan lebar kustom 512 menjadi PNG 512 × 512 yang cocok untuk ikon app store, tetap tajam sempurna karena dirender dari vektor, bukan diperbesar.

Tips

  • XML yang tidak valid dilaporkan beserta nomor barisnya, jadi Anda bisa langsung melompat ke masalahnya.
  • Gambar raster tertanam (<image href="data:...">) berfungsi; tautan eksternal tidak.
  • Teks memakai font yang terpasang di komputer Anda. Untuk hasil yang identik per piksel di mana saja, ubah teks menjadi outline di aplikasi desain Anda terlebih dahulu.
  • Output terbesar dibatasi oleh ukuran canvas browser, sekitar 16.000 piksel per sisi.

FAQ

› Apakah SVG diunggah ke suatu tempat?

Tidak. Browser Anda menggambar SVG ke canvas dan menyimpan hasilnya. Kode dan gambarnya tetap di perangkat Anda.

› Bagaimana cara mendapatkan PNG yang lebih tajam?

Pilih skala 2×, 3×, atau 4×, atau ketik lebar yang tepat. SVG adalah format vektor, jadi merender pada ukuran lebih besar menghasilkan tepi yang tajam di layar berkepadatan tinggi. 2× adalah pilihan bawaan yang baik untuk layar retina.

› Mengapa beberapa gambar atau font tidak muncul di output?

Demi keamanan, browser tidak memuat file eksternal (gambar yang ditautkan, web font, CSS) saat SVG digambar sebagai gambar. Sematkan gambar sebagai data URL dan ubah teks menjadi path, atau gunakan font sistem.

› Bisakah latar transparan dipertahankan?

Bisa. Pilih Transparan dengan output PNG atau WebP. JPG tidak mendukung transparansi, jadi area transparan diisi putih atau warna pilihan Anda.

› SVG saya tidak punya width atau height. Ukuran apa yang dipakai?

Alat ini membaca viewBox dan memakai lebar serta tingginya. Jika ukuran maupun viewBox tidak ada, alat ini kembali ke ukuran bawaan browser 300 × 150 dan memberi tahu Anda.