Mengapa SVG saya tampak berbeda setelah dikonversi ke PNG?

Alasan paling umum adalah: (1) SVG menggunakan currentColor — aktifkan opsi pengganti currentColor dan pilih warna yang dimaksud. (2) SVG merujuk ke font eksternal yang tidak tersedia saat rasterisasi — tool akan memperingatkan jika mendeteksi referensi font eksternal, dan PNG akan menggunakan fallback font sistem. (3) SVG mengandung gambar lintas-origin — ini mungkin diblokir kebijakan keamanan browser, menghasilkan area gambar hilang. Pada semua kasus, tool menampilkan peringatan berwarna pada baris file sebelum kamu mengonversi.

Apa arti '1x / 2x / 3x' dan mana yang harus saya pilih?

Ini adalah skala kerapatan piksel. 1x adalah resolusi dasar untuk layar standar. 2x menyediakan dua kali lipat piksel untuk layar Retina/HiDPI (sebagian besar ponsel modern dan MacBook). 3x menyediakan tiga kali lipat piksel untuk layar dengan kepadatan tertinggi (iPhone terbaru, ponsel Android kelas atas). Jika kamu mengekspor untuk web, pilih 1x dan 2x. Untuk aset aplikasi iOS, pilih ketiganya. Kamu bisa mencentang beberapa skala sekaligus — tool mengekspor semua skala yang dipilih dalam satu klik dan menyusunnya dalam ZIP.

Apa itu opsi DPI dan kapan harus menggunakannya?

DPI (dots per inch) adalah tag metadata yang disematkan dalam file PNG yang memberi tahu aplikasi pada ukuran fisik apa gambar harus ditampilkan. Dimensi piksel PNG yang diekspor tidak berubah — hanya tag metadata yang berubah. Gunakan 72 DPI untuk aset web (standar web). Gunakan 96 DPI untuk aset layar Windows. Gunakan 144 DPI untuk aset Apple @2x — macOS dan iOS mengenali 144 DPI sebagai penanda gambar skala Retina, yang penting saat meletakkan aset langsung ke Xcode atau Finder macOS. Biarkan DPI nonaktif jika tidak ada kebutuhan khusus, karena browser web dan sebagian besar aplikasi mengabaikan tag DPI.

Bisakah saya ekspor dengan latar belakang transparan?

Ya — latar belakang transparan adalah opsi default. PNG yang diekspor akan memiliki channel alpha penuh, mempertahankan transparansi apa pun yang ada di SVG asli. Jika platform target tidak mendukung transparansi (misalnya beberapa klien email atau platform iklan), beralih ke opsi latar belakang putih atau warna kustom.

Apa yang terjadi jika SVG saya tidak memiliki atribut lebar atau tinggi?

Jika SVG memiliki atribut viewBox tetapi tidak ada lebar atau tinggi eksplisit, tool otomatis menurunkan dimensi dari viewBox — tidak ada peringatan yang ditampilkan dan konversi berjalan normal. Jika SVG tidak memiliki viewBox maupun atribut lebar/tinggi, tool menggunakan default 300×150 piksel (default browser untuk SVG) dan menampilkan peringatan kuning pada baris file agar kamu bisa mengatur ukuran output kustom secara manual.

Apa itu currentColor dan mengapa ikon saya diekspor sebagai hitam solid?

currentColor adalah kata kunci CSS yang digunakan dalam ikon SVG untuk mewarisi warna teks dari elemen induk — membuat ikon dapat theming. Saat mengekspor ke PNG, tidak ada konteks CSS, sehingga currentColor resolusi ke default browser (hitam). Aktifkan opsi pengganti currentColor dan pilih warna yang kamu inginkan — tool mengganti semua referensi currentColor di sumber SVG sebelum rasterisasi, sehingga PNG muncul dengan warna persis yang kamu pilih.

Bagaimana file ZIP disusun saat mengekspor di beberapa skala?

Kamu bisa memilih antara dua struktur ZIP. Mode folder membuat subfolder terpisah (1x/, 2x/, 3x/) dengan filename asli di masing-masing — ini sesuai dengan konvensi asset catalog Xcode dan sebagian besar pipeline CI/CD. Mode datar menempatkan semua file di direktori root dengan suffiks skala di filename (icon.png, icon@2x.png, icon@3x.png) — berguna ketika tool turunan mengharapkan direktori aset datar. Kedua mode mempertahankan filename asli.

BulkPicTools

Lokal · 0 Upload

Ubah SVG ke PNG — Gratis, Batch, Ukuran & DPI Kustom

Ubah SVG ke PNG online — gratis, tanpa upload, dukungan batch. Atur ukuran, latar belakang, DPI, dan ekspor 1x/2x/3x untuk semua platform. Semua pemrosesan dilakukan lokal.

Upload File SVG

Seret & lepas file SVG di sini, atau klik untuk memilih. Mendukung upload batch.

Tool TerkaitAVIF ke BMP Converter

Konverter AVIF ke GIF

