Exportação SVG animada

3 min read

Exportar suas animações como arquivos SVG para web embedding e gráficos escaláveis.

Quando usar o SVG

SVGs são ideais quando:

  • Incorporando animações em sites
  • É necessária uma escalabilidade infinita
  • Tamanho pequeno do arquivo é importante
  • Você precisa de saída vetorial editável

Exportando como SVG

  1. Clique em Exportar no cabeçalho
  2. Selecione SVG animado
  3. Clique em Exportar
  4. Transferências de ficheiros imediatamente

Suporte à Animação

Totalmente Suportado

Animação Saída do SVG
Pulso <animateTransform type="scale">
Rodar <animateTransform type="rotate">
Salto <animateTransform type="translate">
Desvanecer <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Deslizar <animateTransform type="translate">
Subir <animateTransform type="translate">

Não Suportado

Característica Justificação
Máquina de escrever Requer JavaScript
Efeitos (Sparkle, Blast) Animações baseadas em quadros
Rotação de padrões emFrame-based
Quadros de teclas complexos Suporte SMIL limitado

Suporte ao navegador: Animações SVG usam SMIL, que é suportado no Chrome, Firefox, Safari e Edge. Alguns navegadores mais antigos podem mostrar SVG estático.

Incorporar em Sites

Incorporação Direta

<img src="animation.svg" alt="Animated graphic">

SVG em linha

Para mais controle, cole o código SVG diretamente:

<svg viewBox="0 0 800 600">
  <!-- SVG content -->
</svg>

Fundo do CSS

.element {
  background-image: url('animation.svg');
}

Personalizar após a exportação

Arquivos SVG são XML editáveis. Você pode:

  • Abrir num editor de texto
  • Modificar cores, tamanhos, tempo
  • Adicionar um estilo CSS
  • Incorporar JavaScript personalizado

O Que É Exportado

Elemento Exportado Como
Texto Elementos <text>
Formas <path>, <circle>, etc.
Contexto <rect> com preenchimento
Animações Marcas SMIL <animate>

Tamanho do Ficheiro

Arquivos SVG são tipicamente muito pequenos:

  • Animação simples: 2-10 KB
  • Cena complexa: 20-50 KB
  • Muito menor que GIF ou MP4

Dicas

Dicas do SVG:

  • Usar SVG para incorporar a Web onde a qualidade importa
  • Evite efeitos e animação da máquina de escrever
  • Teste nos navegadores de destino
  • SVGs podem ser decorados com CSS após incorporação

Retirada para Animações Não Suportadas

Se o seu design usa recursos não suportados:

  1. Exportar como MP4 ou GIF para a versão animada
  2. Exportar como PNG para um recurso estático
  3. Usar o elemento <picture> para realce progressivo