An eye icon saved as an SVG is rendered into an HTML-CSS animation. This animation is saved as a gif, the real CSS animation can be viewed in CodePen. {1}

How to develop your SVG illustrations into CSS animations

The savvy micro (and macro) asset to the digital screen

“Nothing’s occurring in animation — you manufacture everything.” — Gore Verbinski {2}

If you love micro animations as much as I do, you will surely be curious about how SVGs work within the larger context of web animations. Working off any illustration program, SVG vector illustrations are output formats that handle CSS animation properties extremely well.

Insight: Design your vector art conceptually for animation. Be aware of the layering priorities of the elements.

Why animate with SVGs?

An SVG is independent of any resolution. This means that they scale beautifully without losing any image quality.

SVGs are interactive, they accept hyperlinks and pseudo states.

Insight: Design your illustrations in a vector program such as Adobe Illustrator. Copy the SVG code directly into your HTML.

Let’s look at this eye illustration example