Βάζοντας αυτό το μπλοκ SVG στο πάνω μέρος του εγγράφου λειτουργεί σίγουρα. Έχει επίσης ορισμένα πλεονεκτήματα, όπως το γεγονός ότι δεν χρειάζεται να υποβληθεί αίτημα HTTP, όλες οι πληροφορίες για τη σχεδίαση των γραφικών βρίσκονται στη σελίδα. Αλλά, έχει και κάποια μειονεκτήματα. Όλες οι πληροφορίες πρέπει να αναλυθούν από το πρόγραμμα περιήγησης σε κάθε σελίδα, από το έγγραφο. Δεν είναι ξεχωριστό έγγραφο που ενδέχεται να έχει ήδη αποθηκευτεί στην κρυφή μνήμη από τον πελάτη, όπως και άλλα στοιχεία. Και μιλώντας για την προσωρινή μνήμη, εάν ο ιστότοπός σας αποθηκεύει προσωρινά HTML (συνήθως καλή ιδέα), θα μπορούσατε να θεωρήσετε αυτό το "σελίδα κρυφής μνήμης σελίδας" επειδή κάθε μεμονωμένη σελίδα περιλαμβάνει αυτήν την μεγάλη επαναλαμβανόμενη ομάδα κώδικα - όχι πολύ αποτελεσματική χρήση της προσωρινής μνήμης διακομιστή.
Τα καλά νέα είναι ότι μπορούμε να μεταφέρουμε ότι οι αποκλεισμοί SVG αποκλείονται σε ένα εξωτερικό αρχείο και να το χρησιμοποιήσουμε όπως θα κάναμε μια εικόνα ή οποιοδήποτε άλλο στοιχείο.
Όταν το χρησιμοποιούμε τότε, η διαδρομή αρχείου θα ήταν στο χαρακτηριστικό, ως εξής:
Είναι σημαντικό να γνωρίζετε: Οι περιορισμοί μεταξύ τομέων είναι αυστηροί σε αυτό. Ακόμη και οι κεφαλίδες CORS δεν θα σας βοηθήσουν στην εμπειρία μου. Έτσι, κανένα CDN (δεν μπορεί καν να παίξει στο CodePen και σίγουρα δεν μπορεί να αναπαραχθεί σε ένα αρχείο: // URL).
Ένα άλλο σημαντικό πράγμα που πρέπει να γνωρίζετε: Πρέπει σίγουρα να το χαρακτηριστικό xmlns για να λειτουργήσει αυτό. Όπως στο, το μπλοκ SVG defs σας πρέπει να ξεκινά με:
Είχα την εντύπωση ότι δεν το χρειάζονταν σε ένα έγγραφο HTML5 (με τον ίδιο σχεδόν τρόπο δεν χρειάζεσαι τύπους σε ), αλλά ίσως επειδή αυτό το αρχείο δεν είναι πλέον στα όρια ενός εγγράφου HTML5 (είναι εξωτερικά), το χρειάζεστε.
Για αυτόν τον λόγο, το demo για αυτό είναι εδώ.
Εξίσου σημαντικό να γνωρίζετε: Καμία έκδοση του IE δεν υποστηρίζει αυτό (έως και 11 κατά τη στιγμή αυτής της έκδοσης). Αλλά υπάρχει ένας τρόπος για να το λειτουργήσει, ουσιαστικά Ajaxing στο κομμάτι του SVG που χρειάζεστε και εισάγοντάς το όπου θα ήταν, καθιστώντας το «κανονικό» ενσωματωμένο SVG που υποστηρίζεται. Μας παίρνει ένα καυτό λεπτό για να το κάνουμε αυτό και να δοκιμαστεί στον Internet Explorer χρησιμοποιώντας το BrowserStack, αλλά τελικά το καταλαβαίνουμε.
Αρχεία
- 16-svg4everybody.js
- 16-svg-defs-test.svg