O que é um arquivo SVG? (E como abrir, usar e criar um)

Um arquivo SVG (Scalable Vector Graphics) é uma imagem feita de matemática e código em vez de uma grade de pixels. Como ele armazena a imagem como formas (linhas, curvas e preenchimentos), e não como pontos coloridos, continua nítido em qualquer tamanho, de um pequeno ícone de app até um outdoor inteiro, e geralmente tem um tamanho de arquivo pequeno. Você provavelmente já encontrou SVGs como logos, ícones de sites e arquivos de corte para Cricut.

Este é um guia simples para quem acabou de se deparar com um SVG: o que ele realmente é, o que existe dentro dele, em que ele funciona bem ou mal, como abrir um e como criar um a partir de uma imagem que você já tem. Não é preciso ter experiência com desenvolvimento web.

A versão curta

• Um SVG armazena uma imagem como formas descritas em código, não pixels, então pode ser ampliado para qualquer tamanho sem ficar borrado.
• Ele é ótimo para logos, ícones, ilustrações simples e trabalhos para Cricut ou impressão. Ele não é uma boa escolha para fotos.
• Abra um SVG em qualquer navegador, em um app de design (Illustrator, Inkscape, Figma, Canva) ou até em um editor de texto simples.
• Crie um SVG desenhando em um software vetorial ou convertendo uma imagem que você já tem em SVG.

SVG vs. uma imagem comum (PNG ou JPG)

Um PNG ou JPG é uma imagem raster: uma grade fixa de pixels coloridos, como um mosaico. Amplie bastante e você verá os quadradinhos, que é por isso que um logo salvo como PNG fica borrado quando você aumenta demais.

Um SVG é uma imagem vetorial: um conjunto de instruções que diz "desenhe um círculo aqui, preencha de laranja, desenhe esta curva ali". Como a imagem é redesenhada a partir dessas instruções toda vez, ela fica nítida em qualquer tamanho. Essa única diferença é todo o atrativo. (Para uma explicação completa de quando usar cada formato, veja PNG vs SVG.)

O que realmente existe dentro de um arquivo SVG

Aqui está a parte que surpreende muita gente: um SVG é texto. Abra um no Bloco de Notas ou em qualquer editor de código e você consegue ler. Por baixo, ele é XML, um formato de texto com tags, em que cada forma é uma linha de código. Um SVG simples de um círculo laranja fica assim:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

Esse é o arquivo inteiro. circle desenha a forma, cx/cy posicionam o círculo, r define o raio e fill define a cor. Como é texto simples, um SVG é pequeno, o navegador consegue renderizar instantaneamente e você pode ajustar uma cor trocando uma palavra. SVG é um padrão aberto mantido pelo W3C desde o fim dos anos 1990, e todos os navegadores modernos têm suporte a ele.

Para que SVGs são usados

SVGs brilham sempre que um gráfico precisa continuar nítido em tamanhos diferentes ou ser editado como formas:

• Logos. Um único SVG funciona em um cartão de visita e em um banner, sem precisar de um arquivo separado para cada tamanho.
• Ícones e gráficos para sites. Botões, setas e ilustrações simples continuam nítidos em qualquer tela e carregam rápido.
• Cricut e máquinas de corte. SVG é o formato padrão de arquivo de corte. A máquina segue os traçados para cortar vinil, papel ou HTV. (Preparar arquivos SVG para Cricut cobre esse processo de ponta a ponta.)
• Impressão e sinalização. Um vetor pode ser ampliado para qualquer tamanho físico sem pixelar.

Em que SVGs não são bons

SVGs são feitos para arte gráfica plana, então não são uma boa escolha para fotografias. Uma foto tem milhões de cores com transições sutis e sem regiões planas, e forçá-la a virar formas gera uma versão posterizada, com aparência de pintura, ou um arquivo enorme e bagunçado. Se você está pensando em vetorizar uma foto, leia primeiro o que realmente acontece quando você converte uma foto para SVG. Para detalhes fotográficos reais, mantenha o JPG ou PNG.

Como abrir um arquivo SVG

Você tem três opções fáceis, dependendo do que quer fazer:

• Só visualizar: arraste o arquivo para qualquer navegador. Ele renderiza na hora, sem precisar de software.
• Editar visualmente: abra em um app de design como Inkscape (gratuito), Illustrator, Figma ou Canva. (Como editar um SVG mostra como recolorir e remodelar.)
• Ver ou ajustar o código: abra em um editor de texto simples, como o Bloco de Notas ou o VS Code.

