O que você vai aprender

Configurar viewBox para escalabilidade em qualquer tamanho de container
Usar preserveAspectRatio para controlar como o SVG se ajusta ao espaço
Aplicar media queries CSS para adaptar SVG a diferentes breakpoints
Criar ícones e ilustrações responsivas que funcionam em mobile e desktop

Responsividade SVG🔗

Por Que SVG Responsivo🔗

SVG é nativamente escalável, mas ainda precisa de configuração correta para funcionar bem em diferentes tamanhos.

viewBox🔗

O atributo viewBox é a chave para responsividade:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"/>
</svg>

O viewBox define o sistema de coordenadas interno.

Width e Height🔗

Absoluto (não recomendado)🔗

<svg width="200" height="200">

Relativo (recomendado)🔗

<svg width="100%" height="100%">

Sem dimensões (ideal)🔗

<svg viewBox="0 0 100 100">

O browser usa o container pai para dimensionar.

preserveAspectRatio🔗

Controla como o SVG se comporta quando aspect ratio muda:

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">

Valor	Comportamento
`xMidYMid meet`	Centraliza, escala para caber
`xMinYMin slice`	Escala para cobrir (pode cortar)
`none`	Distorce para preencher

CSS para Responsividade🔗

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

Art Direction🔗

Para diferentes tamanhos de tela:

<picture>
  <source media="(min-width: 800px)" srcset="logo-large.svg">
  <source media="(min-width: 400px)" srcset="logo-medium.svg">
  <img src="logo-small.svg" alt="Logo">
</picture>

Sempre defina viewBox e evite width/height fixos. Isso garante que o SVG escale perfeitamente em qualquer tamanho.

Você aprendeu

viewBox + largura 100% tornam o SVG intrinsecamente responsivo
preserveAspectRatio define se o SVG mantém proporção ou preenche o container
Media queries CSS podem alterar estilos SVG conforme o tamanho da tela