Γιατί να χρησιμοποιήσετε αρχεία SVG Αντί JPG

Πλεονεκτήματα του SVG

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

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

Το SVG είναι τεχνολογία διάνυσμα

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

Το SVG βασίζεται σε κείμενο

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

Το SVG είναι XML και λειτουργεί μέσα σε άλλες μορφές γλώσσας

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

Το SVG τροποποιείται εύκολα

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

Οι εικόνες JPG μπορεί να είναι βαριές

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

Έτσι, ποιο είναι καλύτερο;

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

Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 6/6/17