​
Resumo

Para reutilizar elementos SVG e diminuir o tamanho do HTML de páginas:
  1. Use um arquivo único SVG (ex.: sprites.svg) e identifique cada símbolo com um“id`.
  2. Para usar o SVG, utilize a tag use apontando pra o ID específico
  3. Faça isso especialmente para os SVG que não estão visíveis em tela.

​
SVG

SVG (Scalable Vector Graphics, ou Vetores Gráficos Escaláveis) é um formato gráfico comumente utilizando em aplicações para representar ícones, logomarcas ou elementos que precisam ser escalados sem perder qualidade. Contudo, o seu uso pode impactar negativamente a performance de uma página web em diversas métricas, como: tempo de carregamento da página (speed index), tempo para exibir o primeiro conteúdo visível (FCP), tempo para exibir o último conteúdo visível (LCP).

​
A técnica SVG Sprites

SVG sprites consiste em você ter um arquivo svg que seja cacheável e acessível pela internet (exemplo: na sua pasta static), e nele tenha as as símbolos de cada svg utilizando a tag <symbol> e adicionando a propriedade id em cada um dos elementos que deseja utilizar. Segue um exemplo de arquivo svg com um símbolo e id XMark 
<svg style="display: none">
  <symbol
    id="XMark"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M6 18L18 6M6 6l12 12"
    />
  </symbol>
</svg>

​
SVG Sprites para melhorar a performance do seu site

Para utilizar um svg que está dentro de um arquivo, é possível referencia-lo através do endereço do arquivo e do id do símbolo que foi definido no arquivo através da tag <use>. Segue um exemplo: Digamos que o nome do arquivo svg é icons.svg e ele está disponível no path example.com/icons.svg 
{/* icons.svg */}
<svg style="display: none">
  <symbol
    id="XMark"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M6 18L18 6M6 6l12 12"
    />
  </symbol>
</svg>
Você pode referenciar o símbolo XMark dentro do seu html desta forma: 
<svg>
  <use href="/icons.svg#XMark" />
</svg>
Desta forma, o tamanho do documento da sua página não será incrementado com o tamanho do SVG XMark, dado que ele não faz parte do seu documento, pois ele está em outro arquivo. No caso de uso de SVG dentro de ilhas, a quantidade de JavaScript gerado no bundle será menor.

​
Quando utilizar a técnica?

⚠️ Não é sempre adequado utilizar a técnica, porém é sempre válido testá-la.
Considerando que existirá um ou vários arquivos svgs, com o intuito de melhorar a performance do seu site e manter uma ótima usabilidade, é sugerido que utilize desta abordagem nos seguintes casos:
  • SVG não é visível na tela inicial do usuário (não está no “above the fold”)
  • SVG é exibido através de interação do usuário na página, por exemplo: hover, dentro de dialogs, ao clicar em botões
  • No caso de aplicações que utilizam jsx ou afins, que é o caso do Fresh, pois a quantidade de Javascript gerado por SVG é consideravelmente grande.
Extra: É possível definir um símbolo dentro do próprio documento e referencia-lo posteriormente no mesmo documento. Esta abordagem é válida para os casos de onde um único SVG é repetido várias vezes na página e pode ser utilizada para SVGs que são exibidos acima do “Fold” (i.e. visíveis na tela do usuário antes da interação do mesmo). 
<svg>
  <use href="#XMark" />
</svg>