Como baixar um SVG de uma URL

Uma URL não é um arquivo. Às vezes ela aponta direto para um vetor, às vezes para uma página que desenha um, e os dois casos pedem tratamentos completamente diferentes — por isso ferramentas de “cole uma URL” funcionam metade das vezes.

Instalar a extensão Ir para os passos ↓

Assista — 22 segundos

Da barra de endereços ao arquivo salvo

tutorial · de uma url

A barra de endereços diz vectorly.io/icons — sem extensão de arquivo em lugar nenhum. O vetor sai do mesmo jeito.

Repare no que a barra de endereços diz na gravação. Não há .svg nela, e nem precisa: a varredura lê o que a página renderizou, não o que a URL promete.

O que a gravação mostra

Abra a URL que contém o vetor
Clique no botão da barra de ferramentas — ele lê a página ao vivo
A barra de endereços não tem .svg. E não precisa ter.
Percorra até o vetor que você veio buscar
Nomeie o arquivo antes de salvar
Baixar o atual — o markup de verdade, daquela URL
Salvo como star.svg. Nítido em qualquer tamanho.

A distinção que importa

Duas coisas completamente diferentes são chamadas de “URL de um SVG”

Antes de mais nada, descubra qual das duas você tem — o método certo é diferente para cada uma, e é aqui que a maioria das pessoas trava.

Uma URL direta para um arquivo vetorial, terminando em .svg, muitas vezes numa CDN. Abra numa aba e você vê o gráfico sobre um fundo branco vazio, sem mais nada. Essa o seu navegador consegue salvar sozinho — Ctrl/Cmd+S funciona bem, embora possa salvar com um nome pouco útil.
Uma URL para uma página que desenha vetores. Quase toda URL real é dessa. O endereço termina em /icons ou /precos ou em nada, e os gráficos que você quer são markup inline dentro do HTML que a página devolve. Não há arquivo em endereço nenhum para buscar, então não há nada para salvar diretamente.

Sites conversores de “cole uma URL” só dão conta do primeiro caso, e é por isso que tantas vezes voltam com um erro ou com o HTML da página renomeado para .svg. Eles buscam o endereço; não o renderizam.

Salvando a partir da URL de uma página

Este é o segundo caso — o comum. O truque é parar de tratar a URL como arquivo e deixar a página renderizar primeiro.

Abra a URL numa aba. Deixe a página terminar de carregar. Isso importa mais do que parece: ícones injetados por JavaScript depois do carregamento ainda são encontrados, porque a varredura lê o DOM como ele está quando você clica, não o HTML que o servidor mandou primeiro.
Clique no botão da barra de ferramentas. O popup abre contra a aba em que você está. Não há nada para colar nem para configurar.
Leia o contador. Ele informa quantos vetores aquela URL realmente renderiza. Esse número costuma ser maior do que as pessoas esperam, porque inclui o logo, a interface e os ícones do rodapé.
Percorra até o que você veio buscar. Use Ant. e Próx.. A prévia mostra cada um isolado, que é o jeito mais rápido de diferenciar dois ícones parecidos.
Nomeie e baixe. Digite um nome de arquivo e aperte Baixar o atual. Você recebe o markup original daquela URL, com o namespace xmlns consertado para o arquivo abrir em qualquer lugar.

Se a sua URL realmente termina em .svg

Então você tem o caso fácil, e tem opções. Abrir e apertar Ctrl/Cmd+S salva. A extensão também, e ainda deixa você nomear o arquivo direito e consertar o namespace se a origem estiver malformada — vale a pena para qualquer coisa que você vá versionar num repositório.

Uma ressalva sobre URLs diretas: muitos links de CDN servem o arquivo com Content-Type text/plain, e nesse caso o navegador te mostra o markup como texto em vez de renderizar. O arquivo está bem; o cabeçalho é que está errado. Salvar ainda te dá um SVG funcional.

URLs que a extensão não alcança

Ela roda em páginas que você consegue abrir, então o que você não consegue abrir ela também não lê. Na prática isso significa chrome:// e outras páginas internas do navegador, a Chrome Web Store e galerias de complementos (os navegadores bloqueiam extensões ali de propósito), páginas locais file:// a menos que você conceda acesso a arquivos, e qualquer coisa atrás de um login que você não tem. Mas se você estiver logado, ela funciona normalmente — e isso é algo que nenhuma ferramenta online consegue com uma URL colada.

Entrada: Qualquer URL de página que você consiga abrir — nenhuma extensão .svg exigida.
Dá conta de: Ícones renderizados por JavaScript, páginas com login e markup inline sem endereço nenhum por trás.
Saída: O vetor original, com namespace consertado, nomeado como você quiser.
Veja também: De um link · Por que extratores online perdem isso

Vale saber

Perguntas frequentes

Posso simplesmente colar uma URL num baixador de SVG online?

Só se a URL apontar direto para um arquivo .svg. Uma ferramenta online busca o endereço mas nunca renderiza a página, então todo vetor desenhado como markup inline — que é a maioria — é invisível para ela. Uma extensão roda dentro da página depois que ela renderizou, e por isso enxerga.

A URL não tem .svg. Isso é problema?

Não. A varredura lê o que a página renderizou, não o que o endereço prometia. Uma URL terminando em /icons ou /precos funciona exatamente igual a uma que termina em .svg.

Por que abrir a URL .svg me mostra código em vez de uma figura?

O servidor está mandando com content type text/plain em vez de image/svg+xml, então o navegador exibe em vez de renderizar. O arquivo em si está bem — salvá-lo te dá um SVG funcional.

Funciona numa página que eu precisei logar para ver?

Sim. Ela roda dentro do seu navegador na página que você já está vendo, então sua sessão vale normalmente. É a principal coisa que um serviço de “cole uma URL” não consegue fazer.

E uma URL que redireciona?

Siga ela na aba primeiro. A página em que você terminar é a página que será escaneada, o que quase sempre era o que você queria mesmo.

Aponte para uma URL e leve o vetor

Sem colar, sem upload, e funciona em páginas que exigem login.

Instalar a extensão Todos os 15 tutoriais →