VECTORS
What if there’s a type of image that stays perfectly sharp no matter how big you make it — even the size of a building?
CORE CONCEPT
IMPORTANCE OF VECTORS
KEY KNOWLEDGE
1
Vector images are made of mathematical shapes (points, lines, curves) — not pixels
REAL WORLD EXAMPLE
Imagine drawing a circle two ways. Way one: you fill in tiny squares on graph paper until the circle appears — that is a pixel image. Way two: you write down 'a circle, centre at this point, radius 5 cm, colour blue' — and any computer can read those instructions and draw the circle perfectly. That second way is a vector. A vector is not a picture stored on your phone — it is a recipe. And because a recipe can be cooked in a small bowl or a giant pot, the same vector circle can be drawn at any size without ever falling apart.
2
Vectors are resolution-independent: they can be scaled to ANY size without losing quality
REAL WORLD EXAMPLE
Look at the 'OK' tick mark on your WhatsApp messages. It looks crisp. Now think about that same tick on a giant outdoor billboard — it would look exactly as crisp. That is not magic. That is a vector. Pixel images have a fixed number of squares, so blowing them up makes them blurry. Vectors are mathematical instructions that get redrawn from scratch at whatever size you need. Same recipe. Bigger plate. Still perfect.
3
This makes vectors perfect for: logos, icons, illustrations, typography, and any graphic that needs to work at multiple sizes
REAL WORLD EXAMPLE
Think about a brand like Amul. The little Amul girl appears on butter packets the size of your palm, on hoardings as tall as buildings, on TV ads, on lorry sides, on tiny app icons. She has to look exactly the same at every size, or the brand falls apart. The only way to do this is to build her as a vector. Then the same Amul girl can be printed bigger than your house or smaller than your fingernail — without ever losing one curve of her smile. Logos are vectors because they have to live everywhere.
4
Raster (pixel) images are better for: photographs, complex textures, and visuals with millions of colour variations
REAL WORLD EXAMPLE
Try this thought experiment: could a maths recipe describe your grandmother's face? Every freckle, every wrinkle, the exact mix of grey in her hair, the soft texture of her skin? It would take billions of instructions, and even then it would never feel real. Some things are too complex for recipes — they need actual photographs made of pixels, where each tiny square captures a real piece of real light. That is why your selfies are pixel images and the WhatsApp logo is a vector. Different jobs. Different tools.
5
Common vector formats: SVG (for web), AI (Adobe Illustrator), EPS (print), PDF (can contain vectors)
REAL WORLD EXAMPLE
When you see a file ending in .svg on a website, that is a vector. When a designer sends you a file ending in .ai, that is the master vector file from Adobe Illustrator. When the school sends a PDF of your timetable, the text inside is usually vector — that is why it stays sharp even when you zoom in. These are not just file extensions — they are clues about what kind of image you are dealing with. Once you know the file type, you instantly know whether you can make it bigger or whether it will fall apart.
6
Most professional logos are created as vectors so they can be used on anything from an app icon to a building sign.
REAL WORLD EXAMPLE
Walk past a Tata Motors showroom. The Tata logo is huge on the building, medium on the car bonnet, small on the keychain, and tiny on the registration documents. If even one of those versions looked blurry, the brand would seem cheap. So designers built the Tata logo once — as a vector — and now the same file is used everywhere. From the corner office laptop to the giant glass facade. Every professional logo you have ever seen has been designed this way for the same reason: it has to look perfect at every size, on every surface, in every city.
7
Design software for vectors: Adobe Illustrator, Figma, Sketch, Canva (partially). For raster: Adobe Photoshop, phone cameras, photo editors.
REAL WORLD EXAMPLE
Designers do not use one tool for everything — they use the right tool for the job. Photoshop is for editing photos (pixels). Illustrator and Figma are for drawing logos and icons (vectors). Canva is in the middle — it lets you do a bit of both. Even Snapseed on your phone is a pixel tool. So when you hear a creative person say 'open it in Illustrator', they are not showing off — they are telling you 'this needs to be a vector'. Knowing which tool builds which kind of image is half the skill.
8
What if the reason some logos look crisp everywhere and others look blurry on large signs is simply: vector vs pixel?
REAL WORLD EXAMPLE
Now that you know this, you will start noticing it everywhere. The crisp Swiggy logo on a giant delivery hoarding — vector. The blurry shop sign in your neighbourhood where they obviously enlarged a small JPEG — pixel image stretched too far. The mystery of why some local businesses look professional and others look amateur is often not about money or talent — it is about whether someone gave them a vector logo. One file format choice separates 'looks like a brand' from 'looks like a printout'.
Pro Connection
Brand designers always deliver logos in vector format. Web developers use SVGs for icons and graphics. When someone says “do you have the vector file?” they need the scalable version that won’t pixelate.
PROFESSIONAL TERMINOLOGY
CLICK TO REVEAL and CLICK TO COVER
An image made of mathematical shapes that can be scaled to any size without losing quality
What is
VECTOR
Can be made larger or smaller without losing quality — the defining advantage of vector graphics
What is
SCALABLE
Not limited by pixel count — vectors look sharp at any dimension
What is
RESOLUTION-INDEPENDENT
Scalable Vector Graphics — the most common vector format for the web
What is
SVG
A drawn or digitally created image (as opposed to a photograph) — often created as vectors
What is
ILLUSTRATION
THE PIXEL ZOOM
Your favourite photo is lying to you — it's not one image, it's millions of tiny coloured lies, all perfectly arranged.
what TO DO
Take any photo on your phone.
Zoom ALL the way in until you can see individual squares of colour — those are pixels!
Screenshot the zoomed view, then screenshot the normal (full) view of the same photo.
Now send the same photo to yourself via a messaging app (e.g. WhatsApp or Instagram DM).
Download the received version and zoom into it at the same level.
Compare both zoomed versions side by side — do you notice a quality difference?
what TO SUBMIT
2 Screenshots | The zoomed pixel view AND the normal (full) view of your original photo — labelled clearly |
1 Screenshot | The zoomed view of the messaging-app (compressed) version |
Text | One sentence comparing the two zoomed versions: "The compressed version looks [more/less] pixelated because [reason]." |
CHALLENGE
DISCOVERY
You can use these SOFTWARES for this Discovery Challenge
FREE SOFTWARE : Phone Gallery, Chrome Browser, Phone Screenshot, Google Keep
PAID SOFTWARE : Vectornator / Linearity Curve, Adobe Illustrator on iPad