Animando SVG com CSS e SMIL

Os atributos de apresentação do SVG (fill, stroke, opacity e transform) podem ser animados com transições CSS. Adicione uma classe e defina a transição: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. As transições CSS funcionam da mesma forma nos elementos SVG.

Aplique @keyframes aos elementos SVG: anime stroke-dashoffset para efeitos de desenho de caminhos, opacity para o aparecimento gradual e transform para movimento e rotação. A mesma sintaxe de animação usada nos elementos HTML aplica-se aos elementos SVG sem modificações.

A técnica com stroke-dasharray e stroke-dashoffset simula o desenho de um caminho: defina dasharray como o comprimento do caminho e dashoffset como o comprimento do caminho (invisível); depois, anime dashoffset até 0. O contorno parecerá desenhar-se do início ao fim.

path.getTotalLength() retorna o comprimento do caminho nas unidades do usuário do SVG. Use esse valor tanto para stroke-dasharray quanto para o stroke-dashoffset inicial. Isso garante que a animação funcione corretamente, independentemente da complexidade ou do comprimento do caminho.

Os navegadores modernos aceitam transform CSS nos elementos SVG. Em elementos SVG, transform-origin usa como padrão o canto superior esquerdo do SVG, e não o centro do elemento, como ocorre no HTML. Especifique transform-box: fill-box para fazer com que transform-origin seja relativo à caixa delimitadora do elemento.

SMIL (Synchronized Multimedia Integration Language) é o sistema de animação integrado do SVG. O elemento animate altera valores de atributos ao longo do tempo. SMIL não requer JavaScript nem CSS: as animações são totalmente declarativas dentro da marcação SVG.

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> gira um elemento em torno de um ponto central especificado usando a sintaxe SMIL.

<animateMotion> move um elemento ao longo de um caminho SVG. Faça referência a um caminho com mpath ou use dados de caminho embutidos. O elemento segue automaticamente a curva do caminho, o que é útil para trajetórias complexas sem o cálculo manual de coordenadas.

Animações CSS: são compatíveis com todos os navegadores modernos, integram-se à cascata CSS e são mais fáceis de controlar com JavaScript (pausar, inverter). SMIL: fica contido na marcação SVG, funciona em arquivos SVG estáticos sem acesso ao CSS e é declarativo e expressivo para animações que seguem caminhos.

Anime a transição entre duas formas de caminho: os caminhos precisam ter o mesmo número de comandos e uma estrutura compatível. A animação CSS anima a propriedade d (Chrome 88+, Firefox 72+): @keyframes { to { d: path("M...") } } para transformação nativa de caminhos com CSS.

Adicione a consulta de mídia prefers-reduced-motion para desativar ou simplificar as animações SVG para usuários que se sentem desconfortáveis com movimento. Animações decorativas devem ser totalmente desativadas; animações significativas, como estados de carregamento, devem ser simplificadas em vez de interrompidas.

Como a técnica com stroke-dasharray e stroke-dashoffset cria uma animação de desenho de caminho?

A animação SVG usa transições CSS e @keyframes para efeitos baseados em propriedades, a técnica com stroke-dasharray/dashoffset para desenhar caminhos, animate/animateTransform/animateMotion do SMIL para animações declarativas dentro do SVG e prefers-reduced-motion para acessibilidade. CSS e SMIL são complementares: escolha com base na necessidade de integração com a cascata CSS ou de portabilidade do arquivo independente.