SVG memiliki elemen yang sangat keren dan kuat yang disebut . Konsepnya cukup sederhana. Ia menemukan bit kode SVG lain, direferensikan oleh ID, dan mengkloningnya di dalam elemen.
Kasus penggunaan paling dasar adalah: Saya sudah menggambar bentuk ini sekali di halaman, dan saya ingin menggambarnya lagi di tempat lain. Dapatkan bentuk itu, dan gambar lagi.
Kita bisa menggunakan kemampuan itu sebagai konsep dasar untuk (drumroll!) Dan seluruh sistem ikon! Kita dapat mengambil semua bentuk yang ingin kita gunakan pada halaman dalam satu blok SVG yang besar. Kami akan membungkus semuanya dalam tag yang merupakan cara semantik untuk mengatakan "Kami baru saja menentukan hal-hal ini untuk digunakan nanti." Itu juga memastikan mereka tidak akan merender (tetapi Anda juga harus display: none;melakukannya sendiri.
Ini bekerja seperti ini:
xlink:hrefAtribut yang tampak funky itu mereferensikan ID di tempat lain. ID itu bisa berada di elemen bentuk apa pun, seperti atau , atau bisa juga di grup elemen seperti .
Yang terbaik dari semuanya dalam kasus sistem ikon, itu bisa berupa elemen. Selain menjadi benar secara semantik (ikon adalah simbol, bukan?), Elemen dapat membawa atribut viewBox dan informasi aksesibilitasnya sendiri, seperti tag dan . Ini membuat penerapannya sangat mudah (seperti yang ditunjukkan di atas).
Jadi Anda hanya perlu memastikan ini didefinisikan di tempat lain di dokumen:
Basketball Lihat Pen JoDmd oleh Chris Coyier (@chriscoyier) di CodePen.