O que é SVG?

SVG é o formato padrão de imagem vetorial para a web. A sigla vem do inglês Scalable Vector Graphics, que significa Gráficos Vetoriais Escaláveis. Diferente das fotografias e da maioria dos formatos de imagem tradicionais, um arquivo SVG não guarda pixels, e sim formas geométricas: linhas, círculos, retângulos, curvas e traços descritos por coordenadas matemáticas. Por isso ele pode ser ampliado ou reduzido em qualquer tamanho sem ficar borrado, ocupa muito pouco espaço e pode ser editado com código, exatamente como uma página web.

Neste artigo explicamos o que é SVG, em que uma imagem vetorial difere de uma imagem de bitmap, quais são as suas principais vantagens, como é um arquivo SVG por dentro, de que formas ele pode ser usado em uma página web, quando vale a pena escolhê-lo e com quais ferramentas ele é criado.

O que significa SVG e para que serve

SVG é um formato de imagem baseado em XML, criado e mantido como padrão aberto pelo W3C, o mesmo órgão que define o HTML. Em vez de armazenar uma grade de pontos coloridos, um SVG descreve a imagem com etiquetas de texto que indicam quais formas desenhar e em que posição: um círculo com tal centro e tal raio, um retângulo com tal canto e tal tamanho, uma curva que liga tais pontos. O navegador lê essas instruções e desenha a imagem na tela em tempo real, sem precisar de programas externos ou complementos.

Como é um padrão aberto, qualquer programa pode ler e escrever arquivos SVG sem pagar licenças, e qualquer navegador moderno os exibe de forma nativa. Por ser texto estruturado, o SVG se comporta mais como um documento do que como uma fotografia: dá para abri-lo em um editor de código, mudar uma cor alterando um único valor e a mudança aparece na hora. Essa é a razão pela qual o mesmo arquivo fica nítido na tela pequena de um celular e também em um outdoor: o navegador recalcula as formas em cada tamanho.

Diferença entre imagem vetorial e imagem de bitmap

Para entender o que é SVG, vale compará-lo com os formatos que todo mundo conhece, como JPG ou PNG. Essas imagens são de bitmap, também chamadas de rasterizadas: são formadas por uma grade de pixels, e cada pixel guarda uma cor. Se forem ampliadas demais, começam a aparecer os quadradinhos e a imagem fica serrilhada ou borrada, porque a informação disponível não basta para definir mais detalhe do que ela já tem.

Uma imagem vetorial como o SVG funciona ao contrário: ela não armazena pontos de cor, e sim a descrição geométrica de cada forma. Um círculo é guardado como centro, raio e cor de preenchimento, independentemente do tamanho em que será exibido. Ao ampliá-lo, o programa simplesmente recalcula a forma com as mesmas proporções e o resultado continua igualmente nítido. A tabela a seguir resume as principais diferenças:

Aspecto	SVG (vetorial)	Bitmap (JPG, PNG)
Unidade básica	Formas geométricas e coordenadas	Pixels de cor
Redimensionamento	Infinito, sem perda de qualidade	Fixo; ao ampliar, serrilha
Peso do arquivo	Muito leve em gráficos simples	Cresce com a resolução
Nitidez em qualquer tamanho	Sempre nítido	Só na resolução original
Edição com código	Sim, é texto legível	Não, exige programas de edição
Uso típico	Logos, ícones, ilustrações, gráficos	Fotografias e cenas complexas

Em resumo: o bitmap guarda o resultado de uma imagem e o vetorial guarda a receita para desenhá-la. Por isso o SVG se adapta a qualquer tela sem perder definição, enquanto uma foto em bitmap só fica perfeita no tamanho para o qual foi criada.

Vantagens de usar SVG na web

O formato SVG virou a opção preferida para muitos elementos de design web porque reúne vantagens que nenhum formato de bitmap oferece ao mesmo tempo:

Redimensionamento perfeito: o mesmo arquivo serve para um ícone de 16 pixels e para um banner de tela cheia, sem gerar versões duplicadas nem perder nitidez.
Peso muito leve: um ícone ou logotipo simples costuma ocupar menos de um kilobyte, bem menos que o equivalente em PNG, o que acelera o carregamento da página.
Editável com código: por ser texto, dá para mudar a cor, a espessura de um traço ou a forma de uma figura em um editor simples, sem reabrir o programa de design.
Animável: as formas SVG podem ser animadas com CSS ou JavaScript, permitindo criar transições, movimentos e interações sem usar vídeo nem bibliotecas pesadas.
Texto real dentro da imagem: se um logotipo inclui palavras, o navegador as trata como texto selecionável, o que melhora a acessibilidade e o posicionamento nos buscadores.
Fundo transparente e efeitos: suporta transparência, gradientes, sombras, filtros e máscaras aplicados com CSS a formas individuais.
Padrão e compatível: funciona em todos os navegadores modernos, pode ser salvo como arquivo, inserido no HTML ou gerado a partir de JavaScript.

Como é um arquivo SVG por dentro

