A coisa toda, numa tomada só
24 SVGs encontrados, percorrer
as prévias, baixar star.svg e então pegar os
vinte e quatro em ZIP. Sem mockups — é a extensão, rodando.01 — O problema
O navegador simplesmente não entrega
Um SVG é texto — algumas centenas de bytes de coordenadas. A única coisa que você quer é justamente a que a página torna mais difícil de conseguir.
<svg> inline não tem menu de botão direito próprio. Um conjunto de
ícones atrás de um background-image do CSS não pode ser arrastado. Uma folha de
sprites esconde quarenta glifos dentro de um arquivo. Então as pessoas tiram print do ícone e
redesenham, ou garimpam o nó no DevTools — e acabam com um raster de um
vetor, borrado no instante em que é redimensionado.
star.svg — o que você quer
star.png — o que você consegue
O vetor já está na página. Você não deveria ter que redesenhá-lo para ficar com ele.
02 — Como funciona
Quatro movimentos, um popup
Tudo acontece num painel de 360 px que desce da barra de ferramentas. Estes são os quatro tempos da demo acima, um por um — cada gravação é a extensão real na mesma página ao vivo.
-
Abra, e ele conta o que encontra
Clique no ícone em qualquer página e o painel escaneia o DOM ao abrir —
<svg>inline, vetores em<img>,background-imagedo CSS e referências<use>de sprite igualmente. O contador sobe até o que ele acha:0 → 24 SVGs encontrados.01 · detectarO painel entra e o contador para em 24 SVGs encontrados. -
Veja a prévia de cada um e percorra
Todo vetor detectado ganha uma prévia limpa e isolada — sozinho, longe da página cheia, para você ver exatamente o que vai salvar. Anterior e Próximo percorrem o conjunto todo: lupa, coração, estrela e os vinte e um atrás deles.
02 · préviaPercorrendo as prévias — o nome do arquivo acompanha: search-24,heart-24,star-24. -
Baixe o original, num clique
Dê um nome se quiser, aperte Baixar o SVG atual, e o arquivo de verdade cai nos seus downloads — o markup real tirado da página, com o
xmlnsfaltante consertado para abrir em qualquer lugar. Um visto destar.svg salvoconfirma.03 · downloadUm clique, e star.svg salvo— o vetor original, não um print. -
Ou leve a página inteira em ZIP
Baixar tudo em ZIP junta os SVGs encontrados — os vinte e quatro daqui — num arquivo só, sem duplicatas e numerados a partir de
svg-1.svgcom um prefixo que você pode mudar. O que não pôde ser buscado é nomeado na linha de status em vez de ser pulado em silêncio. Um conjunto inteiro de ícones, num clique.04 · empacotarTodo vetor da página, empacotado: 24 SVGs salvos.
pronto Os vetores sempre estiveram na página. Agora estão nos seus downloads.
03 — Os detalhes
O que ele pega e o que ele preserva
Quatro afirmações sobre como ele se comporta — do tipo que você só percebe quando uma ferramenta mais simples erra.
- Todas as origens
-
Inline, imagem, fundo, sprite
Quatro jeitos de uma página carregar um vetor, e ele lê os quatro — data URIs,
<object>, fundos CSS e referências<use>de sprite que a maioria dos extratores perde por completo. - Fidelidade
-
O markup original, não uma re-renderização
O que se salva é o SVG que estava na página — seus traçados, seu
viewBox, sua própria precisão. Nítido em qualquer tamanho, e ainda texto editável que você pode recolorir. - Em escala
-
Um, ou todos de uma vez
Nomeie e salve um ícone só, ou leve a página inteira num ZIP sem duplicatas. Pegar um conjunto de quarenta ícones custa o mesmo clique que pegar um.
- No dispositivo
-
Sem servidor, sem conta, sem upload
Tudo roda no seu navegador, na página à sua frente. Nada é enviado a lugar nenhum — não há para onde enviar. Precisa recolorir antes? Um link passa a bola para o SVG Color Changer.
04 — Como esta página é feita
Todo quadro aqui é Remotion
Nada nesta página é gravação de tela. O vídeo do topo, os quatro clipes, cada pôster e cada captura para a loja são renderizados de um único projeto React.
Um kit pequeno em motion/src/kit reconstrói o popup, a moldura do
navegador e um cursor com jeito humano como componentes, todos bebendo de um tema só —
a mesma paleta monocromática que a extensão real publica. Uma composição
promo de 24 segundos coreografa o fluxo inteiro; os clipes acima são
faixas de quadros recortadas direto dela, e as imagens fixas são quadros únicos de
composições dedicadas. Mude uma palavra e todo asset renderiza de novo em sincronia,
a partir de um comando.
05 — Privacidade
Não existe servidor
Sem backend, sem analytics, sem conta, sem upload. A extensão lê a página em que você está, só quando você a abre, e grava arquivos na sua própria máquina.
Um SVG nunca precisa sair do seu navegador para ser salvo — ele já está ali, e você também. Esse é o modelo de confiança inteiro: não há nada no meio, porque não há meio. O único link de saída é opcional e é seu para clicar: uma passagem para o SVG Color Changer quando você quiser reestilizar antes de salvar.