Έχουμε περάσει πολύ χρόνο μιλώντας για τη χρήση inline και του στοιχείου. Μπορείτε να δημιουργήσετε ένα σύστημα εικονιδίων με αυτό που είναι γεμάτο με πλεονεκτήματα.
Μπορείτε να δημιουργήσετε ένα σύστημα εικονιδίων SVG με άλλους τρόπους. Θα μπορούσατε να σχεδιάσετε ένα παραδοσιακό φύλλο sprite με πλέγμα στο SVG και να κάνετε sprite στο παρασκήνιο, όπως κάναμε με τις εικόνες ράστερ. Στο μέλλον θα μπορείτε να χρησιμοποιείτε αναγνωριστικά θραυσμάτων, έτσι ώστε να γίνεται ακόμη πιο εύκολο. Περισσότερες πληροφορίες για αυτά τα πράγματα.
Ένας άλλος τρόπος είναι να ενσωματώσετε URI δεδομένων της εικόνας SVG απευθείας σε ένα αρχείο CSS. Αυτή είναι η προσέγγιση που ακολουθεί ο Grunticon.
Το Grunticon είναι ένα πρόσθετο Grunt για την αυτοματοποίηση ενός συστήματος εικονιδίων SVG. Παίρνει ένα φάκελο γεμάτο SVG και τα επεξεργάζεται σε ένα αρχείο CSS. Υπάρχουν πολλοί επιλογείς εκεί, βάσει των ονομάτων αρχείων των εικόνων SVG, που έχουν ένα background-imageURI δεδομένων SVG (όχι όμως Base64).
Κάνοντάς το με αυτόν τον τρόπο σημαίνει ότι θα έχετε τη δυνατότητα κλιμάκωσης των πλεονεκτημάτων SVG και μεγέθους αρχείου, αλλά αυτό είναι. Ωστόσο, συχνά αυτό είναι το μόνο που χρειάζεστε.
Ίσως το καλύτερο μέρος για το Grunticon, είναι ότι σας δίνει όλα όσα είναι απαραίτητα για τις εναλλαγές. Αυτό περιλαμβάνει ένα εναλλακτικό φύλλο στυλ για δεδομένα URI PNG και ακόμη και μεμονωμένα PNG (τα οποία δημιουργεί για εσάς). Επιπλέον, ένα σενάριο που χρησιμοποιείτε στη σελίδα σας για να προσδιορίσετε την υποστήριξη και να φορτώσετε μόνο το κατάλληλο φύλλο στυλ.
Νομίζω ότι είναι δίκαιο να πούμε ότι αυτό καθιστά ευκολότερο τον χειρισμό των εναλλακτικών συγκριτικών από τα defs / teknik , προς το παρόν. Όχι ότι είναι αδύνατο.
Το Grumpicon είναι μια έκδοση του Grunticon στο πρόγραμμα περιήγησης, την οποία χρησιμοποιήσαμε σε αυτό το screencast.
Η Grunticon, όπως γράφω αυτό, εργάζεται για έναν τρόπο προοδευτικής βελτίωσης του ενσωματωμένου ενσωματωμένου SVG, το οποίο θα ήταν πολύ ωραίο!