TWIL #006 - Why some Images are Infinitely Zoomable
SVGs describe shapes with maths instead of pixels, which is why they look sharp at any size and why they're fundamentally different from JPEGs or PNGs.
- #web
- #graphics
- #svg
A JPEG or PNG stores an image as a grid of coloured pixels. Zoom in far enough and you see the individual squares - the image gets blurry because there's no more information to reveal.
An SVG (Scalable Vector Graphic) doesn't store pixels at all. It stores mathematical descriptions of shapes: "draw a circle centred at (50, 50) with radius 30, filled with red." When your browser renders it, it calculates where every pixel should be at render time, at whatever size the image is being displayed.
That's what "Scalable" actually means; not that it scales up numerically like scalar quantities do, but that it re-renders perfectly at any resolution with no quality loss.
In practice this means:
- Icons and logos should almost always be SVG
- SVGs are plain text (XML), so they're version-controllable and inspectable
- You can style SVGs with CSS and animate them with JavaScript
- They're typically much smaller in file size for simple graphics
The tradeoff: SVGs aren't suited for photographs or anything with continuous colour gradients - that's where raster formats win.