Como pegar um SVG num clique com o botão direito

Assista — 15 segundos

Um item de menu, um arquivo

tutorial · botão direito

Olhe o menu na gravação: não há Salvar imagem como… ali, porque um <svg> inline não é uma imagem. A linha da extensão é a única coisa ali capaz de salvar o vetor.

O que a gravação mostra

1. Você quer um ícone, e quer agora
2. Clique com o botão direito e escolha Salvar isto como SVG
3. Sem popup, sem varredura — um item de menu, um arquivo
4. O mesmo sanitizador roda, então o arquivo continua abrindo em qualquer lugar

Quando usar cada um

Botão direito para um, popup para decidir

As duas rotas terminam no mesmo arquivo, produzido pelo mesmo código. Elas diferem no que você precisa saber antes.

• Botão direito quando você já sabe exatamente qual gráfico quer e está olhando direto para ele. Você aponta; não há lista, nem paginação, nem ambiguidade. É a rota mais rápida possível para um arquivo avulso.
• O popup quando você ainda não sabe — quando quer ver a prévia isolada, comparar dois ícones parecidos, escolher um nome de arquivo, converter para PNG, copiar o markup ou levar a página inteira de uma vez. É a rota com opções.

Vale notar: o botão direito não precisa de varredura nenhuma. Nada percorre a página, nada é contado, e não há lista a montar — a extensão recebe o elemento que você clicou e trabalha só naquilo.

Pegando um

São dois passos e um deles é “clicar com o botão direito”.

1. Clique com o botão direito no gráfico. Aponte para o ícone, logo ou ilustração que você quer e clique com o botão direito. Funciona em vetores inline, em imagens e em gráficos pintados como fundos CSS.
2. Escolha “Salvar isto como SVG”. O item da extensão fica no próprio grupo, abaixo das entradas do Chrome. Escolhê-lo encontra o gráfico sob o cursor, resolve, sanitiza e salva — nenhum popup abre em momento algum.

É o mesmo arquivo, não uma versão atalho

O trabalho pesado acontece no mesmo lugar nos dois casos. O service worker por trás do item de menu não tem DOM próprio, então ele pede ao content script da página um arquivo pronto e sanitizado e entrega isso à maquinaria de downloads do navegador. É o caminho idêntico ao de um download pelo popup — o mesmo conserto de namespace, a mesma remoção de scripts e manipuladores de evento. Você não troca qualidade por velocidade.

Onde o item de menu não vai aparecer

Ele é registrado apenas para páginas web comuns — http e https. Você não vai vê-lo em páginas chrome://, na Chrome Web Store ou outras galerias de extensões, nem em PDFs e outros documentos não HTML. Os navegadores bloqueiam extensões nas próprias páginas de galeria de propósito, e extensão nenhuma contorna isso.

Se o ícone vem de um sprite

Referências <use> de sprite que apontam para dentro do mesmo documento resolvem na hora. Uma que aponta para um arquivo de sprite separado que a página não carregou precisa ser buscada antes, então pode demorar um instante a mais — ou, se aquele arquivo estiver inacessível, falhar. Nesse caso abra o popup e pegue pela varredura, que tem mais margem para resolver.

Passos

Dois. Clique com o botão direito e escolha o item. Sem popup, sem varredura.

Qualidade

Idêntica a um download pelo popup — mesmo sanitizador, mesmo conserto de namespace.

Funciona em

Vetores inline, imagens e gráficos de fundo CSS em qualquer página http(s).

Use o popup para

Pré-visualizar, renomear, converter para PNG, copiar, ou levar a página inteira de uma vez.

Vale saber

Perguntas frequentes