Arquivos SVG: Um Guia Completo para Desenvolvedores e Designers

SVG é uma daquelas tecnologias que parece simples por fora — é apenas um formato de desenho, certo? — mas recompensa um estudo mais aprofundado mais do que quase qualquer outro formato no kit de ferramentas de um desenvolvedor ou designer. Arquivos SVG escalam infinitamente sem perda de qualidade, pesam quase nada para gráficos simples, podem ser estilizados com CSS, animados com JavaScript ou transições CSS, e incorporados diretamente no HTML. Entender SVG corretamente muda como você pensa sobre gráficos na web.

Você pode visualizar, inspecionar e otimizar qualquer arquivo SVG usando a Ferramenta SVG do BrowseryTools — gratuita, sem cadastro, tudo roda no seu navegador.

O que é SVG?

SVG significa Scalable Vector Graphics (Gráficos Vetoriais Escaláveis). Ao contrário de JPEG, PNG ou WebP — que armazenam imagens como grades de pixels coloridos (imagens raster) — o SVG armazena imagens como descrições matemáticas de formas. Um círculo é descrito como um ponto central e um raio. Um caminho é descrito como uma sequência de comandos de desenho: mover para este ponto, desenhar uma linha até aquele ponto, desenhar uma curva por esses pontos de controle, fechar o caminho.

SVG é um formato baseado em XML, o que significa que todo arquivo SVG é texto simples, legível por humanos e estruturado como uma árvore de elementos aninhados. Abra qualquer SVG em um editor de texto e você verá marcação legível, não um blob binário. Isso tem consequências práticas significativas: arquivos SVG podem ser gerados programaticamente, modificados com ferramentas de processamento de texto, comparados (diff) em controle de versão e incorporados diretamente no HTML sem nenhum processamento adicional.

O formato é um padrão W3C, mantido junto com HTML e CSS. Todo navegador moderno tem um motor de renderização SVG completo embutido.

Por que SVG Supera Formatos Raster para Ícones e Ilustrações

A vantagem decisiva do SVG sobre formatos raster para ícones, logotipos e ilustrações é a independência de resolução. Um ícone raster criado em 32×32 pixels ficará borrado em uma tela Retina, que renderiza em 2× ou 3× pixels físicos por pixel CSS. Para corrigir isso, você precisaria exportar múltiplas variantes de resolução (@1x, @2x, @3x), aumentar a resolução da fonte (arquivos maiores, mais memória) ou usar image-set no CSS para servir a resolução certa. Com SVG, você cria o gráfico uma vez e ele fica perfeito em qualquer tamanho, em qualquer display, para sempre.

O tamanho do arquivo é a outra grande vantagem para gráficos simples. Um ícone simples — um checkmark, uma seta, um menu hambúrguer — pode ser descrito em um arquivo SVG usando 200–500 bytes. O PNG equivalente em resolução 2× Retina pode ter 2–5 KB. Em 3×, ainda maior. Quando uma interface tem 50 ícones, a diferença entre 50 SVGs otimizados (totalizando ~20 KB) e 50 conjuntos PNG (totalizando ~300+ KB) é significativa.

Imagens raster ganham para conteúdo fotográfico e ilustrações complexas com gradientes suaves e texturas. Um SVG vetorial de uma fotografia seria enorme e pareceria estilizado em vez de fotográfico. O formato certo depende inteiramente da natureza do conteúdo.

Anatomia do SVG: Os Elementos Principais

Um arquivo SVG mínimo tem esta estrutura:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#3b82f6" />
  <path d="M8 12 L12 16 L16 8" stroke="white" stroke-width="2" fill="none" />
</svg>

Os principais elementos e atributos para entender:

• viewBox — Define o sistema de coordenadas interno. viewBox="0 0 24 24" significa que o espaço de desenho vai de (0,0) a (24,24). O SVG pode então ser renderizado em qualquer tamanho real — 16×16, 32×32, 200×200 — e o navegador escala o sistema de coordenadas para caber. Esse é o mecanismo por trás da independência de resolução.
• path — O elemento SVG mais poderoso. Um atributo d contém comandos de desenho: M (mover para), L (linha para), C (curva bezier cúbica), A (arco), Z (fechar caminho). Quase qualquer forma pode ser expressa como um path.
• circle, rect, ellipse, line, polygon — Elementos de conveniência para formas comuns. Um <circle> recebe cx, cy e r. Um <rect> recebe x, y, width e height, além de rx opcional para cantos arredondados.
• text — SVG pode renderizar texto tipográfico que escala com a imagem e permanece selecionável e acessível, ao contrário de texto renderizado em uma imagem raster.
• g (grupo) — Agrupa elementos filhos para que transformações, estilos e opacidade possam ser aplicados ao grupo inteiro de uma vez.
• defs e use — Define elementos reutilizáveis uma vez e os referencia múltiplas vezes com <use>. Essencial para sistemas de ícones que usam um único sprite SVG.

Estilizando SVG com CSS e Animando-o

Elementos SVG fazem parte do DOM quando o SVG é incorporado inline no HTML. Isso significa que o CSS pode direcioná-los diretamente usando todos os mesmos seletores usados para elementos HTML. Você pode alterar cores de preenchimento, larguras de traço e opacidade no hover, no modo escuro ou em resposta a qualquer mudança de estado:

