Learning objective
Vector Graphics
Vector Graphics & Scalable Design
1
2
3
4
5
6
Learn to create resolution-independent graphics using scalable shapes, paths, nodes, Bezier curves, and Boolean vector operations.
Basic Shapes & Stacking
Create simple vector graphics by adding geometric shapes, changing fill and stroke colors, and arranging stacking order.
Let's Go!
Learn
Vector graphics are built from scalable shapes rather than pixels. Each shape has properties like fill color, outline stroke width, and stacking order. Moving a shape "Bring Forward" or "Send Backward" changes which shape sits on top.
Layers Palette
5 Layersโ ฟForeground Camp
โ ฟMountain Range
โ ฟPassing Clouds
โ ฟSun
โ ฟSky Background
Try it yourself
Build a Robot Face
๐ Open a practice space
Or try locally: โ๏ธ Inkscape (free)
๐ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
๐ฏ Task Success Criteria (Rubric)
Foundation
Identifies basic shape tools but struggles to change colors or arrangement.
Developing
Adds shapes and changes fill color with guidance.
Secure (Goal)
Independently adds shapes, sets fill/stroke properties, and changes stacking order (Bring Forward/Send Backward).
Mastery
Confidently creates composite designs using multiple stacked vector shapes.
๐ What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Basic Shapes & Stacking includes:
- Core Deliverable: Build a Robot Face
- Target Quality: Independently adds shapes, sets fill/stroke properties, and changes stacking order (Bring Forward/Send Backward).
- Excellence & Polish: Confidently creates composite designs using multiple stacked vector shapes.
๐
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
โญSelf-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: See Think Wonder
Achievement pathway
- Foundation: Identifies basic shape tools but struggles to change colors or arrangement.
- Developing: Adds shapes and changes fill color with guidance.
- Secure: Independently adds shapes, sets fill/stroke properties, and changes stacking order (Bring Forward/Send Backward).
- Mastering: Confidently creates composite designs using multiple stacked vector shapes.
Curriculum links
Curriculum strand: LC.01.B.3.6
Outcome: VG.01.A.1 โ Create simple vector graphics by adding geometric shapes, changing fill and stroke colors, and arranging stacking order.
PYP: Form ยท Digital shapes allow us to construct visual representations using scalable mathematical objects.
Learner profile: Inquirer
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 2: Combining & Grouping Shapes
Complete the previous learning check to unlock this next level.
Combining & Grouping Shapes
Group multiple vector objects into single composite elements and use grid snapping for precise alignment.
Learning objective
Understand how to select multiple vector objects, group them together, and align them using grid snapping.
Let's Go!
Learn
When you build a complex object like a house or tree out of multiple shapes, grouping them links them into a single object. This means you can move, resize, or rotate the entire group together without messing up the relative positions of the individual parts.
Layers Palette
5 Layersโ ฟForeground Camp
โ ฟMountain Range
โ ฟPassing Clouds
โ ฟSun
โ ฟSky Background
Try it yourself
Group a House Icon
๐ Open a practice space
Or try locally: โ๏ธ Inkscape (free)
๐ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
๐ฏ Task Success Criteria (Rubric)
Foundation
Selects single shapes but needs support to multi-select and group.
Developing
Selects multiple shapes and groups them with assistance.
Secure (Goal)
Independently multi-selects vector shapes, groups them into single objects, and uses grid snapping for alignment.
Mastery
Creates modular icon libraries by grouping and nesting shape collections efficiently.
๐ What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Combining & Grouping Shapes includes:
- Core Deliverable: Group a House Icon
- Target Quality: Independently multi-selects vector shapes, groups them into single objects, and uses grid snapping for alignment.
- Excellence & Polish: Creates modular icon libraries by grouping and nesting shape collections efficiently.
๐
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
โญSelf-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: Zoom In
Achievement pathway
- Foundation: Selects single shapes but needs support to multi-select and group.
- Developing: Selects multiple shapes and groups them with assistance.
- Secure: Independently multi-selects vector shapes, groups them into single objects, and uses grid snapping for alignment.
- Mastering: Creates modular icon libraries by grouping and nesting shape collections efficiently.
Curriculum links
Curriculum strand: LC.01.B.3.6
Outcome: VG.01.B.2 โ Group multiple vector objects into single composite elements and use grid snapping for precise alignment.
PYP: Function ยท Grouping simple shapes allows us to build complex, reusable visual icons.
Learner profile: Communicator
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 3: Path Node Editing
Complete the previous learning check to unlock this next level.
Path Node Editing
Modify shape outlines by selecting, moving, adding, and deleting vector nodes/vertices.
Learning objective
Understand how to use the Direct Selection tool to edit path nodes and reshape vector objects.
Let's Go!
Learn
Every vector line or shape is defined by mathematical points called nodes (or vertices) connected by path segments. By switching to the Node / Direct Selection tool, you can grab individual nodes and drag them, or double-click a line to add new nodes, giving you complete control over the shape outline.
Layers Palette
5 Layersโ ฟForeground Camp
โ ฟMountain Range
โ ฟPassing Clouds
โ ฟSun
โ ฟSky Background
Try it yourself
Custom Leaf Vector
๐ Open a practice space
Or try locally: โ๏ธ Inkscape (free)
๐ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
๐ฏ Task Success Criteria (Rubric)
Foundation
Recognizes nodes on a path but struggles to move individual vertices.
Developing
Moves existing nodes with guidance to reshape objects.
Secure (Goal)
Independently uses the node editing tool to select, drag, add, and delete nodes to customize vector paths.
Mastery
Masterfully reshapes basic primitives into organic, detailed vector illustrations using node editing.
๐ What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Path Node Editing includes:
- Core Deliverable: Custom Leaf Vector
- Target Quality: Independently uses the node editing tool to select, drag, add, and delete nodes to customize vector paths.
- Excellence & Polish: Masterfully reshapes basic primitives into organic, detailed vector illustrations using node editing.
๐
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
โญSelf-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: Before After Slider
Achievement pathway
- Foundation: Recognizes nodes on a path but struggles to move individual vertices.
- Developing: Moves existing nodes with guidance to reshape objects.
- Secure: Independently uses the node editing tool to select, drag, add, and delete nodes to customize vector paths.
- Mastering: Masterfully reshapes basic primitives into organic, detailed vector illustrations using node editing.
Curriculum links
Curriculum strand: LC.02.B.3.6
Outcome: VG.02.A.1 โ Modify shape outlines by selecting, moving, adding, and deleting vector nodes/vertices.
PYP: Change ยท Vector shapes are defined by connected points called nodes that determine their geometric outline.
Learner profile: Thinker
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 4: Pen Tool & Bezier Curves
Complete the previous learning check to unlock this next level.
Pen Tool & Bezier Curves
Draw custom vector paths with the Pen tool and manipulate Bezier curve handles to create smooth curved lines.
Learning objective
Understand how to place anchor points and adjust Bezier control handles to create smooth curved paths.
Let's Go!
Learn
The Pen tool is the fundamental tool of professional vector graphics. Clicking creates straight anchor points, while clicking and dragging pulls out Bezier control handles. These handles dictate the direction and curvature of the path entering and leaving each node.
Layers Palette
5 Layersโ ฟForeground Camp
โ ฟMountain Range
โ ฟPassing Clouds
โ ฟSun
โ ฟSky Background
Try it yourself
Trace a Guitar Silhouette
๐ Open a practice space
Or try locally: โ๏ธ Inkscape (free)
๐ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
๐ฏ Task Success Criteria (Rubric)
Foundation
Draws straight line segments with Pen tool but struggles with curved handles.
Developing
Creates curved paths with guidance on handle direction.
Secure (Goal)
Independently places anchor points and adjusts Bezier handles to construct smooth, accurate custom vector curves.
Mastery
Flawlessly traces complex logo outlines using minimal anchor points and balanced Bezier handles.
๐ What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Pen Tool & Bezier Curves includes:
- Core Deliverable: Trace a Guitar Silhouette
- Target Quality: Independently places anchor points and adjusts Bezier handles to construct smooth, accurate custom vector curves.
- Excellence & Polish: Flawlessly traces complex logo outlines using minimal anchor points and balanced Bezier handles.
๐
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
โญSelf-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: Split Screen Simulator
Achievement pathway
- Foundation: Draws straight line segments with Pen tool but struggles with curved handles.
- Developing: Creates curved paths with guidance on handle direction.
- Secure: Independently places anchor points and adjusts Bezier handles to construct smooth, accurate custom vector curves.
- Mastering: Flawlessly traces complex logo outlines using minimal anchor points and balanced Bezier handles.
Curriculum links
Curriculum strand: LC.02.B.3.6
Outcome: VG.02.B.2 โ Draw custom vector paths with the Pen tool and manipulate Bezier curve handles to create smooth curved lines.
PYP: Connection ยท Bezier curves use mathematical control handles to define smooth, continuous curved lines in space.
Learner profile: Principled
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 5: Boolean Operations & Path Alignment
Complete the previous learning check to unlock this next level.
Boolean Operations & Path Alignment
Combine overlapping vector shapes using Boolean path operations (Union, Difference, Intersection) and align paths precisely.
Learning objective
Understand how to apply Boolean operations (Union, Difference, Intersection) to combine overlapping vector paths.
Let's Go!
Learn
Boolean operations allow you to join or cut shapes using mathematical set logic: Union combines shapes into one; Difference subtracts the top shape from the bottom shape; Intersection keeps only where they overlap. This is much cleaner than erasing pixels!
Layers Palette
5 Layersโ ฟForeground Camp
โ ฟMountain Range
โ ฟPassing Clouds
โ ฟSun
โ ฟSky Background
Try it yourself
Create a Crescent Moon & Keyhole
๐ Open a practice space
Or try locally: โ๏ธ Inkscape (free)
๐ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
๐ฏ Task Success Criteria (Rubric)
Foundation
Identifies Boolean tools but struggles to predict the resulting combined shape.
Developing
Applies Union or Difference operations with step-by-step guidance.
Secure (Goal)
Independently applies Union, Difference, Intersection, and Exclusion operations to craft custom composite shapes.
Mastery
Expertly designs intricate brand logos and icons using multi-step Boolean path construction.
๐ What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for Boolean Operations & Path Alignment includes:
- Core Deliverable: Create a Crescent Moon & Keyhole
- Target Quality: Independently applies Union, Difference, Intersection, and Exclusion operations to craft custom composite shapes.
- Excellence & Polish: Expertly designs intricate brand logos and icons using multi-step Boolean path construction.
๐
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
โญSelf-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: ClassroomWalkthrough
Achievement pathway
- Foundation: Identifies Boolean tools but struggles to predict the resulting combined shape.
- Developing: Applies Union or Difference operations with step-by-step guidance.
- Secure: Independently applies Union, Difference, Intersection, and Exclusion operations to craft custom composite shapes.
- Mastering: Expertly designs intricate brand logos and icons using multi-step Boolean path construction.
Curriculum links
Curriculum strand: LC.03.B.3.6
Outcome: VG.03.A.1 โ Combine overlapping vector shapes using Boolean path operations (Union, Difference, Intersection) and align paths precisely.
PYP: Perspective ยท Combining shapes through mathematical logic allows us to design complex graphic symbols efficiently.
Learner profile: Knowledgeable
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow
Locked level
Level 6: SVG Export & Resolution Independence
Complete the previous learning check to unlock this next level.
SVG Export & Resolution Independence
Evaluate vector resolution independence across zoom levels, convert raster images to vectors via tracing, and export clean SVG/EPS files.
Learning objective
Understand vector resolution independence, perform image tracing on raster graphics, and export clean SVG/EPS files.
Let's Go!
Learn
Unlike pixel-based raster images (PNG, JPG) that become pixelated when enlarged, vector graphics (SVG, EPS) store mathematical equations for every path. This means a vector logo can be scaled to the size of a skyscraper with crystal-clear edges and small file sizes.
Layers Palette
5 Layersโ ฟForeground Camp
โ ฟMountain Range
โ ฟPassing Clouds
โ ฟSun
โ ฟSky Background
Try it yourself
Vector Logo Export & Trace
๐ Open a practice space
Or try locally: โ๏ธ Inkscape (free)
๐ Student Project GuideSuccess Criteria & WAGOLL (What A Good One Looks Like)
๐ฏ Task Success Criteria (Rubric)
Foundation
Understands vectors scale well but struggles to explain why or export proper file formats.
Developing
Traces raster images and exports SVG files with teacher support.
Secure (Goal)
Independently explains vector resolution independence, converts raster images to vectors using auto-trace, and exports optimized SVG files.
Mastery
Critically evaluates vector optimization, removes redundant nodes for lightweight SVG web deployment, and manages licensing.
๐ What A Good One Looks Like (WAGOLL)
Exemplar Standard
A top-tier student project for SVG Export & Resolution Independence includes:
- Core Deliverable: Vector Logo Export & Trace
- Target Quality: Independently explains vector resolution independence, converts raster images to vectors using auto-trace, and exports optimized SVG files.
- Excellence & Polish: Critically evaluates vector optimization, removes redundant nodes for lightweight SVG web deployment, and manages licensing.
๐
Save to Your Website Portfolio:
When you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
โญSelf-Assessment: How confident do you feel with this skill?
Reflect
Learning check
Teacher setup, curriculum links and progress descriptors
Spark support
Routine: Zoom In
Achievement pathway
- Foundation: Understands vectors scale well but struggles to explain why or export proper file formats.
- Developing: Traces raster images and exports SVG files with teacher support.
- Secure: Independently explains vector resolution independence, converts raster images to vectors using auto-trace, and exports optimized SVG files.
- Mastering: Critically evaluates vector optimization, removes redundant nodes for lightweight SVG web deployment, and manages licensing.
Curriculum links
Curriculum strand: LC.03.B.3.2
Outcome: VG.03.B.2 โ Evaluate vector resolution independence across zoom levels, convert raster images to vectors via tracing, and export clean SVG/EPS files.
PYP: Reflection ยท Resolution-independent vector files allow graphics to scale from smartwatch screens to stadium billboards without quality loss.
Learner profile: Reflective
Competency tags
Gate support
Accessibility alternative:
Teacher override: allow