O Capturador de SVG descobre todos os SVGs em uma página da web — elementos SVG inline, referências a arquivos .svg externos, sprites SVG (padrões use/symbol) e data URIs SVG. Visualize cada SVG em diferentes tamanhos, verifique a transparência contra fundos claros e escuros, copie a marcação SVG bruta ou baixe arquivos SVG otimizados.
Os SVGs estão em todos os lugares nos sites modernos — logotipos, ícones, ilustrações, gráficos decorativos, visualizações de dados — mas extraí-los é surpreendentemente difícil. SVGs inline são incorporados diretamente no HTML e não podem ser "salvos como imagem". Sprites SVG usam referências use/symbol que não resolvem para arquivos independentes. SVGs externos carregados via img src ou CSS não podem ser inspecionados sem abrir a aba de rede. O Capturador de SVG lida com todas essas fontes automaticamente. Ele verifica o DOM em busca de SVGs inline, resolve referências de sprite para suas definições completas de símbolos, encontra URLs de SVG externos e decodifica data URIs SVG. Cada SVG é exibido em uma galeria com uma visualização ao vivo, e você pode alternar entre fundos claros, escuros e xadrez para verificar a transparência. Copie o código SVG bruto para inclusão em seus componentes ou baixe o SVG como um arquivo pronto para uso em seu projeto.
Encontra SVGs de todas as fontes na página: elementos <svg> inline no DOM, arquivos .svg externos carregados via tags img ou object, SVGs de background-image CSS, referências de sprite use/symbol (resolvidas para SVGs completos) e SVGs codificados em data URI base64.
Visualize cada SVG em diferentes tamanhos (original, 2x, 4x) contra três fundos: escuro, claro (branco) e xadrez. O xadrez revela áreas de transparência que podem ser invisíveis em um fundo de cor única.
Clique em "Copiar SVG" para obter a marcação SVG completa — viewBox, caminhos (paths), grupos e todos os atributos incluídos. Cole diretamente em seu HTML, JSX, template Vue ou arquivo de sprite SVG. O código é limpo e devidamente formatado.
Baixe SVGs individuais como arquivos .svg com declarações XML e codificação adequadas. Os arquivos são nomeados com base no ID do SVG, nome da classe ou aria-label — não nomes genéricos como "download.svg".
Cada SVG mostra seu tipo de origem (inline, externo, sprite, data URI), dimensões da viewBox, tamanho do arquivo e onde no DOM foi encontrado. Útil para entender como o site implementa sua estratégia de SVG.
Quando uma página usa sprites SVG com referências use href="#nome-do-icone", o Capturador de SVG resolve cada referência para a definição completa do símbolo — fornecendo o SVG independente completo, não apenas o elemento use.
Visite um site com um ótimo sistema de ícones e pegue todo o conjunto de ícones SVG. O Capturador de SVG encontra ícones em sprites, SVGs inline e arquivos externos — coletando a biblioteca de ícones completa, independentemente de como foi implementada.
Precisa do logotipo SVG de uma empresa para uma página de parceria, estudo de caso ou kit de imprensa? A maioria dos logotipos em sites modernos são SVGs. O Capturador de SVG os encontra e extrai em sua qualidade vetorial original — infinitamente escalável.
Estudando como sites de produção implementam ilustrações SVG complexas, animações ou visualizações de dados. Copie o código SVG bruto para inspecionar como os caminhos são estruturados, como a viewBox é configurada e como as animações CSS são aplicadas.
Mudando para um novo sistema de ícones? Pegue os SVGs do site de referência, coloque-os em seu sprite SVG ou sistema de ícones baseado em componentes. Código SVG limpo com valores de viewBox adequados prontos para integração.
Revise como os SVGs são implementados em seu site — eles são inline (bons para manipulação), externos (bons para cache) ou sprites (bons para eficiência)? O Capturador de SVG mostra o tipo de origem para cada SVG, ajudando você a otimizar sua estratégia de SVG.
Abra o dock flutuante do DevSuite Pro e clique no ícone Capturador de SVG. A ferramenta verifica a página em busca de todas as fontes de SVG e constrói a galeria.
Uma grade de miniaturas de SVG aparece mostrando todos os SVGs encontrados na página. Cada entrada mostra o nome do SVG, o tipo de origem e as dimensões da viewBox.
Clique em qualquer SVG para abrir uma visualização maior. Alterne entre fundos escuros, claros e xadrez. Redimensione a visualização para ver como o SVG escala.
Clique em "Copiar SVG" para obter a marcação bruta para inclusão em seu código, ou em "Baixar" para salvá-lo como um arquivo .svg independente em seu dispositivo.
Navegue de volta para a galeria para explorar mais SVGs. O selo de contagem mostra o número total encontrado na página.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
