Πώς οι σχεδιαστές πρέπει να σκεφτούν το SVG

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

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

Συχνά αναμένουμε ότι το SVG θα συμπεριφέρεται σαν γραφικό bitmap όπως PNG με άπειρη ανάλυση. Αλλά πραγματικά δεν είναι.

Για ένα, ορισμένα πράγματα είναι πιο δύσκολα με το SVG. Η εξαγωγή - ή πιο συγκεκριμένα η διαδικασία μετάβασης από το Sketch * σε ένα τελικό γραφικό - μπορεί να πάρει οπουδήποτε από μερικά δευτερόλεπτα έως 10 λεπτά. Εξαρτάται από το σχεδιασμό σας και από το πώς σκοπεύετε να χρησιμοποιήσετε το γραφικό. Για να δημιουργήσετε ένα SVG που ικανοποιεί τέλεια τις ανάγκες σας, ίσως χρειαστεί να προσαρμόσετε τα στρώματα Σκίτσων με ορισμένους τρόπους ή να τροποποιήσετε την εξαγόμενη σήμανση. Αυτό μπορεί να φαίνεται περίπλοκο και κουραστικό, αλλά δεν είναι δύσκολο και ανοίγει έναν κόσμο δυνατοτήτων για το πώς χρησιμοποιείτε ένα SVG.

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

* Σημείωση: Αν και το Sketch είναι το σχεδιαστικό εργαλείο επιλογής μου, οι έννοιες σε αυτό το άρθρο ισχύουν εξίσου για το Adobe Illustrator και τα περισσότερα άλλα εργαλεία.

Ένας σύντομος τεχνικός ορισμός:

Το SVG αντιπροσωπεύει το Scalable Vector Graphics. Είναι μια μορφή γραφικών, όπως JPEG ή PDF, και ολόκληρη η ιδέα πίσω από αυτές είναι ότι δεν περιορίζονται σε ένα συγκεκριμένο ψήφισμα. επειδή αντί να κατασκευάζονται από εικονοστοιχεία, τα SVG κατασκευάζονται από διανυσματικά σχήματα. Παρόλο που μπορούν να χρησιμοποιηθούν σε διάφορους χώρους, τα SVG είναι πιο στο σπίτι στο διαδίκτυο. Τα παρακάτω παραδείγματα παρουσιάζουν τις δυνατότητές τους.

Γιατί είναι τόσο καταπληκτικό το SVG;

Πολλοί άλλοι πριν από εμένα εξέφρασαν τα πλεονεκτήματα του SVG λεπτομερώς. (Αν είστε προγραμματιστής ιστοσελίδων, ελέγξτε την ομιλία του Chris Coyier, SVG Is for Everybody για μια πιο τεχνική επισκόπηση.) Σε αυτό το άρθρο, θα επισημάνω πέντε βασικά οφέλη που θα ενδιαφέρουν οι περισσότεροι σχεδιαστές.

Οποιοδήποτε μέγεθος. Δεν υπάρχει pixelation.

Τα SVG είναι σαν τα Artboards στο Σκίτσο - αν και έχουν συγκεκριμένες διαστάσεις, περιέχουν επίσης άπειρες λεπτομέρειες, επειδή τα στρώματα / στοιχεία μέσα είναι διανυσματικά σχήματα. Έτσι μπορείτε να εμφανίσετε ένα γραφικό SVG σε οποιοδήποτε μέγεθος, και ποτέ δεν θα εμφανιστεί pixelated.

Μικρά μεγέθη αρχείων

