Guia — origem escondida
Extraia um SVG de um fundo CSS
Um SVG de background-image é pintado sobre um elemento direto da folha de estilo. Não há imagem para clicar com o botão direito nem arquivo parado na página. O SVG Downloader lê os estilos computados, resolve a referência e salva o vetor original.
O problema
Por que SVGs de fundo resistem ao botão direito
Um monte de marcas decorativas, padrões e ícones é aplicado como background-image do CSS em vez de colocado como <img>. É um jeito comum e arrumado de estilizar um botão ou um herói. Também significa que o SVG é desenhado pela folha de estilo no fundo de um elemento, e o navegador não trata esse elemento como imagem. Clique com o botão direito e não há Salvar imagem como… — não há nada que o menu reconheça como salvável.
Pior: o SVG pode estar escondido em duas formas diferentes. Pode ser um URI data: enfiado direto no CSS, codificado em URL e ilegível. Ou pode ser um url() apontando para um arquivo .svg separado em algum lugar do servidor. Perseguir qualquer um deles pelo DevTools significa ler estilos computados na mão, decodificar ou buscar, e então consertar um arquivo que não abre.
Como o SVG Downloader lê isso
A extensão faz essa corrida por você. Ela percorre os estilos computados da página, identifica declarações background-image que carregam um SVG e resolve a forma que encontrar — decodificando um URI data: ali mesmo, ou lendo o arquivo para o qual um url() aponta. O que ela salva é o markup original, não uma foto dele.
Passo a passo: do fundo ao arquivo
- Instale e abra o popup. Adicione a extensão gratuita ao Chrome, Edge ou Brave, abra a página e clique no ícone da barra. Tudo acontece localmente.
- Deixe ele ler os estilos computados. O SVG Downloader inspeciona os estilos da página e reúne os SVGs de fundo ao lado das origens inline,
<img>e de sprite do mesmo documento que ele também detecta. Em páginas com mais de 10.000 elementos essa varredura é pulada por velocidade, e o popup avisa. - Veja a prévia e escolha. Cada SVG de fundo aparece numa prévia isolada, longe da página cheia. Use Anterior/Próximo para chegar no que você quer.
- Baixe o vetor original. Clique em Baixar o SVG atual. Você recebe um arquivo
.svgde verdade com oviewBoxe os traçados intactos e oxmlnsconsertado, pronto para o Figma, o Illustrator ou o VS Code.
Baixar o SVG atual.O que você recebe de volta
- As duas formas
- URIs data: embutidos e referências
url()a arquivos.svgsão resolvidos do mesmo jeito. - Markup original
- O vetor que estilizava o elemento — traçados e
viewBoxpreservados, namespace consertado. Não é um print. - No dispositivo
- Lê os estilos computados no seu navegador. O SVG nunca sai da página; nada é enviado.
- Também dá conta de
- SVG inline, referências de sprite e ZIP da página inteira.
Vale saber
Perguntas sobre SVGs de fundo CSS
Por que não consigo salvar um SVG de fundo CSS pelo botão direito?
Porque um fundo CSS é pintado pela folha de estilo, não colocado como elemento de imagem. O navegador só oferece Salvar imagem como… para o que trata como imagem — um <img>, um canvas. Um background-image mora no estilo computado de um elemento, então não há nada para salvar no menu do botão direito.
Ele dá conta tanto de URIs data: quanto de referências url()?
Sim. O SVG Downloader resolve um background-image embutido com URI data: decodificando, e um url() apontando para um arquivo .svg lendo aquele arquivo. De qualquer jeito você recebe o vetor original de volta.
O arquivo salvo é o SVG real ou um print?
O SVG real. A extensão salva o markup original — com traçados e viewBox intactos e o namespace consertado — não um raster renderizado. Continua nítido em qualquer tamanho e continua editável.
Tire a marca da folha de estilo
Grátis, privado, e lê o SVG de fundo que o navegador não entrega.