Σκηνές βίντεο 2025, Ιανουάριος

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

Όταν χρησιμοποιείτε ενσωματωμένο, όλα τα στοιχεία βρίσκονται στο DOM, όπως τα s και s και οποιοδήποτε άλλο στοιχείο HTML. Αν έχετε SVG όπως: και έχετε: var rect = "

Σε αυτό το screencast ανακαλύπτουμε το άρθρο της Léonie Watson σχετικά με το προσβάσιμο SVG και ουσιαστικά το περνάμε από σημείο σε σημείο. Μου αρέσει το πρώτο σημείο "

Έχουμε περάσει πολύ χρόνο μιλώντας για τη χρήση inline και του στοιχείου. Μπορείτε να δημιουργήσετε ένα σύστημα εικονιδίων με αυτό που είναι γεμάτο με πλεονεκτήματα. Μπορείτε να δημιουργήσετε "

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

Το JavaScript είναι ο τελευταίος τρόπος με τον οποίο θα καλύψουμε την κίνηση του SVG. Κοιτάξαμε το CSS, το οποίο είναι υπέροχο και αρκετά άνετο, αλλά δεν μπορεί να κάνει μια σειρά SVG "

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

Ίσως έχετε ακούσει για φίλτρα CSS; Μπορείτε να τα εφαρμόσετε κάνοντας οποιοδήποτε στοιχείο από το CSS, όπως: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

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

Μπορεί να έρθει μια μέρα όπου θα θέλατε ένα γραφικό που είχατε να είναι SVG, αλλά το έχετε μόνο σε ράστερ, όπως GIF, JPG.webp ή PNG. Σε αυτό το βίντεο βλέπουμε ένα παράδειγμα "

Μια δημοφιλής τεχνική SVG animation είναι η σχεδίαση διαδρομών. Εάν δεν μπορείτε να το φανταστείτε, εδώ είναι μια συλλογή από παραδείγματα zillion που έχω δημιουργήσει. Ουσιαστικά το "

Υπάρχει ένα στοιχείο στο SVG. Δεν υπάρχει μεγάλη έκπληξη εδώ: είναι για την τοποθέτηση κειμένου στο SVG. Όχι περίγραμμα των σχημάτων των γραμμάτων (αν και μπορείτε να το κάνετε και αυτό) αλλά "

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

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

Αυτή η συμβουλή ισχύει μόνο εάν έχετε το Adobe Illustrator CC (Creative Cloud). Επιβεβαίωσα ότι λειτουργεί σε αυτό, ή ακόμα και το νεότερο CC 2014. Είναι τόσο απλό όσο μπορεί "

Παρόλο που η κινούμενη εικόνα SVG με CSS μπορεί να είναι πιο άνετη για το μέσο front-end άτομο, η SVG έχει έναν άλλο τρόπο να ενσωματωθεί η κινούμενη εικόνα απευθείας στο SVG "

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

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

Ο όρος "εργαλείο κατασκευής" μπορεί να είναι τρομακτικό. Θυμίζει φανταχτερά εργαλεία γραμμής εντολών που απαιτούν διαμόρφωση και περίεργες εξαρτήσεις συστήματος που σπάνε όταν "

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

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

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

Σίγουρα μπορούμε να πάρουμε λίγο nerdier με τα εργαλεία κατασκευής μας. Τη στιγμή της δημοσίευσης αυτού, το παιδί αφισών των εργαλείων κατασκευής είναι Grunt. Υπάρχουν ανταγωνιστές, "

Μόλις έχουμε αυτό που αποκαλούμε το "defs block" του SVG - αυτό το κομμάτι του SVG που καθορίζει όλα τα πράγματα που θέλουμε να σχεδιάσουμε αργότερα - πού το βάζουμε; Ετσι"

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

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

Το SVG έχει ένα πολύ δροσερό και ισχυρό στοιχείο που ονομάζεται. Είναι πολύ απλό στην έννοια. Βρίσκει ένα άλλο κομμάτι του κώδικα SVG, που αναφέρεται από το ID, και τον κλωνοποιεί πάνω "

Καλύψαμε το "inline SVG" - το οποίο ρίχνει τη σύνταξη SVG απευθείας σε HTML. Μπορείτε να χρησιμοποιήσετε το ίδιο ενσωματωμένο SVG και σε άλλα μέρη, όπως σε "ή"

Θυμηθείτε ότι οτιδήποτε διάνυσμα μπορείτε να μπείτε στο SVG. Το λογισμικό της Adobe είναι εξαιρετικό σε αυτό. Θα μπορούσε να υπάρχει διανυσματικό υλικό σε ένα PDF - απλώς ανοίξτε το PDF και θα "

Το Noun Project είναι ένα (πολύ) φανταστικό μέρος για να πάρετε το SVG. Ας μετρήσουμε τους τρόπους Κυριολεκτικά τα πάντα στο SVG και πραγματικά έρχονται με αυτόν τον τρόπο.