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
<h1>, or any other HTML element. CSS styling brings the possibility of animations and transitions.
A simple example:
A wrote up how to tackle a slightly more complex design in this tutorial. Here’s that demo.
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
Browser support for that animation will vary. At the time of this writing, it was working only in Chrome.