How to Pimp Your Website with SVG Animations

Different screen sizes, resolutions, and aspect ratios make it difficult to offer a consistent visual experience. This is especially true for those who want to represent the best pixels.

Scalable vector graphics (SVGs) help us solve part of this problem decently. SVGs can be really helpful on certain points and create a more visually impressive experience without putting too much pressure on the web browser or affecting the loading time.

But you may be wondering what is SVG and what are vector graphics?

Table of Content

1. Scalable vector graphics
2. The foundation of SVGs – the path
3. SVG Animations: This is how animation comes into play
4. Animate objects with SVG paths
5. SVG animations with JavaScript
6. Lottie animations as an easy solution
7. Conclusion

Scalable Vector Graphics

SVG is an image format based on XML and works similarly to HTML. It defines various elements for several well-known geometric shapes that can be combined into markup to create two-dimensional graphics.

Vector graphics, therefore, make it possible to display two-dimensional graphics that are not based on pixels but consist of paths and geometric shapes. The advantage here is that the picture can be scaled infinitely- unlike pixel images – without any quality loss.

Like HTML, the SVG specification is an open standard developed in 1999 by the World Wide Web Consortium (W3C).

All major web browsers have been supporting SVG rendering for some time, so your website always remains responsive despite the use of SVG elements.

The Foundation of SVGs – The Path

To know how to animate SVG objects, you first need to understand their structure and, most importantly: the path.

The path element is a basic shape that can be used to create almost any complex 2D profile.

The element works with a sequence of drawing commands. The component accepts this sequence of drawing commands through the d attribute.

For example, for a right triangle, it would look like this:

<path d=“M10 10 L75 10 L75 75 Z“ />

You can think of a virtual pen drawing on the screen, and the drawing comment in the path element only controls the pen. In the above example, the pen is directed to go to position (10, 10) (M10 10), draw a line to (75, 10) (L75 10), then draw a line to (75, 75) L75 75, and then close the path by returning to the starting point (Z).

In addition to L (line too) and M (move to), there are drawing commands like arcs (A), square Bezier curves (Q), cubic Bezier curves (c), and more. So, you can create even more complex shapes and graphics in SVG.

SVG Animations: This Is How Movement Comes into Play

One way to animate SVG graphics is to use two SVG attributes, stroke-dash array, and stroke-dash offset.

The stroke-dash array attribute controls the pattern of dashes and spaces used to stroke the path. The attribute still allows you to convert lines into a pattern of strokes and spaces instead of a continuous ink stroke.

If SVG images are part of the web browser’s DOM (Document Object Model), then the attribute can also be configured using CSS.

Similarly, the stroke-dash offset attribute (which indicates how far into the stroke pattern the stroke should begin) can also be controlled via CSS.

These two SVG attributes can be used together to animate SVG paths and give the viewer the illusion that the paths are being drawn incrementally.

To animate this path (as it is drawn gradually and smoothly on the screen), the stroke (and gap) lengths of the strokes (and gaps) must be set equal to the path length using the stroke-dash array attribute. This is done so that each stroke’s length and the gap in the dashed curve are similar to the entire path’s length.

Next, you will set the stroke to offset 0 using the stroke-dash offset attribute, which will make the path appear like a solid curve on the screen. If the stroke offset is set to the curve’s length, you will get an invisible angle.

Now, by animating the stroke-dash offset property, you can slowly display the curve on the screen.

You can use the same principle but go one step further with more paths.

Stroke Dash Array and Stroke Dash Offset are two compelling attributes that allow you to apply a wealth of animations and effects to your SVG paths.

Animate Objects Along SVG Paths

Another great thing you can do with SVG and CSS is the animation of objects or elements by following a path.

There are 2 SVG attributes that you can use for this animation.

Offset Path: The offset-path CSS property defines the offset path on which the element is positioned.

Offset distance: Offset distance CSS property defines a position along an offset path.

By combining these two properties, you can easily create great animations.

Then you will get the new element Div.ball.

This element can be anything, a DIV, an image, text, or whatever. The idea of this example is that by using offset-path and offset-distance, you can give the element a way to follow and the corresponding element will move through the path.

SVG Animations with JavaScript

If you want even more complex SVG animations, you can always use JavaScript.

However, JavaScript makes it much easier to get the animation techniques described in the previous section.

Before you do “hard code” to calculate the path length with CSS, thanks for the JavaScript Function path.getTotalLength (); it is possible to calculate the path’s length on the fly and use it if necessary.

Besides, several libraries are already available when using JavaScript, making SVG animations more accessible than ever.

For example, Snap.SVG makes it easier to draw SVG images with the help of JavaScript and makes it easier to animate them by simply running the .animate ({}) command.

Another library, anime.js, allows you to follow the SVG path with just a few code lines.

In the field of data visualization, the D3.js library is particularly suitable and is very popular.

Lottie Animations as A Simple Solution

The After Effects plug-in “Lottie” developed by Airbnb offers a user-friendly alternative to the earlier solutions. It is available for After Effects and can be easily created and exported there.

After creating the JSON file as an export file, it is converted to animated images in the browser using the Lottie’s JavaScript library.

Conclusion

Vector graphics are a suitable image format because they are Infinitely scalable and easily adaptable.

Because vector-based graphics can do anything without pixels, therefore they are very lightweight, and do not affect the performance or speed of the website despite the complex 2D concepts.

Vector graphics can be animated using CSS and JavaScript to illustrate and highlight the content of the selected website.

SVG animations also serve their purpose as fine decoration. As a simple technique, they can provide a unique website in the sense of modern style.

CSS and JavaScript options are also available for animation. While the former is usually more complex and time-consuming, there are already many libraries available when using JavaScript that can make it easier for you to animate SVG elements.

If you have any questions about SVG animations, feel free to drop us a message on Luke Media. We accept English questions too.