Deep Tech Point - learn tech easy way

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:

Embed the SVG code inline in the HTML, which makes the SVG element and all its contents part of the DOM tree, so they’re affected by the document’s CSS.
You can include the CSS styles in a <style> tag, nested within the
You can include the CSS in the SVG with a <?xml-stylesheet> tag to an external link. This way you’ll keep the styling referenced in the SVG, but not actually include it within the SVG.
You can also use inline CSS styles in the SVG – this way CSS is set on an element using inline style attributes.

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:

with <animate> you can animate scalar attributes and properties in a specific period of time.
<set> is a convenient shorthand for animate; this element provides a simple means of just setting the value of an attribute for a specified duration. Its advantage is that it supports all attribute types, including non-numeric such as string and boolean values, which can be great when assigning animation values to attributes and properties, such as the visibility property.
<animateMotion> defines how an element will move along a motion path.
<animateColor> modifies the color value of particular attributes or properties over time. However, this element has been deprecated. Instead, we are simply using the animate element and target properties that take color values.

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:

<animateTransform> element animates a transformation attribute on its target element. It allows animations to control translation, scaling, rotation and skewing.
path is an attribute, we’ve mentioned it before
<mpath> is a sub-element for the element and provides the ability to reference an external element as the definition of a motion path. The mpath element is included inside the animateMotion element, before the closing tag.
keypoints is an attribute and we use them in combination with animateMotion to control the velocity of motion path animations.
rotate is also an attribute and we use it in combination with animateMotion to control whether an object is automatically rotated.
<discard> element can occur wherever the element may. It allows authors to specify the time at which particular elements are to be discarded. This way this element reduces the resources required by an SVG user agent, which is particularly useful to help SVG viewers conserve memory while displaying long-running documents.

with xlink:href you specify the target of the animation