Scalable Vector Graphics (SVG) - Έρευνα. Κλιμακόμενα διανυσματικά γραφικά σε HTML5 Προσθήκη κώδικα SVG XML σε ιστοσελίδες

.

Ετικέτα έχει ένα απαιτούμενο χαρακτηριστικό src, η τιμή του οποίου είναι η απόλυτη ή σχετική διαδρομή προς την εικόνα:

Για ετικέτα Τα ακόλουθα χαρακτηριστικά είναι διαθέσιμα:

Πίνακας 1. Χαρακτηριστικά ετικέτας

Χαρακτηριστικό	Περιγραφή, αποδεκτή τιμή
alt	Το χαρακτηριστικό alt προσθέτει εναλλακτικό κείμενο σε μια εικόνα. Εμφανίζεται όπου εμφανίζεται η εικόνα πριν φορτωθεί ή όταν τα γραφικά είναι απενεργοποιημένα και εμφανίζεται επίσης ως επεξήγηση εργαλείου όταν τοποθετείτε το ποντίκι πάνω από την εικόνα. Σύνταξη: alt="περιγραφή εικόνας" . !}
διασταυρούμενης καταγωγής	Το χαρακτηριστικό crossorigin σάς επιτρέπει να φορτώνετε εικόνες από πόρους σε άλλο τομέα χρησιμοποιώντας αιτήματα CORS. Οι εικόνες που έχουν φορτωθεί σε καμβά χρησιμοποιώντας αιτήματα CORS μπορούν να επαναχρησιμοποιηθούν. Επιτρεπόμενες τιμές: ανώνυμη - Το αίτημα πολλαπλής προέλευσης πραγματοποιείται χρησιμοποιώντας μια κεφαλίδα HTTP και δεν μεταδίδονται διαπιστευτήρια. Εάν ο διακομιστής δεν παρέχει διαπιστευτήρια στον διακομιστή από τον οποίο ζητείται το περιεχόμενο, η εικόνα θα καταστραφεί και η χρήση της θα περιοριστεί. χρήση-διαπιστευτήρια — Το αίτημα διασταυρούμενης προέλευσης εκτελείται με διαβίβαση διαπιστευτηρίων. Σύνταξη: crossorigin="anonymous" .
ύψος	Το χαρακτηριστικό height καθορίζει το ύψος της εικόνας. Μπορεί να καθοριστεί σε px ή %. Σύνταξη: ύψος: 300px.
ismap	Το χαρακτηριστικό ismap υποδεικνύει ότι η εικόνα είναι μέρος μιας εικόνας χάρτη που βρίσκεται στον διακομιστή (η εικόνα χάρτη είναι μια εικόνα με περιοχές με δυνατότητα κλικ). Όταν κάνετε κλικ σε μια εικόνα χάρτη, οι συντεταγμένες αποστέλλονται στον διακομιστή ως συμβολοσειρά ερωτήματος διεύθυνσης URL. Το χαρακτηριστικό ismap επιτρέπεται μόνο εάν το στοιχείο είναι απόγονος του στοιχείου με έγκυρο χαρακτηριστικό href. Σύνταξη: ismap.
longdesc	Μια διευρυμένη διεύθυνση URL περιγραφής εικόνας που συμπληρώνει το χαρακτηριστικό alt. Σύνταξη: longdesc="http://www.example.com/description.txt" .
src	Το χαρακτηριστικό src καθορίζει τη διαδρομή προς την εικόνα. Σύνταξη: src="flower.jpg" .
μεγέθη	Ρυθμίζει το μέγεθος της εικόνας ανάλογα με τις επιλογές εμφάνισης. Λειτουργεί μόνο όταν έχει καθοριστεί το χαρακτηριστικό srcset. Η τιμή του χαρακτηριστικού είναι μία ή περισσότερες συμβολοσειρές, διαχωρισμένες με κόμμα.
srcset	Δημιουργεί μια λίστα πηγών εικόνας που θα επιλεγούν με βάση την ανάλυση οθόνης. Μπορεί να χρησιμοποιηθεί μαζί με ή αντί για το χαρακτηριστικό src. Η τιμή του χαρακτηριστικού είναι μία ή περισσότερες συμβολοσειρές, διαχωρισμένες με κόμμα.
χάρτη χρήσης	Το χαρακτηριστικό usemap καθορίζει την εικόνα ως χάρτη εικόνας. Η τιμή πρέπει να ξεκινά με το σύμβολο #. Η τιμή σχετίζεται με την τιμή του ονόματος ή του χαρακτηριστικού αναγνωριστικού της ετικέτας
πλάτος	Το χαρακτηριστικό width καθορίζει το πλάτος της εικόνας. Μπορεί να καθοριστεί σε px ή %. Σύνταξη: πλάτος: 100% .

