Iako bi animiranje SVG-a s CSS-om moglo biti ugodnije za prosječnu front-end osobu, SVG ima još jedan način na koji animacija ugrađena u samu SVG sintaksu. To je upravo ono što ukratko pokrivamo u ovom videu, ali ako želite cjelovit referentni vodič, svakako pogledajte Vodič za SVG animacije (SMIL) Sara Soueidan ovdje na CSS-trikovima.
SMIL je kratica za Synchronized Multimedia Integration Language. Koliko sam shvatio, to je "stvar" za sebe koja se ugrađuje u SVG. No, SVG ima neke vlastite SMIL-ove dodatke. Sve ću to nazvati SMIL iako sam ponekad siguran da sam tehnički neispravan.
Za vrlo jednostavne animacije nije bitno ako to radite u SMIL-u ili CSS-u, učinit će istu stvar na približno istoj razini težine. Neke stvari mogu biti čak i lakše u CSS-u. No evo nekoliko stvari kojima SMIL ide:
- Morate animirati nešto što CSS ne može dodirnuti. Poput oblika poligona ili staze.
- Želite koristiti događaji utjecati na animaciju, poput
clickilimouseoverili nešto. - Želite raditi aditivne animacije, poput animiranja odakle god se sada nalazite, još x piksela.
- Želite da animacije budu izravno povezane s drugim animacijama, na primjer, kada ova animacija završi, započinje sljedeća animacija (bez ručnog manipuliranja trajanjem).
- Siguran sam da ih ima još.
Sintaksa se u početku čini zastrašujućom, ali obećavam da je to vrlo lako. Evo osnovnog primjera:
Pogledajte Pen jAipI Chrisa Coyiera (@chriscoyier) na CodePenu.
Stvar "preoblikovanja oblika" doista je super jedinstvena sa SMIL-om, pa evo boljeg primjera od onog čudnog koji smo napravili u videu:
Pogledajte gumb za oblikovanje olovke Chrisa Coyiera (@chriscoyier) na CodePen.
U toj demonstraciji događajima upravlja JavaScript, a ne SMIL. Lijepo je znati da i ti to možeš. SMIL okidači događaja su cool, ali stvar na koju treba kliknuti mora biti u tom SVG-u, a ne bilo gdje drugdje u DOM-u.