A bit of history
Using SVG on websites instead of other standard formats like PNG or GIF is not a new invention, but it got more and more popular over the last year and a half, as it provides flexibility to web developers and it looks good on any device. Because Google takes very seriously the page load time and the responsiveness of a website, SVG got discovered again by web developers as the ideal solution. How?
More common image formats such as PNG, JPEG, and GIF are compressed variations of raster graphics formats. This simply means that the graphics are mapped onto a browser using a wide range of colors or displaying multiple layers at once. However, they do have their drawbacks, as they come in fixed sizes and can be inconvenient if there is not enough space on a website. Reducing their size results in distortion, which can, of course, affect the quality of the image. This is further aggravated by high-resolution displays that are now common in the market. To overcome these problems with blurry images, the SVG format has gained significant popularity recently.
I’m aware of the fact that SVG was never easy to create, but to animate? It might seem impossible to a lot of web developers forced by their clients to add animated icons to a website, but it’s not. Animated SVG icons can be easily achieved by an online tool that doesn’t require any coding skills.
2. Quality doesn’t get affected
SVG is significantly different from the formats people are used to seeing on the web, like GIF for animated icons. The first clue and advantage are hidden in the name, Scalable Vector Graphics. An SVG graphic or icon is rather a graph comprising of lines, in contrast to a map of bits that other common formats possess. This means that instead of reducing the image to a fixed size or window and losing important pixels in the process, SVG images are drawn on that limited amount of space, which results in a cleaner and sharper image. The SVG format allows them to be drawn at any resolution or size without compromising on quality.
Despite the difference of methods in generating or creating an image, SVG formats work like any common image format. This implies that there is no special procedure to integrate these images into the website. In order to benefit from the advantages of animated SVG, when inserting into the HTML file, make sure to treat the SVG code exactly as an HTML element.
3. Being creative
Another great advantage of SVG is the freedom to control the individual graphs as an element. In particular, this means that developers can employ CSS to style SVGs. This allows them to define things such as making the strokes thicker or thinner or changing the color that a circle is filled with. Not only that, SVG allows you to modify individual elements within the image, which in turn means that you don’t have to create different versions of one logo. Depending on your needs, you can use just the one logo and have a different CSS applied.