Γιατί πρέπει να χρησιμοποιείτε το SVG στην ιστοσελίδα σας σήμερα

Τα οφέλη από τη χρήση του Scalable Vector Graphics

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

Ανάλυση

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

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

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

Μία από τις προκλήσεις με τη χρήση εικόνων ράστερ (JPG, PNG, GIF) σε ανταποκρινόμενες ιστοσελίδες είναι το μέγεθος του αρχείου αυτών των εικόνων. Επειδή οι εικόνες ράστερ δεν εξισορροπούν τον τρόπο με τον οποίο κάνουν αυτά τα διανυσματικά, πρέπει να παραδώσετε τις εικόνες που βασίζονται σε εικονοστοιχεία στο μεγαλύτερο μέγεθος στο οποίο θα εμφανίζονται. Αυτό συμβαίνει επειδή μπορείτε πάντα να κάνετε μια εικόνα μικρότερη και να διατηρήσετε την ποιότητά της, αλλά το ίδιο δεν ισχύει για τη μεγέθυνση των εικόνων. Το τελικό αποτέλεσμα είναι ότι συχνά έχετε εικόνες που είναι πολύ μεγαλύτερες από αυτές που εμφανίζονται στην οθόνη ενός ατόμου, πράγμα που σημαίνει ότι αναγκάζονται αναγκαστικά να κάνουν λήψη ενός πολύ μεγάλου αρχείου.

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

CSS Styling

Ο κώδικας SVG μπορεί επίσης να προστεθεί απευθείας στο HTML μιας σελίδας. Αυτό είναι γνωστό ως "inline SVG". Ένα από τα πλεονεκτήματα της χρήσης του inline SVG είναι ότι αφού τα γραφικά έχουν σχεδιαστεί από το πρόγραμμα περιήγησης βασισμένα στον κώδικα σας, δεν χρειάζεται να κάνετε ένα αίτημα HTTP για να φέρετε ένα αρχείο εικόνας. Ένα άλλο πλεονέκτημα είναι ότι το inline SVG μπορεί να σχεδιαστεί με το CSS.

Χρειάζεται να αλλάξετε το χρώμα ενός εικονιδίου SVG; Αντί να χρειάζεται να ανοίξετε την εικόνα σε κάποιο είδος λογισμικού επεξεργασίας και να εξαγάγετε και να μεταφορτώσετε ξανά το αρχείο, μπορείτε απλά να αλλάξετε το αρχείο SVG με μερικές γραμμές CSS.

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

Κινούμενες εικόνες

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

Χρήσεις του SVG

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

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

Υποστήριξη για παλαιότερα προγράμματα περιήγησης

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

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

Επεξεργασμένο από τον Jeremy Girard την 27/1/17