Scalable Vector Graphics (SVG) er myndasnið skrifað í XML. Með SVG er hægt að umrita mynd sem er stigstærð í tveimur víddum. Þú getur síðan útfært og breytt þeim í CSS og JavaScript.

SVG býður upp á þrjár gerðir af grafík: vektorformum (beinum og bognum línum í allar áttir og lögun), myndir og texta. Vegna mismunandi aðgerða snúa vefhönnuðir sér að SVG til að búa til flókin hreyfimyndir. Þau eru auðveld í uppsetningu, missa ekki gæði þegar þau eru breytt og þurfa ekki umsóknir frá þriðja aðila.

Eftir því sem hreyfimyndir verða vinsælli þekkja flestir þær ekki. Þessi grein kynnir 20 frábær SVG teiknimyndir sem sýna fram á möguleika þessa sniðs.

1. SVG tákn fyrir læknis Kittons

Þetta hlýja og slétta fjör er frábært fyrir allar heilsutengdar vefsíður. Þegar þú listar yfir hin ýmsu efni birtast myndirnar á fíngerðum hátt. Sjúkrabíllinn eða atómið er smíðað, augað er opnað og læknirinn hoppar út. Þetta fjör sýnir alla skemmtun og gangverki SVG.

Flýtileið

2. Sveima með SeanMcCaffery

Alhliða fjör sem þú getur sett á hvaða gagnvirka vefsíðu sem er. Fíngerða útlit brúnanna þegar sveima er fær þig ánægjulega tilfinningu og býður þér að smella á hlekkinn.

Flýtileið

3. Dragðu niður til að uppfæra (Paper Plane) eftir Nikolay Talanov

Venjulega eru síðurnar uppfærðar þegar þú smellir á þær. Þetta fjör tekur þetta á nýtt stig. Þegar þú sleppir sleppirðu pappírsflugvél upp í himininn. Ef þú vilt að gestir þínir uppfæri forritið þitt oft ættirðu að bæta við slíku fjöri.

4. Haltu bara áfram með Diaco M. Lotfollahi

SVG teiknimynd sem sýnir möguleika stigstærðarferilsins. Blíður, nákvæm hreyfing mannslíkamans er heillandi.

Flýtileið

5. SVG síur bætt við HTML5 myndbandið

Paul Irish frá Google Chrome teyminu kannaði hvernig SVG getur breytt efni utan vektorgrafík. Hann sameina CSS og SVG í ótrúlegar sjónrænar síur til að sýna að SVG hreyfimynd getur verið góð viðbót við fullbúið myndband.

Flýtileið

6. Þraut

SVG fjör gerir þér kleift að búa til ótrúlegar gagnvirkar þrautir. Í þessu dæmi getum við valið eina af mörgum myndum og séð hvernig hún er sundurliðuð í mörg lítil ráðgátaverk. Þú getur líka endurbyggt það!

Flýtileið

7. Ferjahlutfall Patrick Young

Ef þér líkar vel við neonljós og falleg leturgerðir muntu líkja þessu fjöri. Þessi vinna sýnir hvernig þú þarft ekki að færa línur fyrir snilldarlegt fjör, bara frábært leturgerð og réttan litakóða með hallaáhrifum.

Flýtileið

8. Við skulum ferðast með jjperezaguinaga

Tvær flugvélar og loftbelg snúast um vinsæl kennileiti í heiminum. Þetta fjör er litrík, bjartsýnn og töfrandi. Það sýnir allt sem þú getur gert ef þú þekkir SVG.

Flýtileið

9 á morgun eftir Mohamad Mohebifar

Einföld SVG hreyfimynd af hreyfanlegri klukku sem sýnir núverandi tíma. Róandi hreyfing handanna og lægstur hönnun eru undur fyrir þetta fjör.

Flýtileið

10. Teiknimyndir af Luigi De Rosa

Sveima yfir þessum táknum mun kalla fram hreyfimyndir sem eru einfaldar en áhrifaríkar. Þú sérð að þú þarft ekki að gera kraftaverk til að búa til glæsilegt teiknimynd.

11. Öll tæki í SVG eftir Chris Gannon

Einstakt fjör sem meðhöndlar öll snjalltæki sem við notum á skapandi hátt. Skjáborðið breytist í fartölvu, fartölvu í spjaldtölvu og síðan í snjallsíma.

Flýtileið

12. Foss eftir Chris Gannon

Annar eftir Chris Gannon, þetta er hrein sýning á freyðandi fossgólfi. Hreyfing vatnsins er snyrtileg og þú getur séð litla dropa af vatninu skvettast út fyrir brúnir teiknimyndarinnar til að allt líti meira raunhæft út.

Flýtileið

13. Plöntusala Blake Bowen

Nú er þetta eitthvað annað. Ef þú smellir á hnappinn „Búa til“ sérðu hvernig plöntur vaxa og vaxa. En í hvert skipti sem þú smellir myndast mismunandi mynstur.

Flýtileið

14. Smellanlegt táknmynd eftir Hamish Williams

Önnur gagnvirk SVG skrá sem kallar fram hreyfimynd þegar þú smellir á hana. Þetta byrjar „Senda“ hreyfimyndina um leið og þú smellir á hana.

Flýtileið

15. Ný kaka frá Marco Barría

Áhugavert fjör sem sýnir gerð köku lag fyrir lag. Þetta er glæsilegt SVG fjör sem hentar fyrir afmæliskort.

16. Skjal tætari Chris Gannon

Ef þú hefur gaman af því að horfa á tappa á pappír geturðu notið þessa fjörs þar sem vél tæta pappír fyrir pappír ótakmarkaðan fjölda skipta.

Flýtileið

17. Lágt PolyLion frá GREYGHOST

Þetta er töfrandi líking og fjör sem sýnir ljónshöfuð birtast og hverfa í formi fjör marghyrninga.

Flýtileið

18. Hourglass Loader frá Leela

Önnur áhrifarík fjör sem notar aðeins SVG. Stundaglasið snýr á 5 sekúndna fresti og byrjar nýja hringrás.

Flýtileið

19. Móttækileg kýr eftir Sarah Drasner

Þetta er skemmtilegt gagnvirkt fjör sem gerir þér kleift að smella á kú og draga hana um tunglið meðan ruglaður geimfari lítur á það.

20. námsmaður frá Domany

Áhugasamur námsmaður virðist vera tilbúinn að læra! Þetta er frábært fjör sem snýr síður bókarinnar snyrtilega. Engin blikka af nemandanum en þetta er samt fullkomlega snyrtilegt fjör til að klára þennan lista.

Flýtileið

Það er komið að þér

Hver eru uppáhalds SVG teiknimyndir þínar sem eru ekki á þessum lista? Deildu valinu þínu í athugasemdunum hér að neðan!