Ποια ετικέτα χρησιμοποιείται για την ενσωμάτωση γραφικών; Κλιμακόμενα διανυσματικά γραφικά σε HTML5

Βασικές έννοιες και χρήση

Η μορφή Scalable Vector Graphics (SVG) είναι μέρος μιας οικογένειας προτύπων διανυσματικών γραφικών. Τα διανυσματικά γραφικά διαφέρουν από τα γραφικά ράστερ, στα οποία ο ορισμός χρώματος κάθε εικονοστοιχείου αποθηκεύεται σε κάποια διάταξη δεδομένων. Οι πιο κοινές μορφές ράστερ που χρησιμοποιούνται σήμερα στο Διαδίκτυο είναι τα JPEG, GIF και PNG, καθένα από τα οποία έχει τα δικά του πλεονεκτήματα και μειονεκτήματα.

Συντομογραφίες που χρησιμοποιούνται συνήθως

• CSS: Cascading Style Sheets
• GIF: Μορφή ανταλλαγής γραφικών
• GUI: Γραφική διεπαφή χρήστη
• HTML: Γλώσσα σήμανσης υπερκειμένου
• JPEG: Joint Photographic Experts Group
• PNG: Φορητά γραφικά δικτύου
• SVG: Scalable Vector Graphics
• XML: Επεκτάσιμη γλώσσα σήμανσης

Η μορφή SVG έχει πολλά πλεονεκτήματα σε σχέση με οποιαδήποτε μορφή ράστερ:

• Τα γραφικά SVG δημιουργούνται χρησιμοποιώντας μαθηματικούς τύπους που απαιτούν πολύ λιγότερα δεδομένα για αποθήκευση στο αρχικό αρχείο, επειδή δεν υπάρχει ανάγκη αποθήκευσης δεδομένων για κάθε μεμονωμένο pixel.
• Οι διανυσματικές εικόνες κλιμακώνονται καλύτερα. Η προσπάθεια κλιμάκωσης εικόνων που δημοσιεύονται στο διαδίκτυο πέρα ​​από το αρχικό τους μέγεθος μπορεί να οδηγήσει σε παραμορφωμένες (ή εικονοστοιχεία) εικόνες.

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

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

Σε αυτό το άρθρο, θα μάθετε για τα οφέλη των μορφών SVG και πώς μπορούν να σας βοηθήσουν να δημιουργήσετε ιστότοπους HTML5.

Βασικά SVG

Η δημιουργία γραφικών SVG χρησιμοποιεί μια εντελώς διαφορετική διαδικασία από τη δημιουργία αρχείων JPEG, GIF ή PNG. Τα αρχεία JPEG, GIF και PNG δημιουργούνται συνήθως χρησιμοποιώντας κάποιο είδος προγράμματος επεξεργασίας εικόνας, όπως το Adobe Photoshop. Οι εικόνες SVG δημιουργούνται συνήθως χρησιμοποιώντας κάποιο είδος γλώσσας που βασίζεται σε XML. Υπάρχουν γραφικές διεπαφές χρήστη για την επεξεργασία γραφικών SVG που θα δημιουργήσουν τον κώδικα XML πίσω από την εικόνα για εσάς. Ωστόσο, αυτό το άρθρο προϋποθέτει ότι εργάζεστε απευθείας με XML. Πληροφορίες σχετικά με τα προγράμματα επεξεργασίας εικόνας SVG μπορείτε να βρείτε στην ενότητα.

Η λίστα 1 δείχνει ένα παράδειγμα απλού αρχείου SVG XML που σχεδιάζει έναν κόκκινο κύκλο με μαύρο περίγραμμα 2 pixel.

Λίστα 1. Αρχείο SVG XML

Ο παραπάνω κώδικας δημιουργεί την εικόνα που φαίνεται στο Σχήμα 1.

Εικόνα 1. Κόκκινος κύκλος με μαύρο περίγραμμα 2 pixel

