Τα Scalable Vector Graphics ή SVG παίζουν σημαντικό ρόλο στη σχεδίαση της ιστοσελίδας σήμερα. Εάν δεν χρησιμοποιείτε αυτήν τη στιγμή το SVG στην εργασία σας στο σχεδιασμό ιστοσελίδων, ακολουθούν ορισμένοι λόγοι για τους οποίους πρέπει να ξεκινήσετε, καθώς και εναλλακτικά που μπορείτε να χρησιμοποιήσετε για παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν αυτά τα αρχεία.
Ανάλυση
Το μεγαλύτερο πλεονέκτημα του SVG είναι η ανεξαρτησία της ανάλυσης. Επειδή τα αρχεία SVG είναι διανυσματικά γραφικά (σε αντίθεση με τις εικόνες ράστερ που βασίζονται σε pixel), μπορείτε να αλλάξετε το μέγεθός τους χωρίς να χάσετε την ποιότητα της εικόνας. Αυτό είναι ιδιαίτερα χρήσιμο όταν δημιουργείτε αποκριτικούς ιστότοπους που πρέπει να φαίνονται καλοί και να λειτουργούν καλά σε ένα ευρύ φάσμα μεγεθών οθόνης και συσκευών. Μπορείτε να κλιμακώσετε τα αρχεία SVG προς τα πάνω ή προς τα κάτω για να ικανοποιήσετε τις μεταβαλλόμενες ανάγκες μεγέθους και διάταξης του ανταποκριτικού ιστότοπού σας χωρίς να διακυβεύσετε την ποιότητά τους με οποιονδήποτε τρόπο. Γενικά, οι SVG έχουν ομαλότερη, πιο τραγανή εμφάνιση από τις εικόνες άλλων μορφών, ανεξάρτητα από το μέγεθος.
Μέγεθος αρχείου
Μία πρόκληση με τη χρήση εικόνων ράστερ (π.χ. JPG, PNG, GIF) σε αποκριτικούς ιστότοπους είναι το μέγεθος του αρχείου. Επειδή οι εικόνες ράστερ δεν κλιμακώνονται όπως και οι διανυσματικές εικόνες, πρέπει να παραδώσετε τις εικόνες που βασίζονται σε εικονοστοιχεία στο μεγαλύτερο μέγεθος στο οποίο θα εμφανίζονται. Αυτό συμβαίνει επειδή μπορείτε πάντα να κάνετε μια εικόνα μικρότερη και να διατηρήσετε την ποιότητά της, αλλά το ίδιο δεν ισχύει για τη μεγέθυνση των εικόνων. Το αποτέλεσμα είναι εικόνες που είναι πολύ μεγαλύτερες από το μέγεθος στο οποίο προβάλλονται, αναγκάζοντας τα προγράμματα περιήγησης να κάνουν λήψη μεγάλων αρχείων. Αντίθετα, τα διανυσματικά γραφικά είναι επεκτάσιμα, επομένως μπορείτε να χρησιμοποιήσετε πολύ μικρά μεγέθη αρχείων ανεξάρτητα από το πόσο μεγάλες αυτές οι εικόνες ενδέχεται να χρειαστεί να εμφανιστούν. Αυτό βελτιστοποιεί τελικά τη συνολική απόδοση και την ταχύτητα λήψης ενός ιστότοπου.
Στυλ CSS
Μπορείτε εύκολα να προσθέσετε SVG απευθείας στο HTML μιας σελίδας. Αυτό είναι γνωστό ως inline SVG. Ένα πλεονέκτημα της χρήσης ενσωματωμένου SVG είναι ότι, επειδή τα γραφικά σχεδιάζονται στην πραγματικότητα από το πρόγραμμα περιήγησης, δεν υπάρχει ανάγκη για αίτημα HTTP για τη λήψη ενός αρχείου εικόνας. Ένα άλλο πλεονέκτημα: Μπορείτε να σχεδιάσετε το ενσωματωμένο SVG με CSS. Πρέπει να αλλάξετε το χρώμα ενός εικονιδίου SVG; Αντί να επεξεργαστείτε αυτήν την εικόνα σε λογισμικό επεξεργασίας γραφικών και στη συνέχεια να εξαγάγετε και να ανεβάσετε ξανά το αρχείο, μπορείτε να αλλάξετε το αρχείο SVG απλά με μερικές γραμμές CSS. Μπορείτε να χρησιμοποιήσετε CSS για να αλλάξετε SVG για καταστάσεις αιωρημάτων και άλλες ανάγκες σχεδίασης.
Κινούμενα σχέδια
Επειδή μπορείτε να σχεδιάσετε ενσωματωμένα αρχεία SVG με CSS, μπορείτε επίσης να χρησιμοποιήσετε κινούμενες εικόνες CSS σε αυτά. Οι μετασχηματισμοί και οι μεταβάσεις CSS είναι δύο εύκολοι τρόποι για να προσθέσετε κάποια ζωή στα SVG. Μπορείτε να αποκτήσετε πλούσιες εμπειρίες τύπου Flash σε μια σελίδα χωρίς να χρησιμοποιήσετε το Flash — το οποίο δεν υποστηρίζει πλέον το iPad. Στην πραγματικότητα, η Adobe καταργεί τη σταδιακή χρήση του Flash έως το τέλος του 2020.
Χρήσεις του SVG
Όσο ισχυρά είναι τα SVG, δεν μπορούν να αντικαταστήσουν κάθε άλλη μορφή εικόνας. Οι φωτογραφίες που απαιτούν πλούσιο βάθος χρώματος θα πρέπει να είναι σε μορφή JPG ή PNG, αλλά απλές εικόνες όπως εικονίδια ταιριάζουν απόλυτα για εκτέλεση ως SVG. Το SVG είναι επίσης κατάλληλο για ορισμένες πολύπλοκες εικόνες, όπως γραφήματα, γραφήματα και λογότυπα εταιρείας. Όλα αυτά τα γραφικά επωφελούνται από την κλιμάκωση και τη δυνατότητα εμφάνισης στυλ με CSS.
Υποστήριξη για παλαιότερα προγράμματα περιήγησης
Η τρέχουσα υποστήριξη για το SVG είναι πολύ καλή στα σύγχρονα προγράμματα περιήγησης ιστού. Τα μόνα προγράμματα περιήγησης που δεν διαθέτουν υποστήριξη για αυτά τα γραφικά είναι παλιές εκδόσεις του Internet Explorer (έκδοση 8 και κάτω) και μερικές παλιές εκδόσεις του Android. Συνολικά, ένα πολύ μικρό ποσοστό του πληθυσμού περιήγησης εξακολουθεί να χρησιμοποιεί αυτά τα προγράμματα περιήγησης και αυτός ο αριθμός συνεχίζει να συρρικνώνεται. Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε το SVG στον ιστότοπό σας χωρίς να ανησυχείτε. Εάν θέλετε να παρέχετε ένα εναλλακτικό για το SVG, χρησιμοποιήστε ένα εργαλείο όπως το Grumpicon από το Filament Group. Αυτός ο πόρος δημιουργεί PNG από τα αρχεία εικόνας SVG.