Cuando usa SVG en línea, todo ese código SVG está directamente en el HTML y, por lo tanto, en el DOM. Puede diseñarlos como lo haría con un ,
, o cualquier otro elemento HTML. El estilo CSS brinda la posibilidad de animaciones y transiciones.
Un simple ejemplo:
Vea el logotipo de Pen CodePen como SVG en línea de Chris Coyier (@chriscoyier) en CodePen.
A escribió cómo abordar un diseño un poco más complejo en este tutorial. Aquí está esa demostración.
Vea el anuncio SVG de Pen Wufoo de Chris Coyier (@chriscoyier) en CodePen.
En este screencast hacemos otro anuncio animado SVG para Wufoo, comenzando casi desde cero. El diseño tiene algunas nubes que animamos para que se muevan y se repitan sin problemas y sin fin.
Al principio, usamos SVG en línea y lo animamos con CSS adjunto al mismo documento HTML. Pero luego, solo para mostrar cómo funciona, movimos ese CSS dentro del SVG, lo cual es completamente válido. La razón por la que puede querer hacer eso es porque la animación puede ejecutarse incluso cuando usa el SVG como background-image.
Manifestación:
Vea el Pen kKdDj de Chris Coyier (@chriscoyier) en CodePen.
El soporte del navegador para esa animación variará. En el momento de escribir este artículo, solo funcionaba en Chrome.
Archivos
- 22-ad-1.svg