Como baixar arquivos SVG de um site

Se você nunca salvou um vetor de uma página web, comece aqui. Dois minutos, cinco passos, e a explicação da única coisa que confunde todo mundo na primeira vez.

Instalar a extensão Ir para os passos ↓

Assista — 19 segundos

A coisa toda, de uma passada

tutorial · básico

Abrir, escanear, prévia, nomear, baixar. Nada foi acelerado — é esse o tempo que leva mesmo.

Tudo depois deste ponto são os mesmos cinco passos por escrito, mais os motivos por trás deles. Se você só queria a gravação, já tem o que veio buscar.

O que a gravação mostra

Um SVG é texto vetorial, não uma foto de um
Passo um — abra o popup na página
Passo dois — deixe escanear. Ele lê a página, não a rede.
Passo três — prévia e escolha
Passo quatro — nomeie o arquivo
Passo cinco — baixe. É esse o trabalho inteiro.

Primeiro, o que ninguém explica

Um SVG não é uma imagem — são instruções para desenhar uma

Um PNG é uma grade de pontos coloridos. Um SVG é um documento de texto curto que diz trace uma linha daqui até aqui, depois curve até ali. Essa diferença é a razão inteira de isso valer a pena: porque o arquivo descreve formas em vez de pixels, ele continua perfeitamente nítido seja como favicon de 16 px ou impresso com dois metros de largura, e você pode abrir num editor de texto e mudar a cor editando uma palavra.

É também a razão de o seu navegador ser pouco prestativo na hora de salvá-los. O navegador só oferece Salvar imagem como… para o que ele classifica como imagem com um endereço buscável. A maioria dos SVGs de uma página moderna não tem endereço nenhum — as instruções de desenho estão escritas direto no HTML da página. Não há nada para o menu de salvar apontar, então o item simplesmente não aparece.

Ler o DOM da página contorna tudo isso. A extensão pergunta à página o que ela realmente renderizou, recebe o markup de verdade de volta e grava num arquivo.

Os cinco passos

A primeira rodada leva uns dois minutos porque você precisa instalar algo. Toda rodada depois disso leva uns cinco segundos.

Instale a extensão. Adicione o SVG Downloader ao Chrome, Edge ou Brave — qualquer coisa no Chrome 88 ou mais novo. É grátis e com licença MIT, e pede apenas activeTab, o que significa que ela consegue ver uma página quando você clica no botão dela e em nenhum outro momento.
Abra o popup na página. Vá até a página que tem o vetor que você quer e clique no botão da barra de ferramentas. Se não estiver vendo, clique no ícone da peça de quebra-cabeça e fixe — você vai querer ele ali.
Deixe escanear. Ele percorre a página e coleta todo vetor que consegue resolver: elementos inline, imagens de fundo CSS, referências de sprite do mesmo documento, e origens <img> ou <object> incluindo URIs data:. O contador diz quantos ele achou.
Prévia e escolha. Cada um ganha uma prévia isolada, longe da página cheia, para você confirmar que pegou a coisa certa. Ant. e Próx. percorrem a lista, e o paginador mostra onde você está.
Nomeie e baixe. Digite um nome de arquivo se importar como ele vai se chamar — deixe em branco e você recebe um svg-1.svg numerado. Então aperte Baixar o atual. O arquivo cai na sua pasta de downloads como qualquer outro.

Duas surpresas, ambas normais

Quase todo mundo esbarra numa delas no primeiro arquivo, e nenhuma é defeito.

O ícone está preto. A maioria dos sistemas de ícones colore pelo CSS usando currentColor, o que significa que a cor mora na folha de estilo, não na forma. Tirado sozinho, o arquivo não tem cor própria e renderiza preto. Esse é o markup de origem verdadeiro. Para fixar uma cor no arquivo, use o atalho para o SVG Color Changer, recolora e salve.
Ele abre agora, quando copiar e colar nunca funcionou. O SVG inline costuma omitir o namespace xmlns="http://www.w3.org/2000/svg", porque o parser de HTML fornece de graça. Copie esse markup na mão para um arquivo .svg puro e nada vai abrir. O SVG Downloader conserta o namespace faltante na saída, e é por isso que os arquivos dele abrem no Figma, Illustrator, Inkscape, VS Code e em todo navegador.

Abrindo o arquivo depois de ter ele

Dar dois cliques num SVG normalmente abre no navegador, que renderiza mas não deixa editar. Para trabalhar de verdade: arraste para o Figma e ele chega como camadas vetoriais editáveis; abra no Illustrator ou no Inkscape para ferramentas de desenho completas; ou abra em qualquer editor de texto para ver — e mudar — o markup diretamente. Se você precisa de um PNG, o popup converte antes de salvar.

Funciona em: Chrome 88+, Edge e Brave. Qualquer página que você consiga abrir neles.
Você recebe: O markup vetorial original, com namespace consertado — não um print.
Privacidade: 100% no dispositivo. Sem servidor, sem conta, sem upload, sem analytics.
Próximo: Precisa do conjunto todo? Extraia todo SVG. Só quer o código? Copie.

Vale saber

Perguntas frequentes

O que é um arquivo SVG, exatamente?

Um documento de texto puro descrevendo formas — linhas, curvas, preenchimentos — em vez de pixels. Como ele guarda instruções em vez de uma grade de pontos, renderiza perfeitamente nítido em qualquer tamanho, e você pode abrir num editor de texto e ler.

Por que não há “Salvar imagem como…” no ícone que eu quero?

Porque, para o navegador, aquilo não é uma imagem. Markup SVG inline, imagens de fundo CSS e referências de sprite não têm endereço buscável por trás, então o navegador não tem nada a oferecer para salvar. Ler a página em vez disso é o jeito de contornar.

Preciso pagar alguma coisa?

Não. O SVG Downloader é gratuito e com licença MIT, atualmente na versão 1.3. Não há plano pago, teste, marca d'água nem conta.

Meu arquivo é enviado para algum lugar?

Não. Tudo roda no dispositivo, dentro do seu navegador. Não há servidor, upload nem analytics — o vetor nunca sai da sua máquina.

Como abro um SVG depois de baixar?

Arraste para o Figma para camadas editáveis, abra no Illustrator ou no Inkscape para ferramentas de desenho completas, ou abra em qualquer editor de texto para ler e editar o markup. Dois cliques normalmente abrem no navegador, que renderiza mas não deixa editar.

Salve seu primeiro vetor em cerca de um minuto

Grátis, privado, e lê os SVGs que o navegador finge não existirem.

Instalar a extensão Todos os 15 tutoriais →