Bagaimana cara mengonversi SVG ke PNG tanpa kehilangan font?

Mengapa output SVG ke PNG berukuran 2x dari ukuran yang dinyatakan, dan mengapa sandbox browser secara diam-diam mengabaikan font eksternal dan gambar yang terhubung selama proses render.

August 9, 2026

Sebuah SVG tidak memiliki piksel di dalamnya. Ini adalah XML: jalur, pengisian, viewBox dan mungkin elemen <text> yang menamai font yang sebenarnya tidak ada di dalam file. Merasterisasi ke PNG berarti memilih grid piksel dan melukis bentuk-bentuk tersebut di atasnya, sehingga dua hal menentukan apakah Anda menyukai hasilnya. Berapa banyak piksel yang Anda minta, dan apa yang diizinkan untuk dimuat renderer saat melukis.

Kami menjalankan render itu di dalam browser Anda. File masuk ke dalam URL blob, elemen <img> memuatnya, browser melukisnya ke dalam OffscreenCanvas dan encoder WebAssembly menulis PNG. Aplikasi ini tidak memiliki rute API dan tidak ada tindakan server, jadi logo yang belum dirilis tidak pernah berada di ember sementara seseorang menunggu penghapusan. Sebagian besar konverter SVG ke PNG mengunggah terlebih dahulu dan menjanjikan pembersihan nanti. Kami tidak pernah mengirim byte ke mana pun, yang merupakan inti dari model privasi kami.

Apa yang sebenarnya terjadi ketika browser merasterisasi SVG?

SVG Anda diberikan kepada elemen <img>, dan detail itu menggerakkan segalanya di halaman ini. SVG yang dimuat sebagai gambar berjalan dalam mode pemrosesan terbatas di mana skrip tidak dieksekusi dan referensi eksternal tidak diambil, yang didefinisikan oleh aturan kesesuaian SVG 2 sebagai mode pemrosesan yang aman. Setelah pemuatan selesai, kami melukisnya dengan drawImage ke dalam OffscreenCanvas, membaca piksel kembali, mengkodekan dengan @jsquash/png dan kemudian menjalankan oxipng pada level 3 di atas byte. Langkah itu tidak kehilangan data. Alpha bertahan sepanjang perjalanan, jadi logo transparan keluar transparan.

Berapa ukuran PNG yang sebenarnya?

Konverter kami merender pada dua kali ukuran intrinsik SVG. SVG 500x500 keluar menjadi 1000x1000. Penggandaan ini memberi Anda file berkualitas retina secara gratis, dan ini juga yang sering menjadi masalah ketika spesifikasi menuntut jumlah piksel yang tepat. Jika browser melaporkan tidak ada ukuran intrinsik yang dapat digunakan sama sekali, kami menggantinya dengan 1024x1024 sebelum menggandakan, sehingga PNG berukuran 2048x2048. Spesifikasi CSS Images menjelaskan mengapa ukuran bisa hilang sejak awal: elemen yang diganti tanpa lebar atau tinggi intrinsik kembali ke ukuran objek default, dan viewBox sendiri menyediakan rasio tanpa ukuran yang terlampir. Jadi atur lebar dan tinggi pada <svg> root menjadi setengah dari target Anda. 256 masuk, 512 keluar.

Mengapa teks saya keluar dengan font yang salah?

Ini adalah keluhan yang paling umum dan ini bukan bug di konverter. Aturan @font-face yang menunjuk ke URL .woff2 dihitung sebagai referensi eksternal, jadi mode aman memblokir pengambilan itu sebelum dimulai. Font yang dimuat oleh halaman di sekitar gambar juga tidak dapat diakses, karena SVG dalam <img> adalah dokumen terpisah yang melakukan resolusi fontnya sendiri. Apa yang Anda dapatkan adalah apa pun yang dapat dicocokkan mesin dari daftar font-family, yang di laptop peninjau berarti fallback yang tidak pernah Anda pilih. Solusinya adalah berhenti mengirim teks sebagai teks. Illustrator menyebutnya Type > Create Outlines. Inkscape menyebutnya Path > Object to Path. Keduanya mengonversi setiap glyph menjadi jalur, file sedikit bertambah dan render berhenti bergantung pada mesin.

