Γιατί πρέπει να χρησιμοποιήσετε εικόνες SVG: πώς να κινούσετε τα SVG σας και να τα κάνετε γρήγορα

Γιατί χρησιμοποιούμε SVG;

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

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

Ας συζητήσουμε τώρα μερικά από τα οφέλη του SVG.

1. Μορφή βασισμένη σε κείμενο

Τα στοιχεία SVG περιέχουν κείμενο, το οποίο βελτιώνει σημαντικά την προσβασιμότητα ενός ιστότοπου. Αλλά το κύριο πλεονέκτημα είναι ότι αυτό το κείμενο ευρετηριάζεται από μηχανές αναζήτησης. Και ένας χρήστης μπορεί να βρει ένα αρχείο SVG μέσω Google.

2. Επεκτασιμότητα

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

Επεκτασιμότητα

3. Υψηλή απόδοση

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

4. Μικρό μέγεθος αρχείου

Το μέγεθος των απλών αρχείων SVG καθορίζεται από τα χρώματα, τα επίπεδα, τις διαβαθμίσεις, τα εφέ και τις μάσκες που περιέχει. Το μέγεθος ενός PNG ή οποιουδήποτε άλλου αρχείου γραφικών raster καθορίζεται από τον αριθμό των pixel από τα οποία αποτελείται. Όσο μεγαλύτερη είναι η εικόνα PNG, τόσο μεγαλύτερο είναι το μέγεθος. Ωστόσο, αυτό δεν ισχύει για τα εικονίδια SVG. Επίσης, τα SVGs μπορούν να βελτιστοποιηθούν και θα σας πω πώς αργότερα σε αυτό το άρθρο.

Μέγεθος αρχείου SVG

5. Πολλές ευκαιρίες επεξεργασίας και κινούμενης εικόνας

Σε αντίθεση με τις εικόνες ράστερ, οι διανυσματικές εικόνες μπορούν να επεξεργαστούν τόσο σε ειδικά προγράμματα σχεδίασης φορέα όσο και απευθείας σε πρόγραμμα επεξεργασίας κειμένου. Μπορείτε επίσης να επεξεργαστείτε χρώματα ή μεγέθη εικονιδίων SVG απευθείας μέσω CSS. Όσο για την κινούμενη εικόνα SVG, μπορεί να γίνει με τη βοήθεια των SMIL, Web Animations API, WebGL ή CSS animation. Κάντε κύλιση προς τα κάτω για να μάθετε περισσότερα σχετικά με την κινούμενη εικόνα CSS εικόνων SVG.

6. Ενσωμάτωση με HTML, XHTML και CSS

Το SVG σχεδιάστηκε «για να ενσωματώσει και να επεκτείνει άλλες εξέχουσες τεχνολογίες ανοιχτής πλατφόρμας Web, όπως X / HTML, CSS και Javascript», σύμφωνα με το W3C Έτσι, σε αντίθεση με διαφορετικές μορφές εικόνας, αυτή η μορφή μπορεί εύκολα να ενσωματωθεί με άλλα έγγραφα και τεχνολογίες.

7. Υποστήριξη W3C Document Object Model

Υπάρχει αυξανόμενη κοινοτική υποστήριξη για το SVG. Η Κοινοπραξία World Wide Web (W3C) ισχυριζόταν πάντα ότι το Διαδίκτυο δεν μπορεί να κάνει χωρίς διανυσματικές εικόνες. Αυτός ο οργανισμός δημιούργησε βασικά τη μορφή SVG και την υποστηρίζουν ενεργά σήμερα.

Ποιες είναι οι δυσκολίες του SVG;

Ο μεγάλος αριθμός μικρών ανταλλακτικών καθιστά παράλογη τη χρήση της μορφής SVG. Όσο περισσότερα μέρη αποτελείται από μια εικόνα, τόσο μεγαλύτερο είναι το μέγεθος.

Για παράδειγμα, εδώ είναι δύο χάρτες SVG των Ηνωμένων Πολιτειών. Το δεύτερο είναι ελαφρώς πιο λεπτομερές από το πρώτο. Αλλά το υψηλότερο επίπεδο λεπτομέρειας κοστίζει σχεδόν πενταπλάσια αύξηση στο μέγεθος του αρχείου - 33 KB σε σύγκριση με τα 147 KB. Εάν αυτός ο χάρτης δεν ήταν μονοχρωματικός, η αύξηση θα ήταν πολύ μεγαλύτερη.

Χάρτες SVG

Εάν η εικόνα είναι γραμμική και περιέχει μερικά χρώματα - το SVG είναι μια λύση. Ωστόσο, εάν οι λεπτομέρειες έχουν σημασία και υπάρχουν πολλές, PNG ή JPEG μπορεί να είναι πιο κατάλληλες.

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

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

Κατά την απόδοση μιας διανυσματικής μορφής, πρέπει να γράψουμε επιπλέον κώδικα SVG Το τελικό αποτέλεσμα θα πρέπει να βελτιστοποιηθεί χρησιμοποιώντας διαφορετικές υπηρεσίες. Τις περισσότερες φορές, για τη βελτιστοποίηση του SVG, χρησιμοποιώ ένα εργαλείο Node.js SVGO. Είναι αρκετά εύκολο στη χρήση και δεν χρειάζεται να ανεβάσετε τις εικόνες σε άλλους ιστότοπους.

