Miért érdemes használni az SVG képeket: hogyan lehet animálni az SVG-ket és villámgyorsan elkészíteni őket?

Miért használjuk az SVG-t?

A webfejlesztési szektor gyors ütemben növekszik, és az SVG (méretezhető vektorgrafika) képek egyre népszerűbbek. Vektoros képként az SVG-k matematikai egyenletekből állnak, amelyek meghatározzák a vonalak és görbék elhelyezkedését és színét, amelyek XML formátumban alkotják a grafikus alakzatokat és szöveget. Az SVG-ket ikonokhoz, logókhoz, grafikai tervekhez és betűtípusokhoz használják.

Az SVG-k használata könnyű választás, ha figyelembe vesszük az általuk kínált előnyöket. Egy kliens számára kiváló minőséget nyújt bármilyen eszközön. Nekünk, mint fejlesztőknek még több oka van az SVG használatára.

Beszéljük meg most az SVG néhány előnyét.

1. Szövegalapú formátum

Az SVG elemek szöveget tartalmaznak, ami nagyban javítja a weboldal hozzáférhetőségét. De a fő előny az, hogy ezt a szöveget a keresőmotorok indexelik. És egy felhasználó megtalálhatja az SVG fájlt a Google-n keresztül.

2. Méretezhetőség

Az SVG képek minősége nem függ a felbontástól. A más formátumú képektől vagy az ikontípusú képektől eltérően az SVG-k tökéletesen élesek minden eszközön, bármilyen méretű képernyővel. A méretezhetőség azt is jelenti, hogy ha ugyanazt a képet használja a weboldalon, de különböző méretben, akkor egyetlen SVG-t használ. Nem kell több példányt készítenie belőle, mint a PNG esetében. Ehelyett ugyanazt a képet ágyazza be, és közvetlenül SVG-kódban határozza meg annak méretét.

Méretezhetőség

3. Nagy teljesítmény

Ha előtérbe helyezi a teljesítményt, akkor használja az SVG-t. Az SVG használatával nincs szükség HTTP-kérelemre egy képfájlba való betöltéshez. Az oldal gyorsabban töltődik be, mivel nincsenek letölthető fájlok. A gyorsabb betöltési idő jobb weboldal-teljesítményt és magasabb keresőmotor-besorolást jelent. Viszont javítja a felhasználói élményt.

4. Kis fájlméret

Az egyszerű SVG fájlok méretét a benne található színek, rétegek, színátmenetek, effektusok és maszkok határozzák meg. A PNG vagy bármely más raszteres grafikus fájl méretét a képpontok száma határozza meg, amelyekből áll. Minél nagyobb egy PNG-kép, annál nehezebb lesz a mérete. Az SVG ikonok esetében azonban ez nem áll fenn. Ezenkívül az SVG-k optimalizálhatók, és ezt később elmondom ebben a cikkben.

SVG fájlméret

5. Számos szerkesztési és animációs lehetőség

A raszteres képektől eltérően a vektoros képek szerkeszthetők mind speciális vektoros rajzprogramokban, mind közvetlenül szövegszerkesztőben. Az SVG ikonok színeit és méreteit közvetlenül a CSS-en keresztül is szerkesztheti. Ami az SVG-k animálását illeti, SMIL, Web Animations API, WebGL vagy CSS animáció segítségével végezhető el. Görgessen lefelé, ha többet szeretne megtudni az SVG képek CSS animációjáról.

6. Integráció HTML, XHTML és CSS-sel

Az SVG-t úgy tervezték, hogy „integrálódjon és kiterjessze más prominens nyílt webes platform technológiákat, mint például az X / HTML, CSS és Javascript” - írja a W3C. Tehát a különböző képformátumokkal ellentétben ez a formátum könnyen integrálható más dokumentumokkal és technológiákkal.

7. W3C dokumentum objektum modell támogatás

A közösségi támogatás egyre növekszik az SVG számára. A World Wide Web Consortium (W3C) mindig azt állította, hogy az internet nem nélkülözheti vektoros képeket. Ez a szervezet alapvetően létrehozta az SVG formátumot, és manapság aktívan támogatják.

Melyek az SVG kellemetlenségei?

A kis alkatrészek nagy száma irracionálissá teszi az SVG formátum használatát. Minél több részből áll egy kép, annál nehezebb lesz a mérete.

Például itt van az Egyesült Államok két SVG-térképe. A második valamivel részletesebb, mint az első. De a magasabb szintű részletesség csaknem ötszörösére növeli a fájlméretet - 33 KB a 147 KB-hoz képest. Ha ez a térkép nem lenne monokromatikus, akkor a növekedés sokkal nagyobb lenne.

