Pengkonverter Latar Belakang SVG ke CSS Kodekan kode SVG sebagai latar belakang-gambar CSS menggunakan pengkodean URI data.

🎨

SVG ke Latar Belakang CSS

Kodekan kode SVG sebagai latar belakang-gambar CSS menggunakan pengkodean URI data.

Tempelkan kode SVG

Masukkan atau tempelkan tanda markup SVG Anda ke dalam bidang input.

Atur properti latar belakang

Konfigurasikan pengaturan ukuran latar belakang, ulangi, dan posisi.

Salin CSS

Pratinjau SVG sebagai latar belakang dan salin kode CSS.

Loading tool...

What Is SVG ke Latar Belakang CSS?

Alat SVG ke CSS Background mengubah kode SVG menjadi gambar latar belakang CSS menggunakan pengkodean URI data. Teknik ini menyematkan SVG langsung dalam CSS tanpa memerlukan file gambar terpisah atau permintaan HTTP. Cukup tempel kode SVG Anda, konfigurasikan ukuran latar belakang, ulangi latar belakang, dan posisi latar belakang, dan alat akan menghasilkan CSS yang dikodekan. Pengkodean URI data menggantikan karakter khusus (seperti <, >, #) dengan ekivalen yang aman untuk URL sehingga SVG dapat disematkan dengan aman dalam fungsi url() CSS. Pratinjau menampilkan SVG yang diterapkan sebagai latar belakang pada elemen sampel. Pendekatan ini ideal untuk ikon kecil, pola, dan elemen dekoratif yang ingin Anda sertakan dalam CSS tanpa ketergantungan file eksternal.

Why Use SVG ke Latar Belakang CSS?

Tidak perlu file gambar terpisah-SVG disematkan langsung dalam CSS
Menghilangkan permintaan HTTP untuk aset SVG kecil
Ukuran latar belakang, ulangi, dan posisi yang dapat dikonfigurasikan
Pratinjau langsung menampilkan SVG sebagai latar belakang CSS

Common Use Cases

Latar Belakang Ikon

Sematkan ikon SVG kecil langsung dalam CSS untuk tombol dan penanda daftar.

Latar Belakang Pola

Kodekan pola SVG berulang sebagai latar belakang CSS tanpa file gambar.

Elemen Dekoratif

Tambahkan dekorasi SVG ke pseudo-elemen melalui latar belakang CSS.

Templat Email

Sematkan grafik SVG dalam CSS untuk templat email di mana gambar eksternal mungkin diblokir.

Technical Guide

URI data SVG menggunakan format: url("data:image/svg+xml,<encoded-svg>"). Konten SVG dikodekan URL dengan mengganti karakter khusus: < menjadi %3C, > menjadi %3E, # menjadi %23, dan tanda kutip diubah menjadi tanda kutip tunggal. Pengkodean ini lebih efisien daripada base64 untuk SVG karena mempertahankan kemampuan baca dan biasanya lebih kecil. Properti gambar latar belakang menerima URI data, dan properti latar belakang standar (ukuran, ulangi, posisi) mengontrol rendering. Untuk SVG besar, pertimbangkan untuk menggunakan file eksternal sebagai gantinya, karena URI data yang besar meningkatkan ukuran file CSS dan tidak dapat di-cache secara independen. Ukuran latar belakang: contain menskalakan SVG agar sesuai dengan elemen sambil mempertahankan rasio aspek. Ukuran latar belakang: cover mengisi elemen, berpotensi memotong SVG. Nilai piksel atau persentase khusus memberikan kontrol yang tepat.

Tips & Best Practices

1
Gunakan pengkodean URL (bukan base64) untuk ukuran file yang lebih kecil dengan SVG
2
Hapus atribut SVG yang tidak perlu untuk meminimalkan ukuran yang dikodekan
3
Jaga SVG tetap kecil-data URI besar dapat membuat CSS membengkak dan tidak dapat di-cache secara terpisah
4
Gunakan tanda kutip tunggal dalam SVG untuk menghindari masalah penghapusan dalam CSS

Related Tools

Polanya Latar Belakang CSS

Buat pola latar belakang CSS berulang, termasuk garis-garis, papan catur, titik-titik, dan lain-lain.

🎨 CSS & Design

Pencarian Ikon

Cari dan sesuaikan ikon SVG sumber terbuka dengan ukuran, warna, dan goresan yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Variabel CSS

Buat properti kustom CSS (variabel) untuk warna, spasi, dan tipografi.

🎨 CSS & Design

Pembuat Pola SVG

Buat pola berulang berbasis SVG untuk latar belakang CSS dengan berbagai bentuk.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah pengkodean data URI lebih baik daripada base64 untuk SVG?

Ya, SVG yang dikodekan dengan URL biasanya lebih kecil daripada base64 dan tetap dapat dibaca oleh manusia dalam CSS.

Q Bisakah saya menggunakan SVG apa saja?

Ya, kode SVG valid apa pun dapat dienkripsi. Hapus atribut dan spasi yang tidak perlu untuk ukuran optimal.

Q Apakah ini berfungsi di semua browser?

Ya, data URI SVG dalam latar belakang CSS didukung oleh semua browser modern.

Q Bagaimana dengan SVG besar?

Untuk SVG besar atau kompleks, gunakan file SVG eksternal sebagai gantinya. Data URI tidak dapat di-cache secara independen dari CSS.

Q Bisakah saya menggunakan data URI SVG dalam tag <img>?

Ya, format data URI yang sama berfungsi dalam atribut src img dan latar belakang CSS.

About This Tool

SVG ke Latar Belakang CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.