Esportazione di SVG Animata

3 min read

Esporta le tue animazioni come file SVG per la grafica web embedding e scalabile.

Quando utilizzare SVG

Gli SVG sono ideali quando:

  • Incorporare animazioni su siti web
  • La scalabilità infinita è necessaria
  • La dimensione del file piccolo è importante
  • Hai bisogno di uscita vettoriale modificabile

Esportazione come SVG

  1. Fare clic su Esporta nell’intestazione
  2. Selezionare Animated SVG
  3. Fare clic su Esporta
  4. Scarica file immediatamente

Supporto di animazione

Completamente sostenuto ✅

Animazione Uscita SVG
Pulsante <animateTransform type="scale">
Ruotare <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Fase <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Scivolo <animateTransform type="translate">
Rischio <animateTransform type="translate">

Non supportato equipaggiamento

Caratteristica Motivazione
Macchina da scrivere Richiede JavaScript
Effetti (Sparkle, Blast) Animazioni basate su frame
Rotazione del modello onFrame
Portachiavi complessi Supporto SMIL limitato

Supporto del browser: Le animazioni SVG utilizzano SMIL, che è supportato in Chrome, Firefox, Safari e Edge. Alcuni browser più vecchi possono mostrare SVG statico.

Integrazione su siti web

Embed diretto

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

In linea SVG

Per più controllo, incolla il codice SVG direttamente:

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

Sfondo CSS

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

Personalizzazione dopo l’esportazione

I file SVG sono XML modificabili. Potete:

  • Aprire in un editor di testo
  • Modificare colori, dimensioni, tempi
  • Aggiungere lo stile CSS
  • Embed JavaScript personalizzato

Cosa viene esportato

Elemento Esportato come
Testo Elementi <text>
Forma <path>, <circle>, ecc.
Contesto <rect> con riempimento
Animazione Tagli SMIL <animate>

Dimensione del file

I file SVG sono tipicamente molto piccoli:

  • Animazione semplice: 2-10 KB
  • Scena complessa: 20-50 KB
  • Molto più piccolo di GIF o MP4

Consigli

Punte SVG:

  • Utilizzare SVG per web incorporato dove la qualità
  • Evitare gli effetti e l’animazione della macchina da scrivere
  • Test nei browser di destinazione
  • Gli SVG possono essere modellati con CSS dopo l’integrazione

Fallback per le animazioni non supportate

Se il tuo design utilizza funzioni non supportate:

  1. Esporta come MP4 o GIF per la versione animata
  2. Esportare come PNG per un fallback statico
  3. Utilizzare l’elemento <picture> per il miglioramento progressivo