Web developers are used to languages such as HTML, CSS, and JavaScript. They use them regularly to develop the layout and design of a website, however, adding graphics to it is not as easy anymore as it has been before. Google doesn’t appreciate huge files on a website as they affect the page load time, create bad user experiences and annoy users. Simply put, it’s very bad for SEO. Every content that you add to your website (text, code, image) matters. In case you are a web developer (or designer) struggling with the same problem you might want to learn more about SVG (Scalable Vector Graphics).
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.
1. Easy-to-use
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.
Adding to the rich features of the SVG format is the ability to add animations to the graphic from within the browser. Using CSS, these animations can be added natively to an image, which could previously be accomplished, only through videos. Furthermore, using JavaScript, an appearance of an SVG can be completely altered, since newer paths can be created by changing the definitions of points and curves.
Furthering the case is the performance benefits that the SVGs have over other formats. Since SVGs are code-based definition, as opposed to images carrying information of each individual pixel, they take a lesser amount of space. This means that performance is vastly improved, as lesser information is being carried. The optimizations that are used for HTML, CSS, and JavaScript can also be applied to SVG.
