SVGs: Δημιουργήστε γραφικά HTML5 που λειτουργούν σε οποιοδήποτε πρόγραμμα περιήγησης

Αποκάλυψη: Η υποστήριξή σας βοηθά στη διατήρηση της λειτουργίας του ιστότοπου! Κερδίζουμε ένα τέλος παραπομπής για ορισμένες από τις υπηρεσίες που προτείνουμε σε αυτήν τη σελίδα.


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

Αυτό το άρθρο θα σας παρουσιάσει τα βασικά μιας άλλης μορφής μορφής εικόνας: τη μορφή SVG ή Scalable Vector Graphics.

SVG: Επεκτάσιμα διανυσματικά γραφικά

Μορφές διανυσματικών vs ράστερ εικόνων

Στον κόσμο των αρχείων εικόνας, υπάρχουν δύο βασικοί τύποι μορφών: raster και vector. Οι μορφές που βασίζονται σε ράστερ βασίζονται σε pixel. Αυτές οι μορφές περιλαμβάνουν τύπους αρχείων όπως JPG, PNG και GIF.

Μερικές φορές, οι εικόνες ράστερ αναφέρονται ως εικόνες bitmap, λόγω της φύσης τους βάσει pixel. Τα pixel, φυσικά, είναι τα μικροσκοπικά τετράγωνα δομικά στοιχεία των περισσότερων ψηφιακών εικόνων που βλέπετε στον Ιστό.

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

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

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

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

Αυτό οφείλεται στις διαφορές μεταξύ διανυσματικών και ράστερ μορφών. μια μορφή SVG είναι ο τρόπος να πάτε εδώ.

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

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

Έτσι, όταν κάνετε ζουμ σε ένα ράστερ γραφικό – ένα αρχείο JPG ή PNG, για παράδειγμα – θα δείτε την εικόνα να θολώνει και να παραμορφώνεται όλο και περισσότερο.

Σε μορφή SVG, δεν θα το κάνετε. Μπορείτε να μεγεθύνετε και να μεγεθύνετε χωρίς παραμόρφωση της ίδιας της εικόνας.

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

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

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

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

Μειονεκτήματα του SVG

Υπάρχει ένα βασικό μειονέκτημα της χρήσης αρχείων εικόνας σε μορφή SVG και αυτή είναι η συμβατότητα. Χρειάζεστε λογισμικό που μπορεί να χειριστεί την εργασία με SVGs.

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

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

Άλλες επεκτάσεις διανυσματικής μορφής

Εκτός από το SVG (επεκτάσιμο διανυσματικό γραφικό), οι βασικές επεκτάσεις αρχείων φορέα περιλαμβάνουν:

  • .drw (διανυσματικό αρχείο)
  • .eps (Ενσωματωμένο PostScript)
  • .pct (μορφή γραφικών bitmap Macintosh)
  • .pif (μορφή GDF διανυσματικής εικόνας)
  • .ps (Adobe PostScript)
  • .svf (απλή διανυσματική μορφή)

Στοιχεία SVG σε HTML5

Χρησιμοποιώντας στοιχεία HTML, μπορείτε να δημιουργήσετε ορισμένα βασικά σχήματα με SVG στο πρόγραμμα περιήγησης. Κάθε ένα από αυτά τα στοιχεία πρέπει να τοποθετηθεί μέσα στην ετικέτα.

Γραμμή

Το στοιχείο μπορεί να χρησιμοποιηθεί για τη δημιουργία μιας ευθείας γραμμής, που αποτελείται από δύο σημεία – μια αρχή και ένα τέλος. Κάθε σημείο, φυσικά, θα έχει δύο συντεταγμένες, ένα «x» και ένα «y».

Ο κωδικός θα έχει την εξής μορφή:

Μπορείτε επίσης να αντιστοιχίσετε άλλα χαρακτηριστικά με το < γραμμή > στοιχείο: η διαδρομή καθορίζει το χρώμα και το πλάτος της διαδρομής ελέγχει το πάχος της γραμμής.

Ορθ

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

Κύκλος

Όπως θα περίμενε κανείς, το στοιχείο δημιουργεί έναν κύκλο. Για να δημιουργήσετε έναν κύκλο με ακτίνα 40 (σετ με το χαρακτηριστικό r), με κέντρο 40 εικονοστοιχεία προς τα κάτω και 40 απέναντι από την επάνω αριστερή γωνία, ένα πράσινο γέμισμα και ένα μαύρο περίγραμμα, χρησιμοποιήστε τον παρακάτω κώδικα:

Εάν δεν προσδιορίσετε τα χαρακτηριστικά cx και cy, το πρόγραμμα περιήγησης θα ερμηνεύσει μια προεπιλεγμένη τιμή “0.”

Άλλα στοιχεία με τα οποία μπορείτε να παίξετε περιλαμβάνονται, και .

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

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

Τι γίνεται με το SWF?

Έμπειροι σχεδιαστές και προγραμματιστές γνωρίζουν καλά το SWF – τη μορφή κινούμενων σχεδίων και γραφικών Flash – και ενώ το SVG βρίσκεται εδώ και αρκετό καιρό, μόνο τα τελευταία χρόνια η υποστήριξη για αυτό έχει γίνει mainstream.

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

Τι είναι το SWF?

Το SWF είναι ένα ακρωνύμιο που σημαίνει Small Web Format. Είναι μια μορφή αρχείου Adobe Flash που μπορεί να χρησιμοποιηθεί για γραφικά, κινούμενα σχέδια και ενσωματωμένα widget μικροεφαρμογών. Η προσθήκη Flash πρέπει να εγκατασταθεί σε ένα πρόγραμμα περιήγησης για την απόδοση περιεχομένου SWF.

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

