Animowany eksport SVG

3 min read

Eksportuj animacje jako pliki SVG do osadzania stron internetowych i skalowalnej grafiki.

Kiedy używać SVG

SVG są idealne, gdy:

  • Umieszczenie animacji na stronach internetowych
  • Nieskończona skalowalność jest potrzebna
  • Mały rozmiar pliku jest ważny
  • Potrzebujesz edytowalnego wyjścia wektorowego

Eksport jako SVG

  1. Kliknij * * Eksportuj * * w nagłówku
  2. Wybierz * * Animowane SVG * *
  3. Kliknij * * Eksport * *
  4. Plik pobiera natychmiast

Wsparcie animacji

W pełni obsługiwane

Animacja Wyjście SVG
Puls <animateTransform type="scale">
Obróć <animateTransform type="rotate">
Odbić <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Slide <animateTransform type="translate">
Powstań <animateTransform type="translate">

Nieobsługiwane rozszerzenia

Cecha Uzasadnienie
Typewriter Wymaga JavaScript
Efekty (błysk, wybuch) Animacje oparte na ramkach
Obrót wzoru onFrame- based
Kompleksowe ramy klawiszowe Ograniczone wsparcie SMIL
    • Wsparcie przeglądarki: * * Animacje SVG używają SMIL, który jest obsługiwany w Chrome, Firefox, Safari i Edge. Niektóre starsze przeglądarki mogą wyświetlać statyczne SVG.

Osadzanie stron internetowych

Bezpośrednie osadzanie

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

Inline SVG

Aby uzyskać większą kontrolę, wklej kod SVG bezpośrednio:

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

Tło CSS

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

Dostosowywanie po eksporcie

Pliki SVG są edytowalne XML. Możesz:

  • Otwórz w edytorze tekstu
  • Modyfikuj kolory, rozmiary, czas
  • Dodaj stylizację CSS
  • Zamieść własny JavaScript

Co dostaje wyeksportowane

Element Eksportowane jako
Tekst Elementy <text>
Kształty <path>, <circle> itp.
Kontekst <rect> z wypełnieniem
Animacje Znaczniki SMIL <animate>

Rozmiar pliku

Pliki SVG są zazwyczaj bardzo małe:

  • Prosta animacja: 2- 10 KB
  • Scena złożona: 20- 50 KB
  • Znacznie mniejsze niż GIF lub MP4

Wskazówki

SVG Porady:

  • Użyj SVG dla web embed gdzie jakość ma znaczenie
  • Unikać efektów i animacji maszyny do pisania
  • Test w przeglądarkach docelowych
  • SVG mogą być stylizowane z CSS po osadzeniu

Fallback dla nieobsługiwanych animacji

Jeśli Twój projekt wykorzystuje nieobsługiwane funkcje:

  1. Eksportuj jako MP4 lub GIF dla animowanej wersji
  2. Eksportuj jako PNG dla statycznego upadku
  3. Użyj elementu <picture> do stopniowego wzmacniania