22. ábra: SVG animálása CSS-sel - CSS-trükkök

Az inline SVG használatakor az összes SVG kód a HTML-ben és így a DOM-ban található. Úgy stílusozhatja őket, mint tenné ,

, vagy bármely más HTML elemet. A CSS-stílus lehetővé teszi az animációk és átmenetek lehetőségét.
Egy egyszerű példa:

Lásd a Pen CodePen logót, mint Inline SVG, Chris Coyier (@chriscoyier) a CodePen-en.

Ebben az oktatóanyagban egy A írta fel, hogyan lehetne kezelni egy kissé összetettebb tervet. Itt az a bemutató.

Lásd Chris Coyier (@chriscoyier) Pen Wufoo SVG hirdetését a CodePen-en.

Ebben a képernyőn egy újabb animált SVG hirdetést készítünk a Wufoo számára, szinte a nulláról kezdve. A dizájnban vannak felhők, amelyek élénken mozognak, és simán és végtelenül ismételgetjük őket.

Eleinte inline SVG-t használtunk, és CSS-sel animáltuk, amelyet éppen ugyanahhoz a HTML-dokumentumhoz csatoltunk. De aztán, csak hogy bemutassuk a működését, áthelyeztük a CSS-t magába az SVG-be, ami teljesen érvényes. Ennek az az oka, hogy érdemes csinálni, hogy azért van, mert akkor az animáció is fut, amikor a SVG vagy `background-image`.

Demó:

Lásd Chris Coyier (@chriscoyier) Pen kKdDj-jét a CodePen-en.

Az animáció böngészőtámogatása változó lesz. Az írás idején csak a Chrome-ban működött.