Comparing raster and vector images

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. What does a raster image store?

A A colour number for every pixel

B Instructions for drawing shapes

2. What does a vector image store?

A Shape instructions, like a circle with a size and colour

B A long list of pixel colours

3. You zoom in a lot on a raster photo. What happens?

A It stays perfectly sharp

B It looks blurry or blocky

4. You zoom in a lot on a vector logo. What happens?

A It turns into blocky squares

B It stays sharp and smooth

5. Which type of image suits a photo of your pet?

A Raster

B Vector

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" fill="red"/>		Aphoto.jpg = raster: one colour number per pixel
2pixel(2,3) = 255,0,0		B<svg><rect width="80" height="40"/></svg>
3Photos suit raster images because every tiny detail needs its own pixel colour		CA raster image stores a colour number for every pixel, so it blurs when enlarged.
4Logos and clip art suit vector images because a few shapes can describe them and they scale cleanly		DA vector image stores a shape instruction like this, so it stays sharp at any size.
5zoom(photo.jpg, 800%) -> stays sharp		EAn SVG logo is a vector image. It stores shape instructions, not a colour number for each pixel.
6logo.svg stores a colour for every pixel		FA photo is a raster image. Zooming in enlarges its pixels, so it gets blurry or blocky and does not stay sharp.

Definitions

raster vs vector

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<______ cx="50" cy="50" r="40" />

FOR EACH _____ IN image STORE colour_number

<___ width="100" height="100"> <circle r="40" /> </svg>

IF zoom _ 100 AND type = "raster" THEN DISPLAY "Blurry pixels"

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A photo_type = 'vector'

B stores = 'colour per pixel'

C enlarged = 'blurry'

Question 2

A logo_type = 'vector'

B stores = 'pixel colours'

C enlarged = 'sharp'

Question 3

A photo = 'raster'

B zoom_in(photo, 800)

C result = 'sharp'

Question 4

A logo = 'vector'

B zoom_in(logo, 800)

C print('Zoomed in')

D result = 'pixelated'

Question 5

A <svg width="80" height="80">

B <circle cx="40" cy="40"

C r="30" fill="red" />

D </sgv>

Answer Key

Comparing raster and vector images

Section A: Quick Questions

A — A colour number for every pixel

A — Shape instructions, like a circle with a size and colour

B — It looks blurry or blocky

B — It stays sharp and smooth

A — Raster

Section B: Match the Pairs

<circle cx="50" cy="50" r="40" fill="red"/> → A vector image stores a shape instruction like this, so it stays sharp at any size.

pixel(2,3) = 255,0,0 → A raster image stores a colour number for every pixel, so it blurs when enlarged.

Photos suit raster images because every tiny detail needs its own pixel colour → photo.jpg = raster: one colour number per pixel

Logos and clip art suit vector images because a few shapes can describe them and they scale cleanly → <svg><rect width="80" height="40"/></svg>

zoom(photo.jpg, 800%) -> stays sharp → A photo is a raster image. Zooming in enlarges its pixels, so it gets blurry or blocky and does not stay sharp.

logo.svg stores a colour for every pixel → An SVG logo is a vector image. It stores shape instructions, not a colour number for each pixel.

Section C: Definitions

raster vs vector — Raster images store a colour number for every pixel and blur when enlarged; vector images store shape instructions and stay sharp at any size.

Section D: Fill in the Blanks

<circle cx="50" cy="50" r="40" />

<rect x="10" y="10" width="80" height="40" />

FOR EACH pixel IN image
    STORE colour_number

<svg width="100" height="100">
  <circle r="40" />
</svg>

IF zoom > 100 AND type = "raster" THEN
    DISPLAY "Blurry pixels"

Section E: Spot the Error

A — Photos are usually raster images because they need a colour for every pixel. It should be photo_type = 'raster'.

B — Vector images store shape instructions, not pixel colours. It should be stores = 'shape instructions'.

C — A raster photo has a fixed number of pixels, so zooming in makes it blurry or blocky. It should be result = 'blurry'.

D — A vector logo is redrawn from its shape instructions at the new size, so it stays sharp. It should be result = 'sharp'.

D — An SVG vector image is written as shape instructions and must end with the matching closing tag. It should be </svg>.