SVG sebagai Gambar Latar CSS: Data URI yang Benar

SVG Nexus · Terakhir diperbarui: November 2026

Latar CSS tidak dapat menunjuk ke markup sebaris, jadi SVG harus berjalan di dalam sebuah URL sebagai data URI yang dikodekan. Pengkodean itulah yang membuat semua orang tersandung: hindari karakter #, perhatikan tanda kutip, pertahankan viewBox — dan selesaikan pewarnaan ulang dengan topeng alih-alih fill.

Kapan latar adalah alat yang tepat

Latar adalah untuk dekorasi yang berulang atau duduk di belakang konten: pola halus, ikon di dalam sebuah pseudo-elemen, tanda centang yang menyatu ke kotak centang khusus. Segera setelah sebuah gambar membawa makna, tempatnya adalah di <img> atau sebaris, tempat ia dapat memiliki teks alternatif dan digayakan langsung. Latar tidak memiliki kehadiran sama sekali di pohon aksesibilitas, jadi jagalah tetap murni visual dan jangan pernah biarkan satu latar menjadi satu-satunya pembawa informasi.

Pengkodean: aturan yang mematahkan semua orang

Sebuah data URI adalah berkas yang diloloskan ke dalam sebuah URL: url("data:image/svg+xml,..."). Tiga aturan menentukan apakah ia tampil. Pertama, setiap # menjadi %23 — warna penuh dengan nilai heksadesimal, dan # mentah mengakhiri URL pada titik itu, memotong gambar dalam diam. Kedua, disiplin tanda kutip: URL di dalam tanda kutip ganda dan tanda kutip tunggal di dalam SVG, atau stringnya putus. Ketiga, SVG yang disematkan harus mempertahankan viewBox-nya (dan width/height eksplisit), karena latar tidak punya cara lain untuk mengetahui proporsi intrinsik karyanya. Pengkodean base64 menghindari semua pelolosan dengan biaya sekitar sepertiga byte lebih banyak; UTF-8 dengan pelolosan hati-hati lebih kecil dan tetap terbaca. Perkecil SVG-nya dulu — spasi dan komentar di sini adalah muatan.

Ukur dan posisikan seperti gambar

Setelah dikodekan, ia berperilaku seperti gambar latar mana pun: background-size menerima contain, cover, atau panjang pasti (ikon persegi biasanya menginginkan ukuran tampilannya, misalnya 20px), background-position memusatkannya, dan background-repeat mengubin secara bawaan — atur no-repeat kecuali pengubinan memang tujuannya. Karena SVG membawa viewBox-nya sendiri, perilaku mirip contain tetap tajam pada setiap rasio piksel perangkat.

Mewarnai ulang: berhenti melawan fill, gunakan topeng

SVG latar tidak dapat mendengar lembar gaya Anda: isian-isiannya telah dibekukan ke dalam URL. Varian per tema berarti mengodekan ulang berkas dengan nilai heksadesimal lain — bisa untuk dua tema, menyedihkan untuk lima. Alternatif modernnya adalah tidak mengirim warna sama sekali: gunakan SVG sebagai mask-image di atas background-color sederhana. Elemen mengecat background: currentColor (atau variabel tema apa pun), dan -webkit-mask / mask dengan data URI yang sama memotongnya menjadi bentuk ikon. Satu aset, setiap keadaan dan tema, transisi hover pada warna termasuk. Simpan versi latar sederhana sebagai cadangan di tempat dukungan topeng menjadi kekhawatiran.

Menghasilkan string-nya

Meloloskan dengan tangan adalah cara bug %23 lahir; hasilkan deklarasinya. Para pengonversi — termasuk alat SVG-ke-CSS di situs ini — mengambil kode sebuah ikon dan mengeluarkan bentuk latar (dan topeng) yang dikodekan, jadi alurnya adalah: pilih ikon, salin SVG-nya dari halamannya, konversi, tempel. SVG yang mendasari dalam katalog ini mempertahankan viewBox dan ID beruang-namanya, sehingga hasil tempel berskala persis seperti aslinya.

.icon-mask {
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: url("/icon-library-assets/lucide/lucide-search.svg") center / contain no-repeat;
  mask: url("/icon-library-assets/lucide/lucide-search.svg") center / contain no-repeat;
}

← Panduan Praktis dan Tutorial SVG