bangun sprite
☞ berjalan sepenuhnya di browser Anda — tidak ada yang diunggahJatuhkan ikon SVG Anda di sini
atau klik untuk memilih — hingga 40 berkas SVG
Pratinjau
Tempelkan ini di tempat ikon akan muncul
OneImageTool
Alat Gambar Gratis
bangun sprite
Jatuhkan ikon-ikon Anda dan dapatkan satu berkas sprite berisi elemen symbol, plus baris use untuk tiap ikon, siap ditempel.
atau klik untuk memilih — hingga 40 berkas SVG
Pratinjau
satu berkas, satu rujukan per ikon
Setiap ikon yang dimuat sebagai berkasnya sendiri adalah satu permintaan sendiri, satu entri singgahan sendiri, dan satu peluang sendiri untuk datang terlambat satu bingkai. Sprite melipat semuanya jadi satu dokumen: tiap ikon menjadi symbol dengan viewBox-nya sendiri, tidak ada yang menggambar dengan sendirinya, dan Anda menariknya keluar dengan use href="#icon-name" di mana pun perlu. Karena rujukannya lewat id dan bukan URL, ikon mewarisi currentColor dan CSS pada svg yang membungkusnya — hal yang justru tidak bisa dilakukan setumpuk tag img.
Yang sulit bukan membungkusnya, melainkan penamaannya. Empat puluh ikon hasil ekspor dari perkakas desain dengan senang hati memuat empat puluh gradien bernama "a" dan empat puluh kelas bernama "cls-1"; begitu berbagi satu dokumen, yang kedua diam-diam mengambil warna yang pertama. Karena itu setiap id dan kelas di dalam sebuah ikon diganti namanya dengan id symbol ikon itu sendiri sebagai awalan, dan keempat tempat persembunyian rujukan — url() dalam atribut, href yang menunjuk fragmen, atribut style, serta CSS di dalam elemen style — ikut ditulis ulang. Tidak ada yang merembes antar ikon.
tiga langkah
Hingga 40 berkas SVG sekaligus, diurai di peramban Anda. Urutkan ulang baris dengan tombol panah; urutan itulah urutan symbol di dalam berkas.
Setiap symbol dinamai sesuai berkasnya dengan awalan di depan, dan daftarnya menampilkan hasilnya. Dua berkas bernama sama mendapat angka agar tak ada dua symbol yang mengklaim satu id.
Sprite masuk ke halaman Anda atau disajikan sebagai sprite.svg; cuplikannya memberi satu baris siap tempel per ikon.
jawaban singkat
Ada dua cara. Tempelkan seluruh sprite di bagian atas HTML Anda lalu rujuk sebuah ikon dengan use href="#icon-name"; atau sajikan berkasnya dan rujuk dengan use href="/sprite.svg#icon-name". Cara pertama menghemat satu permintaan, cara kedua membiarkan peramban menyinggahkan satu sprite untuk semua halaman.
Dari nama berkas: dihurufkecilkan, apa pun yang bukan huruf atau angka diubah jadi tanda hubung, lalu awalan di depan. Jadi arrow_left.svg dengan awalan bawaan menjadi icon-arrow-left.
Id XML tidak boleh diawali angka, sedangkan nama berkas seperti 2-arrow.svg itu lumrah. Awalan juga mencegah id ikon bentrok dengan id yang sudah ada di halaman Anda. Awalan bisa diubah atau dikosongkan; bila mengosongkannya membuat id tidak sah, awalan cadangan dipasang kembali.
Yang kedua ditambahi angka. Tanpa itu, kedua symbol akan memakai id yang sama dan setiap rujukan ke id itu akan menampilkan ikon pertama — gambar yang salah tanpa suara, bukan pesan galat.
Selamat. Setiap id dan kelas di dalam sebuah ikon diganti namanya dengan id symbol-nya sebagai awalan, dan rujukannya ikut ditulis ulang: url() dalam atribut, href fragmen, atribut style, dan CSS di dalam elemen style.
Kalau ikonnya memakai fill="currentColor", bisa — setel color pada svg yang memuat rujukan itu dan ikonnya mengikuti. Ikon dengan isian warna tetap akan mempertahankannya; sprite tidak menulis ulang warna Anda.
Hingga 40 sekaligus. Sprite sendiri tidak punya batas nyata, tetapi lembar yang jauh lebih besar biasanya lebih baik dipecah per bagian situs, agar satu halaman hanya membawa ikon yang benar-benar dipakainya.
Tidak. SVG diurai dan dirakit di dalam peramban Anda, dan pratinjaunya adalah URL blob dari mesin Anda sendiri. Alat ini tidak punya server yang bisa menerima berkas.
Ya — gratis, tanpa tanda air dan tanpa pendaftaran.