Comparação — SVG vs. print
SVG Downloader vs. print de ícones
Quando você vê um ícone que quer, o reflexo é tirar um print. É a ferramenta errada no instante em que você precisa do arquivo de verdade. Aqui vai a comparação honesta entre um print, uma cópia pelo DevTools e extrair o SVG real.
O trade-off
A foto de um ícone não é o ícone
Um print é um raster: uma grade fixa de pixels capturada em um único tamanho. Isso é genuinamente útil quando você só quer uma referência visual rápida — algo para jogar num documento ou numa mensagem e dizer “esse aqui, este”. Sem instalar nada, sem pensar, pronto.
Tudo desmorona no instante em que você precisa usar o ícone. Amplie e ele borra, porque não há pixels além dos que você capturou. Tente recolorir e você estará pintando sobre uma foto. Coloque num build e você entregou um PNG pesado onde cabia um vetor de 400 bytes. O print respondeu “com o que se parece”; nunca respondeu “me dê o arquivo”.
Copiar pelo DevTools é o meio-termo honesto — você consegue o markup real — mas é trabalhoso. Você caça o nó <svg> certo, copia o HTML externo, cola num arquivo e então descobre que ele não abre porque falta o namespace. Também não resolve nada para fundos CSS, referências <use> de sprite ou os outros vinte ícones da página.
| Print / PNG | Copiar pelo DevTools | SVG Downloader | |
|---|---|---|---|
| Formato de saída | PNG raster | Markup SVG (na mão) | Arquivo .svg real |
| Continua nítido ao redimensionar | Não — borra | Sim | Sim |
| Editável / recolorível | Não | Sim | Sim |
| Tamanho do arquivo | Pesado | Minúsculo | Minúsculo |
| Funciona com SVG inline | Só como imagem | Sim | Sim |
| Funciona com fundos CSS | Só como imagem | Não | Sim |
| Funciona com sprites (<use>) | Só como imagem | Raramente | Sim — no mesmo documento |
| Em lote / página inteira | Não | Não | Sim — em ZIP |
| Esforço | Baixo | Alto e trabalhoso | Dois cliques |
Quando cada um faz sentido
- Print — você quer uma referência visual para apontar, não o arquivo. Perfeitamente válido, e mais rápido que qualquer outra coisa para isso.
- Copiar pelo DevTools — você precisa de exatamente um ícone inline, já está no inspetor e não se importa em consertar o namespace por conta própria.
- SVG Downloader — você quer o vetor real: nítido, editável, minúsculo. Ele lê SVG inline, fundos CSS e referências de sprite, conserta o
xmlnsausente, dá um nome sensato ao arquivo e pode empacotar a página inteira num ZIP. Tudo no seu dispositivo — nada é enviado.
Se você já decidiu que quer o arquivo em vez de uma foto dele, o guia de download de qualquer site percorre o fluxo inteiro.
Vale saber
Print ou SVG?
Um print de um ícone chega a ser suficiente?
Sim — como referência visual rápida. Se você só precisa colar a imagem de um ícone num documento ou num chat para apontar para ele, um print serve. Deixa de servir no instante em que você precisa redimensionar, recolorir ou publicar o ícone, porque um print é um raster de tamanho fixo, não o arquivo.
Por que um SVG é melhor que um PNG para um ícone?
Um SVG é texto vetorial: continua perfeitamente nítido em qualquer tamanho, costuma ocupar uma fração do tamanho de um raster e você pode recolorir ou editar seus traçados. Um PNG vindo de um print está preso aos pixels que você capturou e borra assim que é ampliado.
Leve o ícone, não uma foto dele
Grátis, privado, e salva o vetor real em dois cliques.