SVG na Web

Otimização e uso de SVG em páginas web: sprite, inline, lazy loading

Publicado: 15/06/2026
design-web svg web otimização

O que você vai aprender

  • Otimizar SVG para web: remover metadados, simplificar paths, comprimir
  • Usar SVG inline no HTML vs. como arquivo externo conforme o caso
  • Aplicar estilos CSS a elementos SVG para temas dinâmicos
  • Garantir responsividade com viewBox e preserveAspectRatio

SVG na Web🔗

SVG é ideal para web: resolution-independent, pequeno arquivo, animável.

Métodos de Inclusão🔗

Inline (embutido)🔗

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#ff6600"/>
</svg>

Vantagens: Estilizável com CSS, acessível Desvantagens: Cache não compartilhado, HTML poluído

<img> tag🔗

<img src="icon.svg" alt="Ícone" width="100" height="100">

Vantagens: Cacheável, simples Desvantagens: Não estilizável via CSS

<object> tag🔗

<object type="image/svg+xml" data="icon.svg" width="100" height="100">
  Fallback
</object>

Vantagens: Estilizável via CSS no documento pai, cacheável Desvantagens: Não suporta interactividade (clique, hover)

SVG Sprite (symbol)🔗

<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
</svg>

<svg><use href="#icon-home"/></svg>

Vantagens: Reutilizável, um request, estilizável Desvantagens: Não funciona em todos os navegadores (precisa polyfill)

Otimização🔗

SVGO🔗

npx svgo input.svg -o output.svg --multipass

Remove metadados, comments, grupos vazios.

Ferramentas Online🔗

  • SVGOMG - Interface visual SVGO
  • SVGO - Otimizador SVG via linha de comando

Acessibilidade🔗

<svg role="img" aria-label="Logo da empresa">
  <title>Logo</title>
  <desc>Descrição longa</desc>
  <!-- conteúdo -->
</svg>

Sempre inclua:

  • role="img"
  • aria-label ou aria-labelledby
  • <title> e <desc> internos

Responsivo🔗

svg {
  max-width: 100%;
  height: auto;
}

SVG escala naturalmente, mas width/height fixos podem limitar.

Prefira viewBox sobre width/height explícitos. Isso permite que o SVG escale via CSS.

Você aprendeu

  • SVG otimizado (sem metadados, paths simplificados) carrega mais rápido na web
  • SVG inline permite estilização com CSS
  • arquivo externo permite cache do browser
  • viewBox define o sistema de coordenadas
  • preserveAspectRatio controla o ajuste ao container

Referências🔗