ShareHere I am, once again harping on about using images on the web (for those interested: a previous article on responsive images). This time I am focusing my attention on one particular format: Scalable Vector Graphics, or SVG for short.
I am always interested in ensuring our web development practices are as efficient, flexible and performant as they can be. Whilst SVGs are not necessarily a cutting-edge format, they have cemented their place in our web development process and I felt them deserving of a closer look at their role and value.
What are SVGs?
SVGs, as the name suggests, are a format of vector graphic. This is a file comprised of a series of 2D points, connected by lines and curves to form shapes. This is as opposed to a raster format like JPG or PNG which are comprised of a fixed number of pixels.
This means that our SVG images are more like a mathematical formula than a grid of coloured squares. Practically speaking, this limits SVGs to simpler shapes, like those you might find in a logo or an icon. However, what we lose in complexity, we make up for in performance and scalability.
Performance
I mentioned that an SVG image is not dissimilar to a mathematical formula. To be precise, an SVG file is actually comprised of XML markup language, very similar to the HTML we find in our web pages. This markup language defines the number of shapes; where their vertices and sides are; and can also include styling information such as fill colour, line thickness, etc.
The benefit of this structure, as opposed to a grid of pixels, is that the resultant file size can be very small.
Take the above image, for example. Admittedly simple, if saved as a 100px x 100px PNG, it comes in at roughly 100kb. Saved as an SVG, however, it is only 303 bytes, a saving of over 99%.
Whilst this example is contrived, the principle can be applied to our projects and the careful use of SVG can significantly lower the amount of data being loaded on our web pages.
This is great for performance, which is in turn great for the user experience, helps our websites rank well in search engines, and even helps the environment.
Scalability
Another benefit that SVGs bring is that, thanks to the way in which they are defined, they can be infinitely scaled. Compare that to a raster image, which is saved with a fixed set of dimensions, measured in pixels. If we display a raster image at a size larger than its native dimensions, it will begin to pixelate, i.e. lose image quality as it is asked to cover an area for which it does have enough pixels. Not so with our friend the SVG.
Take the above image, for example. On the left we have our PNG, originally sized 100px x 100px and now stretched to 400px x 400px. We can see that this results in jagged edges and a general loss of fidelity as the image is stretched.
On the right is our SVG, comfortably scaled to 400px x 400px without any loss of visual quality (or requiring an increase in file size).
Flexibility
Finally, SVGs can offer us as web developers a great deal of flexibility in terms of presentation. The simplest way to use an SVG in our markup is to reference it as the source of an image element, just like we would with a raster file:
<img src="filename.svg" alt="A pink circle on a blue background">
However, because our SVG file is essentially comprised of markup, we can also include this directly in our HTML, making the constituent elements accessible to use like anything else on the page. What this is means in practical terms is that we can include a single SVG on our page, and then use CSS to adjust its colour, position, size, etc.
For example, the markup for our pink circle on a blue square might look something like this:
<svg>
<rect width="100" height="100" style="fill:#0067b1" class="rectangle"
/">
<circle cx="50" cy="50" r="39" style="fill:#dd3777" class="circle" /
</svg>
If we include that file directly in our HTML, we could write some CSS like this:
.rectangle {
fill: red;
}
.circle {
fill: yellow;
}
And now, without having to load a different image, our SVG would look like this:
Being able to control an image like this gives us a lot of visual options without having to design and prepare a huge library of raster assets to be loaded with our page.
As with so many aspects web development, using SVGs is about wielding the right tool for the job. SVGs won’t ever replace all other formats – they are unlikely to ever be a format we can use with photos, for example – but when our aesthetic needs can be met with a simpler 2D graphic they are the ideal choice.
