At e3 we're using SVG more with every project and the boosts in page-speed and image quality are really proving its worth. But what exactly is SVG?
It’s safe to say that a lot has changed since the frontier days of web development. The runaway success of the tablets and smartphones at the end of the 2000s brought about a sudden increase in screen sizes and browser capabilities that meant our old techniques had to change. The subsequent development of responsive design has allowed us to set our layouts free. Where front-end developers once spent their days corralling spacer GIFs into fixed-width table layouts, we now find ourselves shaping each website experience to the user’s device.
That said, whilst we have successfully liberated our layouts, the recent advent of high-dpi screens has shown there is still some way to go. Images are still tied to resolution.
Traditional web images are rasterised, which means they contain an exact per-pixel layout of how they should be represented on a screen. However, high-dpi screens can have more than double the pixels of conventional screens. This essentially means that standard-dpi images become ‘padded out’ with extra pixels. Whilst a logo might look fine at its native resolution, it will appear blurred when blown up to larger sizes.
The example below illustrates how low-dpi images appear on mobile devices with high-dpi displays:
Not too great. So, how can we ensure your images remain at their best across all devices?
Enter, Scalable Vector Graphics.
Scalable Vector Graphics, or SVG, are a viable solution to this issue. Instead of representing pixel-level information, SVG represent shape and form with vectors. These vectors are then interpreted by the browser and rendered on the fly: one file rendered at any size. Let’s look at the logo example again:
On the left is the original raster image; the right is the same logo as an SVG. As you can see, the SVG has scaled beautifully leaving the logo looking sharp.
As SVG images are vector based they are unsuited to reproducing complex images such as photographs, but for icons, logos and other graphical elements they can’t yet be beaten.
Taking SVG further
The aesthetic benefits of SVG are obvious, but there are several other reasons to be using them.
As SVG files don’t contain any pixel data, their filesize is generally much less than an equivalent high-resolution raster image. This boosts overall page speed, particularly on mobile devices as they won't have to load desktop-resolution images.
On a structural level too, SVG files are not dissimilar to the HTML we use to mark up our pages. It is even possible to inject the SVG markup directly into the body of a page, boosting performance by reducing the number of HTTP requests necessary to load the page. This method also allows us to manipulate SVGs in fun ways that aren’t possible with standard images. Take a look at the examples below:
Using only one SVG file we can use CSS to manipulate the way the image is rendered. We can create animations or hover effects that would not be possible with a standard image.
So, when can we start using SVG?