O que é SVG? Guia do formato vetorial

O SVG é um formato de imagem feito de instruções de desenho, e não de pixels. Quando um logotipo, ícone ou gráfico é salvo em SVG, o arquivo contém comandos como "desenhe uma curva deste ponto até aquele e preencha com esta cor". É por isso que o SVG fica nítido em qualquer tamanho, costuma ser minúsculo e pode ser aberto e editado em um editor de texto. Este artigo mostra o lugar do SVG entre os padrões do W3C, a estrutura do arquivo, o suporte em navegadores e programas, os riscos de segurança e como converter entre SVG e PNG ou JPG.

O que é SVG?

SVG (Scalable Vector Graphics) é um padrão do W3C baseado em XML para descrever gráficos vetoriais bidimensionais. A extensão é .svg e o tipo MIME é image/svg+xml. Uma variante comprimida com gzip usa a extensão .svgz.

Os formatos raster (JPG, PNG, WebP) guardam uma imagem como uma grade fixa de pixels; ao ampliá-la, os pixels ficam visíveis. O SVG descreve formas matematicamente, e o navegador ou programa as redesenha na resolução que a tela tiver. O guia de formatos de imagem da MDN considera o SVG uma escolha ideal para imagens que podem ser representadas como comandos de desenho, principalmente quando o tamanho de exibição é desconhecido ou variável, e observa que ele geralmente não é útil para fotografias.

Histórico: SVG 1.0, 1.1 e SVG 2

• 4 de setembro de 2001: o SVG 1.0 foi publicado como Recomendação do W3C.
• 14 de janeiro de 2003: o SVG 1.1 virou Recomendação. A versão 1.1 dividiu a linguagem em módulos, o que facilitou definir subconjuntos como os perfis para dispositivos móveis.
• 16 de agosto de 2011: foi publicada a Segunda Edição do SVG 1.1. É a versão estável em que os navegadores se baseiam hoje.
• SVG 2: segundo o histórico de publicações do W3C, os rascunhos de trabalho surgiram a partir de 2012 e o primeiro Candidate Recommendation Snapshot foi publicado em 15 de setembro de 2016. O snapshot mais recente é de 6 de outubro de 2026; o documento ainda está no estágio de Candidate Recommendation.

O SVG 2 parte da Segunda Edição do 1.1 e busca uma integração melhor com HTML e CSS. Alguns temas, como filtros, máscaras e fontes, foram para módulos separados de CSS e FX. Na prática, os navegadores implementam partes do SVG 2, então não presuma que todo recurso funciona em todo lugar.

Estrutura de um arquivo SVG

Um arquivo SVG simples tem esta cara:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Sistema de coordenadas: viewBox, width e height

O viewBox define o sistema de coordenadas interno do desenho (de 0 a 100 aqui). width e height definem quanto espaço o desenho ocupa na página. Um SVG com viewBox se ajusta proporcionalmente a qualquer tamanho que você der no CSS. Arquivos sem viewBox podem ser cortados ao serem redimensionados, um dos erros mais comuns em logotipos.

Elementos principais

• Formas: rect, circle, ellipse, line, polyline, polygon e path, que desenha qualquer coisa.
• Texto: text e tspan. O texto continua selecionável e pesquisável, mas, se a fonte não existir no dispositivo de quem vê, uma fonte substituta é usada.
• Agrupamento e reutilização: g, defs, symbol, use. Conjuntos de ícones costumam vir reunidos como elementos symbol em um único arquivo.
• Pintura: cores sólidas, gradientes lineares e radiais, padrões, caminhos de recorte, máscaras e filtros (desfoque, sombra projetada).
• Estilo e animação: o CSS pode estilizar o SVG; animações CSS e elementos de animação SMIL adicionam movimento.
• Conteúdo incorporado: image para imagens raster, foreignObject para HTML e script para JavaScript.

Cor, transparência, camadas e páginas

A transparência é nativa no SVG: tudo o que não é desenhado fica vazio, e opacity e fill-opacity definem a semitransparência. As camadas são representadas por grupos g; o Inkscape e o Illustrator guardam suas camadas assim. As cores são sRGB por padrão, e não há limite de profundidade de bits no sentido habitual, porque as cores são escritas como números. O SVG não é um formato de documento com várias páginas; para desenhos com várias páginas, o PDF é mais adequado.

Suporte em navegadores, sistemas e programas

Segundo a MDN, Chrome, Edge, Firefox, Opera e Safari suportam SVG. Você pode usá-lo via <img>, como background-image no CSS, inline dentro do HTML ou com <object> e <iframe>. Ferramentas vetoriais como Inkscape, Adobe Illustrator, Affinity Designer e Figma leem e gravam SVG, e as versões atuais do Microsoft Office permitem inserir gráficos SVG.

Em outros lugares o suporte é fraco: muitas redes sociais, clientes de e-mail, aplicativos de mensagens e formulários de upload rejeitam SVG ou não mostram prévia. Parte do motivo é o risco de segurança descrito abaixo.

Segurança: trate o SVG como um documento

O SVG é um documento XML e pode conter um elemento script, atributos de evento (como onload) e referências externas. A página "SVG as an image" da MDN explica que, quando o SVG é usado via <img> ou como fundo no CSS, os navegadores desativam o JavaScript e não carregam recursos externos, como imagens ou folhas de estilo. Essas restrições não valem quando o arquivo é aberto diretamente ou incorporado com <iframe>, <object> ou <embed>.

