Vector Graphics
Learn to create resolution-independent graphics using scalable shapes, paths, nodes, Bezier curves, and Boolean vector operations.
Create simple vector graphics by adding geometric shapes, changing fill and stroke colors, and arranging stacking order.
Learning objective
Let's Go!
Routine: See Think Wonder
Look at these two shapes overlapping. How does changing their stacking order alter the picture?
Teacher note: Facilitate the See Think Wonder routine for 2–3 minutes. Encourage students to connect the prompt to Form (Digital shapes allow us to construct visual representations using scalable mathematical objects.).
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. In computing, digital shapes allow us to construct visual representations using scalable mathematical objects. As you explore the interactive Drawing Layers Simulator below, focus on how to independently adds shapes, sets fill/stroke properties, and changes stacking order (Bring Forward/Send Backward).
Maintain comfortable breathing space (margins) so eye movement flows naturally across the headline.
Apply Simulator Skills • Try it yourself
🚀 Open a practice space
Or try locally: ✏️ Inkscape (free)
Identifies basic shape tools but struggles to change colors or arrangement.
Adds shapes and changes fill color with guidance.
Independently adds shapes, sets fill/stroke properties, and changes stacking order (Bring Forward/Send Backward).
Confidently creates composite designs using multiple stacked vector shapes.
⭐ Mastering Standard
⭐ Mastering StandardWhen you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
Reflect
Learning check
Routine: See Think Wonder
Teacher notes: Facilitate the See Think Wonder routine for 2–3 minutes. Encourage students to connect the prompt to Form (Digital shapes allow us to construct visual representations using scalable mathematical objects.).
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
Accessibility alternative: Students may verbally explain or point to the correct answer for "What setting changes the color inside a vector shape?" with a teacher or teaching assistant.
Teacher override: allow
Locked level
Complete the previous learning check to unlock this next level.
Group multiple vector objects into single composite elements and use grid snapping for precise alignment.
Learning objective
Let's Go!
Routine: Zoom In
Notice how selecting a grouped object selects all its shapes at once! Why is grouping useful?
Teacher note: Facilitate the Zoom In routine for 2–3 minutes. Encourage students to connect the prompt to Function (Grouping simple shapes allows us to build complex, reusable visual icons.).
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. In computing, grouping simple shapes allows us to build complex, reusable visual icons. As you explore the interactive Website Builder Simulator below, focus on how to independently multi-selects vector shapes, groups them into single objects, and uses grid snapping for alignment.
Designed to share student ideas, projects, and community action with the world.
Apply Simulator Skills • Try it yourself
🚀 Open a practice space
Or try locally: ✏️ Inkscape (free)
Selects single shapes but needs support to multi-select and group.
Selects multiple shapes and groups them with assistance.
Independently multi-selects vector shapes, groups them into single objects, and uses grid snapping for alignment.
Creates modular icon libraries by grouping and nesting shape collections efficiently.
⭐ Mastering Standard⭐ Mastering StandardWhen you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
Reflect
Learning check
Routine: Zoom In
Teacher notes: Facilitate the Zoom In routine for 2–3 minutes. Encourage students to connect the prompt to Function (Grouping simple shapes allows us to build complex, reusable visual icons.).
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
Accessibility alternative: Students may verbally explain or point to the correct answer for "Why would you group multiple vector shapes together?" with a teacher or teaching assistant.
Teacher override: allow
Locked level
Complete the previous learning check to unlock this next level.
Modify shape outlines by selecting, moving, adding, and deleting vector nodes/vertices.
Learning objective
Let's Go!
Routine: Before After Slider
Drag the slider to see how moving four corner nodes transforms a simple square into a star silhouette.
Teacher note: Facilitate the Before After Slider routine for 2–3 minutes. Encourage students to connect the prompt to Change (Vector shapes are defined by connected points called nodes that determine their geometric outline.).
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.
Apply Simulator Skills • Try it yourself
🚀 Open a practice space
Or try locally: ✏️ Inkscape (free)
Recognizes nodes on a path but struggles to move individual vertices.
Moves existing nodes with guidance to reshape objects.
Independently uses the node editing tool to select, drag, add, and delete nodes to customize vector paths.
Masterfully reshapes basic primitives into organic, detailed vector illustrations using node editing.
⭐ Mastering Standard⭐ Mastering StandardWhen you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
Reflect
Learning check
Routine: Before After Slider
Teacher notes: Facilitate the Before After Slider routine for 2–3 minutes. Encourage students to connect the prompt to Change (Vector shapes are defined by connected points called nodes that determine their geometric outline.).
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
Accessibility alternative: Students may verbally explain or point to the correct answer for "What are the editable points called that define the shape of a vector path?" with a teacher or teaching assistant.
Teacher override: allow
Locked level
Complete the previous learning check to unlock this next level.
Draw custom vector paths with the Pen tool and manipulate Bezier curve handles to create smooth curved lines.
Learning objective
Let's Go!
Routine: Split Screen Simulator
Compare drawing with freehand pixels vs drawing precise Bezier curves with the Pen tool.
Teacher note: Facilitate the Split Screen Simulator routine for 2–3 minutes. Encourage students to connect the prompt to Connection (Bezier curves use mathematical control handles to define smooth, continuous curved lines in space.).
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.
Apply Simulator Skills • Try it yourself
🚀 Open a practice space
Or try locally: ✏️ Inkscape (free)
Draws straight line segments with Pen tool but struggles with curved handles.
Creates curved paths with guidance on handle direction.
Independently places anchor points and adjusts Bezier handles to construct smooth, accurate custom vector curves.
Flawlessly traces complex logo outlines using minimal anchor points and balanced Bezier handles.
⭐ Mastering Standard⭐ Mastering StandardWhen you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
Reflect
Learning check
Routine: Split Screen Simulator
Teacher notes: Facilitate the Split Screen Simulator routine for 2–3 minutes. Encourage students to connect the prompt to Connection (Bezier curves use mathematical control handles to define smooth, continuous curved lines in space.).
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
Accessibility alternative: Students may verbally explain or point to the correct answer for "What do Bezier control handles adjust on a vector path node?" with a teacher or teaching assistant.
Teacher override: allow
Locked level
Complete the previous learning check to unlock this next level.
Combine overlapping vector shapes using Boolean path operations (Union, Difference, Intersection) and align paths precisely.
Learning objective
Let's Go!
Routine: ClassroomWalkthrough
Watch how combining two circles with the Difference tool instantly cuts out a crescent moon shape!
Teacher note: Facilitate the ClassroomWalkthrough routine for 2–3 minutes. Encourage students to connect the prompt to Perspective (Combining shapes through mathematical logic allows us to design complex graphic symbols efficiently.).
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! In computing, combining shapes through mathematical logic allows us to design complex graphic symbols efficiently. As you explore the interactive Shortcut Simulator below, focus on how to independently applies Union, Difference, Intersection, and Exclusion operations to craft custom composite shapes.
Apply Simulator Skills • Try it yourself
🚀 Open a practice space
Or try locally: ✏️ Inkscape (free)
Identifies Boolean tools but struggles to predict the resulting combined shape.
Applies Union or Difference operations with step-by-step guidance.
Independently applies Union, Difference, Intersection, and Exclusion operations to craft custom composite shapes.
Expertly designs intricate brand logos and icons using multi-step Boolean path construction.
⭐ Mastering Standard⭐ Mastering StandardWhen you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
Reflect
Learning check
Routine: ClassroomWalkthrough
Teacher notes: Facilitate the ClassroomWalkthrough routine for 2–3 minutes. Encourage students to connect the prompt to Perspective (Combining shapes through mathematical logic allows us to design complex graphic symbols efficiently.).
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
Accessibility alternative: Students may verbally explain or point to the correct answer for "Which Boolean operation subtracts the top shape from the bottom shape to cut a hole?" with a teacher or teaching assistant.
Teacher override: allow
Locked level
Complete the previous learning check to unlock this next level.
Evaluate vector resolution independence across zoom levels, convert raster images to vectors via tracing, and export clean SVG/EPS files.
Learning objective
Let's Go!
Routine: Zoom In
Zoom in 1000% on a PNG image versus an SVG vector graphic. What happens to the edges?
Teacher note: Facilitate the Zoom In routine for 2–3 minutes. Encourage students to connect the prompt to Reflection (Resolution-independent vector files allow graphics to scale from smartwatch screens to stadium billboards without quality loss.).
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.
Apply Simulator Skills • Try it yourself
🚀 Open a practice space
Or try locally: ✏️ Inkscape (free)
Understands vectors scale well but struggles to explain why or export proper file formats.
Traces raster images and exports SVG files with teacher support.
Independently explains vector resolution independence, converts raster images to vectors using auto-trace, and exports optimized SVG files.
Critically evaluates vector optimization, removes redundant nodes for lightweight SVG web deployment, and manages licensing.
⭐ Mastering Standard⭐ Mastering StandardWhen you finish creating your project in your software, copy the share link or take a screenshot and publish it onto your student portfolio website!
Reflect
Learning check
Routine: Zoom In
Teacher notes: Facilitate the Zoom In routine for 2–3 minutes. Encourage students to connect the prompt to Reflection (Resolution-independent vector files allow graphics to scale from smartwatch screens to stadium billboards without quality loss.).
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
Accessibility alternative: Students may verbally explain or point to the correct answer for "Why are SVG vector graphics preferred for company logos and web icons?" with a teacher or teaching assistant.
Teacher override: allow
