Como copiar um SVG de um site

Assista — 19 segundos

As duas áreas de transferência, numa rodada

tutorial · área de transferência

Repare na linha de status mudando entre os dois cliques — o popup diz exatamente qual das duas áreas de transferência você acabou de preencher.

O que a gravação mostra

1. Abra o popup na página que você está lendo
2. Chegue no ícone que você quer
3. Copiar código — o markup, direto para a área de transferência
4. Cole num componente e simplesmente funciona
5. Ou Copiar imagem — um PNG, para documentos e chats
6. Duas áreas de transferência, um ícone. Sem arquivo em disco em nenhum dos casos.

Escolha o certo

Copiar código e Copiar imagem não são alternativas — são coisas diferentes

Eles ficam um ao lado do outro no popup e vale deixar claro o que cada um põe na sua área de transferência, porque colar o errado são cinco minutos de confusão.

• Copiar código põe o markup na área de transferência como texto: <svg viewBox="0 0 24 24">…</svg>, sanitizado, com o namespace xmlns já adicionado. Cole num componente React, num template Vue, num arquivo HTML ou num editor de texto. Cole no Slack e você verá uma parede de sinais de menor e maior, porque é texto.
• Copiar imagem rasteriza o vetor para um PNG e põe isso na área de transferência como figura. Cole no Google Docs, Notion, Figma, Slack, num e-mail — em qualquer lugar que aceite imagem colada. Ele é renderizado em 2× no mínimo para não chegar como uma miniatura borrada.

Regra prática: se o destino é código, use Copiar código. Se o destino é um documento, use Copiar imagem.

Copiando um ícone

Os dois caminhos compartilham os dois primeiros passos.

1. Abra o popup e ache o ícone. Clique no botão da barra de ferramentas e percorra com Ant. e Próx. até a prévia mostrar o que você quer.
2. Para código, aperte Copiar código. A linha de status diz Código SVG copiado para a área de transferência. Você agora tem markup sanitizado, com namespace incluído, pronto para colar num componente.
3. Para uma figura, aperte Copiar imagem. A linha de status diz Imagem PNG copiada para a área de transferência. O vetor é renderizado na sua máquina em 2× ou melhor e posto na área de transferência como imagem.
4. Cole onde ele vai. Markup no seu editor; o PNG no seu documento, apresentação ou chat. Nada foi escrito em disco em nenhum dos casos.

O que já foi feito com o markup copiado

Essa é a parte que torna isso melhor do que copiar do DevTools. Antes de chegar à sua área de transferência, o markup passa pelo mesmo sanitizador que todo download usa: o namespace xmlns é adicionado se estava faltando, para o fragmento se sustentar como documento válido; e elementos script, atributos de manipulador de evento e referências externas são removidos, para você não colar o comportamento da página de outra pessoa no seu código. O que você cola são as formas, e só as formas.

Colando num componente

Duas coisinhas vão te morder no JSX. Atributos como stroke-width e fill-rule precisam virar strokeWidth e fillRule; a maioria dos editores e codemods faz isso por você. E se o ícone usa currentColor — a maioria usa — ele vai pegar a cor do texto que estiver em escopo, que normalmente é exatamente o que você quer. Se renderizar preto e você esperava cor, é por isso: a cor morava no CSS da página, não na forma.

Por que a área de transferência não precisa de permissão extra

Os dois botões escrevem na área de transferência de dentro de um clique que você deu, numa página de extensão em foco. É exatamente a condição em que os navegadores permitem escrita na área de transferência, então a extensão não pede permissão nenhuma — ela só usa o gesto que você já deu.

Copiar código

Markup sanitizado, com xmlns incluído — para editores e componentes.

Copiar imagem

Um PNG em 2× ou melhor — para documentos, apresentações, chats e e-mail.

Sanitização

Scripts, manipuladores e referências externas são removidos antes de qualquer uma das cópias.

Permissões

Nenhuma permissão de área de transferência é pedida — ela pega carona no clique que você deu.

Vale saber

Perguntas frequentes