{ freetool24 }
Image Tools

Guia de SVG para Desenvolvedores: Gráficos Escaláveis que Funcionam em Todo Lugar

Aprenda como o SVG funciona, como otimizar arquivos SVG para a web, padrões de uso inline vs externo, e como animar e manipular SVGs com CSS e JavaScript.

7 min de leitura

Ilustrações vetoriais coloridas em uma tela

SVG (Scalable Vector Graphics) é o único formato de imagem nativamente compreendido pelos navegadores como XML estruturado, estilizável e programável. Um logotipo em SVG é exibido com nitidez em um monitor 1×, em uma tela 4K e em um outdoor impresso — tudo a partir do mesmo arquivo. Entender SVG faz de você um desenvolvedor frontend mais capacitado.

O que torna o SVG diferente

Formatos raster (JPEG, PNG, WebP) armazenam imagens como uma grade de pixels. Amplie-os e você obtém desfoque. O SVG armazena imagens como descrições matemáticas de formas:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Hello</text>
</svg>

Isso renderiza um círculo azul com o texto "Hello" — em qualquer tamanho, perfeitamente nítido.

Quando usar SVG:

  • Logotipos e ícones (precisam permanecer nítidos em todos os tamanhos)
  • Ilustrações e diagramas
  • Gráficos e visualizações de dados (D3.js gera SVG)
  • Animações e gráficos interativos
  • Ícones de UI (muito melhor do que fontes de ícones)

Quando NÃO usar SVG:

  • Fotografias e imagens fotorrealistas complexas (use JPEG/WebP)
  • Capturas de tela (use PNG)
  • Quando o SVG possui milhares de nós (torna-se mais lento do que Canvas)

Elementos principais do SVG

Formas

<!-- Retângulo -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

<!-- Círculo -->
<circle cx="50" cy="50" r="30" fill="#3b82f6"/>

<!-- Elipse -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

<!-- Linha -->
<line x1="0" y1="0" x2="100" y2="100" stroke="#1e293b" stroke-width="2"/>

<!-- Polígono -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- Polilinha (forma aberta) -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

Paths — a forma universal

O elemento <path> pode descrever qualquer forma usando uma minilinguagem de comandos de mover, traçar linha, curva e arco:

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

Comandos de path:

  • M x,y — Mover para (caneta levantada)
  • L x,y — Linha até
  • H x — Linha horizontal
  • V y — Linha vertical
  • Q cx,cy x,y — Curva de Bezier quadrática
  • C cx1,cy1 cx2,cy2 x,y — Curva de Bezier cúbica
  • A rx,ry rot large-arc sweep x,y — Arco
  • Z — Fechar path

Raramente escrevemos paths manualmente — ferramentas de design os exportam. Mas saber lê-los ajuda na depuração e otimização.

O viewBox: SVGs responsivos

O atributo viewBox é a chave para SVGs responsivos:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Conteúdo desenhado em um espaço de coordenadas 200×100 -->
</svg>

Sem width/height no elemento, o SVG preenche seu contêiner como uma imagem responsiva. Defina width: 100% no CSS e ele escala perfeitamente.

.logo svg {
  width: 100%;
  height: auto;
}

Três formas de usar SVG na web

1. Arquivo externo (<img>)

<img src="logo.svg" alt="Logotipo da empresa" width="200" height="80">

✅ Simples, com cache, funciona em todo lugar
❌ Não pode ser estilizado com CSS, não pode ser programado

2. Background CSS

.icon {
  background-image: url('icon.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

✅ Bom para ícones decorativos
❌ Sem estilização CSS dos elementos internos do SVG, sem acessibilidade

3. SVG inline (mais poderoso)

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Próximo
</button>

✅ Controle total via CSS, programável, usa currentColor para herdar a cor do texto
❌ Sem cache, aumenta o tamanho do HTML

Para ícones em componentes de UI, SVG inline é a melhor escolha. Sprite sheets (um único <svg> com elementos <symbol> e referências <use>) oferecem cache com capacidade de estilização.

Estilizando SVG com CSS

SVGs inline respondem ao CSS como qualquer elemento HTML:

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* controla currentColor */
}

.icon:hover {
  color: #1d4ed8;
}

No SVG, use currentColor em vez de cores fixas:

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

Agora a cor do ícone é controlada inteiramente pelo CSS — modo escuro, estados de hover e temas funcionam automaticamente.

Animações CSS em SVG

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray e stroke-dashoffset são as propriedades de animação mais poderosas do SVG — elas permitem animações de desenho, nas quais os paths parecem se desenhar sozinhos.

Otimizando arquivos SVG

Ferramentas de design exportam SVGs com metadados desnecessários, comentários e IDs do editor. Um SVG exportado típico pode ter 15 KB; otimizado, pode chegar a 3 KB.

O que remover:

  • Declaração <?xml version="1.0"?> (não é necessária inline)
  • xmlns:xlink, xmlns:dc, namespaces de metadados do Adobe/Inkscape
  • Atributos id usados apenas pelo editor
  • Comentários e espaços em branco
  • Elementos de grupo redundantes <g>
  • Valores de atributos padrão (fill="black", opacity="1")

Ferramentas como SVGO automatizam esse processo. Quando você precisar de uma versão raster para plataformas que não suportam SVG, converta para PNG com nosso conversor de SVG para PNG.

Acessibilidade

SVGs usados como conteúdo significativo precisam de descrições acessíveis:

<svg role="img" aria-labelledby="title desc">
  <title id="title">Gráfico de receita</title>
  <desc id="desc">Gráfico de barras mostrando a receita mensal crescendo de $10 mil em janeiro para $45 mil em junho de 2026</desc>
  <!-- conteúdo do gráfico -->
</svg>

SVGs decorativos (ícones ao lado de botões com rótulos) devem ser ocultados dos leitores de tela:

<svg aria-hidden="true" focusable="false">...</svg>

Referência rápida: atributos úteis do SVG

Atributo O que faz
viewBox="x y w h" Define o sistema de coordenadas
fill Cor de preenchimento da forma (none, hex, currentColor)
stroke Cor do contorno
stroke-width Espessura do contorno
stroke-linecap Estilo da extremidade da linha: butt, round, square
stroke-linejoin Estilo dos cantos: miter, round, bevel
opacity Transparência do elemento (0–1)
transform translate(), rotate(), scale(), skew()
clip-path Recorta o conteúdo em uma forma
filter Aplica filtros SVG (blur, sombra, etc.)

SVG é uma das ferramentas mais subutilizadas da web. Assim que você entende o sistema de coordenadas e o modelo de estilização, é possível criar ícones, ilustrações, gráficos e animações que ficam perfeitos em qualquer tamanho e respondem dinamicamente à interação do usuário.

Voltar a todos os artigosVer ferramentas