Developing vector graphics

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Create a purposeful arrangement of vector shapes
Explain fill, stroke, order and alignment

Vocabulary: vector · shape · fill · stroke · layer · alignment

Retrieve previous learning

Why should a digital product be tested at its intended size?

Check: Readability and layout can change when a design is scaled or displayed on a different device.

Learn the concept

A vector graphic stores shapes as mathematical paths and properties rather than a fixed grid of coloured pixels. A circle remains editable as a circle; its fill controls its inside colour and its stroke controls its outline. This makes a simple symbol easy to resize while keeping clean edges.

Start from a purpose. For a fictional library wayfinding icon, combine a rectangle for a book cover and two shorter shapes for pages. Align edges, use a small palette and place shapes in an intentional front-to-back order. A hidden shape may still exist in the file, so inspect layers when an edit appears to do nothing.

Check the icon at small size and in monochrome. Shapes must communicate without relying only on colour. The work also needs a text label where an icon alone might be ambiguous. Use original shapes or permitted assets, then save an editable source file before export.

Worked model

Define the book icon's audience and the meaning it must convey.
Draw and align a cover shape and page shapes using editable objects.
Set fill, stroke and layer order, then inspect the result at small size.
Save the editable file, export a copy and ask a reader what the icon means.

Guided practice

The page shapes are hidden behind the cover. What property should be inspected?

Hint: Think about front-to-back order.

Check the guided answer

Inspect the layer or object stacking order and move the pages in front of the cover or reshape the cover. A shape may exist even when covered.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

Teacher observes a learner create and revise an original vector artefact in an approved tool.
Saved source file shows editable paths or shapes, a clear design purpose and permission for any imported asset.
Learner demonstrates the change, compares exported and editable files, and explains one accessibility choice.

Find and correct a misconception

“If an object disappears, the file has deleted it.”

Correction: It may be hidden behind another shape, outside the canvas or invisible through its fill or opacity; inspect objects before rebuilding.

Extend and reflect

Make a second icon version for a dark background.

Guidance: Adjust contrast and stroke but keep recognisable form and a text label.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Create a purposeful arrangement of vector shapes. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Align, group and layer multiple vector objects

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Manage several editable objects without flattening them
Predict how grouping and layer order affect a design

Vocabulary: object · group · alignment · layer order · duplicate

Retrieve previous learning

What distinguishes a vector shape from a bitmap screenshot?

Check: The vector source preserves editable geometric objects; a screenshot stores rendered pixels.

Learn the concept

A vector design often contains several separate objects. For an original wayfinding sign, a border, arrow and label can be moved independently. Selecting multiple objects lets a learner align their left edges or distribute their spacing; visually guessing at each position can produce inconsistent gaps.

Grouping makes objects move and scale together while retaining their individual geometry for later editing. It is different from flattening an image into one pixel layer. Duplicating a grouped motif can speed a repeated pattern, but check that each copy still meets the brief and that the group's scale does not distort text.

Layer order controls which object covers another. An arrow behind a solid border may appear to vanish even though it is still present. Inspect the object list, bring the arrow forward or adjust its position, then test at real display size and with a text label. A teacher should observe selection, grouping, saving and revision in the approved tool.

Worked model

Make three original objects: border, arrow and label.
Align their centres or edges using the tool rather than dragging by eye alone.
Group the border and arrow, duplicate the motif, then edit one component without flattening it.
Change layer order to resolve an overlap, save the editable source and inspect an export.

Guided practice

Two arrows drift apart when a sign is moved. What might grouping change?

Hint: Consider whether related objects move as one selection.

Check the guided answer

Group the related arrow and border so they move together while staying individually editable inside the group. Verify their spacing after moving and exporting.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

Teacher observes a learner create and revise an original vector artefact in an approved tool.
Saved source file shows editable paths or shapes, a clear design purpose and permission for any imported asset.
Learner demonstrates the change, compares exported and editable files, and explains one accessibility choice.

Find and correct a misconception

“Grouping converts all shapes into one bitmap.”

Correction: A vector group normally preserves editable child objects; raster export is a separate operation.

Extend and reflect

Build a repeated motif with duplicates and even spacing.

Guidance: Use alignment/distribution tools, then inspect whether the pattern remains readable and purposeful.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Manage several editable objects without flattening them. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Edit paths with anchors and control handles

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Distinguish an anchor from a control handle
Revise a curve deliberately without adding unnecessary points

