Deep Tech Point
first stop in your tech adventure

Why use SVG in animations and how is SVG connected to CSS?

September 7, 2021 | CSS

The first SVG animation was developed in the late ’90s, and then at the beginning of a millennium, the first browsers started to support them, until in 2011 all major web browsers covered SVG animations. The release of SVG2 happened not long ago, in 2018, and since then, we witness a rise in the popularity of SVG animations in JavaScript and HTML5.

What is SVG and why should we use it in animation?

SVG stands for “scalable vector graphic”. SVG is an image format that is based on XML, very similar to how HTML works. SVG defines different elements for geometric shapes and they are combined in the markup that creates two-dimensional graphics. On the web, SVGs are most often used for icons, logos, and even animations. Why so? Firstly, elements like these have to look perfect at any size – scalable vector graphic means, the graphic is scalable, so the SVGs only contain a set of instructions that the computer uses to scale the image when it loads – every pixel has to look perfect.
It is highly recommended to use animated SVGs for icons that indicate changes of state, or for tours on website – when a user needs guidance to the next action. It is also very common to use animated SVGs for icons in cases such that present loading, uploading, menu toggling, and even playing a video. Animated emojis, stickers, illustrations, that demonstrate what to do in order to generate data, or animated spot illustrations that help build a brand – these are use cases when SVG animations should be used.
Secondly, and maybe most importantly, SVGs are very small in size, this is why they load very quickly. Compared to heavy and sluggish GIF graphics and animations, SVGs are feather-light. Obviously, this makes SVG graphics and animations ideal for a wide variety of applications, and most of all contribute to a better ranking in search engines.

How do SVG animators work and what is their connection to CSS?

CSS enables to style and animate SVGs. Any transformation or transition you can apply to HTML elements, you can also do it to SVG elements. However, there are some limitations – some SVG properties cannot be animated through CSS, instead, they can be with through SVG path. SVG path is defined with a set of data (d=”” attribute) that declares a path of a shape. So, when someone wants to animate SVG, it has to provide clear instructions. In essence, it’s like giving instructions to a person drawing with a pen: move your pen up 2 inches, go to the left one inch and then turn 270 degrees one inch etc. These instructions describe arbitrary forms that are compressed into paths – these paths have a beginning and they have an end, therefore they have a length too. They can rotate, change color and paths can be even drawn up to a certain point in length. So, data like this can be animated through SMIL, but unfortunately not through CSS. The reason for this is that SVG elements are described by a set of attributes known as SVG presentation attributes, and some of these attributes can be animated with CSS, but others cannot. And those animation gaps that cannot be controlled with CSS are simply replaced by using JavaScript or declarative SVG animations derived from SMIL. There are some advantages to using SMIL over JavaScript animations. The latter do not work when the SVG is embedded as an img or used as a background-image in CSS, SMIL animations, however, work in both cases.

Before applying CSS to SVG, we need to prepare SVG for animation

First, we need to clear up or simplify the SVG code – we need to remove the code that is unnecessary, in short, we need to optimize the code. There are several tools that can be used, such as SVGO, Scour, svgcleaner and others, such as a Sketch plugin: SVGO Compressor. These tools reduce the file size and also save the paths with unique IDs, which is super useful if you have several SVGs on the same page.
Second, if necessary, you need to create intentional groupings. This is done by opening SVG in a code editor and look for <g> elements, which group the SVG elements. This is useful when you need to animate a group of elements together, you just simply wrap them in <g></g>, and give them a class name, so you can target them with CSS. Why a class name and not just a simple ID? Well, if you’re styling more than one path in the same way, you cannot use IDs because as you know IDs can be used only once.
Third, during the preparation stage you need to pay attention to a stacking order (layers) of a shape. If you want a shape to appear first, it needs to be listed the last on the SVG code.
Fourth, you need to set the SVG styling to the initial state, because SVGs have presentation attributes that are similar to CSS styles, however, they are set directly on the SVG. When you set CSS externally, it will naturally override the SVG styling without a need for an !important declaration.

How to apply CSS to SVG?

The biggest limitation in applying CSS to SVG is that you can’t use an external stylesheet to apply styling to an externally linked SVG. However, there are a few ways you can apply CSS to SVG, and each way has advantages and downsizes. Here’s a list:

Animation elements – the connection between SMIL and SVGs

You can animate SVG graphics by using animation elements, and these were first defined in the SMIL animation specification. Below you’ll find a list of these elements:

In addition to the animation elements listed above and defined in the SMIL animation specification, SVG includes extensions compatible with the SMIL animations specification. These SVG extensions include attributes that extend the functionality of the element and other animation elements. Here’s a list:

with xlink:href you specify the target of the animation

xlink:href is the attribute that specifies the target of the animation with one of the four elements that are presented above. This attribute takes a URI reference to the element which is the target of the animation and is modified in a period of time. You must include the target element in the current SVG document fragment.