16: Sistema de ícones SVG - Fonte externa - CSS-Tricks

Colocar aquele bloco defs SVG no topo do documento definitivamente funciona. Também tem algumas vantagens, como o fato de que nenhuma solicitação HTTP precisa ser feita, todas as informações para desenhar os gráficos estão diretamente na página. Mas também tem algumas desvantagens. Todas essas informações precisam ser analisadas pelo navegador em cada página, a partir do documento. Não é um documento separado que já pode estar armazenado em cache pelo cliente, como outros ativos podem estar. E por falar em cache, se o seu site armazena HTML em cache (normalmente uma boa ideia), você pode considerar esse “inchaço do cache de página” porque cada página em cache inclui esse grande bloco repetitivo de código - um uso não muito eficiente do cache do servidor.

A boa notícia é que podemos mover esse bloco defs SVG para um arquivo externo e usá-lo como faríamos com uma imagem ou qualquer outro ativo.

Quando o usamos, o caminho do arquivo estaria no atributo, assim:

Importante saber: as restrições entre domínios são severas nisso. Mesmo os cabeçalhos CORS não vão te ajudar na minha experiência. Portanto, nenhum CDN (não pode nem tocar no CodePen, e definitivamente não pode tocar em um arquivo: // URL).

Outra coisa importante a saber: você definitivamente precisa do atributo xmlns para que isso funcione. Como em, seu bloco defs SVG deve começar com:

Fiquei com a impressão de que você não precisava disso em um documento HTML5 (da mesma forma que você não precisa de tipos em s), mas talvez porque esse arquivo não esteja mais dentro dos limites de um documento HTML5 (é sendo referenciado externamente), você precisa.

Por esse motivo, a demonstração para isso está aqui.

Igualmente importante saber: nenhuma versão do IE oferece suporte para isso (até 11 no momento da publicação). Mas há uma maneira de fazê-lo funcionar, essencialmente usando Ajax no bit de SVG de que você precisa e inserindo-o onde deveria estar, tornando-o meio que o SVG embutido “normal” que é compatível. Demora um minuto para que isso funcione e seja testado no Internet Explorer usando o BrowserStack, mas, no final das contas, conseguimos.