Scalable Vector Graphics (SVG) är ett bildformat skrivet i XML. Med SVG kan du koda en tvådimensionell skalbar grafik. Sedan kan du implementera och ändra dem i CSS och JavaScript.

SVG tillåter tre typer av grafik: vektorformer (raka och böjda linjer i alla riktningar och former), bilder och text. På grund av dess olika möjligheter vänder webbdesigners sig till SVG för att göra komplexa animationer. De är lätta att installera, förlorar inte kvaliteten när de ändras i storlek och behöver inte några tredjepartsappar fungera.

Eftersom animationer fortfarande växer i popularitet är de flesta inte bekanta med dem. Den här artikeln kommer att belysa 20 fantastiska SVG-animationer som visar potentialen i detta format.

1. Medicinsk SVG-ikoner av kattungar

Denna varma och smidiga animering är utmärkt för alla hälsorelaterade webbplatser. När du listar igenom de olika trådarna, kommer bilderna att visas subtilt. Ambulansbilen eller atomen kommer att konstruera, ögat öppnas och läkaren hoppar ut. Denna animering visar SVGs alla roliga och dynamiska.

Länk

2. Hover av SeanMcCaffery

Universal animation som du kan lägga till vilken interaktiv webbplats som helst. Det subtila utseendet på gränserna när du svävar lämnar dig med en tillfredsställande känsla och inbjuder dig att klicka på länken.

Länk

3. Dra ner till Refresh (Paper Plane) av Nikolay Talanov

Vanligtvis kommer sidor att uppdateras när du ”drar ner” dem. Denna animering ger detta till en ny nivå. När du drar ner för att släppa det kommer du att starta ett pappersplan i himlen. Om du vill att dina besökare ska uppdatera din app ofta bör du överväga att lägga till en animering som denna.

4. Just Keep Going av Diaco M. Lotfollahi

En SVG-animation som visar potentialen för skalningsvektorn. Den mjuka exakta rörelsen i människokroppen är hypnotiserande.

Länk

5. SVG-filter Tillagd i HTML5-videon

Paul Irish från Google Chrome-teamet tittade på hur SVG kan modifiera innehåll utanför vektorgrafik. Han kombinerade CSS och SVG för att göra fantastiska visuella filter för att visa att SVG-animering kan vara ett bra komplement till en färdig video.

Länk

6. Pussel

Du kan göra fantastiska interaktiva pussel med SVG-animering. I det här exemplet kan vi välja en av många bilder och se hur den dekonstruerar till många små pusselbitar. Du kan också rekonstruera det!

Länk

7. Liner Gradient av Patrick Young

Om du använder neonljus och vackra teckensnitt, kommer du att njuta av denna animering. Detta arbete visar hur du inte behöver några rörliga linjer för en lysande animation, bara ett bra teckensnitt och korrekt färgkod med gradienteffekt.

Länk

8. Låt oss resa av jjperezaguinaga

Två flygplan och en varmluftsballong som kretsar kring populära landmärken i världen. Denna animering är färgglad, optimistisk och sinnesblåsande. Det visar allt du kan göra om du är skicklig i SVG.

Länk

9. Clock av Mohamad Mohebifar

En enkel SVG-animation av en rörlig klocka som visar aktuell tid. Pekarnas lugnande rörelse och minimalistisk design gör underverk för denna animering.

Länk

10. Animerade ikoner av Luigi De Rosa

Om du håller muspekaren över dessa ikoner utlöser du animationerna, som är enkla men effektiva. Du kan se att du inte behöver göra underverk för att göra en imponerande animerad ikon.

11. Alla enheter i SVG av Chris Gannon

En animering med ett tag som går över alla smarta enheter som vi använder på det mest kreativa sättet. Skrivbordet förvandlas till en bärbar dator, bärbar dator till en surfplatta och sedan till en smartphone.

Länk

12. Vattenfall av Chris Gannon

En annan av Chris Gannon, detta är en snygg demonstration av en skummande vattenfallsbotten. Vattnets rörelse är snygg, och du kan se små droppar av det stänkande vattnet som lämnar animeringens gränser för att allt ska se mer realistiskt ut.

Länk

13. Plant Generator av Blake Bowen

Nu är den här något annat. När du klickar på knappen "Skapa" ser du växter stiga och växa. Men varje gång du klickar kommer olika mönster att bildas.

Länk

14. Klickabar ikon av Hamish Williams

En annan interaktiv SVG som utlöser en animering när du klickar på den. Den här kommer att initiera "Skicka" -animationen när du klickar på den.

Länk

15. Ny tårta av Marco Barría

Intressant animering som visar skapandet av en kaka lager för lager. Det är en imponerande SVG-animation som passar för ett födelsedagskort.

16. Paper Shredder av Chris Gannon

Om du gillar att titta på pappersstrimling kommer du att njuta av den här animationen som visar en maskin som strimlar papper efter papper obegränsade gånger i en sömlös sekvens.

Länk

17. Low PolyLion av GRAYGHOST

Detta är en iögonfallande illustration och animering som visar ett lejonhuvud som visas och försvinner i form av animerade polygoner.

Länk

18. Timglaslastare av Leela

En annan effektiv animation som bara använder SVG. Var 5: e sekund vänder timglaset upp och ner och startar en ny cykel.

Länk

19. Responsive Cow av Sarah Drasner

Detta är en rolig interaktiv animering som låter dig klicka på en ko och dra den runt månen medan en förvirrad astronaut tittar på den.

20. Student av Domany

En entusiastisk student verkar redo att lära sig! Det är en fantastisk animation där boksidorna vänder snyggt. Ingen blinkning från eleven, men det är fortfarande en perfekt snygg animering att avsluta listan.

Länk

Din tur

Vilka är dina favorit-SVG-animationer som inte ingår i den här listan? Dela dina val i kommentarerna nedan!