Langsung ke konten utama
PulsarKit

Ubah SVG ke PNG

Ubah file SVG ke PNG pada skala berapa pun atau ukuran piksel persis, langsung di browser. Skrip dan tautan eksternal dihapus sebelum apa pun digambar.

Letakkan file di sini

.svg · hingga 10 MB

Cara Ubah ke PNG

  1. 1

    Letakkan file SVG

    Hingga 100 file sekaligus. Setiap file diperiksa dulu untuk memastikan isinya memang markup SVG, sebelum langkah lain dijalankan.

  2. 2

    Atur skala atau ukuran persis

    Kalikan ukuran asli gambar dengan 0,5 sampai 10, atau ketik lebar persis yang dibutuhkan dan biarkan tinggi mengikuti rasio aspek.

  3. 3

    Unduh file PNG

    Satu file dikembalikan sebagai PNG, beberapa file sebagai ZIP. Kartu hasil menunjukkan ukuran piksel yang Anda dapatkan.

Digambar ulang, bukan diregangkan

SVG tidak berisi piksel, melainkan instruksi untuk menggambar bentuk. Artinya, PNG yang dibuat pada skala 4× bukan gambar kecil yang diperbesar: setiap lengkungan digambar ulang pada ukuran yang lebih besar, dan tepinya tetap tajam. Alat ini memanfaatkan hal itu. Sebelum gambar dibuat, lebar dan tinggi pada elemen root ditulis ulang menjadi ukuran piksel yang Anda minta, sehingga browser langsung mengubah jalur vektor menjadi piksel pada resolusi target, bukan memperbesar bitmap kecil yang sudah jadi di canvas. Skala bawaan 2 disiapkan untuk kasus paling umum: logo yang dibuat untuk layar biasa dan harus tetap tajam di layar retina. Mode piksel persis tersedia bila sebuah platform meminta angka tertentu, misalnya ikon aplikasi 1024×1024 atau pratinjau media sosial 1200×630.

Mengapa skrip dan tautan eksternal dihapus

SVG adalah XML, dan XML bisa membawa lebih dari sekadar gambar. File dari orang lain bisa berisi elemen <script>, atribut event handler seperti onload, foreignObject yang memuat seluruh dokumen HTML, atau rujukan ke gambar dan font di server lain. Membuka file seperti itu secara sembarangan bisa menjalankan kode orang lain di tab Anda, atau memberi tahu server lain, tanpa Anda sadari, bahwa file itu dibuka dan kapan. Di sini setiap file lebih dulu melewati DOMPurify dengan profil SVG, lalu melewati tahap kedua buatan kami yang menghapus setiap href, xlink:href, dan url() CSS yang tidak mengarah ke anchor di dalam file yang sama atau ke data: URI yang tersemat. Font dan gambar yang tersemat sebagai data: URI tetap dipertahankan dan tampil normal. Semua yang dihapus dihitung, jadi Anda bisa tahu mengapa sebagian gambar keluar kosong.

Transparansi dan latar belakang

PNG mendukung kanal alfa, jadi secara bawaan area yang tidak diwarnai oleh SVG tetap transparan. Itulah yang dibutuhkan logo yang akan diletakkan di header berwarna. Jika tempat tujuannya tidak mendukung transparansi, pilih putih atau warna lain: warna itu diisikan lebih dulu, lalu gambar diletakkan di atasnya dalam satu tahap, tanpa halo di sekitar tepinya.

File tetap di perangkat Anda

Pembacaan, pembersihan, penggambaran, dan encode PNG semuanya berlangsung di dalam tab browser ini. Tidak ada yang diunggah dan tidak ada yang disimpan. Tahap pembersihan itulah yang membuat proses ini aman dijalankan secara lokal: saat SVG sampai ke halaman, file itu sudah tidak bisa menjalankan kode atau mengakses jaringan.

Pertanyaan yang sering diajukan

Mengapa PNG terlihat buram pada skala tinggi?

Seharusnya tidak, karena vektor digambar ulang pada ukuran target, bukan diregangkan. Jika hasilnya tetap terlihat kurang tajam, kemungkinan SVG berisi bitmap tersemat (gambar data: URI), bukan jalur vektor sungguhan. Bitmap itu punya resolusi tetap, dan memperbesarnya tidak bisa menambah detail. Buka file sumber di editor untuk melihat apakah bentuknya berupa jalur vektor atau satu gambar tersemat.

Apa yang terjadi pada skrip di dalam SVG?

Skrip dihapus sebelum file digambar, bersama atribut event handler seperti onload dan onclick serta setiap blok foreignObject. Tidak ada bagian file yang pernah dijalankan. Ini bukan opsi atau pengaturan: di sini tidak ada jalur kode yang menggambar SVG tanpa membersihkannya lebih dulu.

Mengapa gambar eksternal di SVG tidak muncul?

Setiap rujukan ke alamat http://, https://, atau alamat // yang relatif terhadap protokol dihapus, karena mengambilnya akan memberi tahu server itu bahwa Anda membuka file. Yang tersisa hanya rujukan ke id di dokumen yang sama dan data: URI yang tersemat. Jika gambar itu dibutuhkan di hasil, sematkan dulu ke SVG sebagai data: URI, lalu ubah.

Bagaimana cara mendapatkan ukuran piksel yang persis?

Ubah ukuran hasil ke “Piksel persis”, lalu ketik lebarnya. Jika tinggi dibiarkan 0, tinggi dihitung dari rasio aspek gambar sehingga tidak ada yang gepeng; ketik tinggi bila Anda sengaja ingin meregangkan gambar ke kotak berukuran tetap. Kedua sisi dibatasi 16384 piksel, yaitu batas canvas browser.

Apakah transparansi dipertahankan?

Ya, secara bawaan. Area yang tidak diwarnai menjadi alfa 0 di PNG. Pilih putih atau warna lain di bagian Latar belakang jika Anda butuh latar polos, karena beberapa alat lama dan aplikasi email menampilkan area transparan PNG sebagai hitam.

Bagaimana jika SVG tidak punya viewBox?

Ukuran intrinsiknya ditentukan oleh atribut width dan height. Jika keduanya juga tidak ada, dipakai ukuran bawaan spesifikasi SVG, yaitu 300×150, lalu skala diterapkan pada ukuran itu. Ukuran ini sama dengan yang diberikan browser pada file tersebut, jadi hasilnya sesuai dengan yang Anda lihat saat membuka SVG secara langsung.

Berapa file yang bisa diubah sekaligus?

Hingga 100 file, maksimal 10 MB per file dan total 200 MB. Semua file memakai satu set pengaturan yang sama dan digambar satu per satu; file yang gagal tidak membatalkan yang lain, dan semua yang berhasil dikembalikan dalam satu ZIP.

Apakah file diunggah ke server?

Tidak. Pembersihan dan penggambaran berjalan di browser Anda. Tidak ada unggahan, tidak ada antrean, dan tidak ada salinan yang disimpan; cukup tutup tab, dan semuanya sudah bersih.

Panduan

Alat terkait