SVG inline… Com cache!

Todos sabemos que não é possível cachear ícones SVG inline… Ou será que é? Veja neste artigo como usar ícones SVG inline com cache!

Ir para o artigo

SVG para ícones é o que há atualmente em webdev. Mas usar SVG inline não nos permite aproveitar as maravilhas do cache… Ou será que isso é possível? 🤔

Veja como usar SVG inline com cache a unir o que de melhor é possível fazer em sistemas de ícones com SVG cacheados!

A questão do código inline para ícones em SVG

Muitos desenvolvedores (a maioria?) são a favor de usar código inline para ícones. Esta seria a maneira mais fácil de colocar um ícone em uma página: nenhuma requisição extra; perfeitamente estilizado.

Mas código inline tem algumas desvantagens, uma das quais é que não tira proveito do armazenamento em cache. O navegador tem que ler e processar o mesmo código tantas vezes quanto forem as visitas às páginas.

Não é tão ruim assim, certo? Certamente, há questões de performance muito mais importantes para nos preocuparmos. Mas, ainda assim, é divertido (neste caso, importante) pensar em padrões mais eficientes.

Scott Jehl escreveu um artigo mostrando que só porque você colocou um código inline, não significa que você não possa armazená-lo em cache. Veremos se a ideia de Scott pode ser aplicada também a ícones SVG.

Começando com SVG inline

Para começar com essa história toda de SVG inline com cache, veja este código de exemplo:

Uma parte de uma página HTML comum, sem mistério. No <body>, a peça principal de nossa investigação, um SVG inline.

Como cachear SVG inline como um arquivo

No HTML acima, o seletor .icon-alarm provê o pedaço (chunk) inteiro de <svg> para aquele ícone.

Então, torna-se possível colocar isso no cache do navegador assim:

Vê o caminho /icons/icon-wheelchair.svg? Isso é meio que apenas inventado. Mas realmente será colocado no cache naquele local (location).

SVG inline com cache: DevTools mostrando recurso.

Garantindo que o navegador use esse arquivo sem cache corretamente

Para o macete de usar SVG inline com cache dê certo, também é preciso registrar um Service Worker para as páginas:

Que é bem pequeno, na verdade, servindo apenas como um correspondente de cache (cache matcher):

Mas… Esse arquivo SVG nunca é requisitado, já que é inline!

Essa afirmação é verdade, mas e se outras páginas também se beneficiassem desse cache?

Por exemplo, um ícone SVG poderia ser colocado na página assim:

Uma vez que /icons/icon-alarm.svg está pronto para ser colocado em cache, o navegador irá arrancá-lo do cache e exibí-lo.

Mas… <use> e inline SVG não são exatamente a mesma coisa

E há algumas coisas possíveis de serem estilizadas dessa maneira — por exemplo, definir o fill do ícone-pai faz passar para Shadow DOM que o <use> cria e colore os elementos SVG dentro dele.

Ainda assim, realmente não é a mesma coisa. Shadow DOM é uma grande barreira em comparação a SVG inline.

É possível, por exemplo, carregar de forma assíncrona um script que encontre cada ícone SVG, usa um Ajax para o SVG necessário e substitui o <use>

Agora, supondo que esse JavaScript seja executado corretamente, essa página tem o SVG inline disponível da mesma forma que a página original! ❤

Conclusão sobre SVG inline com cache!

Como visto, é possível sim usar inline SVG com cache!

Claro, adaptações e criações em código devem ser feitas e algumas tecnologias novas usadas, mas nada que seja absurdamente difícil.

Certamente, para os casos em que seja preciso usar sistemas de ícones em SVG com código inline, esta técnica está em alta consideração.

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS