Hemos pasado mucho tiempo hablando sobre el uso de inline y el elemento. Puede crear un sistema de iconos con muchas ventajas.
Puede crear un sistema de iconos SVG de otras formas. Podría diseñar una hoja de sprites cuadriculada tradicional en SVG y hacer sprites de posición de fondo como solíamos hacer con imágenes rasterizadas. En el futuro, podrá usar identificadores de fragmentos, por lo que incluso será un poco más fácil. Más información sobre estas cosas.
Otra forma es incrustar URI de datos de la imagen SVG directamente en un archivo CSS. Ese es el enfoque que adopta Grunticon.
Grunticon es un complemento de Grunt para automatizar un sistema de iconos SVG. Toma una carpeta llena de SVG y los procesa en un archivo CSS. Hay un montón de selectores allí, basados en los nombres de archivo de las imágenes SVG, que tienen un background-imageURI de datos SVG (aunque no Base64).
Si lo hace de esta manera, obtendrá la escalabilidad de SVG y los beneficios de tamaño de archivo, pero eso es todo. Aún así, a menudo eso es todo lo que necesita.
Sin embargo, quizás la mejor parte de Grunticon es que te brinda todo lo necesario para los retrocesos. Esto incluye una hoja de estilo alternativa para los PNG de URI de datos e incluso los PNG individuales (que crea para usted). Además, un script que usa en su página para determinar el soporte y solo carga la hoja de estilo apropiada.
Creo que es justo decir que esto hace que los fallbacks sean más fáciles de manejar que las defs / técnica, por ahora. No es que sea imposible.
Grumpicon es una versión del navegador de Grunticon, que usamos en este screencast.
Grunticon está, mientras escribo esto, trabajando en una forma de mejorar progresivamente hasta SVG integrado en línea, ¡lo cual sería genial!