Como baixar os SVGs de uma página web

Assista — 17 segundos

Conte, confira, então leve

tutorial · inventário

O contador subindo do zero é a página te contando do que ela é realmente feita — e raramente é o número que as pessoas chutam.

O que a gravação mostra

1. Quantos vetores esta página realmente tem?
2. O contador responde — 24 encontrados
3. Percorra para ver o que você está levando
4. E então leve tudo num clique
5. O que não pôde ser resolvido é nomeado, não descartado em silêncio

Por que o número surpreende

Uma página renderiza muito mais vetores do que aparenta

Quando você olha uma página, vê o conteúdo. A varredura vê tudo que o navegador desenhou, e uma página moderna desenha vetores o tempo todo em lugares que você nunca contaria.

• O logo, hoje quase sempre <svg> inline em vez de um arquivo de imagem.
• A interface — a lupa de busca, as barras de menu, os xis de fechar, cada chevron de cada dropdown.
• Marcas sociais e de pagamento no rodapé, normalmente uma dúzia delas.
• Formas decorativas — divisores de seção, fundos em bolhas, fragmentos de ilustração, desenhados como vetores de fundo CSS.
• Ícones em componentes que não estão visíveis agora, como um menu fechado que já está no DOM.

É por isso que contar antes de levar vale trinta segundos: uma página que parece ter seis ícones muitas vezes informa vinte e quatro, e saber qual é qual antes de montar um ZIP te poupa de organizar depois.

Fazendo um inventário

A ordem importa aqui — a ideia é saber o que você tem antes de se comprometer.

1. Deixe a página no estado que você quer capturar. Role as seções com carregamento preguiçoso até aparecerem; abra o menu se os ícones que você quer moram dentro dele. A varredura lê o DOM como ele está, então o que ainda não foi renderizado ainda não está lá.
2. Abra o popup e leia o contador. O contador informa o número de vetores distintos encontrados, depois de as duplicatas terem sido reduzidas. Esse é o seu inventário.
3. Percorra as prévias. Ant. e Próx., com o paginador mostrando sua posição no conjunto. É aqui que você descobre que oito dos vinte e quatro são marcas de pagamento do rodapé.
4. Leve o que você quiser. Ou você nomeia e baixa vetores individuais conforme os encontra, ou aperta Baixar tudo em ZIP para o lote. A linha de status informa o que foi salvo e nomeia o que não conseguiu resolver.

Escaneie de novo depois de mudar a página

A varredura é um instantâneo, não uma transmissão ao vivo. Se você abrir um modal, trocar de aba, expandir um acordeão ou rolar uma grade preguiçosa até aparecer depois de escanear, esses vetores novos ainda não estão na lista. O botão de reescanear no cabeçalho do popup relê a página como ela está agora. Esse é de longe o motivo mais comum de alguém relatar que um ícone está “faltando” — ele genuinamente não estava no DOM quando a varredura rodou.

O que o contador não inclui

Vetores dentro de <iframe>s de outra origem não são contados, porque a política de mesma origem do navegador significa que a própria página também não consegue lê-los — um mapa incorporado ou um widget de pagamento é outro documento sob outras regras. O que é renderizado num <canvas> também não conta, já que a essa altura virou pixels e não sobra vetor para extrair.

O contador

Vetores distintos depois da desduplicação — não a contagem bruta de elementos.

Instantâneo

Lê o DOM como ele está. Reescaneie depois de mudar a página.

Não contados

Iframes de outra origem e tudo que já foi rasterizado num <canvas>.

Veja também

Levar o conjunto todo · O recurso de ZIP

Vale saber

Perguntas frequentes