Konverter SVG ke Latar CSS untuk Kode Data URI CSS
Tempelkan atau jatuhkan SVG untuk membuat background-image CSS siap pakai dengan data URI. Pengodean URL adalah opsi yang disukai untuk hasil yang minimal dan dapat dibaca, dan Base64 juga tersedia. Pilih gaya tanda kutip, terapkan minifikasi SVG ringan, atur background-size, background-repeat, dan background-position, lalu periksa pratinjau langsung.
Konverter SVG ke Latar CSS mengubah markup SVG menjadi deklarasi background-image CSS siap pakai yang berisi data URI. Tempelkan atau jatuhkan SVG untuk membuat output, lalu gunakan pratinjau langsung untuk meninjaunya. Ini berguna saat Anda ingin menggunakan SVG sebagai latar CSS, bukan merujuknya sebagai file gambar terpisah.
Konverter menawarkan pengodean URL dan Base64 untuk data URI. Pengodean URL lebih disukai untuk hasil yang minimal dan dapat dibaca, sedangkan Base64 tersedia sebagai alternatif. Anda juga dapat memilih gaya tanda kutip, menerapkan minifikasi SVG ringan, dan mengatur background-size, background-repeat, dan background-position. Opsi ini membantu membentuk CSS yang dihasilkan dan pratinjaunya tanpa mengubah tujuan dasar konversi.
SVG adalah format gambar vektor berbasis markup, sedangkan CSS digunakan untuk mendeskripsikan aturan presentasi untuk halaman web. Data URI merepresentasikan konten dalam URI, memungkinkan konten SVG muncul dalam nilai background-image CSS. Beralih di antara representasi ini dapat membantu saat Anda ingin menempatkan SVG dalam stylesheet sebagai latar dan mengonfigurasi tampilannya dengan properti background CSS.
Konverter berjalan sepenuhnya di browser Anda: input Anda diproses di perangkat Anda dan tidak dikirim ke server. Ia juga berfungsi offline setelah halaman dimuat, sehingga Anda dapat mengonversi SVG tanpa koneksi aktif. Developer dan insinyur DevOps dapat menggunakannya untuk konversi cepat di meja mereka atau saat bekerja pada mesin lain, tanpa memasang apa pun secara lokal.
Langkah 1: Tempelkan atau jatuhkan SVG Anda ke area input. Konverter menggunakan konten itu untuk membuat data URI background-image CSS.
Langkah 2: Pilih pengodean URL atau Base64 untuk data URI. Pengodean URL lebih disukai untuk hasil yang minimal dan dapat dibaca.
Langkah 3: Sesuaikan opsi yang tersedia, termasuk gaya tanda kutip dan minifikasi SVG ringan. Atur background-size, background-repeat, dan background-position seperlunya.
Langkah 4: Tinjau pratinjau langsung untuk memeriksa hasilnya, lalu salin CSS yang dihasilkan untuk digunakan dalam proyek Anda.
Kasus penggunaan: Mengonversi SVG menjadi background-image CSS untuk stylesheet tanpa memasang alat lokal.
Kasus penggunaan: Menyiapkan grafik latar saat bekerja pada mesin yang tidak memiliki pengaturan pengembangan biasa Anda.
Kasus penggunaan: Mengonversi SVG internal tanpa menempelkan isinya ke layanan pihak ketiga.
Kasus penggunaan: Membandingkan data URI ter-enkode URL dan Base64 saat memilih cara merepresentasikan SVG dalam CSS.
Kasus penggunaan: Menyesuaikan background-size, background-repeat, dan background-position, lalu menggunakan pratinjau langsung untuk memeriksa hasilnya.
Kasus penggunaan: Menerapkan minifikasi SVG ringan saat menyiapkan latar SVG untuk aturan CSS.