SVG: o que é, conceitos-chave e uso no desenvolvimento web

O que é SVG?

SVG é um formato de gráficos vetoriais baseado em XML, introduzido em 2001 como recomendação do W3C. Ao contrário dos formatos raster, o SVG descreve imagens através de primitivas geométricas: pontos, linhas, curvas e polígonos. Um arquivo SVG é um documento XML de texto simples que pode ser lido, editado e compactado com ferramentas padrão.

A arquitetura SVG inclui vários conceitos-chave. viewBox define um sistema de coordenadas virtual independente das dimensões reais do elemento. Por exemplo, viewBox="0 0 100 100" cria uma grade quadrada 100×100, dentro da qual todas as coordenadas são fixas. Quando a largura ou altura do contêiner muda, o conteúdo escala proporcionalmente.

De acordo com a W3C SVG 2 Specification, a versão moderna do SVG suporta gradientes, máscaras, filtros, texto com posicionamento arbitrário, interatividade via JavaScript e animação via CSS e SMIL. O SVG está integrado ao DOM como um elemento HTML completo, permitindo controle programático sobre cada primitiva gráfica.

No desenvolvimento móvel, o SVG também é usado no iOS através do UIGraphicsImageRenderer e no Android através do VectorDrawable — ambos os formatos convertem descrições semelhantes a SVG em rasters acelerados por hardware na GPU.

História e evolução do formato SVG

O SVG 1.0 tornou-se recomendação do W3C em 2001, o SVG 1.1 em 2003 e o SVG 2.0 está em desenvolvimento desde 2012. A principal inovação do SVG 2 é a integração mais profunda com CSS, suporte para modos de composição e mesclagem, e a capacidade de usar SVG em HTML sem prefixos de namespace.

Embora o SVG 2 ainda não tenha atingido o status de Recomendação, os navegadores modernos já suportam a maior parte de sua funcionalidade. Chrome, Safari, Firefox e Edge têm suporte quase completo para SVG 1.1 e uma parte significativa do SVG 2.

Elementos básicos do SVG

O SVG fornece um conjunto de elementos para descrever gráficos bidimensionais. Cada elemento tem atributos que definem sua posição, tamanho e aparência visual. Os atributos podem ser definidos como atributos xml ou através de propriedades CSS.

• <rect> retângulo com atributos x, y, width, height, rx, ry (arredondamento de cantos).
• <circle> círculo com atributos cx, cy (centro) e r (raio).
• <ellipse> elipse com atributos cx, cy, rx, ry.
• <line> segmento de reta com atributos x1, y1, x2, y2.
• <polyline> linha poligonal com atributo points (lista de coordenadas).
• <polygon> polígono fechado com atributo points.
• <path> traçado arbitrário com atributo d (comandos: M, L, C, Q, A, Z).
• <text> elemento de texto com atributos x, y, font-size, font-family.

O elemento path é o elemento SVG mais poderoso e flexível. O atributo d contém uma sequência de comandos: M (moveTo), L (lineTo), C (curva cúbica de Bezier), Q (curva quadrática de Bezier), A (arco), Z (fechar traçado). Cada comando tem uma forma absoluta ou relativa (letra maiúscula ou minúscula).

O SVG também suporta agrupamento de elementos através de <g>. O grupo herda atributos visuais (fill, stroke, transform) para todos os elementos filhos. Isso permite aplicar um único estilo a um conjunto inteiro de formas e controlar sua posição através de um único transform.

SVG vs gráficos raster: comparação de formatos

A principal diferença entre SVG e os formatos raster (JPEG, PNG, WebP) é a forma de armazenar informação. O raster armazena a cor de cada pixel numa grelha de tamanho fixo. O SVG armazena comandos matemáticos para reproduzir formas. Esta diferença determina todas as vantagens e desvantagens dos formatos.

Segundo HTTP Archive, 2025, 68% dos sites usam SVG para ícones, 34% para ilustrações e 22% para logotipos. O tamanho médio de um ícone SVG é de 0.5–2 KB, enquanto um ícone raster de qualidade similar ocupa 5–20 KB em formato PNG.

