Konverter SVG ke CSS
Mengonversi kode SVG ke CSS background-image data URI. Mendukung format URL-encoded dan Base64.
Tentang alat ini
SVG to CSS Converter mengubah kode SVG menjadi format data URI untuk digunakan dalam properti CSS background-image, menghilangkan kebutuhan akan file gambar terpisah atau permintaan HTTP. Dengan menyematkan data SVG langsung ke dalam lembar gaya Anda, Anda mengurangi ketergantungan eksternal, meningkatkan kinerja pemuatan halaman, dan menyederhanakan manajemen aset. Alat ini mendukung format pengkodean URL dan Base64, masing-masing dengan keuntungan yang berbeda tergantung pada prioritas kinerja dan preferensi keterbacaan Anda.
Untuk mengonversi SVG ke CSS, tempel kode SVG Anda ke area input, pilih metode pengkodean yang Anda sukai, dan klik Konversi. Format yang dikodekan URL menghasilkan keluaran yang lebih pendek dan lebih mudah dibaca dan debug, sementara Base64 menciptakan representasi yang lebih ringkas yang dimampatkan lebih baik dalam gzip. Alat ini segera menampilkan keluaran CSS dan pratinjau langsung SVG yang dirender, membantu Anda memverifikasi konversi sebelum menyalinnya ke lembar gaya Anda.
Pendekatan ini sangat berguna untuk ikon kecil, logo, dan grafis sederhana yang tertanam dalam aplikasi web. Dengan menyimpan data SVG dalam CSS, Anda menghindari masalah pembatalan cache, mengurangi total permintaan jaringan, dan bahkan dapat memanipulasi properti SVG melalui pseudo-class CSS seperti :hover dan :active. Pertimbangkan untuk menyimpan SVG kompleks sebagai file terpisah untuk pemeliharaan yang lebih baik, tetapi URI data inline berfungsi baik untuk komponen yang jarang berubah.
Pertanyaan yang Sering Diajukan
Implementasi Kode
import base64
from urllib.parse import quote
def svg_to_css_url_encoded(svg: str) -> str:
encoded = quote(svg, safe="")
return f'background-image: url("data:image/svg+xml,{encoded}");'
def svg_to_css_base64(svg: str) -> str:
b64 = base64.b64encode(svg.encode("utf-8")).decode("ascii")
return f'background-image: url("data:image/svg+xml;base64,{b64}");'
svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#6366f1"/></svg>'
print("URL encoded:")
print(svg_to_css_url_encoded(svg))
print()
print("Base64:")
print(svg_to_css_base64(svg))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.