Animations are a ubiquitous part of the web. Unlike the flashing GIF images that plagued websites in the internet’s earlier days, today’s animations are more subtle and tasteful. Designers and front-end specialists use them to make websites look more polished, enhance the user experience, call attention to important elements, and convey information.

Web developers can benefit from combining the power of SVG and CSS to create animations without using external libraries. This SVG animation tutorial shows how to build custom animations for real-world projects.

SVG Animation Using CSS: Core Concepts

Before animating SVGs with CSS, developers need to understand how SVGs work internally. Fortunately, it’s similar to HTML: We define SVG elements with XML syntax and style them with CSS, just as if they were HTML.

SVG elements are purposely built for drawing graphics. We can use <rect> for drawing a rectangle, <circle> for drawing circles, etc.—SVG also defines <ellipse>, <line>, <polyline>, <polygon>, and <path>.

Note: The full list of SVG elements even includes <animate>, which allows you to create animations using synchronized multimedia integration language (SMIL). However, its future is uncertain and the Chromium team recommends using a CSS- or JavaScript-based approach to animating SVGs whenever possible.

The available attributes depend on the element, so while <rect> has width and height attributes, the <circle> element has the r attribute, which defines its radius.