SVG / Ikon

Generator Sprite SVG: Simbol dan Penggunaan Ikon

Jatuhkan beberapa ikon SVG untuk membuat sprite simbol. Sanitasi markup, hapus duplikasi ID dari nama file, pertahankan viewBox, ubah fill menjadi currentColor jika perlu, lalu download sprite.svg.

Generator Sprite SVG: Simbol dan Penggunaan Ikon: Masukkan sekumpulan ikon SVG untuk mendapatkan satu file sprite dengan satu simbol untuk setiap ikon, beserta snippet untuk menggunakan tiap ikon. Skrip, resource eksternal, dan apa pun yang tidak aman akan dihapus; ukuran akan diubah menjadi viewBox jika diperlukan; dan fill dapat diubah menjadi currentColor agar ikon mengikuti warna teks. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Sprite ikon SVGPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Hingga 60 ikon · masing-masing 1 MB · memilih file akan menggantikan set saat ini

Skrip, event handler, resource eksternal, gambar tersemat, teks, dan elemen yang tidak didukung akan dihapus. Inline style dasar menjadi atribut presentasi. viewBox yang tidak ada menggunakan lebar dan tinggi numerik, dengan 24 unit sebagai fallback untuk setiap dimensi yang tidak ada. Periksa setiap pratinjau sebelum digunakan.

Edit ikon SVG

Simbol dan penggunaan ulang

SVG 2 menetapkan elemen symbol dan use serta perilaku viewBox-nya: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Pemrosesan lokal dan pewarnaan

Setiap ikon dibuat ulang dari daftar elemen dan atribut SVG yang aman, sehingga skrip, event handler, dan sumber daya eksternal tidak dapat mengakses sprite. Tidak ada set ikon pihak ketiga yang disertakan. Pewarnaan SVG dan currentColor ditetapkan di https://www.w3.org/TR/SVG2/painting.html . Lisensi ikon yang di-upload tetap menjadi tanggung jawab pengguna.

Cara menggunakannya

  1. Jatuhkan hingga 60 ikon SVG, masing-masing berukuran di bawah 1 MB.
  2. Periksa pratinjau yang telah disanitasi dan, jika perlu, ubah fill menjadi currentColor.
  3. Download sprite, lalu pilih ikon untuk menyalin snippet penggunaan.

Privasi & batasan

File SVG Anda tetap tersimpan secara lokal. Tool ini tidak mengambil URL yang disematkan atau meng-upload ikon.

Alat terkait

Editor SVGSVG CleanerSVG ke JSX

Pertanyaan umum

Bagaimana cara menggunakan sprite?

Masukkan SVG-nya sekali ke dalam container tersembunyi di halaman, lalu gunakan snippet inline yang telah disalin. Untuk file terpisah, gunakan sprite.svg#id sebagai href.

Apa yang terjadi jika viewBox tidak ada?

Width dan height numerik, termasuk unit px, akan menentukan viewBox baru. Dimensi yang tidak ada atau tidak didukung akan menggunakan nilai default 24 unit. Pratinjau menandai viewBox yang diperbaiki agar Anda dapat memeriksa apakah ada bagian yang terpotong.

Apakah setiap ikon akan mempertahankan tampilannya persis?

Tidak. Bentuk dasar, grup, gradient, clipping, dan mask tetap dipertahankan, tetapi skrip, teks, gambar yang disematkan, elemen use, dan styling yang tidak didukung akan dihapus. Periksa pratinjaunya. Anda tetap bertanggung jawab atas lisensi karya yang di-upload.

Alat gratis · berjalan di browser anda · tanpa perlu akun