14: Σύστημα εικονιδίων SVG - Δημιουργία Defs - CSS-Κόλπα

Anonim

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

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

Θα το φτιάξουμε από το SVG που βρίσκουμε σε διαφορετικά μέρη στον ιστό. Παίρνουμε ένα από το The Noun Project, ένα από το IcoMoon και ένα από το Shutterstock. Κάνουμε τη δέουσα επιμέλεια στο άνοιγμα του SVG, διορθώνοντας τυχόν παράξενα σχήματα, αγκαλιάζοντας το μέγεθος του καμβά και τι άλλο. Δεν υπάρχει κανένα όριο από πού μπορεί να προέρχονται αυτές οι διανυσματικές πληροφορίες. Αυτές οι τρεις πηγές είναι απλώς για να σας δείξουν ότι το SVG μπορεί να προέρχεται από οπουδήποτε διάνυσμα.

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