Animerad SVG Export

2 min read

Exportera dina animationer som SVG-filer för webbinbäddning och skalbar grafik.

När man använder SVG

SVG är idealiska när:

  • Inbädda animationer på webbplatser
  • Oändlig skalbarhet behövs
  • Liten filstorlek är viktig
  • Du behöver redigerbar vektorutgång

Exportera som SVG

  1. Klicka Export* i rubriken
  2. Välj Animerad SVG*
  3. Klicka Export**
  4. Fil nedladdningar omedelbart

Animationsstöd

Fullt stöds

Animation SVG Utgång
Puls <animateTransform type="scale">
Rotate <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Slide <animateTransform type="translate">
Rise <animateTransform type="translate">

Stöds inte

Funktion Reason
Typewriter Kräver JavaScript
Effekter (Sparkle, Blast) Rambaserade animationer
Mönster rotation onFrame-baserade
Komplexa keyframes Begränsat stöd från SMIL

Browser Support: SVG animationer använder SMIL, som stöds i Chrome, Firefox, Safari och Edge. Vissa äldre webbläsare kan visa statisk SVG.

Inbäddning på webbplatser

Direkt inbäddad

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

Inline SVG

För mer kontroll, klistra in SVG-kod direkt:

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

CSS Bakgrund

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

Anpassning efter export

SVG filer är redigerbara XML. Du kan:

  • Öppna i en textredigerare
  • Ändra färger, storlekar, timing
  • Lägg till CSS styling
  • Inbäddad anpassad JavaScript

Vad får exporteras

Element Exporterad som
Texttext <text> element
Shapes <path>, <circle>, etc.
Bakgrund <rect> med fyllning
Animationer SMIL <animate>-taggar

Filstorlek

SVG-filer är vanligtvis mycket små:

  • Enkel animation: 2-10 KB
  • Komplex scen: 20-50 KB
  • Mycket mindre än GIF eller MP4

Tips

SVG Tips:

  • Använd SVG för webben inbäddad där kvalitetsfrågor
  • Undvik effekter och typskrivare animation
  • Test i målwebbläsare
  • SVG kan utformas med CSS efter inbäddning

Fallback för ostödda animationer

Om din design använder ostödda funktioner:

  1. Exportera som MP4 eller GIF för den animerade versionen
  2. Exportera som PNG för en statisk nedgång
  3. Använd <picture>-element för progressiv förbättring