bina sprite
☞ berjalan sepenuhnya dalam pelayar anda — tiada apa-apa dimuat naikLepaskan ikon SVG anda di sini
atau klik untuk memilih — sehingga 40 fail SVG
Pratonton
Tampal ini di tempat ikon sepatutnya muncul
OneImageTool
Alat Gambar Percuma
bina sprite
Lepaskan ikon anda dan dapatkan satu fail sprite elemen symbol, serta baris use bagi setiap ikon, sedia untuk ditampal.
atau klik untuk memilih — sehingga 40 fail SVG
Pratonton
satu fail, satu rujukan bagi setiap ikon
Setiap ikon yang dimuatkan sebagai failnya sendiri ialah satu permintaan sendiri, satu entri cache sendiri, dan satu peluang sendiri untuk tiba lewat satu bingkai. Sprite melipat semuanya ke dalam satu dokumen: setiap ikon menjadi symbol dengan viewBox sendiri, tiada yang melukis dengan sendiri, dan anda mengeluarkannya di mana perlu dengan use href="#icon-name". Kerana rujukan itu melalui id dan bukan URL, ikon mewarisi currentColor dan CSS pada svg yang membaluti — itulah yang tidak mampu dilakukan oleh timbunan tag img.
Yang sukar bukan membalutnya, tetapi namanya. Empat puluh ikon yang dieksport dari perkakas reka bentuk dengan senang hati membawa empat puluh kecerunan bernama "a" dan empat puluh kelas bernama "cls-1"; sebaik sahaja berkongsi satu dokumen, yang kedua diam-diam mengambil warna yang pertama. Maka setiap id dan kelas di dalam sesebuah ikon dinamakan semula dengan id symbol ikon itu sendiri sebagai awalan, dan keempat-empat tempat rujukan boleh bersembunyi — url() dalam atribut, href yang menunjuk serpihan, atribut style, dan CSS di dalam elemen style — turut ditulis semula. Tiada yang meresap antara ikon.
tiga langkah
Sehingga 40 fail SVG serentak, dihurai dalam pelayar anda. Susun semula baris dengan anak panah; susunan itulah susunan symbol dalam fail.
Setiap symbol dinamakan mengikut failnya dengan awalan di hadapan, dan senarai menunjukkan hasilnya. Dua fail bernama sama mendapat nombor supaya tiada dua symbol menuntut id yang sama.
Sprite masuk ke halaman anda atau disajikan sebagai sprite.svg; cebisannya memberi satu baris sedia tampal bagi setiap ikon.
jawapan pantas
Dua cara. Tampal keseluruhan sprite berhampiran atas HTML anda dan rujuk sesuatu ikon dengan use href="#icon-name"; atau sajikan failnya dan rujuk sebagai use href="/sprite.svg#icon-name". Cara pertama menjimatkan satu permintaan, cara kedua membiarkan pelayar menyimpan satu sprite untuk setiap halaman.
Daripada nama fail: dihuruf kecilkan, apa sahaja yang bukan huruf atau angka ditukar kepada sengkang, dan awalan di hadapan. Jadi arrow_left.svg dengan awalan lalai menjadi icon-arrow-left.
Id XML tidak boleh bermula dengan angka, sedangkan nama fail seperti 2-arrow.svg lumrah. Awalan juga menghalang id ikon daripada berlanggar dengan id yang sedia ada di halaman anda. Anda boleh mengubah atau mengosongkannya; jika mengosongkannya menjadikan id tidak sah, awalan sandaran dipasang semula.
Yang kedua ditambah nombor. Tanpa itu, kedua-dua symbol membawa id yang sama dan setiap rujukan kepadanya akan memaparkan ikon pertama — gambar yang salah secara senyap, bukan ralat.
Selamat. Setiap id dan kelas dalam sesebuah ikon dinamakan semula dengan id symbol-nya sebagai awalan, dan rujukannya ditulis semula bersamanya: url() dalam atribut, href serpihan, atribut style, dan CSS di dalam elemen style.
Jika ikon menggunakan fill="currentColor", boleh — tetapkan color pada svg yang memegang rujukan dan ikon akan mengikut. Ikon dengan isian warna tetap kekal begitu; sprite tidak menulis semula warna anda.
Sehingga 40 pada satu masa. Sprite sendiri tiada had sebenar, tetapi helaian yang jauh lebih besar biasanya lebih elok dipecahkan mengikut bahagian tapak, supaya satu halaman hanya membawa ikon yang benar-benar digunakannya.
Tidak. SVG dihurai dan dicantum di dalam pelayar anda, dan pratontonnya ialah URL blob daripada mesin anda sendiri. Alat ini tiada pelayan yang boleh menerima fail.
Ya — percuma, tanpa tera air dan tanpa pendaftaran.