Benefits of SVGs (Scalable Vector Graphics)

Website Design Reading Time: 2 minutes

Firstly, what’s an SVG?

An SVG (Scalable Vector Graphic) is an XML-based vector format which uses text to describe how the file should appear.
This means they’re resolution independent, can be searched, scripted, indexed, compressed and edited with any text editor.

This gives them major benefits over traditional JPG or PNG images, starting with:

1. Scalability

As SVGs aren’t relative to the screen they’re displayed on, and due to their vector nature, they’re infinitely resizable. This means that unlike a PNG or JPG your SVG will never lose quality no matter how you scale them.

Where a JPG might appear pixilated on a retina display (like your new smartphone), an SVG will always look crystal clear on any screen.

This makes them perfect for illustrations, logos and icons.

2. File size | Performance

Another great benefit of SVG is its small file size, meaning it will always load faster than the alternative. Perfect for your Google Ads campaign!

SVGs are essentially XML text and if used inline, this will remove the server requests needed to load an image file, increasing page speed & site performance – which is great for SEO & UX!

3. Editing capabilities

One of the greatest facets of the SVG format is its ability to be edited. Unlike other image formats, SVG can be completely transformed with a few lines of javascript or CSS.
This gives you immense power over the look and feel of visual elements across a website. Where in the past you may have relied on displaying a video or a GIF for an animated icon or logo – adding heavy load time to your site – with SVG you can use lightweight javascript libraries or custom code the animations yourself.

It could be as simple as changing a colour. What used to take loading up illustrator, making the changes, re-exporting the file, uploading the file to your site and calling in on the page, is now ‘fill #f00’.

Looking to add some impressive SVGs to your website? Take a look at these useful links or get in touch with us to see how we can help!



SVG on the web

Animate SVG with CSS