Vocabulary: path · anchor · segment · control handle · curve

Retrieve previous learning

What is a vector shape?

Check: An editable geometric object described by paths and properties, not a fixed pixel grid.

Learn the concept

A vector path joins anchor points with straight or curved segments. A curved segment's control handles affect its direction and shape. Moving an anchor changes where the path passes; moving a handle changes how it bends near that anchor. These are different edits.

For a simple leaf outline, start with a few anchors at the tip and widest points. Pull handles to form a smooth contour, then compare left and right edges. Too many anchors make bumps and complicate later revision. Close the path when a fill is needed, and keep it open for a line such as a stem.

Zooming in helps refine a curve, but inspect the final size so tiny details do not become the whole design. Use original observations or a permitted reference and label the graphic if its meaning is not self-evident. Preserve the editable path in the source file.

Worked model

Place a small number of anchors around an original leaf silhouette.
Pull handles to shape each curved edge, keeping a smooth direction through the widest points.
Close the outline for a fill and leave a separate open stem path.
Compare at normal size, remove an unnecessary anchor and save both versions.

Guided practice

A curve has a sharp corner where a smooth leaf edge was intended. What edit should be tried?

Hint: Check the anchor and its handle directions.

Check the guided answer

Adjust the anchor's smooth-curve handles so the adjoining segments leave in compatible directions, or remove an unnecessary anchor. Then inspect at final size.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

Teacher observes a learner create and revise an original vector artefact in an approved tool.
Saved source file shows editable paths or shapes, a clear design purpose and permission for any imported asset.
Learner demonstrates the change, compares exported and editable files, and explains one accessibility choice.

Find and correct a misconception

“The smoothest curve always uses the most anchor points.”

Correction: Fewer carefully placed points often make a cleaner, easier-to-edit path.

Extend and reflect

Create two leaf silhouettes from the same anchors by altering handles only.

Guidance: Describe which curvature changed and why the overall tip and widest points stayed in place.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Distinguish an anchor from a control handle. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Develop a vector product from a design brief

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Translate a brief into a reproducible graphic
Test and revise the graphic with audience evidence

Vocabulary: brief · prototype · vector source · export · iteration

Retrieve previous learning

What is the benefit of keeping an editable vector path?

Check: Its shapes, points and properties can be revised without reconstructing a screenshot.

Learn the concept

A brief defines purpose, audience, medium and constraints. A fictional school map may need a clear library symbol that remains legible at 20 mm and on a phone. Record those requirements before drawing. A detailed illustration may fail where a simple icon succeeds.

Make a first vector prototype using a few deliberate shapes, alignment and a consistent colour scheme. Save an editable file; export a display copy in the format the destination accepts. Text may depend on installed fonts, so check the exported result on the intended device and keep a text label accessible elsewhere.

Test with a task: can a reader locate the library without being told which symbol to look for? Record a response, revise one feature and retest. Check permissions for every imported asset. A small peer test informs a decision but does not prove universal comprehension.

Worked model

Write three acceptance criteria for the fictional school-map icon.
Sketch two simple options and build one as editable paths.
Export at map size and ask two readers to locate the named room.
Record one revision, keep source and export files, then retest.

Guided practice

An icon looks clear at 500% zoom but vanishes on the map. What should change?

Hint: Test at intended size and simplify.

Check the guided answer

Enlarge or simplify important strokes and reduce tiny details, then export at the real map size and retest whether a reader recognises it.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

Teacher observes a learner create and revise an original vector artefact in an approved tool.
Saved source file shows editable paths or shapes, a clear design purpose and permission for any imported asset.
Learner demonstrates the change, compares exported and editable files, and explains one accessibility choice.

Find and correct a misconception

“A successful export proves the design meets its brief.”

Correction: Export confirms a file was produced; size, clarity, rights and audience task still need testing.

Extend and reflect

Plan a revision after two readers mistake the icon for a bookshop.

Guidance: Add context or a short label and retest the original wayfinding task.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Translate a brief into a reproducible graphic. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Read and edit a simple SVG description

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Identify shape attributes in SVG markup
Predict a change to fill, position or size

Vocabulary: SVG · markup · attribute · viewBox · fill

Retrieve previous learning

What does a vector source preserve that a screenshot may not?

Check: Individual editable shapes, paths and their properties.