1.1. Διεύθυνση εικόνας

Η διεύθυνση εικόνας μπορεί να καθοριστεί πλήρως (απόλυτη διεύθυνση URL), για παράδειγμα:
url(http://anysite.ru/images/anyphoto.png)

Ή μέσω μιας σχετικής διαδρομής από έγγραφοή ριζικός κατάλογοςδικτυακός τόπος:
url(../images/anyphoto.png) - σχετική διαδρομή από το έγγραφο,
url(/images/anyphoto.png) - σχετική διαδρομή από τον ριζικό κατάλογο.

Αυτό ερμηνεύεται ως εξής:
../ - σημαίνει ανεβείτε ένα επίπεδο, στον ριζικό κατάλογο,
εικόνες/ - μεταβείτε στο φάκελο με τις εικόνες,
anyphoto.png - δείχνει σε ένα αρχείο εικόνας.

1.2. Διαστάσεις εικόνας

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

1.3. Μορφές αρχείων γραφικών

Μορφή JPEG (Ενωση Επαγγελματιών Φωτογράφων). Οι εικόνες JPEG είναι ιδανικές για φωτογραφίες και μπορούν να περιέχουν εκατομμύρια διαφορετικά χρώματα. Οι εικόνες συμπιέζονται καλύτερα από τα GIF, αλλά το κείμενο και οι μεγάλες περιοχές συμπαγούς χρώματος μπορεί να γίνουν κηλίδες.

Μορφή GIF (Μορφή ανταλλαγής γραφικών). Ιδανικό για συμπίεση εικόνων που έχουν μονόχρωμες περιοχές, όπως λογότυπα. Τα GIF σάς επιτρέπουν να ορίσετε ένα από τα χρώματα να είναι διαφανές, επιτρέποντας στο φόντο μιας ιστοσελίδας να εμφανίζεται μέσα από μέρος της εικόνας. Τα GIF μπορούν επίσης να περιλαμβάνουν απλή κινούμενη εικόνα. Οι εικόνες GIF περιέχουν μόνο 256 αποχρώσεις, γεγονός που κάνει τις εικόνες να φαίνονται κηλίδες και μη ρεαλιστικές σε χρώμα, όπως αφίσες.

Μορφή PNG (Φορητά γραφικά δικτύου). Περιλαμβάνει τις καλύτερες δυνατότητες των μορφών GIF και JPEG. Περιέχει 256 χρώματα και καθιστά δυνατό ένα από τα χρώματα να είναι διαφανές, ενώ συμπιέζονται οι εικόνες σε μικρότερο μέγεθος από ένα αρχείο GIF.

Μορφή APNG (Κινούμενα φορητά γραφικά δικτύου). Μια μορφή εικόνας βασισμένη στη μορφή PNG. Σας επιτρέπει να αποθηκεύετε κινούμενα σχέδια και υποστηρίζει επίσης τη διαφάνεια.

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

Μορφή BMP (Εικόνα Bitmap). Είναι μια μη συμπιεσμένη (πρωτότυπη) εικόνα ράστερ, της οποίας το πρότυπο είναι ένα ορθογώνιο πλέγμα pixel. Ένα αρχείο bitmap αποτελείται από μια κεφαλίδα, μια παλέτα και γραφικά δεδομένα. Η κεφαλίδα αποθηκεύει πληροφορίες σχετικά με την εικόνα γραφικών και το αρχείο (βάθος pixel, ύψος, πλάτος και αριθμός χρωμάτων). Η παλέτα υποδεικνύεται μόνο σε εκείνα τα αρχεία Bitmap που περιέχουν εικόνες παλέτας (8 ή λιγότερα bit) και δεν αποτελούνται από περισσότερα από 256 στοιχεία. Τα γραφικά δεδομένα αντιπροσωπεύουν την ίδια την εικόνα. Το βάθος χρώματος σε αυτήν τη μορφή μπορεί να είναι 1, 2, 4, 8, 16, 24, 32, 48 bit ανά pixel.

Μορφή ICO (εικονίδιο Windows). Μορφή αποθήκευσης εικονιδίων αρχείων στα Microsoft Windows. Επίσης, το εικονίδιο των Windows χρησιμοποιείται ως εικονίδιο σε ιστότοπους στο Διαδίκτυο. Είναι μια εικόνα αυτής της μορφής που εμφανίζεται δίπλα στη διεύθυνση του ιστότοπου ή στον σελιδοδείκτη στο πρόγραμμα περιήγησης. Ένα αρχείο ICO περιέχει ένα ή περισσότερα εικονίδια, το μέγεθος και το χρώμα καθενός από τα οποία μπορούν να ρυθμιστούν ξεχωριστά. Το μέγεθος του εικονιδίου μπορεί να είναι οποιοδήποτε μέγεθος, αλλά τα πιο συνηθισμένα είναι τετράγωνα εικονίδια με πλευρές 16, 32 και 48 pixel.

2. Ετικέτα

Ετικέτα

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

Στοιχείο

3. Ετικέτα

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

Πίνακας 2. Χαρακτηριστικά ετικέτας

Χαρακτηριστικό	Σύντομη περιγραφή
alt	Ορίζει εναλλακτικό κείμενο για την ενεργή περιοχή χάρτη.
συντεταγμένες	Καθορίζει τη θέση της περιοχής στην οθόνη. Οι συντεταγμένες δίνονται σε μονάδες μήκους και χωρίζονται με κόμματα: Για κύκλος— συντεταγμένες του κέντρου και της ακτίνας του κύκλου· Για ορθογώνιο παραλληλόγραμμο— συντεταγμένες της επάνω αριστερής και κάτω δεξιάς γωνίας· Για πολύγωνο— συντεταγμένες των κορυφών του πολυγώνου με την απαιτούμενη σειρά· συνιστάται επίσης να υποδεικνύονται οι τελευταίες συντεταγμένες, ίσες με την πρώτη, για τη λογική συμπλήρωση του σχήματος.
Κατεβάστε	Συμπληρώνει το χαρακτηριστικό href και λέει στο πρόγραμμα περιήγησης ότι ο πόρος πρέπει να φορτωθεί τη στιγμή που ο χρήστης κάνει κλικ στον σύνδεσμο, αντί, για παράδειγμα, να πρέπει να τον ανοίξει πρώτα (όπως ένα αρχείο PDF). Καθορίζοντας ένα όνομα για ένα χαρακτηριστικό, δίνουμε έτσι ένα όνομα στο φορτωμένο αντικείμενο. Επιτρέπεται η χρήση ενός χαρακτηριστικού χωρίς να προσδιορίζεται η τιμή του.
href	Καθορίζει τη διεύθυνση URL για τη σύνδεση. Μπορεί να καθοριστεί μια απόλυτη ή σχετική διεύθυνση συνδέσμου.
hreflang	Καθορίζει τη γλώσσα του συσχετισμένου εγγράφου web. Χρησιμοποιείται μόνο σε συνδυασμό με το χαρακτηριστικό href. Οι αποδεκτές τιμές είναι μια συντομογραφία που αποτελείται από ένα ζευγάρι γραμμάτων που υποδεικνύουν τον κωδικό γλώσσας.
μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ	Καθορίζει για ποιους τύπους συσκευών θα βελτιστοποιηθεί το αρχείο. Η τιμή μπορεί να είναι οποιοδήποτε ερώτημα μέσων.
σχετ	Επεκτείνει το χαρακτηριστικό href με πληροφορίες σχετικά με τη σχέση μεταξύ του τρέχοντος και του σχετικού εγγράφου. Αποδεκτές τιμές: εναλλακτικό - σύνδεσμος προς μια εναλλακτική έκδοση του εγγράφου (για παράδειγμα, μια έντυπη μορφή της σελίδας, μια μετάφραση ή ένας καθρέφτης). συγγραφέας — σύνδεσμος προς τον συντάκτη του εγγράφου. σελιδοδείκτης - Μόνιμη διεύθυνση URL που χρησιμοποιείται για σελιδοδείκτες. βοήθεια - σύνδεσμος για βοήθεια. άδεια - σύνδεσμος προς πληροφορίες πνευματικών δικαιωμάτων για αυτό το έγγραφο web. επόμενο/προηγούμενο - υποδεικνύει τη σχέση μεταξύ μεμονωμένων διευθύνσεων URL. Χάρη σε αυτήν τη σήμανση, η Google μπορεί να προσδιορίσει ότι το περιεχόμενο αυτών των σελίδων σχετίζεται με μια λογική σειρά. nofollow - εμποδίζει τη μηχανή αναζήτησης να ακολουθεί συνδέσμους σε μια δεδομένη σελίδα ή σε έναν συγκεκριμένο σύνδεσμο. noreferrer - υποδηλώνει ότι όταν ακολουθεί ένας σύνδεσμος, το πρόγραμμα περιήγησης δεν πρέπει να στέλνει μια κεφαλίδα αιτήματος HTTP (Referrer), η οποία καταγράφει πληροφορίες σχετικά με τη σελίδα από την οποία προήλθε ο επισκέπτης του ιστότοπου. prefetch - υποδεικνύει ότι το έγγραφο προορισμού πρέπει να αποθηκευτεί προσωρινά, π.χ. Το πρόγραμμα περιήγησης στο παρασκήνιο κατεβάζει τα περιεχόμενα της σελίδας στην κρυφή μνήμη του. αναζήτηση - Υποδεικνύει ότι το έγγραφο προορισμού περιέχει ένα εργαλείο αναζήτησης. ετικέτα - καθορίζει τη λέξη-κλειδί για το τρέχον έγγραφο.
σχήμα	Καθορίζει το σχήμα της ενεργής περιοχής στο χάρτη και τις συντεταγμένες της. Μπορεί να λάβει τις ακόλουθες τιμές: ορθή — ορθογώνια ενεργή περιοχή. κύκλος — ενεργή περιοχή σε σχήμα κύκλου. πολυ — ενεργή περιοχή σε σχήμα πολυγώνου. προεπιλογή — η ενεργή περιοχή καταλαμβάνει ολόκληρη την περιοχή της εικόνας.
στόχος	Καθορίζει πού θα γίνει λήψη του εγγράφου όταν γίνει κλικ στον σύνδεσμο. Αποδέχεται τις ακόλουθες τιμές: _self — η σελίδα φορτώνεται στο τρέχον παράθυρο. _blank — η σελίδα ανοίγει σε νέο παράθυρο του προγράμματος περιήγησης. _parent — η σελίδα φορτώνεται στο γονικό πλαίσιο. _top - η σελίδα φορτώνεται στο πλήρες παράθυρο του προγράμματος περιήγησης.
τύπος	Καθορίζει τον τύπο MIME των αρχείων συνδέσμων, π.χ. επέκταση αρχείου.

4. Παράδειγμα δημιουργίας χάρτη εικόνας

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

Ρύζι. 1. Παράδειγμα σήμανσης εικόνας για τη δημιουργία χάρτη

2) Ορίστε το όνομα της κάρτας προσθέτοντάς το στην ετικέτα

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Ρύζι. 2. Ένα παράδειγμα δημιουργίας χάρτη εικόνας, όταν κάνετε κλικ στον κέρσορα του ποντικιού σε ένα λουλούδι, μεταβαίνετε σε μια σελίδα με περιγραφή

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

Η μορφή 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. Αρχείο XML SVG

Ο παραπάνω κώδικας δημιουργεί την εικόνα που φαίνεται στο Σχήμα 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.

Τα διανυσματικά γραφικά χρησιμοποιούνται ευρέως σε έντυπα υλικά. Όσον αφορά τον ιστότοπο, εδώ μπορούμε να χρησιμοποιήσουμε διανυσματικά γραφικά μέσω SVG ή Scalable Vector Graphics. Η επίσημη προδιαγραφή W3.org το περιγράφει ως εξής:

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

Η τεχνολογία είναι διαθέσιμη από το 1999 και στις 16 Αυγούστου 2011 συμπεριλήφθηκε στη λίστα των συστάσεων του W3C. Ωστόσο, το SVG εξακολουθεί να μην χρησιμοποιείται τόσο συχνά, παρά τα πολλά πλεονεκτήματα της χρήσης διανυσματικών γραφικών αντί για γραφικά ράστερ.

Οφέλη από κλιμακούμενα διανυσματικά γραφικά

Όσον αφορά τη χρήση γραφικών σε σελίδες ιστότοπου, τα κλιμακούμενα διανυσματικά γραφικά μας προσφέρουν αρκετά πλεονεκτήματα σε σχέση με τα γραφικά ράστερ, τα οποία περιλαμβάνουν:

