New
New
Year 8

Vector markup

I can investigate the markup of a vector graphic and change an object by modifying its markup.

New
New
Year 8

Vector markup

I can investigate the markup of a vector graphic and change an object by modifying its markup.

These resources will be removed by end of Summer Term 2025.

Switch to our new teaching resources now - designed by teachers and leading subject experts, and tested in classrooms.

These resources were created for remote use during the pandemic and are not designed for classroom teaching.

Lesson details

Key learning points

  1. SVG stands for scalable vector graphic, where images are stored as code, not pixels.
  2. Each shape in your image is written in code with details like size, colour and position.
  3. Small changes to numbers or tags in the markup can move shapes or change how they look.

Keywords

  • Markup - code that holds details like the size, colour and position of vector graphics

  • Scalable - the ability to change the scale or the size of an object

  • Scalable vector graphic (SVG) - a graphic that allows you to change the scale or size

Common misconception

SVG files are made of pictures, not code.

SVG images are stored as text-based code. Each shape is written with instructions that describe its appearance, such as its size, colour and position on the canvas.


To help you plan your year 8 computing lesson on: Vector markup, download all teaching resources for free and adapt to suit your pupils' needs...

Encourage pupils to make small, controlled changes to the markup and view the results each time. This helps build confidence and clearly links the code to the visual outcome, especially for those new to editing SVG directly.
Teacher tip

Equipment

Inkscape software

Licence

This content is © Oak National Academy Limited (2025), licensed on Open Government Licence version 3.0 except where otherwise stated. See Oak's terms & conditions (Collection 2).

Lesson video

Loading...

Prior knowledge starter quiz

Download quiz pdf

6 Questions

Q1.
What is the name for a small image used to represent a function or menu in digital interfaces?

Correct Answer: Icon

Q2.
What do you call an image that represents and relates to the organisation it belongs to?

Correct Answer: Logo

Q3.
Why might someone sketch several ideas before starting a vector design project?

To use all the tools in the software
To make the project take longer
To avoid using any shapes
Correct answer: To explore different possibilities and choose the best approach

Q4.
What is a vector image made up of?

Pixels
Correct answer: Shapes and paths
Sound waves
Videos

Q5.
What should you check when evaluating your finished product?

If it looks colourful
If it uses every tool
If it is the same as your friend's work
Correct answer: If it matches your initial plan and goals

Q6.
Match the action to the stage of the design process:

Correct Answer:Sketching ideas,Planning

Planning

Correct Answer:Checking if goals are met,Evaluation

Evaluation

Correct Answer:Listing tools,Preparation

Preparation

Correct Answer:Choosing the best idea,Selection

Selection

Assessment exit quiz

Download quiz pdf

6 Questions

Q1.
What does SVG stand for?

Correct Answer: Scalable Vector Graphics, Scalable Vector Graphic

Q2.
How does an SVG file store an image?

Correct answer: As a series of text-based instructions
As a collection of photographs
As a single large pixel
As a video file

Q3.
What is markup in the context of SVG?

The price of an image
The colour of the image
Correct answer: The code that describes the image’s details
The file size

Q4.
Why might someone edit SVG markup directly?

Correct answer: To control exactly how each shape appears
To make random changes
To make the image blurry
To convert it into a photo

Q5.
Put these steps in order for editing an SVG image:

1 - Open the SVG file in a text editor
2 - Change a value in the markup
3 - Save the file
4 - View the updated image

Q6.
Match the action to its effect in SVG markup:

Correct Answer:Changing a number in the position tag,Moves the shape

Moves the shape

Correct Answer:Editing the colour value,Changes the shape’s colour

Changes the shape’s colour

Correct Answer:Deleting a shape’s code,Removes the shape from the image

Removes the shape from the image

Correct Answer:Enter a new line of code,Adds a new shape to the image

Adds a new shape to the image