Vector images
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. How does a vector image store a picture?
2. What happens when you zoom in a lot on a vector image such as clip art?
3. Which file format is a common type of vector image?
4. A vector image has a circle in it. What might the file store about the circle?
5. When is a vector image's picture created on the screen?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<circle cx="50" cy="50" r="40" /> | AAn SVG shape stored as numbers: a circle with its centre at (50, 50) and a radius of 40, drawn when the image is shown | |
| 2<line x1="0" y1="0" x2="100" y2="50" /> | B<svg width="400" height="400" viewBox="0 0 100 100"> | |
| 3A vector image is stored as shapes described by numbers, so it can be scaled up without pixelation | CThis describes a raster (bitmap) image, not a vector image. Vector images store shapes and paths, not a grid of pixels. | |
| 4A curve in a vector image is a path described by numbers (points and commands) | D<path d="M10 80 Q50 10 90 80" /> | |
| 5A vector image is a grid of tiny coloured pixels, and it gets blocky when you zoom in. | EThe SVG tag is not closed. It must end with /> so the rectangle shape is complete. | |
| 6<rect width="50" height="20" fill="red"> | FAn SVG line drawn from the start point (0, 0) to the end point (100, 50) |
C
Definitions
vector image
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<___ width="100" height="100">
<circle cx="50" cy="50" r="40" />
</svg>
2.
<svg width="100" height="100">
<______ cx="50" cy="50" r="40" />
</svg>
3.
<svg width="100" height="100">
<rect x="10" y="10" _____
="80" height="40" />
</svg>
4.
<svg width="100" height="100">
<____ x1="10" y1="10" x2="90" y2="90" />
</svg>
5.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" ____
="red" />
</svg>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<pixel width="20" height="20">
B
<circle cx="9" cy="9" r="5"/>
C
</svg>
Question 2
A
<svg width="50" height="50">
B
<rect width="30" high="20"/>
C
</svg>
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>
Question 4
A
<svg viewBox="0 0 10 10">
B
<circle x="5" y="5" r="4"/>
C
</svg>
Question 5
A
<svg width="50" height="50">
B
<g fill="red">
C
<circle cx="9" cy="9" r="-5"/>
D
</g>
E
</svg>
Answer Key
Vector images
Section A: Quick Questions
Q1
A — As shapes and paths described by numbers
Q2
A — It stays sharp and smooth
Q3
B — SVG
Q4
B — Its centre point, radius and colour as numbers
Q5
A — It is drawn from the shape numbers when it is displayed
Section B: Match the Pairs
Q1
<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
Q2
<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)
Q3
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">
Q4
A curve in a vector image is a path described by numbers (points and commands) → <path d="M10 80 Q50 10 90 80" />
Q5
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.
Q6
<rect width="50" height="20" fill="red"> → The SVG tag is not closed. It must end with /> so the rectangle shape is complete.
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" />
</svg>Q2
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" />
</svg>Q3
<svg width="100" height="100">
<rect x="10" y="10" width
="80" height="40" />
</svg>Q4
<svg width="100" height="100">
<line x1="10" y1="10" x2="90" y2="90" />
</svg>Q5
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill
="red" />
</svg>Section E: Spot the Error
Q1
A — A vector image in SVG starts with the <svg> tag, not <pixel>. SVG describes shapes with numbers instead of a grid of pixels.
Q2
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".
Q3
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".
Q4
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"/>.
Q5
C — A radius is a length, so it cannot be negative. A negative r is invalid and draws nothing. It should be r="5".