Animert SVG-eksport

2 min read

Eksporter animasjonene dine som SVG-filer for webinnbygging og skalerbar grafikk.

Når du skal bruke SVG

SVG er ideelt når:

  • Innbygging av animasjoner på nettsteder
  • Uendelig skalerbarhet er nødvendig
  • Liten filstørrelse er viktig
  • Du trenger redigerbar vektorutgang

Eksporterer som SVG

  1. Klikk Eksporter i overskriften
  2. Velg Animert SVG
  3. Klikk Eksporter
  4. Filnedlastinger umiddelbart

Støtte for animasjon

Fullt støttet ✅

Animasjon SVG Utgang
Pulse <animateTransform type="scale">
Roter <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Lysbilde <animateTransform type="translate">
Rise <animateTransform type="translate">

Ikke støttet ❌

Funksjon Grunn
Skrivemaskin Krever JavaScript
Effekter (Sparkle, Blast) Rammebaserte animasjoner
Mønsterrotasjon på rammebasert
Komplekse nøkkelrammer Begrenset SMIL-støtte

Browserstøtte: SVG animasjoner bruker SMIL, som støttes i Chrome, Firefox, Safari og Edge. Noen eldre nettlesere kan vise statisk SVG.

Innbygging på nettsteder

Direkte Embed

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

Integrert SVG

For mer kontroll, lim SVG kode direkte:

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

CSS Bakgrunn

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

Tilpasse etter eksport

SVG-filer er redigerbare XML. Du kan:

  • Åpne i tekstredigering
  • Endre farger, størrelser, timing
  • Legg til CSS styling
  • Bygg inn egendefinert JavaScript

Hva blir eksportert

Element Eksportert som
Tekst <text> elementer
Former <path>, <circle>, etc.
Bakgrunn <rect> med fyll
Animasjoner SMIL <animate> tags

Filstørrelse

SVG-filer er vanligvis svært små:

  • Enkel animasjon: 2-10 KB
  • Kompleks scene: 20-50 KB
  • Mye mindre enn GIF eller MP4

Tips

SVG Tips:

  • Bruk SVG for web embed der kvalitet betyr noe
  • Unngå effekter og skrivemaskin animasjon
  • Test i mållesere
  • SVG kan stiles med CSS etter innlegging

Tilbakefall for Ustøttede animasjoner

Hvis designet ditt bruker funksjoner som ikke støttes:

  1. Eksporter som MP4 eller GIF for den animerte versjonen
  2. Eksporter som PNG for en statisk reserve
  3. Bruk <picture> element for progressiv forbedring