m•motiveICONS IN MOTION
← Voltar aos ícones

MOTIVE · ARTIGO

Como a animação SVG funciona e o que determina seu desempenho

Um sino balança ao ativar um lembrete; uma marca é desenhada ao concluir uma tarefa. Pequenos movimentos comunicam mudanças de estado. Veja como SVG os produz e o que medir ao usar muitos ícones.

1. Formas com uma linha do tempo

SVG descreve formas como path, circle e rect com coordenadas e atributos. viewBox="0 0 24 24" define as coordenadas internas; width e height definem o tamanho exibido. A mesma geometria pode ser usada em vários tamanhos.

A animação altera essas propriedades ao longo do tempo. Uma rotação de 0 grau no início, -18 no meio e 0 no fim faz um sino balançar. O navegador interpola conforme duration e easing, sem armazenar uma imagem para cada quadro.

2. Desenhar uma marca deslocando traços

A marca já existe. stroke-dasharray cria um padrão de traços e espaços; stroke-dashoffset desloca o início desse padrão para revelar a linha.

O exemplo normaliza as distâncias com pathLength="60" e anima dashoffset de 60 para 0. O número 60 não representa pixels da tela. Os atributos de base mostram a marca completa, mesmo sem animação ou com movimento reduzido. Cole o código em HTML para testar.

MDN · stroke-dashoffsetMDN · pathLength

Um exemplo funcional de traçado

O mesmo SVG e CSS estão abaixo. Você pode pausar ou retomar o ciclo; movimento reduzido exibe a marca completa.

<svg xmlns="http://www.w3.org/2000/svg"
     width="64" height="64" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
  <style>
    .motive-draw { animation: motive-draw 1.8s ease-in-out infinite; }
    @keyframes motive-draw {
      0% { stroke-dashoffset: 60; }
      60%, 100% { stroke-dashoffset: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .motive-draw { animation: none; }
    }
  </style>
  <path class="motive-draw" d="m6 12 4 4 8-8"
        pathLength="60" stroke-dasharray="60" stroke-dashoffset="0" />
</svg>

3. CSS e Web Animations API

CSS @keyframes costuma bastar para um ciclo definido ou uma execução única. Os SVGs do Motive incluem CSS sem biblioteca adicional. A página não pode selecionar diretamente elementos internos de um SVG dentro de img; considere SVG inline para interagir com as formas.

A Web Animations API oferece reprodução, pausa e navegação temporal para editores. O Motive gera os quadros da prévia e o CSS exportado com o mesmo modelo, sem atualizar o estado React a cada quadro. Escolher CSS ou JavaScript não determina sozinho o desempenho de renderização.

MDN · Web Animations API

4. Ser SVG não garante baixo custo

O tamanho transferido e o custo da reprodução são diferentes. Formas simples podem ser compactas; caminhos complexos, filtros e muitos elementos DOM aumentam o trabalho. SVG nem sempre é menor que GIF e não garante FPS constante em todo dispositivo.

O navegador executa o trabalho necessário de estilo, layout, pintura e composição. Propriedades animadas, área e quantidade simultânea importam. Considere primeiro transform e opacity e confira a composição real no SVG e navegador de destino.

4. Ser SVG não garante baixo custo
EfeitoPropriedades comunsCusto a verificar
Rotação, movimento, escala, fadetransform, opacityA composição pode ajudar, mas execução na GPU ou ausência de pintura não são garantidas.
Traçado e mudança de formasstroke-dashoffset, dVerifique a repintura. Vários caminhos complexos animados podem aumentar o trabalho.
Desfoque, sombras, muitas formasfilter, quantidade de formas e áreaReduza a região dos filtros e as formas; compare tempo de pintura e memória.

web.dev · High-performance CSS animations

5. Antes de adicionar movimento à interface

  • Reproduza retornos breves de sucesso ou erro quando necessário e confira se um ciclo contínuo tem propósito.
  • Interrompa ciclos fora da tela com IntersectionObserver e verifique abas ocultas. O Motive anima apenas os cartões visíveis no catálogo.
  • Respeite prefers-reduced-motion: reduce e mantenha o estado estático significativo. Use aria-hidden para decoração e texto alternativo adequado para imagens informativas.
  • Reserve espaço com width e height. SVGs inline repetidos precisam de IDs distintos para títulos, máscaras e gradientes.
  • Não adicione will-change a todos os ícones antecipadamente. Meça um problema real, aplique onde necessário e compare.

MDN · prefers-reduced-motion

6. Medir sob as mesmas condições

  1. Fixe ícone, tamanho, movimento e duração. Compare, por exemplo, 1, 20 e 100 animações simultâneas, registrando quantidade visível e total.
  2. Use um build parecido com produção. Confira transferência comprimida e requisições em Network. O tamanho do arquivo não mede sozinho o custo da reprodução.
  3. Grave reprodução e rolagem no Performance do DevTools. Compare Layout, Paint e atrasos de quadros. A 60Hz um quadro dura cerca de 16,7ms para a página inteira: não prometa FPS sem medir.
  4. Teste também em um celular real, com movimento reduzido, ícones fora da tela, abas ocultas e repetições finitas. Registre aparelho, navegador e condições para reproduzir os resultados.

Documentação oficial