Export animat SVG

3 min read

Exportaţi animaţiile ca fişiere SVG pentru web înglobare şi grafică scalabilă.

Când se utilizează SVG

SVG-urile sunt ideale atunci când:

  • Includerea animațiilor pe site-uri web
  • Este nevoie de scalabilitate infinită
  • Mărimea fișierului mic este importantă
  • Aveți nevoie de ieșire vector editabil

Exportă ca SVG

  1. Click Export în antet
  2. Selectaţi Animate SVG
  3. Click Export
  4. Descarcă fișierul imediat

Suport animație

Pe deplin susţinute

Animație Ieșire SVG
Puls <animateTransform type="scale">
Rotește <animateTransform type="rotate">
Sari <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Diapozitiv <animateTransform type="translate">
Ridică-te <animateTransform type="translate">

Nesusţinută

Caracteristici Motivul
Scriitor de tip Necesită JavaScript
Efecte (Sparkle, Blast) Animații pe bază de cadru
Rotație tip pe bază de Frame
Taste complexe Suport limitat SMIL

Browser Support: SVG animations use SMIL, that is supported in Chrome, Firefox, Safari, and Edge. Unele browsere mai vechi pot arăta SVG statice.

Introducerea pe site-uri web

Încorporează direct

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

Inline SVG

Pentru mai mult control, lipiţi codul SVG direct:

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

Fundal CSS

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

Personalizarea după export

Fișierele SVG pot fi editate XML. Poţi:

  • Deschide într-un editor de text
  • Modificare culori, dimensiuni, sincronizare
  • Adaugă styling CSS
  • Încorporează JavaScript personalizat

Ce este exportat

Element Exportat
Text Elemente <text>
Forme <path>, <circle>, etc.
Context <rect> cu umplere
Animații Etichete SMIL <animate>

Mărime fișier

Fişierele SVG sunt de obicei foarte mici:

  • Animație simplă: 2-10 KB
  • Scena complexa: 20-50 KB
  • Mult mai mici decât GIF sau MP4

Sfaturi

SVG Sfaturi:

  • Utilizați SVG pentru web integrat în cazul în care calitatea contează
  • Evitaţi efectele şi animaţia maşinii de scris
  • Test în browserele țintă
  • SVG-urile pot fi modelate cu CSS după înglobare

Retragerea animaţiilor nesusţinute

În cazul în care proiectul dumneavoastră utilizează caracteristici nesuportate:

  1. Exportă ca MP4 sau GIF pentru versiunea animată
  2. Exportă ca PNG pentru o rezervă statică
  3. Utilizați elementul <picture> pentru îmbunătățirea progresivă