Animated SVG Export

3 min read

Exporte sus animaciones como archivos SVG para incrustaciones web y gráficos escalables.

Cuándo utilizar SVG

Los SVG son ideales cuando:

  • Incrustar animaciones en sitios web
  • Se necesita escalabilidad infinita
  • El tamaño pequeño de archivo es importante
  • Necesitas salida de vectores editable

Exportación como SVG

  1. Click Export en el encabezado
  2. Seleccionar Animated SVG
  3. Haga clic en **
  4. Descargas de archivos inmediatamente

Apoyo a la animación

Totalmente admitido

Animación Producto SVG
Pulso <animateTransform type="scale">
Rotación <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Slide <animateTransform type="translate">
Levántate <animateTransform type="translate">

No se admiten ❌

Característica Razón
Escribedor Requiere JavaScript
Efectos (Sparkle, Blast) Animaciones basadas en marcos
Rotación del patrón onFrame-based
Marcos de clave complejos Soporte SMIL limitado

Apoyo del navegador: Las animaciones SVG utilizan SMIL, que es compatible con Chrome, Firefox, Safari y Edge. Algunos navegadores antiguos pueden mostrar SVG estático.

Embedding on Websites

Incrustación directa

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

Inline SVG

Para más control, pegar código SVG directamente:

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

CSS

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

Personalización después de la exportación

Los archivos SVG son XML editables. Puedes:

  • Abrir en un editor de texto
  • Modificar colores, tamaños, tiempo
  • Añadir Styling CSS
  • JavaScript personalizado

Lo que se exporta

Elemento Exportado
Texto Elementos <text>
Formas <path>, <circle>, etc.
Antecedentes <rect> con relleno
Animaciones Etiquetas SMIL <animate>

Tamaño del archivo

Los archivos SVG son típicamente muy pequeños:

  • Animación sencilla: 2-10 KB
  • Escena compleja: 20-50 KB
  • Mucho más pequeño que GIF o MP4

Consejos

SVG Consejos:

  • Utilice SVG para incrustar web donde importa la calidad
  • Evite los efectos y la animación de máquina de escribir
  • Prueba en los navegadores de destino
  • Los SVG se pueden estilo con CSS después de la incrustación

Fallback for Unsupported Animations

Si su diseño utiliza características sin soporte:

  1. Exportar como MP4 o GIF para la versión animada
  2. Exportar como PNG para un retroceso estático
  3. Utilice el elemento <picture> para el realce progresivo