Passamos muito tempo falando sobre o uso de inline e do elemento. Você pode construir um sistema de ícones repleto de vantagens.
Você pode criar um sistema de ícones SVG de outras maneiras. Você poderia fazer o layout de uma folha de sprite em grade tradicional em SVG e fazer sprites de posição de fundo como costumávamos fazer com imagens raster. No futuro, você poderá usar identificadores de fragmento, de modo que ficará um pouco mais fácil. Mais informações sobre essas coisas.
Outra maneira é embutir URIs de dados da imagem SVG em um arquivo CSS. Essa é a abordagem que Grunticon adota.
Grunticon é um plugin do Grunt para automatizar um sistema de ícones SVG. Ele pega uma pasta cheia de SVG e os processa em um arquivo CSS. Existem vários seletores lá, baseados nos nomes dos arquivos das imagens SVG, que possuem um background-imageURI de dados SVG (embora não Base64).
Fazer isso dessa maneira significa que você obtém a escalabilidade do SVG e os benefícios do tamanho do arquivo, mas isso é tudo. Mesmo assim, geralmente isso é tudo de que você precisa.
Talvez a melhor parte do Grunticon, porém, é que ele fornece tudo o que você precisa para fazer fallbacks. Isso inclui uma folha de estilo alternativa para PNGs de URI de dados e até mesmo PNGs individuais (que são criados para você). Além disso, um script que você usa em sua página para determinar o suporte e carregar apenas a folha de estilo apropriada.
Acho que é justo dizer que isso torna os fallbacks mais fáceis de lidar do que defs / technology , por enquanto. Não que seja impossível.
Grumpicon é uma versão no navegador do Grunticon, que usamos neste screencast.
Grunticon está, enquanto escrevo isto, trabalhando em uma maneira de aprimorar progressivamente para SVG embutido embutido, o que seria muito legal!