Por que um extrator de SVG online não consegue ver esta página

Assista — 17 segundos

O que rodar a página te dá

tutorial · comparação

A distinção não é de qualidade nem de esforço — é arquitetural. Uma abordagem lê um documento; a outra lê uma página renderizada.

O que a gravação mostra

1. Uma ferramenta online só recebe a URL que você cola
2. Ela nunca roda a página, então ícones inline continuam invisíveis
3. Uma extensão roda dentro da página em que você já está
4. Incluindo páginas com login e painéis privados
5. E nada sai da sua máquina para isso funcionar

O motivo técnico

Buscar uma URL e renderizar uma página são coisas diferentes

Quando você cola uma URL num extrator online, o servidor dele manda uma requisição HTTP simples e recebe de volta o HTML que o servidor escolheu mandar. Depois ele procura naquele texto coisas que pareçam SVGs. É uma abordagem razoável, e ela perde a maior parte de um site moderno, por quatro motivos separados.

• Nenhum JavaScript roda. Num site React, Vue, Svelte ou Angular, o HTML inicial costuma estar quase vazio — um elemento raiz e uma tag de script. Todo ícone aparece só depois que o framework executa. Uma busca vê a casca vazia.
• Nenhum CSS é aplicado. Um vetor definido como background-image numa folha de estilo só existe depois que os estilos são computados contra os elementos. Procurar texto no HTML não vai achar.
• Nenhuma sessão. O servidor que busca sua URL não está logado como você. Qualquer coisa atrás de autenticação devolve uma página de login, então um painel, uma área administrativa ou uma ferramenta paga fica simplesmente inalcançável.
• Sprites não são resolvidos. Um <use href="#star"> encontrado no HTML cru é um ponteiro. Sem um documento renderizado não há contra o que resolvê-lo, então você recebe um arquivo vazio.

Uma extensão não tem nenhum desses problemas porque não está buscando nada. Ela roda dentro da página que você já está olhando, depois de o framework ter renderizado, depois de os estilos terem sido aplicados, com sua sessão intacta e o documento inteiro disponível para resolver referências.

Fazendo isso na página em vez disso

Não há URL para colar, e esse é o ponto.

1. Deixe a página no estado que você quer. Faça login se precisar. Role, abra o menu, mude para a aba com os ícones. Tudo que você consegue ver, a varredura consegue ler.
2. Clique no botão da barra de ferramentas. A varredura roda contra o DOM vivo — incluindo ícones renderizados pelo framework, fundos CSS e referências de sprite.
3. Compare a contagem. É o momento em que a diferença aparece. O número encontrado aqui costuma ser várias vezes o que uma busca por URL informou.
4. Leve. Um a um com Baixar o atual, ou o conjunto todo com Baixar tudo em ZIP. Nada sai da sua máquina em momento algum.

A outra pergunta: para onde vai o seu arquivo?

Uma ferramenta online precisa receber seus dados para trabalhar neles. Dependendo do serviço, isso pode significar a URL de uma página em que você estava logado, ou um arquivo enviado, parado no servidor de outra pessoa — sujeito à política de retenção dela, aos logs dela, à jurisdição dela e à segurança dela. Para uma página pública de marketing pode ser uma troca aceitável. Para um painel interno, o ambiente de homologação de um cliente ou um design não lançado, é uma transferência de dados que você provavelmente não pretendia fazer.

A versão no dispositivo não envolve essa troca de jeito nenhum, e não como compromisso de política: a política de segurança de conteúdo da extensão define connect-src 'none', então as páginas dela não conseguem abrir conexão de rede. Não há endpoint para onde enviar. Isso também significa que tudo funciona offline.

Onde uma ferramenta online é genuinamente a melhor escolha

Sendo justo: se a URL aponta direto para um arquivo .svg e tudo que você quer é converter ou otimizar, uma ferramenta online é rápida e não exige instalar nada. Se você está numa máquina travada em que não pode instalar extensão, pode ser sua única opção. E para otimizar SVGs especificamente — rodar SVGO neles, tirar metadados, encolher traçados — os bons otimizadores online fazem um trabalho que esta extensão nem tenta.

Os limites honestos deste lado

Uma extensão precisa ser instalada, precisa de um navegador Chromium, e não consegue fazer nada numa página que você mesmo não consegue abrir — páginas chrome://, a Web Store, galerias de extensões. Ela também é estritamente interativa: não há API nem jeito de rodá-la sobre uma lista de mil URLs. Para isso, um navegador headless é a ferramenta correta.

Uma busca por URL perde

Ícones renderizados por JavaScript, fundos CSS, páginas com login e alvos de sprite.

Uma extensão enxerga

O DOM renderizado — depois do framework, depois dos estilos, com a sua sessão.

Privacidade

connect-src 'none'. Nenhum endpoint para onde enviar; funciona offline.

Ferramentas online ganham em

Otimizar um .svg que você já tem, e máquinas em que não dá para instalar nada.

Vale saber

Perguntas frequentes