TechKnowSurge
CompTIA Tech+ 1.2 CompTIA Tech+ 1.5
TechKnowSurge Catalog Interactives Raster vs Vector Zoom Test
InteractiveComputeFree

Raster vs Vector Zoom Test

Zoom into the same icon stored two ways — as a grid of pixels and as vector maths — and watch only one of them fall apart, with the file-size numbers measured live.

⚑ Complete this interactive to capture a CTF flag worth 1 point.

About this interactive

What you're seeing: the same house icon in two panels under one zoom slider. The left one was rendered once onto a small pixel grid and is being enlarged by the browser exactly the way any viewer enlarges a small PNG; the right one is SVG, redrawn from its five shapes at whatever size the slider asks for. Beside each panel are measured numbers — the PNG figure is a real encode of that bitmap, the SVG figure is the real byte length of that markup. Why it matters: a raster image holds a fixed number of squares and enlarging it cannot invent the squares that were never stored, which is the reason a blown-up photo goes blocky and the reason a logo is shipped as SVG. It is also where file size comes from: the raster file does not grow when you zoom, it just runs out of detail, while the file you would have needed to stay sharp grows with the square of the zoom. How to use it: start at ×1, where the two panels are deliberately indistinguishable, then pull the slider right and watch the roof's slope break into a staircase on one side only. Then change the raster source to 16px and back to 128px at the same zoom to see resolution and file size trade against each other, and check the vector's byte count at every step — it never moves, and that is the lesson rather than an oversight.

How to use this tool

Both panels hold the same icon. The left one is stored the way a photo or a screenshot is stored — as a fixed grid of coloured squares. The right one is stored the way a logo is stored — as a short description of shapes: a triangle with these corners, a circle with this centre and radius.

Drag the zoom slider. One slider drives both panels, so whatever you see is a difference between the two ways of storing an image and nothing else. At ×1 they are deliberately indistinguishable. Keep pulling right and the raster's roof line breaks into a staircase, because enlarging it paints each stored square bigger and there are no squares stored in between. The vector edge is recalculated from its coordinates at every size, so there is no grid for it to run out of.

Raster source changes how many squares the left panel gets to store: 16px, 32px, 64px or 128px on a side. A bigger grid survives more zoom and costs more bytes — that trade is what every image format is negotiating.

The numbers under each panel are measured, not decorative. PNG FILE is a real PNG encode of the real bitmap; notice that it does not change when you zoom. That is the honest version of the lesson: a raster file does not grow as you enlarge it, it just runs out of detail. TO MATCH is the only estimate on the page and says so — it is the size an uncompressed source would have to be to look sharp at the size now on screen, and it grows with the square of the zoom. SVG FILE is the real byte length of the real markup being drawn, and it reads the same at ×1 and ×12. That flatness is the point, not a rounding.

Nothing here is graded and nothing is submitted. Two things worth doing: park the zoom at ×6 and click through all four source resolutions to watch quality and file size move together, then compare TO MATCH against SVG FILE at the far right of the slider and read the multiplier in the line underneath.

What you'll learn

Aligned to

CompTIA Tech+
1.2 Compare and contrast fundamental data types and their characteristics.
1.5 Compare and contrast common units of measure.

Key terms

Raster Graphics
An image format that stores data as individual pixels, each containing color information; scaling reduces quality as no new pixel data can be generated.
Vector Graphics
An image format that stores data as mathematical equations and coordinate points, enabling lossless scaling and easy color modification with smaller file sizes.
Pixel
The smallest addressable unit of a digital image, whose color is encoded as binary values representing red, green, and blue channel intensities; display resolution is expressed as a grid of pixels.
Bitmap
An uncompressed image format that stores color data for every pixel individually, with file size directly determined by pixel dimensions and bit depth.
Portable Network Graphics
PNG
A compressed image file format that reduces storage size while preserving image quality by encoding pixel data more efficiently than bitmap formats.
Compression
The process of reducing file size by encoding data more efficiently, associated with formats such as .zip, .rar, and .tar.

Topics

Raster Graphics Vector Graphics Pixel Resolution File Size Data Representation Image Formats Scaling

About TechKnowSurge

TechKnowSurge builds IT and cybersecurity professionals through hands-on, concept-first training built around real understanding — not memorization. Free interactive tools, structured programs, and 25+ years of real-world experience, all in one place.

Explore free tools and programs →