Tutorial — a armadilha do link
Como baixar um SVG de um link
Você clica com o botão direito no link, escolhe Salvar link como… e recebe um arquivo HTML de 40 KB. É o jeito mais comum de terminar com a coisa errada, e tem uma explicação simples.
Assista — 19 segundos
Conseguindo aquilo para o que o link realmente aponta
A gravação de propósito nunca usa Salvar link como… — porque num link desses esse item de menu é a armadilha, não a ferramenta.
O que a gravação mostra
- Um link que aponta para um vetor, não para uma página
- “Salvar link como…” te entregaria o invólucro HTML
- Abra o popup na página em que o link está
- O vetor linkado está na lista
- Dê um nome que signifique algo
- Baixar o atual — o arquivo atrás do link
Por que o óbvio falha
Salvar link como… salva a resposta, seja ela qual for
Seu navegador não faz ideia do que há do outro lado de um link até perguntar. Salvar link como… não inspeciona nada — ele busca a URL e grava em disco o que voltar, com o nome que o link sugerir.
Então, quando o link vai para uma página de visualização — uma página de detalhe de ícone, uma página de “download” com prévia e botão — o que volta é HTML. Você recebe um arquivo chamado star.svg que na verdade é uma página web, e por isso ele abre como uma parede de texto ou se recusa a abrir. A extensão nunca esteve errada; o link é que nunca apontou para um vetor.
Três formatos de link causam quase tudo isso:
- Um link para uma página de visualização. O vetor está no destino, não no link. Siga ele e depois escaneie aquela página.
- Um link que dispara um download por script. O
hrefé#oujavascript:, e um manipulador de clique monta o arquivo. Não há nada naquele endereço para salvar. - Um link envolvendo um ícone inline. A coisa clicável é o gráfico, desenhado como markup. Clicar com o botão direito te dá o menu da página — nenhuma opção de imagem, porque o navegador não considera aquilo uma imagem.
O método que funciona nos três
Pare de tentar salvar o link. Salve o vetor a partir da página que o renderiza — a resposta é a mesma, seja qual for dos três formatos que você tem à frente.
- Siga o link se ele leva a algum lugar. Se abre uma página de visualização ou de detalhe, deixe. Aquele destino é onde o vetor realmente mora, e é o que você quer escanear.
- Abra o popup na página em que você cair. Clique no botão da barra de ferramentas. A varredura não liga se você chegou por link, por busca ou digitando o endereço.
- Ache na lista. Percorra com Ant. e Próx.. Numa página de detalhe o vetor que você quer costuma aparecer grande e óbvio na prévia.
- Nomeie e baixe. Digite um nome de arquivo e aperte Baixar o atual. O que você recebe é um arquivo vetorial de verdade, não um documento HTML vestindo extensão .svg.
Como saber o que você baixou de fato
Se você já tem um arquivo suspeito, isso leva dez segundos: abra num editor de texto qualquer. Um SVG de verdade começa com <svg ou uma declaração XML e normalmente tem alguns kilobytes. Uma página HTML disfarçada começa com <!doctype html> e costuma ser bem maior. Se for a segunda, o link ia para uma página, e escanear aquela página vai te dar a coisa certa.
Quando o link é o ícone
Este é o terceiro formato, e o mais comum em sites modernos — um ícone clicável que é markup <svg> inline. Não há genuinamente nada para salvar: sem endereço, sem arquivo, sem imagem que o navegador reconheça. Ou você escaneia a página, ou clica com o botão direito e pega Salvar isto como SVG no menu, o que é coberto pelo tutorial de captura rápida.
- A armadilha
- Salvar link como… grava o que a URL devolver — muitas vezes HTML.
- A checagem
- Abra o arquivo num editor de texto.
<!doctype html>significa que você pegou uma página. - O conserto
- Escaneie a página que renderiza o vetor, em vez de salvar o link.
- Veja também
- Captura pelo botão direito · De uma URL
Vale saber
Perguntas frequentes
Por que Salvar link como… me deu um arquivo HTML?
Porque o link apontava para uma página web e não para um arquivo vetorial. Salvar link como… busca a URL e grava o que voltar, sem checar o que é — então um link para uma página de visualização produz uma página, salva com o nome .svg que o link sugeria.
O href do link é só # — cadê o arquivo?
Não existe. Um manipulador de clique monta o arquivo em JavaScript quando você clica. Não há nada naquele endereço para salvar, então escanear a página atrás do vetor renderizado é a única rota.
Como checo se meu arquivo é um SVG de verdade?
Abra num editor de texto. Um SVG de verdade começa com
O link é um ícone e o botão direito não oferece nada útil.
Esse ícone é markup SVG inline, que o navegador não trata como imagem, então nenhuma opção de imagem aparece. Ou você abre o popup e escaneia a página, ou usa o item “Salvar isto como SVG” que a própria extensão coloca no menu do botão direito.
Pare de salvar páginas chamadas .svg
Tire o vetor da página — funciona nos três tipos de link.