Εργαλείο Βελτιστοποίησης (Optimizer / SVGO)
-
Original Size
-
Optimized Size
-
Savings
Γιατί καθίσταται ΑΠΑΡΑΙΤΗΤΗ η ριζική (και βαθιά) βελτιστοποίηση στα SVG Vector Αρχεία (Εικόνες);
Όταν «εξάγετε/Αποθηκεύετε (Export)» μια διανυσματική εικόνα από Προγράμματα όπως: (Figma, Sketch, Adobe Illustrator (Ai), Inkskape)... Τα προγράμματα αυτά, πετάνε (μαζί με το path data) ΕΚΑΤΟΝΤΑΔΕΣ γραμμές άχρηστου Κώδικα. Αυτός ο κώδικας, ΔΕΝ προσφέρει απολύτως ΤΙΠΟΤΑ στον επισκέπτη/τελικό-browser παρά μόνο αυξάνει βίαια το βάρος (σε KB) μειώνοντας την ταχύτητα του Site! Η Βελτιστοποίηση, (SVG Cleanup / SVGO) 'τρώει / μασάει / σβήνει / διαγράφει' όλη τη σαβούρα (Trash elements), αφήνοντας ΜΟΝΟ ότι πραγματικά είναι αναγκαίο να δει ο επισκέπτης (!), Μειώνοντας τα KBs κατά 30% έως και 75+%.
8 Ισχυρά Είδη (Στρατηγικών) Βελτιστοποίησης / Φίλτρων
Μπορείτε να Ενεργοποιείτε ή (να σταματάτε) οποιοδήποτε 'Μέρος/Φίλτρο' της Βελτιστοποίησης αναλόγως τις ανάγκες σας.
Ζωντανά Στατιστικά και Προβολή Εξοικονόμησης (Savings Data Analytics)
Δέιτε μπροστά στα μάτια σας το ΠΡΩΤΟΓΕΝΕΣ Μεγεθος (Initial Raw size KB), ΤΟ ΝΕΟ / Καθαρό Μέγεθος και... το (%) Των (Savings) Μονάδων που σώσατε!
LossLess Data - (Δεν Αλλοιώνεται το Graphic - Ασφαλές 100%!)
Όλες μας οι διαδικασίες θεωρούνται 'Απωλεστικές μόνο σε επιπρόσθετα κρυφά Metadata'. Οι Αλγόριθμοι (Visuals) των εικονιδίων και τα paths data ΜΕΝΟΥΝ οπτικά ΑΠΟΛΥΤΩΣ - ΙΔΙΑ ΜΕ ΤΟ ΠΡΩΤΟΤΥΠΟ!! (Lossless visual fidelity).
Φέρτε Τα KBs Στα Μέτρα Σας (Σε 3 Απλά Βήματα)
Εισαγωγή Ακαθάριστου/Raw/Exported Κώδικα (SVG)
Κάντε εξαγωγή από το Illustrator/Figma/Sketch —> ανοίξτε το στο Notes/editor —> αντιγράψτε τον κώδικα μέσα στο πρώτο πεδίο (Input Box).
Δώστε 'Τσεκ / Click' Στα Φίλτρα (Επιλογές)
Επιλέξτε (ή απλά αφήστε τα όλα - Default settings) και παίξτε με τις επιλογές ανάβοντας και κλείνοντας τα filters. Δείτε τις αλλαγές στο size.
Αντιγράψτε & ...Deploy
O Ασημένιος/Καθαρισμένος κώδικας είναι έτοιμος. Επικολλήστε τον στην εφαρμογή ή το Theme σας. Αργότερα, χαζέψτε τον να 'Sizzles' - κατεβαίνει 'μπάλα/sfaira' στο Network DevTools.
Ενδεικτικές Χρήσεις Βελτιστοποίησης
Εφαρμογή Σε Custom (Δικές Σας) Icon-Libraries!
Μη φορτώνετε χιλιάδες περιττά KBs στη React library / UI framework σας, χρησιμοποιήστε το svg-optimizer, πρίν 'χτίσετε' (Build/Webpack) το library.
Εταιρικά Λογότυπα (SVG Logos/Header/Hero)
Τα logos, ειδικά τα Header Logos στα NavBar, φορτώνονται πρώτα (Header Load Request). Το 'Μοντέρνο' Web Design επιβάλλει 'Εξωφρενικά-Savage-Fast' Loading (FCP metrics)
Web Animation Files (Gasp / Framer) κ.λπ
Οταν σκοπεύετε να κάνετε (trigger) κάποιο Animation-Frame rate... χρειάζεστε 'αέρινα' / 'εξυγιανθέντα' Nodes Tree (DOM) χωρίς βαρύ DOM Parsing!
Προοδευτικές Εφαρμογές Ιστού - (Mob / PWAs) / SEO Core Vitals (Lighthouse)
Tα πολύ ελαφριά SVG Images αυξάνουν δραματικά τα (Core Vitals Google Metrics) - Σκοράροντας πολύ ψηλά στο Lighthouse Dev Tools!
Tip & Tricks / Εξειδικευμένες Γνώσεις
✓ Προσοχή στο 'Σβήσιμο' των (IDS) Εάν Τρέχετε CSS Animations / Hover Events!
Εάν σκοπέτα να προσθέσετε (CSS Selectors / Classes / ID ) απευθείας στο SVG - Ώστε να παίξετε με Hover color Events, *ΑΠΕΝΕΡΓΟΠΟΙΗΣΤΕ* το filter Remove IDs & Classes γιατί ίσως σβήσουν τα hooks/targets των Animations!
✓ Συνιστάται ΠΑΝΤΑ (Keep ViewBox) και (RE-MOVE) το Height/Width Attributes
Εάν ένα SVG έχει 'Καρφωτά/Σκληρά - Hardcoded' [Width="30"] και [Height="30"], ΕΙΝΑΙ ΑΔΥΝΑΤΟΝ ΝΑ ΤΟ ΚΑΝΕΤΕ 100% RESPONSIVE στο Container! H Λύση; Αφήστε το "ViewBox" ανέγγιχτο - και ΔΙΑΓΡΑΨΤΕ ΤΑ Width / Height - Ρυθμίζοντας τον κώδικα σας μέσω CSS (πχ max-width 100%) !
✓ Στρογγυλοποίηση / Rounding Decimal Paths Numbers (Στo 2 / 2 Decimal Places)
Πολλά εργαλεία σώζουν: `M 14.12023924040` — Ποίος ο λόγος; Κανένα μάτι δεν βλέπει αυτή την (Sub-Pixel) ανοησία.. 2 Δεκαδικά ψηφία (`M 14.12`) ειναι αρκετά! Μηδενίζει τον όγκο/παχουμίες (bloat) αμέσως.
✓ Για Ομάδες: Προσθέστε 'CI / CD SVG-O' Pipeline (Npm)
Στις Μεγάλες Προγραμματιστικές Ομάδες (GITHub repos), μπορείτε να το βάλετε σαν (Git-Hook / SVGO NPM Module / CI/CD Pipeline - Gulp/WebPack) ώστε ΟΛΑ μα ΟΛΑ τα SVGs που μπαίνουν στο server - να 'περνούν' από αυτόν τον Αλγόριθμο... (Automation Magic)!
❓ Συνήθεις Ερωτήσεις (FAQ)
Πόσο (KB Bytes %) καταφέρνουμε να γλιτώσουμε, συνήθως με αυτούς τους καθαρισμούς;
Η μείωση της τάξης του 30, έως και.. 75%+ δεν είναι ασυνήθιστη — κυρίως από αρχεία του Illustrator/Ai τα οποία 'πετάνε' εκατονταδες metadata XMLS μέσα. (*Το figma γενικά εξάγει πιο 'Καθαρά' Svgs, αλλά και πάλι σώζει KBs*)
Εγγυάστε ότι 'δεν θα καταστραφεί' η εικόνα μου εάν πατήσω 'Bελτιστοποίηση'; (Lossless visual ?)
ΝΑΙ. Η Εικόνα (Vector Visual Fidelity) ΜΕΝΕΙ ΑΝΑΛΛΟΙΩΤΗ. Καμία μα καμία από τις αλλαγές / regex / functions του εργαλείου - *δεν σβήνει/ΔΕΝ ΑΓΓΙΖΕΙ TΑ Paths, ούτε τα Gradients, Ούτε ΤΑ Polygons* - που παράγουν (Rendering) το σχημα!! Το μόνο 'Οριακό/Borderline' ρίσκο ειναι όταν ενεργοποιήσετε την αφαίρεση IDs (μπορεί να σπάσει JavaScripts Animations CSS).
Και γιατί να σβήσω τα Width/Heights (Μήκος/Πλάτος) από τον Κώδικα/Tags μου;
Άν υπάρχουν μέσα - τότε 'Κλειδώνουν / Block' (Hard-code Limits) το Γραφικό/Σχήμα να ΜΗΝ ΜΠΟΡΕΙ ΝΑ ΚΑΤΑΣΤΕΙ 'Υδραυλικό' (Fluid / Responsive Container). Όταν το Σβήνετε - και χρησιμοποιείτε αποκλειστικά το attr 'ViewBox', τότε το Web Browser σας είναι σε θέση να το 'Ξεχειλώσει (Scale-Up / Down-Scale)' ΟΠΩΣ αυτο θέλει/αποφασίσει βασει 100% Flex/Grid Models σας, με την απλή προσθήκη `width: 100%` 'Η max-width: 5rem, στο Stylesheet!
Γιατί να χρησιμοποιήσω αυτό, και όχι.. κατευθείαν το SVGO Node..
To SVGO (ή SVGOptimizer Node CLI) είναι το 'Απόλυτο Standard / Holy Grail' των Tools. Συμφωνούμε. Για κάποιον όμως ο οποίος (1) Δεν είναι προγραμματιστής / designer, (2) Βιάζεται να κάνει 'καθάρισμα 1 εικόνας' πριν την ανεβάσει στο WordPress - και ΔΕΝ ΘΕΛΕΙ ούτε έχει γνώσεις να τρέχει (npm install / cmd / terminals)... Το δικό μας Εργαλείο, τρέχει απλά και κατανοητά τον ΊΔΙΟ ΠΥΡΗΝΑ - (μέσα στον Περιηγητή - Στην οθόνη του)!