Πώς να δημιουργήσετε και να διαχειριστείτε SVG Sprites

Το SVG κερδίζει τον αγώνα όταν πρόκειται για γραφικά που κλιμακώνονται στον ιστό. Οι σχεδιαστές και οι προγραμματιστές επιλέγουν το SVG αντί των γραμματοσειρών εικονιδίων, των εικόνων ράστερ και των sprite raster.

Τα οφέλη από τη χρήση του SVG είναι πολλά αλλά για μένα, μειώνεται η δυνατότητα κλιμάκωσης.

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

Εισαγάγετε τα sprites του SVG. Αυτά λειτουργούν με ένα παρόμοιο μοτίβο όπως τα είδωλα εικόνας, όμως, πώς δημιουργούνται και περιλαμβάνονται σε μια ιστοσελίδα είναι πολύ διαφορετικά.

Γιατί να χρησιμοποιήσετε καθόλου Sprites;

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

Σε πολλές περιπτώσεις, μια βιβλιοθήκη εικονιδίων θα κλιμακωθεί σε μέγεθος. Η προσθήκη νέων εικονιδίων πρέπει να είναι αποτελεσματική και τελικά εύκολη. Τα SVG sprites βοηθούν να γίνει αυτό πραγματικότητα.

Εξαγωγή κώδικα SVG

Τα αρχεία SVG μπορούν να εξαχθούν από το αγαπημένο πρόγραμμα γραφικών διανύσματος. Τείνω να χρησιμοποιήσω ένα μείγμα εργαλείων και έχω διαπιστώσει ότι όλοι τους έχουν μεγάλη υποστήριξη για την εξαγωγή SVG. Σκίτσο ξεχωρίζει ιδιαίτερα επειδή μπορείτε να επιλέξετε ένα εικονίδιο ή μια γραφική παράσταση και να πατήσετε την εντολή + c και να έχετε αντιγράψει αυτόν τον κώδικα SVG στο πρόχειρο σας. Στη συνέχεια, μπορείτε να κατευθυνθείτε στον επεξεργαστή κωδικών σας, να επικολλήσετε τον κώδικα και να εμφανιστεί το γραφικό πριν τα μάτια σας στο πρόγραμμα περιήγησης.

Βελτιστοποίηση του SVG για το Web

Δυστυχώς, εάν αντιγράφετε και επικολλάτε το Sketch, μπορεί να διαπιστώσετε ότι ο κώδικας είναι μη βέλτιστος και θα μπορούσε να βελτιστοποιηθεί καλύτερα. Υπάρχουν κάποια εργαλεία γι 'αυτό.

Αν χρησιμοποιείτε ειδικότερα το Sketch, ελέγξτε το Εργαλείο συμπίεσης SVGO . Καθώς εξάγετε SVG, το plugin θα τα βελτιστοποιεί αυτόματα πριν αποθηκεύσει το αρχείο.

Εάν δεν χρησιμοποιείτε το Sketch, ελέγξτε την ίδια λειτουργικότητα μορφή εφαρμογής ή αν προτιμάτε τις εφαρμογές ιστού, Jake Archibald βάλτε μαζί ένα για σας .

Δημιουργία του SVG Sprites με μη αυτόματο τρόπο

Η δημιουργία ενός sprite SVG μπορεί να γίνει με το χέρι. Θα χρειαστείτε ένα πρόγραμμα σχεδιασμού φορέα που μπορεί να δημιουργήσει κώδικα SVG. Για αυτό, θα χρησιμοποιήσω το Σκίτσο και θα εξάγω μερικά εικονίδια ως SVG.

Μετά την εξαγωγή των εικονιδίων και την εκτέλεση τους μέσω του SVGO Compressor plugin έχω μείνει με τα ακόλουθα για κάθε εικονίδιο. Σημειώστε ότι σε αυτό το σημείο κάθε εικονίδιο είναι ένα ξεχωριστό αρχείο:

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

Παρατηρήστε πως το SVG έχει ενσωματωμένο στυλ εμφάνισης: κανένα . Αυτό απαιτείται για τη σωστή χρήση των sprites SVG. Παρόλο που τα εικονίδια δεν θα εμφανιστούν στη σελίδα, θα υπάρξει μεγάλος χώρος. Για να αποφύγουμε αυτό το επιπλέον διάστημα που δημιουργεί το SVG, κρύβουμε το SVG με CSS.

