Το αρχείο SVG είναι πολύ μεγάλο; 8 συμβουλές συμπίεσης και βελτιστοποίησης

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

1. Σε επίπεδο διαδρομής: λιγότερα σημεία αγκύρωσης, συγχωνευμένες διαδρομές

Συμβουλή 1: Μειώστε τα σημεία αγκύρωσης (απλοποιήστε τις διαδρομές)

Όσο περισσότερα σημεία αγκύρωσης έχει μια διαδρομή, τόσο μεγαλύτερο είναι το αρχείο και τόσο πιο αργή η απόδοση. Αυξήστε την εξομάλυνση κατά τη μετατροπή για να κόψετε τα σημεία αγκύρωσης από την πηγή. Για ένα υπάρχον SVG, χρησιμοποιήστε το Object → Path → Simplify του Illustrator ή το Path → Simplify (Ctrl+L) του Inkscape για να αφαιρέσετε τα περιττά σημεία αγκύρωσης. Η ρύθμιση της εξομάλυνσης και του αριθμού χρωμάτων στο εργαλείο μετατροπής της PolySVG σας επιτρέπει να ισορροπήσετε ποιότητα και μέγεθος αρχείου σε πραγματικό χρόνο.

Συμβουλή 2: Συγχωνεύστε διαδρομές και επίπεδα

Συνδυάστε πολλές διαδρομές με ίδιο γέμισμα σε μία για να αφαιρέσετε επαναλαμβανόμενα χαρακτηριστικά, ισοπεδοποιήστε άχρηστες ομαδοποιήσεις και διαγράψτε κρυφά επίπεδα και κενά στοιχεία. Σε λογισμικό σχεδίασης, χρησιμοποιήστε τη λειτουργία unite του pathfinder ή συγχωνεύστε τα επίπεδα πριν την εξαγωγή.

2. Μέσα στο αρχείο: αφαίρεση μεταδεδομένων, μείωση ακρίβειας

Συμβουλή 3: Αφαιρέστε τα μεταδεδομένα του επεξεργαστή

Τα SVG που εξάγονται από Illustrator ή Inkscape συχνά περιέχουν namespaces του επεξεργαστή, <metadata>, σχόλια και ρυθμίσεις εξαγωγής που δεν επηρεάζουν την απόδοση, οπότε μπορούν να αφαιρεθούν χειροκίνητα ή να καθαριστούν αυτόματα από το SVGO. Κρατήστε όμως τα <title> και <desc> — βοηθούν στην προσβασιμότητα.

Συμβουλή 4: Μειώστε τη δεκαδική ακρίβεια

Οι συντεταγμένες διαδρομών συχνά έχουν έξι έως οκτώ δεκαδικά ψηφία, ενώ η απόδοση στην οθόνη χρειάζεται ένα ή δύο. Ρυθμίζοντας το floatPrecision σε 1 ή 2 στη ρύθμιση του SVGO, το αρχείο μικραίνει αισθητά χωρίς ορατή διαφορά. Για πολύ μικρά εικονίδια, προσοχή να μη συμπιεστούν υπερβολικά οι συντεταγμένες, αλλιώς το σχήμα θα παραμορφωθεί.

3. Αυτοματοποίηση: μία εντολή με το SVGO

Συμβουλή 5: Βελτιστοποιήστε αυτόματα με το SVGO

Το SVGO είναι το de facto πρότυπο εργαλείο βελτιστοποίησης SVG και έρχεται με δεκάδες plugins: αφαίρεση σχολίων και μεταδεδομένων, συγχώνευση διαδρομών, βελτιστοποίηση εντολών διαδρομής και καθαρισμός αριθμών. Βασική χρήση:

npx svgo input.svg -o output.svg

Τα τυπικά αρχεία μικραίνουν κατά 30%-70%. Δύο προσοχή: μην αφαιρείτε το χαρακτηριστικό viewBox γιατί θα χαλάσει η κλίμακα· και για εικονίδια που θέλετε να επαναχρωματίσετε με CSS, αφήστε το fill να κληρονομείται αντί να στερεώνετε το χρώμα.

Συγκρίνετε το μέγεθος του αρχείου και το πραγματικό μέγεθος μεταφοράς στα εργαλεία προγραμματιστή του browser πριν και μετά τη βελτιστοποίηση, ώστε να επιβεβαιώσετε το κέρδος. Αλλάζετε μόνο ένα είδος παραμέτρου κάθε φορά, κάτι που διευκολύνει τον εντοπισμό του βήματος που επέφερε πρόβλημα.

4. Δομή και επαναχρήση: symbols και χρωματικά επίπεδα

Συμβουλή 6: Επαναχρησιμοποιήστε επαναλαμβανόμενα σχήματα με defs και use

Όταν το ίδιο εικονίδιο εμφανίζεται πολλές φορές σε μια σελίδα, ορίστε το μία φορά με <defs> και παραπέμψτε το με <use>, ή φτιάξτε ένα SVG sprite sheet, και το μέγεθος του αρχείου και ο αριθμός των αιτήσεων πέφτουν μαζί.

Συμβουλή 7: Ελέγξτε τα χρωματικά επίπεδα και αποφύγετε ενσωματωμένα bitmaps

Μειώστε τον αριθμό χρωμάτων κατά τη διανυσματοποίηση για να περιορίσετε τα επίπεδα και χρησιμοποιήστε ένα συμπαγές χρώμα αντί για σύνθετη κλίση όπου γίνεται. Πάνω από όλα, αποφύγετε την ενσωμάτωση bitmaps σε base64 μέσα σε ένα SVG — αυτό μετατρέπει ένα διανυσματικό αρχείο σε μεταφορέα bitmap και το μέγεθος ξεφεύγει. Τα υπολείμματα διαδρομών από τη μετατροπή μπορούν να αφαιρεθούν με κλικ στον online επεξεργαστή.

5. Παράδοση: συμπίεση μεταφοράς και caching

Συμβουλή 8: Ενεργοποιήστε το gzip/Brotli και το cache

Το SVG είναι κείμενο, οπότε το gzip ή το Brotli στον server συνήθως μειώνει το μέγεθος μεταφοράς ακόμη κατά 60%-80%· δώστε στα στατικά αρχεία SVG μεγάλης διάρκειας κεφαλίδες cache. Τα πολύ μικρά εικονίδια μπορούν να ενσωματωθούν κατευθείας σε HTML, κάτι που εξοικονομεί μια αίτηση. Οι αρχές πίσω από αυτά καλύπτονται στο Τα πλεονεκτήματα του SVG· για να ελέγξετε το μέγεθος στο στάδιο μετατροπής, διαβάστε Τρόποι μετατροπής εικόνας σε SVG.

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