Συμπίεση αρχείων SVG

Το SVG είναι κώδικας, όχι pixel

Ένα αρχείο SVG (Scalable Vector Graphics) είναι ένα έγγραφο κειμένου σε XML που περιγράφει σχήματα: διαδρομές, κύκλους, διαβαθμίσεις, κείμενο. Επειδή περιέχει οδηγίες αντί για pixel, μένει ευκρινές σε κάθε μέγεθος, από ένα favicon 16 pixel μέχρι μια διαφημιστική πινακίδα. Εικονίδια, λογότυπα, εικονογραφήσεις, γραφήματα και χάρτες στο web είναι συχνά SVG, και η μορφή είναι πρότυπο του W3C από το 2001.

Το ότι είναι κείμενο έχει μια παρενέργεια: το μέγεθος του αρχείου εξαρτάται από το πόσο φλύαρα το έγραψε το πρόγραμμα σχεδίασης, όχι από το πόσο μεγάλη εμφανίζεται η εικόνα. Δύο SVG που αποδίδονται ακριβώς ίδια μπορεί να διαφέρουν σε μέγεθος πολλές φορές.

Τι κάνει τα αρχεία SVG βαρύτερα απ' όσο χρειάζεται

• Μεταδεδομένα του προγράμματος σχεδίασης. Τα Illustrator, Inkscape, Figma και Sketch προσθέτουν δικούς τους χώρους ονομάτων, ονόματα επιπέδων, σχόλια εξαγωγής και μερικές φορές ένα ενσωματωμένο αντίγραφο του επεξεργάσιμου εγγράφου.
• Υπερβολική ακρίβεια. Συντεταγμένες όπως 12.483920174 εκεί όπου το 12.48 αποδίδεται ακριβώς το ίδιο σε κάθε ρεαλιστικό μέγεθος.
• Περιττή δομή. Άδειες ομάδες, κρυφά επίπεδα, προεπιλεγμένες τιμές χαρακτηριστικών, αχρησιμοποίητοι ορισμοί και στυλ που θα μπορούσαν να είναι συντομότερα.
• Μακροσκελής σύνταξη διαδρομών. Απόλυτες εντολές εκεί όπου οι σχετικές είναι συντομότερες, επαναλαμβανόμενα γράμματα εντολών, περιττά κενά.
• Ενσωματωμένες εικόνες bitmap. Μια φωτογραφία επικολλημένη σε εικονογράφηση αποθηκεύεται ως κείμενο Base64 μέσα στο SVG, που είναι περίπου κατά ένα τρίτο μεγαλύτερο από το αρχικό αρχείο εικόνας.

Πώς βελτιστοποιεί το εργαλείο τα SVG

Το εργαλείο τρέχει στο πρόγραμμα περιήγησής σας το SVGO, τον διαδεδομένο βελτιστοποιητή SVG ανοιχτού κώδικα. Αφαιρεί μεταδεδομένα και σχόλια, συμπτύσσει άχρηστες ομάδες, συντομεύει τα δεδομένα διαδρομών, στρογγυλεύει τους αριθμούς σε 3 δεκαδικά ψηφία από προεπιλογή (μπορείτε να επιλέξετε από 0 έως 6) και συγχωνεύει στυλ, επαναλαμβάνοντας τα περάσματα μέχρι να μην αλλάζει τίποτα. Το αποτέλεσμα είναι πάλι ένα κανονικό SVG που ανοίγει σε κάθε πρόγραμμα σχεδίασης ή επικολλάται σε HTML. Στις δοκιμές μας σε οκτώ SVG, από εικονίδια βελτιστοποιημένα με το χέρι μέχρι μια εξαγωγή του Inkscape γεμάτη δεδομένα του προγράμματος, η εξοικονόμηση κυμάνθηκε από 8 % έως 42 %.

Η βελτιστοποίηση είναι τεχνικά με απώλειες, με μια στενή έννοια: η στρογγυλοποίηση αλλάζει τις συντεταγμένες ελάχιστα, και τα δεδομένα που αφορούν το πρόγραμμα σχεδίασης χάνονται, οπότε δεν μπορείτε να ξανανοίξετε το αρχείο με όλα τα αρχικά του επίπεδα. Κρατήστε το αρχείο-πηγή από το εργαλείο σχεδίασης και θεωρήστε το βελτιστοποιημένο SVG ως την έκδοση προς δημοσίευση.

Οι διακομιστές συνήθως στέλνουν τα SVG με συμπίεση gzip ή Brotli, που μικραίνει ξανά το κείμενο στον δρόμο προς το πρόγραμμα περιήγησης. Η βελτιστοποίηση και η συμπίεση του διακομιστή αθροίζονται, γιατί τα δεδομένα που αφαιρέθηκαν δεν χρειάζεται καν να συμπιεστούν.

Όταν ένα βελτιστοποιημένο SVG χαλάει

• Η CSS ή η JavaScript δεν βρίσκει πια ένα στοιχείο. Οι βελτιστοποιητές συντομεύουν ή αφαιρούν ID και ονόματα κλάσεων που φαίνονται αχρησιμοποίητα μέσα στο αρχείο. Αν τα στυλ ή τα σενάρια της σελίδας σας στοχεύουν σε αυτά, ελέγξτε το αποτέλεσμα πριν το δημοσιεύσετε.
• Το εικονίδιο δεν κλιμακώνεται πια. Ένα SVG χρειάζεται το χαρακτηριστικό viewBox για να αλλάζει σωστά μέγεθος. Το εργαλείο το κρατά, οπότε ελέγξτε αν το είχε το πρωτότυπο· ένα SVG μόνο με σταθερό πλάτος και ύψος δεν κλιμακωνόταν ποτέ καλά.
• Τα μικροσκοπικά σχήματα φαίνονται παραμορφωμένα. Πολύ μικρά εικονίδια σχεδιασμένα σε μεγάλο καμβά μπορεί να επηρεαστούν από τη στρογγυλοποίηση. Με την προεπιλεγμένη ακρίβεια αυτό είναι σπάνιο.
• Το αρχείο είναι κυρίως μια ενσωματωμένη φωτογραφία. Εξαγάγετε τη φωτογραφία ως ξεχωριστό JPG ή WebP και συνδέστε την, ή μετατρέψτε ολόκληρο το γραφικό σε bitmap.

Ερωτήσεις για το SVG

Σχετικές σελίδες

Οι εικόνες bitmap επεξεργάζονται από το εργαλείο συμπίεσης εικόνων. Για το τι τρέχει τοπικά και γιατί, δείτε πώς λειτουργεί.