Learn the concept

SVG is an XML-based vector format. A simple <rect> element names a rectangle and attributes such as x, y, width, height and fill set its geometry and colour. The viewBox defines the coordinate system that can scale to a displayed size. SVG is text, but editing it requires valid markup and care with unfamiliar files.

Consider <svg viewBox='0 0 100 100'><rect x='10' y='20' width='60' height='30' fill='blue'/></svg>. The rectangle begins at coordinate (10,20) and extends 60 units right and 30 down. Changing width to 70 changes its right edge; changing x to 20 moves the whole shape right.

An SVG can contain more than harmless shapes, including external references or scripts in some contexts. Work only with teacher-approved original files and do not paste untrusted markup into a school page. Give the graphic an accessible name or surrounding explanation when it conveys information.

Original 100 by 100 coordinate sketch

<svg viewBox='0 0 100 100'>
  <rect x='10' y='20' width='60' height='30' fill='blue'/>
</svg>

The rectangle is positioned in viewBox units and can scale with the SVG display size.

Worked model

Locate the viewBox and identify its 100 by 100 coordinate extent.
Read rect x, y, width and height separately.
Predict the right edge at x + width = 70 and bottom edge at y + height = 50.
Change one attribute in an approved local copy and compare predicted and rendered results.

Guided practice

If x changes from 10 to 20 while width stays 60, what happens?

Hint: x is the starting horizontal coordinate.

Check the guided answer

The rectangle moves ten coordinate units right. Its width remains 60, so its right edge moves from 70 to 80.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

Teacher observes a learner create and revise an original vector artefact in an approved tool.
Saved source file shows editable paths or shapes, a clear design purpose and permission for any imported asset.
Learner demonstrates the change, compares exported and editable files, and explains one accessibility choice.

Find and correct a misconception

“Changing x changes a rectangle's width.”

Correction: x changes horizontal position; width changes its horizontal extent.

Extend and reflect

Add a second original rectangle without changing the first.

Guidance: Use a separate element with its own attributes and predict any overlap from coordinates.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Identify shape attributes in SVG markup. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Choose bitmap or vector for a justified purpose

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Compare pixel and path representation
Choose a format using editing, scaling and content needs

Vocabulary: bitmap · pixel · vector · resolution · rasterisation

Retrieve previous learning

What does an SVG rect element describe?

Check: An editable geometric shape with coordinates, dimensions and styling attributes.

Learn the concept

A bitmap stores a grid of pixel values. A vector graphic stores shapes and paths that can be recalculated at different sizes. A photograph contains fine colour variation and is usually a bitmap; a simple logo or map icon is often better kept as vector source. A vector design can still be rasterised to pixels for display or export.

Enlarging a fixed small bitmap exposes its limited pixel grid; resampling can soften edges but cannot reliably invent the missing original detail. A vector circle can be rendered sharply at many sizes because its path is recalculated. This advantage does not mean vector is always smaller or more suitable: a very detailed scene can be complex as paths.

Choose using the task and destination. Keep an editable source file, then export a suitable display copy. Check the required format, final pixel dimensions, file size, transparency, licence and text alternative. A screenshot of a vector icon is a bitmap copy, so later path edits require the source.

Worked model

Name a photographic school garden image and a simple school-map icon.
Choose bitmap for the photograph's detailed colour and vector source for the icon's scalable paths.
Export both for a named page and inspect at intended dimensions.
Record which source files remain editable and which exported copies are rasterised.

Guided practice

A 32-pixel-wide icon looks jagged at 500 pixels. Would enlarging the file restore its original detail?

Hint: A bitmap has a fixed pixel sample.

Check the guided answer

No. Interpolation may smooth the enlarged bitmap, but cannot reconstruct the true missing detail. If an editable vector source exists, export it anew at the required size.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

Teacher observes a learner create and revise an original vector artefact in an approved tool.
Saved source file shows editable paths or shapes, a clear design purpose and permission for any imported asset.
Learner demonstrates the change, compares exported and editable files, and explains one accessibility choice.

Find and correct a misconception

“A picture of a vector logo is itself always a vector file.”

Correction: The export format determines its representation; a PNG screenshot of a vector design is a bitmap.

Extend and reflect

Compare two exports of the same icon at different dimensions.

Guidance: Inspect sharpness, file size and target display requirements without assuming one format is always superior.