Αρχική σελίδα » Κωδικοποίηση » Δοκιμή υποστήριξης SVG σε μηχανές περιήγησης στο Web [Μελέτη περίπτωσης]

    Δοκιμή υποστήριξης 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.