Μόλις έχουμε αυτό που ονομάζουμε "defs block" του SVG - αυτό το κομμάτι του SVG που καθορίζει όλα τα πράγματα που θέλουμε να σχεδιάσουμε αργότερα - πού το βάζουμε; Μέχρι στιγμής το βάζουμε απευθείας στο HTML και αυτό λειτουργεί απολύτως. Εάν το αφήσουμε στην κορυφή της σελίδας, πείτε αμέσως μετά την ετικέτα ανοίγματος :
Αυτό θα λειτουργήσει εξαιρετικά σε όλα τα προγράμματα περιήγησης που υποστηρίζουν το SVG.
Μπορεί να είναι δελεαστικό να το μετακινήσετε προς τα κάτω. Ίσως τα εικονίδια να μην είναι εξαιρετικά ζωτικής σημασίας στη σελίδα, όχι τόσο ζωτικά όσο το πραγματικό περιεχόμενο που προορίζεται να παραδώσει η σελίδα, οπότε μετακινούμε τα εικονίδια στο κάτω μέρος της σελίδας αντ 'αυτού, αναβάλλουμε τη φόρτωσή τους όπως κάνουμε συχνά με τη JavaScript. Το δοκιμάζουμε αυτό στο βίντεο, αλλά αντιμετωπίζει προβλήματα με την απόδοση του Safari στα εικονίδια που προσπαθήσαμε αργότερα καθόλου. Για να είμαι ειλικρινής, έχω δει ασυνεπή συμπεριφορά ή διάφορους τύπους σε άλλα προγράμματα περιήγησης να το κάνει με αυτόν τον τρόπο, και φαίνεται ότι το τοπίο αλλάζει λίγο από αυτή την άποψη. Άκουσα λοιπόν: είναι δύσκολο να εφαρμοστεί. Ασφαλέστερο να τοποθετήσετε το μπλοκ στην κορυφή εάν καταλήξετε να διατηρείτε τους defs σωστά στα έγγραφά σας.
Σε αυτό το βίντεο εξετάζουμε κάποιες βασικές δοκιμές όλων αυτών και, στη συνέχεια, εξετάζουμε ορισμένους ιστότοπους πραγματικού κόσμου που χρησιμοποιούν αυτό το σύστημα και πώς / πού εισάγουν το μπλοκ Svg Defs.
Δείτε το στυλό 954e71cb5d5e79fb61d3c89bb3f21b8a του Chris Coyier (@chriscoyier) στο CodePen.
Σημείωση
Μου αρέσει ο όρος "SVG defs block" - έτσι ώστε να μπορούμε να το ονομάσουμε κάτι που έχει συγκεκριμένο σκοπό αλλά δεν έχει πραγματικά επίσημο όνομα. Όμως, δεν χρειάζεται πάντα να χρησιμοποιείτε μια ετικέτα. Όταν χρησιμοποιείτε s, αυτά δεν αποδίδονται από μόνα τους, και πράγματι δεν νομίζω ότι πρέπει να βρίσκονται μέσα . Έχω ακούσει ότι οι ορισμοί των διαβαθμίσεων στο SVG είναι οι ίδιοι και δεν θα λειτουργήσουν ακόμη και αν βρίσκονται στο . Ανεξάρτητα, εξακολουθεί να είναι ένα "μπλοκ κώδικα SVG που απλώς ορίζουμε να το χρησιμοποιήσουμε αργότερα", οπότε πιθανότατα θα συνεχίσω να το ονομάζω "μπλοκ SVG defs."