A consequência prática: se um site permite que usuários enviem arquivos SVG e os serve diretamente do próprio domínio, um script embutido no arquivo pode rodar no contexto desse site (XSS armazenado). Medidas típicas:

• Passe os SVG enviados por um sanitizador que remova script, atributos de evento, foreignObject e links externos.
• Sirva arquivos de usuários a partir de um domínio separado, com uma Content-Security-Policy rígida, ou como download (Content-Disposition: attachment).
• Se você não precisa do vetor, converta os SVG enviados para PNG no servidor e publique só a versão raster.

Usos típicos

• Logotipos e materiais de marca: um único arquivo fica nítido do cartão de visita ao outdoor.
• Ícones de interface: podem ser coloridos com CSS e nunca ficam borrados em telas de alta densidade.
• Gráficos, mapas e diagramas: bibliotecas como D3.js desenham dados direto em elementos SVG.
• Favicons: os navegadores atuais aceitam favicons em SVG via <link rel="icon" type="image/svg+xml">.
• Corte e impressão: cortadoras a laser, plotters de recorte de vinil e máquinas de bordado trabalham com caminhos vetoriais.

Pontos fortes e fracos

Problemas comuns e como resolvê-los

Um site ou aplicativo não aceita SVG

A solução mais fácil é uma cópia em PNG. Nosso conversor de SVG para PNG renderiza o desenho em um PNG transparente no seu navegador, na largura em pixels que você escolher. Seu arquivo não é enviado e nunca sai do seu dispositivo.

O texto aparece em outra fonte

O SVG não incorpora fontes por padrão; se o sistema de quem vê não tiver a fonte, uma substituta é usada. Em contexto de imagem, fontes externas também não são carregadas. Converta o texto em contornos na sua ferramenta de design ou incorpore a fonte.

O SVG fica no tamanho errado ou cortado na página

Sem um viewBox, ou com width/height fixos, o redimensionamento não se comporta como esperado. Adicione ao elemento svg raiz um viewBox que cubra o desenho e defina o tamanho no CSS.

O arquivo é maior do que o esperado

As ferramentas de design gravam no SVG metadados do editor, casas decimais em excesso e camadas ocultas. Um otimizador como o SVGO remove tudo isso. A compressão Gzip ou Brotli no servidor reduz ainda mais o SVG, que é baseado em texto.

Preciso do meu logotipo em PNG como SVG

Uma imagem raster não pode ser realmente "convertida" em vetor; o que as ferramentas fazem é vetorização (tracing): as formas são detectadas e redesenhadas como contornos. Nossas ferramentas de PNG para SVG e de JPG para SVG vetorizam com 2 a 8 cores. Os resultados são bons para logotipos e desenhos simples e grosseiros para fotos. Com essas ferramentas, o arquivo é enviado aos nossos servidores por uma conexão segura, vetorizado lá e excluído em no máximo 30 minutos.

Dicas de conversão

• Saiba o tamanho final: ao renderizar SVG para PNG, escolha o maior tamanho em que a imagem será exibida, em dobro para telas de alta densidade. Na nossa ferramenta, o lado maior pode ter até 4096 pixels; se você deixar a largura em branco, desenhos pequenos são ampliados até o lado maior ter 1024 pixels.
• JPG para conteúdo fotográfico: se o SVG incorpora uma foto e você não precisa de transparência, JPG ou WebP ficam menores que PNG; você pode converter o PNG depois no conversor de imagens.
• Favicons: se o seu logotipo é um SVG, o gerador de favicon o aceita e adiciona icon.svg ao pacote.
• Origem limpa para vetorizar: ao criar SVG a partir de PNG, comece com uma imagem de alta resolução, com cores chapadas e sem ruído.

Perguntas frequentes

Qual é a diferença entre SVG e PNG?

Um PNG tem um número fixo de pixels e fica borrado ao ser ampliado. Um SVG descreve formas e é redesenhado com nitidez em qualquer tamanho. O SVG serve para logotipos e ícones; PNG ou JPG servem para fotos e capturas de tela.

Um arquivo SVG pode conter vírus?

O SVG não é um programa executável, mas pode incorporar JavaScript. Os scripts não rodam quando o SVG é exibido como imagem (<img>), mas podem rodar quando o arquivo é aberto diretamente no navegador. Examine SVG de origem desconhecida em um visualizador ou converta para PNG, em vez de abri-lo diretamente.

Posso inserir SVG no Word ou no PowerPoint?

As versões atuais do Microsoft Office permitem inserir SVG. Em versões antigas, ou se você for compartilhar o arquivo com outros programas, uma cópia em PNG é mais segura.

Converter SVG para PNG perde qualidade?

O PNG é sem perda, mas o desenho fica preso a um tamanho em pixels. Escolha uma largura grande o suficiente e você não notará perda; ampliar o PNG depois vai deixá-lo borrado.

O SVG suporta animação?

Sim. O movimento pode vir de animações CSS, elementos de animação SMIL e JavaScript. Ao converter para PNG, você obtém um único quadro.

Fontes

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 publication history
• MDN: SVG as an image
• MDN: Image file type and format guide