What is SVG?

Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. [ from Wikipedia ]

Every image created has two types. They are Raster images and Vector images. A raster image is created using pixels, and a combination of these pixels makes a single image. Vector images use a different method which uses paths and shapes to create an image. Because of that, Vector images can be enlarged without affecting the quality of the images. But in Raster images, the quality of the image can decrease when the image is enlarged. It takes a blur-like effect when enhancing. The reason for this is when the image size is increased, pixel size also increases.

We can view vector images as code. Because, when a Vector image is created using any software, it transforms any given shape that we insert into an XML code and store it.

You can get a clear idea of the differences between Raster and Vector images from below.

Raster image

Vector image

How do SVG Animations work?

As I mentioned before, SVG is created by combining paths and shapes. We can change these paths and shapes as we like and create animations. The advantage of creating animations like this is that there will be no quality loss.

How to create SVG Animations

I will separate this topic into two sections. The software which we can use to create SVGs and the software needed to create SVG Animations.

To create SVGs, software like Illustrator, and Inkscape can be used.

And to create SVG Animations, you can use specialized software such as SVG Gator.

Even without any software, we can create either SVGs or SVG animations. In the next part, I will discuss it further.

SVG Animation VS GIF Animations ( comparison )

SVG animation can be displayed without any quality loss, but, since Gif animations fall under the Raster category which uses pixels, it has a lower quality when displayed.

SVG animation can even be changed dynamically through code at runtime, but we cannot do that for a Gif animation.

SVG Animation Example

This is an Example SVG animation that I created for the codepen challenge called “insects”, in this example I have animated SVG paths and shapes to work together and create a beautiful scene.

In the next article (part2), I will discuss SVG animations in both ways ( manual way and software based way ).

Thank you for reading 🙂 .