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.

Files

Comments

  1. User Avatar
    Jacob Christensen
    Permalink to comment#

    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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag