Cara menggunakan
- Tempel string Base64 atau URI data:image/svg+xml;base64.
- Periksa pratinjau serta format dan dimensi yang terdeteksi.
- Biarkan Unduh sebagai pada SVG. Untuk masukan SVG, file disimpan sebagai teks SVG.
- Unduh file .svg dan buka di editor jika Anda ingin membaca atau mengubah markupnya.
Menemukan SVG di dalam Base64
Tidak seperti format gambar lainnya, SVG adalah teks XML biasa. File yang diawali dengan <svg dienkode menjadi Base64 yang dimulai dengan PHN2Zy, sedangkan file yang diawali dengan deklarasi XML (<?xml) dimulai dengan PD94bWwg. SVG Base64 umum dijumpai pada gambar latar belakang CSS, set ikon, ekspor alat desain, dan template email. Tipe MIME-nya image/svg+xml.
Banyak data URI SVG sebenarnya sama sekali bukan Base64, melainkan teks dengan pengodean persen, seperti data:image/svg+xml,%3Csvg.... Alat ini mengharapkan Base64, jadi urai data URI semacam itu dengan Generator Data URI.
Membaca kode SVG
Pratinjau menunjukkan bagaimana grafik dirender, tetapi bagian yang menarik sering kali justru markupnya: data path, warna, viewBox, atau font yang disematkan. Unduh file sebagai File asli atau SVG lalu buka di editor teks apa pun, atau tempel Base64 yang sama ke Dekode Base64 untuk langsung melihat XML-nya sebagai teks.
Raster ke SVG hanyalah pembungkus, bukan vektorisasi
Jika data Base64 berupa PNG, JPEG, atau bitmap lain, memilih SVG menghasilkan file SVG yang berisi piksel asli di dalam elemen <image>. Cara ini berguna jika suatu alat hanya menerima file SVG, tetapi gambar tidak dijiplak menjadi bentuk: gambar tetap buram saat diperbesar, dan filenya lebih besar daripada bitmap karena piksel disimpan sebagai Base64 di dalamnya. Untuk path vektor yang sesungguhnya, gunakan perangkat lunak tracing seperti Potrace atau fitur Trace Bitmap di Inkscape.
Menangani SVG yang tidak tepercaya
SVG dapat berisi elemen <script>, atribut event handler, dan tautan ke sumber daya eksternal. Browser memblokir semua itu ketika SVG ditampilkan sebagai gambar, melalui tag <img> atau latar belakang CSS. Skrip dapat berjalan dan sumber daya eksternal dapat dimuat ketika file dibuka langsung di tab browser atau markupnya ditempel inline ke dalam halaman. Periksa atau sanitasi SVG dari sumber yang tidak dikenal sebelum menggunakannya dengan cara itu.
Pertanyaan yang sering diajukan
Bisakah alat ini mengubah PNG menjadi SVG vektor sungguhan?
Tidak. Mengonversi bitmap ke SVG hanya menyematkan gambar di dalam file SVG. Hasilnya berskala seperti bitmap aslinya, bukan seperti gambar vektor.
Mengapa data URI SVG saya gagal didekode?
;base64,. Jika tidak, SVG tersebut menggunakan pengodean persen atau berupa teks mentah, bukan Base64. Generator Data URI dapat menguraikannya.Apakah aman mendekode SVG dari sumber yang tidak dikenal?
Mendekode dan menyimpannya tidak berbahaya, karena hasilnya hanyalah teks. Skrip di dalam SVG hanya dapat berjalan ketika SVG dibuka sebagai dokumen atau disisipkan inline ke halaman web.
Mengapa font atau gambar tertaut hilang setelah SVG dikonversi ke PNG?
Untuk merasterisasi SVG, browser memuatnya sebagai gambar, dan dalam mode itu SVG tidak dapat mengambil file eksternal. Font web dan gambar tertaut dilewati, lalu font default digunakan sebagai gantinya. Sematkan font dan gambar di dalam SVG agar file tersebut mandiri.