Formato SVG: O Guia Técnico Completo
O que é SVG
SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML padronizado pelo W3C em 2001. Diferente de imagens raster (JPG, PNG, WebP) que armazenam pixels individuais, SVG descreve gráficos matematicamente — pontos, linhas, curvas, formas — permitindo escalar infinitamente sem perda de qualidade.
Vantagens fundamentais
- Escala infinita sem perda: mesma qualidade em 16×16 ou 4096×4096 pixels
- Tamanho de arquivo pequeno: gráficos simples ocupam KBs (não MBs)
- Editável como código: SVG é texto XML — pode ser editado em qualquer editor
- Animável com CSS/JavaScript: SVG suporta animações nativas
- Acessibilidade: estrutura semântica permite leitores de tela
- Pesquisável: texto em SVG é indexado por Google
- Estilizável com CSS: mude cores, traços, opacidade via CSS
Quando usar SVG
- Logos: vetorial garante qualidade em qualquer tamanho/dispositivo
- Ícones: substituiu fontes de ícones (Font Awesome → ícones SVG)
- Ilustrações simples: gráficos com linhas, formas, texto
- Diagramas: fluxogramas, mapas, gráficos
- Interfaces web modernas: padrão para UI moderna
- Impressão: vetorial garante qualidade em qualquer DPI
Quando NÃO usar SVG
- Fotografias: SVG não é eficiente para conteúdo fotográfico (use JPG/WebP/AVIF)
- Imagens com gradientes complexos: arquivos SVG ficam grandes
- Plataformas legacy: alguns sistemas antigos não suportam (use PNG fallback)
- E-mail: clientes de email têm suporte limitado a SVG (use PNG)
Estrutura básica
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="red" />
<text x="50" y="55" text-anchor="middle">Olá</text>
</svg>
Esse SVG produz um círculo vermelho com texto "Olá". O viewBox define o sistema de coordenadas — escala automaticamente.
Otimização
SVGs exportados de Illustrator/Figma frequentemente têm metadados desnecessários. Ferramentas como SVGO (SVG Optimizer) reduzem tamanho 30-70% sem perda visual:
svgo input.svg -o output.svg
SVG vs raster
| Aspecto | SVG | Raster (PNG/JPG) |
|---|---|---|
| Escala | Infinita | Pixels fixos |
| Tamanho (logos) | Pequeno (KB) | Médio (KB-MB) |
| Tamanho (fotos) | Enorme se complexo | Otimizado |
| Edição | Como código | Editor de imagem |
| Animação | Nativo | Limitado (GIF/WebP) |
| Acessibilidade | Excelente | Limitada (alt text) |
Conversão
KaijuConverter converte SVG para PNG/JPG quando você precisa de raster (compatibilidade legacy, e-mail, redes sociais). Reverso (PNG → SVG) é mais difícil — funciona para gráficos simples mas falha em fotografias.
Conclusão
SVG é o padrão moderno para logos, ícones e ilustrações em 2026. Use SVG sempre que conteúdo for vetorial (gráficos com linhas/formas). Use raster (JPG/WebP/AVIF) para fotografias. Em alguns casos, use cascata <picture> com SVG primário + PNG fallback para máxima compatibilidade.
Conversões relacionadas
O mais comum ao trabalhar com imagens são estas direções de conversão: