If you aren’t using SVG files or know when to use them in your web projects, you’ve likely missed an opportunity to improve your overall site optimisation and page speed.

But fear not, it’s not too late. As in this article I’ll show you the SVG file basics and when to use them for best results.

What is ‘SVG’?

SVG stands for ‘Scalable Vector Graphic’ and it’s a file type used for exporting 2D images.

However unlike other popular file formats such as PNG, the SVG format stores images as vectors, then uses mathematical equations and rules to make points, lines, curves and shapes to produce the actual graphic.

In short? 

SVGs are essentially XML code explaining how shapes should be displayed and how it should behave in relation to other shapes within a file.

So whilst ‘raster graphics’ (like JEPGs or PNGs) work well for highly detailed images such as photography, SVGS are perfect to use when using icons and logos. 

This is when SVGs become handy and here’re the reasons why:

1. No More Pixelation Problems

That’s right! NO MORE FUZZY IMAGES. SVG files are infinitely scalable! 

You can increase and resize them as many times as you like without losing the quality, keeping the edges crisp and tidy.

This means your image stays optimised regardless of how your site is displayed ( mobile, tablet or desktop )

2. Customization

They give designers and developers a lot of freedom whilst editing. 

Instead of modifying the files with layers and masking, you can directly change the vector shapes, colours, text and even visual effects elements like colour gradients and shadow.

3. Smaller file sizes

Generally speaking, SVG file size can be 60-80% smaller than a PNG or a JPEG of the same size as long as the image is not highly detailed. 

It contains enough information to display vectors at any scale, whereas raster graphics require larger files to scale-up with more pixels in place and use up more file space.

Now, if you’ve been following our articles, you would know that file size has a huge impact on page load speed. 

Ensuring your site performs at high speed not only improves your overall SEO ranking, but it also plays a huge part in overall site usability.

4. Accessibility and search engine optimization

When it comes to accessibility, SVG files offer some benefits compared to other image formats.

While raster files solely rely on metadata (alt text), SVG files allow you to add text information to describe the visual elements and all to be stored within the SVG file. 

This means your SVGs can be interpreted by screen readers, helping those who have difficulties interact with your content on site.

SVG files can also be indexed by search engines like Google. So including keywords within your SVG files can help and improve your ranking and SEO.

So when should you use SVGs?

SVGs have many benefits obviously, but they are not the best choice for all situations. 

Simple graphics like logos, icons and illustrations YES. But not ideal for highly detailed photographs, we suggest using PNG and JPEG files for those instead, as they contain the colour and details using pixels with the fixed resolution. 

Something to be mindful of when using SVG is that not all softwares and processors support the format, so people may have trouble viewing them. 

For example: Google Docs, older versions of the web browser or some email campaign providers so be sure to check them before using it.

There you go!

Knowing how to use SVGs will ensure you won’t need to worry about blurry graphics ever again, just remember when and where to use them and you’re all set!