Ομοιότητες και διαφορές μεταξύ SVG και SWF

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

Το SVG είναι ένα ανοιχτό πρότυπο

Το πρότυπο SVG αναπτύχθηκε από την Παγκόσμια Κοινοπραξία Ιστού (W3C) και, ως εκ τούτου, είναι εντελώς ανοιχτό και δωρεάν στη χρήση και την ανάπτυξη. Το SWF, από την άλλη πλευρά, είναι μια ιδιόκτητη μορφή Flash που ανήκει στην Adobe. Το 2008, η Adobe κατάργησε πολλούς από τους περιορισμούς που διέπουν τη χρήση SWF, αλλά το SWF παραμένει μια ιδιόκτητη μορφή.

Το SVG είναι ευκολότερο να εργαστεί

Ο κωδικός SVG είναι απλός-αναγνώσιμος XML απλού κειμένου. Τα SVGs μπορούν να δημιουργηθούν χρησιμοποιώντας οποιονδήποτε επεξεργαστή απλού κειμένου και η δημιουργία απλών SVGs είναι εύκολο να γίνει και μπορεί να μαθευτεί γρήγορα από όποιον είναι εξοικειωμένος με γλώσσες ιστού όπως HTML, CSS και JavaScript. Τα SWF πρέπει να δημιουργηθούν και να επεξεργαστούν με πολύπλοκα προγράμματα όπως το Adobe After Effects ή εναλλακτικές λύσεις ανοιχτού κώδικα, όπως το Motion-Twin ActionScript 2 Compiler.

Επιπλέον, το scripting SVGs για κινούμενα σχέδια και διαδραστικότητα μπορεί να γίνει με CSS και JavaScript – γλώσσες με τις οποίες εργάζεται καθημερινά ο σχεδιαστής και ο προγραμματιστής ιστοσελίδων. Τα SWF, από την άλλη πλευρά, είναι σενάρια με το ActionScript της Adobe που είναι παρόμοιο με το JavaScript αλλά δεν είναι πανομοιότυπο και οι περισσότεροι προγραμματιστές το χειρίζονται σε πολύ λιγότερο συχνή βάση.

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

Το SVG είναι καλύτερο για SEO

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

Η υποστήριξη SVG αυξάνεται

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

Και οι δύο SVG και SWF υποστηρίζουν πολλαπλούς τύπους μέσων

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

Περίληψη SWF

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

Πόροι SVG

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

Μάθετε τα βασικά

Αν μόλις ξεκινήσετε με το SVG, ρίξτε μια ματιά σε αυτό το σεμινάριο από το Creative Bloq για τη δημιουργία απλών σχημάτων και τη χρήση γεμίσματος και ντεγκραντέ. Μια δεύτερη επιλογή που καλύπτει πολλές από τις ίδιες βασικές τεχνικές είναι αυτός ο οδηγός για να ξεκινήσετε με το SVG από το Envato Tuts+.

Χρησιμοποιήστε το λογισμικό γραφικών για τη δημιουργία SVG

Αν πρόκειται να δημιουργήσετε κάτι πιο περίπλοκο από απλά σχήματα, θα θελήσετε να εργαστείτε με ένα πρόγραμμα διανυσματικών γραφικών όπως το Adobe Illustrator που μπορεί να εξάγει αρχεία σε μορφή SVG. Αυτός ο γρήγορος οδηγός από το CSS-Tricks θα σας δείξει πώς να χρησιμοποιήσετε το Illustrator για να δημιουργήσετε μια κινούμενη διαφήμιση που χρησιμοποιεί μόνο HTML και CSS. Ένας άλλος σπουδαίος πόρος για να μάθετε πώς να χρησιμοποιείτε το illustrator για τη δημιουργία SVGs προέρχεται από το Web Designer Depot.

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

Μάθετε προηγμένες τεχνικές SVG

Εάν θέλετε να μάθετε πραγματικά το SVG, υπάρχουν δύο πόροι που πρέπει να αφιερώσετε λίγο χρόνο για να ελέγξετε:

  • Το SVG Tutorial από το Mozilla Developer Network.
  • Ένα SVG Primer για τα σημερινά προγράμματα περιήγησης, ένα δωρεάν ebook από το W3C.

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

Δημιουργήστε κινούμενες εικόνες SVG

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

  • Ένα σεμινάριο από τον David Walsh για τη δημιουργία κινούμενων σχεδίων SVG χρησιμοποιώντας CSS και JavaScript.
  • Ένα εκτεταμένο σεμινάριο από τη Jenkov που καλύπτει όλες τις πτυχές της εργασίας με το SVG, συμπεριλαμβανομένων των κινούμενων σχεδίων CSS και της δέσμης ενεργειών JavaScript.
  • Η λίστα των οκτώ κορυφαίων βιβλιοθηκών JavaScript του Hongkiat για τη δημιουργία κινούμενων σχεδίων SVG.

Περαιτέρω πόροι

  • Tutorial Mozilla Developers Network SVG: ένα σεμινάριο σε εξέλιξη που συζητά κάθε πτυχή της μορφής SVG για χρήση σε προγράμματα περιήγησης Mozilla.
  • Το Simple Intro to SVG Animation: ένα εξαιρετικό σεμινάριο που γράφτηκε από τον David Walsh.
  • ImageMagick Εισαγωγή και πόροι: μια συλλογή εργαλείων γραφικών, τα οποία περιλαμβάνουν ορισμένα για PostScript.

συμπέρασμα

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map