An Overview of Scaling SVG vs. Bitmap (JPG, PNG) Images
What happens when you zoom in?
Having looked at the basics of SVG and bitmap formats (like JPG and PNG), we now have a rough idea of their pros and cons. In this newsletter, we’ll look at another important factor that sets these formats apart: scalability.
Getting Things Pixel Perfect – Scaling Bitmaps
A bitmap format represents an image as a series of pixel colour values. Each pixel is a separate entity, and we have independent control over its value. This works to our advantage in images where colours and textures blend smoothly. But when we want to scale an image (to make it either larger or smaller), the nature of being a grid of colour points has its disadvantages.
To explain why, consider Image 1. When we look at it, we see a diagonal line going through the centre of a rectangle. But as a bitmap image, it’s nothing more than a series of colour values.
Let’s say we wanted to double its size. As a grid of colour values, we have no concept of there being a line. Instead, we work at the pixel level and duplicate each one horizontally and vertically. And if we wanted to zoom an image to four times its original size, we’d replicate each pixel four times. And so on: we’re effectively increasing the size of each pixel in the image without adding to or enhancing any of its details.
After a certain point, this affects image quality. Image 2 shows the top right tip of the line at different zoom factors. Everything is smooth and sharp at 1x. The image starts to look blurry at 2x but isn’t too bad. At 4x the diagonal line starts to look like a series of steps, and this pixelation is even more apparent at 8x. (The pixel gridlines in the image are an overlay from Affinity Photo – the image editor I used while zooming into the image.)
Pixelation is more noticeable with certain types of image content than others. But in general, it isn’t possible to scale a bitmap up too far without it become apparent.
Plotting a Route – Scaling SVGs
SVG images define their content as shapes on a co-ordinates grid. Instead of a series of unrelated colour values, Image 1 would be represented as a series of lines and curves. Scaling an SVG involves multiplying the co-ordinates of its content by the zoom factor. As shapes are mathematically defined, we’re able to recreate them at any scale without any loss in quality.
Image 3 shows the same tip of the line from Image 1, zoomed in as an SVG. Despite a greater scale factor than the 8x level shown in Image 2, the line ending is still smooth and rounded.
Summary
A bitmap format like JPG or PNG represents an image as separate colour values, whereas SVG defines its content as shapes. This affects how scalable an image is.
When working at the pixel level, scaling an image up effectively means increasing the size of each pixel without being able to add more detail. At smaller zoom increases, this can cause an image to become blurry; at higher levels, pixelation becomes apparent and rounded edges become ‘stepped’.
Scaling an SVG involves applying a zoom factor to its content. As shapes are defined mathematically, this process causes no loss in quality; rounded edges won’t suffer from pixelation, even at high magnification levels.
Bonus Developer Tip
If you’re using Windows 11 Pro or Enterprise and want to try something out in a throwaway environment, be sure to consider Windows Sandbox.
These tips are exclusively for my Substack subscribers and readers, as a thank-you for being part of this journey. Some may be expanded into fuller articles in future, depending on their depth.
But you get to see them here, first.
This was brand new information for me. Thank you for writing such a detailed and well-explained article! Gonna take this wherever I’m dealing with pictures and SVG’s. Any chance you write more about SVG’s? I always wanted to be able to make them by hand myself but the format seemed too inscrutable.