← ACARA Digital Technologies Years 7–8

Vector images

An image stored as shapes and paths (lines, curves) described by numbers and drawn when shown, not as a grid of pixels. It can scale up without pixelation. SVG is a common format.

Part of: ACARA Digital Technologies Years 7–8 — Representing Text, Images and Sound — Module 44

Understanding Vector images in ACARA Digital Technologies Years 7–8

What it does: The viewBox keeps the shape numbers at 0-100 while width and height scale the drawing up to 400, and it is redrawn sharply at the bigger size. The path starts at M (move to) 10,80, then Q draws a curve using a control point and an end point, all stored as numbers. A vector image stores shapes, lines and curves as numbers. A grid of pixels is how a raster image works. A vector logo can be scaled to any size without losing quality, so one file works for both. Vector images describe lines by their start and end coordinates, and the computer draws the line when it is displayed.

Common mistakes: A vector image in SVG starts with the <svg> tag, not <pixel>. SVG describes shapes with numbers instead of a grid of pixels. A rectangle's size is set with the width and height attributes. 'high' is not a valid attribute, so it should be height="20".

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Vector images to a class →

This module's key terms are also in a printable crossword (Modules 153–172) and word search (Modules 153–188).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
How does a vector image store a picture?
As shapes and paths described by numbersAs a grid of coloured pixels
Matches
A vector image is a grid of tiny coloured pixels, and it gets blocky when you zoom in.
↓
This describes a raster (bitmap) image, not a vector image. Vector images store shapes and paths, not a grid of pixels.
Applying
Meanings
Term
vector image
Meaning
An image stored as shapes and paths (lines, curves) described by numbers and drawn when shown, not as a grid of pixels. It can scale up without pixelation. SVG is a common format.
Practice
<svg viewBox="0 0 100 100" width="200" height="200">
Testing
Gaps
< width="100" height="100">
Check Answer
Spots
1<pixel width="20" height="20">
2<circle cx="9" cy="9" r="5"/>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Spider' badge — Web Weaver, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. How does a vector image store a picture?
A. As shapes and paths described by numbers ✓
B. As a grid of coloured pixels
A vector image stores shapes, lines and curves as numbers. A grid of pixels is how a raster image works.
2. What happens when you zoom in a lot on a vector image such as clip art?
A. It stays sharp and smooth ✓
B. It turns blocky and pixelated
The computer redraws the shapes from their numbers at the new size, so the edges stay smooth. Raster images get pixelated.
3. Which file format is a common type of vector image?
A. BMP
B. SVG ✓
SVG (Scalable Vector Graphics) stores shapes as instructions. BMP is a raster format made of pixels.
4. A vector image has a circle in it. What might the file store about the circle?
A. The RGB value of every pixel inside the circle
B. Its centre point, radius and colour as numbers ✓
A vector file describes the circle with a few numbers, such as its position, size and colour. Storing every pixel is raster.
5. When is a vector image's picture created on the screen?
A. It is drawn from the shape numbers when it is displayed ✓
B. It is already stored as a finished grid of pixels
The device reads the numbers and draws the shapes each time the image is shown.

Match the Pairs

<circle cx="50" cy="50" r="40" /> → An SVG shape stored as numbers: a circle with its centre at (50, 50) and a radius of 40, drawn when the image is shown
<line x1="0" y1="0" x2="100" y2="50" /> → An SVG line drawn from the start point (0, 0) to the end point (100, 50)
A vector image is stored as shapes described by numbers, so it can be scaled up without pixelation → <svg width="400" height="400" viewBox="0 0 100 100">
A curve in a vector image is a path described by numbers (points and commands) → <path d="M10 80 Q50 10 90 80" />
A vector image is a grid of tiny coloured pixels, and it gets blocky when you zoom in. → This describes a raster (bitmap) image, not a vector image. Vector images store shapes and paths, not a grid of pixels.
<rect width="50" height="20" fill="red"> → The SVG tag is not closed. It must end with /> so the rectangle shape is complete.

Key Term

vector image
An image stored as shapes and paths (lines, curves) described by numbers and drawn when shown, not as a grid of pixels. It can scale up without pixelation. SVG is a common format.

Fill in the Blanks

1. <svg width="100" height="100"> <circle cx="50" cy="50" r="40" /> </svg>
Hint: Type the tag name that starts a scalable vector graphics image.
2. <svg width="100" height="100"> <circle cx="50" cy="50" r="40" /> </svg>
Hint: Type the shape element that is drawn from a centre point and a radius.
3. <svg width="100" height="100"> <rect x="10" y="10" width ="80" height="40" /> </svg>
Hint: Type the attribute name that sets how wide the rectangle is.
4. <svg width="100" height="100"> <line x1="10" y1="10" x2="90" y2="90" /> </svg>
Hint: Type the element that draws a straight line between two points.
5. <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill ="red" /> </svg>
Hint: Type the attribute name that sets the colour inside a shape.

Spot the Error

Question 1
A <pixel width="20" height="20">
B <circle cx="9" cy="9" r="5"/>
C </svg>
Line A — A vector image in SVG starts with the <svg> tag, not <pixel>. SVG describes shapes with numbers instead of a grid of pixels.
Question 2
A <svg width="50" height="50">
B <rect width="30" high="20"/>
C </svg>
Line B — A rectangle's size is set with the width and height attributes. 'high' is not a valid attribute, so it should be height="20".
Question 3
A <svg width="50" height="50">
B <rect width="30" height="20"/>
C <path c="M5 5 L40 5 L40 40"/>
D </svg>
Line C — The numbers that describe a path's lines and curves go in the d attribute. It should be d="M5 5 L40 5 L40 40".
Question 4
A <svg viewBox="0 0 10 10">
B <circle x="5" y="5" r="4"/>
C </svg>
Line B — A circle's centre is set with cx and cy, not x and y. The line should be <circle cx="5" cy="5" r="4"/>.
Question 5
A <svg width="50" height="50">
B <g fill="red">
C <circle cx="9" cy="9" r="-5"/>
D </g>
E </svg>
Line C — A radius is a length, so it cannot be negative. A negative r is invalid and draws nothing. It should be r="5".

Student with a class code? Join your class →