Animoitu SVG- vienti

2 min read

Vie animaatiosi SVG-tiedostoina web-kameralle ja skaalautuvalle grafiikalle.

Milloin SVG:ää käytetään

SVG on ihanteellinen, kun:

  • Animaatioiden levittäminen verkkosivustoille
  • Tarvitaan ääretön skaalautuvuus
  • Pieni tiedostokoko on tärkeä
  • Tarvitset muokattavan vektorin ulostulon

Viedä SVG:na

  1. Klikkaa Export otsikossa
  2. Valitse **Animoitu SVG
  3. Klikkaa Export
  4. Tiedosto ladataan välittömästi

Animaatiotuki

Täysin tuettu

Animointi SVG- tuloste
Pulssi <animateTransform type="scale">
Kierrä <animateTransform type="rotate">
Pommi <animateTransform type="translate">
Häivy <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Liuku <animateTransform type="translate">
Nouse <animateTransform type="translate">

Ei tuettu

Ominaisuus Perustelu
Kirjoituskone Vaatii JavaScriptin
Effects (Sparkle, Blast) Runkopohjaiset animaatiot
Kuvion pyöriminen frame-pohjainen
Monimutkaiset näppäimistöt Rajoitettu SMIL-tuki

Selaintuki: SVG animaatiot käyttävät SMIL:ää, jota tuetaan Chrome, Firefox, Safari ja Edge. Jotkut vanhemmat selaimet voivat näyttää staattista SVG.

Upottaminen verkkosivuilla

Suora upotus

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

Inline SVG

Lisää ohjaus, liitä SVG koodi suoraan:

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

CSS- tausta

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

Mukautetaan viennin jälkeen

SVG-tiedostot ovat muokattavissa XML. Voit:

  • Avaa tekstimuokkaimessa
  • Muokkaa värejä, kokoja, ajoitus
  • Lisää CSS-tyyli
  • Upota mukautettu JavaScript

Mitä viedään

Alkuaine Vietiin
Teksti <text>-elementit
Muoto <path>, <circle> jne.
Tausta <rect> täytettynä
Animaatiot SMIL <animate> -tagit

Tiedoston koko

SVG-tiedostot ovat tyypillisesti hyvin pieniä:

  • Yksinkertainen animaatio: 2-10 KB
  • Monimutkainen kohtaus: 20-50 KB
  • Paljon pienempi kuin GIF tai MP4

Vinkkejä

SVG Vinkkejä:

  • Käytä SVG web upottaa missä laatu asioita
  • Vältä vaikutuksia ja kirjoituskoneen animaatio
  • Testi kohdeselaimissa
  • SVG:t voidaan muokata CSS:llä upotuksen jälkeen

Tukemattomat animaatiot

Jos mallisi käyttää kannattamattomia ominaisuuksia:

  1. Vie MP4 tai GIF animoidulle versiolle
  2. Vie PNG-tiedostona staattiseen varajärjestelmään
  3. Käytä <picture>-elementtiä asteittaiseen parantamiseen