When you use inline SVG, all that SVG code is right in the HTML, and thus in the DOM. You can style them just like you would a <div>, <h1>, or any other HTML element. CSS styling brings the possibility of animations and transitions.
A simple example:
See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) on CodePen.
A wrote up how to tackle a slightly more complex design in this tutorial. Here’s that demo.
See the Pen Wufoo SVG Ad by Chris Coyier (@chriscoyier) on CodePen.
In this screencast we make another animated SVG advertisement for Wufoo, starting nearly from scratch. The design has some clouds in it that we animate to move by and repeat smoothly and endlessly.
At first, we used inline SVG and animated it with CSS just attached to the same HTML document. But then, just to showcase how it works, we moved that CSS to within the SVG itself, which is completely valid. The reason that you might want to do that is because then the animation can run even when you use the SVG as <img> or background-image.
Demo:
See the Pen kKdDj by Chris Coyier (@chriscoyier) on CodePen.
Browser support for that animation will vary. At the time of this writing, it was working only in Chrome.
you didn’t really give firefox a chance to work as you only prefixed for webkit. And you made the “bird” fly backwards :)
Otherwise very cool.
was surprised to see the img tag work as I think you explained in one of the first videos that it wouldn’t. Or maybe I’m just remembering wrong.
Please, I would really appreciate your help.
I need to see how to animate SVG through the html, animation that includes keyframes..
You could apply the animation directly on one of the path or shape elements.
There’s an example using link hover effects here:
Or, for more complex animations, you might consider a library, like GSAP. Here’s an example: