Imagem vetorial SVG (.svg)
W3C PadrãoScalable Vector Graphics (SVG) é um formato de imagem vetorial baseado em XML para gráficos bidimensionais que oferece suporte a interatividade, estilos CSS e animações.
Converter SVG para PNG
Conversor gratuito de SVG para PNG no navegador. Converta arquivos instantaneamente no seu dispositivo.
Comprimir SVG online
Privado - os arquivos nunca saem do seu dispositivo
Inspeção e metadados
Sistemas operacionais e analisadores de arquivos identificam arquivos SVG pela sequência inicial de bytes:
Assinatura do arquivo em bytes (magic bytes)
Sistemas operacionais e analisadores de arquivos identificam arquivos SVG pela sequência inicial de bytes:
ASSINATURA HEXADECIMAL (DESLOCAMENTO 0):
3C 73 76 67REPRESENTAÇÃO ASCII: <svg
Padronização: W3C Recommendation (SVG 1.1 / SVG 2)
Especificações técnicas
| Estrutura do contêiner | Documento de marcação de texto baseado em XML que define geometria vetorial 2D |
| Compressão | Compressão de texto Gzip / Brotli (SVGZ usa compressão gzip) |
| Ordem dos bytes (endianness) | Não se aplica (fluxo de caracteres baseado em texto, codificado em UTF-8 ou UTF-16) |
| Espaços de cor | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Canais e Estrutura | Formas vetoriais de resolução ilimitada, curvas de Bézier, tipografia e máscaras de opacidade |
| Dimensões Máximas | Independente de resolução (pode ser ampliado para qualquer área de visualização sem pixelização) |
| Transparência | Transparência alfa totalmente variável e modos de mesclagem CSS |
| Streaming e Progressivo | O analisador XML do navegador permite analisar progressivamente o fluxo de texto |
Matriz de comparação técnica: SVG e formatos concorrentes
| Atributo técnico | SVG (Atual) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Modelo de renderização | DOM vetorial em modo retido | Canvas bitmap em modo imediato | Contêiner de página fixa em modo retido | Grade de pixels raster |
| Estilos e CSS | Totalmente estilizado por meio de classes e variáveis CSS | Exige redesenhar o canvas por meio da API JavaScript | Sem estilização CSS dinâmica | Pixels raster fixos |
| Escalabilidade infinita | Sim (curvas vetoriais matemáticas) | Requer dimensionamento manual de resolução | Sim (elementos vetoriais) | Não (pixeliza quando ampliado) |
| Interatividade | Eventos nativos do DOM (passar o cursor, clicar e animar) | Exige cálculos manuais para detectar os elementos atingidos | Documento estático | Exige um mapa de imagem ou canvas |
Modos comuns de corrupção e guia de recuperação com editor hexadecimal
O navegador exibe XML Parsing Error: unclosed token or mismatched tag.
Causa principal: Sintaxe XML malformada, tags de fechamento ausentes ou sinais de e comercial sem escape ("&" em vez de "&").
Recuperação: Valide o arquivo com um validador XML (xmllint file.svg) e corrija as tags sem correspondência.
Análise de segurança e vetores de ataque a analisadores
Como o SVG é um XML executável que suporta tags '<script>' e entidades externas, ele apresenta riscos significativos de XSS e SSRF se SVGs não confiáveis forem exibidos.
Vetores de ataque conhecidos
- Script entre sites armazenado (XSS) por meio de tags <script> incorporadas ou manipuladores de eventos onload=.
- Ataques de entidade externa XML (XXE) que leem arquivos locais do servidor quando o SVG é analisado em servidores de back-end.
- A expansão de entidades XML do tipo Billion Laughs pode causar negação de serviço.
Melhores práticas defensivas: Sempre sanitize SVGs com DOMPurify antes de incorporá-los ou sirva-os com a política Content-Security-Policy: default-src none. Também é possível usar tags <img>, que desativam scripts automaticamente.
Origens históricas e marcos
Principais vantagens
- Escala infinitamente sem perder resolução: linhas e tipografia permanecem nítidas em qualquer tamanho de tela ou impressão.
- Arquivos muito pequenos para logotipos, ícones e elementos de interface do usuário.
- Pode ser totalmente programado e estilizado com CSS e JavaScript no DOM do navegador.
Limitações técnicas e desvantagens
- Inadequado para fotos ou imagens complexas com tons contínuos.
- Caminhos vetoriais complexos com milhares de nós podem causar atraso na renderização da CPU e alto consumo de bateria.
- Por ser baseado em XML, permite scripts incorporados e exige sanitização rigorosa antes da renderização de arquivos não confiáveis.
Curiosidades técnicas
- Como o SVG é texto XML simples, compactá-lo com Gzip (gerando um arquivo .svgz) costuma reduzir seu tamanho em 70% - 80%.
- O atributo viewBox define uma área de coordenadas abstrata que é mapeada dinamicamente para os pixels físicos da tela.
- Os primeiros navegadores não tinham suporte nativo a SVG. Por isso, a Adobe distribuiu o plugin Adobe SVG Viewer até que o suporte nativo se consolidasse, por volta de 2011.
Perguntas técnicas frequentes
Arquivos SVG podem conter código malicioso?
Sim. Como SVG é XML válido, pode conter JavaScript incorporado (<script>) que é executado se o arquivo for carregado diretamente no navegador ou aberto como elemento <svg> embutido. Servir SVGs com uma tag <img> neutraliza automaticamente a execução de scripts.
Quando devo usar SVG em vez de PNG?
Use SVG para ícones, logotipos, gráficos, ilustrações e tipografia que precisam ser ampliados com nitidez em telas de qualquer tamanho e ocupar pouco espaço. Use PNG ou WebP para fotos.
Como posso otimizar arquivos SVG grandes ou complexos?
Você pode limpar caminhos vetoriais removendo metadados redundantes, comentários de editores (do Inkscape ou Illustrator), grupos invisíveis e declarações de namespace não usadas, com ferramentas como o SVGO ou a compactação de SVG.
Conversões de SVG relacionadas
A conversão de arquivos vetoriais SVG para imagens rasterizadas PNG transforma gráficos escaláveis baseados em código em grades fixas de pixels para compatibilidade universal com aplicativos.
Incorpore imagens raster PNG em um contêiner SVG baseado em XML para redimensioná-las de forma responsiva na web e integrá-las a layouts vetoriais.
Converta registros antigos de desenhos vetoriais GDI de 16 bits do Windows em caminhos SVG modernos e escaláveis, sem perda de resolução.
Converta gráficos EMF de 32 bits do Windows em vetores SVG limpos e responsivos para a web e softwares de design.
A conversão de um desenho DXF para SVG transforma dados vetoriais de engenharia complexos em gráficos XML leves, que podem ser usados em navegadores e editores vetoriais.
A conversão de SVG para DXF transforma gráficos vetoriais prontos para a web em coordenadas matemáticas precisas, usadas por softwares de CAD.
Compartilhe um logotipo ou uma ilustração SVG em um PDF de uma página. Os caminhos escaláveis viram uma imagem de resolução fixa, sem detalhes vetoriais ao ampliar.