Ανεξάρτητη ανάλυση

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

Μείωση αιτημάτων HTTP

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

Στυλ και σενάριο

Η άμεση ενσωμάτωση χρησιμοποιώντας την ετικέτα svg θα μας επιτρέψει επίσης να διαμορφώσουμε το στυλ των γραφικών χρησιμοποιώντας CSS. Μπορούμε να αλλάξουμε παραμέτρους αντικειμένων όπως το χρώμα φόντου, την αδιαφάνεια, τα περιγράμματα και ούτω καθεξής, με τον ίδιο τρόπο όπως στην HTML. Μπορούμε επίσης να ελέγξουμε τα γραφικά χρησιμοποιώντας javascript.

Δυνατότητα animation και μοντάζ

Ένα αντικείμενο SVG μπορεί να κινείται χρησιμοποιώντας ένα στοιχείο κίνησης ή χρησιμοποιώντας μια βιβλιοθήκη JS όπως το jQuery. Το αντικείμενο SVG μπορεί επίσης να επεξεργαστεί χρησιμοποιώντας οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου ή λογισμικό γραφικών όπως (δωρεάν) ή .

Μικρότερο μέγεθος αρχείου

Το SVG έχει μικρότερο μέγεθος αρχείου σε σύγκριση με τα γραφικά ράστερ.