Mengapa foto di dalam SVG saya hilang?

Aturan yang sama, gejala yang berbeda. Jika SVG Anda menarik bitmap melalui elemen <image> dengan URL https absolut, URL itu tidak diambil, dan PNG kembali dengan lubang di mana foto seharusnya berada. URI data: berfungsi dengan baik, karena tidak ada permintaan jaringan yang tersisa untuk diblokir. Ada alasan kedua untuk menyematkan: bitmap lintas asal yang dilukis ke dalam canvas mengotori dan membaca piksel kembali kemudian melemparkan SecurityError. Kegagalan itu setidaknya mengumumkan dirinya. Referensi yang diblokir diam-diam, yang menghabiskan waktu orang selama satu sore. Buka file di editor teks dan cari http sebelum Anda mengonversi.

Bisakah saya mengonversi PNG kembali menjadi SVG?

Tidak, dan kami tidak berpura-pura sebaliknya. Konverter kami mendekode SVG dan tidak dapat mengkodekannya: encoder dalam build menulis JPEG, PNG, WebP, AVIF dan PDF, dan tidak ada dari 24 pasangan di 11 format yang memiliki SVG sebagai target. Berpindah dari piksel kembali ke jalur adalah pelacakan, mesin menebak di mana tepi berada, dan wordmark yang dilacak jarang cukup dekat untuk dikirim. Ekspor ulang dari yang asli jika Anda masih memilikinya. Jika yang Anda butuhkan adalah raster dalam ukuran yang lebih besar, upscaler kami menjalankan Real-ESRGAN dan selalu menulis PNG: itu mengubah file 400x269 menjadi 1600x1076 pada 4x.

Bagaimana cara mengubah SVG menjadi set favicon?

Generator ikon mengambil SVG secara langsung, yang tidak dilakukan oleh kompresor, resizer dan pemotong: ketiga alat itu hanya menerima JPEG, PNG, WebP, AVIF dan GIF. Ini merender SVG Anda ke dalam kanvas persegi yang disesuaikan dengan dimensi terbesarnya atau 512 piksel, mana yang lebih besar, sehingga ikon 64x64 tetap mendapatkan kanvas 512 untuk diubah ukurannya. Hasilnya adalah tujuh file: favicon.ico yang berisi 16, 32 dan 48, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png 180px, android-chrome-192x192.png, android-chrome-512x512.png dan site.webmanifest. Mengapa satu .ico itu masih mendapatkan 4,6 KB adalah argumen terpisah. Satu file pada satu waktu, batas 10 MB. Konverter adalah alat batch: 10 file dan 50 MB per proses.

Haruskah saya mengompres PNG setelahnya?

Biasanya, dan mode lebih penting daripada slider mana pun. Pada PNG transparan 942,4 KB pada 900x606, jalur tanpa kehilangan (oxipng level 3) keluar pada 383,9 KB, pemotongan 59% dengan setiap piksel identik dengan input. Jalur palet (imagequant) membawa file yang sama ke 98,3 KB, pemotongan 90%, dengan menguranginya menjadi 256 warna. Seni vektor datar adalah kasus terbaik untuk mode palet, karena logo dengan enam pengisian tidak memiliki 256 warna untuk dilepaskan. Mengompresi juga menghapus semua metadata. Jalankan keduanya di kompresor dan simpan yang mana pun yang bertahan.

Lakukan ini selanjutnya: buka SVG di editor teks, cari http untuk menangkap font dan gambar yang terhubung, outline teks yang aktif, lalu atur lebar dan tinggi pada <svg> root menjadi setengah dari ukuran target Anda dan seret ke /convert/svg-to-png. Jika PNG ditujukan untuk halaman web, kirim langsung ke kompresor, dan angka PNG dibandingkan WebP untuk file dengan transparansi memberi tahu Anda apakah perlu mengubah format sama sekali. Jika ditujukan untuk dokumen, catatan kami tentang JPG ke PDF mencakup ukuran halaman yang dihasilkan oleh gambar yang dikonversi.