Bitmap vs imagem vetorial
Imagens se dividem em duas categorias:
- Bitmap (JPEG/PNG/WebP): composto por pixels; ampliado até certo ponto, fica borrado e com efeito mosaico
- Imagem vetorial (SVG): descrita por caminhos matemáticos; nítida em qualquer ampliação, por maior que seja
Entendida essa diferença essencial, fica claro para quê o SVG serve.
Vantagens principais do SVG
Dimensionamento infinito sem perda
O SVG descreve gráficos por caminhos, curvas e formas, não por pixels. Ampliado a qualquer tamanho, permanece nítido, sem efeito mosaico. Essa é a maior vantagem do SVG, especialmente adequada a ícones e logos que precisam de vários tamanhos.
Tamanho reduzido (para gráficos simples)
Para ícones e logos simples, o arquivo SVG é bem menor que um PNG equivalente. Um logo simples em PNG pode ter de alguns KB a dezenas de KB; em SVG, talvez apenas 1~2 KB. Mas para imagens complexas do tipo fotografia, o SVG não se aplica.
Editável por código
O SVG é, essencialmente, texto XML; é possível editar cor, forma e texto diretamente em um editor de texto. No front-end, dá para controlar a cor com CSS e modificar dinamicamente com JS — algo que o bitmap não permite.
Suporte a animação
O SVG suporta animação embutida e animações por CSS/JS. Animações de carregamento e efeitos de ícone com SVG ficam leves e fluidas.
Pesquisável e indexável
O texto dentro do SVG é texto real, podendo ser indexado pelos motores de busca e lido por leitores de acessibilidade — mais amigável que o texto dentro de imagens.
Para quê o SVG serve
- Ícones: ícones de navegação e funções, primeira escolha no design de UI
- Logos: logos de marca precisam de vários tamanhos; vetorial é o mais adequado
- Ilustrações: ilustrações planas e elementos decorativos
- Gráficos: gráficos de visualização de dados em vetorial permanecem nítidos ao dimensionar
- Ícones de fonte: ícones de fonte são, essencialmente, SVG
Para quê o SVG não serve
- Fotos: fotos têm cores ricas e muitos detalhes; descrevê-las em vetorial explode o tamanho e causa distorção. Use JPEG/WebP para fotos
- Gradientes e texturas complexos: gradientes e texturas excessivamente complexos deixam o SVG grande; o bitmap é melhor
- Efeitos de filtro necessários: filtros complexos são mais eficientes em bitmap
Limitações do SVG
Detalhes de compatibilidade
Navegadores modernos suportam totalmente o SVG, mas alguns ambientes antigos e clientes de e-mail não o suportam bem. Em casos importantes, faça um teste.
Gráficos complexos ficam grandes
Fotos convertidas em SVG ficam enormes e distorcidas. O SVG não é universal; serve apenas para gráficos vetoriais.
Curva de aprendizado
Desenhar SVG exige habilidade em desenho vetorial, diferente do bitmap, que pode ser obtido por fotografia. Mas usar recursos de SVG prontos ou ferramentas de bitmap para SVG reduz a barreira.
Bitmap para SVG
A conversão de bitmap (como PNG) para SVG é um processo de "traçar" — a ferramenta identifica os contornos das formas na imagem e gera caminhos vetoriais aproximados.
Use a ferramenta de imagem para SVG:
- Envie o bitmap (recomenda-se imagem simples e de alto contraste, como um logo)
- A ferramenta traça e gera o SVG
- Baixe o SVG
Pontos de atenção na conversão
- Gráficos simples (logos, ícones) convertidos para SVG ficam bons
- Fotos e imagens complexas convertidas em SVG ficam distorcidas e grandes; não recomendado
- Verifique se as bordas ficaram suaves e as cores precisas após a conversão
- O SVG convertido pode ser otimizado em um editor de texto
Recomendações de uso do SVG
Embutir no HTML
Pequenos SVGs embutidos diretamente no HTML economizam requisições HTTP e ainda podem ser controlados por CSS.
Usar currentColor para ícones
Preencha ícones SVG com currentColor; ao mudar a cor via CSS, a cor do ícone muda — um conjunto de ícones em várias cores.
Comprimir o SVG
O SVG é texto e pode ser comprimido por ferramentas (remover comentários, simplificar caminhos). Comprima antes de publicar para reduzir o tamanho.
Resumo
O ponto central do SVG é "vetorial, escalável, editável". Ícones, logos, ilustrações e gráficos são melhores em SVG; fotos ficam em bitmap. A conversão de bitmap para SVG é adequada a gráficos simples. A ferramenta de conversão para SVG do DocsAll processa no navegador e converte um logo bitmap em vetorial em um clique, facilitando o uso posterior em vários tamanhos.