O SVG não é adequado para fotografias e imagens raster complexas — o tamanho da descrição XML excederia o JPEG equivalente. Âmbitos de aplicação recomendados para SVG: ícones, logotipos, ilustrações, diagramas, gráficos, elementos de interface com design adaptável.

Quando escolher SVG versus formato raster

O SVG é a escolha ideal para elementos de interface que precisam parecer nítidos em ecrús Retina e em qualquer nível de zoom do navegador. O raster é para fotografias, texturas complexas e imagens com milhões de cores onde a descrição vetorial seria excessivamente complexa.

Abordagem híbrida — combinar SVG para elementos de interface e WebP/AVIF para conteúdo fotográfico — oferece o melhor equilíbrio entre qualidade e desempenho de carregamento da página.

SVG inline e estilização com CSS

SVG inline consiste em incorporar a marcação SVG diretamente num documento HTML, em vez de como um ficheiro separado através de <img> ou background-image. A vantagem do SVG inline é que os elementos SVG passam a fazer parte do DOM e podem ser estilizados via CSS, controlados via JavaScript e animados sem pedidos adicionais ao servidor.

Ao contrário de <img src="icon.svg">, onde o SVG está isolado no shadow DOM, o SVG inline herda as cores e fontes do documento pai. Isto permite implementar, por exemplo, a mudança de cor de um ícone ao passar o rato através da pseudoclasse CSS :hover sem carregar um ficheiro separado para cada estado.

Segundo CSS-Tricks, o SVG inline é a forma recomendada de usar ícones em aplicações web modernas. As propriedades CSS fill, stroke, stroke-width aplicam-se diretamente aos elementos SVG. Para personalização via CSS, é importante que o SVG original não tenha fill e stroke definidos como atributos inline — caso contrário, o CSS não poderá substituí-los.

• Vantagens: estilização via CSS, controlo com JS, sem pedidos HTTP, adaptabilidade do viewBox.
• Desvantagens: aumento do tamanho da página HTML, impossibilidade de armazenar em cache separadamente do HTML.
• Alternativa: sprites SVG — combinar vários SVG num único ficheiro e usar <use href="#id">.

Os sprites SVG resolvem o problema de cache: todos os ícones são agrupados num único ficheiro, o navegador carrega-o uma vez e os ícones individuais são acessados via <use> especificando o id do elemento desejado dentro do sprite.

Animação SVG: CSS e SMIL

Animação SVG com CSS é a forma mais comum e eficiente de animar gráficos vetoriais no navegador. Propriedades CSS como transform, opacity e fill aplicam-se aos elementos SVG tal como aos elementos HTML. Para animação ao longo de um traçado arbitrário, usa-se a propriedade CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) é um mecanismo de animação integrado no SVG, independente do CSS. Os elementos <animate>, <animateTransform> e <animateMotion> permitem animar qualquer atributo SVG sem JavaScript nem CSS. A animação SMIL está garantida para sincronizar com a taxa de fotogramas do navegador.

Segundo MDN Web Docs, o SMIL é suportado em todos os navegadores modernos, mas a animação CSS é considerada mais previsível e eficiente. O principal caso de uso do SMIL é animar atributos inacessíveis via CSS, como d (path) do elemento <path>.

JavaScript + requestAnimationFrame oferece máximo controlo sobre a animação SVG. Os programadores web utilizam bibliotecas como GSAP e Anime.js para sequências de animação complexas com linhas temporais e funções de easing difíceis de implementar com CSS puro.

Exemplos de código: criação de gráficos SVG

O primeiro exemplo é um ícone simples de casa usando elementos SVG básicos. Todas as figuras são rect e polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

O segundo exemplo mostra uma animação de rotação de um loader via CSS. Usa <circle> com o atributo stroke-dasharray para criar um contorno tracejado:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

O terceiro exemplo utiliza a biblioteca GSAP para animar um traçado e desenhar um contorno suavemente. O GSAP trabalha com o atributo stroke-dashoffset, criando um efeito de aparecimento da linha:

// Desenhar caminho com GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});