SVG Animado para Web (SMIL/CSS)🔗

SVG e o único formato web que e vetor, escalável e animável ao mesmo tempo. O Inkscape gera o SVG base; a animação entra via SMIL (elementos dentro do SVG) ou CSS (folha de estilo externa). Ambos coexistem e podem ser combinados no mesmo arquivo.

Conceitos de Animação SVG🔗

Animação SVG muda atributos ao longo do tempo sem JavaScript. Os dois modelos são:

• SMIL (Synchronized Multimedia Integration Language): elementos como <animate> vivem dentro do SVG. Funcionam em qualquer contexto que renderize SVG, inclusive <img> tags.
• CSS: @keyframes e transition aplicados via classe. Exigem que o SVG seja inline no HTML ou carregado como stylesheet vinculado.

Regra pratica: SMIL para animações autossuficientes (ícones, loaders); CSS quando a animação responde a estados do DOM (hover, focus, dark mode).

Propriedades animáveis🔗

Quase todo atributo SVG pode ser animado: fill, stroke, opacity, transform, cx, r, d (path), viewBox, entre outros. A exceção importante: atributos apresentados via CSS (como fill definido em stylesheet) devem ser animados via CSS, não SMIL.

Animação com SMIL🔗

SMIL usa três elementos principais dentro do SVG.

<animate> - animar atributos🔗

Anima um atributo específico de um elemento.

<circle cx="50" cy="50" r="20" fill="#3498db">
  <animate attributeName="r" from="20" to="40" dur="2s"
           repeatCount="indefinite" />
</circle>

Atributos essenciais:

• attributeName: qual atributo animar (r, opacity, fill, etc.)
• from / to: valores inicial e final
• dur: duração (2s, 500ms, 1.5s)
• repeatCount: indefinite ou número
• values: lista alternativa a from/to (values="0;50;100;50;0")
• keyTimes: timestamps normalizados (0 a 1) para cada valor
• calcMode: linear (padrão), discrete, paced, spline
• fill: freeze (mantém estado final) ou remove (volta ao original)

<animateTransform> - animar transformações🔗

Especializado em translate, rotate, scale, skewX, skewY.

<rect x="10" y="10" width="30" height="30" fill="#e74c3c">
  <animateTransform attributeName="transform" type="rotate"
                    from="0 25 25" to="360 25 25" dur="3s"
                    repeatCount="indefinite" />
</rect>

O formato de from/to depende do type. Para rotate: angulo cx cy. Para translate: tx ty. Para scale: sx sy.

<animateMotion> - animar ao longo de um path🔗

Move um elemento seguindo um path definido em d.

<circle r="5" fill="#2ecc71">
  <animateMotion dur="4s" repeatCount="indefinite"
                 path="M10,80 C40,10 65,10 95,80" />
</circle>

Use rotate="auto" para o elemento girar conforme a curva. Combine com <mpath xlink:href="#caminho"/> para referenciar um <path> existente pelo id.

Timing e sincronia🔗

• begin: quando iniciar (0s, 3s, click, elemento.begin)
• end: quando terminar
• restart: always, whenNotActive, never
• Para encadear: begin="animacaoAnterior.end"

Animação com CSS🔗

CSS anima SVG quando o SVG e inline no HTML ou quando classes são definidas dentro do <style> do próprio SVG.

Estrutura básica🔗

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .circulo { fill: #3498db; }
    .circulo:hover { fill: #e74c3c; }
  </style>
  <circle class="circulo" cx="100" cy="100" r="50" />
</svg>

Propriedades CSS aplicáveis a SVG🔗

• fill, stroke, stroke-width, opacity
• transform (com transform-origin)
• filter (blur, drop-shadow)
• clip-path, mask

Propriedades de apresentação SVG definidas via CSS devem ser animadas via CSS, não SMIL.

Transitions🔗

Para mudanças de estado (hover, focus, toggle de classe):

.elemento {
  fill: #3498db;
  transition: fill 0.3s ease, transform 0.3s ease;
}
.elemento:hover {
  fill: #e74c3c;
  transform: scale(1.2);
}

Transform e Keyframes🔗

@keyframes permite animações multi-etapa sem JavaScript.

Sintaxe🔗

@keyframes pulsar {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.3); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 1; }
}

.alvo {
  animation: pulsar 2s ease-in-out infinite;
  transform-origin: center;
}

Propriedades de animation🔗

• animation-name: nome do @keyframes
• animation-duration: duração (2s)
• animation-timing-function: ease, linear, ease-in-out, cubic-bezier(...)
• animation-delay: atraso antes de iniciar
• animation-iteration-count: infinite ou número
• animation-direction: normal, reverse, alternate, alternate-reverse
• animation-fill-mode: forwards, backwards, both
• animation-play-state: running, paused

Transform em SVG🔗

transform em SVG segue a mesma sintaxe de CSS quando o SVG e inline:

• translate(tx, ty)
• rotate(angulo)
• scale(sx, sy)
• skewX(angulo), skewY(angulo)
• matrix(a, b, c, d, e, f)

Importante: transform-origin em SVG inline funciona como em HTML. Em SVG standalone (arquivo .svg aberto direto), o comportamento varia entre browsers - teste sempre.

Exemplo completo: loader animado🔗

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    @keyframes girar {
      to { transform: rotate(360deg); }
    }
    .spinner {
      animation: girar 1.2s linear infinite;
      transform-origin: 50px 50px;
    }
  </style>
  <circle class="spinner" cx="50" cy="50" r="40"
          fill="none" stroke="#3498db" stroke-width="6"
          stroke-dasharray="60 200" stroke-linecap="round" />
</svg>

Exportação Otimizada🔗

SVGs do Inkscape contém metadados, editor data e IDs verbosos que incham o arquivo. Antes de publicar na web, otimize.

Save As > Optimized SVG🔗

1. File > Save As (Ctrl + Shift + S )
2. Tipo: Optimized SVG (*.svg)
3. Configure as abas:

Tab SVG:

• Strip xlinks, xml id, comments, metadata: marque todos
• Shorten color values: marque
• Work around renderer bugs: desmarque (só marca se precisar de compat IE/legacy)

Tab Inkscape:

• Remove The Inkscape namespace: marque
• Remove Inkscape namespace from elements: marque
• Convert CSS attributes to XML attributes: desmarque (CSS e preferível)

Tab Output:

• Number of significant digits: 4-5 (padrão 8 e exagero para web)
• Allow pretty-printing: desmarque para produção (economiza whitespace)

Inkscape vs SVGOMG🔗

O otimizador do Inkscape e bom, mas o SVGOMG (SVGO online) remove ainda mais. Fluxo recomendado:

1. Crie e edite no Inkscape
2. Salve como SVG nativo (.svg) para manter editabilidade
3. Exporte copia para web com Optimized SVG
4. Passe pelo SVGOMG para remoção adicional (ids não usados, viewBox normalizado, paths combinados)

IDs e classes para animação🔗

Antes de otimizar, garanta que elementos animados tenham IDs ou classes:

1. Selecione o elemento
2. Abra Object Properties (Ctrl + Shift + O )
3. Defina ID (para SMIL xlink:href) e/ou CSS class (para CSS)

O otimizador remove IDs não referenciados - se um <animate> referencia #meucirculo, o ID será preservado. Mas IDs usados apenas por CSS externo podem ser removidos; nesse caso, desmarque "Remove unused IDs" no SVGOMG.

Referências🔗

• Inkscape Manual — Techniques overview
• Inkscape — Learn (tutoriais oficiais)
• W3C — Scalable Vector Graphics (SVG) 1.1 (Second Edition)