Konverter SVG ke PNG Gratis

SVG vs PNG

SVG (Scalable Vector Graphics) adalah format vektor, markup XML yang menggambarkan bentuk secara matematis. Sebuah lingkaran di SVG adalah "gambar lingkaran dengan jari-jari R di (x, y) dengan warna isian F", instruksi, bukan piksel. Browser merender instruksi pada ukuran apa pun saat Anda menampilkan SVG, sehingga tetap tajam pada 1x, 2x, 3x dan seterusnya. PNG (Portable Network Graphics) adalah format raster, grid piksel tetap pada nilai warna tetap. PNG adalah apa yang Anda dapatkan ketika Anda "membekukan" SVG pada resolusi tertentu. Mengonversi SVG ke PNG disebut rasterisasi: memilih grid piksel target dan merender instruksi vektor pada ukuran tetap itu, setelah itu hasilnya adalah gambar raster normal dengan semua batasan ukuran yang menyiratkannya.

SVG dikembangkan oleh W3C SVG Working Group yang didirikan pada 1998; SVG 1.0 menjadi W3C Recommendation pada 4 September 2001; SVG 1.1 mengikuti pada 14 Januari 2003 dan merupakan versi dominan selama dekade berikutnya; SVG 1.1 Second Edition tiba 16 Agustus 2011; SVG 2 mencapai Candidate Recommendation pada 4 Oktober 2018 tetapi telah terhenti, tetap CR daripada Recommendation penuh pada 2026. PNG menjadi W3C Recommendation pada 1 Oktober 1996 dan IETF RFC 2083 pada Maret 1997; formatnya stabil sejak saat itu.

Mengapa mengonversi SVG ke PNG?

• Klien email menghentikan dukungan SVG. Microsoft mulai menghentikan dukungan SVG inline di Outlook untuk web dan Outlook baru untuk Windows mulai September 2025, dengan peluncuran selesai pada Oktober 2025, SVG inline sekarang dirender sebagai ruang kosong. Lampiran SVG masih berfungsi, tetapi template email bergaya inline yang sebelumnya menyematkan logo SVG memerlukan fallback PNG. Antarmuka web Gmail merender SVG dengan baik; Apple Mail juga begitu; kerusakan utama ada di sisi Microsoft.
• Platform media sosial. Twitter/X, Instagram, Facebook, LinkedIn baik menolak unggahan SVG sepenuhnya atau mengompres dan mengkodekan ulang menjadi PNG/JPEG sebelum ditampilkan. Pra-rasterisasi pada dimensi yang disukai platform (1200x630 untuk Open Graph, 1080x1080 untuk Instagram) melewati konversi otomatis lossy mereka.
• Generasi ikon aplikasi. Ikon aplikasi iOS harus PNG 1024x1024 (listing App Store) ditambah berbagai ukuran khusus perangkat; ikon adaptif Android dirender in-launcher pada 432x432 (108dp pada xxxhdpi) dengan 512x512 untuk listing Play Store; ikon manifest PWA biasanya membutuhkan 192x192 dan 512x512. SVG tidak diterima oleh salah satu dari ini.
• Cetak-on-demand dan prepress. Printful, Redbubble, Society6, RedPrint dan sebagian besar layanan cetak-on-demand memerlukan PNG (atau PDF) pada resolusi tertentu, biasanya 300 DPI untuk ukuran fisik target. SVG tidak diterima di alur unggah mereka.
• CMS dan aplikasi legacy. Instalasi WordPress lama, alat admin legacy, editor dokumen yang mendahului dukungan SVG browser, di mana saja "harus PNG" adalah persyaratan keras.
• Emoji Discord dan sejenisnya. Unggahan emoji kustom Discord memerlukan PNG (atau GIF animasi untuk emoji animasi); ukuran yang direkomendasikan 128x128 dengan batas ukuran file 256 KB. SVG tidak diterima.

Bagaimana Konversi Bekerja di Browser Anda