Konverter AVIF ke ICO

Konverter AVIF ke JPG

Konverter AVIF ke PNG

Konverter AVIF ke SVG

Konverter AVIF ke WebP

Konverter HEIC ke JPG

Pengonversi Gambar Massal

Konverter PNG ke JPG

Konverter Gambar ke AVIF

Konverter Gambar ke JPG

Konverter Gambar ke PNG

Konverter Gambar ke WebP

Konverter WebP ke JPG

Fitur Utama Konverter SVG ke PNG

Ukuran Output Fleksibel

Ekspor sesuai ukuran SVG asli, atur lebar spesifik (skala proporsional), atau tentukan lebar dan tinggi eksak. Centang 1x, 2x, dan 3x sekaligus untuk mengekspor semua skala dalam satu klik.

Batch dengan Peringatan per-File

Upload berapa pun file SVG. Setiap file menampilkan dimensi aslinya dan otomatis dicek untuk masalah: info ukuran hilang, font eksternal, gambar lintas-origin, atau currentColor belum diresolve — dengan peringatan berwarna sebelum kamu mengonversi.

Pengganti currentColor

Banyak ikon SVG menggunakan currentColor untuk theming. Aktifkan opsi pengganti dan pilih warna target — tool akan mengganti semua referensi currentColor sebelum rasterisasi, sehingga PNG muncul sesuai yang diharapkan.

Kontrol Latar Belakang & DPI

Latar belakang transparan, putih, atau warna kustom apa pun. Opsional: sematkan metadata DPI (72 / 96 / 144 untuk pengenalan Apple @2x, atau kustom) agar PNG terbuka di ukuran fisik yang tepat di Figma, Photoshop, dan tool cetak.

Panduan & Tips

SVG ke PNG: Kapan Menggunakan Setiap Format

SVG dan PNG memiliki tujuan yang berbeda, dan memahami kapan harus menggunakan masing-masing membuatnya lebih terarah.

SVG (Scalable Vector Graphics) bersifat independen terhadap resolusi — tampil sempurna di ukuran berapapun karena menggambarkan bentuk secara matematis, bukan menyimpan piksel. SVG sangat cocok untuk logo, ikon, ilustrasi, dan aset apa pun yang harus ditampilkan di berbagai ukuran. File-nya juga XML yang bisa dibaca manusia, sehingga bisa digayakan dan dianimasikan dengan CSS dan JavaScript.

PNG (Portable Network Graphics) adalah format raster — kumpulan piksel tetap pada resolusi tertentu. Mendukung kompresi lossless dan transparansi full alpha-channel, itulah mengapa PNG menjadi standar untuk ikon web, aset aplikasi, dan gambar yang harus tampil di platform yang tidak mendukung SVG (klien email, beberapa platform CMS, aplikasi lama).

Kapan PNG adalah pilihan yang tepat

Template email — sebagian besar klien email tidak merender SVG secara konsisten
Ketentuan ikon app store dan OS — iOS, Android, dan macOS memerlukan PNG dengan dimensi piksel tertentu
Upload media sosial — platform menerima PNG secara universal, tapi dukungan SVG tidak konsisten
Figma dan serah terima desain — aset PNG lebih mudah dipakai developer yang tidak mengerjakan SVG tooling
Platform pihak ketiga — CMS, platform iklan, dan alat analitik sering menerima PNG tapi tidak SVG

Mengekspor Ikon pada Skala 1x / 2x / 3x — Arti Skala-Skala Tersebut

Ekspor PNG multi-skala adalah alur kerja standar untuk pengiriman ikon dan aset UI di iOS, Android, dan web.

Mengapa berbagai skala ada

Layar perangkat modern memiliki kepadatan piksel yang berbeda — layar ponsel dapat memadatkan 3 piksel fisik ke dalam setiap 1 piksel logis (3x / @3x). Jika kamu hanya mengekspor PNG 1x dan menampilkannya di layar Retina atau high-DPI, gambar akan terlihat buram karena OS melakukan penskalaan ke atas. Mengekspor dalam skala 2x dan 3x memberikan kepadatan piksel tambahan yang dibutuhkan perangkat.

Konvensi penamaan skala

1x — resolusi dasar, untuk tampilan standar. File: icon.png
2x (@2x) — kepadatan piksel ganda, untuk layar Retina (sebagian besar ponsel modern dan MacBook). File: icon@2x.png
3x (@3x) — kepadatan piksel tiga kali lipat, untuk Android high-DPI dan iPhone terbaru. File: icon@3x.png

Struktur folder ZIP

Saat mengekspor beberapa skala, tool akan menghasilkan file ZIP dengan folder skala (1x/, 2x/, 3x/) atau struktur rata dengan sufiks skala — sesuai konvensi folder yang diharapkan oleh katalog aset Xcode, folder drawable Android, dan pipeline build web.

DPI dan pengenalan Apple @2x

Menetapkan metadata DPI sebesar 144 menyebabkan macOS dan iOS mengenali PNG tersebut sebagai aset @2x — berguna ketika menaruh aset langsung ke dalam Xcode atau Finder. Nilai DPI tidak mengubah dimensi piksel; nilai ini hanya menulis tag metadata yang dibaca oleh aplikasi untuk menentukan ukuran tampilan yang dimaksud.

Menangani currentColor pada Ikon SVG

currentColor adalah kata kunci CSS yang memberi tahu elemen SVG untuk mewarisi warna fill atau stroke-nya dari konteks CSS di sekitarnya — biasanya warna teks (color) dari elemen parent. Ini adalah teknik standar untuk membuat pustaka ikon bisa themable.

Saat kamu menyematkan SVG secara inline di HTML, currentColor akan mengambil nilai color apa pun yang diatur pada elemen parent. Namun saat kamu mengekspor ke PNG — format raster statis — tidak ada konteks CSS. Browser akan men-resolve currentColor ke nilai default-nya (biasanya hitam), yang mungkin tidak sesuai dengan tampilan yang diinginkan.

Cara kerja replacement

Sebelum merasterisasi, tool akan memindai kode sumber SVG dan mengganti setiap kemunculan currentColor (di properti fill, stroke, stop-color, dan lainnya) dengan warna hex yang kamu tentukan. Hasilnya adalah PNG yang tampil tepat sesuai warna yang kamu pilih, tanpa tergantung konteks CSS apa pun.

Kapan mengaktifkannya

Ikon kamu muncul sepenuhnya hitam atau tidak terlihat di preview PNG
Kamu mengekspor ikon untuk digunakan di atas background berwarna dan membutuhkan ikon berwarna putih atau warna spesifik
Kamu mengekspor ikon untuk handoff sistem desain di mana ikon harus tampil sesuai brand colour

Tool secara otomatis mendeteksi SVG yang mengandung currentColor dan menampilkan info badge biru di baris file — pengingat untuk mengaktifkan opsi replacement jika hasil render default tidak sesuai dengan yang kamu maksud.

Batch Konversi SVG ke PNG untuk Alur Kerja Desain

Use case batch SVG-to-PNG yang paling umum adalah ekspor icon set. Sistem desain biasanya berisi ratusan ikon SVG yang perlu diekspor sebagai PNG untuk dokumentasi, toko aplikasi, atau platform yang tidak mendukung SVG.

Use case 1 — Ekspor ikon aplikasi iOS dan macOS

Xcode memerlukan aset PNG di ukuran tertentu untuk ikon aplikasi (1024×1024 untuk App Store, plus ukuran lebih kecil untuk berbagai konteks). Upload SVG master, atur lebar dan tinggi kustom, aktifkan ekspor 1x/2x/3x, set DPI ke 144, lalu download ZIP. Struktur folder sesuai dengan yang diharapkan asset catalog Xcode.

Use case 2 — Dokumentasi sistem desain

Situs dokumentasi ikon dan instance Storybook sering menampilkan preview PNG bersamaan dengan contoh kode. Upload seluruh set ikon, ekspor di 24×24 (1x) dan 48×48 (2x), lalu download sebagai ZIP. Semua nama file tetap terjaga.

Use case 3 — Aset template email

Kebanyakan klien email (Outlook, Gmail mobile) tidak merender SVG inline. Ekspor ikon SVG kamu sebagai PNG di ukuran piksel yang persis digunakan dalam template — biasanya 24px atau 32px — dengan latar belakang putih atau transparan agar sesuai dengan desain email.

Use case 4 — Upload ke platform media sosial dan iklan

Platform iklan (Google Ads, Meta, LinkedIn) menerima PNG tapi bukan SVG. Ekspor logo atau ikon kamu sesuai dimensi yang dibutuhkan dengan warna latar belakang yang tepat (putih untuk platform yang tidak mendukung transparansi) dalam satu operasi batch.

Cara Menggunakan

Upload File SVG

Seret dan jatuhkan file SVG kamu atau klik untuk memilih. Setiap file segera menampilkan pratinjau thumbnail, dimensi asli, dan peringatan terdeteksi (ukuran hilang, font eksternal, currentColor).

Konfigurasi Output

Atur ukuran output (asli / lebar / kustom) dan pilih skala ekspor (1x, 2x, 3x — beberapa diperbolehkan). Pilih latar belakang, aktifkan penggantian currentColor jika diperlukan, dan opsional sematkan metadata DPI.

Konversi & Download

Klik Konversi. Download PNG individual dari setiap baris file, atau download semua sebagai ZIP — dengan folder skala (1x/, 2x/, 3x/) atau struktur datar dengan suffiks skala (@2x, @3x).

Pertanyaan yang Sering Diajukan Tentang Konverter SVG ke PNG

Semua pemrosesan terjadi secara lokal di browser kamu menggunakan Canvas API. File SVG kamu tidak pernah diupload ke server manapun. Ini berarti file tetap privasi, konversi bisa dilakukan offline setelah halaman dimuat, dan tidak ada batas ukuran file akibat restriksi upload.