SVG térképek

Ha a kép lineáris és néhány színt tartalmaz - az SVG a megoldás. Ha azonban a részletek számítanak, és sok van belőlük, a PNG vagy a JPEG alkalmasabb lehet.

Vegye figyelembe azt is, hogy az SVG nem használható fényképekhez. Ha fényképet használ a webhelyén, az SVG nem a legjobb megoldás. Mindenképpen raszteres képformátumot kell választania.

Az SVG képek optimalizálása

Vektoros formátum renderelésénél fel kell írnunk néhány extra SVG kódot. A végeredményt különféle szolgáltatások felhasználásával kell optimalizálni. Az SVG optimalizálásához leggyakrabban a Node.js SVGO eszközt használom. Használata meglehetősen egyszerű, és nem kell feltölteni a képeket más webhelyekre.

Példa SVG optimalizálásra SVGO segítségével

Hogyan animáljuk az SVG-t

A webes SVG grafikák számos módon animálhatók:

  1. SMIL, amely a natív SVG animációs specifikáció
  2. Web Animations API, amely egy natív JavaScript API, amely lehetővé teszi, hogy összetettebb szekvenciális animációkat hozzon létre külső szkriptek betöltése nélkül
  3. WebGL
  4. CSS animáció

Nézzük meg az utolsót.

A CSS animációt arra használják, hogy elkerüljék a szolgáltatás túlterhelését nagy könyvtárakkal az ikonok és a betöltők animálásához.

Az SVG példájának megtekintéséhez ellenőrizze az animált sárgáját, amelynek grafikai tervezését kezdetben a Vázlat rajzolta meg.

SVG gif

Amint itt láthatja, a Keyframe Animation Syntax-ot használom az animációhoz. Egy elem kezdeti helyzetének id (0%), átmenet (50%) és végső pozíció (100%) beállításával valósul meg. A sima animáció elérése érdekében a kezdeti és a végső érték megegyezik.

Íme néhány előny a CSS-megközelítés SVG-animációhoz való használatáról:

  1. Nincs szüksége külső könyvtárra.
  2. Az előfeldolgozók (például a Sass vagy a Less) lehetővé teszik változók létrehozását.
  3. Használhatja az onAnimationEnd alkalmazást és néhány más animációs horgot natív JavaScript-sel.
  4. Ezt a megközelítést könnyen lehet használni az adaptív webdesign fejlesztésében, mert média lekérdezésekkel módosíthatja animációját.

A CSS animáció használatának hátrányai a következők:

  1. Nem hozhat létre olyan összetett fizikai hatásokat, amelyek reálisabbá tennék az animációt.
  2. Az időzítés beállításához sok újraszámítást kell végrehajtani.
  3. A mobil CSS és SVG grafikák néha furcsa feltöréseket igényelnek.

Például

Ennek ellenére érdekes projekteket készíthetünk egyszerű és triviális CSS animáció segítségével. Például készítettem egy egyszerű játék-videót HTML, CSS és egy kis JavaScript használatával. Az összes SVG-t a Sketch-be rajzoltuk. A játék célja a hercegnő megmentése. Bármely helyzetben csak kattintson. A projektet a GitHub-on találja meg.

Összecsomagolás

Az SVG-k remek képformátumok. Méretezhetők, könnyűek, szövegesek és hatékonyak. Könnyen szerkeszthetők, animálhatók és integrálhatók. Fontos, hogy az Internet Explorer 8 és az Android 2.3 kivételével szinte minden böngésző támogatja őket.

Bár a méretezhető vektorgrafikus képekkel való munkavégzés megtanulása eltarthat egy ideig, ez egy olyan befektetés, amely megtérül az SVG előnyeinek figyelembevételével.

Van ötlete egy szoftver projektre?

Cégem, a KeenEthics egy tapasztalt webalkalmazások-fejlesztők csapata. Abban az esetben, ha ingyenes becslésre van szüksége egy hasonló projekthez, vegye fel bátran a kapcsolatot .

További hasonló cikkeket elolvashat a Keen blogomon. Engedje meg, hogy javasoljuk, olvassa el A felhasználói tesztelés értéke vagy 7 eset, amikor nem szabad használni a Dockert.

PS

Ezenkívül szeretnék köszönetet mondani Maryna Yanulnak, aki társszerzővé tette ezt a cikket, valamint az olvasóknak, hogy a végére értek!

A KeenEthics blogon közzétett eredeti cikk itt található: Friss perspektíva a miért, mikor és hogyan kell használni az SVG-t.