Δοκιμή υποστήριξης SVG σε μηχανές περιήγησης στο Web [Μελέτη περίπτωσης]
Το SVG (Scalable Vector Graphics) υποστηρίζεται επίσημα από όλα τα κύρια προγράμματα περιήγησης ιστού, συμπεριλαμβανομένου του Internet Explorer. Η υποστήριξη καλύπτει μια ευρεία ποικιλία λογισμικού επεξεργασίας εικόνων, ιδιαίτερα το Inkscape, το οποίο χρησιμοποιεί το SVG ως εγγενή μορφή του (Αν θέλετε να κάνετε επανεκκίνηση στο SVG, κάντε κλικ εδώ).
Αλλά τι ακριβώς υποστηρίζεται από προγράμματα περιήγησης ιστού; Μήπως όλες οι μηχανές εμφάνισης εμφανίζουν τα αρχεία SVG και τα χαρακτηριστικά τους με τον ίδιο τρόπο; Και τι γίνεται με τα προηγμένα χαρακτηριστικά τους όπως τα φίλτρα; Αυτό είναι που θα μάθουμε. Πήραμε ένα δείγμα σύγχρονων προγραμμάτων περιήγησης, συμπεριλαμβανομένων μερικών λιγότερο γνωστών, και τα δοκιμάσατε με ένα αρχείο SVG που δημιουργήθηκε για το σκοπό αυτό.
Η εικόνα δοκιμής
Ετοιμάσαμε την εικόνα δοκιμών μας εστιάζοντας σε στοιχεία τα οποία οι καλλιτέχνες είναι πιο πιθανό να χρησιμοποιήσουν. Μεταξύ των δοκιμασμένων χαρακτηριστικών είναι: οι διαδρομές κειμένου και οι αλληλεπιδράσεις τους, οι κλίσεις, το φίλτρο θόλωσης Gauss και τέλος ένα προηγμένο σύνθετο φίλτρο που στοιβάζεται από περισσότερους τύπους φίλτρων.
Μηχανές αναζήτησης στο Web
Αναβοσβήνει ο κινητήρας
Ξεκινήσαμε με - τη μακράν την πιο συχνή μηχανή rendering - Blink. Το Blink είναι η μητρική μηχανή για τα προγράμματα περιήγησης Chrome και Chromium της Google, το Opera και το Android WebView. Όλα τα παραπάνω προγράμματα περιήγησης κάνουν την εξέταση εικόνων με τον ίδιο τρόπο σε όλες τις δοκιμασμένες πλατφόρμες.
Σε σύγκριση με την αρχική εικόνα που παρήγαγε η Inkscape, δεν υπήρχαν προβλήματα εκτός από μια μικρή διαφορά στην απόδοση των στοιβάζονται φίλτρων.
Browser | Εκδοχή | Πλατφόρμα | Αποτέλεσμα |
Χρώμιο | 43.0.2357.125 | Linux | |
ΛΥΡΙΚΗ ΣΚΗΝΗ | 30.0.1835.59 | Linux | |
ΛΥΡΙΚΗ ΣΚΗΝΗ | 30.0.1856.93524 | Android | |
ΛΥΡΙΚΗ ΣΚΗΝΗ | 30.0.1835.88 | Windows | |
Χρώμιο | 38.0.2125.114 | Android | |
Χρώμιο | 43.0.2357.130 | Windows | |
Δάδα | 39.0.0.9626 | Windows |
Μηχανή Webkit
Σύμφωνα με τα πρόσφατα στατιστικά στοιχεία χρήσης του προγράμματος περιήγησης, οι τρεις πρώτες θέσεις δεν ανήκουν σε προγράμματα περιήγησης που βασίζονται στο webkit (από τον Μάιο του 2015). Ωστόσο, αυτή η μηχανή είναι ευρέως διαδεδομένη στους προγραμματιστές. Επιπλέον, υπάρχουν διάφορες υλοποιήσεις και πιρούνια
Όλα τα εξελεγμένα προγράμματα περιήγησης καθιστούσαν το αρχείο SVG χωρίς προβλήματα. Ωστόσο, παρατηρήθηκαν διαφορές στην απόδοση του Specular Lighting, ενός σύνθετου στοιχείου φίλτρου σε σύγκριση με το Inkscape.
Browser | Εκδοχή | Πλατφόρμα | Αποτέλεσμα |
Σαφάρι | 8.0.6 | MacOS | |
Βίδρα | 0.9.05 | Linux | |
QupZilla | 1.8.6 | Linux | |
QupZilla | 1.8.6 | Windows | |
Δελφίνι | 10.3.1 | Android | |
Konqueror | 15.04.2 | Linux | |
UC Browser | 10.5.0.575 | Android |
Τριπλός κινητήρας
Το Trident είναι μια ιδιόκτητη μηχανή που χρησιμοποιείται από τον Internet Explorer εκδόσεις 4.0 - 11.0. Η IE ερμήνευσε τέλεια το SVG μας. Επιπλέον, η εμφάνιση σύνθετου φίλτρου ταιριάζει καλύτερα στην αρχική εικόνα. Δοκιμάσαμε επίσης τον IE 9, τον δεύτερο πιο χρησιμοποιημένο IE (από τον Μάιο του 2015) και διαπίστωσα ότι αυτή η έκδοση είχε προβλήματα με τη θολούρα Gauss και το σύνθετο φίλτρο.
Αυτό δεν αποτελεί έκπληξη, καθώς το IE 9 κυκλοφόρησε αρχικά πριν από το τελικό σχέδιο του SVG 1.1 SE standard, στο οποίο προστέθηκαν επισήμως αποτελέσματα φιλτραρίσματος.
Browser | Εκδοχή | Πλατφόρμα | Αποτέλεσμα |
IE | 11.0.9600.17843 | Windows |
Browser | Εκδοχή | Πλατφόρμα | Αποτέλεσμα |
IE | 9.0.8112.16421 | Windows |
Μηχανή Gecko
Το Gecko είναι ένας μηχανισμός που αναπτύχθηκε από την Mozilla Corporation και έτσι χρησιμοποιείται στο πρόγραμμα περιήγησης ιστού του Firefox ή στον πελάτη ηλεκτρονικού ταχυδρομείου του Thunderbird. Χρησιμοποιείται επίσης από τα προγράμματα περιήγησης PaleMoon, Waterfox και πολλές άλλες πιρούνες προηγούμενων εκδόσεων του Firefox. Στην περίπτωση του κινητήρα Gecko τα αποτελέσματα δεν ήταν ακριβώς ίδια σε διαφορετικές πλατφόρμες.
Η έκδοση των Windows παρουσίασε μια μικρή βλάβη στην απόδοση του κειμένου κατά μήκος της διαδρομής. το ίδιο πρόβλημα παρατηρήθηκε και στα δύο προγράμματα περιήγησης Firefox και PaleMoon. Ακριβώς όπως το Webkit, ο Gecko φαίνεται να έχει πρόβλημα με την σωστή απόδοση του πρωτότυπου φίλτρου Specular Lighting.
Browser | Εκδοχή | Πλατφόρμα | Αποτέλεσμα |
Firefox | 38.0.5 | Linux | |
Firefox | 38.0.5 | Android | |
PaleMoon | 25.5 | Android |
Browser | Εκδοχή | Πλατφόρμα | Αποτέλεσμα |
Firefox | 38.0.5 | Windows | |
PaleMoon | 25.5 | Windows |
Προβληματικά προγράμματα περιήγησης
Όπως φαίνεται παραπάνω, όλες οι πρόσφατες εκδόσεις των μεγάλων μηχανών / προγραμμάτων περιήγησης έχουν περάσει τη δοκιμή μας χωρίς σημαντικές δυσκολίες. Ας δούμε εκείνους που δεν το έκαναν τόσο καλά.
Maxthon είναι ένας διαδικτυακός περιηγητής που αναπτύχθηκε στην Κίνα. Σύμφωνα με τα 20 εναλλακτικά προγράμματα περιήγησης ιστού του Fahad Khan για τα Windows Maxthon χρησιμοποιεί και τους δύο κινητήρες Trident και Webkit. Δεν έχουμε παρατηρήσει κανένα πρόβλημα με την απόδοση του SVG σε Linux (v. 1.0.5.3) και στα Windows (έκδοση 4.4.5.3000). Ωστόσο, σε μια συσκευή Android δεν παρασχέθηκαν ούτε θόλωση της γκάσου, ούτε άλλα πρωτόγονα φίλτρων.
CM Browser εκτελέστηκε γρήγορα στη δοκιμαστική συσκευή Samsung S3 της συσκευής Samsung, αλλά δεν υποστηρίζει κανένα από τα εφέ φιλτραρίσματος που περιγράφονται από την προδιαγραφή SVG 1.1 SE.
Browser | Εκδοχή | Πλατφόρμα | Αποτέλεσμα |
Maxthon | 4.4.6.2000 | Android | |
CM Browser | 5.1.94 | Android |
Konqueror είναι ένα προεπιλεγμένο πρόγραμμα περιήγησης για το KDE, ένα από τα πιο δημοφιλή περιβάλλοντα επιφάνειας εργασίας Linux. Η δυνατότητα εκτύπωσης αρχείων SVG στον Konqueror εξαρτάται από τη μηχανή εμφάνισης. Με την ενεργοποίηση του WebKit, η δοκιμή SVG έγινε σωστά. Ωστόσο, ο προεπιλεγμένος μηχανισμός απόδοσης Konqueror, KHTML, φαίνεται ότι στερείται υποστήριξης πολλών χαρακτηριστικών: τα εφέ φιλτραρίσματος δεν εφαρμόζονται στους υποκείμενους δείκτες τελών αντικειμένων και κτυπήματος και το κείμενο κατά μήκος αντικειμένων διαδρομής ή μοτίβου δεν αποδίδεται καθόλου.
Browser | Εκδοχή | Πλατφόρμα | Αποτέλεσμα |
Konqueror KHTML | 15.04.2 | Linux |
συμπέρασμα
Στη δοκιμή μας επικεντρώσαμε την υποστήριξη του format SVG σε σύγχρονες μηχανές επιδόσεων ιστού. Έχουμε δοκιμάσει 4 κύριες μηχανές απόδοσης και 15 διαφορετικά προγράμματα περιήγησης συμπεριλαμβανομένων δημοφιλών όπως το Maxthon ή το Dolphin. Σχεδόν όλες οι τρέχουσες εκδόσεις των προγραμμάτων περιήγησης πέρασαν από τη δοκιμή μας και είναι δύσκολο να επιλέξετε έναν οριστικό νικητή.
Φαινεται οτι υποστήριξη και σωστή στοίβαξη των πρωτογενών φίλτρων είναι η τελευταία πρόκληση για τους σημερινούς κινητήρες rendering. Όταν συγκρίνουμε την αρχική εικόνα SVG με όλα τα τεκμηριωμένα αποτελέσματα, ορίσαμε υποκειμενικά τον IE 11 (κινητήρας Trident) για την πρώτη θέση.
Ωστόσο, είναι σαφές ότι ο κινητήρας Blink βρίσκεται σε στενή παρακολούθηση και συνεπώς συνιστούμε προγράμματα περιήγησης Blink για την απόδοση αρχείων SVG. Εάν θέλετε να εκτελέσετε ταχεία δοκιμή του αγαπημένου σας προγράμματος περιήγησης, μπορείτε να χρησιμοποιήσετε τη δοκιμαστική σελίδα SVG renderer εδώ.
Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη για το Hongkiat.com από τον Michal Rost. Ο Michal εργάζεται ως προγραμματιστής σε μια βιοϊατρική εταιρεία, αλλά αφιερώνει τον ελεύθερο χρόνο του στην ανάπτυξη εφαρμογών ανοιχτού κώδικα και δικτυακών πύλων μη κερδοσκοπικού χαρακτήρα. Είναι ο ιδρυτής του scalablegfx. Μπορείτε να τον βρείτε στο Twitter.