Geanimeerde SVG-export

2 min read

Exporteer uw animaties als SVG-bestanden voor web-inbedding en schaalbare afbeeldingen.

Wanneer SVG gebruiken

SVG’s zijn ideaal wanneer:

  • Animaties op websites insluiten
  • Oneindige schaalbaarheid is nodig
  • Kleine bestandsgrootte is belangrijk
  • U heeft bewerkbare vector uitvoer nodig

Exporteren als SVG

  1. Klik op Export in de header
  2. Selecteer Geanimeerd SVG
  3. Klik op Export
  4. Bestandsdownloads onmiddellijk

Animatieondersteuning

Volledig ondersteund

Animatie SVG-uitvoer
Pols <animateTransform type="scale">
Draaien <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Vervagen <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Dia <animateTransform type="translate">
Stijgen <animateTransform type="translate">

Niet ondersteund ❌

Functie Reden
Schrijfmachine Vereist JavaScript
Effecten (Sparkle, Blast) Frame-gebaseerde animaties
Patroonrotatie onFrame-based
Complexe sleutelframes Beperkte SMIL-ondersteuning

Browser Ondersteuning: SVG animaties gebruiken SMIL, die wordt ondersteund in Chrome, Firefox, Safari en Rand. Sommige oudere browsers kunnen statische SVG tonen.

Inbedding op websites

Direct ingesloten

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

Inline SVG

Voor meer controle, plak SVG code direct:

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

CSS achtergrond

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

Aanpassen na exporteren

SVG-bestanden zijn bewerkbare XML. Je kunt:

  • Openen in een teksteditor
  • Kleuren, maten, timing wijzigen
  • CSS-styling toevoegen
  • Aangepaste JavaScript invoegen

Wat wordt geëxporteerd

Element Geexporteerd als
Tekst <text>-elementen
Vormen <path>, <circle>, enz.
Achtergrond <rect> met vullen
Animaties SMIL <animate>-tags

Bestandsgrootte

SVG-bestanden zijn meestal zeer klein:

  • Eenvoudige animatie: 2-10 KB
  • Complexe scène: 20-50 KB
  • Veel kleiner dan GIF of MP4

Tips

SVG Tips:

  • SVG gebruiken voor web-inbed waar kwaliteit belangrijk is
  • Vermijd effecten en schrijfmachineanimatie
  • Test in doelbrowsers
  • SVG’s kunnen worden gestyld met CSS na inbedding

Terugval voor niet-ondersteunde animaties

Als uw ontwerp gebruik maakt van niet-ondersteunde functies:

  1. Exporteer als MP4 of GIF voor de geanimeerde versie
  2. Exporteren als PNG voor een statische terugval
  3. <picture>-element gebruiken voor progressieve verbetering