Σχεδίαση απλών σχημάτων με χρήση SVG

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

Γραμμή

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

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

Υπάρχουν επίσης δύο άλλα χαρακτηριστικά εδώ: το stroke και το stroke-width, που ελέγχουν το χρώμα και το πλάτος του περιγράμματος. Από την άλλη πλευρά, μπορούμε επίσης να ορίσουμε αυτά τα χαρακτηριστικά σε ενσωματωμένο στυλ, όπως αυτό:

Style="stroke-width:1; stroke:rgb(0,0,0);"
και αυτό θα μας δώσει το ίδιο αποτέλεσμα.

*

σπασμένη γραμμή

Εδώ όλα μοιάζουν πολύ με τη «γραμμή», αλλά με το στοιχείο «πολυγραμμή» μπορούμε να σχεδιάσουμε πολλές γραμμές αντί για μία. Εδώ είναι ένα παράδειγμα:

Το στοιχείο "πολυγραμμή" έχει σημεία που περιέχουν όλες τις συντεταγμένες των γραμμών.

*

Ορθογώνιο παραλληλόγραμμο

Μπορούμε να σχεδιάσουμε ένα ορθογώνιο εξίσου εύκολα, χρησιμοποιώντας μόνο το στοιχείο "rect". Απλά πρέπει να καθορίσουμε το πλάτος και το ύψος:

*

Κύκλος

Μπορούμε επίσης να σχεδιάσουμε έναν κύκλο χρησιμοποιώντας το στοιχείο "κύκλος". Σε αυτό το παράδειγμα, θα σχεδιάσουμε έναν κύκλο με ακτίνα 100, ο οποίος ορίζεται από το χαρακτηριστικό r:

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

*

Ελλειψη

Μπορούμε να σχεδιάσουμε ελλείψεις χρησιμοποιώντας το στοιχείο "έλλειψη". Εδώ όλα λειτουργούν σχεδόν με τον ίδιο τρόπο όπως με τον κύκλο, αλλά αυτή τη φορά μπορούμε να ελέγξουμε την ακτίνα γραμμής x και την ακτίνα γραμμής y ξεχωριστά μέσω των χαρακτηριστικών rx και ry.

*

Πολύγωνο

Με τη βοήθεια του στοιχείου «πολύγωνο» μπορούμε να σχεδιάσουμε πολύγωνα, σχήματα με πολλές γωνίες και πλευρές σαν τρίγωνο, οκτάγωνο. Παράδειγμα:

*

Χρήση διανυσματικού επεξεργαστή γραφικών

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

Ευτυχώς, όπως αναφέραμε παραπάνω, μπορούμε να χρησιμοποιήσουμε ένα πρόγραμμα επεξεργασίας διανυσματικών γραφικών όπως το Adobe Illustrator ή το Inkscape για να κάνουμε αυτή τη δουλειά. Εάν είστε εξοικειωμένοι με αυτό το λογισμικό, μπορείτε εύκολα να σχεδιάσετε αντικείμενα χρησιμοποιώντας μια φιλική προς το χρήστη διεπαφή αντί χρησιμοποιώντας κώδικα HTML.

Ή μπορείτε επίσης να ενσωματώσετε το ίδιο το αρχείο svg χρησιμοποιώντας ένα από τα ακόλουθα στοιχεία: ενσωμάτωση, iframe, αντικείμενο.

Το αποτέλεσμα θα είναι παρόμοιο.

