SVG: An Introduction and Overview vs. Bitmap Formats

In last week’s article, we looked at and compared two common bitmap image formats – JPG and PNG. These formats represent an image as a fixed-sized grid.

In this article, we’ll look at an alternative way of representing images where more emphasis is placed on the elements within it. In addition to introducing the data format, we’ll look at what it means in terms of storage requirements.

Making a Calculated Choice

A bitmap describes an image at the pixel level. It specifies both the number of points within an image, and the colour of each one. However, the points aren’t related to one another apart from being in the same image. Image 1 shows a green circle on a blue background. Some pixels are blue, some are green. But there’s nothing to say that the green pixels form a circle.

SVG Image Format

Instead of treating an image as a series of colour values in a grid, the SVG format takes an entirely different approach by describing the shapes within it using a dedicated markup language. This makes it unsuitable for certain purposes (like photos) where elements blend smoothly into each other.

Image 1 was created in Affinity Designer. Once exported as an SVG, it – like any other SVG – can be opened in a text editor. The following is a snippet from the output.

It may look complex, but it’s not too hard to see what’s going on if we take it bit by bit.

First off, we have a rect. This represents the blue square we’re using as a background. Looking at its attributes, we see it has:

• X and Y co-ordinates (x and y respectively).

• Width and height sizes (width and height respectively).

• A colour; more specifically, rgb(38,72,184).

Likewise, the circle also has:

• X and Y co-ordinates (cx and cy respectively).

• A size (r represents its radius – the length between its midpoint and edge).

• A colour: rgb(77,209,94).

Neither co-ordinate of the rect is 0, and we might expect the image to be offset as a result. However, this isn’t the case because the image’s elements are all wrapped in a group (g) with a matrix transform to reposition it.

Storage Requirements

SVG markup is semantically rich: each tag describes an element in its entirety. For example, the circle tag defines a circle with its location and size specified by the tag’s attributes. This lets us express a lot of information with a relatively small amount of data, especially when compared to how a bitmap would represent the same image. For reference, Image 1 as an SVG takes 778 bytes.

Summary

The SVG format represents an image differently to how bitmap formats such as JPG and PNG would. An SVG describes its elements using a dedicated markup language, instead of presenting it as a series of colour values in a grid.

This makes the format unsuitable for images where its elements blend seamlessly with one another. However, it means SVGs generally have a much smaller footprint than a bitmap equivalent.

Thanks for reading!

This article is from my newsletter. If you found it useful, please consider subscribing. You’ll get more articles like this delivered straight to your inbox (once per week), plus bonus developer tips too!