Ακολουθήστε αυτό το παράδειγμα εργασίας και, στη συνέχεια, προσαρμόστε τα ίδια στοιχεία ελέγχου στη δική σας εικόνα. Άνοιγμα Συμπιεστής SVG.
Ανεβάστε ένα στατικό SVG ή επικολλήστε τη σήμανση
Ανοίξτε τον Συμπιεστή SVG και επιλέξτε ένα αρχείο SVG ή Δοκιμάστε ένα δείγμα. Το δείγμα είναι svg-compressor.svg, ένα σημάδι τροχιάς 985-byte με viewBox 512 × 512, γέμισμα διαβάθμισης, τίτλο και περιγραφή. Χρησιμοποιήστε Επικόλληση SVG όταν η σήμανση βρίσκεται ήδη σε πρόγραμμα επεξεργασίας ή πρόχειρο.
Το εργαλείο δέχεται έως 20 αρχεία των 2 MB το καθένα. Αναλύει ένα πλήρες έγγραφο SVG και αφαιρεί τυπικές δηλώσεις εγγράφου SVG χωρίς να φορτώνει εξωτερικά αρχεία. Κακοσχηματισμένο XML, δηλώσεις προσαρμοσμένων οντοτήτων και εσωτερικά υποσύνολα εγγράφων απορρίπτονται. Πολύ περίπλοκα αρχεία μπορούν επίσης να φτάσουν στο όριο στοιχείων ή χρόνου επεξεργασίας.
Αυτή η ροή εργασίας παράγει στατικά διανυσματικά έργα τέχνης. Σενάρια, χειριστές συμβάντων, εξωτερικοί πόροι, κινούμενα σχέδια και ενσωματωμένες εικόνες ράστερ αφαιρούνται. Η προεπισκόπηση Πρωτοτύπου είναι ήδη απολυμασμένη, επομένως δεν πρέπει να ερμηνεύεται ως μια απεριόριστη απόδοση κάθε δυνατότητας στο αρχείο προέλευσης.
Κρατήστε ένα αντίγραφο του πρωτότυπου SVG. Μια διαδραστική απεικόνιση ή ένα SVG που περιέχει μια φωτογραφία αποτελεί διαφορετική περίπτωση χρήσης από ένα στατικό διανυσματικό εικονίδιο.
Συγκρίνετε το αποτέλεσμα και ορίστε τη δεκαδική ακρίβεια
Τα δύο πλαίσια προεπισκόπησης δείχνουν το απολυμασμένο πρωτότυπο και το βελτιστοποιημένο αποτέλεσμα. Τα μεγέθη δίπλα στο Πρωτότυπο και το Βελτιστοποιημένο και η σύνοψη των bytes συγκρίνουν το αρχείο προέλευσης με την τελική έξοδο. Αναφέρει αύξηση όταν η βελτιστοποίηση καθιστά ένα συγκεκριμένο αρχείο μεγαλύτερο αντί να υπόσχεται μείωση κάθε φορά.
Ανοίξτε τις Ρυθμίσεις και ορίστε τη Δεκαδική ακρίβεια στο 2 για το παράδειγμα. Η ακρίβεια κυμαίνεται από 1 έως 5 και ξεκινά από 3. Οι χαμηλότερες τιμές μπορούν να απλοποιήσουν τη γεωμετρία των αριθμών, αλλά μπορεί να μετατοπίσουν λεπτές καμπύλες, μικρά κενά ή ευθυγραμμισμένες άκρες. Αυξήστε την όταν η προεπισκόπηση χάνει λεπτομέρειες που έχουν σημασία.
Αυτό το δείγμα χρησιμοποιεί απλή γεωμετρία, επομένως η ακρίβεια 2 διατηρεί το αναγνωρίσιμο σχήμα του. Άλλα SVG με περίπλοκες δεκαδικές συντεταγμένες μπορεί να αλλάξουν περισσότερο. Η προβολή της βελτιστοποιημένης σήμανσης SVG εκθέτει το πραγματικό κείμενο που θα ληφθεί· δεν αποτελεί ξεχωριστή αναπαράσταση του πρωτοτύπου.
Ελέγξτε ένα διανυσματικό αρχείο στο μέγεθος προβολής που προορίζεται και σε μεγαλύτερη προβολή. Μια ανεπαίσθητη μετατόπιση μπορεί να είναι δύσκολο να φανεί σε μια μικρή μικρογραφία.
Το παράδειγμα σε αυτόν τον οδηγό
Δοκιμάστε ένα δείγμα: svg-compressor.svg, 985 byte, 512 × 512 viewBox. Ακρίβεια δεκαδικών 2· διατήρηση προσβάσιμων τίτλων/περιγραφών και ενεργοποιημένη η συντόμευση εσωτερικών ID· Απενεργοποιημένες οι αποκρινόμενες διαστάσεις και η αναγνώσιμη σήμανση εξόδου. Ληφθέν SVG: 635 byte.
- Πηγή SVG
- 985 byte
- Βελτιστοποιημένο SVG
- 635 byte
- Μετρούμενη μείωση
- 35.5%
- Διατηρημένο πλαίσιο
- Τίτλος, περιγραφή και 512 × 512 viewBox
Διατηρήστε περιγραφές και εξετάστε εξωτερικά αναγνωριστικά
Αφήστε ενεργοποιημένη την επιλογή Διατήρηση προσβάσιμων τίτλων και περιγραφών για το παράδειγμα. Αυτό διατηρεί τον τίτλο και την περιγραφή SVG ενώ αφαιρεί περιττά μεταδεδομένα επεξεργαστή και απλοποιεί την επιλέξιμη σήμανση. Πρόκειται για διαφορετικά είδη πληροφοριών και δεν πρέπει να αντιμετωπίζονται ως εναλλάξιμα.
Η επιλογή Συντόμευση εσωτερικών αναγνωριστικών είναι ενεργοποιημένη από προεπιλογή. Ο βελτιστοποιητής ενημερώνει τις αναφορές εντός του SVG, αλλά εξωτερικά CSS ή JavaScript μπορεί να εξακολουθούν να βασίζονται στα αρχικά αναγνωριστικά. Απενεργοποιήστε αυτήν την επιλογή όταν το αρχείο αποτελεί μέρος μιας μεγαλύτερης εφαρμογής που ονομάζει τα στοιχεία της και δοκιμάστε το τελικό SVG σε αυτό το πλαίσιο.
Αφήστε τις επιλογές Διαστάσεις απόκρισης και Αναγνώσιμη σήμανση εξόδου απενεργοποιημένες για το παράδειγμα. Οι Διαστάσεις απόκρισης αφαιρούν το σταθερό πλάτος και ύψος όταν το viewBox συντεταγμένων μπορεί να παρέχει κλιμακούμενο μέγεθος. Η Αναγνώσιμη έξοδος προσθέτει εσοχές και είναι χρήσιμη για συντήρηση, αλλά μπορεί να αυξήσει το μέγεθος του κειμένου.
Για ένα αυτόνομο αρχείο εικονιδίου, ο καθαρισμός εσωτερικών αναγνωριστικών είναι συνήθως απλός. Για ένα εξωτερικά προγραμματισμένο διάγραμμα, η διατήρηση των αναγνωριστικών μπορεί να έχει μεγαλύτερη σημασία από μερικά αποθηκευμένα bytes.
Κατεβάστε και επαληθεύστε το τελικό διανυσματικό αρχείο
Επιλέξτε Έναρξη και μετά Λήψη. Η έξοδος του παραδείγματος είναι 635 bytes σε σύγκριση με την πηγή των 985 bytes: μείωση 35.5%. Ο τίτλος και η περιγραφή του παραμένουν και η εμφανιζόμενη σύγκριση αποδίδεται από τη γνήσια πηγή και το ληφθέν SVG.
Το άρθρο αποδίδει και τα δύο διανύσματα σε 1,024 pixel για μια ευκρινή απεικόνιση του αποτελέσματος· το λογικό μέγεθος των συντεταγμένων τους παραμένει 512 × 512. Μια μεγαλύτερη προεπισκόπηση δεν προσθέτει περιεχόμενο ράστερ στο αποθηκευμένο SVG. Ελέγξτε το πραγματικό διάνυσμα στη σελίδα προορισμού σας πριν αντικαταστήσετε ένα υπάρχον στοιχείο παραγωγής.
Ένα αρχείο λαμβάνεται ως SVG με το αρχικό του όνομα. Μια παρτίδα λαμβάνεται ως ένα αρχείο ZIP, με αριθμημένες καταλήξεις για διπλότυπα ονόματα αρχείων. Η επεξεργασία πραγματοποιείται στον περιηγητή. Διατηρήστε την αρχική πηγή αν θέλετε να δοκιμάσετε διαφορετικές ρυθμίσεις βελτιστοποίησης αργότερα.
Η εξοικονόμηση μεγέθους αρχείου μετριέται μόνο σε σχέση με αυτό το δείγμα. Ένα ήδη βελτιστοποιημένο SVG μπορεί να παρουσιάσει μικρή βελτίωση ή να γίνει ελαφρώς μεγαλύτερο.
Συχνές ερωτήσεις
Θα φαίνεται το βελτιστοποιημένο SVG ακριβώς το ίδιο;
Ο βελτιστοποιητής στοχεύει στη διατήρηση της στατικής εμφάνισης, αλλά η στρογγυλοποίηση και η αφαίρεση μη υποστηριζόμενου περιεχομένου μπορεί να αλλάξουν ένα αρχείο. Συγκρίνετε τις προεπισκοπήσεις και δοκιμάστε το αποθηκευμένο SVG στο έργο σας.
Τι αλλάζει η δεκαδική ακρίβεια;
Ελέγχει την ακρίβεια που χρησιμοποιείται για τα αριθμητικά δεδομένα γεωμετρίας και διαδρομών. Οι χαμηλότερες τιμές μπορούν να μειώσουν το μέγεθος, αλλά ενδέχεται να μετατοπίσουν λεπτομέρειες. Η προεπιλογή είναι 3.
Διατηρεί τον τίτλο και την περιγραφή;
Ναι, από προεπιλογή. Αφήστε ενεργοποιημένη την επιλογή Διατήρηση προσβάσιμων τίτλων και περιγραφών για να διατηρήσετε αυτά τα στοιχεία SVG.
Γιατί λείπουν τα σενάρια ή οι εικόνες ράστερ;
Αυτό το εργαλείο δημιουργεί μια στατική διανυσματική έξοδο. Τα σενάρια, τα συμβάντα, οι εξωτερικοί πόροι, τα κινούμενα σχέδια και οι ενσωματωμένες εικόνες ράστερ αφαιρούνται σκόπιμα κατά τον καθαρισμό.
Μπορώ να διατηρήσω τα αναγνωριστικά (IDs) που αναφέρονται από το CSS;
Απενεργοποιήστε τη Σμίκρυνση εσωτερικών αναγνωριστικών όταν ο εξωτερικός κώδικας εξαρτάται από συγκεκριμένα αναγνωριστικά. Επαληθεύστε το βελτιστοποιημένο αρχείο στη σελίδα προορισμού πριν αντικαταστήσετε το πρωτότυπο.
Ανεβαίνουν τα αρχεία SVG για βελτιστοποίηση;
Όχι. Το εργαλείο εκτελεί την ανάλυση και τη βελτιστοποίηση στον περιηγητή και κατεβάζει το αποτέλεσμα τοπικά.
Μπορώ να ανεβάσω ένα SVG με DOCTYPE;
Μια τυπική δήλωση εγγράφου SVG γίνεται δεκτή και αφαιρείται χωρίς να ανακτηθεί το εξωτερικό αναγνωριστικό της. Οι προσαρμοσμένες δηλώσεις οντοτήτων και τα εσωτερικά υποσύνολα εγγράφων απορρίπτονται.
Κάντε το διάνυσμα ελαφρύτερο, με ένα αποτέλεσμα που μπορείτε να επιθεωρήσετε.
Δοκιμάστε ένα δείγμα ή χρησιμοποιήστε το δικό σας αρχείο και ελέγξτε το αποτέλεσμα πριν από την κοινή χρήση.