Δημιουργία Βασικών Γεωμετρικών Σχημάτων

Όταν εργάζεστε με γραφικά SVG, οι ετικέτες XML χρησιμοποιούνται για τη δημιουργία γεωμετρικών σχημάτων. Αυτά τα στοιχεία XML φαίνονται στον Πίνακα 1.

Πίνακας 1. Στοιχεία XML για τη δημιουργία γραφικών SVG

στοιχείο γραμμής

Το στοιχείο γραμμής είναι το απλούστερο γραφικό στοιχείο. Η λίστα 2 δείχνει πώς να δημιουργήσετε μια οριζόντια γραμμή.

Λίστα 2. Δημιουργία οριζόντιας γραμμής

Ο κωδικός που εμφανίζεται στην Λίστα 2 παράγει την εικόνα που φαίνεται στο Σχήμα 2.

Εικόνα 2. Απλή οριζόντια γραμμή

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

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

Μπορείτε να δημιουργήσετε έναν ορισμό γραμμής καθορίζοντας τις συντεταγμένες έναρξης και τέλους στους άξονες X και Y σε σχέση με τον χώρο εργασίας. Τα χαρακτηριστικά x1 και y1 αντιπροσωπεύουν τις συντεταγμένες έναρξης και τα χαρακτηριστικά x2 και y2 αντιπροσωπεύουν τις συντεταγμένες τέλους της γραμμής. Για να αλλάξετε την κατεύθυνση σχεδίασης μιας γραμμής, πρέπει απλώς να αλλάξετε τις συντεταγμένες. Για παράδειγμα, τροποποιώντας το προηγούμενο παράδειγμα, μπορείτε να δημιουργήσετε μια διαγώνια γραμμή όπως φαίνεται στην Λίστα 3.

Λίστα 3. Δημιουργία διαγώνιας γραμμής

Το σχήμα 3 δείχνει την έξοδο του κώδικα που εμφανίζεται στην Λίστα 3.

Εικόνα 3. Διαγώνια γραμμή

πολυγραμμικό στοιχείο

Μια διακεκομμένη γραμμή είναι ένα σχέδιο που αποτελείται από πολλές γραμμές. Η λίστα 4 δείχνει ένα παράδειγμα δημιουργίας σχεδίου που μοιάζει με τα σκαλοπάτια μιας σκάλας.

Ο κώδικας στη Λίστα 4 παράγει την εικόνα που φαίνεται στο Σχήμα 4.

Μια πολύγραμμη δημιουργείται χρησιμοποιώντας το χαρακτηριστικό points και ορίζοντας ζεύγη συντεταγμένων X και Y που χωρίζονται με κόμμα. Στο παράδειγμα που φαίνεται, το πρώτο σημείο ορίζεται ως 0,40, όπου το 0 είναι η συντεταγμένη Χ και το 40 η συντεταγμένη Υ, ωστόσο, ένα σύνολο σημείων δεν είναι αρκετό για να εμφανιστεί η εικόνα στην οθόνη, καθώς αυτό το σύνολο λέει μόνο το SVG αποδίδουν την αρχική θέση. Χρειάζεστε τουλάχιστον δύο σετ σημείων: ένα σημείο εκκίνησης και ένα σημείο λήξης (για παράδειγμα, σημεία = "0,40 40,40").

Όπως και με το σχέδιο απλών γραμμών, οι γραμμές δεν χρειάζεται να είναι αυστηρά οριζόντιες ή κάθετες. Εάν αλλάξετε τις τιμές από το προηγούμενο παράδειγμα, μπορείτε να λάβετε ακανόνιστα σχήματα από γραμμές, όπως στην Λίστα 5.

Λίστα 5. Δημιουργία οδοντωτής γραμμής

Ο κώδικας στη Λίστα 5 παράγει την εικόνα που φαίνεται στο Σχήμα 5.

Εικόνα 5. Οδοντωτή γραμμή

ορθό στοιχείο

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