Σε αυτό το παράδειγμα χρησιμοποιήσαμε s.

*

Υποστήριξη προγράμματος περιήγησης για κλιμακούμενα διανυσματικά γραφικά

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

Για να ξεκινήσετε, πραγματοποιήστε λήψη και συμπεριλάβετε τη βιβλιοθήκη Raphael.js στον κώδικα HTML σας. Στη συνέχεια, ανεβάστε το αρχείο svg στον ιστότοπο, αντιγράψτε και επικολλήστε τον κώδικα που δημιουργήθηκε στην ακόλουθη συνάρτηση φόρτωσης:

Window.onload=function() (
//ο κώδικας Raphael πηγαίνει εδώ
}
Μέσα στην ετικέτα σώματος, εισαγάγετε το ακόλουθο div με το χαρακτηριστικό rsr id.

Και τέλος! Δείτε το παράδειγμα που παρέχεται στον παρακάτω σύνδεσμο.

Συμπερασματικά

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

Ως συνήθως, αν είστε περίεργοι, έχουμε ετοιμάσει μια μικρή επιλογή πρόσθετων άρθρων για εσάς.

* (Εισαγωγή στο SVG)
* (SVG: ας μην εξαρτόμαστε από την ανάλυση)
* (Γιατί να μην χρησιμοποιήσετε SVG;)

Ευχαριστούμε που διαβάσατε και ελπίζουμε να βρείτε αυτό το άρθρο χρήσιμο!

Προσοχή! Δεν έχετε άδεια προβολής κρυφού κειμένου.

Τα διανυσματικά γραφικά χρησιμοποιούνται ευρέως στην εκτύπωση. Αλλά μπορούμε επίσης να το χρησιμοποιήσουμε για ιστότοπους που χρησιμοποιούν SVG ( Scalable Vector Graphic - κλιμακούμενα διανυσματικά γραφικά). Σύμφωνα με την προδιαγραφή W3.org, το SVG ορίζεται ως:

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

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

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

Ανεξαρτησία επίλυσης

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

Μείωση του αριθμού των αιτημάτων HTTP

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

Στυλ και σενάρια

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

Εύκολη επεξεργασία και κίνηση

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

Μικρότερο μέγεθος αρχείου

Το SVG έχει μικρότερο μέγεθος αρχείου σε σύγκριση με τα γραφικά ράστερ.

Βασικά σχήματα SVG

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

Γραμμή

Για να εμφανίσετε μια γραμμή σε SVG, χρησιμοποιήστε το στοιχείο . Σχεδιάζει ένα τμήμα για το οποίο πρέπει να καθοριστούν δύο σημεία: η αρχή και το τέλος.

Η αρχή του τμήματος καθορίζεται από τα χαρακτηριστικά x1 και y1, και το τελικό σημείο καθορίζεται από τις συντεταγμένες στα χαρακτηριστικά x2 και y2.

Υπάρχουν επίσης δύο άλλα χαρακτηριστικά (stroke και stroke-width) που χρησιμοποιούνται για τον καθορισμό του χρώματος και του πλάτους της γραμμής, αντίστοιχα.

Αυτό το αντικείμενο είναι παρόμοιο με , αλλά χρησιμοποιώντας το στοιχείο Μπορείτε να σχεδιάσετε πολλές γραμμές ταυτόχρονα.

Στοιχείο Περιέχει το χαρακτηριστικό points, το οποίο χρησιμοποιείται για τον καθορισμό των συντεταγμένων των σημείων.

Το ορθογώνιο σχεδιάζεται χρησιμοποιώντας το στοιχείο . Πρέπει να καθορίσετε το πλάτος και το ύψος.

Για να εμφανίσουμε έναν κύκλο χρησιμοποιούμε το στοιχείο . Στο παρακάτω παράδειγμα, δημιουργούμε έναν κύκλο με ακτίνα 100, ο οποίος ορίζεται στο χαρακτηριστικό r:

Οι δύο πρώτες ιδιότητες cx και cy ορίζουν τις συντεταγμένες του κέντρου. Στο παραπάνω παράδειγμα, ορίσαμε την τιμή στο 102 και για τις δύο συντεταγμένες. Η προεπιλεγμένη τιμή είναι 0.

Για να εμφανίσουμε μια έλλειψη χρησιμοποιούμε το στοιχείο . Λειτουργεί το ίδιο με τον κύκλο, αλλά μπορούμε να καθορίσουμε συγκεκριμένα τις ακτίνες x και y χρησιμοποιώντας τα χαρακτηριστικά rx και ry:

