Para baixar SVG, ícones, fontes e vídeos de um site, use a aba Rede do DevTools filtrada por tipo (Img, Font, Media), uma extensão como SVG Export para os SVGs inline e, quando quiser tudo de uma vez e organizado por pasta, uma captura completa. O que a lei permite: estudar e guardar; republicar, não.
Por que "botão direito, salvar imagem" não pega quase nada?
Porque a maior parte do que você vê num site moderno não é um arquivo de imagem solto na página. É um pedaço de código, uma referência dentro do CSS ou um fluxo de pedaços que o navegador monta em tempo real. O botão direito só enxerga o elemento img com um endereço simples.
Os números mostram a escala. Segundo o Web Almanac 2024, 99,9% das páginas pedem ao menos uma imagem, e no celular o JPEG responde por 32,4% delas, o PNG por 28,4%, o GIF por 16,8%, o WebP por 12% e o SVG por 6,4%; 6,7% das páginas móveis têm um elemento video, alta de 32% desde 2022 (HTTP Archive). Ou seja: uma em cada quinze imagens é SVG, e o SVG é justamente o formato que o botão direito costuma não oferecer.
Cada tipo se esconde de um jeito. O SVG inline é código HTML, não arquivo. O ícone em sprite é uma referência use a um símbolo definido em outro lugar. A imagem de fundo mora no CSS. A fonte é carregada por @font-face. O vídeo de fundo pode ser um MP4 simples ou um streaming em segmentos. A textura de um modelo 3D é um arquivo binário que o WebGL pede sem passar por nenhuma tag.
| O que você quer | Onde se esconde | O botão direito | O que funciona |
|---|---|---|---|
| SVG inline | Dentro do HTML, como código | Não oferece salvar | Inspecionar e copiar, ou extensão |
| Ícone em sprite | use apontando para um símbolo | Salva nada | Abrir o arquivo do sprite pela aba Rede |
| Imagem em CSS | background-image | Não enxerga | Aba Rede, filtro Img |
| Fonte | @font-face, arquivo woff2 | Não enxerga | Aba Rede, filtro Font |
| Vídeo em streaming | Playlist m3u8 e segmentos | Salva um pedaço | yt-dlp ou captura completa |
| Textura 3D | Pedido do WebGL (.glb, .ktx2, .hdr) | Não enxerga | Aba Rede, filtro Other, ou captura |
Fontes: MDN, use, MDN, @font-face, MDN, streaming, consultadas em outubro de 2026.
Antes de qualquer download, entenda que a página que você vê é o DOM montado pelo JavaScript, não o HTML que chegou do servidor. Esse ponto está em como ver o código-fonte de um site.
Como baixar SVG inline e sprites de ícones?
Pelo Inspecionar, copiando o elemento svg inteiro para um arquivo de texto com extensão .svg; ou por uma extensão que faz isso em lote. O SVG inline é só código, então "baixar" é copiar o trecho certo e gravar num arquivo.
O caminho manual funciona para um ou dois ícones. Clique com o botão direito no ícone, escolha Inspecionar, suba até a tag svg que o contém, clique com o botão direito nela e copie o elemento. Cole num editor de texto e salve como nome.svg. Se o arquivo não abrir, confira se a tag tem o atributo xmlns="http://www.w3.org/2000/svg"; muitos sites omitem porque dentro do HTML ele não é necessário.
O sprite muda a regra. Quando o código mostra um elemento use com href="/icons.svg#seta", o desenho não está ali: o elemento use duplica nós de um documento SVG, que pode ser um arquivo externo apontado com um fragmento #id (MDN). O que você quer é o arquivo icons.svg inteiro. Abra a aba Rede, filtre pelo nome, abra o arquivo numa aba nova e salve. Dentro dele vêm todos os símbolos do site, não só a seta.
Inspecionar o ícone
Botão direito no ícone, Inspecionar, e suba até a tag svg que o envolve.
Copiar o elemento
Botão direito na tag, Copiar, Copiar elemento (outerHTML).
Salvar como .svg
Cole num editor de texto e grave com extensão .svg; confira o atributo xmlns.
Checar se é sprite
Se o código tem use com href e #id, o desenho está em outro arquivo.
Buscar o sprite na Rede
Filtre a aba Rede pelo nome do arquivo, abra em nova aba e salve o sprite inteiro.
Para pegar todos os SVGs de uma página de uma vez, duas extensões resolvem. A SVG Export procura os SVGs do site e exporta como PNG, JPEG ou SVG em lote; a página da loja mostra cerca de 200 mil usuários e nota 4,6 (Chrome Web Store). A SVG Gobbler é de código aberto, sob licença Apache-2.0, roda em Chrome e Firefox, reconstrói instâncias de sprite, lida com SVG restrito por CORS e exporta SVG, PNG, WEBP e JPEG (GitHub). Nós preferimos a Gobbler para sprites e a Export para rapidez.
Como baixar imagens em CSS, fontes woff2 e texturas 3D pela aba Rede?
Pela aba Rede do DevTools, filtrando por tipo: Img para imagens, Font para fontes, Media para vídeo e áudio, Other para o resto. A referência oficial lista os filtros All, Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS, Wasm, Manifest e Other, além das opções Preserve log, para manter os pedidos entre recarregamentos, e Disable cache, para forçar o download de tudo (Chrome DevTools).
O roteiro: abra o DevTools, vá em Rede, marque Disable cache e Preserve log, recarregue a página e role até o fim. A rolagem importa porque imagens com carregamento preguiçoso só são pedidas quando entram na tela. Depois clique no filtro Img e você verá tudo o que o navegador baixou, inclusive os background-image do CSS que o botão direito ignora. Abra cada arquivo numa aba nova e salve, ou use Copy response quando for texto, como um SVG.
As fontes aparecem no filtro Font. Um site carrega fontes pela regra @font-face, que aponta para um arquivo remoto com src: url(); a MDN recomenda WOFF2 para web, por comprimir melhor que WOFF e OpenType, e lembra que fontes estão sujeitas à restrição de mesmo domínio, salvo quando o servidor libera por CORS (MDN). Na prática, você baixa o .woff2, mas a licença dele é outra conversa, tratada na última seção. Para identificar a família, o tamanho e o espaçamento antes de baixar, o método está em como extrair cores, fontes e espaçamentos de qualquer site.
As texturas 3D não têm filtro próprio. Modelos .glb, texturas .ktx2 e mapas .hdr aparecem em Other ou Fetch/XHR, pedidos pelo WebGL. Vale a mesma lógica: filtre pelo nome ou pela extensão, abra e salve. Abrimos o nosso próprio herói 3D arquivo por arquivo em anatomia de um herói 3D, e é uma boa referência do que esperar.
Como baixar vídeos de um site, inclusive os que vêm em streaming?
Se o vídeo é um arquivo único, o filtro Media da aba Rede mostra o MP4 ou WebM e você salva direto; se é streaming, o navegador recebe uma playlist e dezenas de segmentos, e aí a ferramenta é o yt-dlp. O Web Almanac 2024 mostra os dois mundos: o MP4 é 68% dos arquivos com tipo de vídeo, enquanto segmentos .ts, .m4s e sem extensão, associados a HLS e DASH, somam cerca de 27% (HTTP Archive).
No streaming, não existe "o arquivo". No HLS, a sessão começa baixando uma playlist m3u8 com os metadados dos subfluxos; no MPEG-DASH, bibliotecas em JavaScript usam Media Source Extensions para anexar pedaços ao elemento video conforme chegam (MDN). Salvar um segmento pela aba Rede dá alguns segundos de vídeo, nada mais.
O yt-dlp é um downloader de áudio e vídeo por linha de comando com suporte a milhares de sites, distribuído sob a licença Unlicense, instalado por binário ou pip, e usado como yt-dlp [OPÇÕES] URL (GitHub). Para uma playlist m3u8 encontrada na aba Rede, cole a URL dela no lugar da URL da página e a ferramenta junta os segmentos num arquivo só. Para vídeos de YouTube e Vimeo incorporados no site, a URL da plataforma já basta, e os termos dela passam a valer.
Vídeo de fundo é o caso mais comum em sites de empresa e quase sempre é um MP4 curto, sem áudio, chamado por uma tag video com autoplay e muted. Esse sai pelo filtro Media sem ferramenta nenhuma. Se o site usa 3D no lugar de vídeo, os arquivos mudam de natureza; comparamos as duas abordagens em vídeo de fundo ou 3D no site.
Como baixar tudo de uma vez, organizado por pasta?
Com uma captura completa, que abre a página num navegador real, executa o JavaScript, rola até o fim, intercepta cada arquivo que o site pediu e grava tudo numa pasta local com os caminhos reescritos. É o único caminho que entrega imagens, SVGs, fontes, vídeos e texturas juntos, separados por tipo, com o site ainda funcionando.
O Extrator de Sites, que é o nosso, faz exatamente isso como extensão para Chrome, Brave e Edge. Tem três modos: Completo, para sites com 3D e animação; Rápido, para páginas simples; e Site inteiro, que segue os links do menu até 2 níveis. De brinde vem o design system do site, com 15 seções (tipografia, cores, botões, componentes, animações, breakpoints, tokens) e um arquivo tokens.css pronto para colar. O plano grátis dá 2 downloads por mês, sem cartão. Não funciona em Safari nem em Firefox.
Onde ele não é a melhor escolha: quando você quer um único ícone ou uma única foto, a aba Rede resolve em um minuto e sem instalar nada. Também não substitui a licença de uma fonte comercial nem serve para publicar o site de outra empresa como seu. O comparativo com SingleFile, HTTrack e as outras extensões está em melhor extensão para baixar site, e o método geral, em como baixar um site completo.
A organização por pasta importa mais do que parece. Uma captura bem guardada vira biblioteca: fontes numa pasta, ícones noutra, texturas noutra, cada site com a data. Dentro de um ano você tem um acervo de referência que não depende de o site continuar no ar, como explicamos em como montar uma biblioteca de referências de design. Para saber que tecnologia produziu cada arquivo, o roteiro está em como saber qual tecnologia um site usa.
Baixar não é o trabalho. O trabalho é olhar o arquivo por dentro e entender por que ele funciona.
O que a lei permite fazer com o que você baixou?
Estudar, guardar e citar; não republicar, revender nem usar como se fosse seu. A Lei 9.610/1998 lista entre as obras protegidas as fotografias (art. 7º, VII), os desenhos (VIII) e os programas de computador (XII), e diz que a reprodução, parcial ou integral, depende de autorização prévia e expressa do autor (art. 29, I) (Lei 9.610/1998).
O que a mesma lei libera está no art. 46. O inciso II permite "a reprodução, em um só exemplar de pequenos trechos, para uso privado do copista, desde que feita por este, sem intuito de lucro". O inciso III permite a citação de passagens de qualquer obra "para fins de estudo, crítica ou polêmica", na medida justificada e com o nome do autor e a origem. A proteção de fotos e obras audiovisuais dura 70 anos a contar do ano seguinte à divulgação (art. 44). Guardar uma captura para estudar é uso privado; subir o ícone no seu site é reprodução.
As fontes têm regra própria, a licença do arquivo. Fontes sob a SIL Open Font License, a mais comum no Google Fonts, podem ser usadas em qualquer trabalho de design, inclusive comercial; o que a licença proíbe é vender a fonte sozinha, e versões modificadas precisam trocar o nome reservado (SIL OFL FAQ). Fontes de fundições comerciais, como as que chegam por Adobe Fonts ou por licença direta, foram licenciadas para aquele site, não para você. Baixar o .woff2 não transfere a licença.
Dois cuidados práticos. Primeiro, guarde a origem de cada arquivo (URL e data) junto com a pasta: isso separa referência de apropriação se alguém perguntar. Segundo, quando um ícone ou foto for entrar num projeto seu, troque por um arquivo licenciado, de banco de imagens ou de biblioteca aberta, e use o original só como régua de qualidade. O checklist completo está em copiar site é crime?.
Perguntas frequentes
Baixar SVG de um site é crime?
Baixar para estudar, não. A Lei 9.610 permite reprodução de pequenos trechos para uso privado, sem lucro, e citação para fins de estudo. O que ela proíbe é reproduzir sem autorização para publicar, vender ou usar como seu. O desenho de um ícone é obra protegida; a técnica que ele usa, não.
Como salvar um SVG que aparece como código no Inspecionar?
Copie o elemento svg inteiro (botão direito na tag, Copiar elemento), cole num editor de texto e salve com extensão .svg. Se o arquivo não abrir, acrescente xmlns="http://www.w3.org/2000/svg" na tag de abertura. Se dentro há um use com #id, o desenho está num sprite externo: baixe o sprite pela aba Rede.
Posso baixar a fonte de um site e usar no meu projeto?
Depende da licença do arquivo, não de onde você o baixou. Fonte sob a SIL Open Font License, como as do Google Fonts, pode ser usada em trabalho comercial, desde que não seja vendida sozinha. Fonte de fundição comercial foi licenciada para aquele site; para usar, você compra a sua. O .woff2 baixado serve para estudar o peso e o desenho.
Como baixar o vídeo de fundo de um site?
Abra o DevTools, vá em Rede, filtre por Media, recarregue a página e clique no arquivo MP4 ou WebM que aparecer; abra em nova aba e salve. Se em vez de um arquivo aparecerem uma playlist m3u8 e vários segmentos, é streaming: cole a URL da playlist no yt-dlp, que junta tudo num arquivo só.
Por que a imagem baixada vem em WebP e não em JPG?
Porque o servidor entrega o formato que o navegador aceita, e o WebP já responde por 12% das imagens no celular, segundo o Web Almanac 2024. Não é erro nem perda: é a versão otimizada. Para o original, tente a mesma URL sem os parâmetros de formato e largura; se não existir, converta o WebP com qualquer editor.
Conclusão
O botão direito ficou para trás junto com os sites de uma página só. Hoje o que vale é saber onde cada arquivo se esconde: no código, no CSS, numa playlist ou num pedido do WebGL. A aba Rede resolve um arquivo, a extensão resolve os SVGs da página e a captura completa resolve o site inteiro, em pastas.
O que você faz com a pasta depois é o que separa referência de cópia. Estude, meça, compare, guarde a origem. Quando a peça for entrar num projeto seu, ela precisa ser sua, ou licenciada para você.
