SVG: pixels versus instructions

This demo puts two copies of the logo side by side. It works best on a wider screen (tablet, laptop, or desktop).

Both squares hold the same logo at the same size. The left one is stored as SVG — a short list of drawing instructions. The right one is stored the way a photo, PNG, or JPEG is: a fixed grid of coloured pixels. They start out identical. Now drag the zoom and watch them part ways.

Instructions (SVG) redrawn at 240px — always sharp

Pixels (like a PNG) saved as 240×240 px

Zoom in 1×

At 1× they match. Push the zoom and the pixels break into blocks, while the instructions just get redrawn bigger.