Conduzindo o popup

Passo a passo

Da página ao arquivo

1. Abra o popup. Vá até a página que tem o SVG e clique no botão do SVG Downloader. Só então ele lê a aba: ele escaneia o DOM atual ao abrir, então deixe a página terminar de carregar antes.
2. Leia a contagem. O popup informa quantos SVGs encontrou. Esse número cobre as quatro origens: <svg> inline, vetores em <img> e <object> incluindo URIs data:, SVGs em background-image do CSS e referências <use> a sprites do mesmo documento.
3. Navegue pelas prévias. Cada SVG é renderizado isolado, tirado da página cheia para você conseguir ver de verdade. Use Anterior e Próximo para percorrer e chegar no que você quer.
4. Defina um nome (opcional). Digite um nome para o SVG atual e ele é salvo exatamente assim. Deixe em branco e ele cai num svg-1.svg numerado, com o prefixo definido nas opções da extensão.
5. Baixe o SVG atual. Clique em Baixar o SVG atual para salvar só o que está na tela. O arquivo é o markup original com o xmlns consertado, então abre no Figma, no Illustrator, no VS Code e em qualquer navegador.
6. Ou baixe tudo em ZIP. Clique em Baixar tudo em ZIP para juntar de uma vez todos os SVGs detectados, numerados a partir de svg-1.svg na ordem da página. O arquivo vem sem duplicatas, e o que não pôde ser buscado aparece na linha de status do popup — Baixados 8 de 10 SVGs. Ignorados: 3, 7. — em vez de sumir em silêncio.

O que o popup garante

• O vetor original, não um print. Cada download é o SVG que estava na página — seus traçados, seu viewBox, sua precisão — então ele continua nítido em qualquer tamanho e continua sendo texto editável.
• Um namespace consertado. O SVG inline costuma omitir o xmlns porque o navegador fornece. Salvo num arquivo puro, ele não abriria; o SVG Downloader devolve isso automaticamente.
• Nada sai da sua máquina. Detecção, prévia e download rodam no dispositivo. Não há upload, conta nem chamada de analytics — veja a política de privacidade.
• As falhas aparecem, não são engolidas. A linha de status nomeia tudo que foi ignorado, então a contagem que você lê é uma com a qual dá para trabalhar.

O que ele não pega

Três limites valem ser conhecidos, e o popup avisa quando eles pesam. Um <use> apontando para um arquivo de sprite externo — <use href="/sprite.svg#cart"> — não é resolvido, e aquele <svg> é ignorado; só referências do mesmo documento são seguidas, um nível de profundidade. Em páginas com mais de 10.000 elementos a varredura de background-image do CSS é pulada por velocidade, então você verá só as outras três origens. E a coleta trava em 2.000 SVGs inline, deixando de fora qualquer SVG cujo markup passe de uns 2 MB.

Recolorir depois de salvar

Muitos ícones herdam a cor do CSS via currentColor, então um arquivo salvo pode parecer preto sozinho. Se você quer uma cor específica gravada, use o atalho opcional para o SVG Color Changer — o único link de saída da extensão, e só quando você clica. Recolora lá e depois salve o resultado.

Para onde ir agora

Para um trabalho específico, os guias são mais diretos: baixar um SVG de qualquer site, pegar tudo em ZIP ou tirar um de um fundo CSS. Empacou? As perguntas frequentes cobrem o ícone preto, o arquivo que não abre e o resto.