Када користите уграђени СВГ, сав тај СВГ код налази се тачно у ХТМЛ-у, а тиме и у ДОМ-у. Можете их обликовати баш као што бисте то урадили
,
, или било који други ХТМЛ елемент. ЦСС стил доноси могућност анимација и прелаза.
Једноставан пример:
Погледајте логотип Пен ЦодеПен као Инлине СВГ аутора Цхрис Цоииер (@цхрисцоииер) на ЦодеПен-у.
А написао је како се позабавити мало сложенијим дизајном у овом водичу. Ево те демонстрације.
Погледајте Пен Вуфоо СВГ оглас Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
У овом сцреенцаст-у правимо још једну анимирану СВГ рекламу за Вуфоо, почевши скоро од нуле. Дизајн садржи неке облаке у којима анимирамо кретање и понављамо глатко и бескрајно.
У почетку смо користили уграђени СВГ и анимирали га ЦСС-ом који је управо приложен истом ХТМЛ документу. Али онда, само да покажемо како то ради, пребацили смо тај ЦСС у сам СВГ, што је потпуно валидно. Разлог зашто бисте то можда желели је тај што се тада анимација може покренути чак и када СВГ користите као
или background-image
.
Демо:
Погледајте оловку кКдДј Цхрис Цхрис-а (@цхрисцоииер) на ЦодеПен-у.
Подршка прегледача за ту анимацију ће се разликовати. У време писања овог текста, радио је само у Цхроме-у.
Фајлови
- 22-ад-1.свг