Λίστα 6. Δημιουργία ορθογωνίου

Ο κωδικός στη Λίστα 6 παράγει την εικόνα που φαίνεται στο Σχήμα 6.

Εικόνα 6. Ορθογώνιο

Η ετικέτα rect μπορεί επίσης να χρησιμοποιηθεί για τη δημιουργία τετραγώνου. ένα τετράγωνο είναι απλώς ένα ορθογώνιο με το ίδιο ύψος και πλάτος.

στοιχείο κύκλου

Ο κύκλος δημιουργείται ορίζοντας τις συντεταγμένες X και Y του κέντρου και της ακτίνας του κύκλου, όπως φαίνεται στην Λίστα 7.

Λίστα 7. Δημιουργία κύκλου

Ο κώδικας στη Λίστα 7 παράγει την εικόνα που φαίνεται στο Σχήμα 7.

Εικόνα 7. Κύκλος

Τα χαρακτηριστικά cx και cy καθορίζουν τη θέση του κέντρου του κύκλου σε σχέση με τον καμβά. Δεδομένου ότι η ακτίνα είναι το μισό του πλάτους του κύκλου, κατά τον προσδιορισμό της, λάβετε υπόψη ότι το συνολικό πλάτος της εικόνας θα είναι διπλάσιο από την τιμή που καθορίζετε.

Στοιχείο έλλειψης

Ουσιαστικά, μια έλλειψη είναι ένας κύκλος με δύο ακτίνες που καθορίζονται στον κώδικα, όπως φαίνεται στην Λίστα 8.

Λίστα 8. Δημιουργία έλλειψης

Ο κωδικός στη Λίστα 8 παράγει την εικόνα που φαίνεται στο Σχήμα 8.

Εικόνα 8. Έλειψη

Σε αυτήν την περίπτωση, τα χαρακτηριστικά cx και cy ορίζουν επίσης τις συντεταγμένες του κέντρου σε σχέση με τον καμβά. Ωστόσο, με μια έλλειψη, ορίζετε μια ακτίνα για τον άξονα Χ και μια δεύτερη ακτίνα για τον άξονα Υ χρησιμοποιώντας τα χαρακτηριστικά rx και ry.

στοιχείο πολυγώνου

Πολύγωνο είναι ένα γεωμετρικό σχήμα που περιέχει τουλάχιστον τρεις πλευρές. Η λίστα 9 δημιουργεί ένα απλό τρίγωνο.

Λίστα 9. Δημιουργία τριγώνου

Ο κώδικας στη Λίστα 9 παράγει την εικόνα που φαίνεται στο Σχήμα 9.

Εικόνα 9. Τρίγωνο

Παρόμοια με την εργασία με το στοιχείο πολυγραμμής, τα πολύγωνα δημιουργούνται ορίζοντας ζεύγη συντεταγμένων X και Y χρησιμοποιώντας το χαρακτηριστικό points.

Προσθέτοντας ζεύγη συντεταγμένων κατά μήκος των αξόνων X και Y, μπορείτε να δημιουργήσετε πολύγωνα με οποιονδήποτε αριθμό πλευρών. Για παράδειγμα, τροποποιώντας τον κώδικα στο προηγούμενο παράδειγμα, μπορείτε να δημιουργήσετε ένα τετράπλευρο πολύγωνο, όπως φαίνεται στην Λίστα 10.

Λίστα 10. Δημιουργία τετράπλευρου πολυγώνου

Ο κωδικός που εμφανίζεται στην Λίστα 10 παράγει την εικόνα που φαίνεται στο Σχήμα 10.

Εικόνα 10. Τετράπλευρο πολύγωνο

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

Καταχώριση 11. Δημιουργία αστεριού

Ο κώδικας στη Λίστα 11 παράγει την εικόνα που φαίνεται στο Σχήμα 11.

Εικόνα 11. Πολύγωνο αστεριών

στοιχείο διαδρομής

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