Παράδειγμα βελτιστοποίησης SVG με χρήση SVGO

Πώς να ζωγραφίσετε το SVG

Τα γραφικά SVG στον Ιστό μπορούν να κινούνται με διάφορους τρόπους:

  1. SMIL, που είναι η εγγενής προδιαγραφή κινούμενης εικόνας SVG
  2. Web Animations API, το οποίο είναι ένα εγγενές API JavaScript που σας επιτρέπει να δημιουργείτε πιο πολύπλοκες διαδοχικές κινούμενες εικόνες χωρίς να φορτώνετε εξωτερικά σενάρια
  3. WebGL
  4. Κινούμενα σχέδια CSS

Ας εξετάσουμε το τελευταίο.

Το CSS animation χρησιμοποιείται για να αποφευχθεί η υπερφόρτωση της υπηρεσίας σας με μεγάλες βιβλιοθήκες για κινούμενα εικονίδια και φορτωτές.

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

SVG gif

Όπως μπορείτε να δείτε εδώ, χρησιμοποιώ το Keyframe Animation Syntax για κινούμενα σχέδια. Εφαρμόζεται με τον καθορισμό της αρχικής θέσης ενός στοιχείου κατά id (0%), μετάβαση (50%) και τελική θέση (100%). Για να επιτευχθεί ομαλή κίνηση, οι αρχικές και οι τελικές τιμές είναι ίσες.

Ακολουθούν ορισμένα οφέλη από τη χρήση της προσέγγισης CSS στο SVG animation:

  1. Δεν χρειάζεστε εξωτερική βιβλιοθήκη.
  2. Οι προεπεξεργαστές (όπως Sass ή λιγότερο) σάς επιτρέπουν να δημιουργείτε μεταβλητές.
  3. Μπορείτε να χρησιμοποιήσετε το onAnimationEnd και μερικά άλλα άγκιστρα κινουμένων σχεδίων με εγγενή JavaScript.
  4. Αυτή η προσέγγιση είναι εύκολη στη χρήση για την ανάπτυξη σχεδιασμού ιστοσελίδων που ανταποκρίνεται, επειδή μπορείτε να τροποποιήσετε την κινούμενη εικόνα σας με ερωτήματα μέσων.

Τα μειονεκτήματα της χρήσης animation CSS είναι τα εξής:

  1. Δεν μπορείτε να παράγετε κάποια πολύπλοκα εφέ φυσικής, τα οποία θα κάνουν το κινούμενο σχέδιο πιο ρεαλιστικό.
  2. Πρέπει να γίνει πολλή επανυπολογισμός εάν προσαρμόσετε το χρονοδιάγραμμα.
  3. Τα γραφικά CSS και SVG σε κινητά απαιτούν μερικές φορές περίεργα hacks.

Για παράδειγμα

Ωστόσο, μπορούμε να κάνουμε μερικά ενδιαφέροντα έργα με τη βοήθεια απλού και ασήμαντου CSS animation. Για παράδειγμα, έχω δημιουργήσει ένα απλό παιχνίδι-βίντεο χρησιμοποιώντας HTML, CSS και λίγο JavaScript. Όλα τα SVG σχεδιάστηκαν στο Sketch. Ο στόχος αυτού του παιχνιδιού είναι να σώσει την πριγκίπισσα. Σε κάθε περίπτωση, απλώς κάντε κλικ. Μπορείτε να βρείτε το έργο στο GitHub μου.

Για να ολοκληρώσετε

Τα SVG είναι μια εξαιρετική μορφή εικόνας που μπορείτε να ακολουθήσετε. Είναι επεκτάσιμο, ελαφρύ, βασισμένο σε κείμενο και αποτελεσματικό. Είναι εύκολο να επεξεργαστείτε, να ζωγραφίσετε και να ενσωματώσετε. Είναι σημαντικό ότι υποστηρίζονται από σχεδόν οποιοδήποτε πρόγραμμα περιήγησης εκτός από τον Internet Explorer 8 και το Android 2.3.

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

Έχετε ιδέα για ένα έργο λογισμικού;

Η εταιρεία μου KeenEthics είναι μια ομάδα έμπειρων προγραμματιστών εφαρμογών ιστού. Σε περίπτωση που χρειάζεστε μια δωρεάν εκτίμηση ενός παρόμοιου έργου, μη διστάσετε να επικοινωνήσετε μαζί σας .

Μπορείτε να διαβάσετε περισσότερα παρόμοια άρθρα στο Keen Blog μου. Επιτρέψτε μου να σας προτείνω να διαβάσετε την αξία της δοκιμής χρήστη ή 7 περιπτώσεις όταν δεν πρέπει να χρησιμοποιήσετε το Docker.

ΥΣΤΕΡΟΓΡΑΦΟ

Επίσης, θα ήθελα να πω "ευχαριστώ" στη Maryna Yanul που συνέταξε αυτό το άρθρο, καθώς και τους αναγνώστες που έφτασαν στο τέλος!

Το αρχικό άρθρο που δημοσιεύτηκε στο KeenEthics blog βρίσκεται εδώ: Μια νέα προοπτική στο γιατί, πότε και πώς να χρησιμοποιήσετε το SVG.