5 Reasons to use SVG's in your next project

What is SVG ?

Let’s get technical for a second. SVG stands for “Scalable Vector Graphics” and is an XML based, vector image format.

SVGs are predominantly found on the web, and while they have similar uses to JPEG, PNG and WebP image types, their DNA is extremely different.

So why are they different?

Well, traditional image types like JPEG, PNG and GIF are bitmap-based, meaning they consist of a set amount of pixels. Typically, this means that as soon as you start to increase or decrease an image of this type, you are presented with jagged lines, blurry artifacts and a pixelated mess.

WHY ?

1. Resolution

3. Animation

3. Accessibility and SEO

4. Speed

5. Practicality

Resolution

An SVG will scale indefinitely and will remain super sharp at any resolution. It doesn’t matter about your screen size, zoom level, resolution or whether or not you have a ‘retina’ display. SVG is vector based, paths, shapes and fills. This allows for infinite resolution, much like when creating artwork for print and using shapes, the same principles apply!

Animation

SVGs can be animated and styled with CSS. Animations (transformation/transition) that you use on HTML elements can also be used on an SVG element. There are instances where you can’t use CSS to animate SVGs but these instances can usually be covered with JavaScript

This opens up a whole world of creativity when it comes to the web

Accessibility and SEO

Google index’s SVGs, which is good news. SVG content whether it is in a standalone file or embedded directly in HTML is indexed.

SPEED

Due to the nature of vector graphics, the data that determines the file size are the layers, effects, masks, colors, and gradients used.

In comparison, bitmap-based images record each and every pixel in the image as well as the number of colors used. Admittedly, it’s a little more complicated than that, but the thing to take away from this is that for the most part, a bitmap-based image will be more expensive than an SVG counterpart.

On top of this, you can make your SVG files even smaller by compressing them with gzip. This means that fewer bytes need to be sent from the server or CDN if gzip compression is enabled.

Practicality

Graphs: Yes, graphs… SVGs are great at vector shapes, lending itself to things like infographics and graphs very well indeed. Logos: Logos are usually vector based, and rightly so, The beauty here is, you could define an SVG document as your logo and then use it wherever you like without worrying about size, resolution or load times. The same factors apply for icons too.