Pembuat sprite ikon SVG

Gabungkan ikon SVG menjadi satu sprite berisi symbol dengan ID terpisah yang dapat digunakan kembali.

Di perangkat Anda · Tanpa akun

Pembuat sprite ikon SVG memproses masukan Anda di browser ini. Masukan dan hasil tidak disertakan dalam analitik. Daftar alat terbaru menyimpan nama alat, jumlah kunjungan, dan waktu kunjungan terakhir. Daftar alat tersimpan hanya menyimpan namanya. Penyimpanan draf bersifat opsional dan tetap berada di perangkat ini; hapus teks tersimpan melalui kontrol draf. Memuat teks dari URL bersifat opsional dan menghubungi server tersebut; server dapat melihat URL itu dan alamat IP Anda. Tindakan opsional “Gunakan di” menyimpan data yang akan diteruskan dalam tab ini. Alat berikutnya menghapus data itu saat dibuka dan mengabaikannya jika sudah lebih dari satu menit.

Salin tautan menyertakan masukan yang Anda pilih untuk dibagikan dalam alamat tautan. Siapa pun yang memiliki tautan itu dapat membuka kembali masukan tersebut. File dan hasil yang dihasilkan tidak disertakan. Alat kata sandi dan kunci hanya membagikan pengaturan.

Bahasa Indonesia

Pisahkan SVG dengan baris berisi ---

Hasil

Enter your values.

Lainnya

Pintasan keyboard

Tentang tautan dan reset

Tautan memuat input dan pengaturan Anda. Siapa pun yang memiliki tautan dapat melihatnya, jadi jangan sertakan teks pribadi. File dan hasil yang dibuat tidak disertakan; pengacakan akan dijalankan ulang.

Reset memuat ulang alat dengan nilai awalnya serta melepaskan file yang terbuka dan kontrol perangkat. Draf tersimpan tetap ada di perangkat ini sampai Anda menghapusnya.

Cara membuat sprite ikon SVG

Pisahkan dokumen SVG dengan baris berisi tiga tanda hubung. Setiap ikon menjadi symbol bernama icon-1, icon-2, dan seterusnya. ID internal dan referensi lokal diberi awalan agar gradien dan jalur pemotongan tidak saling berbenturan.

Berikutnya: Ambil warna dari gambar

Contoh

Dua SVG masukan menjadi symbol bernama icon-1 dan icon-2. Gunakan elemen use SVG yang mengarah ke #icon-1 untuk menampilkan ikon pertama.

Sebelum menggunakan hasil

Hanya SVG mandiri dengan viewBox atau lebar dan tinggi numerik yang didukung. Konten aktif, stylesheet, dan sumber daya eksternal ditolak. Periksa sprite hasil ekspor di aplikasi tempat sprite akan digunakan.

Berikutnya: Ubah ukuran gambar

Diperbarui 7 Oktober 2026

Kutip halaman ini

Gaya sitasi

ToolOctopus. “Pembuat sprite ikon SVG.” Diperbarui 7 Oktober 2026. https://tooloctopus.com/id/pembuat-sprite-ikon-svg.

Tambahkan tanggal akses jika pedoman yang Anda ikuti mewajibkannya.

Format sitasi menggunakan citeproc-js buatan Frank Bennett dan gaya Citation Style Language. Lisensi dan kode sumber.