Το SVG σημαίνει Scalable Vector Graphics. Είναι το ανοικτό πρότυπο του W3C για εικόνες που περιγράφονται ως οδηγίες αντί για εικονοστοιχεία (pixels): σχεδίασε έναν κύκλο εδώ, ακολούθησε αυτή την καμπύλη, γέμισε αυτό το σχήμα με αυτό το χρώμα, εμφάνισε αυτή τη λέξη με εκείνη τη γραμματοσειρά. Επειδή η εικόνα είναι ένα σύνολο οδηγιών, μπορεί να σχεδιαστεί σε οποιοδήποτε μέγεθος χωρίς να θολώσει ή να «τετραγωνίσει», γι' αυτό λογότυπα, εικονίδια, χάρτες και διαγράμματα είναι τόσο συχνά σε SVG.
Πώς ένα SVG αποθηκεύει μια εικόνα
Ένα αρχείο SVG είναι XML: αναγνώσιμο κείμενο που μπορείτε να ανοίξετε σε οποιονδήποτε editor. Ένα στοιχείο <path> περιέχει μια συμπαγή συμβολοσειρά από εντολές σχεδίασης, τα <rect>, <circle> και <polygon> κάνουν τα προφανή, το <text> περιέχει πραγματικό, επιλέξιμο κείμενο και το <g> ομαδοποιεί στοιχεία ώστε να μπορούν να μετακινηθούν ή να μορφοποιηθούν μαζί. Ένα χαρακτηριστικό viewBox ορίζει το σύστημα συντεταγμένων, κάτι που επιτρέπει σε όλο το σχέδιο να κλιμακώνεται καθαρά.
Επειδή είναι κείμενο, ένα SVG συμπιέζεται εξαιρετικά καλά· ένα gzipped SVG (μερικές φορές με την επέκταση .svgz) είναι συχνά ένα κλάσμα του αρχικού μεγέθους. Το ότι είναι κείμενο σημαίνει επίσης ότι ένα SVG μπορεί να μορφοποιηθεί με CSS, να είναι animated και να δέχεται scripting. Ένας browser το αντιμετωπίζει ως μέρος του εγγράφου και όχι ως αδιαφανή εικόνα.
Αυτή η τελευταία δυνατότητα έχει και μια σημαντική διάσταση ασφάλειας: ένα SVG μπορεί να περιέχει στοιχείο <script>. Οπουδήποτε γίνεται αποδεκτό SVG ως αρχείο που ανεβάζει ο χρήστης, πρέπει να απολυμαίνεται ή να σερβίρεται με τρόπο που δεν μπορεί να εκτελεστεί, γι' αυτό ορισμένοι ιστότοποι απορρίπτουν SVG παρότι δέχονται κάθε μορφή raster.
Το SVG είναι κακή επιλογή ως container για φωτογραφίες. Μπορείτε να ενσωματώσετε μια raster εικόνα μέσα σε αυτό, αλλά τότε έχετε μια pixel εικόνα τυλιγμένη σε XML, χωρίς κανένα από τα οφέλη κλιμάκωσης.
Τι μεταδεδομένα μεταφέρει ένα SVG
Το SVG έχει ειδικό στοιχείο <metadata> και επειδή το πρότυπο δεν ορίζει τι πρέπει να περιέχει, οι editors βάζουν εκεί πολλές πληροφορίες. Συνήθως περιέχει RDF που χρησιμοποιεί τους όρους Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights και ένα licence URI. Στοιχεία <title> και <desc> μπορούν επίσης να βρίσκονται στη ρίζα ή σε οποιοδήποτε μεμονωμένο σχήμα, όπου λειτουργούν επιπλέον ως κείμενο προσβασιμότητας για screen readers.
Υπάρχουν και τα λογιστικά δεδομένα του ίδιου του editor, που συνήθως είναι και το μεγαλύτερο μέρος. Το Inkscape γράφει ένα δικό του namespace: τη γεωμετρία του παραθύρου του εγγράφου, το επίπεδο zoom και τη θέση του κέρσορα όταν αποθηκεύτηκε τελευταία φορά, βοηθητικές γραμμές, ρυθμίσεις πλέγματος, ονόματα και ορατότητα επιπέδων, και μια συμβολοσειρά inkscape:version. Το Illustrator ενσωματώνει ένα XMP packet με τα δικά του IDs εγγράφου και ιστορικό. Τίποτα από αυτά δεν σχεδιάζει κάτι.
Από αυτό προκύπτουν δύο πρακτικά σημεία. Τα δεδομένα του editor μπορούν εύκολα να αποτελούν το μεγαλύτερο μέρος του αρχείου, οπότε περνώντας ένα SVG από έναν optimiser πριν τη δημοσίευση συχνά το μειώνει στο μισό. Και τα ονόματα των επιπέδων είναι κείμενο που γράψατε εσείς: το <g inkscape:label="client logo v3 REJECTED"> είναι αόρατο στην εικόνα αλλά απολύτως ορατό στο αρχείο.
Πότε να χρησιμοποιείτε SVG
Χρησιμοποιήστε SVG για οτιδήποτε είναι σχεδιασμένο και όχι φωτογραφημένο: λογότυπα, εικονίδια, διαγράμματα, charts, illustrations, χάρτες. Είναι η σωστή επιλογή για το web, όπου ένα αρχείο καλύπτει κάθε πυκνότητα οθόνης, και για εκτύπωση, όπου μπορεί να κλιμακωθεί σε οποιοδήποτε μέγεθος.
Χρησιμοποιήστε PNG ή JPG για φωτογραφίες και για οτιδήποτε έχει συνεχείς τόνους. Εξαγάγετε επίσης ένα επίπεδο raster αντίγραφο όταν χρειάζεστε μια εικόνα που θα ανοίξει σε λογισμικό πολύ παλιό ή πολύ περιορισμένο για SVG και αφαιρέστε τα metadata του editor πριν τη δημοσίευση, τόσο για να μικρύνει το αρχείο όσο και επειδή τα ονόματα των επιπέδων δεν είναι πάντα για δημόσια θέα.