Animált SVG Export

2 min read

Exportálja animációit SVG fájlok web beágyazott és méretezhető grafika.

Mikor kell használni a SVG

Az SVG-k akkor ideálisak, ha:

  • Animációk beágyazása honlapokra
  • Végtelen méretre van szükség
  • A kis méret fontos
  • Szükség van szerkeszthető vektorkimenet

SVG-ként történő kivitel

  1. Kattintson * * Export * * a fejléc
  2. Válasszon * * Animated SVG * *
  3. Kattintson * * Export * *
  4. Fájl letöltések azonnal

Animációs támogatás

Teljes támogatás

Animáció SVG Kimenet
Pulzus <animateTransform type="scale">
Forgatás <animateTransform type="rotate">
Ugrás <animateTransform type="translate">
Árapály <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Slide <animateTransform type="translate">
Kelj fel <animateTransform type="translate">

Nem támogatott

Jellemzők Indokolás
Írógép JavaScript szükséges
Hatások (Sparkle, Blast) Keretalapú animációk
Mintaforgás onFrame- alapú
Komplex billentyűzet Korlátozott SMIL támogatás
    • Browser Support: * * SVG animációk SMIL, amely támogatott a Chrome, Firefox, Safari, és Edge. Néhány régebbi böngésző mutathat statikus SVG.

Beágyazás honlapokra

Közvetlen beágyazás

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

Beépített SVG

A további ellenőrzés, beillesztése SVG kód közvetlenül:

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

CSS Háttér

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

Exportálás után testreszabás

SVG fájlok szerkeszthető XML. Megteheted:

  • Megnyitás szövegszerkesztőben
  • Színek, méretek, időzítés módosítása
  • CSS stílus hozzáadása
  • Egyedi JavaScript beágyazva

What Getts Exported

Elem Exportált
Szöveg <text> elemek
Alakzatok <path>, <circle> stb.
Háttér <rect> kitöltéssel
Animációk SMIL <animate> címkék

Fájl mérete

SVG fájlok jellemzően nagyon kicsi:

  • Egyszerű animáció: 2- 10 KB
  • Komplex jelenet: 20- 50 KB
  • Sokkal kisebb, mint a GIF vagy MP4

Tippek

SVG Tippek:

  • A SVG használata webes beágyazáshoz, ahol a minőség számít
  • A hatások és az írógép animáció elkerülése
  • A célböngészők vizsgálata
  • SVG lehet stiled CSS beágyazás után

Visszaesés a nem támogatott animációkhoz

Ha a design nem támogatott funkciókat használ:

  1. Export mint MP4 vagy GIF az animációs verzióhoz
  2. Kivitel PNG-ként statikus visszaesés esetén
  3. <picture> elem használata a fokozatos javításhoz