Πίνακας 2. Εντολές που υποστηρίζονται από το στοιχείο διαδρομής

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

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

Λίστα 12. Δημιουργία τριγώνου χρησιμοποιώντας το στοιχείο διαδρομής

Ο κωδικός στη Λίστα 12 παράγει την εικόνα που φαίνεται στο Σχήμα 12.

Εικόνα 12. Τρίγωνο που δημιουργήθηκε χρησιμοποιώντας το στοιχείο διαδρομής

Η λίστα των εντολών ορίζεται χρησιμοποιώντας το χαρακτηριστικό d. Σε αυτό το παράδειγμα, το σχέδιο ξεκινά από το σημείο με τις συντεταγμένες X 150 και Y 0, που ορίζονται από την εντολή μετακίνησης σε σημείο (M150 0). Στη συνέχεια χρησιμοποιήστε την εντολή για να σχεδιάσετε μια γραμμή στο σημείο (L75 200). σχεδιάζεται μια γραμμή σε ένα σημείο με συντεταγμένες X = 75 και Y = 200. Μετά από αυτό, μια άλλη γραμμή σχεδιάζεται χρησιμοποιώντας μια άλλη εντολή για να σχεδιάσετε μια γραμμή σε ένα σημείο (L225 200). Τέλος, το μοτίβο κλείνει χρησιμοποιώντας την εντολή snap (Z). Καμία συντεταγμένη δεν συνοδεύει την εντολή Z, αφού για να κλείσετε μια διαδρομή, εξ ορισμού, σχεδιάζετε μια γραμμή από την τρέχουσα θέση πίσω στο σημείο εκκίνησης του σχεδίου (στην περίπτωση αυτή, το σημείο με συντεταγμένες X = 150, Y = 0).

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

Η πραγματική δύναμη του στοιχείου διαδρομής είναι η ικανότητά του να δημιουργεί προσαρμοσμένα σχήματα, όπως φαίνεται στην Λίστα 13. Αυτό το παράδειγμα προέρχεται από το έγγραφο της Κοινοπραξίας του Παγκόσμιου Ιστού (W3C). Scalable Vector Graphics (SVG) 1.1 (2η έκδοση)(βλ. ενότητα).

Λίστα 13. Δημιουργία προσαρμοσμένου σχήματος χρησιμοποιώντας το στοιχείο διαδρομής

Ο κωδικός που εμφανίζεται στην Λίστα 13 παράγει την εικόνα που φαίνεται στο Σχήμα 13.

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

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

Φίλτρα και κλίσεις

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

Φίλτρα

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

• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feεικόνα
• feMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• αναταράξεις
• feDistantLight
• fePointLight
• feSpotLight

Η λίστα 14 δημιουργεί ένα εφέ σκιάς που εφαρμόζεται σε ένα ορθογώνιο.

Λίστα 14. Δημιουργία εφέ πτώσης σκιάς για ορθογώνιο

Ο κωδικός που εμφανίζεται στην Λίστα 14 παράγει την εικόνα που φαίνεται στο Σχήμα 14.

Εικόνα 14. Εφέ πτώσης σκιάς για ορθογώνιο

Τα φίλτρα ορίζονται μέσα στο στοιχείο def (συντομογραφία του όρου «ορισμός»). Στο φίλτρο σε αυτό το παράδειγμα εκχωρείται ένα αναγνωριστικό (id) "f1". Η ίδια η ετικέτα φίλτρου έχει χαρακτηριστικά που καθορίζουν τις συντεταγμένες X και Y, καθώς και το πλάτος και το ύψος του φίλτρου. Μέσα στην ετικέτα φίλτρου, χρησιμοποιείτε τα απαιτούμενα στοιχεία φίλτρου και ορίζετε τις ιδιότητές τους στις επιθυμητές τιμές.

Μόλις οριστεί ένα φίλτρο, το συσχετίζετε με ένα συγκεκριμένο σχέδιο χρησιμοποιώντας το χαρακτηριστικό φίλτρου, όπως φαίνεται στο . Ορίστε την τιμή url στην τιμή του χαρακτηριστικού id που έχει εκχωρηθεί στο φίλτρο.

