SVG mempunyai elemen yang sangat sejuk dan kuat yang disebut . Ia cukup ringkas dalam konsep. Ia menemui sedikit lagi kod SVG, yang dirujuk oleh ID, dan mengklonnya di dalam elemen.
Kes penggunaan yang paling asas adalah: Saya telah melukis bentuk ini sekali di halaman, dan saya ingin melukisnya semula di tempat lain. Pergi mendapatkan bentuk itu, dan lukis lagi.
Kita dapat menggunakan kemampuan itu sebagai konsep root untuk (drumroll!) Dan keseluruhan sistem ikon! Kami dapat mengambil semua bentuk yang ingin kami gunakan di halaman dalam satu blok SVG besar. Kami akan membungkus semuanya dalam tanda yang merupakan cara semantik untuk mengatakan "Kami hanya menentukan perkara-perkara ini untuk digunakan kemudian." Ia juga akan memastikan mereka tidak akan menyebabkan (tetapi anda juga perlu display: none;yang sendiri.
Ia berfungsi seperti ini:
Yang funky mencari xlink:hrefrujukan atribut ID di tempat lain. ID itu boleh ada pada elemen bentuk apa pun, seperti atau , atau boleh ada pada sekumpulan elemen seperti a .
Paling baik sekiranya sistem ikon, ia boleh menjadi elemen. Selain benar secara semantik (ikon adalah simbol, tidak?), Elemen itu dapat membawa atribut viewBox dan maklumat kebolehaksesannya sendiri, seperti dan teg. Ini menjadikan pelaksanaannya sangat mudah (seperti gambar di atas).
Oleh itu, anda hanya perlu memastikan ini ditentukan di tempat lain dalam dokumen:
Basketball Lihat Pen JoDmd oleh Chris Coyier (@chriscoyier) di CodePen.