Vector markup
Lesson details
Learning outcome
I can investigate the markup of a vector graphic and change an object by modifying its markup.
Key learning points
- SVG stands for scalable vector graphic, where images are stored as code, not pixels.
- Each shape in your image is written in code with details like size, colour and position.
- 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.
Teacher tip
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.
Equipment
Pupils will need access to a device with vector graphic editing software. Examples in this lesson use Inkscape https://oak.link/inkscape
Licence
Lesson video
Loading...
Prior knowledge starter quiz
6 Questions
Q1.What is the name for a small image used to represent a function or menu in digital interfaces?
Q2.What do you call an image that represents and relates to the organisation it belongs to?
Q3.Why might someone sketch several ideas before starting a vector design project?
Q4.What is a vector image made up of?
Q5.What should you check when evaluating your finished product?
Q6.Match the action to the stage of the design process:
Planning
Evaluation
Preparation
Selection
Assessment exit quiz
6 Questions
Q1.What does SVG stand for?
Q2.How does an SVG file store an image?
Q3.What is markup in the context of SVG?
Q4.Why might someone edit SVG markup directly?
Q5.Put these steps in order for editing an SVG image:
Q6.Match the action to its effect in SVG markup:
Moves the shape
Changes the shape’s colour
Removes the shape from the image
Adds a new shape to the image
To help you plan your 8 computing lesson on: Vector markup, download all teaching resources for free and adapt to suit your pupils' needs...
To help you plan your 8 computing lesson on: Vector markup, download all teaching resources for free and adapt to suit your pupils' needs.
The starter quiz will activate and check your pupils' prior knowledge, with versions available both with and without answers in PDF format.
We use learning cycles to break down learning into key concepts or ideas linked to the learning outcome. Each learning cycle features explanations with checks for understanding and practice tasks with feedback. All of this is found in our slide decks, ready for you to download and edit. The practice tasks are also available as printable worksheets and some lessons have additional materials with extra material you might need for teaching the lesson.
The assessment exit quiz will test your pupils' understanding of the key learning points.
Our video is a tool for planning, showing how other teachers might teach the lesson, offering helpful tips, modelled explanations and inspiration for your own delivery in the classroom. Plus, you can set it as homework or revision for pupils and keep their learning on track by sharing an online pupil version of this lesson.
Explore more key stage 3 computing lessons from the Developing vector graphics unit, dive into the full secondary computing curriculum, or learn more about lesson planning.