Draw with shapes, then look underneath. A vector image isn't made of pixels. It's a list of objects and their properties, which is why it stays sharp however much you zoom.
This is how the computer stores your picture: a drawing list of objects. Each row is one object with its properties. Objects lower down the list are drawn later, so they appear on top. Click a row to select it.
| # | Object | Position | Size | Fill | Outline |
|---|
SVG (Scalable Vector Graphics) is a real file format that saves vector images as text. Every object in your drawing list becomes one line of code. The selected object is highlighted.
Zoom in on your drawing. The vector version is redrawn from its properties at the new size, so it stays sharp. The bitmap version is a grid of 600 × 400 pixels, so zooming just makes each pixel bigger. The zoom centres on the selected object.
A vector file stores a few properties per object, so its size depends on how many objects there are. A bitmap stores every pixel, so its size depends on width × height × colour depth, however simple the picture.
Vector and bitmap images store pictures in completely different ways. Use the tabs above to see it happen, and read the key points for GCSE Computer Science here.
A vector image is stored as a list of objects, such as rectangles, circles, lines and text. Each object is saved with its properties: its position, size, fill colour, outline colour and outline width. To show the picture, the computer reads the list and draws each object in order.
Because the computer redraws the shapes from their properties, a vector image can be scaled to any size without going blocky. A bitmap stores a fixed grid of pixels, so enlarging it just makes each pixel bigger, which is called pixelation.
A vector file's size depends on how many objects it contains, not how big it is shown. A bitmap's size depends on its width × height × colour depth, however simple the picture. That's why a logo is usually much smaller as a vector.
SVG (Scalable Vector Graphics) is a common vector format. It is plain text, so you can read every object as a line of code. Open the SVG code tab above to see yours.
| Vector | Bitmap | |
|---|---|---|
| Stored as | Objects and their properties | A grid of pixels |
| When enlarged | Stays sharp | Becomes pixelated |
| File size depends on | Number of objects | Resolution and colour depth |
| Best for | Logos, icons, diagrams, fonts | Photographs and detailed images |
For photographs and images with lots of fine detail and shading. Describing every tiny change in colour as separate shapes would take far more data than storing pixels.
On screens, coordinates usually start at the top-left corner, with x increasing to the right and y increasing downwards.
Objects are drawn in list order, so later objects appear on top of earlier ones. Use Bring to front and Send to back to change it.