Πώς να ξεκινήσετε με το SVG
Τους τελευταίους μήνες, το buzz γύρω από τις εικόνες SVG έχει αυξηθεί και αυξήθηκε. Το SVG βρίσκεται εδώ και χρόνια, αλλά μόλις πρόσφατα άρχισε να μοιάζει με πραγματικό υποψήφιο.
Η διαφημιστική εκστρατεία γύρω από το SVG δεν είναι μόνο κάποια τάση hipster, το SVG λύνει πλήρως τα ζητήματα που οι μορφές αρχείων όπως το JPG αποτυγχάνουν να αντιμετωπίσουν εντελώς.
Αν θέλετε να αρχίσετε να χρησιμοποιείτε το SVG, αυτό το άρθρο είναι για εσάς. Θα σας καθοδηγήσω για να μεταφέρετε το SVG σας από το Illustrator σε HTML και στη συνέχεια να σας διδάξω να τροποποιήσετε την εικόνα χρησιμοποιώντας το CSS.
Πριν αρχίσουμε να ρίχνουμε μια ματιά το demo Έχω βάλει μαζί, αυτό θα το κτίσουμε.
Τι είναι το SVG;
Το SVG αντιπροσωπεύει το Scaleable Vector Graphics και αυτή η πρώτη λέξη θα σας δώσει μια ιδέα για το γιατί το SVG είναι τόσο δημοφιλές. Το SVG είναι το τέλειο αντάλλαγμα για το σχεδιασμό που ανταποκρίνεται στις ανάγκες σας.
Οι εικόνες SVG είναι, στον πυρήνα τους, μια μορφή διανυσματικής εικόνας με βάση το XML για γραφικά 2D.
Η προδιαγραφή SVG είναι ένα ανοιχτό πρότυπο που αναπτύχθηκε από το W3C το 1999, έτσι ώστε να μπορείτε να δείτε ότι ήταν γύρω σαν τεχνολογία για μια δεκαετία και μισή ζωή σε web όρους.
Γιατί πρέπει να χρησιμοποιήσω το SVG;
Η ροή εργασίας και η αποτελεσματικότητα είναι πολύτιμες για να πετάξουν σε μια ιδιοτροπία. Εάν πρόκειται να μεταβείτε από JPG ή PNG σε SVG τότε χρειάζεστε έγκυρους λόγους, ευτυχώς SVG παρέχει πολλά:
- Το SVG είναι συνήθως μικρότερο από τα bitmap όπως JPGs και PNGs, που σημαίνει ότι χρησιμοποιούν λιγότερο χώρο στο web και κατεβάζουν ταχύτερα.
- Οι εικόνες SVG είναι κλιμακωτές, φαίνονται εξαιρετικά ανεξάρτητα από το μέγεθος που τους χρησιμοποιείτε και αυτό είναι λαμπρό για τις οθόνες του αμφιβληστροειδούς.
- Το SVG καθιστά την ακαταμάχητη ακαδημαϊκή εικόνα της εικόνας, παρέχοντας ένα ενιαίο μέγεθος που ταιριάζει σε όλες τις λύσεις.
- Το SVG είναι ιδανικό για την επίπεδη σχεδιαστική τάση που είναι επί του παρόντος τόσο δημοφιλής.
- Επειδή το SVG είναι ουσιαστικά XML, μπορεί να ελεγχθεί με CSS και JavaScript, παρέχοντας πληθώρα διαδραστικών δυνατοτήτων.
- Το SVG δεν απαιτεί αιτήσεις HTTP.
Το SVG αποτελεί μέρος του πηγαίου κώδικα του εγγράφου και είναι ήδη διαθέσιμο.
Το SVG είναι μια απίστευτα χρήσιμη τεχνολογία και είναι ένα μυστήριο για πολλούς γιατί δεν έχει απογειωθεί.
Από το Illustrator στον Ιστό
Υπάρχει μια πληθώρα εφαρμογών που θα εξάγει SVG, μπορείτε να χρησιμοποιήσετε οποιοδήποτε από αυτά. Προσωπική μου προτίμηση είναι το Adobe Illustrator, γι 'αυτό θα χρησιμοποιήσουμε.
Έχω μόλις ρίξει μαζί κάποια σχήματα και κάποιο κείμενο για το SVG μας:
Όπως μπορείτε να δείτε, είναι ένα πολύ απλό γραφικό, ώστε να μπορούμε να δούμε καθαρά τι συμβαίνει στον κώδικα.
Το επόμενο βήμα είναι να το αποθηκεύσετε ως SVG. Επομένως, επιλέξτε Αρχείο> Αποθήκευση ως.
Θα δείτε το συνηθισμένο pop up και σε αυτό θα πρέπει να επιλέξετε τη μορφή SVG. μόλις εμφανιστεί αυτό το pop up θα εμφανιστεί:
Αυτός ο διάλογος παρέχει δύο επιλογές:
Επιλογή 1: Αποθήκευση της εικόνας
Η πρώτη επιλογή που έχουμε είναι να κάνετε κλικ στο OK στο αναδυόμενο παράθυρο και απλά να αποθηκεύσετε την εικόνα ως .svg εικόνα και να την προσθέσετε στο HTML όπως θα κάναμε μια εικόνα bitmap:
Αυτό είναι απολύτως πρόστιμο και η εικόνα θα εξακολουθεί να κλιμακώνεται αν το θέλετε, ωστόσο επειδή αυτή η επιλογή είναι ενσωματωμένο αρχείο, δεν θα έχουμε δυνατότητες επεξεργασίας στον πηγαίο κώδικα της σελίδας μας.
Επιλογή 2: Κώδικας SVG ...
Η δεύτερη επιλογή είναι να έχετε άμεση πρόσβαση στον κώδικα της εικόνας κάνοντας κλικ στο κουμπί Κώδικας SVG .... Στη συνέχεια, μπορείτε να το αντιγράψετε και να το επικολλήσετε στο HTML σας.
Ο κώδικας που πήρα ήταν:
Αυτή είναι η προτιμώμενη προσέγγιση επειδή θα μας επιτρέψει να χειριστούμε την εικόνα με το CSS.
Όπως μπορείτε να δείτε, ο κώδικας είναι απλή XML και, ως εκ τούτου, είναι πιθανώς αρκετά οικεία σε όσους εργάζονται στον Ιστό. Αυτή η εξοικείωση είναι ένα μεγάλο πλεονέκτημα όταν εργάζεστε με το SVG.
Θα δείτε επίσης ότι υπάρχουν πολλά χαρακτηριστικά στα στοιχεία XML, τα λεπτομερή χρώματα και οι θέσεις. αυτές είναι οι αξίες που θα χειριστούμε αργότερα.
Καθαρίστε τον κώδικα
Εάν είστε εξοικειωμένοι με την XML (μην ανησυχείτε αν δεν είστε), θα δείτε ότι ο κώδικας που παράγεται από το Illustrator είναι κάπως ακατάστατος. Αυτό οφείλεται στο ότι έχουν προστεθεί ιδιότητες παρουσίασης CSS στη XML, γεμίζοντας το.
Επομένως, η επόμενη δουλειά που έχουμε είναι να μετακινήσουμε τις πτυχές της παρουσίασης στο CSS όπου ανήκουν.
Μπορούμε να δούμε ότι όλα τα σχήματα μας έχουν χρώμα πλήρωσης και αυτό είναι ένα από τα χαρακτηριστικά που μπορούμε εύκολα να μεταφέρουμε στο CSS. Για να γίνει αυτό, πρέπει απλώς να διαγράψουμε την ιδιότητα πλήρωσης και την τιμή από την XML και να χρησιμοποιήσουμε έναν απλό επιλογέα για να ορίσουμε το χρώμα που θέλουμε στην ιδιότητα πλήρωσης:
rect {fill: #AD6F6F;}circle {fill: #6F9FAA;}polyline {fill: #6FA86F;}Στη συνέχεια, μπορούμε να δούμε ότι στο κείμενο μας, τα περισσότερα από τα χαρακτηριστικά μπορούν επίσης να μεταφερθούν στο CSS μας. Απλά διαγράψτε το περιεχόμενο , τη γραμματοσειρά-οικογένεια και το μέγεθος γραμματοσειράς από τη XML και προσθέστε τα στο CSS:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;} Ας ρίξουμε μια ματιά στον κώδικα μας τώρα:
Μπορείτε να δείτε ότι αφαιρώντας τα χαρακτηριστικά παρουσίασης έχουμε πολύ πιο ευανάγνωστο κώδικα.
Βάζοντας το σε μια εγκοπή
Μετακινήσαμε τα χαρακτηριστικά παρουσίασής μας από την XML μας στο CSS, αλλά αυτά ήταν χαρακτηριστικά που είχαμε ήδη. Μπορούμε επίσης να προσθέσουμε ολοκαίνουργια χαρακτηριστικά.
Το πρώτο πράγμα που θέλω να κάνω είναι να προσθέσω ένα εγκεφαλικό επεισόδιο στον πρώτο μας κύκλο, αλλά όχι μόνο αυτό, θέλω να ελέγξω το πάχος και την αδιαφάνεια. Είναι όλα πολύ απλά:
circle {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Αν ελέγξετε το αρχείο σας, θα δείτε ότι αυτό προσθέτει πράγματι ένα εγκεφαλικό επεισόδιο στον κύκλο, αλλά το προσθέτει και στον δεύτερο κύκλο που δεν θέλαμε.
Η λύση είναι ακριβώς η ίδια με οποιοδήποτε θέμα επιλογής CSS, απλά πρέπει να προσθέσουμε μια κλάση στο στοιχείο XML μας:
Και τότε, μπορούμε να στοχεύσουμε την τάξη στο CSS μας:
circle.stroke {stroke: #547178;stroke-width: 5px;stroke-opacity: 0.5;}Σχεδόν κάθε CSS μπορεί να εφαρμοστεί στο SVG. Μπορούμε να εφαρμόσουμε ένα εφέ που θα αυξήσει το μέγεθος της γραμματοσειράς μας, για παράδειγμα:
text:hover {font-size: 40px;}Αν δοκιμάσετε αυτό, θα δείτε ότι λειτουργεί, αλλά είναι μια στιγμιαία αντίδραση. Θα ήταν πολύ καλύτερο να χρησιμοποιήσουμε μια μετάβαση CSS, η οποία φυσικά είναι δυνατή:
text {fill: #383838 ;font-family: 'Pacifico-Regular', arial, sans-serif;font-size: 35px;transition: all 1s ease;}Εάν επαναλάβετε τη φόρτωση της σελίδας, θα δείτε μια ήπια μετάβαση στο μέγεθος της γραμματοσειράς.
συμπέρασμα
Όπως μπορείτε να δείτε, το SVG έχει πολλή δύναμη πίσω από αυτό. Η καμπύλη μάθησης είναι πολύ ρηχή και οι δυνατότητες φαίνονται ατελείωτες. Μια εικόνα SVG αξίζει δεκάδες εικόνες bitmap.
Προτεινόμενη εικόνα / μικρογραφία, εύκαμπτη εικόνα σχεδιασμού μέσω Shutterstock.