Στοιχείο Εμφανίζει πολυεδρικά σχήματα όπως τρίγωνο, εξάγωνο κ.λπ. Για παράδειγμα:

Χρήση διανυσματικού επεξεργαστή γραφικών

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

Αλλά μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας διανυσματικών γραφικών (για παράδειγμα, Adobe Illustratorή Inkscape) για τη δημιουργία αντικειμένων. Εάν έχετε ένα εργαλείο σαν αυτό, η σχεδίαση των απαραίτητων αντικειμένων σε αυτά είναι πολύ πιο εύκολη από την κωδικοποίηση γραφικών σε μια ετικέτα HTML.

Μπορείτε να αντιγράψετε εντολές διανυσματικών γραφικών από ένα αρχείο σε ένα έγγραφο HTML. Ή μπορείτε να ενσωματώσετε το αρχείο .svg χρησιμοποιώντας ένα από τα παρακάτω στοιχεία: ενσωμάτωση , iframe και αντικείμενο .

Το αποτέλεσμα θα είναι το ίδιο.

Υποστήριξη προγράμματος περιήγησης

Το SVG έχει καλή υποστήριξη στα περισσότερα σύγχρονα προγράμματα περιήγησης, με εξαίρεση την έκδοση IE 8 και παλαιότερη. Αλλά το πρόβλημα μπορεί να λυθεί χρησιμοποιώντας τη βιβλιοθήκη JavaScript. Για να διευκολύνετε την εργασία σας, μπορείτε να χρησιμοποιήσετε το εργαλείο ReadySetRaphael.com για να μετατρέψετε τον κώδικα SVG σε μορφή Raphael.

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

Στην ετικέτα body τοποθετούμε το παρακάτω στοιχείο div με το αναγνωριστικό rsr .

Και όλα είναι έτοιμα.

Στο επόμενο σεμινάριο της σειράς, θα εξετάσουμε τον τρόπο δημιουργίας στυλ αντικειμένων SVG σε CSS.

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

• εισαγωγή μεμονωμένων εικόνων.
• γεμίζοντας το φόντο με μια εικόνα.

Σε κάθε περίπτωση, η γραφική εικόνα λαμβάνεται από το αρχείο.

Η εισαγωγή μιας γραφικής εικόνας από ένα αρχείο μορφής γραφικών σε μια σελίδα γίνεται χρησιμοποιώντας την ετικέτα (από τα αγγλικά, εικόνα - εικόνα) υποδεικνύοντας τη διεύθυνση αρχείου ως όρισμα του χαρακτηριστικού SRC:

Η διεύθυνση του αρχείου γραφικών είναι είτε διεύθυνση URL είτε όνομα αρχείου, πιθανώς με διαδρομή. Για παράδειγμα, για να εμφανίσετε το αρχείο γραφικών logotip.jpg, θα πρέπει να γράψετε την ετικέτα

Για να αυξήσετε την ταχύτητα μεταφοράς μιας γραφικής εικόνας σε μια ετικέτα μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό LOWSRC (πρόσθετη παράμετρος), το οποίο παίρνει τη διεύθυνση του αρχείου γραφικών ως όρισμα. Μπορείτε να δημιουργήσετε δύο αρχεία γραφικών: το ένα (για παράδειγμα, ας πούμε logotip.jpg) περιέχει μια εικόνα υψηλής ανάλυσης και το άλλο (για παράδειγμα, logotip.gif) περιέχει μια εικόνα χαμηλής ανάλυσης. Στη συνέχεια, κάντε ετικέτα

Καθοδηγεί το πρόγραμμα περιήγησης να πραγματοποιήσει λήψη του αρχείου logotip.gif και, στη συνέχεια, να το αντικαταστήσει με το αρχείο logotip.jpg κατά τη λήψη του.
Ένας άλλος τρόπος για να επιταχύνετε τη φόρτωση γραφικών είναι να καθορίσετε τις διαστάσεις της ορθογώνιας περιοχής στην οποία θα τοποθετηθεί το γραφικό χρησιμοποιώντας τα χαρακτηριστικά WIDTH και HEIGHT, μετρούμενα σε pixel. Εάν καθορίσετε αυτά τα χαρακτηριστικά, το πρόγραμμα περιήγησης θα εκχωρήσει πρώτα χώρο για τα γραφικά, θα προετοιμάσει τη διάταξη του εγγράφου, θα εμφανίσει το κείμενο και μόνο στη συνέχεια θα φορτώσει τα γραφικά. Λάβετε υπόψη ότι το πρόγραμμα περιήγησης συμπιέζει ή τεντώνει την εικόνα ώστε να ταιριάζει στο καθορισμένο μέγεθος πλαισίου. Ένα παράδειγμα καθορισμού διαστάσεων εικόνας:

