Guia — o método universal
Como baixar um SVG de qualquer site
Uma página moderna esconde seus vetores onde o Salvar imagem como… não alcança. Este é o método que pega todos eles — o markup original, nítido e editável, não um print.
Os quatro esconderijos
Onde os SVGs realmente moram numa página
Antes do método, ajuda saber por que a abordagem óbvia falha. Um SVG numa página web quase nunca é um simples imagem.svg que você abre em outra aba. Normalmente é uma de quatro coisas, e cada uma derrota o menu de salvar do navegador do seu jeito.
<svg>inline. O markup é desenhado direto no HTML. Não hásrcnem URL de imagem, então o menu do botão direito não oferece nada. É assim que a maioria dos sistemas de ícones é publicada hoje. Veja SVG inline.background-imagedo CSS. O vetor é definido numa folha de estilo — às vezes como arquivo, muitas vezes como URIdata:embutido. O navegador trata como decoração, não como imagem salvável. Veja SVG em fundo CSS.- Referências
<use>de sprite. Um sprite escondido guarda muitos ícones; cada lugar em que eles aparecem é só um ponteiro<use>. Salvar o ponteiro não dá nada aproveitável. Veja extrator de sprites. - Origens
<img>e<object>. O caso mais amigável — mas mesmo aqui a origem pode ser um URIdata:que o menu de salvar estraga, ou uma URL de outra origem que baixa com o nome errado.
O método universal — cinco passos
O SVG Downloader ignora a distinção entre esses quatro casos. Ele lê a página viva, resolve cada origem até markup SVG de verdade e entrega um arquivo. A rodada inteira leva uns dois minutos na primeira vez e alguns segundos depois.
- Instale a extensão. Adicione o SVG Downloader ao Chrome, Edge ou Brave (Chrome 88+). É grátis, licença MIT, e nada nele liga para casa.
- Abra o popup na página. Vá até a página com o SVG que você quer e clique no ícone da barra de ferramentas para abrir o popup.
- Deixe ele escanear. A extensão percorre o DOM e coleta os vetores que encontra — elementos inline, fundos CSS, referências de sprite do mesmo documento e origens de imagem, incluindo URIs
data:. - Veja a prévia e escolha. Cada SVG aparece numa prévia isolada para você ver limpo, longe da página cheia. Use Anterior e Próximo para percorrer, e digite um nome de arquivo se importar como ele vai se chamar.
- Baixe. Clique em Baixar o SVG atual para o que está na tela — com o nome que você digitou, ou um
svg-1.svgnumerado se deixou o campo em branco — ou em Baixar tudo em ZIP para levar o conjunto inteiro de uma vez, sem duplicatas e numerado, com o que não pôde ser resolvido nomeado na linha de status do popup.
Por que não usar o botão direito?
O Salvar imagem como… do botão direito só aparece para o que o navegador classifica como imagem com um endereço que ele consegue buscar: um <img> com URL, um canvas, às vezes um fundo CSS. Três das quatro origens acima não são isso. SVG inline não tem URL. Um <use> de sprite resolve para um fragmento de documento. Um fundo com URI data: é uma string numa folha de estilo. E mesmo quando o menu aparece, muitas vezes ele salva um raster re-renderizado ou um arquivo chamado download.svg com o namespace quebrado. Ler o DOM contorna tudo isso e devolve o vetor de verdade.
Duas coisas que confundem
Dois resultados surpreendem quem usa pela primeira vez, e os dois são comportamento esperado, não bugs.
- O arquivo não abria antes — agora abre. O SVG inline costuma omitir o namespace
xmlns="http://www.w3.org/2000/svg"porque o parser de HTML fornece. Copiado para um arquivo puro, esse SVG não abre. O SVG Downloader conserta oxmlnsfaltante na saída, então seus arquivos abrem no Figma, no Illustrator, no VS Code e em todo navegador. - O ícone parece preto. Muitos ícones herdam a cor do CSS via
currentColor, então o arquivo isolado não tem cor própria e renderiza preto. Esse é o markup verdadeiro. Se você precisa travar uma cor específica, use o atalho opcional para o SVG Color Changer, recolora e depois salve.
- Funciona em
- Chrome 88+, Edge e Brave. Qualquer página que você consiga abrir — origens inline, CSS, sprite e imagem.
- Saída
- O markup vetorial original, namespace consertado, independente de resolução e recolorível.
- Privacidade
- 100% no dispositivo. Sem servidor, sem conta, sem upload, sem analytics.
- Próximo
- Vai atrás de um conjunto inteiro? Veja extrair ícones SVG e baixar tudo em ZIP.
Vale saber
Perguntas frequentes
Por que não consigo salvar um SVG com o botão direito?
A maioria dos SVGs de uma página moderna é markup inline, fundo CSS ou referência de sprite — nada que o navegador trate como imagem salvável. Não há URL por trás, então o Salvar imagem como… nunca aparece ou fica esmaecido. O SVG Downloader os lê do DOM em vez disso.
Funciona em todo site?
Funciona em qualquer página que você consiga abrir no Chrome 88 ou mais novo, Edge ou Brave. Ele detecta SVG inline, origens <img> e <object> incluindo URIs data:, SVGs em background-image do CSS e referências <use> a sprites do mesmo documento. Ele não alcança conteúdo atrás de um login que você não tem nem servido por um domínio que a página nunca carrega.
Por que meu ícone baixado está preto em vez de colorido?
Muitos ícones inline herdam a cor do CSS usando currentColor, então o arquivo isolado não tem cor gravada e renderiza preto. Esse é o markup de origem verdadeiro. Para travar uma cor, passe o arquivo ao SVG Color Changer, recolora e depois salve.
O SVG que salvei não abre — o que houve?
Um SVG isolado precisa de um namespace xmlns explícito que o markup inline normalmente omite. O SVG Downloader conserta o xmlns faltante automaticamente, então seus arquivos abrem no Figma, no Illustrator, no VS Code e em todo navegador sem edição.
O SVG é enviado para algum servidor?
Não. Tudo roda no dispositivo, dentro do seu navegador. Não há servidor, conta, upload nem analytics — o vetor nunca sai da sua máquina.
É mesmo grátis?
Sim. O SVG Downloader é gratuito e com licença MIT, atualmente na versão 1.3, escrito por Flozad. Você pode ler e compilar o código-fonte por conta própria.
Salve o próximo vetor em dois cliques
Grátis, privado, e lê os SVGs que o navegador finge não existirem.