Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Lembar Sprite SVG

PengembangMatematika

IKLAN · HAPUS?

MEMASUKKAN

KELUARAN

Sisi klien

Unggah file SVG dan klik Generate untuk membuat sprite sheet.

Kertas Gambar Sprite SVG

Contoh Penggunaan Jenis

Contoh Penggunaan

Snippet HTML inline

IKLAN · HAPUS?

Memandu

Generator Lembar Sprite SVG

Kombinasikan beberapa file SVG menjadi satu lembar sprite untuk pemuatan ikon yang efisien. Unggah SVGs melalui drag-and-drop, tampilkan dalam grid, edit ID simbol, dan unduh file sprite gabungan siap produksi. Peroleh snippet kode penggunaan untuk pendekatan eksternal, inline, dan latar belakang CSS. Opsi mengecilkan warna penuh dan garis untuk ikon yang dapat diwarnai dengan CSS, serta hapus metadata editor untuk mengurangi ukuran file.

Cara Penggunaan

Drag dan tetaskan ikon berformat SVG Anda ke area upload atau klik untuk mencari. Setiap SVG akan di-parsing dan ditampilkan dalam grid preview bersama dengan ID simbol otomatis yang dihasilkan. Ubah apapun ID simbol dengan mengklik pada itu. Geser tombol pengoptimasian untuk menghilangkan warna latar belakang atau garis tepi, atau hapus metadata. Klik generate untuk menggabungkan semua ikon menjadi satu sprite sheet tunggal. Unduh file SVG gabungan atau salin HTML inline. Gunakan snippet kode yang dihasilkan untuk merujuk ikon-individu dalam proyek Anda.

Fitur

Pembuatan Drag dan Drop Upload – Unggah beberapa file SVG sekaligus dengan cara tarik-tarik atau pemilih file
Gambar Pratinjau Rata-Rata Lihat semua ikon yang telah diunggah ditampilkan dalam grid responsif dengan label
ID Identifikasi Simbol yang Dapat Diubah – Dibuat secara otomatis dari nama file, klik untuk disesuaikan sebelum menggabungkan
Kertas Gambar Sprite – Kombinasikan SVG menjadi satu file menggunakan elemen simbol dengan pemeliharaan *viewBox*
Contoh Kode Singkat Penggunaan Sediakan kode siap pakai untuk referensi eksternal, referensi internal, dan metode latar belakang CSS.
Pembuangan Garis/Pencetakan Hapus atribut penuh dan garis (stroke) untuk ikon yang ingin Anda warnai dengan CSS.
**Optimasi** Hapus komentar, metadata, dan namespace penulis untuk mengurangi ukuran file.
Perbandingan Ukuran File – Lihat ukuran file individu versus kombinasi dan penghematan ruang yang dapat dicapai

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa itu *SVG* sprite sheet dan mengapa harus gunakan satu?

Sebuah *sprite sheet* SVG adalah satu file SVG yang mengandung beberapa ikon yang didefinisikan sebagai elemen simbol. Berbeda dengan memuat 20 file SVG terpisah (20 permintaan HTTP), Anda hanya perlu memuat satu file sprite dan merujuk ikon-ikon individu menggunakan tag *use*. Hal ini mengurangi permintaan HTTP, meningkatkan kinerja pemuatan halaman, dan membuat pengelolaan ikon lebih mudah. Setiap simbol menjaga viewBox sendiri sehingga ikon tetap berproporti dengan benar. Sprite sheet sangat berharga untuk situs web yang memiliki banyak ikon di berbagai halaman.
Apa perbedaan antara referensi sprit eksternal dan internal (inline)? --- *(Note: The question was translated as-is since it's a conceptual inquiry rather than a direct text translation.)*

Referensi eksternal menggunakan sprite SVG yang terpisah dan mengacu pada ikon dengan href yang menunjuk ke path file plus ID simbol, seperti sprite.svg#icon-name. Penggunaan browser untuk memuat sprite file sekali dan mencadikannya. Referensi inline mengembedkan seluruh sprite SVG secara langsung dalam halaman HTML (umumnya tersembunyi) dan mengacu pada ikon dengan hanya hash dan ID. Sprite inline bekerja segera tanpa permintaan file tambahan tetapi meningkatkan ukuran HTML dan tidak dapat dicadik secara terpisah. Sprite eksternal lebih baik untuk situs multi-page sementara sprite inline cocok untuk aplikasi single-page.
Mengapa saya ingin menghapus warna latar dan garis dari ikon SVG?

Pembuangan atribut *fill* dan *stroke* dari ikon SVG memungkinkan Anda mengontrol warna mereka secara penuh melalui CSS. Ini sangat penting untuk sistem ikon yang membutuhkan perubahan warna saat hover, dalam mode gelap, atau di berbagai konteks antarmuka pengguna. Tanpa menghapus atribut asli tersebut, perubahan warna melalui CSS mungkin tidak berfungsi karena atribut SVG inline memiliki spesifikitas lebih tinggi daripada aturan CSS. Opsi penghapusan *fill* dan *stroke* pada alat ini akan menghilangkan atribut tersebut sehingga Anda dapat mengatur warna menggunakan properti *fill* dan *stroke* CSS atau kata kunci *currentColor*.
Bagaimana cara pembuatan ID simbol dari nama file?

Alat ini mengubah setiap nama file menjadi identitas simbol URL aman dengan menghapus ekstensi `.svg`, mengubah huruf menjadi huruf kecil, mengganti spasi dan karakter khusus dengan garis bawah, serta menghapus garis bawah berurutan. Contohnya, `My Icon (v2).svg` menjadi `my-icon-v2`. Anda dapat mengedit setiap ID yang dihasilkan sebelum menggabungkannya. Setiap ID harus unik dalam lembar sprite karena itu berfungsi sebagai identifikasi referensi saat menggunakan ikon. ID yang bermakna seperti `icon-arrow-right` atau `icon-close` membuat kode lebih mudah dibaca daripada nama-nama umum.