Animating SVG with CSS

Animating SVG with CSS

In this article, we will learn how to make these lightweight, scalable animations! Web animations are a delight. There are several ways to create web animations, including JavaScript libraries, GIFs, and embedded videos. But the simple combination of SVG and CSS is appealing. Why CSS? Why not animate with SMIL, the native SVG animation specification? As it turns out, there’s declining support for SMIL

Web animations are a delight. They improve the user experience, as they can provide visual feedback, guide tasks, and jazz up a website. There are several ways to create web animations, including JavaScript libraries, GIFs, and embedded videos. But the simple combination of SVG and CSS is appealing for a few reasons. Comprised of code instead of thousands of raster image frames, they’re performant and have a faster load time than bulky GIFs and videos. Plus, there are a lot of simple animations that can be created without the need to add yet another JavaScript plugin to your website’s page load. To boot, SVGs are vector based, so they scale flawlessly across screen sizes and zoom levels without creating crunchy pixelization.

Now, you may be wondering: Why CSS? Why not animate with SMIL, the native SVG animation specification? As it turns out, there’s declining support for SMIL. Chrome is heading in the direction of deprecating SMIL in favor of CSS animations and the Web Animations API. So, on we go with CSS animations…But how are they made? In this article, we will learn how to make these lightweight, scalable animations!

Common use cases for animating SVG with CSS

First, let’s look at some practical use cases for why you’d need animated SVGs in your web app or landing page.

Icons

Animated SVGs are great for icons that indicate micro-interactions and state changes. They also are helpful when guiding a user to the next action, such as in an onboarding tour. Common use cases include loading, uploading, menu toggling, and playing/pausing a video.

Illustrations

Illustrations are another common use case. They can be included in a product as a blank state, demonstrating what to do in order to generate data on a dashboard. Animated emojis and stickers are other popular use cases. There are also animated spot illustrations which brighten up landing pages, bringing dimensionality and fun while building a brand.

How to prepare SVGs

Now, let’s get into the nitty-gritty. The first thing you’ll want to do is prepare an SVG. It may feel annoying to start cleaning when you’re ready to get messy and turn into a mad scientist animator, but it’ll be easier to start out with simplified SVG code.

Simplify the SVG code

When an SVG is created, it has extra code that is often unnecessary. So, it’s important to optimize it. I like to use SVGO which reduces the file size and saves the paths with unique IDs (this is important for preventing issues with several SVGs on the same page). It’s a Node.js tool and there are several ways to use it, including a Sketch plugin: SVGO Compressor.

Create intentional groupings (if needed)

Open the SVG in a code editor, and take note of the <g>elements. Those are used to group SVG elements. If you want to animate a group of elements together, wrap them in <g></g>, and name them with a class or ID. Consider converting ID names to class names if you anticipate styling more than one path in the same way (IDs can only be used once). Once you have an ID or class on the shape, you’ll be able to target them with CSS. When you save the SVG there won’t be any visible change for now.

Beware of stacking order (if you’ll be animating a shape that is going behind another shape)

It seems counter-intuitive, but shapes listed last will be pasted over the aforementioned shapes. So, if you want a shape to appear in the background, make sure it’s listed at the top of the SVG code. SVG shapes are “painted” in order from top to bottom.

Set SVG styling to the preferred, initial state

SVGs have presentation attributes which are similar to CSS styles but are set directly on the SVG. A common example is a fill color. Since these styles are set on the SVG, you may assume they hold a lot of weight by the browser. As it turns out, any CSS/Sass you set externally will naturally override the SVG styling without a need for an !important declaration. However, you want to be mindful of what is set on the SVG so you can prepare for what’s shown during page load. For a slow loading page, you may see a flash of the SVG prior to getting styled by the CSS. I recommend you leave in the width and height, as to avoid an unstyled flash of the SVG during page load (Sara Soueidan does a good job of explaining Flash of Unstyled SVGs (FOUSVG) here).

Applying CSS to SVGs

Now that you have the SVG tidy, let’s get into how to bring in the CSS. There are a few considerations when it comes to how to apply CSS to an SVG. A limitation is that you can’t use an external stylesheet to apply styling to an externally linked SVG.

Option 1: Embed the SVG code inline in the HTML (my favorite)

This makes the SVG element and its contents part of the document’s DOM tree, so they’re affected by the document’s CSS. This is my favorite because it keeps the styles separate from the markup.

In the other options below, you’ll see they’re quite entwined. If you’re using Rails, there are gems that can automatically embed SVGs into views. So, in your code you can simply reference the external SVG then it’ll get embedded when compiled. An added benefit of this method is that inlining the SVG means there’s one less HTTP request. Yay, performance!

Option 2: Include the CSS in the SVG within a

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Circle Progress Bar Using Html CSS and SVG | CSS Percentage Circle

Circle Progress Bar Using Html CSS and SVG | CSS Percentage Circle

Animate Any SVG icons with CSS Only | SVG Stroke Animation With Html CSS

Animate Any SVG icons with CSS Only | SVG Stroke Animation With Html CSS

SVG Text Path Animation is SWEET! NO LIBRARIES!

Learn how to create an SVG-based text animation that animates on scroll along a custom path, then we will use the IntersectionObserver API to animate various elements in and out of the viewport. SVG Text Path Animation is SWEET! NO LIBRARIES!