Βελτιστοποιητής SVG

Επικολλήστε ή αφήστε ένα SVG και συρρικνώστε το με SVGO. Όλα παραμένουν στο πρόγραμμα περιήγησής σας.

Πώς λειτουργεί το Βελτιστοποιητής SVG

Το SVG Optimizer τρέχει το SVGO (SVG Optimizer) σε έναν Web Worker μέσα στο πρόγραμμα περιήγησής σας για να ελαχιστοποιήσει και να καθαρίσει τα αρχεία SVG χωρίς να τα ανεβάσει. Το SVGO εφαρμόζει ένα διαμορφώσιμο σύνολο προσθηκών που αφαιρούν σχόλια, συμπτύσσουν κενά διαστήματα, συγχωνεύουν πανομοιότυπες διαδρομές, μετατρέπουν σχήματα στην πιο συμπαγή αναπαράστασή τους και αφαιρούν χαρακτηριστικά που δεν έχουν οπτικό αποτέλεσμα. Το αποτέλεσμα είναι ένα μικρότερο SVG που αποδίδεται πανομοιότυπα με το αρχικό.

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

Συγγραφή από Bastien Sulyan

Βελτιστοποιητής SVG: οδηγός βήμα προς βήμα

Ρίξτε το αρχείο SVG σας στην περιοχή μεταφόρτωσης ή κάντε κλικ για αναζήτηση.
Ο Web Worker του SVGO τρέχει τη βελτιστοποίηση αμέσως με το προεπιλεγμένο σύνολο προσθηκών.
Δείτε την ποσοστιαία μείωση και τα αρχικά σε σχέση με τα βελτιστοποιημένα μεγέθη αρχείου.
Κάντε κλικ στο Download για να αποθηκεύσετε το βελτιστοποιημένο SVG στη συσκευή σας.
Αν συγκεκριμένες προσθήκες προκαλούν προβλήματα απόδοσης, προσάρμοσε τη διαμόρφωση προσθηκών και βελτιστοποίησε ξανά.

Συνήθεις περιπτώσεις χρήσης

Ένας προγραμματιστής front-end βελτιστοποιεί εικονίδια εξαγόμενα από το Figma πριν τα υποβάλει σε μια γραμμή παραγωγής στοιχείων, μειώνοντας κάθε εικονίδιο από 4 KB σε κάτω από 1 KB.
Ένας σχεδιαστής ιστού καθαρίζει εικονογραφήσεις SVG εξαγόμενες από το Illustrator που περιέχουν στρώσεις μεταδεδομένων επεξεργαστή αόρατων στο πρόγραμμα περιήγησης αλλά που διογκώνουν το αρχείο.
Ένας προγραμματιστής που χτίζει μια γραμματοσειρά εικονιδίων από γλυφά SVG διασφαλίζει ότι κάθε SVG πηγής είναι καθαρό και συνεπώς δομημένο πριν το βήμα δημιουργίας της γραμματοσειράς.
Ένας μηχανικός απόδοσης ελέγχει ενσωματωμένα SVG σε HTML και αντικαθιστά κάθε διογκωμένο αρχικό με μια βελτιστοποιημένη από το SVGO έκδοση για να βελτιώσει το βάρος της σελίδας.

Συχνές ερωτήσεις

Θα αλλάξει το SVGO πώς φαίνεται το SVG μου;

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

Στέλνεται το αρχείο SVG σε διακομιστή για βελτιστοποίηση;

Όχι. Το SVGO τρέχει σε έναν Web Worker μέσα στην καρτέλα του προγράμματος περιήγησής σας. Το κείμενο SVG διαβάζεται από τον τοπικό σας δίσκο, επεξεργάζεται στη μνήμη JavaScript, και η έξοδος επιστρέφεται στη σελίδα για λήψη. Το περιεχόμενο του αρχείου δεν φεύγει από τη συσκευή σας.

Πόσο μικρότερο θα γίνει το SVG μου;

Η μείωση εξαρτάται από την πηγή. Τα SVG εξαγόμενα από εργαλεία σχεδίασης με μεταδεδομένα επεξεργαστή συνήθως συρρικνώνονται κατά 30 έως 70 τοις εκατό. Τα γραμμένα στο χέρι SVG που είναι ήδη λιτά μπορεί να δουν μόλις 5 έως 15 τοις εκατό μείωση. Το εργαλείο δείχνει τον ακριβή αριθμό bytes και το ποσοστό ώστε να αξιολογήσεις κάθε αρχείο μεμονωμένα.

Επηρεάζει η βελτιστοποίηση τα κινούμενα σχέδια SVG ή τη JavaScript μέσα στο αρχείο;

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

Μπορώ να βελτιστοποιήσω πολλά αρχεία SVG ταυτόχρονα;

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

Ποια έκδοση του SVGO χρησιμοποιεί το εργαλείο;

Το εργαλείο ενσωματώνει το SVGO να τρέχει σε έναν Web Worker. Η ενσωματωμένη έκδοση σημειώνεται στις πληροφορίες του εργαλείου. Το SVGO συντηρείται ενεργά και το API προσθηκών άλλαξε σημαντικά μεταξύ v1, v2 και v3, το τρέχον εργαλείο χρησιμοποιεί τη μορφή προσθηκών v3.

Σχετικά εργαλεία

Κρατήστε τα πάντα τοπικά, εξερευνήστε συμπληρωματικά εργαλεία.

Όλα τα εργαλεία εικόνας