SVG Animado

Criar animações SVG: CSS animations e SMIL no Inkscape

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

O que você vai aprender

  • Criar animações SVG com elementos SMIL (animate, animateTransform)
  • Usar CSS animations para efeitos SVG mais simples e performáticos
  • Combinar keyframes CSS com atributos SVG para animações complexas
  • Entender limitações de suporte: SMIL no Chrome vs. outros browsers

SVG Animado🔗

Métodos de Animação🔗

MétodoSuporteUso
CSS AnimationsModernoTransições, keyframes
SMILLegacyPaths, morphing
JavaScriptTodosInterativo

CSS Animations🔗

Animação Básica🔗

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.icon {
  animation: pulse 2s infinite;
}

Aplicar no SVG🔗

<svg>
  <style>
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .spinner {
      transform-origin: center;
      animation: rotate 1s linear infinite;
    }
  </style>
  <circle class="spinner" cx="50" cy="50" r="40"/>
</svg>

SMIL (SVG Nativo)🔗

animateTransform🔗

<circle cx="50" cy="50" r="40">
  <animateTransform
    attributeName="transform"
    type="rotate"
    from="0 50 50"
    to="360 50 50"
    dur="1s"
    repeatCount="indefinite"/>
</circle>

animate (Morfing)🔗

<path>
  <animate
    attributeName="d"
    values="M0,0 L100,0; M0,0 L100,50; M0,0 L100,0"
    dur="3s"
    repeatCount="indefinite"/>
</path>

Boas Práticas🔗

  • Use will-change para performance
  • Prefira transform a propriedades geométricas
  • Teste em múltiplos navegadores

Para ícones animados, CSS é mais eficiente. Para morphing de paths, SMIL oferece mais controle.

Você aprendeu

  • SMIL permite animar atributos SVG diretamente (posição, cor, forma) sem JavaScript
  • CSS animations são mais performáticas e amplamente suportadas para efeitos simples
  • Para animações complexas, combinar SMIL (forma) com CSS (cor/opacity) é eficaz

Referências🔗