SVG

SVG (Scalable Vector Graphics) é um formato de imagem vetorial baseado em XML. Em vez de armazenar pixels, SVG armazena instruções: “desenhe um círculo de raio 50 em (100, 100), preenchimento azul.” O navegador rasteriza no momento da exibição, então o mesmo arquivo fica nítido em qualquer tamanho, de 16×16 a um painel de 4K.

Propriedades:

• Independente de resolução — mesmo arquivo para telas retina e padrão.
• Tamanhos de arquivo pequenos para formas simples — um ícone típico tem de 500 bytes a 5 KB. Supera todos os formatos rasterizados em tamanho para o mesmo conteúdo.
• Editável como texto — abra em qualquer editor, ajuste os dados do caminho, salve. Nenhuma ferramenta proprietária necessária.
• Estilizável com CSS — preenchimento, traço, transformação podem vir de CSS externo.
• Animável via transições CSS e SMIL (embora SMIL esteja sendo descontinuado em favor de CSS + WAAPI).

Onde SVG vence: logotipos, ícones, ilustrações, diagramas, visualizações de dados. Onde perde: fotografias (sem maneira eficiente de representar milhões de pixels sutilmente diferentes como vetores), gradientes complexos (o tamanho do arquivo cresce muito), renderização 3D (use canvas/WebGL).

SVG inline (incorporado no HTML) é a melhor prática moderna para ícones — sem requisição separada, estilizável com CSS, acessível via aria-label. SVG externo (em arquivo separado) é adequado para assets menos críticos.

A superfície de ataque XSS que ninguém avisa: SVG é XML e pode conter tags <script>. Um SVG enviado a um fórum, foto de perfil ou CMS se torna um vetor de execução de código arbitrário se servido com Content-Type: image/svg+xml da mesma origem que a aplicação. A mitigação é sanitizar SVGs enviados por usuários (DOMPurify funciona) ou servi-los de uma origem sandbox (img.example.com em vez de example.com). Alguns hosts simplesmente rasterizam SVGs de usuários para PNG no upload para eliminar completamente o risco.

Otimizando o tamanho do arquivo SVG: SVGO é a ferramenta de linha de comando padrão — executa ~40 plugins que removem metadados, simplificam caminhos, mesclam transformações e arredondam precisão numérica. A economia típica em exportações do Sketch/Figma é de 50-80%, ocasionalmente 95%+ para designs com muitas camadas ocultas e metadados do editor. O SVG comprimido em disco também comprime bem com gzip (conteúdo de texto), então um SVG de 5 KB geralmente fica abaixo de 1 KB na transmissão. Referência: W3C — Scalable Vector Graphics (SVG) 2.

Exemplo prático

Um ícone circular de botão “X” de fechar em SVG: <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> — são ~150 bytes descomprimidos, ~80 bytes em gzip, e renderiza identicamente em 16 px, 24 px, 48 px ou como um adesivo de vinil de 2 metros. O PNG equivalente em 1x tem ~400 bytes; em 2x retina é ~1 KB; em 3x é ~1,8 KB; cada arquivo separado. O atributo currentColor do SVG permite que um único ícone herde a cor do texto para estados de hover sem produzir dois arquivos de imagem. Agora considere um SVG com uma malha de gradiente complexa e 5.000 nós de caminho (uma ilustração detalhada exportada do Illustrator): o arquivo cresce para ~400 KB, e rasterizá-lo no momento do desenho custa CPU mensurável por frame. Nesse ponto, um WebP de 25 KB é a escolha melhor — vetorial vence para geometria simples, rasterizado vence para complexidade.

Quando e por que isso importa

A escolha correta do formato muda o peso da página e o desempenho de renderização por ordens de magnitude. Use SVG para: logotipos (independente de resolução entre breakpoints), ícones monocromáticos (sprite ou inline), gráficos e infográficos simples (D3 produz SVG) e qualquer imagem que precise ser estilizada por CSS (ícones com tema). Use rasterizado (PNG/WebP/AVIF) para: fotografias, capturas de tela, gradientes com muitas paradas de cor e qualquer imagem com mais complexidade visual do que um designer está disposto a expressar como comandos de caminho. O benefício inesperado do SVG é a acessibilidade: um SVG bem marcado com elementos <title> e <desc> é amigável para leitores de tela de uma forma que nenhuma imagem rasterizada consegue sem texto alt separado. Referência: MDN — SVG.