Τι είναι ένα αρχείο SVG;

Ένα αρχείο SVG είναι ένα αρχείο Scalar Vector Graphics που χρησιμοποιεί μορφή κειμένου βασισμένη σε XML για την περιγραφή της εμφάνισης μιας εικόνας. Η λέξη Scalable αναφέρεται στο γεγονός ότι το SVG μπορεί να κλιμακωθεί σε διαφορετικά μεγέθη χωρίς να χάσει καμία ποιότητα. Η περιγραφή τέτοιων αρχείων βάσει κειμένου τα καθιστά ανεξάρτητα από την ανάλυση. Είναι μια από τις πιο χρησιμοποιούμενες μορφές για τη δημιουργία ιστότοπου και την εκτύπωση γραφικών προκειμένου να επιτευχθεί επεκτασιμότητα. Ωστόσο, η μορφή μπορεί να χρησιμοποιηθεί μόνο για δισδιάστατα γραφικά. Τα αρχεία SVG μπορούν να προβληθούν/ανοιχθούν σε όλα σχεδόν τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένων των Chrome, Internet Explorer, Firefox και Safari.

Σύντομη Ιστορία

Οι προδιαγραφές SVG είναι διαθέσιμες ως ανοιχτό πρότυπο από την Κοινοπραξία Παγκόσμιου Ιστού (W3C) από το 1999. Πριν από αυτό, παρόμοιες προδιαγραφές μορφής αρχείων σε έξι διαφορετικές μορφές υποβλήθηκαν στο W3C έως το 1998. Εφαρμόστηκε μια ενημέρωση στις προδιαγραφές το 2011 και εκδόθηκε η έκδοση 1.1 . Το 2016, το SVG 2 κυκλοφόρησε ως νεότερη έκδοση, συμπεριλαμβανομένων λειτουργιών επιπλέον αυτών στο SVG 1.1.

Προδιαγραφές μορφής αρχείου

Το SVG Document Object Model (DOM) θέτει τις βάσεις για όλες τις προδιαγραφές και τις διεπαφές που αντιστοιχούν στις συγκεκριμένες ενότητες των προδιαγραφών. Οι θεατές SVG πρέπει να εφαρμόσουν τις διεπαφές SVG DOM όπως ορίζονται στις προδιαγραφές του W3C. Το DOM του εκθέτει πολλές διεπαφές για διαφορετικούς τύπους δεδομένων και στοιχεία.

Σχήματα SVG

Το SVG έχει ορισμένα προκαθορισμένα στοιχεία σχήματος που μπορούν να χρησιμοποιηθούν από προγραμματιστές:

Ορθογώνιο
Κύκλος
Έλειψη
Γραμμή
Πολυγραμμή
Πολύγωνο
Μονοπάτι

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

Διαδρομές - Τα μονοπάτια χρησιμοποιούνται για την αναπαράσταση απλών αλλά και σύνθετων περιγραμμάτων σχημάτων. Οι κωδικοποιήσεις χρησιμοποιούνται για να ορίσουν τη φύση της λειτουργίας. Για παράδειγμα, το M χρησιμοποιείται για το Move To, το L χρησιμοποιείται για το Line To, το Z χρησιμοποιείται για το κλείσιμο μιας διαδρομής και ούτω καθεξής.

Βασικά σχήματα - Μπορούν να σχεδιαστούν μονοπάτια και μονοπάτια ευθείας γραμμής που αποτελούνται από μια σειρά συνδεδεμένων ευθύγραμμων τμημάτων (πολύγραμμες), καθώς και κλειστά πολύγωνα, κύκλοι και ελλείψεις. Τα ορθογώνια και τα ορθογώνια με στρογγυλές γωνίες είναι επίσης τυπικά στοιχεία.

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

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

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

Διαβαθμίσεις και μοτίβα - Τα σχήματα σε ένα αρχείο SVG μπορούν να γεμιστούν ή να περιγραφούν με συμπαγή χρώματα, διαβαθμίσεις ή επαναλαμβανόμενα μοτίβα.

Εφέ φίλτρου - Είναι στην πραγματικότητα μια σειρά λειτουργιών γραφικών που εφαρμόζονται σε δεδομένο διανυσματικό γραφικό πηγής για την παραγωγή τροποποιημένου αποτελέσματος.

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

Σύνδεση - Είναι δυνατό οι εικόνες SVG να έχουν υπερσυνδέσμους προς άλλα έγγραφα. Αυτό επιτυγχάνεται μέσω της XML Linking Language ή XLink. Αυτό επιτρέπει τη δημιουργία συγκεκριμένων καταστάσεων προβολής που χρησιμοποιούνται για μεγέθυνση/σμίκρυνση μιας συγκεκριμένης περιοχής ή για περιορισμό της προβολής σε ένα συγκεκριμένο στοιχείο.

Scripting - Παρόμοια με την HTML, όλες οι πτυχές ενός εγγράφου SVG είναι προσβάσιμες για χειρισμό χρησιμοποιώντας σενάρια. Τα αντικείμενα SVG DOM παρέχουν την καθοδήγηση για την επίτευξη αυτού του στόχου χρησιμοποιώντας το στοιχείο και το χαρακτηριστικό SVG. Τα σενάρια περικλείονται σε στοιχεία ετικέτας «script» και μπορούν να εκτελούνται ως απόκριση σε συμβάντα δείκτη, πληκτρολογίου ή εγγράφου, όπως απαιτείται.

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

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

Παραδείγματα

Οι ακόλουθες γραμμές δείχνουν πώς αναπαρίσταται ένας Κύκλος χρησιμοποιώντας το σενάριο SVG.

<html>
<body>

<h1>My first SVG</h1>

<svg width#"100" height#"100">
  <circle cx#"50" cy#"50" r#"40" stroke#"green" stroke-width#"4" fill#"yellow" />
</svg>

</body>
</html>

Οι ακόλουθες γραμμές κώδικα δείχνουν πώς να χρησιμοποιήσετε το μπλοκ για απόδοση κειμένου σε SVG.

<svg height#"30" width#"200">
  <text x#"0" y#"15" fill#"red">I love SVG!</text>
</svg>