Quando você usa o SVG embutido, todo o código SVG está correto no HTML e, portanto, no DOM. Você pode estilizá-los como faria com um ,
, ou qualquer outro elemento HTML. O estilo CSS traz a possibilidade de animações e transições.
Um exemplo simples:
Veja o logotipo da Pen CodePen como Inline SVG de Chris Coyier (@chriscoyier) na CodePen.
A escreveu como lidar com um design um pouco mais complexo neste tutorial. Aqui está aquela demonstração.
Veja o Pen Wufoo SVG Ad por Chris Coyier (@chriscoyier) no CodePen.
Neste screencast, fazemos outro anúncio animado em SVG para o Wufoo, começando quase do zero. O design tem algumas nuvens que animamos para nos movermos e repetirmos de maneira suave e infinita.
No início, usamos SVG embutido e o animamos com CSS apenas anexado ao mesmo documento HTML. Mas então, apenas para mostrar como funciona, movemos esse CSS para dentro do próprio SVG, o que é totalmente válido. Você pode querer fazer isso porque a animação pode ser executada mesmo quando você usa o SVG como background-image.
Demo:
Veja a Pen kKdDj de Chris Coyier (@chriscoyier) no CodePen.
O suporte do navegador para essa animação irá variar. No momento em que este artigo foi escrito, ele estava funcionando apenas no Chrome.
arquivos
- 22-ad-1.svg