In my first tech post, I would like to discuss SVG’s, a format that I often find people overlook or are simply not aware of in my role as a website designer. One of the most common problems I have when dealing with clients is the quality of content. I am not talking about the 300 words per page and an image they bought on a royalty-free stock site. I am talking about the personal content, the logos, iconography and the data visualisation which are all too often provided as low-quality jpg they decided to embed into a word file to send to you.

This article is aimed to introduce the format and its advantages to people who are just starting out building websites, either junior developers, a multi-discipline role like a member of a PR or communications team or perhaps just a business owner wanting to make their own website, I have seen and dealt with them all.

Whilst you would still likely end up sourcing your own replacements for low-quality files it is important to know that when you do, you have choices and the right choice now could unlock lots of possibilities later.

What is an SVG?

SVG is an abbreviation of Scalable Vector Graphic. The Important part here is 'vector', you may have heard the term before but you may not know what it is or why it can be so good for website images.

In order to understand this value, we need to look at the types of image files available. I don't mean file extensions like jpg or png i am referring to the two main types of images, first is the rasterised image and then there is the vector image.

Rasterised Images

A rasterised image is one that is made up of pixels, we are all familiar with this particular digital building block and it makes up the majority of images because it's the only option for photos.

Vector images

The vector however takes a very different approach, instead of the pixel it uses a mathematical formula to create 2d geometrical shapes. Using lines, paths and curves it can create basic shapes like rectangles and circles or complex shapes called polygons. Combining multiple shapes together allows the designer to make more intricate graphics. These formulas are then drawn dynamically by the browser to create the image we see on the page.

Vector images are perfectly suited for illustrations, icons, charts and maps.

So why not just use a rasterised image for everything?

There are two main advantages to vectors, the first is how great it is for scaling images the second is the way in which the image format can be exposed which allows us to add an extra level of functionality to it. I am going to start with scaling because it's the easiest to break down.

Scaling

So we all know the modern web is available in more ways than ever and with that comes a lot of obstacles to the web developer. You often can’t use the same image for a mobile device as you do for your desktop. Well, you could but you shouldn't, scaling rasterised images loses quality so instead, we make several versions of the same image at different sizes and serve the file closest to the dimension of the device using methods such as source sets. For every image, we make further from the original size image dimensions we lose image quality as we either discard or add new pixels to our image.

To illustrate this below I have created a very basic image and generated three files at different dimensions which in the real world we would use to target our responsive breakpoints for a phone, tablet and desktop.

Phone - 360x120 - 3kb

Tablet - 720x240 - 6kb


Desktop - 1080x360 - 9kb

Whilst our example is only a 6kb difference there isn't much to this image so it's easy to imagine that as the complexity and quantity scale up with a website's size these savings can have quite the impact. What it does show is that when it comes to rasterised images one size does not fit all.

Except with Vectors & SVG it can!

Here is the same image as an SVG, it looks no different on the surface but underneath everything has changed.

It doesn’t have a fixed size, instead, it uses 100% width and 100% height but uses an aspect ratio defined by a viewbox to scale it accordingly, we will deal with viewbox in greater detail later in the series as we can do a lot with this.

This SVG file is also only 295 bytes uncompressed, less than a tenth of the smallest image above but can be used to deliver all three of the above sizes from a single source file, no more need to make multiple versions of the same file and no change in files size.

This is because the image is being drawn from the formulae, it doesn’t contain fixed data ie pixels and if we want to use the same image again at a different size we tell it the new dimensions and let it redraw the image at that size with zero loss in quality.

Think of the potential for your logo to look perfect quality in the header and footer at different sizes on any screen size for a fraction of the size of its rasterised counterpart.

What's even better is that an SVG is able to be created and edited in a text editor, it's just XML, let’s take a look and you will see what I mean.

<svg width=“100%" height=“100%" viewBox="0 0 360 120" xmlns="http://www.w3.org/2000/svg">
    <rect width="360" height="120" fill="white"/>
    <circle cx="62.5" cy="60.5" r="17.5" fill="#FF0000"/>
    <circle cx="281" cy="60" r="35" fill="#000AFF"/>
    <circle cx="163" cy="60" r="25" fill="#05FF00"/>
</svg>

So an SVG only needs a few key things to work. First, it needed an SVG file extension if it was going to be a stand alone file. It needs an opening and closing SVG tag similar to HTML and finally an XML namespace, but you don’t need to worry about that as long as it has one.

Why is having access to the code important?

So the simplest way to use an SVG is to use it in the src of an IMG tag the same way as you would a jpg or png. This offers the best browser support and we don't need to do anything new to get it to work. If all we are after is a simple high quality, low file size alternative then this method is perfect.

However, linking to an external file doesn't make the code visible, so as developers we can do much better than this. XML has for a long time been available to use inside HTML code and as such, we can embed our image directly into our pages HTML too which is a process referred to as an Inline SVG, this also has the added advantage of lowering the number of page request our browser needs render our page, further increasing the performance of our site.

It may not initially be obvious as this article is aimed at people not familiar with creating websites but embedding our SVG into the page code means we now have the ability to interact and manipulate it through the use of CSS to add styling, javascript to change behaviour and add functionality or create animations to improve user impact.

Summary

Over the course of this series, I will look in greater detail at each aspect of how we can control and take advantage of these additional technologies to add value to our sites and create high-quality and good engaging content for our target audiences.

Here is a quick summary of topics I intend to explore in each future article.

1. SVG Styling with CSS
2. SVG & Javascript
3. Animated SVG
4. SEO and website accessibility

An SVG by any other name

There are several other vector formats commonly used in various places but when it comes to the web SVG is the only one you need to worry about. The good news’s that you can convert most other vectors to SVG.

The other formats are usually proprietary and are usually the default file format for the product that makes them, illustrator for example belongs to Adobe. These formats have many features and great extra options but usually are used as a source file and not the final output file.

The other vector formats you should look out for are:

1. Adobe Illustrator (*.ai)
2. Encapsulated Postscript (*.eps)
3. Corel Draw (*.cdr)
4. PDF - a hybrid format that can have both vector and raster images

The best news is that most logos started life with a designer who likely used vector design software to make that file. So if it's your logo ask them for it, if it's a third-party logo chances are they will have a copy or it's already on their website, but be aware you may need to hunt a little to find it.

TL:DR

1. SVGs are great for logos, icons, illustrations, charts and maps
2. SVGs are just XML files and can be created and edited in a text editor
3. SVG’s scale with no loss of quality and only requires one source file
4. SVG’s can be embedded into your page code directly
5. SVGs are SEO friendly and can be searched and indexed
6. SVG’s can be manipulated and controlled using CSS and Javascript
7. SVG’s can be much smaller than their rasterised counterparts
8. SVG’s can be converted from most vector formats.