Formato de arquivo SVG explicado: o que é, como funciona e quando usá-lo

Os arquivos SVG estão por toda parte na internet, dando vida discretamente aos ícones, logotipos, gráficos e ilustrações que fazem os sites de hoje parecerem nítidos e modernos. Eles são o motivo pelo qual um ícone aparece nítido em uma tela retina. São o motivo pelo qual o logotipo de uma empresa permanece perfeito, não importa o quanto você o amplie. E, ainda assim, a menos que você trabalhe com design ou desenvolvimento, o SVG talvez continue sendo um daqueles formatos de arquivo misteriosos sobre os quais você já ouviu falar, mas nunca entendeu de verdade.

Vamos resolver isso.

Então… o que é, afinal, um arquivo SVG?

SVG significa Scalable Vector Graphics. É um formato de gráficos baseado não em pixels, mas em matemática. Em vez de armazenar uma imagem como uma grade de pontos coloridos, como fazem o PNG ou o JPG, um SVG descreve formas. Linhas, curvas, círculos, caminhos. Seu navegador lê essas instruções e desenha a imagem na tela, de forma perfeita e limpa, sempre.

Essa simples mudança – de pixels para fórmulas – muda tudo. Isso significa que um SVG pode ser dimensionado para qualquer tamanho sem nunca ficar borrado. Um ícone de 16 pixels, um logotipo de 300 pixels, uma impressão de 2 metros de largura – o mesmo arquivo dá conta de tudo isso. Para logotipos, ilustrações e elementos de UI, o SVG é difícil de superar.

Por que o SVG existe

Antes do SVG, a web era construída principalmente com imagens baseadas em pixels. Os designers exportavam ícones em uma dúzia de tamanhos para dar suporte a diferentes telas. Os logotipos ficavam borrados em telas retina. Os elementos de UI tinham que ser fatiados em PNGs estáticos. Tudo parecia mais pesado do que precisava ser.

O SVG resolveu todo o problema de uma só vez. Um arquivo. Infinitos tamanhos. Sempre nítido.

E, como o SVG é baseado em padrões web abertos, você pode estilizá-lo com CSS, animá-lo, criar scripts para ele ou incorporá-lo diretamente no HTML. É um dos poucos formatos que se encaixa confortavelmente tanto no mundo do design quanto no do desenvolvimento.

SVG vs PNG

O PNG é um formato bitmap. Ele armazena pixels. É fantástico para capturas de tela, recursos de UI, gráficos com muito texto ou qualquer coisa em que você queira nitidez perfeita em um tamanho específico. Ele oferece suporte a transparência e lida com gráficos planos de forma muito limpa.

O SVG, por sua vez, é feito de caminhos vetoriais. Ele não está atrelado a uma resolução. Você pode ampliar infinitamente e nunca verá uma borda desfocada. E, para artes simples, como ícones ou logotipos, os arquivos SVG tendem a ser muito menores do que os PNG.

Para ilustrações complexas, o PNG ainda pode ser melhor. Para qualquer coisa geométrica ou simbólica, o SVG é o rei.

SVG vs JPG

O JPG é ótimo para fotografias do mundo real: rostos, paisagens, comida, sombras, pôr do sol. Ele comprime de forma agressiva e, ainda assim, continua com boa aparência, e é por isso que está por toda parte na internet.

Mas o JPG é sempre baseado em pixels. Amplie o suficiente e você verá bordas quadriculadas e artefatos ruidosos. O JPG também não oferece suporte a transparência, o que o torna inadequado para logotipos ou elementos de UI.

O SVG é o oposto. Ele não foi feito para fotos de forma alguma, mas é perfeito para arte de linha, formas planas e gráficos limpos.

Para que servem os arquivos SVG

Assim que você reconhece os pontos fortes do SVG, começa a vê-lo por toda parte.
Cada ícone em um site bem projetado? Provavelmente um SVG.
Um logotipo de marca nítido que fica perfeito em uma tela 4K? SVG.
Um mapa, diagrama ou gráfico ilustrado que se anima conforme você rola a página? Também SVG.

O SVG é o padrão moderno para gráficos limpos e escaláveis em web design e trabalhos de UI. Os designers adoram porque ele permanece nítido. Os desenvolvedores adoram porque ele se comporta como parte da página.