Διαβαθμίσεις

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

Η λίστα 15 δημιουργεί μια έλλειψη με γραμμική κλίση.

Λίστα 15. Δημιουργία έλλειψης με γραμμική κλίση

Ο κωδικός που εμφανίζεται στην Λίστα 15 παράγει την εικόνα που φαίνεται στο Σχήμα 15.

Εικόνα 15. Έλειψη με γραμμική κλίση

Η λίστα 16 δημιουργεί μια έλλειψη με ακτινική κλίση.

Λίστα 16. Δημιουργία έλλειψης με ακτινική κλίση

Ο κωδικός που εμφανίζεται στην Λίστα 16 παράγει την εικόνα που φαίνεται στο Σχήμα 16.

Εικόνα 16. Έλειψη με ακτινική κλίση

Οι διαβαθμίσεις, όπως και τα φίλτρα, ορίζονται μέσα στο στοιχείο def. Σε κάθε διαβάθμιση εκχωρείται ένα αναγνωριστικό (id). Τα χαρακτηριστικά κλίσης (όπως τα χρώματα) ορίζονται μέσα στην ετικέτα ντεγκραντέ χρησιμοποιώντας στοιχεία διακοπής. Για να εφαρμόσετε μια διαβάθμιση σε μια εικόνα, ορίστε την τιμή url του χαρακτηριστικού fill στο αναγνωριστικό (id) της επιθυμητής διαβάθμισης.

Κείμενο και SVG

Εκτός από τη δημιουργία βασικών γεωμετρικών σχημάτων, το SVG μπορεί επίσης να χρησιμοποιηθεί για τη δημιουργία κειμένου, όπως φαίνεται στην Λίστα 17.

Λίστα 17. Δημιουργία κειμένου με χρήση SVG

Ο κωδικός που εμφανίζεται στην Λίστα 17 παράγει την εικόνα που φαίνεται στο Σχήμα 17.

Εικόνα 17. Κείμενο που δημιουργήθηκε με SVG

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

Μπορείτε να εμφανίσετε κείμενο κατά μήκος διαφορετικών αξόνων και ακόμη και κατά μήκος μονοπατιών. Στη Λίστα 18, το κείμενο εμφανίζεται σε μια διαδρομή σε σχήμα τόξου.

Λίστα 18. Δημιουργία κειμένου κατά μήκος διαδρομής σε σχήμα τόξου

Ο κωδικός που εμφανίζεται στην Λίστα 18 παράγει την εικόνα που φαίνεται στο Σχήμα 18.

Εικόνα 18. Κείμενο τοποθετημένο κατά μήκος μιας διαδρομής σε σχήμα τόξου

Αυτό το παράδειγμα προσθέτει έναν επιπλέον χώρο ονομάτων XML, xlink , στη ρίζα του SVG. Η διαδρομή που χρησιμοποιείται για το τόξο του κειμένου δημιουργείται μέσα στο στοιχείο def, επομένως η ίδια η διαδρομή δεν αποδίδεται στο σχέδιο. Το κείμενο εμφάνισης είναι ένθετο μέσα σε ένα στοιχείο textPath, το οποίο χρησιμοποιεί τον χώρο ονομάτων xlink για να αναφέρεται στο αναγνωριστικό της επιθυμητής διαδρομής.

Όπως και με άλλα γραφικά SVG, μπορείτε επίσης να εφαρμόσετε φίλτρα και διαβαθμίσεις στο κείμενο. Η λίστα 19 εφαρμόζει ένα φίλτρο και μια κλίση στο κείμενο.

Λίστα 19. Δημιουργία κειμένου με φίλτρο και κλίση

Ο κωδικός που εμφανίζεται στην Λίστα 19 παράγει την εικόνα που φαίνεται στο Σχήμα 19.