Teknik rasterisasi Canvas API sederhana tetapi memiliki jebakan halus. Pipeline standar: muat SVG sebagai elemen Image melalui Blob URL (URL.createObjectURL(svgBlob)) atau langsung sebagai data URI (data:image/svg+xml;base64,...); tunggu event onload; buat canvas pada dimensi output yang diinginkan; panggil ctx.drawImage(image, 0, 0, width, height) untuk merasterisasi SVG pada ukuran yang dipilih; ekspor melalui canvas.toBlob('image/png'). Renderer SVG browser menangani gradien, mask, filter, teks, dan sebagian besar set fitur SVG dengan benar selama rasterisasi ini. Tiga peringatan penting. Sumber daya eksternal gagal di bawah CORS: SVG yang merujuk gambar eksternal (<image href="https://other-domain.com/photo.jpg">) atau font eksternal mungkin tidak dimuat jika server cross-origin tidak mengembalikan header CORS yang sesuai, canvas menjadi "tercemar" dan toBlob melempar SecurityError. Sematkan gambar sebagai data URI dan font sebagai @font-face dengan data URI src untuk menghindari ini. SVG yang berisi tag <script> tidak mengeksekusi ketika dimuat sebagai Image, dekoder gambar browser melucuti konteks scripting untuk keamanan. Animasi SMIL diratakan menjadi frame tunggal pada time=0; jika SVG bergantung pada animasi untuk keadaan visualnya, PNG yang dirasterisasi tidak akan menangkapnya. Perbedaan piksel cross-browser: Chrome, Firefox dan Safari menghasilkan output rasterisasi yang sedikit berbeda untuk SVG yang sama karena perbedaan di renderer vektor masing-masing; untuk ikon produksi, render sekali dan kirim PNG daripada bergantung pada konversi per-browser saat runtime.

Memilih Resolusi Output yang Tepat

SVG tidak memiliki resolusi inheren, pilihannya adalah milik Anda. Target umum: ikon listing iOS App Store 1024x1024; ikon listing Android Play Store 512x512 (dengan ikon adaptif in-launcher pada 432x432, dirancang dalam zona aman 264x264); ikon manifest PWA 192x192 dan 512x512; favicon secara historis 16x16, 32x32, 48x48 (favicon.ico modern menggabungkan ketiga ukuran; praktik terbaik modern mengirim icon.svg untuk browser yang mendukungnya plus fallback apple-touch-icon.png 192x192); kartu sosial Open Graph 1200x630; kartu Twitter 1200x675; persegi Instagram 1080x1080; emoji Discord 128x128; emoji Slack 128x128; cetak pada 300 DPI memerlukan 3x dimensi inci dalam piksel (cetak logo 4-inci memerlukan 1200x1200). Untuk rendering kualitas Retina di layar, targetkan 2x ukuran yang ditampilkan, ikon 100x100 yang ditampilkan harus diekspor pada 200x200 agar tetap tajam pada layar Retina.

Cara Menggunakan Konverter Ini

1. Berikan SVG. Lepaskan file .svg ke zona unggah, atau tempel markup SVG mentah ke area teks. Kedua jalur bekerja dengan cara yang sama.
2. Atur dimensi output. Lebar dan tinggi dalam piksel; toggle lock-aspect-ratio mempertahankan proporsi ketika Anda mengubah satu dimensi. Maksimum 8192x8192 (batas ukuran canvas pada sebagian besar browser modern; beberapa hardware mencapai 4096 atau 8192).
3. Pilih latar belakang. Transparan (default, mempertahankan saluran alpha SVG), putih solid, hitam solid, atau warna kustom apa pun. Berguna ketika tujuan tidak mendukung transparansi (beberapa konteks cetak legacy).
4. Konversi dan unduh. Tombol Convert merasterisasi SVG pada ukuran yang dipilih dan menampilkan pratinjau; Download menyimpan PNG ke perangkat Anda.

Lingkup Jujur: Apa yang Dilakukan Alat Ini dan Tidak

Alat ini merasterisasi satu SVG menjadi satu PNG pada ukuran yang dipilih. Itu tidak menghasilkan set ikon multi-ukuran lengkap yang diperlukan app store (1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20 hanya untuk iOS), untuk itu, gunakan alat khusus seperti RealFaviconGenerator atau App Icon Generator. Itu tidak mengoptimalkan PNG yang dihasilkan (gunakan alat SVG Optimizer untuk membersihkan SVG sumber terlebih dahulu; untuk optimasi PNG gunakan kompresor terpisah). Itu tidak menggabungkan output favicon.ico multi-ukuran. Itu tidak menganimasikan, PNG yang diekspor adalah single-frame, bahkan jika SVG memiliki animasi SMIL. Untuk generasi batch banyak ukuran dari satu SVG, gunakan CLI seperti sharp-cli (Node.js) atau resvg-cli (Rust); konversi per-ukuran yang mereka lakukan sama dengan alat ini, hanya dapat diskrip.

Privasi: Mengapa Browser-Saja Penting di Sini