Η απλή ένδειξη του κώδικα από τα εικονίδια δεν αρκεί σε αυτό το σημείο. Πρέπει να χρησιμοποιήσουμε ένα στοιχείο που θα σας επιτρέψει να ενσωματώσετε τον κώδικα SVG καθώς και το δικό σας ειδικό χαρακτηριστικό viewBox το οποίο είναι σημαντικό για τα εικονίδια που μπορεί να εμφανίζονται σε διαφορετικά πλάτη και ύψη.

Στοιχεία που ορίζονται στο εσωτερικό του Το στοιχείο μπορεί να κατατεθεί στο πρόγραμμα περιήγησης μόνο όταν αναφέρεται από το στοιχείο.

Ο τελικός σπινθήρας μοιάζει με το ακόλουθο απόσπασμα:

Παρατηρήστε πώς έχω προσθέσει χαρακτηριστικά ταυτότητας σε κάθε στοιχείο συμβόλου. Αυτό είναι σημαντικό επειδή όταν αναφερθήκατε σε ένα συγκεκριμένο εικονίδιο στο sprite χρειάζεστε έναν μοναδικό τρόπο για να το στοχεύσετε. Επίσης, παρατηρήστε πως κάθε εικονίδιο έχει τις δικές του μοναδικές παραμέτρους viewBox . Οι δύο πρώτες παράμετροι θα είναι σχεδόν πάντα "0 0". τα δεύτερα δύο θα είναι ίσα με το μέγεθος του εικονιδίου που εξάγετε.

Συμπεριλαμβάνοντας ένα εικονίδιο στη σελίδα

Με το sprite όλα έτοιμα για να πάμε χρειαζόμαστε έναν τρόπο να συμπεριλάβουμε συγκεκριμένα εικονίδια σε μια σελίδα. Για να γίνει αυτό, θα χρησιμοποιήσετε το στοιχείο γραμμένο έτσι:

Στη σελίδα σας, θα πρέπει να δείτε το εικονίδιο που εμφανίζεται και αυτό είναι πραγματικά το μόνο που υπάρχει σε αυτό!

Αυτοματοποίηση του SVG Sprites

Δημιουργώντας inline sprites SVG δεν είναι τόσο δύσκολο. Το πρόβλημα έγκειται στο γεγονός ότι πολλοί προγραμματιστές πρέπει να δημιουργήσουν sprites για εκατοντάδες εικονίδια ή περισσότερα για ισχυρές εφαρμογές. Δημιουργώντας κάτι τέτοιο με το χέρι θα μπορούσε να πάρει χρονοβόρα και κουραστική. Οι προγραμματιστές χρειάζονται έναν τρόπο για να αυτοματοποιήσουν τη διαδικασία, ώστε να μην σπαταλούν χρόνο δημιουργώντας sprites με το χέρι.

Ευτυχώς, υπάρχουν εργαλεία για κάτι τέτοιο. Διαχειριστές εργασιών όπως Γρυλλισμός ή Χαψιά έχουν διαθέσιμα plugins για χρήση. Αυτά εξομαλύνουν τη δημιουργία των sprites SVG. Παρέχοντας κάθε αρχείο SVG μέσα σε ένα συγκεκριμένο κατάλογο, το plugin θα βελτιστοποιήσει και θα δημιουργήσει όλα τα SVG στον αναφερόμενο κατάλογό σας για να συμπεριληφθεί σε ένα καινούργιο νέο sprite.

Εάν πρέπει να προσθέσετε περισσότερα εικονίδια στον sprite, το μόνο που πρέπει να κάνετε είναι να εξαγάγετε το εικονίδιο ως SVG και να το προσθέσετε στον ίδιο φάκελο. Από εκεί, το πρόσθετο χειρίζεται το χρονοβόρο μέρος.

Μερικά διαθέσιμα πρόσθετα με διαφορετικές γεύσεις: grunt-svgstore , gulp-svg-sprites , svg-sprite .

συμπέρασμα

Όπως συμβαίνει με όλα τα πράγματα στην ανάπτυξη ιστού, υπάρχουν περισσότεροι από ένας τρόποι δημιουργίας των sprites του SVG. Μπορείτε να τα αναφέρετε εξωτερικά, να τις συμπεριλάβετε μέσω του CSS , και ακόμη και να τα κάνει ευαίσθητος .