Εικόνα 19. Κείμενο με φίλτρο και διαβάθμιση

Προσθήκη κώδικα SVG XML σε ιστοσελίδες

Μόλις δημιουργηθεί το SVG XML, μπορεί να συμπεριληφθεί σε σελίδες HTML με διάφορους τρόπους. Η πρώτη μέθοδος είναι η απευθείας εισαγωγή του SVG XML στο έγγραφο HTML, όπως φαίνεται στην Λίστα 20.

Λίστα 20. Άμεση εισαγωγή SVG XML σε ένα έγγραφο HTML

Αυτή η μέθοδος είναι ίσως η απλούστερη, αλλά δεν ενθαρρύνει την επαναχρησιμοποίηση. Να θυμάστε ότι το SVG XML μπορεί να αποθηκευτεί ως αρχείο με την επέκταση .svg. Όταν αποθηκεύετε ένα γραφικό SVG ως αρχείο .svg, μπορείτε να χρησιμοποιήσετε στοιχεία ενσωμάτωσης, αντικειμένου και iframe για να το συμπεριλάβετε σε ιστοσελίδες. Η λίστα 21 δείχνει τον κώδικα για την ενσωμάτωση ενός αρχείου SVG XML χρησιμοποιώντας το στοιχείο ενσωμάτωσης.

Λίστα 21. Συμπερίληψη αρχείου SVG XML με χρήση του στοιχείου ενσωμάτωσης

Η λίστα 22 δείχνει τον κώδικα για τη συμπερίληψη ενός αρχείου XML SVG χρησιμοποιώντας το στοιχείο αντικειμένου.

Λίστα 22. Συμπερίληψη αρχείου SVG XML με χρήση του στοιχείου αντικειμένου

Η λίστα 23 δείχνει τον κώδικα για τη συμπερίληψη ενός αρχείου XML SVG χρησιμοποιώντας ένα στοιχείο iframe.

Καταχώριση 23. Συμπερίληψη αρχείου SVG XML με χρήση στοιχείου iframe

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

συμπέρασμα

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

Υπάρχει μια ετικέτα για να συμπεριλάβετε μια εικόνα σε μια συγκεκριμένη τοποθεσία στη σελίδα. . Αυτή η ετικέτα έχει μια απαιτούμενη παράμετρο: SRC="", και αρκετές προαιρετικές. Η παράμετρος SRC="" λέει στο πρόγραμμα περιήγησης τη διεύθυνση όπου θα αναζητήσει το γραφικό και η τιμή πρέπει να είναι η διεύθυνση URL του πόρου όπου βρίσκεται το αρχείο γραφικών. Στην απλούστερη περίπτωση, αυτό το αρχείο θα τοποθετηθεί στον ριζικό κατάλογο ή στον φάκελο IMG του ιστότοπού σας. Προαιρετικές παράμετροι:

Η παράμετρος ALT="" περιέχει ως τιμή μια επιγραφή που λέει για το περιεχόμενο της εικόνας για εκείνους τους επισκέπτες των οποίων τα προγράμματα περιήγησης δεν υποστηρίζουν γραφικά ή δεν λειτουργούν σε κατάσταση απενεργοποίησης γραφικών. Η ίδια επιγραφή εμφανίζεται όταν τοποθετείτε το ποντίκι σας πάνω από την εικόνα.

Οι παράμετροι WIDTH="" HEIGHT="" έχουν τις διαστάσεις της εικόνας σε πλάτος και ύψος σε pixel ως τιμές. Συνιστάται να προσδιορίσετε αυτές τις παραμέτρους στον κώδικα της σελίδας, έτσι ώστε το πρόγραμμα περιήγησης να αφήνει χώρο για την εικόνα εκ των προτέρων και, στη συνέχεια, κατά τη φόρτωση, η σελίδα θα "σπλαχνίζεται" λιγότερο. Επιπλέον, αυτές οι παράμετροι μπορούν να χρησιμοποιηθούν για την προσαρμογή του μεγέθους της εικόνας στο παράθυρο του προγράμματος περιήγησης.