Um detalhe que confunde muita gente: o Explorador de Arquivos do Windows não mostra miniatura de SVGs por padrão, então o arquivo pode parecer vazio na pasta. Isso não significa que ele está quebrado. Abra no navegador e ele aparecerá normalmente.

Como criar um SVG

Há dois caminhos, e o caminho certo depende do seu ponto de partida.

Desenhar do zero. Crie seu logo, ícone ou ilustração em um software vetorial (Inkscape, Illustrator, Figma ou Canva) e exporte como SVG. Isso dá o resultado mais limpo, porque o arquivo já nasceu vetorial.

Converter uma imagem que você já tem. É disso que a maioria das pessoas realmente precisa. Se seu logo ou arte existe apenas como PNG ou JPG, você transforma em SVG ao vetorizar a imagem, redesenhando os pixels como formas editáveis. (O que é vetorização de imagem explica o processo.)

Como isso funciona com o PerfectVector

Se você tem um PNG ou JPG e precisa de um SVG de verdade, o caminho é a conversão, e é isso que o PerfectVector faz. Envie um logo, ícone ou ilustração plana e ele reconstrói a arte como um SVG limpo, com poucos nós e cores editáveis, pronto para web, impressão ou máquina de corte. Você pode transformar sua imagem em SVG e conferir o resultado por conta própria. Converta suas primeiras imagens grátis, sem precisar de cartão de crédito.

Ele funciona melhor nos mesmos tipos de imagem para os quais o próprio SVG é indicado: arte gráfica plana e logos. Para uma foto detalhada, nenhum conversor vai entregar um vetor verdadeiramente fotográfico, e nós vamos avisar isso em vez de fingir o contrário.

Uma observação rápida de segurança

Como um SVG pode conter código, em teoria ele pode carregar um script, da mesma forma que uma página web. Visualizar um SVG em um navegador ou app de design é seguro, e SVGs de fontes confiáveis não têm problema. Apenas trate um SVG aleatório de uma fonte desconhecida como trataria qualquer arquivo desconhecido, e não incorpore um no seu site sem saber de onde ele veio.

FAQ

Para que serve um arquivo SVG? Logos, ícones de sites, botões, ilustrações simples e arquivos de corte para máquinas como Cricut. Sempre que um gráfico precisa continuar nítido em tamanhos diferentes ou ser editado como formas, um SVG é uma ótima escolha. Ele é muito usado na web porque os arquivos são pequenos e podem ser ampliados sem perder qualidade.

Como faço para abrir um arquivo SVG? Arraste para qualquer navegador para visualizar, abra em um app de design como Inkscape, Illustrator, Figma ou Canva para editar visualmente, ou abra em um editor de texto como o Bloco de Notas para ver o código. Observe que o Explorador de Arquivos do Windows não mostra miniatura de SVGs por padrão, então um ícone que parece vazio não significa que o arquivo está quebrado.

Como crio um arquivo SVG? Você pode desenhar em um software vetorial (Inkscape, Illustrator, Figma ou Canva) e exportar como SVG, ou converter uma imagem que você já tem, como um logo em PNG ou JPG, em SVG ao vetorizá-la. Desenhar do zero dá o resultado mais limpo; converter é o caminho rápido quando você só tem um arquivo raster.

Um arquivo SVG é um arquivo vetorial? Sim. SVG significa Scalable Vector Graphics, e armazena imagens como formas vetoriais em vez de pixels. É exatamente por isso que ele pode ser ampliado para qualquer tamanho sem perder qualidade.

Qual é a diferença entre um SVG e um PNG ou JPG? Um PNG ou JPG é feito de pixels e fica borrado quando é ampliado além da sua resolução. Um SVG é feito de formas e continua nítido em qualquer tamanho. PNG e JPG são melhores para fotos; SVG é melhor para logos, ícones e gráficos.

Posso abrir um arquivo SVG no Microsoft Word ou Office? Sim. O Microsoft 365 e versões recentes do Office permitem inserir arquivos SVG e até recolorir ou mudar o estilo dentro de um documento, o que é útil para logos e ícones em relatórios e slides.

---

Um SVG é simplesmente uma imagem construída com formas e código em vez de pixels, e é isso que permite que ele continue nítido em qualquer lugar e permaneça editável. Se o seu ainda existe apenas como PNG ou JPG, converta-o em um SVG limpo e você terá um arquivo que pode ampliar, recolorir e cortar sem nunca ficar borrado.