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?
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
- <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
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.