Latar CSS
Gratis, tanpa daftar, berjalan di peramban Anda.
SVG yang sama, dikodekan persen ke dalam data URI `background-image`. Pakai ini ketika Anda tidak bisa menambah elemen ke halaman dan harus menghias elemen yang sudah ada — sebuah bagian, sebuah kartu, sebuah header yang markahnya bukan kendali Anda.
Sebuah ekspor Latar CSS, dipotong sampai beberapa baris pertama
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}Yang perlu diketahui
- Tanpa elemen tambahan dan tanpa permintaan jaringan: bentuknya ikut di dalam lembar gaya.
- Dikodekan persen alih-alih base64, yang kira-kira sepertiga lebih kecil untuk gambar yang sama.
- Setiap `#` dikodekan, dan itulah beda antara latar yang muncul dan latar yang diam-diam tidak.
- Lebih besar daripada SVG mentah, karena pelolosan memakan tiga karakter untuk setiap satu yang digantikannya.
Dukungan peramban
Universal. Data URI di `background-image` jalan di mana-mana. Satu-satunya jebakan kompatibilitas adalah pengodean, bukan dukungan — dan itu ditangani di keluarannya alih-alih diserahkan kepada Anda.
Ukuran di seluruh prasetel
Setiap prasetel yang bisa diekspresikan format ini, diukur sebagaimana generator mengeluarkannya. Yang terkecil adalah Heksagon dengan 312 bita; yang terbesar adalah Gelombang berlapis dengan 1.071 bita. Jumlah titiklah yang menentukan perbedaannya — setiap titik tambahan menambah satu ruas kubik penuh berisi koordinat.
| Format | Ukuran |
|---|---|
| Heksagon | 312 B |
| Kristal | 317 B |
| Permata bersegi | 343 B |
| Segitiga membulat | 378 B |
| Puncak gunung | 392 B |
| Sapuan | 407 B |
| Zigzag tajam | 425 B |
| Gelombang dalam | 443 B |
| Kerikil | 455 B |
| Tepi awan | 456 B |
| Lengkung potong | 480 B |
| Gelombang halus | 483 B |
| Blob halus | 491 B |
| Anak tangga | 519 B |
| Bergelombang | 543 B |
| Blob organik | 563 B |
| Kilau | 569 B |
| Gelombang organik | 639 B |
| Bintang | 712 B |
| Gelombang footer | 718 B |
| Bunga | 718 B |
| Gelembung | 720 B |
| Tepi piksel | 740 B |
| Cipratan | 802 B |
| Riak | 816 B |
| Gelombang berlapis | 1.071 B |
Lebih rinci
Inilah ekspor yang punya jebakan sungguhan. Sebuah `#` yang tidak dikodekan di dalam data URI mengakhiri URL: peramban memperlakukan segala sesuatu sesudahnya sebagai pengenal fragmen, SVG-nya jadi cacat, dan latarnya sama sekali tidak muncul — tanpa galat konsol dan tanpa entri jaringan untuk dicari. Karena setiap warna dalam markahnya adalah literal heksadesimal, isian paling pertama sudah memotong seluruhnya. Sebagian generator menghindarinya dengan jatuh ke base64, yang benar tetapi tak perlu-perlu amat lebih besar. Di sini `%` diloloskan lebih dulu dan `#` tepat sesudahnya, dan hanya urutan itu yang berhasil.
Pertanyaan
Bentuk apa saja yang bisa jadi Latar CSS?
Format ini mencakup Gelombang, Blob. Itu batasan nyata, bukan keterbatasan alat ini: kalau sebuah generator tidak ada dalam daftar itu, formatnya memang tidak bisa mengekspresikannya, dan tetap menawarkannya berarti menyerahkan sesuatu yang diam-diam menggambar bentuk yang salah.
Seberapa besar ekspor Latar CSS?
Antara 312 dan 1.071 bita di 26 prasetel yang mendukungnya. Lebih sedikit titik adalah tuas yang berpengaruh; kehalusan dan warna tidak memakan biaya.
Bisakah saya menyuntingnya manual setelahnya?
Bisa. Keluarannya teks biasa tanpa komentar generator, tanpa markah pengenal, dan tanpa tautan kembali ke sini. Ganti warnanya, ubah nama kelasnya, atau tempel jalurnya ke SVG Anda sendiri — tidak ada apa pun di hilir yang bergantung pada ia tetap seperti semula.
Setiap angka dan setiap bentuk di halaman ini dihasilkan dengan menjalankan generatornya saat build, jadi semuanya menggambarkan alat yang sebentar lagi Anda pakai, bukan versi yang pernah ada.