Tutorial — para quem lê o código-fonte
Como baixar um SVG do HTML
Você pode perfeitamente fazer isso na mão no DevTools. Também vai passar dez minutos descobrindo por que o arquivo que salvou se recusa a abrir — então aqui vai tanto a rota manual quanto o motivo de ela morder.
Assista — 17 segundos
O markup para fora, sem o painel Elements
As duas saídas aparecem aqui: o markup para a área de transferência e o mesmo vetor como arquivo. A diferença entre elas é só onde ele termina.
O que a gravação mostra
- O markup está inline no HTML — não há arquivo para buscar
- Ache o elemento que você quer
- Copiar código levanta o markup em si
- Ver o código-fonte daria a mesma tag, menos o xmlns
- Ou salve como arquivo, com o namespace consertado
A rota manual e sua única armadilha
Copiar e colar do Elements dá um arquivo que não abre
O método na mão é direto: abra o DevTools, ache o elemento <svg> no painel Elements, clique com o botão direito, escolha Copy → Copy outerHTML, cole num arquivo novo e salve como .svg. Depois dê dois cliques e o navegador te mostra um erro ou uma página em branco.
O motivo é um namespace. Um documento SVG isolado precisa declarar xmlns="http://www.w3.org/2000/svg" no elemento raiz. O SVG inline quase nunca tem esse atributo, porque o parser de HTML coloca os elementos no namespace SVG automaticamente com base em onde aparecem — o atributo é genuinamente desnecessário dentro do HTML. Tire o markup desse contexto e ele passa a ser necessário, e não está lá.
Então o conserto manual é real, mas fácil de esquecer: adicione você mesmo o atributo xmlns à tag <svg> raiz, toda vez. Há outras duas coisas que vale fazer já que você está aí, e elas são menos óbvias.
- Remova qualquer coisa executável. Markup de página pode carregar elementos
<script>, atributos de manipuladoron*e referências externas. Você não quer isso num arquivo que vai versionar num repositório ou abrir numa ferramenta de design. - Cheque se há
currentColor. Se o ícone herda a cor do CSS, o arquivo extraído não tem cor própria e vai renderizar preto. Isso é comportamento correto, não corrupção.
A rota que faz as três coisas por você
Conserto de namespace, sanitização e duas saídas à escolha — sem sair da página nem abrir painel.
- Abra o popup na página. Clique no botão da barra de ferramentas. Todo
<svg>inline do documento é coletado, junto com vetores de fundo CSS, referências de sprite e origens de imagem. - Ache o elemento que você quer. Percorra com Ant. e Próx.. A prévia isolada é bem mais fácil de reconhecer do que um nó destacado na árvore do Elements.
- Leve como markup, ou como arquivo. Copiar código põe o markup sanitizado na área de transferência, com namespace incluído, pronto para colar num componente. Baixar o atual grava a mesma coisa num arquivo
.svg. - Cole ou abra. De qualquer jeito o resultado é um documento isolado válido — abre no Figma, no Illustrator, no VS Code e em todo navegador sem edição.
O que o código-fonte mostra e o que não mostra
Ver o código-fonte mostra o HTML que o servidor mandou. Esse não é o mesmo documento que está na sua tela. Tudo que um framework renderizou no cliente — o que, num site React, Vue ou Svelte, é a maioria dos ícones — nunca aparece no código-fonte. O DOM é o registro honesto do que a página é, e é o que tanto o DevTools quanto esta extensão leem.
Sprites são o outro motivo de copiar na mão decepcionar
Copie o outerHTML de um ícone baseado em sprite e você recebe algo como <svg><use href="#star"/></svg> — um ponteiro, não uma forma. Salvo como arquivo ele não desenha nada, porque o símbolo apontado morava em outra parte do documento que você não copiou. Resolver essa referência de volta ao símbolo é uma das coisas que a varredura faz por você. Mais sobre sprites →
Se você quer um pipeline em tempo de build
Para extrair ícones como parte de um build, esta é a ferramenta errada e um navegador headless é a certa — dirija a página, leia o DOM, escreva os arquivos. A extensão é para o caso interativo: você está olhando uma página e quer aquele ícone agora.
- A armadilha
- SVG inline omite o
xmlns, então markup copiado na mão não vai abrir. - Consertado
- O namespace é adicionado e scripts, manipuladores e referências externas são removidos.
- Sprites
- Ponteiros
<use>são resolvidos de volta ao símbolo — não salvos como ponteiros. - Código-fonte
- Mostra o HTML do servidor, não o que um framework renderizou no cliente.
Vale saber
Perguntas frequentes
Por que o SVG que copiei do DevTools não abre?
Está faltando o atributo xmlns="http://www.w3.org/2000/svg". O SVG inline não precisa dele porque o parser de HTML fornece o namespace, mas um documento .svg isolado precisa. Adicione na tag raiz, ou deixe a extensão consertar por você.
Dá para pegar o SVG do código-fonte?
Só se o servidor tiver mandado. Tudo que React, Vue ou Svelte renderizam no cliente nunca aparece no código-fonte. O DOM é o que realmente foi desenhado, e é o que a varredura lê.
Copiei um ícone de sprite e o arquivo está em branco.
Você copiou um ponteiro <use> em vez da forma para a qual ele aponta. O símbolo mora em outro lugar do documento. A varredura resolve essa referência de volta ao símbolo real para você receber um arquivo autossuficiente.
O markup extraído é modificado?
Só de maneiras que o tornam um arquivo isolado válido: o namespace xmlns é adicionado, e elementos script, atributos de manipulador de evento e referências externas são removidos. As formas ficam intactas.
Dá para automatizar isso num build?
Com a extensão não — use um navegador headless para isso. Isto é para o caso interativo, em que você está olhando uma página e quer o ícone agora.
Pule o painel, fique com o markup
Namespace consertado, scripts removidos, sprites resolvidos.