Um arquivo SVG é texto simples com extensão .svg que contém etiquetas XML. Para ter uma ideia, este é um exemplo bem simples: um círculo azul com um quadrado branco no centro, desenhado em uma tela de cem por cem unidades.

</svg>

Cada etiqueta tem um significado claro. A etiqueta raiz svg define a tela e o seu sistema de coordenadas por meio do atributo viewBox, que indica a área visível; o atributo xmlns declara que se trata de um documento SVG. A etiqueta circle desenha um círculo: cx e cy marcam a posição do centro, r o raio e fill a cor de preenchimento. A etiqueta rect desenha um retângulo com o canto superior esquerdo em x e y, e com a largura e a altura indicadas em width e height. Existem muitas outras etiquetas, como path para curvas complexas, line, polygon, ellipse ou text, mas a ideia é sempre a mesma: formas descritas por coordenadas e atributos.

Como usar SVG em uma página web

Existem três formas habituais de incluir um gráfico SVG em uma página, e cada uma tem o seu uso recomendado:

Como arquivo externo em uma etiqueta img: salva-se o SVG em um arquivo com extensão .svg e faz-se referência a ele como a qualquer outra imagem. Por exemplo: <img src="logo.svg" alt="Logotipo da empresa" />. Essa é a forma mais simples e permite que o navegador guarde o arquivo em cache, além de oferecer o texto alternativo para acessibilidade. A limitação é que o interior do gráfico não pode ser modificado com CSS a partir de fora.
Inserido diretamente no HTML: cola-se o código SVG dentro da página, por exemplo: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" /></svg>. Por fazer parte do documento, cada forma pode ser colorida, animada ou estilizada com CSS e manipulada com JavaScript, o que o torna ideal para ícones interativos.
Como fundo CSS: usa-se o SVG como imagem de fundo de um elemento, com regras como .icono { background-image: url("icono.svg"); }. É prático para botões, fundos decorativos ou conjuntos de ícones, e permite ajustar tamanho e posição pela folha de estilos.

Quando usar SVG e quando não usar

O SVG é a melhor opção para qualquer gráfico formado por formas planas, traços e cores definidas. Os casos mais comuns são:

Logotipos e marcas, que precisam ficar nítidos em cartões de visita, telas e outdoors.
Ícones e pictogramas de interfaces, menus e botões.
Gráficos de dados, diagramas e infográficos, que ainda podem ser atualizados com JavaScript.
Ilustrações planas, elementos decorativos e mapas esquemáticos.

Por outro lado, o SVG não é adequado para fotografias. Uma foto contém milhões de tons, gradientes sutis e texturas irregulares que não podem ser descritos com algumas poucas formas: convertê-la em vetorial produziria um arquivo enorme e pesado, difícil de carregar, ou uma versão simplificada que perde todo o realismo. As câmeras capturam pixels, então para fotos é melhor continuar usando formatos de bitmap como JPG, WebP ou PNG. Como regra prática: se a imagem é uma foto ou contém texturas fotográficas, use bitmap; se é um desenho com formas e cores definidas, use SVG.

Ferramentas para criar e editar SVG

Qualquer SVG pode ser escrito à mão em um editor de texto, porque no fim das contas ele é código. Para trabalhos mais complexos existem ferramentas que desenham por nós e exportam o resultado nesse formato:

Editores vetoriais de desktop: o Inkscape é gratuito e de código aberto; o Adobe Illustrator e o Affinity Designer são opções profissionais pagas.
Ferramentas de design de interface: Figma e Penpot permitem desenhar ícones e componentes e exportá-los como SVG prontos para a web.
Editores de código: programas como o VS Code mostram o código SVG com cores e permitem pré-visualizá-lo, úteis para ajustar detalhes ou gerar gráficos com scripts.
Otimizadores: ferramentas como o SVGO limpam o código gerado pelos programas de design e reduzem o peso do arquivo, um passo recomendado antes de publicar.
Bibliotecas de ícones: coleções de código aberto como Feather ou Bootstrap Icons oferecem milhares de SVG prontos para baixar e personalizar.

Uma boa forma de aprender é pegar um ícone SVG existente, abri-lo em um editor de código e alterar cores, tamanhos e posições para ver como cada atributo responde. Em pouco tempo você entende a lógica do formato e começa a aproveitar toda a sua flexibilidade.

Conclusão

O SVG é o formato de imagem vetorial padrão da web: leve, escalável sem limites, animável, editável com código e compatível com todos os navegadores modernos. Para logotipos, ícones, gráficos e ilustrações feitas de formas, ele é quase sempre a melhor escolha; para fotografias, por outro lado, os formatos de bitmap continuam mandando. Saber o que é SVG e quando usá-lo ajuda a criar páginas mais rápidas, mais nítidas e mais fáceis de manter.

Se você quer continuar aprendendo sobre tecnologia aplicada ao trabalho do dia a dia, no Kardex Tauro você encontra mais guias práticos explicados passo a passo.

Labels:

#svg #imagem vetorial #gráficos vetoriais