/* Direcione elementos SVG com CSS */
.icon-check circle {
  fill: #22c55e;
  transition: fill 0.2s ease;
}

.icon-check:hover circle {
  fill: #16a34a;
}

/* Suporte a modo escuro */
@media (prefers-color-scheme: dark) {
  .icon-check circle { fill: #4ade80; }
}

Animações e transições CSS funcionam em propriedades SVG. O truque stroke-dasharray e stroke-dashoffset — animando um path de invisível para visível manipulando quanto de um traço tracejado é mostrado — cria o efeito de "desenho" visto em muitos indicadores de carregamento e ilustrações de onboarding. SVG também tem seus próprios elementos <animate> e <animateTransform> (animação SMIL), embora as animações CSS e JavaScript sejam geralmente preferidas por questões de manutenibilidade.

Usar currentColor como valor de preenchimento faz um ícone SVG herdar automaticamente a cor do texto do elemento pai, permitindo que um único ícone se adapte a qualquer contexto de cor sem modificação.

Otimização de SVG com SVGO

Arquivos SVG exportados de ferramentas de design como Figma ou Illustrator contêm muito inchaço desnecessário: metadados do editor, atributos redundantes, wrappers de grupo sem efeito, coordenadas de ponto flutuante com oito casas decimais, atributos id gerados pelo sistema de nós interno da ferramenta de design. Para um ícone simples, essa sobrecarga pode triplicar ou quadruplicar o tamanho do arquivo em comparação com uma versão otimizada manualmente.

SVGO (Otimizador de SVG) é a ferramenta padrão para remover essa sobrecarga. Aplica um conjunto configurável de transformações: colapsar grupos aninhados, remover elementos invisíveis, arredondar coordenadas para precisão razoável, mesclar paths redundantes, remover metadados e comentários, e mais. Uma passagem típica do SVGO reduz o tamanho de arquivos SVG de ícones em 30–60% sem nenhuma mudança visual.

A Ferramenta SVG do BrowseryTools aplica otimização de SVG no seu navegador, fornecendo a saída otimizada sem instalar nenhuma ferramenta de linha de comando.

SVG Inline vs Arquivo Externo vs Fundo CSS

Há três formas principais de incluir um SVG em uma página web, cada uma com diferentes trade-offs:

• SVG inline — A marcação SVG é incorporada diretamente no HTML. Fornece acesso completo de CSS e JavaScript a cada elemento dentro do SVG. Melhor para ícones que precisam de efeitos de hover, mudanças de cor ou animação. Não pode ser cacheado separadamente pelo navegador.
• Arquivo SVG externo via <img> — O SVG é um arquivo separado referenciado com <img src="icon.svg">. O navegador pode fazer cache do arquivo. Simples de usar. Mas o CSS da página pai não pode acessar o interior do SVG, e o JavaScript não pode manipular seu conteúdo.
• background-image CSS — O SVG é referenciado como fundo CSS. Funciona para gráficos puramente decorativos. O SVG também pode ser incorporado como URI de dados no CSS, útil para ícones pequenos em folhas de estilo de componentes. CSS não pode reestilizar elementos dentro do SVG.

Folhas de sprites SVG — um único arquivo SVG contendo todos os ícones definidos em blocos <defs>, referenciados com <use href="sprite.svg#icon-name"> — oferecem um bom equilíbrio: uma requisição de rede cacheável para todos os ícones, com manipulação DOM por ícone possível na maioria dos navegadores modernos.

Armadilhas Comuns do SVG: XSS via SVG

SVG suporta scripts incorporados, manipuladores de eventos e referências a recursos externos, o que o torna um vetor de ataque viável para cross-site scripting (XSS) se arquivos SVG enviados por usuários forem exibidos em um contexto de navegador. Um arquivo SVG contendo <script>alert(document.cookie)</script> executará esse script se o navegador renderizar o SVG como parte de uma página.

As regras para lidar com segurança com SVGs enviados por usuários:

• Nunca incorpore inline SVGs enviados por usuários no seu HTML. Incorpore inline apenas SVGs que você controla.
• Se precisar exibir SVGs enviados por usuários, sirva-os de uma origem separada e isolada e exiba-os em uma tag <img> ou um <iframe> isolado. A tag <img> não executa scripts no SVG.
• Sanitize SVGs enviados por usuários executando-os por um sanitizador (DOMPurify com a configuração SVG) antes de armazenar ou exibi-los.
• Defina o cabeçalho Content Security Policy para restringir fontes de scripts em páginas que exibem SVGs.

Convertendo SVG para PNG

Alguns contextos não suportam SVG: clientes de e-mail mais antigos, certas plataformas CMS, alguns pipelines de processamento de imagem, requisitos de ícones de app para iOS e Android, e imagens de prévia Open Graph. Nesses casos, você precisa exportar o SVG como um PNG rasterizado.

Como SVG escala sem perdas, você pode exportar para PNG em qualquer tamanho. Para ícones de app, isso significa exportar uma fonte SVG única em 1024×1024 e derivar todos os tamanhos menores dela. Para uso web Retina, exporte em 2× ou 3× o tamanho de exibição CSS.

A Ferramenta SVG do BrowseryTools pode renderizar SVG para PNG na resolução que você escolher, processando a conversão no navegador sem nenhum upload para servidor. Útil quando você tem um SVG de uma ferramenta de design e precisa de um PNG para um contexto que não aceita SVG.