Τα γραφικά χρησιμοποιούνται συνήθως σε συνδυασμό με κείμενο, επομένως προκύπτει η πρόκληση της ευθυγράμμισης κειμένου και γραφικών. Αυτό το πρόβλημα επιλύεται χρησιμοποιώντας το χαρακτηριστικό ΕΥΘΥΓΡΑΜΜΙΖΩετικέτα χρησιμοποιώντας διάφορα επιχειρήματα. Για παράδειγμα, μπορεί να θέλουμε το κείμενο να ρέει γύρω από μια εικόνα προς τα δεξιά ή προς τα αριστερά. Συνήθως η εικόνα είναι ενσωματωμένη στενά με το κείμενο, το οποίο μπορεί να είναι άσχημο. Για να το αποφύγετε αυτό, μπορείτε να ορίσετε κενά περιθώρια γύρω από την εικόνα. Τα πεδία δημιουργούνται χρησιμοποιώντας χαρακτηριστικά VSPACEγια πάνω και κάτω περιθώρια και NSSPACEγια πλευρικά περιθώρια στην ετικέτα . Τα ορίσματα σε αυτά τα χαρακτηριστικά καθορίζονται ως αριθμοί που καθορίζουν το μέγεθος των πεδίων σε pixel. Για να ακυρώσετε την αναδίπλωση κειμένου γύρω από γραφικά, χρησιμοποιήστε την ετικέτα
.
Η ακόλουθη ετικέτα ορίζει τα γραφικά από το αρχείο logotip.jpg να αναδιπλώνονται προς τα δεξιά (η εικόνα θα βρίσκεται στα αριστερά του κειμένου):

Εάν θέλετε να τοποθετήσετε μια εικόνα στα δεξιά του κειμένου, τότε χρειάζεστε το χαρακτηριστικό ΕΥΘΥΓΡΑΜΜΙΖΩεκχώρηση ορίσματος ΣΩΣΤΑ:

Για να ορίσετε τα περιθώρια γύρω από την εικόνα, πρέπει να γράψετε μια ετικέτα όπως:

Εδώ οι αριθμοί 20 και 10 καθορίζουν το μέγεθος των πεδίων.
Ας εξετάσουμε ένα παράδειγμα συνδυασμένης χρήσης γραφικών και κειμένων. Ανοίξτε το Σημειωματάριο (Σημειωματάριο επεξεργασίας κειμένου) Windows. Γράψτε κώδικα HTML σε αυτό χρησιμοποιώντας τις ετικέτες που συζητήθηκαν παραπάνω. Παρακάτω είναι ένα πρόγραμμα που βγάζει κείμενο και γραφικά. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε από τα αρχεία που έχετε ως αρχείο γραφικών. Το αρχείο που χρησιμοποιείται εδώ είναι logotip.gif.

<Н1>Το κείμενο αναδιπλώνεται γύρω από γραφικά στα δεξιά
Αυτό είναι ένα παράδειγμα χρήσης κειμένου και γραφικών μαζί.
Το κείμενο του προγράμματος HTML μπορεί να γραφτεί σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου. Αυτό χρησιμοποιεί ετικέτες σήμανσης κειμένου.

Αυτό το κείμενο εμφανίζεται από μια νέα παράγραφο. Για να γίνει αυτό, χρησιμοποιήσαμε μια ειδική ετικέτα.

Δοκιμάστε να αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησής σας. Παρατηρήστε πώς αλλάζει η διάταξη του κειμένου.

Ρύζι. 657. Το κείμενο αναδιπλώνεται γύρω από την εικόνα στα δεξιά

Παρέχουν ευρείες δυνατότητες για ακριβή τοποθέτηση εικόνων (καθώς και άλλων στοιχείων) στη σελίδα τραπέζιαΚαι στυλ. Αυτά τα στοιχεία HTML θα συζητηθούν αργότερα. Για παράδειγμα, μπορείτε να ορίσετε έναν πίνακα χωρίς ορατά πλαίσια και να τοποθετήσετε εικόνες, κείμενα και άλλα στοιχεία στα κελιά αυτού του πίνακα.