Baixe SVG inline de qualquer página

Um <svg> inline é desenhado direto no HTML, então não tem URL de imagem nem menu de botão direito. O SVG Downloader lê direto do DOM, conserta e entrega o arquivo original.

Instalar a extensão Ler o passo a passo →

O problema

Por que o navegador não salva SVG inline

A maioria dos ícones de um site moderno é SVG inline — o markup mora direto no HTML da página, não num arquivo separado. Ótimo para desempenho e estilo, e péssimo para salvar. Não há src para abrir em outra aba, não há entrada no menu do botão direito, e Salvar imagem como… aparece esmaecido ou simplesmente não aparece.

As gambiarras de sempre são ruins. Tirar print do ícone dá um raster borrado preso a um tamanho. Garimpar no DevTools significa caçar o nó <svg> certo, copiar o HTML externo, colar num arquivo e então descobrir que ele não abre porque falta o namespace. Você queria um arquivo de 400 bytes; ganhou uma tarefa.

O que o SVG Downloader faz no lugar

Abra o popup em qualquer página e ele percorre o DOM atrás de todo elemento <svg>, inclusive os aninhados no fundo de componentes, markup vizinho ao shadow DOM e conjuntos de ícones repetidos. Cada um ganha uma prévia isolada para você ver exatamente o que vai salvar, longe da página cheia. Escolha um, e ele grava o markup original num arquivo .svg de verdade.

Os traçados reais, não uma re-renderização. O que se salva é o SVG que estava na página — seus atributos d exatos, seu viewBox, sua própria precisão. Continua nítido a 16 px ou a 1600 px e continua sendo texto editável que você pode recolorir.
Um xmlns consertado. O SVG inline geralmente omite o namespace xmlns="http://www.w3.org/2000/svg" porque o navegador fornece. Copiado para um arquivo puro, esse SVG não abre. O SVG Downloader devolve isso para o arquivo funcionar no Figma, no Illustrator, no VS Code e em todo navegador.
O nome do arquivo é seu. Digite um nome no popup antes de salvar e o arquivo sai exatamente assim — star.svg, não download (3).svg. Deixe em branco e ele cai num svg-1.svg numerado, com o prefixo que você definiu nas opções da extensão.

O que você recebe de volta

Formato: Um arquivo .svg limpo e dentro do padrão — o markup vetorial original, com namespace consertado.
Fidelidade: Todo traçado e todo viewBox preservados. Independente de resolução e ainda recolorível.
Onde ele roda: Inteiramente no seu navegador. O SVG inline nunca sai da página — sem upload e sem servidor.
Também dá conta de: Fundos CSS, referências de sprite e ZIP da página inteira.

Vale saber

Perguntas sobre SVG inline

Por que não consigo salvar um SVG inline com o botão direito?

Porque um <svg> inline faz parte do documento, não é uma imagem com endereço próprio. O navegador só oferece Salvar imagem como… para o que trata como imagem — <img>, fundos CSS, canvas. SVG inline não tem URL para salvar, então a opção nunca aparece.

O SVG que copiei do DevTools não abre. Por quê?

Quase sempre é namespace faltando. O SVG inline depende do parser de HTML para saber que é SVG; um arquivo isolado precisa de um xmlns="http://www.w3.org/2000/svg" explícito. O SVG Downloader adiciona automaticamente, então seus arquivos abrem em qualquer lugar sem edição.

O ícone baixado mantém a cor?

Ele mantém a cor que estiver gravada no markup. Muitos ícones inline herdam a cor do CSS (currentColor), então o arquivo salvo pode sair preto. Se você quiser travar uma cor específica antes, use o atalho para o SVG Color Changer e depois salve.

Pegue aquele ícone em dois cliques

Grátis, privado, e lê o SVG inline que o navegador finge não existir.

Instalar a extensão Todos os recursos →