LocalToolsKumpulan alat browser offline

Kategori: Alat pengembang

SVG ke Latar Belakang CSS

Ide kami sendiriAlatnya tidak ada?

Ubah markup SVG inline menjadi data URI background-image

Tempel markup SVG dan dapatkan data URI CSS background-image, lengkap dengan baris background-repeat, background-size, dan background-position, dengan pratinjau langsung agar Anda bisa memeriksanya sebelum menyalin.

Keluaran
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

SVG tidak pernah keluar dari peramban; SVG langsung disandikan ke dalam nilai CSS.

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

Ikon atau pola SVG kecil sering kali lebih ringan sebagai data URI CSS inline dibandingkan sebagai permintaan gambar terpisah, tetapi menyandikan markup secara manual agar tetap valid di dalam nilai url(...) mudah salah: tanda kutip, tanda kurung sudut, dan baris baru semuanya perlu diloloskan dengan hati-hati. Alat ini melakukan penyandian itu untuk Anda, menjaga hasilnya tetap singkat dan mudah dibaca alih-alih beralih ke base64, dan menampilkan pratinjau latar belakang langsung pada pengaturan pengulangan dan ukuran yang Anda pilih.

Cara memakainya

  1. Tempel markup SVG yang ingin Anda pakai sebagai latar belakang.
  2. Pilih bagaimana latar belakangnya berulang dan berskala.
  3. Salin deklarasi CSS-nya dan tempel ke lembar gaya Anda.

Privasi

Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.

Pertanyaan yang sering diajukan

Apakah ini sama dengan menyandikan SVG ke base64?
Tidak. Alat ini hanya meloloskan segelintir karakter yang seharusnya merusak nilai CSS, sehingga data URI-nya terasa jauh lebih singkat dan tetap mudah dibaca manusia, tidak seperti blok base64.
Apakah SVG-nya diunggah?
Tidak. Penyandiannya terjadi dengan penggantian string sederhana di tab peramban Anda; markup yang Anda tempel tidak pernah keluar dari halaman.
Bisakah saya memakai currentColor atau variabel CSS di dalam SVG-nya?
currentColor berfungsi karena diselesaikan oleh peramban saat menggambar, tetapi custom property CSS yang dirujuk di dalam atribut SVG-nya sendiri tidak, karena data URI background-image bersifat statis, bukan lembar gaya yang hidup.

Kembali ke semua alat