Animeret SVG eksport

3 min read

Eksportér dine animationer som SVG filer til webindlejring og skalerbar grafik.

Hvornår SVG skal bruges

SVAG er ideelle, når:

  • Indlejring animationer på hjemmesider
  • Uendelig skalerbarhed er nødvendig
  • Lille filstørrelse er vigtig
  • Du har brug for redigerbare vektor output

Eksporterer som SVG

  1. Klik på * * Eksportér * * i overskriften
  2. Vælg * * Animeret SVG * *
  3. Klik * * Eksportér * *
  4. Fildownloads med det samme

Animeringsunderstøttelse

Fuldt understøttet

Animation SVG Output
Pulse <animateTransform type="scale">
Rotér <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Slide <animateTransform type="translate">
Rejs dig <animateTransform type="translate">

Ikke understøttet

Funktion Årsag
Skrivemaskine Kræver JavaScript
Virkninger (Sparkle, Blast) Rammebaserede animationer
Mønsterrotation onFrame- baseret
Komplekse tastaturer Begrænset SMIL-støtte
    • Browser Support: * * SVG animationer bruge SMIL, som er understøttet i Chrome, Firefox, Safari, og Edge. Nogle ældre browsere kan vise statisk SVG.

Indlejring på websteder

Direkte indlejret

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

Inline SVG

For mere kontrol indsættes SVG-kode direkte:

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

CSS Baggrund

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

Tilpasset efter eksport

SVG filer er redigerbare XML. Du kan:

  • Åbn i en teksteditor
  • Ændr farver, størrelser, timing
  • Tilføj CSS styling
  • Indlejret brugerdefineret JavaScript

Hvad bliver eksporteret

Element Eksporteret som
Tekst <text> elementer
Former <path>, <circle> osv.
Baggrund <rect> med fyld
Animationer SMIL <animate> tags

Filstørrelse

SVG filer er typisk meget små:

  • Simpel animation: 2-10 KB
  • Komplekset scene: 20-50 KB
  • Meget mindre end GIF eller MP4

Tips

SVG Tips:

  • Brug SVG til web-integration hvor kvalitet betyder noget
  • Undgå effekter og skrivemaskine animation
  • Test i målbrowsere
  • SVAG kan styles med CSS efter indlejring

Fallback for ikke- understøttede animationer

Hvis dit design bruger ikke-understøttede funktioner:

  1. Eksportér som MP4 eller GIF til den animerede version
  2. Eksportér som PNG for statisk fallback
  3. Brug <picture> element til progressiv forbedring