Η παράμετρος BORDER="" σχεδιάζει ένα περίγραμμα γύρω από την εικόνα. Η τιμή είναι ένας αριθμός που υποδεικνύει το πλάτος του πλαισίου σε pixel.

Η παράμετρος ALIGN= καθορίζει τη θέση της εικόνας στη σελίδα και μπορεί να πάρει τις τιμές TOP - ευθυγραμμίζει το επάνω περίγραμμα της εικόνας στο υψηλότερο στοιχείο της τρέχουσας γραμμής, TEXTTOP - ευθυγραμμίζει το επάνω περίγραμμα της εικόνας στο υψηλότερο στοιχείο κειμένου της τρέχουσας γραμμής, MIDDLE - ευθυγραμμίζει το μέσο της εικόνας με τη γραμμή βάσης της τρέχουσας γραμμής , ABSMIDDLE - ευθυγραμμίζει το μέσο της εικόνας στο μέσο της τρέχουσας γραμμής. BASELINE ή BOTTOM - στοιχίζει το κάτω περίγραμμα της εικόνας στη γραμμή βάσης της τρέχουσας γραμμής, ABSBOTTOM - ευθυγραμμίζει το κάτω περίγραμμα της εικόνας στο κάτω περίγραμμα της τρέχουσας γραμμής, HSPACE= - καθορίζει την οριζόντια εσοχή, VSPACE= - καθορίζει η κατακόρυφη εσοχή.

Σύνταξη ετικέτας:

Καρδιά

Η τρέχουσα γραμμή καθορίζεται από την ετικέτα .

Τα χαρακτηριστικά αυτής της ετικέτας είναι bgcolor - χρώμα φόντου της γραμμής που τρέχει, ύψος - ύψος γραμμής, πλάτος - πλάτος γραμμής.

Κατεύθυνση - ορίζει την κατεύθυνση κίνησης της ερπυστικής γραμμής - κατεύθυνση = "αριστερά" (δεξιά, πάνω, κάτω) - κίνηση προς τα αριστερά (δεξιά, πάνω, κάτω).

Συμπεριφορά - συμπεριφορά της γραμμής - Behaviour="scroll" (slide, alternative). Κύλιση - κανονική κύλιση (δεν χρειάζεται να το καθορίσετε, είναι η προεπιλογή)

Σύρετε - κάνοντας κύλιση με στοπ, η γραμμή τρέχει μέχρι την άκρη και σταματά. Εάν χρησιμοποιείτε την παράμετρο βρόχου ταυτόχρονα με το behavor="slide", η γραμμή θα πραγματοποιήσει κύλιση στον καθορισμένο αριθμό φορών και θα σταματήσει στην άκρη. Εναλλακτική - η γραμμή θα μετακινηθεί από άκρη σε άκρη.
Scrollamount - ταχύτητα κίνησης γραμμής, scrollamount="1". Μπορεί να πάρει τιμές από 1 έως 10. Το 1 είναι η πιο αργή κίνηση, το 10 είναι η ταχύτερη.

Σύνταξη ετικέτας: κείμενο

Τα σύγχρονα προγράμματα περιήγησης ιστού μπορούν να αναπαράγουν αρχεία βίντεο και ήχου σε διάφορες μορφές. Για να το κάνουν αυτό, χρησιμοποιούν ενσωματωμένα προγράμματα αναπαραγωγής (πρόσθετα, στοιχεία ελέγχου ActiveX) ή εξωτερικά προγράμματα αναπαραγωγής. Μπορείτε να εισαγάγετε ήχο ή βίντεο σε ένα έγγραφο HTML χρησιμοποιώντας διάφορες ετικέτες:

- για εισαγωγή ήχου φόντου.

- για εισαγωγή βίντεο σε μορφή AVI.

- για την εισαγωγή αρχείων ήχου και βίντεο.