Lesson 5: Under the hood
Year 8 – Media – Vector graphics
Spot the difference
Starter activity
Describe the difference between vector graphics and real photographs.
Use these images to help you.
Vector graphic
Real photograph
Spot the difference
Starter activity
The real photograph has a lot more detail.
Vector graphic
Real photograph
Lesson 5: Under the hood
Objectives
In this lesson, you will:
4
Vector graphics
Activity 1
Vector graphics are digital images that are created using paths. A path can be a line, or many paths can be combined to form a shape. Lines and shapes can be altered, allowing vector graphics to be easily edited.
Vector graphic showing fill and stroke properties
Vector graphic showing the paths
Raster graphics
Activity 1
Bitmap images (raster graphics) are made up of small individual squares of colour called pixels.
When compared to vector paths, altering individual pixels is a much more difficult process because there are so many and they are so tiny.
Vector vs raster graphics
Activity 1
Vector graphics are images such as illustrations, icons, and logos. They do not use many colours because they have large areas of solid colour.
Bitmap images (raster graphics) are usually real photographs that contain a great deal of detail. They use lots of colours because each tiny pixel is a slightly different shade to make the colours within blend.
Vector scalability
Activity 1
Vector graphics can be scaled up or down without losing any image quality because the paths and shapes they are made from are based on algorithms and formulae.
The algorithms and formulae recalculate the colour and size of the pixels within the paths when the graphic is resized. This keeps the edges of the graphic nice and sharp.
Raster scalability
Activity 1
Raster graphics lose image quality when scaled up or down because they are based on pixels only.
The size and colour of the pixels is not recalculated when the graphic is resized. This makes the edges blurred.
Modify an .svg file
Activity 2
SVG (Scalable Vector Graphic) is a vector file format.
A vector file is essentially a structured description of an image.
Each path and shape within the file possesses properties that explain what it looks like and its position within the image.
Modify an .svg file
Activity 2
Task:
Open up the file named clownfish.svg in Inkscape.
Rearrange the shapes to create this image.
Some of the shapes have been grouped together to help you.
Research vectors and raster
Activity 3
It is time to explore cases where vector graphics are (or aren’t) useful. You are now going to carry out research using the internet. You may also use information from the A3 Fact sheet. All information must be written in your own words.
Find the questions to research on the A3 Worksheet. Record your findings in the space provided.
Research for vectors
Activity 3
You may have found out some of the following information about vectors:
Vector graphics are simple images made up of paths and shapes.
You should use a vector graphic if you are creating a graphic that needs to be in a large format.
This is because vectors can be scaled up without losing image quality.
For example, business identity logos will be used in many different formats from small letter headings to huge adverts on buses and billboards.
Research for rasters
Activity 3
You may have found out some of the following information about rasters:
Raster graphics are complex images made up of pixels.
You should use a raster graphic if your work involves using real photographs.
This is because raster graphics are based on tiny pixels which help to achieve fine detail over small areas. This helps the smooth blending of colours.
For example, websites will need to display high-quality photos. These photos will be displayed on small to medium screens able to display hundreds of pixels per square inch.
Questions
Plenary
SVG is a vector file format. What does SVG stand for?
How are vector and raster graphics different?
Questions
Plenary
SVG is a vector file format. What does SVG stand for?
Answer:
Scalable vector graphic
Questions
Plenary
How are vector and raster graphics different?
Answers:
Vector | Raster |
Made up with paths | Made up with pixels |
Simple images | Detailed/complex images |
Maintains image quality when scaled | Loses image quality when scaled |
Used for logos, icons, and illustrations | Used for real photos |
Next lesson
Summary
In this lesson, you…
Explained what vector graphics are
Provided examples where using vector graphics would be appropriate
Next lesson, you will…
Showcase and peer assess your projects from Lesson 4
18
Homework: Match up
Homework
You will be given a series of terms and a series of definitions from lessons 4 and 5.
They are not matched up.
Draw lines to match the term to the correct definition.
19
Due: Next lesson