Το SVG έχει ένα πολύ δροσερό και ισχυρό στοιχείο που ονομάζεται . Είναι πολύ απλό στην έννοια. Βρίσκει ένα άλλο κομμάτι του κώδικα SVG, που αναφέρεται από το ID, και τον κλωνοποιεί πάνω από το στοιχείο.
Η πιο βασική περίπτωση χρήσης θα ήταν: Έχω ήδη σχεδιάσει αυτά τα σχήματα μία φορά στη σελίδα και θέλω να το σχεδιάσω ξανά κάπου αλλού. Πηγαίνετε να πάρετε αυτό το σχήμα και σχεδιάστε το ξανά.
Μπορούμε να χρησιμοποιήσουμε αυτήν την ικανότητα ως τη βασική ιδέα για το (drumroll!) Και ολόκληρο το σύστημα εικονιδίων! Μπορούμε να πάρουμε όλα τα σχήματα που σκοπεύουμε να χρησιμοποιήσουμε στη σελίδα σε ένα μεγάλο μπλοκ SVG. Θα τα τυλίξουμε όλα σε μια ετικέτα που είναι σημασιολογικός τρόπος να πούμε "Απλώς ορίζουμε αυτά τα πράγματα στα οποία θα χρησιμοποιηθούν αργότερα." Εξασφαλίζει επίσης ότι δεν θα αποδώσουν (αλλά θα πρέπει επίσης να display: none;το ίδιο.
Δουλεύει κάπως έτσι:
Αυτό το funky look xlink:hrefχαρακτηριστικό αναφέρει ένα αναγνωριστικό αλλού. Αυτό το αναγνωριστικό θα μπορούσε να βρίσκεται σε οποιοδήποτε στοιχείο σχήματος, όπως ένα ή , ή θα μπορούσε να είναι σε μια ομάδα στοιχείων όπως ένα .
Το καλύτερο από όλα στην περίπτωση ενός συστήματος εικονιδίων, μπορεί να είναι σε ένα στοιχείο. Εκτός από τη σωστή σημασιολογία (ένα εικονίδιο είναι ένα σύμβολο, όχι;), το στοιχείο μπορεί να φέρει το δικό του χαρακτηριστικό viewBox και πληροφορίες προσβασιμότητας, όπως και ετικέτες. Αυτό καθιστά την εφαρμογή πολύ εύκολη (όπως φαίνεται παραπάνω).
Επομένως, απλώς πρέπει να βεβαιωθείτε ότι αυτό ορίζεται κάπου αλλού στο έγγραφο:
Basketball Δείτε το Pen JoDmd του Chris Coyier (@chriscoyier) στο CodePen.