Animierter SVG Export

3 min read

Exportieren Sie Ihre Animationen als SVG-Dateien für Web-Einbettung und skalierbare Grafiken.

Wann Sie SVG verwenden

SVGs sind ideal, wenn:

  • Einbetten von Animationen auf Websites
  • Unendliche Skalierbarkeit ist erforderlich
  • Kleine Dateigröße ist wichtig
  • Sie benötigen eine editierbare Vektorausgabe

Exportieren als SVG

  1. Klicken Sie auf Export im Header
  2. Wählen Sie Animiertes SVG
  3. Klick Export
  4. File Downloads sofort

Animationsunterstützung

Voll unterstützt ✅

Animation SVG-Ausgang
Puls <animateTransform type="scale">
Rotation <animateTransform type="rotate">
Hüllen <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wackeln <animateTransform type="rotate">
Schlitten <animateTransform type="translate">
Anstieg <animateTransform type="translate">

Nicht unterstützt ❌

Merkmal Grund
Schreibmaschinen Erfordert JavaScript
Auswirkungen (Sparkle, Blast) Frame-basierte Animationen
Musterrotation onFrame-basiert
Komplexe Keyframes Begrenzte SMIL-Unterstützung

**Browser-Unterstützung: SVG-Animationen verwenden SMIL, das in Chrome, Firefox, Safari und Edge unterstützt wird. Einige ältere Browser können statisches SVG anzeigen.

Einbettung in Websites

Direkte Einbettung

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

Inline SVG

Für mehr Kontrolle, fügen Sie SVG-Code direkt ein:

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

CSS Hintergrund

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

Customizing nach dem Export

SVG-Dateien sind editierbare XML. Sie können:

  • Öffnen in einem Texteditor
  • Ändern von Farben, Größen, Timing
  • Hinzufügen von CSS Styling
  • Einbetten von benutzerdefiniertem JavaScript

Was exportiert wird

Element Ausgeführt als
Text <text>-Elemente
Formen <path>, <circle> usw.
Hintergrund <rect> mit Füllung
Animationen SMIL <animate> Tags

Dateigröße

SVG-Dateien sind in der Regel sehr klein:

  • Einfache Animation: 2-10 KB
  • Komplexe Szene: 20-50 KB
  • Viel kleiner als GIF oder MP4

Tipps

SVG Tipps:

  • Verwenden Sie SVG für Web-Embed, wo Qualität wichtig ist
  • Vermeiden Sie Effekte und Schreibmaschinenanimation
  • Test in Zielbrowsern
  • SVGs können nach dem Einbetten mit CSS gestaltet werden

Fallback für nicht unterstützte Animationen

Wenn Ihr Design nicht unterstützte Funktionen verwendet:

  1. Exportieren Sie als MP4 oder GIF für die animierte Version
  2. Exportieren als PNG für einen statischen Fallback
  3. Verwenden Sie das <picture>-Element für progressive Verbesserungen