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
- Scalable vector graphics
- The foundation of SVGs – the path
- SVG Animations: This is how animation comes into play
- Animate objects with SVG paths
- Lottie animations as an easy solution
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.
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.
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.
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.
If you have any questions about SVG animations, feel free to drop us a message on Luke Media. We accept English questions too.
Leave a Reply
Want to join the discussion? Feel free to contribute!