Abbiamo passato molto tempo a parlare dell'utilizzo di inline e dell'elemento. Puoi costruire un sistema di icone con quello pieno di vantaggi.
Puoi creare un sistema di icone SVG anche se in altri modi. Potresti disporre un foglio sprite tradizionale con griglia in SVG e fare sprite in posizione di sfondo come facevamo con le immagini raster. In futuro sarai in grado di utilizzare gli identificatori di frammento, in modo che diventi ancora più semplice. Maggiori informazioni su queste cose.
Un altro modo è incorporare gli URI dei dati dell'immagine SVG direttamente in un file CSS. Questo è l'approccio adottato da Grunticon.
Grunticon è un plugin Grunt per automatizzare un sistema di icone SVG. Prende una cartella piena di SVG e li elabora in un file CSS. Ci sono un sacco di selettori lì, in base ai nomi dei file delle immagini SVG, che hanno un background-imageURI dei dati SVG (non Base64 però).
In questo modo si ottiene la scalabilità di SVG e i vantaggi in termini di dimensioni dei file, ma questo è tutto. Tuttavia, spesso è tutto ciò di cui hai bisogno.
Forse la parte migliore di Grunticon, però, è che ti dà tutto il necessario per i fallback. Ciò include un foglio di stile alternativo per i PNG URI di dati e persino i singoli PNG stessi (che crea per te). Inoltre, uno script che utilizzi sulla tua pagina per determinare il supporto e caricare solo il foglio di stile appropriato.
Penso che sia giusto dire che questo rende i fallback più facili da gestire rispetto alla def / tecnica, per ora. Non che sia impossibile.
Grumpicon è una versione in-browser di Grunticon, che abbiamo usato in questo screencast.
Mentre scrivo, Grunticon sta lavorando a un modo per migliorare progressivamente fino a incorporare SVG in linea, il che sarebbe piuttosto interessante!