Πώς να σχεδιάσετε, να κωδικοποιήσετε και να κάνετε animation στα SVG

Μπορείτε να σκεφτείτε το Scalable Vector Graphics (SVG's) ως ευαίσθητο γραφικό. Το SVG είναι μια μορφή XML που σας επιτρέπει να δημιουργήσετε μια εικόνα χρησιμοποιώντας καθορισμένες ετικέτες και χαρακτηριστικά. Ο κώδικας σας θα εκτυπώσει μια εικόνα που μπορείτε να επεξεργαστείτε απευθείας στον επεξεργαστή κώδικα.

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

Μπορούμε να χρησιμοποιήσουμε το SVG στον ιστό με δύο τρόπους. Μπορούμε να χρησιμοποιήσουμε τα αρχεία SVG ως το χαρακτηριστικό src των ετικετών . Έτσι, μπορείτε να έχετε όπως θα κάνατε με PNG και JPEG.

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

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

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

Παρατηρήστε ότι όλα αυτά τα πράγματα ήταν προηγουμένως δυνατά μόνο με ενσωματωμένη έκδοση Flash - η οποία απαιτούσε flash player και εξειδικευμένη εργασία. Και δεν υπάρχει αγάπη για το Flash εκείνη την εποχή.

Εικόνες Vector vs. Raster

Οι εικόνες ράστερ αποτελούνται από εικονοστοιχεία για να σχηματίσουν μια πλήρη εικόνα. Τα αρχεία JPEG, GIF και PNG είναι συνήθεις τύποι εικόνων ράστερ. Σχεδόν όλες οι φωτογραφίες που βρίσκονται στο διαδίκτυο είναι εικόνες ράστερ.

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

Εδώ είναι τι συμβαίνει όταν κάνετε μεγέθυνση σε μια εικόνα ράστερ:

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

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

Εδώ είναι τι συμβαίνει όταν κάνετε μεγέθυνση σε μια εικόνα φορέα:

Ετικέτες SVG

Η ετικέτα ενσωματώνει ένα έγγραφο SVG μέσα στο τρέχον έγγραφο, π.χ. HTML. Η ετικέτα έχει τις δικές της συντεταγμένες x και y, το ύψος και το πλάτος και τη δική της μοναδική ταυτότητα.

Ακολουθεί μια ετικέτα που μπορεί να μοιάζει με:

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

Ακολουθεί ένα παράδειγμα ετικέτας:

  background </ title> <rect fill = "# fff" id = "canvas_background" ύψος = "402" width = "582" y = "- 1" x = Εμφάνιση = "κανένα" υπερχείλιση = "ορατό" y = "0" x = "0" ύψος = "100%" width = "100%" id = "canvasGrid" -width = "0" y = "0" x = "0" ύψος = "100%" πλάτος = "100%" /> </ g></pre><p><rect></p><p>Το στοιχείο <rect> είναι ένα βασικό σχήμα SVG που αντιπροσωπεύει ένα ορθογώνιο. Το στοιχείο μπορεί να έχει διάφορα χαρακτηριστικά, όπως συντεταγμένες, ύψος, πλάτος, χρώμα πλήρωσης, χρώμα εγκεφαλικού επεισοδίου και αιχμηρές ή στρογγυλεμένες γωνίες.</p><p>Ακολουθεί ένα παράδειγμα μιας ετικέτας <rect>:</p><pre><rect id = "svg_1" height = "253" width = "373" y = "59" x = "107.5"</pre><p><use></p><p>Το στοιχείο <use> σάς επιτρέπει να κλωνοποιήσετε και να επαναχρησιμοποιήσετε τα γραφικά στοιχεία SVG, συμπεριλαμβανομένων άλλων στοιχείων όπως <g> <rect> καθώς και άλλων στοιχείων <use>.</p><p>Ακολουθεί ένα παράδειγμα <tag>:</p><pre><text y = "15"> μαύρο </ text> <use x = "50" y = "10" xlink: href = "# x = "50" y = "30" xlink: href = "# Port" /> <text y = "55"> blue </ text> #Port "στυλ =" συμπληρώστε: μπλε "/</pre><p><path></p><p>Το <path> στοιχείο ορίζει μια διαδρομή συντεταγμένων για ένα σχήμα. Ο κώδικας για την ετικέτα διαδρομής μπορεί να φαίνεται κρυφά, αλλά μην φοβηθείτε. Ο παρακάτω κώδικας παραδείγματος μπορεί να διαβαστεί ως εξής:<br />1. "M150 o" - Μετακίνηση σε (150,0)</p><p>2. "L75 200" - Σχεδιάστε μια γραμμή στην (75,200) από την τελευταία θέση (η οποία ήταν (150,0)</p><p>3. "L255 200" - Σχεδιάστε μια γραμμή προς (225,200) από την τελευταία θέση (η οποία ήταν (75,200)</p><p>4. "Z" - Κλείστε το βρόχο (σύρετε στο σημείο εκκίνησης)</p><p>Πιθανότατα δεν χρειάζεται να το μάθετε αφού ο κώδικας για τη διαδρομή μπορεί να δημιουργηθεί σε οποιονδήποτε επεξεργαστή SVG, αλλά είναι δροσερό να το ξέρουμε.</p><p>Ακολουθεί ένα παράδειγμα μιας <path> ετικέτας:</p><pre><svg ύψος = "210" πλάτος = "400"> <μονοπάτι d = "M150 0 L75 200 L225 200 Z" /> </</pre><p><σύμβολο></p><p>Τέλος, το στοιχείο <symbol> ορίζει τα σύμβολα που μπορούν να επαναχρησιμοποιηθούν. Αυτά τα σύμβολα μπορούν να αναπαραχθούν μόνο όταν καλούνται από το στοιχείο <use>.</p><p>Ακολουθεί ένα παράδειγμα μιας ετικέτας <symbol>:</p><pre><ε> <συμβόλαιο id = "sym01" viewBox = "0 0 150 110"> <κύκλο cx = "50" cy = "50" r = "40" "κόκκινο" /> <κύκλο cx = "90" cy = "60" r = "40" εγκεφαλικό επεισόδιο = "8" εγκεφαλικό επεισόδιο = "πράσινο" fill = "λευκό" /> </ = "# sym01" x = "0" y = "0" width = "100" height = "50" /> 75 "height =" 38 "/> <use xlink: href =" # sym01 "x =" 0 "y =" 100 "width =" 50 "</pre><h4>Δημιουργία SVG</h4><p>Υπάρχουν διαθέσιμοι συντάκτες SVG, όπως το Adobe Illustrator, και το Inkscape, το οποίο είναι δωρεάν και ανοιχτό. Δεδομένου ότι τα αρχεία SVG είναι XML απλού κειμένου, θα μπορούσατε επίσης να δώσετε ένα χειροκίνητο κώδικα σε ένα τσίμπημα.</p><p>Για αυτό το παράδειγμα θα χρησιμοποιήσω ένα απλό online editor όπου μπορείτε να σχεδιάσετε SVG χωρίς να χρειάζεται να εγκαταστήσετε τίποτα.</p><ol><li>Αρχικά δημιουργήστε έναν κύκλο</li></ol><p>2. Στη συνέχεια, προσθέστε περισσότερους κύκλους και αποθηκεύστε τον πηγαίο κώδικα</p><p>CSS3 κινούμενα σχέδια</p><p>Τα αρχεία SVG μπορούν να κινούνται με την προσθήκη ενός αναγνωριστικού ή μιας κλάσης στη διαδρομή SVG στον κώδικα και στη συνέχεια με το στυλ στο CSS3 όπως οποιοδήποτε άλλο έγγραφο. Ακολουθεί ένα παράδειγμα του τρόπου με τον οποίο μπορούν να κινούνται οι εικόνες SVG.</p><p>Το animation CSS3 προσφέρει μια ποικιλία τύπων κινούμενων εικόνων από τους οποίους μπορείτε να επιλέξετε. Η κινούμενη σειρά είναι μια άλλη ωραία ιδιότητα του SVG.</p><p>Για αυτό το επόμενο παράδειγμα, έγραψα το κείμενο "Γεια σου, είμαι Surbhi" χρησιμοποιώντας το στυλό στο editor. Στη συνέχεια, χρησιμοποίησα ξανά τα βασικά καρέ CSS3 για να κινήσει τη διαδρομή.</p><p>Παρατηρήστε ότι κάθε διαδρομή έχει ένα μοναδικό αναγνωριστικό. Αυτό οφείλεται στο γεγονός ότι η καθυστέρηση στην κίνηση είναι σημαντική όταν κινείστε ένα εγκεφαλικό επεισόδιο με περισσότερες από μία λέξεις.</p><h4>Οι κινούμενες ετικέτες <animate></h4><p><animate> είναι μια ετικέτα κινούμενης εικόνας ενσωματωμένη στο ίδιο το στοιχείο SVG. Ορίζει τον τρόπο μεταβολής του χαρακτηριστικού ενός στοιχείου από την αρχική τιμή στην τελική τιμή στην καθορισμένη διάρκεια κινούμενης εικόνας. Αυτό χρησιμοποιείται για τη διόρθωση ιδιοτήτων που δεν μπορούν να κινούνται μόνο από το CSS.</p><p>Τα κοινά στοιχεία της κινούμενης ετικέτας είναι το χρώμα, η κίνηση και ο μετασχηματισμός.</p><p>Η κινούμενη ετικέτα είναι ένθετη μέσα στην ετικέτα σχήματος του αντικειμένου που πρέπει να εμψυχθεί. Δεν λειτουργεί στις συντεταγμένες διαδρομής, αλλά μόνο μέσα στις ετικέτες αντικειμένου. Παρατηρήστε την ιδιότητα πρόσθετου. Σημαίνει ότι τα κινούμενα σχέδια δεν υπερισχύουν το ένα το άλλο, αλλά εργάζονται ταυτόχρονα ταυτόχρονα.</p><p>Ακολουθεί ένα παράδειγμα animation ενός SVG χρησιμοποιώντας την ετικέτα animate HTML5:</p><h4>Βασισμένες σε JavaScript κινούμενα γραφικά και διαδραστικότητα</h4><p>Δεδομένου ότι το SVG είναι απλώς ένα έγγραφο με ετικέτες, μπορούμε επίσης να χρησιμοποιήσουμε το JavaScript για να αλληλεπιδράσουμε με μεμονωμένα στοιχεία των SVG κρατώντας τους επιλογείς τους (id ή κλάση).</p><p>Εκτός από τη βανίλιας JS, υπάρχουν διάφορες βιβλιοθήκες JavaScript που διατίθενται για animation και αλληλεπίδραση με SVG όπως τα Vivus.js, Snap.svg, RaphaelJS και Velocity.js.</p><p>Στο ακόλουθο παράδειγμα, έχω χρησιμοποιήσει τη βιβλιοθήκη Vivus.js μαζί με το jQuery για να επιτύχω μια κινούμενη κίνηση εγκεφαλικών γραμμών.</p><h4>Γιατί να μην χρησιμοποιήσετε το SVG για όλες τις εικόνες;</h4><p>Τα SVG είναι ως επί το πλείστον κατάλληλα για εικόνες που μπορούν να κατασκευαστούν με λίγα γεωμετρικά σχήματα και τύπους. Αν και, κατ 'αρχήν, μπορείτε να μετατρέψετε οτιδήποτε όπως η φωτογραφία σας στο SVG, το μέγεθος της εικόνας θα ήταν αρκετά megabytes, αποτρέποντας έτσι το σκοπό εξοικονόμησης χώρου για τη χρήση των SVG. Είναι καλύτερα να χρησιμοποιείτε SVG για εικονίδια, λογότυπα και μικρά κινούμενα σχέδια.</p><p>Εδώ είναι κάτι που δημιούργησα ενώ έμαθα για SVG, χρησιμοποιώντας CSS και SVG, χωρίς βιβλιοθήκες. (Μην Δικαστής!) Https://github.com/surbhioberoi/surbhi.me</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/highresolution-wallpapers/1575165325029.gif" /><p>Αρχικά δημοσιεύθηκε στο surbhioberoi.com στις 12 Ιουλίου 2016.</p></div><div class="neighbor-articles"><h4 class="ui header">Δείτε επίσης</h4><a href="/design/clever-solutions-for-bangalore-s-traffic-problem-a829ff/" title="Έξυπνες λύσεις για το πρόβλημα κυκλοφορίας του Bangalore">Έξυπνες λύσεις για το πρόβλημα κυκλοφορίας του Bangalore</a><a href="/design/sketch-invision-workflow-for-developers-0d5afc/" title="Sketch & InVision για προγραμματιστές">Sketch & InVision για προγραμματιστές</a><a href="/design/accelerating-access-to-care-through-secure-messaging-313be5/" title="Επιτάχυνση της πρόσβασης στη φροντίδα μέσω ασφαλών μηνυμάτων">Επιτάχυνση της πρόσβασης στη φροντίδα μέσω ασφαλών μηνυμάτων</a><a href="/design/useful-collection-of-sketch-ui-freebies-2d6005/" title="Χρήσιμη συλλογή freebies για το Sketch UI">Χρήσιμη συλλογή freebies για το Sketch UI</a><a href="/design/looking-back-at-postage-stamps-in-the-age-of-automation-84dc73/" title="Κοιτάζοντας πίσω στα ταχυδρομικά γραμματόσημα στην εποχή του αυτοματισμού">Κοιτάζοντας πίσω στα ταχυδρομικά γραμματόσημα στην εποχή του αυτοματισμού</a></div></main><div class="push"></div></div><footer style="height:50px">highresolution-wallpapers.net<!-- --> © <!-- -->2019<!-- --> <a href="https://es.highresolution-wallpapers.net/design/how-to-design-code-and-animate-svgs-c3adf2" title="https://highresolution-wallpapers.net">highresolution-wallpapers.net</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script>
                  window.cookieconsent.initialise({
                    "palette": {
                      "popup": {
                        "background": "#eaf7f7",
                        "text": "#5c7291"
                      },
                      "button": {
                        "background": "#56cbdb",
                        "text": "#ffffff"
                      }
                    },
                    "showLink": false
                  });
              </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>
                (adsbygoogle = window.adsbygoogle || []).push({
                  google_ad_client: "ca-pub-3845662922897763",
                  enable_page_level_ads: true
                });
              </script></body></html>