Baixar um SVG de um fundo CSS

Quando um SVG é pintado por background-image, ele não é um elemento em que você possa mirar. Não há o que arrastar nem onde clicar com o botão direito. O SVG Downloader lê o estilo computado, resolve a origem e salva o arquivo original.

Instalar a extensão Ler o passo a passo →

O problema

Por que um SVG de fundo CSS não pode ser salvo

Uma imagem de fundo não é conteúdo — é decoração presa à caixa de outro elemento. Quando alguém escreve background-image: url("chevron.svg") ou embute o vetor como URI data:, o navegador pinta mas nunca trata aquilo como imagem salvável. Passe o mouse por cima e o cursor está sobre uma <div>, não sobre o ícone. Clique com o botão direito e você recebe o menu do elemento de trás. Salvar imagem como… nunca aparece, porque para o navegador não há imagem ali para salvar.

Chegar até ela na mão é pior do que parece. Você abre o DevTools, acha o elemento, lê o background-image computado e então encara ou uma URL relativa que precisa resolver contra a página, ou uma string data:image/svg+xml codificada com cada sinal de menor e maior escapado. Transformar isso num arquivo limpo é um copiar e colar que você vai errar pelo menos uma vez.

O que o SVG Downloader faz no lugar

Abra o popup e ele inspeciona os estilos computados dos elementos da página, não só dos que você vê. Onde quer que um background-image resolva para um SVG — um arquivo .svg linkado ou um data URI embutido — ele puxa a origem e dá uma prévia isolada ao lado de todos os outros SVGs encontrados. Navegue com Anterior/Próximo, escolha o que quer, e ele grava o vetor original num arquivo .svg.

URLs resolvidas por você. Um url(../img/logo.svg) relativo vira um endereço real e é buscado; o arquivo que chega é o arquivo para o qual a folha de estilo apontava, não um chute.
Data URIs decodificados direito. Um fundo data:image/svg+xml embutido — codificado em URL ou Base64 — é desempacotado de volta em markup SVG puro, então o que você salva abre como texto legível e editável.
O namespace consertado. Se o SVG extraído estiver sem a declaração xmlns="http://www.w3.org/2000/svg", o SVG Downloader a adiciona, então o arquivo abre no Figma, no Illustrator e em todo navegador sem remendo.

O que você recebe de volta

Formato: Um arquivo .svg limpo e dentro do padrão — exatamente o vetor que o CSS referenciava, decodificado e com namespace consertado.
Origens lidas: Tanto links url() quanto URIs data: embutidos, sejam codificados em URL ou Base64. Pulado em páginas com mais de 10.000 elementos.
Onde ele roda: Inteiramente no seu navegador. Os estilos computados são lidos localmente — sem upload, sem servidor, sem conta.
Também dá conta de: SVG inline, referências de sprite e ZIP da página inteira.

Vale saber

Perguntas sobre SVG em fundo CSS

Por que Salvar imagem como… some num fundo CSS?

Porque uma imagem de fundo não é um elemento do documento. O navegador só oferece Salvar imagem como… para nós de imagem de verdade — <img>, <object>, canvas. Um fundo CSS é pintado sobre a caixa de outro elemento, então seu clique direito cai naquele elemento e não há entrada de imagem para escolher.

Ele dá conta de um fundo em URI data:, não só de um arquivo linkado?

Sim. Fundos data:image/svg+xml embutidos são comuns e normalmente vêm codificados em URL com cada sinal escapado — difíceis de decodificar na mão. O SVG Downloader desempacota data URIs codificados em URL e em Base64 em markup SVG limpo antes de salvar.

Ele checa todo elemento, por maior que a página seja?

Ler estilos computados significa tocar os elementos um a um, o que fica caro rápido. Por isso existe um teto: se uma página tiver mais de 10.000 elementos, a varredura de fundos é pulada por completo e você verá só as outras três origens. O popup avisa, em vez de devolver uma lista curta em silêncio. Abaixo desse limite, todo elemento é checado, visível ou não.

O fundo usa um sprite ou mostra só parte de um SVG maior. O que baixa?

O que baixa é a origem que a folha de estilo referencia — o arquivo SVG inteiro, mesmo que o CSS o recorte com background-position e background-size para mostrar uma região. Se os ícones moram num sprite <use> de verdade, o extrator de sprites é a ferramenta que os separa.

Salve o fundo que a página não entrega

Grátis, privado, e lê o SVG escondido na sua folha de estilo.

Instalar a extensão Todos os recursos →