Se você já tentou ampliar um logo e viu a imagem ficar borrada e pixelada, sabe como esse problema é frustrante. O SVG existe para resolver exatamente isso. É um formato de imagem que funciona de forma completamente diferente de JPG e PNG — e entender essa diferença é essencial para usar o formato certo em cada situação.
O que significa SVG?
SVG significa Scalable Vector Graphics — ou "gráficos vetoriais escaláveis" em português. É um formato de imagem aberto, padronizado pelo W3C (o mesmo consórcio que define as especificações do HTML e CSS), e suportado nativamente por todos os navegadores modernos.
Ao contrário de JPG e PNG, que armazenam imagens como uma grade de pixels coloridos, o SVG descreve a imagem em formato de texto, usando coordenadas matemáticas para representar formas, linhas, curvas e cores. Um arquivo SVG é, na prática, um arquivo de texto — e pode ser aberto e editado em qualquer editor de código.
Como o SVG funciona por dentro?
Um arquivo SVG é escrito em XML, uma linguagem de marcação semelhante ao HTML. Por exemplo, um círculo vermelho em SVG é descrito assim:
O navegador lê essas instruções matemáticas e renderiza a imagem diretamente na tela, calculando os pixels em tempo real. É por isso que o SVG pode ser exibido em qualquer tamanho — de um favicon de 16x16 pixels até um outdoor de 10 metros — sem nenhuma perda de qualidade.
Quais são as vantagens do SVG?
- Escalável sem perda de qualidade: amplie ou reduza à vontade — a imagem permanece nítida em qualquer resolução, inclusive em telas Retina e 4K.
- Arquivos leves: logos e ícones simples em SVG costumam ser muito menores do que em PNG, especialmente em tamanhos grandes.
- Editável com código: é possível alterar cores, tamanhos e animações diretamente via CSS ou JavaScript, sem precisar de um editor de imagem.
- Indexável por buscadores: como o conteúdo é texto, o Google consegue ler e indexar o texto dentro de um SVG.
- Suporte a animações: é possível criar animações CSS e SMIL diretamente em SVG, sem depender de GIFs ou vídeos.
- Acessibilidade: títulos e descrições podem ser adicionados ao SVG para leitores de tela.
Quais são as limitações do SVG?
- Não é adequado para fotos: fotografias possuem milhões de variações de cor e gradientes complexos. Representar isso em vetores geraria arquivos enormes e pouco eficientes — JPG é sempre a escolha certa para fotos.
- Imagens complexas ficam pesadas: ilustrações muito detalhadas, com muitas formas e gradientes, podem gerar SVGs grandes e lentos para renderizar.
- Curva de aprendizado para edição manual: editar SVG diretamente no código exige conhecimento de XML e matemática vetorial. Ferramentas como Illustrator ou Figma facilitam esse processo.
💡 Regra prática: use SVG para logos, ícones, ilustrações, gráficos, mapas e qualquer arte que precise ser exibida em múltiplos tamanhos. Use JPG ou WebP para fotografias e imagens com muitos detalhes e gradientes complexos.
SVG vs PNG vs JPG — quando usar cada um?
| Característica | SVG | PNG | JPG |
|---|---|---|---|
| Tipo | Vetorial | Raster (pixels) | Raster (pixels) |
| Escalável sem perda | Sim | Não | Não |
| Transparência | Sim | Sim | Não |
| Ideal para fotos | Não | Não | Sim |
| Ideal para logos e ícones | Sim | Sim | Não |
| Editável via CSS/JS | Sim | Não | Não |
| Suportado em navegadores | Sim | Sim | Sim |
Como usar SVG em sites e aplicações
Há três formas principais de incluir um SVG em uma página web:
- Como tag <img>: a forma mais simples. O SVG é tratado como qualquer outra imagem, mas não pode ser manipulado via CSS ou JavaScript.
- Inline no HTML: o código SVG é inserido diretamente no HTML da página. Permite controle total via CSS e JS — cores, animações e interações. É a abordagem preferida para ícones interativos.
- Como background CSS: usando
background-image: url('icone.svg'). Útil para ícones decorativos, mas com acesso limitado via JavaScript.
Como converter imagens para SVG?
Converter uma foto ou PNG para SVG é possível através de um processo chamado vetorização, que transforma pixels em formas geométricas. O resultado é melhor para imagens simples, com poucas cores e bordas bem definidas — como logos com fundo branco. O conversor de imagens do ImageTools permite converter arquivos entre os principais formatos, incluindo PNG e JPG para outros formatos compatíveis com a web.
Converta suas imagens agora
Transforme arquivos entre os principais formatos de imagem de forma rápida e gratuita, diretamente no navegador.
Converter imagemSVG é bom para SEO?
Sim. Como o SVG é um formato baseado em texto, o Google consegue rastrear e indexar seu conteúdo. Além disso, logos e ícones em SVG costumam ser menores do que em PNG, contribuindo para páginas mais rápidas — o que é um fator direto de ranqueamento no Google desde a implementação do Core Web Vitals.
Para otimizar SVGs para SEO, adicione o atributo title e desc dentro do código SVG, que funcionam como texto alternativo para leitores de tela e buscadores.