File SVG sering kali berisi aset merek kepemilikan, logo yang sedang berlangsung, ikon produk internal atau file sumber yang disediakan desainer di bawah NDA. Layanan konversi sisi server (CloudConvert, Online-Convert, Convertio) mengunggah SVG Anda ke infrastruktur mereka di mana ia berada di log. Alat ini menjalankan seluruh pipeline rasterisasi di browser Anda melalui Canvas API, verifikasi di tab Network DevTools saat Anda mengklik Convert, atau bawa halaman offline (mode pesawat) setelah dimuat dan konverter masih bekerja. Aman untuk pekerjaan merek yang belum dirilis, ikon produk internal, file desainer yang terikat NDA atau SVG apa pun yang tidak ingin Anda salin ke hard drive orang asing.

Pertanyaan yang Sering Diajukan

Mengapa mengonversi SVG ke PNG alih-alih menggunakan SVG langsung?

Untuk sebagian besar browser modern, Anda tidak perlu. SVG dirender secara native di Chrome, Firefox, Safari, Edge dan Opera, dan merupakan format yang tepat untuk sebagian besar penggunaan web. Konversi diperlukan ketika tujuan tidak mendukung SVG: Microsoft menghentikan SVG inline di Outlook web dan Outlook baru untuk Windows pada September-Oktober 2025; ikon aplikasi iOS / Android harus PNG; layanan cetak-on-demand memerlukan PNG; emoji kustom Discord dan Slack mengunggah PNG; beberapa CMS legacy masih menolak unggahan SVG. Untuk konteks tersebut, Anda merasterisasi sekali dan mengirim PNG.

Pada resolusi berapa saya harus mengekspor?

Cocokkan tujuan. Listing iOS app store: 1024x1024. Android Play Store: 512x512 (ikon adaptif in-launcher: 432x432). Manifest PWA: 192 dan 512. Kartu sosial Open Graph: 1200x630. Persegi Instagram: 1080x1080. Untuk display Retina, ekspor pada 2x ukuran CSS yang ditampilkan, ikon 100x100 harus PNG 200x200 agar tetap tajam. Untuk cetak, 300 DPI berarti 300 piksel per inci yang ditampilkan (cetak logo 4-inci = PNG 1200x1200). Maksimum di sini adalah 8192x8192, yang merupakan batas canvas browser modern.

Mengapa SVG saya kehilangan bagian setelah konversi?

Tiga penyebab umum. Sumber daya eksternal diblokir oleh CORS: jika SVG merujuk gambar atau font di domain lain yang tidak mengembalikan header CORS yang sesuai, canvas menjadi "tercemar" dan ekspor secara diam-diam menjatuhkannya. Sematkan gambar sebagai data URI dan font sebagai @font-face dengan src data URI. Skrip di dalam SVG tidak mengeksekusi: tag <script> dilucuti oleh model keamanan dekoder gambar browser, apa pun yang dihasilkan skrip tidak akan muncul. Animasi SMIL dirender pada time=0 (frame awal); keadaan visual animasi tidak ditangkap. Untuk SVG yang bergantung pada JavaScript atau animasi, render dulu di browser nyata lalu screenshot, atau gunakan Puppeteer headless.

Apakah ia mempertahankan transparansi?

Ya ketika "Transparan" dipilih sebagai latar belakang, PNG mempertahankan saluran alpha SVG, dengan piksel semi-transparan dipertahankan sepenuhnya. Pilih warna solid (putih, hitam, kustom) ketika tujuan tidak mendukung transparansi atau ketika Anda memerlukan warna sekitar tertentu dipanggang ke dalam (beberapa konteks cetak legacy).

Bisakah saya menghasilkan beberapa ukuran dari satu SVG?

Tidak dalam satu klik, alat ini menghasilkan satu PNG per konversi. Untuk generasi set ikon app-store (sekitar selusin ukuran yang diperlukan iOS dan Android), gunakan alat khusus seperti RealFaviconGenerator (web), App Icon Generator (web), atau CLI seperti sharp-cli (Node.js) atau resvg-cli (Rust), konversi per-ukuran yang mereka lakukan adalah rasterisasi gaya Canvas yang sama, hanya diskripkan di banyak ukuran.

Apakah file SVG saya diunggah?

Tidak. Rasterisasi berjalan sepenuhnya di browser Anda melalui Canvas API. SVG Anda dan PNG yang dihasilkan tidak pernah melintasi jaringan, verifikasi di tab Network DevTools saat Anda mengklik Convert, atau bawa halaman offline (mode pesawat) setelah dimuat dan konverter masih bekerja. Aman untuk pekerjaan merek yang belum dirilis, ikon produk internal, file sumber desainer yang terikat NDA atau SVG apa pun yang tidak ingin Anda salin ke hard drive orang asing.

Alat terkait