Μια ματιά στο Scalable Vector Graphics (SVG)

Τα διανυσματικά γραφικά έχουν εφαρμοστεί ευρέως σε μέσα εκτύπωσης. Σε έναν ιστότοπο, μπορούμε επίσης να προσθέσουμε διανυσματικά γραφικά με SVG ή Κλιμακωτό γραφικό διάνυσμα. Αναφερόμενος στο επίσημο spec στο W3.org, το SVG περιγράφεται ως:

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

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

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

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

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

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

Μείωση της αίτησης HTTP

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

Στυλ και δέσμη ενεργειών

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

Μπορεί να κινείται και να τροποποιείται

Το αντικείμενο SVG μπορεί να κινούμενο όταν χρησιμοποιεί το στοιχείο κινούμενης εικόνας ή μέσω της Βιβλιοθήκης JavaScript όπως το jQuery. Το αντικείμενο SVG μπορεί επίσης να επεξεργαστεί με οποιοδήποτε επεξεργαστή κειμένου ή γραφικό λογισμικό όπως το Inkscape (το οποίο είναι δωρεάν) ή το Adobe Illustrator.

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

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

Σχεδίαση βασικών σχημάτων με SVG

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

Γραμμή

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

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

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

τελικά κάνει ακριβώς το ίδιο.

• Προβολή επίδειξης “Γραμμή”

Πολύλίνη

Είναι σχεδόν παρόμοιο με το , αλλά με το μπορούμε να σχεδιάσουμε πολλαπλές γραμμές αντί για μία μόνο. Ακολουθεί ένα παράδειγμα:

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

• Προβολή επίδειξης “Πολύλίνη”

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

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

• Προβολή επίδειξης “Ορθογώνιο παραλληλόγραμμο”

Κύκλος

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

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

• Προβολή επίδειξης “Κύκλος”

Ελλειψη

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

• Προβολή επίδειξης “Ελλειψη”

Πολύγωνο

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

• Προβολή επίδειξης “Πολύγωνο”

Χρησιμοποιώντας το Vector Graphic Editor

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

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

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

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

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

Σε αυτό το παράδειγμα, χρησιμοποιώ αυτό το Apple iPod από το OpenClipArt.org.

• Προβολή επίδειξης “iPod”

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

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

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

 window.onload = λειτουργία () // ο κώδικας Raphael πηγαίνει εδώ 

μεσα στην σώμα ετικέτα, βάλτε τα εξής div με rsr id χαρακτηριστικό;

Αυτό είναι, τελειώσατε. Ελέγξτε το παράδειγμα από τον παρακάτω σύνδεσμο.

• Προβολή επίδειξης “Ραφαήλ”

Τελικές σκέψεις

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

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

• Εισαγωγή στις σχολές SVG - W3
• Ανάλυση Ανεξάρτητη με το SVG - Smashing Magazine
• Γιατί δεν χρησιμοποιείτε το SVG; - NetTuts

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

• Προβολή επίδειξης
• Λήψη πηγής