Προσθήκη προσαρμόσιμων διανυσματικών γραφικών (SVG) σε μη υποστηριζόμενο πρόγραμμα περιήγησης
Σε μια προηγούμενη ανάρτηση αυτής της σειράς, αναφέραμε λίγο σχετικά με την παγίδα του SVG με παλιά προγράμματα περιήγησης και χρησιμοποιώντας το Raphael.js για να εξυπηρετήσουμε το γραφικό ως εναλλακτική λύση. Σε αυτή τη θέση θα εξετάσουμε περαιτέρω το θέμα.
Η ιδέα είναι απλή, θα εξακολουθήσουμε να χρησιμοποιούμε τα στοιχεία SVG ως τον πρωταρχικό τρόπο για την προβολή γραφικών στην ιστοσελίδα μας, αλλά παράλληλα θα παράσχουμε και μια εναλλακτική λειτουργία έτσι ώστε να μπορεί να γίνει ακόμα σε μη υποστηριζόμενα προγράμματα περιήγησης.
Βέβαια, υπάρχουν πολλά μονοπάτια που μπορούμε να πάρουμε, αλλά θα εξετάσουμε μόνο δύο λύσεις που νομίζω ότι είναι μια καλύτερη γενική λύση. Ας δούμε λοιπόν πώς μπορούμε να το κάνουμε.
Χρήση στοιχείου αντικειμένου
Εκτός από την άμεση τοποθέτησή του σε έγγραφο HTML, υπάρχουν πολλοί τρόποι ενσωμάτωσης του SVG. Για παράδειγμα, εάν αποθηκεύσουμε το γραφικό σε .svg αρχείο, μπορούμε να χρησιμοποιήσουμε το στοιχείο.
Για το σκοπό επίδειξης, προσθέσαμε στην ιστοσελίδα μας ένα λογότυπο της Apple με το SVG. Ωστόσο, τα μη υποστηριζόμενα προγράμματα περιήγησης θα παραμείνουν κενά. Για την επίλυση του προβλήματος, μπορούμε να προσφέρουμε μια γραφική παράσταση bitmap, ως εξής:
Με αυτό τον τρόπο, τα υποστηριζόμενα προγράμματα περιήγησης θα συνεχίσουν να λαμβάνουν το .svg, ενώ τα μη υποστηριζόμενα προγράμματα περιήγησης θα φέρουν το γραφικό bitmap. Έχουμε προσθέσει το “png” κάτω από το λογότυπο της Apple για να παρακολουθείτε ποιο γραφικό παραδίδεται.
Ωστόσο, όπως αναφέρθηκε στην άλλη θέση, Τα γραφικά Bitmap δεν είναι τόσο ευέλικτα και κλιμακούμενα όσο το SVG. Ας ρίξουμε μια ματιά σε μια άλλη λύση.
Χρησιμοποιώντας το Modernizr
Μια άλλη μέθοδος που μπορούμε να χρησιμοποιήσουμε είναι η χρήση Modernizr. Για όσους από εσάς δεν είστε εξοικειωμένοι με αυτή τη βιβλιοθήκη JavaScript, μην ανησυχείτε ότι θα έχουμε μια ειδική θέση για να την καλύψουμε. Προς το παρόν, να συμβαδίσετε μαζί μας.
Πρώτα απ 'όλα, ας προετοιμάσουμε ορισμένες απαιτούμενες βιβλιοθήκες JavaScript, Modernizr.js και Raphael.js. Στη συνέχεια, πρέπει επίσης να μετατρέψουμε το δικό μας .svg αρχειοθετείτε σε μια μορφή που υποστηρίζεται από Raphael με αυτό το εργαλείο, ReadySetRaphael.js, και αποθηκεύστε την έξοδο σε ξεχωριστό .js αρχείο; ας το ονομάσουμε svg.js.
Συμπεριλάβετε το Modernzr.js στο έγγραφο HTML, όπως έτσι:
Και για τα άλλα δύο αρχεία, raphael.js και svg.js, θα το φορτώσουμε υπό όρους, μόνο όταν προβάλλεται σε μη υποστηριζόμενα προγράμματα περιήγησης.
Με το Modernizr μπορούμε να ανιχνεύσουμε την ικανότητα του προγράμματος περιήγησης, σε αυτή την περίπτωση θα εντοπίσουμε αν το πρόγραμμα περιήγησης είναι ικανό να αποδίδει SVG και αν δεν είναι, θα χρησιμοποιήσουμε το σενάριο:
αν (! Modernizr.inlinesvg) document.write (''
