Como salvar um SVG quando o botão direito não deixa

Assista — 19 segundos

Salvando o que o menu não oferece

tutorial · sem botão direito

A gravação abre numa página em que nenhum ícone oferece opção de salvar. Não é uma página incomum — é assim que a maioria dos sistemas de ícones é publicada.

O que a gravação mostra

1. Salvar imagem como… sumiu em todo ícone daqui
2. A extensão lê o DOM em vez do menu
3. Inline, fundo CSS, sprite, img — todos encontrados
4. Escolha o que você realmente quer
5. Nomeie
6. Salvo — um vetor de verdade, não um print

O motivo de verdade

O navegador só oferece salvar o que ele consegue buscar

Salvar imagem como… aparece quando o navegador tem uma imagem com um endereço que ele pode requisitar. Essa categoria é mais estreita do que parece, e os sistemas de ícones modernos ficam quase inteiramente fora dela. Há quatro lugares onde um SVG se esconde numa página, e só um deles se comporta bem.

• <svg> inline. O markup está escrito direto no HTML. Sem src, sem URL, nada para buscar — então o menu não oferece nada. É assim que a grande maioria dos ícones é publicada hoje. Como é lido →
• background-image do CSS. O vetor é definido numa folha de estilo, muitas vezes como URI data: embutido. O navegador arquiva como decoração em vez de conteúdo. Como é lido →
• Referências <use> de sprite. Um sprite escondido guarda todo ícone; cada lugar em que um ícone aparece é só um ponteiro para ele. Salvar o ponteiro te dá um arquivo vazio. Como é lido →
• Origens <img> e <object>. O caso amigável — e mesmo aqui a origem pode ser um URI data: que o diálogo de salvar estraga, ou uma URL de outra origem que salva com um nome sem sentido.

Então três das quatro não podem ser salvas desse jeito nem em princípio. Ler o DOM funciona nas quatro, porque a essa altura cada uma delas já foi resolvida em markup real pelo próprio navegador.

Salvando mesmo assim

Você não precisa saber qual das quatro está olhando. É esse o ponto.

1. Deixe o menu do botão direito em paz. Se Salvar imagem como… sumiu ou está esmaecido, nenhuma quantidade de tentativas vai invocá-lo. A ausência é informação, não defeito.
2. Abra o popup. Clique no botão da barra de ferramentas na página. A varredura resolve as quatro origens em markup independente — inline, fundo CSS, referência de sprite e origem de imagem igualmente.
3. Veja a prévia para identificar o certo. A prévia isolada é o jeito mais rápido de distinguir dois ícones parecidos, principalmente num conjunto em que a página os mostra a 16 px.
4. Nomeie e salve. Digite um nome de arquivo e aperte Baixar o atual. O namespace é consertado na saída, então o arquivo abre no Figma, no Illustrator e em todo navegador.

Coisas que parecem solução mas não são

• Tirar um print. Isso converte um vetor independente de resolução numa grade fixa de pixels, para sempre. Ele vai borrar assim que alguém escalar, e não dá para recolorir. A comparação completa →
• Copiar markup do DevTools. Isso funciona, mas é trabalhoso, e o markup que você copia está sem o namespace xmlns, então o arquivo resultante não vai abrir até você adicionar na mão. Se você quer o markup em vez de um arquivo, Copiar código faz o mesmo trabalho com o namespace já consertado.
• Caçar o arquivo na aba Network. Ótimo para origens <img>. Inútil para as outras três, porque nenhuma requisição foi feita — o markup chegou dentro do documento HTML.

Por que falha

Três das quatro origens de SVG não têm endereço buscável.

O que funciona

Ler o DOM renderizado, onde as quatro já viraram markup real.

De bônus

O xmlns faltante é consertado, então o arquivo realmente abre.

Veja também

Uma rota mais rápida para um ícone · SVG inline

Vale saber

Perguntas frequentes