Βελτιστοποίηση SVG

Πώς να βελτιστοποιήσετε ένα SVG

1. Σύρετε ένα αρχείο SVG στην περιοχή απόθεσης ή κάντε κλικ σε αυτήν για να το επιλέξετε. Μπορείτε επίσης να επικολλήσετε τον κώδικα στο πλαίσιο Κώδικας SVG.
2. Διαλέξτε μια Προκαθορισμένη ρύθμιση: Ασφαλής, Ισορροπημένη (η προεπιλογή) ή Μέγιστη. Η λίστα Πρόσθετα παρακάτω δείχνει ακριβώς ποια βήματα ενεργοποιεί η καθεμία.
3. Προσαρμόστε αν χρειάζεται: τη Δεκαδική ακρίβεια (0 έως 8 ψηφία), τα Πολλαπλά περάσματα και την Ευανάγνωστη μορφή (με εσοχές) αν θέλετε ευανάγνωστο κώδικα. Μόλις αλλάξετε ένα πρόσθετο, την ακρίβεια ή τα περάσματα, η ρύθμιση γίνεται Προσαρμοσμένη.
4. Πατήστε Βελτιστοποίηση SVG. Ένα αρχείο που σύρατε βελτιστοποιείται αμέσως και, μόλις υπάρξει αποτέλεσμα, κάθε αλλαγή ρυθμίσεων εκτελεί ξανά αυτόματα τη βελτιστοποίηση.
5. Ελέγξτε τα στοιχεία Αρχικό μέγεθος, Μέγεθος μετά τη βελτιστοποίηση, Εξοικονόμηση και Με gzip και μετά συγκρίνετε τα δύο σχέδια δίπλα-δίπλα.
6. Πατήστε Αντιγραφή για να αντιγράψετε τον Βελτιστοποιημένος κώδικας SVG ή Λήψη βελτιστοποιημένου SVG για να τον αποθηκεύσετε ως name.min.svg.

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

Γιατί τα αρχεία SVG από εργαλεία σχεδιασμού είναι τόσο βαριά

Ένα SVG που εξάγεται από Illustrator, Inkscape, Figma ή Sketch περιέχει πολύ περισσότερα από το σχέδιο. Τα προγράμματα επεξεργασίας προσθέτουν δικούς τους χώρους ονομάτων και χαρακτηριστικά (ονόματα επιπέδων, οδηγούς, ρυθμίσεις εξαγωγής), ένα μπλοκ <metadata>, σχόλια όπως «Generator: Adobe Illustrator», συντεταγμένες με έξι ή περισσότερα δεκαδικά, ομάδες που περιέχουν ένα μόνο στοιχείο και πολύλογα χρώματα όπως #ffffff. Τίποτα από αυτά δεν αλλάζει ό,τι σχεδιάζει το πρόγραμμα περιήγησης. Το SVGO τα αφαιρεί, στρογγυλεύει τους αριθμούς, ξαναγράφει τα δεδομένα διαδρομών με συντομότερες εντολές, συντομεύει τα χρώματα και συγχωνεύει ή ξετυλίγει περιττά στοιχεία. Μείωση 40–60% είναι συνηθισμένη για εξαγόμενα εικονίδια και εικονογραφήσεις.

Προκαθορισμένες ρυθμίσεις και επικίνδυνα πρόσθετα

• Η Ασφαλής εκτελεί την προεπιλεγμένη ρύθμιση του SVGO, αλλά κρατά τα ID, το <desc>, τις ξεχωριστές διαδρομές και τους κανόνες <style>, με 3 δεκαδικά και ένα πέρασμα. Χρησιμοποιήστε την για SVG που αναφέρονται από CSS ή JavaScript, sprite και κινούμενα σχέδια.
• Η Ισορροπημένη είναι η προεπιλεγμένη ρύθμιση του SVGO, με 3 δεκαδικά και πολλαπλά περάσματα. Ταιριάζει στα περισσότερα εικονίδια και εικονογραφήσεις που εμφανίζονται ως εικόνες.
• Η Μέγιστη προσθέτει τα Αφαίρεση