SVG: compreender o formato vetorial

Um logótipo PNG pode parecer perfeitamente nítido no tamanho original e revelar píxeis quando é muito ampliado. O mesmo logótipo em SVG pode continuar nítido numa pequena interface, num ecrã de alta densidade ou numa impressão grande porque não guarda uma grelha fixa: descreve as formas que devem ser desenhadas.

SVG significa Scalable Vector Graphics. Na Web tem uma natureza dupla: é um formato de imagem vetorial e também uma linguagem de marcação baseada em XML.

Esta característica explica porque pode ser redimensionado, estilizado, inspecionado como texto e, em certos casos, tornar-se interativo.

Raster e vetorial

Uma imagem raster é uma grelha de píxeis. Uma fotografia de 1200 × 800 contém 960.000 píxeis. Ao aumentar muito, o software precisa de interpolar novos valores.

Um SVG pode descrever um círculo assim:

<circle cx="50" cy="50" r="40" />

O navegador conhece centro, raio e propriedades gráficas e redesenha a forma na dimensão necessária.

Isto não significa “detalhe infinito”: significa que a geometria é rasterizada à resolução de apresentação.

Quando usar SVG

É especialmente adequado para:

• logótipos;
• ícones;
• diagramas;
• gráficos de dados;
• ilustrações geométricas;
• padrões e decoração.

Para fotografias complexas, JPEG, WebP ou AVIF são normalmente mais apropriados. Um SVG também pode incorporar uma imagem raster; nesse caso, as formas vetoriais escalam, mas a fotografia mantém os limites da sua resolução.

Estrutura mínima

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>

<svg> é o elemento raiz. viewBox define o sistema interno de coordenadas. Elementos como <circle>, <rect>, <line> e <path> descrevem as formas.

Porque é viewBox tão importante?

viewBox="0 0 100 100" indica um referencial interno com 100 × 100 unidades. O ficheiro pode depois ser apresentado a 24 × 24, 200 × 200 ou outra dimensão e o navegador ajusta esse referencial ao espaço disponível.

Remover ou alterar viewBox sem perceber a sua função pode modificar escala, recorte e comportamento responsive.

path e coordenadas

<path> permite descrever linhas e curvas complexas através do atributo d. Programas gráficos podem gerar paths enormes, com muitos pontos e casas decimais. Uma otimização pode reduzir este volume, mas valores demasiado agressivos podem deformar curvas e pequenos detalhes.

fill, stroke e currentColor

fill define preenchimento e stroke define contorno. Para ícones inline, currentColor é particularmente útil:

<path fill="currentColor" d="..." />

O ícone herda assim a cor CSS do contexto e adapta-se melhor a temas e estados.

img, CSS ou SVG inline?

Com <img src="icone.svg">, o SVG comporta-se sobretudo como uma imagem externa: é simples, cacheável e isolado do DOM interno.

Como background-image, é adequado a elementos decorativos.

Inline, o markup SVG entra diretamente no HTML. Isto permite controlar elementos internos por CSS e interagir com eles, mas aumenta a responsabilidade sobre acessibilidade e segurança.

Acessibilidade

Um SVG decorativo não deve criar ruído para tecnologias assistivas. Um SVG que transporta informação deve ter uma alternativa textual adequada.

Com <img>, utilize alt. Em SVG inline, escolha título, roles e atributos ARIA conforme a função real.

Evite converter texto importante em paths quando o texto real oferece melhor seleção, tradução e acessibilidade.

Segurança

SVG é XML e pode conter mais do que formas. Um ficheiro de origem não confiável não deve ser inserido inline sem validação. Dependendo do contexto, scripts, referências e outras construções podem tornar-se problemáticas.

Sanitize ficheiros externos e preserve apenas as capacidades necessárias.

SVG responsive

Com um viewBox correto, um SVG adapta-se naturalmente a layouts fluidos. O CSS controla o espaço de apresentação e o navegador redesenha as formas à resolução necessária.

SVG nem sempre é o ficheiro mais leve

Um ícone geométrico pode ser extremamente pequeno. Uma ilustração com milhares de pontos, filtros ou imagens raster incorporadas pode ser maior do que uma alternativa WebP otimizada.

Escolha o formato pela estrutura do conteúdo e pelo resultado medido, não apenas por ser “vetorial”.

A reter

SVG é uma excelente solução quando a imagem pode ser descrita eficientemente por geometria. Preserve um viewBox coerente, escolha o modo de integração segundo estilo e acessibilidade e trate SVGs não confiáveis como conteúdo que precisa de sanitização.