Tutorial — o conjunto todo de uma vez
Como extrair todo SVG de um site
Percorrer quarenta ícones um a um não é a tarde de ninguém. Uma varredura acha todos; um clique leva todos.
Assista — 17 segundos
Uma varredura, um ZIP
O percorrer no meio não é enchimento — é o passo que a maioria pula e depois lamenta, porque é sua única chance de ver o que está prestes a levar.
O que a gravação mostra
- Uma varredura acha todo vetor que a página renderiza
- Confira o conjunto antes de levar
- Ant. e Próx. percorrem a lista inteira
- Baixar tudo em ZIP — o conjunto inteiro de uma vez
- Sem duplicatas, numerado e nomeado na linha de status
O que uma passagem realmente coleta
Quatro origens, resolvidas numa pasta só
A varredura não procura arquivos .svg. Ela lê a página renderizada e resolve todo vetor que alcança em markup independente, e é por isso que a contagem costuma ser maior que o número de ícones óbvios na tela.
- Elementos
<svg>inline — o grosso de qualquer conjunto de ícones moderno, mais o logo e boa parte da interface. - Vetores em
background-imagedo CSS, incluindo URIsdata:embutidos lidos da folha de estilo. - Referências
<use>a sprites do mesmo documento, resolvidas de volta ao símbolo apontado para cada uma virar um arquivo real e autossuficiente. - Origens
<img>e<object>, buscadas e embutidas.
As duplicatas são reduzidas antes de o ZIP ser montado. Uma página que renderiza o mesmo chevron em dezenove lugares te dá um chevron, não dezenove — que é a diferença entre uma pasta usável e uma bagunça.
Levando o conjunto
Quatro passos, e o terceiro é o que vale não pular.
- Abra o popup na página. Clique no botão da barra de ferramentas. O contador informa quantos vetores distintos a página renderiza.
- Reescaneie se a página mudou. Se desde então você abriu um menu, trocou de aba ou rolou uma grade preguiçosa até aparecer, aperte o botão de reescanear no cabeçalho para os ícones novos entrarem.
- Percorra para conferir o conjunto. Ande por ele com Ant. e Próx.. Trinta segundos aqui te dizem se você vai levar o conjunto de ícones que queria ou o conjunto mais toda firula decorativa da página.
- Aperte Baixar tudo em ZIP. O conjunto inteiro é empacotado, sem duplicatas e numerado. A linha de status informa quantos foram salvos — e nomeia o que não pôde ser extraído de forma independente, em vez de descartar em silêncio.
Leia a linha de status
Quando tudo resolve, você recebe um simples Baixados 24 SVGs em ZIP. Quando algo não resolve, você recebe a contagem do que deu certo e os nomes dos que não deram — porque uma ferramenta em lote que descarta arquivos caladinha é pior do que uma que falha em voz alta. Os motivos usuais de um vetor não poder ser extraído de forma independente são uma referência de sprite apontando para outro documento que a página nunca carregou, ou uma origem de imagem num domínio que recusa leituras de origem cruzada.
Páginas muito grandes
Escanear toda folha de estilo de uma página com milhares de regras é caro, então a varredura de fundos CSS é limitada. Se esse limite for atingido você verá Esta página é grande demais para escanear fundos CSS — os outros SVGs ainda foram encontrados, o que significa que elementos inline, sprites e origens de imagem foram todos coletados mesmo assim. Na prática vetores de fundo CSS são os mais raros dos quatro, então é uma perda pequena numa página em que a alternativa é uma aba travada.
Nomeando o que sai
Os arquivos do ZIP são numerados a partir de um prefixo que você pode mudar nas configurações da extensão, junto com o nome do próprio ZIP. Se você costuma puxar conjuntos de sites diferentes, definir um prefixo por projeto é mais rápido que renomear vinte arquivos depois.
- Uma passagem
- Inline, fundo CSS,
<use>de sprite e origens de imagem — juntos. - Sem duplicatas
- O mesmo ícone renderizado dezenove vezes chega uma vez.
- Honesto
- O que não pôde ser resolvido é nomeado na linha de status.
- Veja também
- O recurso em lote · Inventário da página
Vale saber
Perguntas frequentes
Ele pega todo SVG da página?
Todo aquele que consegue resolver num arquivo independente: elementos inline, imagens de fundo CSS, referências de sprite do mesmo documento, e origens img ou object. O que ele não consegue resolver é nomeado na linha de status em vez de descartado em silêncio.
Vou receber o mesmo ícone vinte vezes?
Não. As duplicatas são reduzidas antes de o ZIP ser montado, então um chevron renderizado em dezenove lugares chega uma vez.
Alguns ícones só apareceram depois que eu rolei.
Conteúdo com carregamento preguiçoso não está no DOM até renderizar. Role até aparecer e então aperte o botão de reescanear no cabeçalho do popup para capturá-lo.
O que significa “grande demais para escanear fundos CSS”?
A página tem CSS o bastante para que escanear tudo travasse a aba, então aquela origem foi pulada. Elementos inline, sprites e origens de imagem foram coletados mesmo assim.
Dá para mudar os nomes dos arquivos no ZIP?
Sim — o prefixo de numeração e o nome do ZIP são definidos nas configurações da extensão.
Leve o conjunto inteiro num clique
Sem duplicatas, numerado e honesto sobre tudo que não conseguiu alcançar.