Cara menggunakan
- Seret file .svg ke area seret-lepas, klik untuk memilih file, atau tempel gambar.
- Pertahankan Format asli untuk mengenkode markup SVG itu sendiri, atau pilih PNG, JPEG, atau WebP di Konversi ke untuk mengubahnya menjadi piksel.
- Jika Anda merasterisasinya, atur Lebar maks. untuk menentukan ukuran pikselnya.
- Salin keluaran CSS background-image untuk stylesheet, atau versi data URI, Base64 mentah, tag img, atau Markdown.
SVG sebagai data URI
SVG (Scalable Vector Graphics, tipe MIME image/svg+xml) mendeskripsikan bentuk sebagai teks XML, sehingga tetap tajam di ukuran berapa pun. Base64-nya biasanya diawali dengan PHN2Zy (<svg yang sudah dienkode) atau PD94bWw jika file diawali dengan deklarasi XML.
Saat SVG dipakai sebagai gambar, elemen akarnya harus memiliki xmlns="http://www.w3.org/2000/svg". Banyak cuplikan inline yang disalin dari HTML tidak menyertakannya, sehingga data URI tidak menampilkan apa pun. Sumber daya eksternal juga diblokir dalam mode gambar, jadi font web dan gambar tertaut di dalam SVG tidak akan dimuat; ubah teks menjadi path atau sematkan sumber daya tersebut terlebih dahulu.
Base64 atau pengodean URL?
Karena SVG sudah berupa teks, data URI dapat membawa markup secara langsung dengan hanya beberapa karakter yang dienkode persen (<, >, #, %, dan tanda kutip). Untuk ikon biasa di CSS, cara ini lebih pendek daripada Base64 dan lebih baik dikompresi dengan gzip. Base64 adalah pilihan yang lebih aman jika string melewati sistem yang merusak tanda kutip atau karakter khusus, atau jika API mengharapkan Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Pengodean persen */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Untuk membuat bentuk berpengodean persen, gunakan Generator Data URI dan pilih Pengodean persen.
Sanitasi SVG yang tidak tepercaya
SVG dapat berisi elemen <script>, atribut event handler seperti onload, dan tautan ke dokumen lain. Browser tidak menjalankan skrip di SVG yang ditampilkan melalui <img> atau latar belakang CSS, tetapi file yang sama dapat menjalankannya jika disisipkan inline ke HTML atau dibuka secara langsung. Jika pengguna dapat mengunggah file SVG ke aplikasi Anda, sanitasi file tersebut, misalnya dengan DOMPurify, sebelum Anda menyimpan atau menyematkannya. Base64 hanya menyembunyikan markup dari pandangan sekilas; Base64 tidak membuatnya aman.
Pertanyaan yang sering diajukan
Mana yang lebih baik untuk SVG, Base64 atau pengodean URL?
Untuk SVG di CSS, pengodean URL biasanya lebih kecil dan tetap mudah dibaca. Base64 lebih andal jika string melewati sistem lain atau jika API mewajibkan Base64.
Mengapa data URI SVG saya tidak tampil?
xmlns yang tidak ada pada elemen akar, karakter # yang tidak di-escape dalam URI berpengodean persen, serta font atau gambar yang dimuat SVG dari file lain.Bisakah saya mengonversi SVG menjadi string Base64 PNG?
Bisa. Pilih PNG di Konversi ke. Browser merender SVG menjadi piksel, dan opsi Lebar maks. memungkinkan Anda memperkecil hasilnya.