Εφόσον δεν χρησιμοποιείτε SVG για φωτογραφίες (γι 'αυτό είναι το JPEG), οι περισσότεροι SVG καταλαμβάνουν πολύ λιγότερους χώρους από PNG ή JPEG.

Αυτό συμβαίνει επειδή, για μια εικόνα bitmap (όπως PNG ή JPEG), ο πρωτεύων παράγοντας καθορίζει το μέγεθος του αρχείου είναι η ανάλυση. Γενικά, μια εικόνα 3000 × 3000 εικονοστοιχείων θα είναι πάντοτε μεγαλύτερη από 300 × 300 μία.

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

Ως GIF, αυτή η κινούμενη εικόνα είναι πάνω από 400KB. Αλλά ως SVG είναι μόνο 3KB!

Κινούμενα & δυναμικά γραφικά

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

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

Ετικέτες Spritesheets & Icon Sets

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

Πολλές άλλες χρήσεις

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

Περιμένετε, πώς είναι δυνατόν όλα αυτά; Τι είναι το SVG;

Προκειμένου να κατανοήσουμε πώς είναι ικανό το SVG τόσο πολύ, πρέπει να καταλάβουμε πώς είναι εγγενώς διαφορετική από τις εικόνες bitmap.

Πώς είναι αντίθετα με τα bitmap τα SVG;

Τα γραφικά bitmap, γνωστά και ως γραφικά ράστερ, βασίζονται σε εικονοστοιχεία. Αυτό περιλαμβάνει μορφές όπως JPEG, PNG και GIF. Κάτω από την κουκούλα, είναι ουσιαστικά ένα πλέγμα χρωματιστών κουτιών.

Για παράδειγμα, αυτή η εικόνα bitmap 3px × 3px έχει εννέα εικονοστοιχεία: εννέα έγχρωμα τετράγωνα. Αυτά τα τετράγωνα δεν μπορούν να αλλάξουν με κανέναν τρόπο. Δεν μπορούν να αποκαλύψουν περισσότερες λεπτομέρειες, δεν μπορούν να μετακινούνται και δεν μπορούν να γίνουν άλλα χρώματα - είναι μόνιμα και πάντα αναλαμβάνουν μια ορισμένη ποσότητα πληροφοριών. Μεγέθυνση της εικόνας κατά 100% και θα δείτε pixelation.

Τα διανυσματικά γραφικά όπως τα SVG δεν είναι κατασκευασμένα από χρωματιστά εικονοστοιχεία. είναι περιγραφές για το γραφικό σας. Μοιάζουν με κάτι τέτοιο κάτω από την κουκούλα:

Επειδή ένα SVG είναι απλώς μια περιγραφή του γραφικού, μπορεί να εμφανιστεί σε οποιοδήποτε μέγεθος. ένας κύκλος εξακολουθεί να είναι ένας "κύκλος" είτε εμφανίζεται σε 3px ή 3000px. Και οι περιγραφές μπορούν να αλλάξουν. Όποιος έχει περάσει 15 λεπτά εκμάθησης ανάπτυξης ιστού μπορεί να επεξεργαστεί την περιγραφή ενός SVG, για να ρυθμίσει, για παράδειγμα, το χρώμα ενός σχήματος ή το πάχος μιας γραμμής. Με πολλούς τρόπους…

Τα SVG είναι ζωντανά πράγματα. Οι εικόνες bitmaps είναι φωτογραφίες των πραγμάτων.

Μπορεί επίσης να σας φανεί χρήσιμο να σκεφτείτε τι συμβαίνει όταν εξάγετε από το σκίτσο. Οι εικόνες Bitmap ισοπεδώσουν το σχέδιό σας σε ένα μόνο στρώμα. Το PNG ή το JPEG που προκύπτουν δεν γνωρίζουν τα ονόματα των στρώσεων σας ή πραγματικά τίποτα για αυτό που απεικονίζουν.

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

Επειδή ένα SVG εξακολουθεί να περιέχει όλες / τις περισσότερες πληροφορίες σχετικά με τα στρώματα σας, μπορείτε να χειριστείτε ή να προσαρμόσετε αυτά τα επίπεδα σε όλες τις παραπάνω χρήσεις: κινούμενα σχέδια, διαδραστικά / δυναμικά αντικείμενα, σύνολα εικονιδίων κ.λπ.

Αλλά πώς θα φτάσουμε εκεί, ξεκινώντας από το σχέδιο Σκίτσο μας;

Πώς εξάγει το Sketch τα SVG;

Το SVG είναι ένα από τα φορμά που μπορείτε να επιλέξετε κατά την εξαγωγή. Αλλά οι περισσότεροι από εμάς - και εγώ συμπεριφέρομαι στον εαυτό μου - κάνουν το λάθος να σκεφτόμαστε ότι η εξαγωγή ενός SVG θα είναι όσο πιο εύκολη από οποιοδήποτε άλλο γραφικό. "Θα εξάγουμε μόνο ένα PNG 1x, ένα PNG 2x και hey - γιατί να μην εξάγουμε και σε φορέα; SVG. Voila! Τελειώσαμε! "

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

Αυτό δεν είναι λάθος του Sketch. Το Sketch βελτιώνει διαρκώς τις εξαγωγές SVG και τώρα είναι αρκετά καλό.

Το πραγματικό ερώτημα είναι: με όλους αυτούς τους διαφορετικούς τρόπους να χρησιμοποιήσετε ένα SVG, πώς το Sketch γνωρίζει ακριβώς τι να εξάγει;

Δεν το κάνει. Δεν μπορεί. Το μόνο που μπορεί να κάνει οποιοδήποτε λογισμικό γραφικών είναι να προσπαθήσει να μεταφράσει τα επίπεδα σας όσο το δυνατόν πιο ομοιόμορφα στα επίπεδα SVG. Πώς κάνατε κάτι στο Sketch είναι το πώς το Sketch θα προσπαθήσει να το εξαγάγει.

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

Αυτό το ίδιο θαυμαστικό εικονίδιο θα μπορούσε να γίνει από 2 ξεχωριστά τυποποιημένα σχήματα (αριστερά), μία ενιαία συνδυασμένη διαδρομή (κέντρο) ή μια οριακή κατακόρυφη γραμμή με στρογγυλεμένο ορθογώνιο (δεξιά). Υπάρχουν και άλλες δυνατότητες!

Με τον όρο "κατασκευασμένο" εννοώ πώς δημιουργήσατε, συνδυάσατε και χαρακτήρισες τα στρώματα σας για να επιτύχετε ένα συγκεκριμένο αποτέλεσμα. Αυτό το θαυμαστικό παράδειγμα, παραπάνω, θα μπορούσε να γίνει με λίγους τρόπους. Δεν υπάρχει πάντα ένας σωστός τρόπος - εξαρτάται από το πώς σκοπεύετε να χρησιμοποιήσετε το γραφικό. Και περιστασιακά εξαρτάται από τα χαρακτηριστικά που υποστηρίζει το SVG. Ακολουθεί ένα άλλο παράδειγμα από την πορεία μου:

Σε αυτό το παράδειγμα, ίσως ήταν ευκολότερο στο Sketch να δημιουργήσει το pinhead με 3 γεμίσματα. Όμως, ενώ οι ακτινικές κλίσεις υποστηρίζονται καλά στο SVG, οι συνδυασμένες λειτουργίες και τα πολλαπλά γεμίσματα ανά σχήμα απαιτούν εναλλακτικές λύσεις και μπορεί να παράγουν ασυνεπή αποτελέσματα.

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

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

Αναρωτιέστε πιθανώς:

Ποιες είναι όλες οι αλλαγές που θα πρέπει να κάνω στα στρώματα Σκίτσων μου για να φτιάξω το τελικό SVG;

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

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

Τι μπορείτε να κάνετε διαφορετικά;

Θα σας αφήσω με μερικές πρακτικές συμβουλές και προτάσεις.

  • Θυμηθείτε ότι τα SVG είναι σαν τα ζωντανά πράγματα, που προορίζονται για διαφορετικά μέρη και χρήσεις. Ως αποτέλεσμα, μπορούν συχνά να κατασκευαστούν με πολλούς τρόπους.
  • Αν δεν έχετε τα αποτελέσματα που θέλετε, δοκιμάστε να κάνετε το γραφικό με διαφορετικό τρόπο. Για παράδειγμα, εάν τα σύνορα δεν φαίνονται σωστά, προσπαθήστε να τα περιγράψετε πριν εξάγετε.
  • Μην συμπεριλάβετε εικόνες bitmap στο SVG σας. Θα νικήσουν όλα τα οφέλη της.
  • Συνεργαστείτε με έναν προγραμματιστή για να κατανοήσετε τη μορφή τόσο από άποψη σχεδιασμού όσο και μηχανικής, ώστε να ξέρετε πώς να το χρησιμοποιήσετε για τις ανάγκες σας.
  • Για να ξεκινήσετε τη βελτίωση του μεγέθους αρχείων των SVG σας, εγκαταστήστε το πρόσθετο SVGO του Sketch (το O σημαίνει βελτιστοποίηση). Το πρόσθετο, το οποίο εκτελείται στο παρασκήνιο μετά την εξαγωγή οποιουδήποτε SVG, προσπαθεί να συρρικνώσει το αρχείο με διάφορους τρόπους. Υπάρχουν πολλά ακόμα που μπορείτε να κάνετε για να μειώσετε το μέγεθος του SVG, αλλά αν δεν σας ενδιαφέρει να αφιερώσετε χρόνο, αυτό το πρόσθετο είναι καλύτερο από το τίποτα.

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

Εγγραφείτε στο ενημερωτικό δελτίο μου για να είστε οι πρώτοι που γνωρίζω πότε δημοσιεύω νέα άρθρα και πόρους σχεδίου.

Εάν σας άρεσε αυτό το άρθρο, θα αγαπήσετε το Master Sketch - τα online μαθήματα κατάρτισης για τους επαγγελματίες που μαθαίνουν το Sketch. Θα μάθετε τόνους κόλπων και πρακτικές ροές εργασίας, σχεδιάζοντας έργα πραγματικού UI / UX και εικονίδια εφαρμογής.