Animovaný export SVG

3 min read

Exportujte svá animace jako soubory SVG pro webové vkládání a škálovatelnou grafiku.

Kdy používat SVG

SVG jsou ideální, když:

  • Vkládání animací na webové stránky
  • Nekonečná škálovatelnost je potřebná
  • Malá velikost souboru je důležitá
  • Potřebujete editovatelný vektorový výstup

Vývoz jako SVG

  1. Klikněte na * * Export * * v záhlaví
  2. Vyberte * * Animované SVG * *
  3. Klikněte na * * Export * *
  4. Soubor stahuje okamžitě

Podpora animace

Plně podporované

Animace Výstup SVG
Puls <animateTransform type="scale">
Otočit <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Posun <animateTransform type="translate">
Povstaňte <animateTransform type="translate">

Nepodporované

Funkce Odůvodnění
Psací stroj Vyžaduje JavaScript
Účinky (jiskra, výbuch) Animace založené na snímcích
Rotace vzorců onFrame- based
Komplexní klíčové rámy Omezená podpora SMIL
    • Podpora prohlížeče: * * * SVG animace používají SMIL, který je podporován v Chrome, Firefox, Safari a Edge. Některé starší prohlížeče mohou zobrazovat statické SVG.

Vkládání na webové stránky

Přímý Embed

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

Inline SVG

Pro větší kontrolu vložte SVG kód přímo:

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

Pozadí CSS

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

Přizpůsobení po exportu

Soubory SVG jsou editovatelné XML. Můžete:

  • Otevřít v textovém editoru
  • Změnit barvy, rozměry, načasování
  • Přidat CSS styling
  • Vložený vlastní JavaScript

Co bude vyvezeno

Prvek Vývoz jako
Text <text> prvky
Tvary <path>, <circle>, atd.
Pozadí <rect> s vyplněním
Animace Tagy SMIL <animate>

Velikost souboru

Soubory SVG jsou obvykle velmi malé:

  • Jednoduchá animace: 2-10 KB
  • Komplexní scéna: 20-50 KB
  • Mnohem menší než GIF nebo MP4

Tipy

Tipy SVG:

  • Použití SVG pro webové vložené tam, kde na kvalitě záleží
  • Vyhněte se efektům a animaci psacích strojů
  • Test v cílových prohlížečích
  • SVG může být styled s CSS po vložení

Fallback pro nepodporované animace

Pokud váš design používá nepodporované funkce:

  1. Exportovat jako MP4 nebo GIF pro animovanou verzi
  2. Exportovat jako PNG pro statické pozadí
  3. Použít <picture> prvek pro progresivní vylepšení