Como abrir ou editar um arquivo SVG

Abrir um arquivo SVG é fácil. Qualquer navegador moderno consegue exibi-lo. Arraste um SVG para o Chrome, Safari, Firefox ou Edge e você verá a imagem instantaneamente.

É na edição que as coisas ficam interessantes. Como o SVG é um formato vetorial, você precisa de um software de edição vetorial. Ferramentas como Adobe Illustrator, Figma, Affinity Designer ou Inkscape podem abrir e modificar arquivos SVG. Você pode ajustar curvas, mudar cores, adicionar formas ou reescrever o desenho por completo.

E, como o SVG é apenas texto XML por baixo dos panos, tecnicamente você também pode abri-lo com um editor de texto simples. Não é a forma mais amigável de trabalhar, mas tudo dentro do arquivo é legível.

No iPhone ou iPad, os SVGs são visualizados no app Files, mas o gerenciamento mais aprofundado é limitado. Se você quiser armazenar, visualizar e organizar SVGs junto com seus outros arquivos, o Documents by Readdle oferece um gerenciador de arquivos completo que lida com gráficos, documentos, ZIPs e todo o resto do seu fluxo de trabalho.

Todos os navegadores oferecem suporte a SVG

Sim. O suporte dos navegadores é praticamente universal. Chrome, Firefox, Safari, Edge e navegadores móveis modernos entendem o SVG nativamente. Se um site ainda estiver usando ícones baseados em pixels em 2025, isso é uma decisão de design, não uma limitação técnica.

É possível animar SVG

Sim. O SVG é um dos formatos de imagem mais amigáveis à animação já criados. Os designers podem animar traços, formas, cores, rotações ou desenhos inteiros usando CSS ou JavaScript. É assim que muitos sites modernos criam aquelas animações sutis de desenho de linhas ou ícones que pulsam suavemente ou se transformam conforme você rola a página.

Você não consegue fazer isso com PNG ou JPG.

Como converter uma imagem SVG em JPG

Às vezes você precisa de uma versão em pixels da sua arte. Talvez um site exija o upload de um JPG. Talvez você precise de uma imagem achatada para um boletim informativo ou uma publicação nas redes sociais. Talvez uma ferramenta mais antiga não ofereça suporte a SVG de forma alguma.

Converter SVG em JPG é fácil. No Illustrator, Figma ou Inkscape, você pode exportar o SVG como JPG na resolução que quiser. No macOS, você pode até abrir o SVG no Preview e exportar a partir dali.

Se você não quiser instalar software, os conversores online tornam o processo ainda mais rápido. Você pode enviar um SVG para o documents.io, escolher JPG como formato de saída e baixar uma versão limpa e achatada em segundos. É ideal quando você precisa de uma conversão rápida sem mexer nas suas ferramentas de design. Você pode experimentar o conversor de SVG gratuitamente. 

Apenas lembre-se: o JPG não oferece suporte a transparência e será sempre baseado em pixels, então a imagem não será mais infinitamente escalável. Para bordas nítidas, o PNG costuma ser uma alternativa melhor do que o JPG.

O que torna o SVG único

O SVG é um daqueles formatos raros que parecem ao mesmo tempo futuristas e atemporais. Ele é matemático, editável, programável e independente de resolução. Funciona no tamanho de um ícone e no tamanho de um outdoor. Ele se comporta como código, mas parece design. E consegue ser leve fazendo tudo isso.

Assim que você começa a reconhecer o superpoder do SVG – gráficos nítidos em qualquer tamanho – você o percebe por toda parte. Os sites carregam mais rápido. Os logotipos nunca ficam borrados. Os ícones de UI parecem feitos à mão. Até as animações ficam mais fáceis.

O SVG é mais do que um formato de arquivo. É um padrão de design moderno.

Conclusão

O SVG é a resposta da web para gráficos nítidos e escaláveis. Se sua imagem precisa permanecer nítida, não importa o quão grande ela fique, o SVG é a escolha certa. Use-o para ícones, logotipos, diagramas, ilustrações e recursos de UI. Use PNG ou JPG para fotografias. E, quando você precisar converter ou gerenciar esses arquivos no celular ou no computador, ferramentas como documents.io e Documents by Readdle tornam todo o processo fácil.