SVG Lesson Plans

Like any language, SVG has rules known as syntax. It also has terminology like elements, attributes, etc. The first 3 slides of this slide deck cover the absolute basic syntax and terminology. The remaining slides are useful when teaching a concept.

This is an introduction to SVG. Students code the basic SVG elements: rectangle, circle, ellipse, group, path, text, and image.

Each step includes the actual SVG code for the step as a student reference.

This is an introduction to SVG. The lesson plan includes information needed to introduce and get started coding SVG. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

The lesson uses the circle and ellipse shapes to draw a simple mouse on a 600x600 grid.

This lesson plan creates an Atom without animation of the electrons. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

The lesson introduces the student to grouping and rotating ellipse and circle elements..

View the lesson plan as a web page.

This lesson creates a fidget spinner with circles. A group of circles is rotated about the center of the image. The instructions include an optional section to animate the fidget spinner.

This lesson plan builds on the knowledge gained in the first lesson. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

The lesson introduces the path element and drawing a curve as the monkey is drawn on a 600x600 grid.

View the lesson plan as a web page.

This lesson plan builds on the knowledge gained in the first lesson. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

The lesson introduces the path element and drawing lines and curves as the frog is drawn on a 600x600 grid.

View the lesson plan as a web page.

This lesson plan builds on the knowledge gained in the previous lessons. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

This lesson will group elements and apply a default style to child elements. Also the transform attribute is used repeatedly to rotate objects.

View the lesson plan as a web page.

This lesson plan builds on the knowledge gained in the previous lessons. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

This lesson will group elements and apply a default style to child elements. Also introduces the stroke-dasharray style property.

View the lesson plan as a web page.

Can you code your way through the maze? This lesson reinforces drawing lines with the path commands.

The lesson focuses on the M (moveto) and L (lineto) path commands. Students are encouraged to Code their way through the maze using both absolute and relative path commands. More advanced students are challenged to round their turns through the maze with Bezier curves.

This lesson plan is under construction but the student instructions are available.

The lesson builds on previous lessons and assumes the student is comfortable with creating SVG elements with child elements and adding attributes to elements.

Students will learn to create a <clipPath> definition, then add a clip-path reference to the style attribute. The Panda is drawn on a 600x740 grid.

This lesson creates the Flag of the United States of America using official proportions. Students will learn how to calculate the correct size and position of each object.

The lesson uses a Polygon Star Maker to simplify creating a star symbol, which is reused to create the 50 stars. The stripes are created using the stroke-dasharray style in SVG.

This lesson introduces text. How to style and position it. How to use Google fonts to ensure online users get the same text experience.

The required Javascipt is copy and pasted. Students are not required to understand it for this lesson, but can modify variables in it to change the default date.

This lesson plan builds on the knowledge gained in the previous lessons. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

The lesson introduces the use element, transform attribute, and reusing objects as the star is drawn on a 200x200 grid.

View the lesson plan as a web page.

This lesson plan is under construction and will build on the knowledge gained in the Star lesson. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

The lesson introduces the symbol and clipPath elements, translate and scale transforms, and manipulating objects as the mask is drawn on a 400x400 grid.

View the lesson plan as a web page.

This lesson will draw 1 ellipse element and 2 circle elements on a 600x600 grid. The ellipse element will be reused and rotated every 5 degrees about it's center.

Create various images by changing the number of degrees to repeat the rotation, and change the x-radius of the ellipse to see its effect.

The lesson plan contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

View the lesson plan as a web page.

This lesson will animate the x-radius and y-radius of an ellipse that is reused and rotated every 5 degrees. Each reuse of the ellipse is given its own color.

This lesson reinforced a 7th grade math class on transformations: dilate, reflect, rotate, and translate.

Students code the image on the left on a grid with the origin in the center of the image.

Two rectangles are created, one rotated 45 degrees and translated, and another dilated by the square root of 2. These 2 rectangles are then reused, demonstrating how to rotate, reflect, and translate. A fractal is created demonstrating dilation.

The grid used here has the origin (0,0) in the center with the x-axis and y-axis scaled to +/- 400. Note: The y-axis of this grid is like normal graph paper with positive y going up. Normally SVG has positive y going down.

This lesson reinforced a 7th grade math class on transformations: dilate, reflect, rotate, and translate.

Students code the image on the left on a grid with the origin in the center of the image.

Seven circles are created demonstrating rotation. The circles are styled with a fill-opacity to allow the colors to show through.

The grid used here has the origin (0,0) in the center with the x-axis and y-axis scaled to +/- 400. Note: The y-axis of this grid is like normal graph paper with positive y going up. Normally SVG has positive y going down.

This lesson reinforced a 7th grade math class on transformations: dilate, reflect, rotate, and translate.

Students code the image on the left on a grid with the origin in the center of the image.

1 triangle is created, then dilated by 1/8 each time from 7/8 to 1/8 . The triangle is styled with a fill-opacity to allow the color to show through. The overlapping regions get darker as more the overlapping occurs.

The grid used here has the origin (0,0) in the center with the x-axis and y-axis scaled to +/- 400. Note: The y-axis of this grid is like normal graph paper with positive y going up. Normally SVG has positive y going down.

This lesson reinforced a 7th grade math class on transformations: dilate, reflect, rotate, and translate.

Students add transformation attributes to the tangram tiles to fit the tangram outline.

This lesson shows how to take a design and make it into a seamless pattern by reflecting it first on the x-axis, then the y-axis, then both axes.

Students see the pattern as it fills a rectangle. Then double and triple the rectangle size.

This lesson will draw 1 circle element on a 600x600 grid. The circle will be stroked with a dashed line. By calculating the circumference of the circle, the dashed line can be made to finish perfectly, creating even spacing all the way around the circle.
The circle element will be reused, reducing it's size each time using the scale transformation.

The lesson plan contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

View the lesson plan as a web page.

This lesson plan is under construction but the student instructions are available.

A template of a birthday card is obtained from openclipart.org, then modified for the type of greeting card the student wishes to make. Uses Google Fonts for text and openclipart images.

View the lesson plan as a web page.

This lesson plan is under construction but the student instructions are available.

First a simple heart symbol is created using 4 curves. The heart symbol used to create 3 hearts. Animation is added to 2 of the hearts. Text is added at the end.

View the lesson plan as a web page.

This lesson plan is under construction but the student instructions are available.

First a simple mandala is created with circle elements rotated every 15 degrees. Then a colored mandala is created using SVG masking and clipping techniques. And finally, the mandala is animated.

View the lesson plan as a web page.

This lesson plan uses Javascript to animate objects in sprite sheets. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

The lesson introduces Javascript to display frames of the sprite sheet in rapid succession to create the animation.

View the lesson plan as a web page.

This lesson plan creates an Yin Yang Symbol. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

The lesson demonstrate the use of the path Arc command.

View the lesson plan as a web page.

This lesson creates a Lotus Flower, then animates it. Key features include: 1) defining a petal symbol using path commands, 2) Introducing the CSS style fill-rule:evenodd, 3) rotation transformations, and 4) animating the rotation

Start by downloading the 600x400 grid, then follow the student instructions.

The lesson introduces the animateMotion and mpath elements which will move an object along a defined path.

View the lesson plan as a web page.

This lesson creates Waves, then animates it. Key features include: 1) defining a wave symbol using path commands, 2) Introducing the Quadratic Bezier 'T' command, 3) rotation transformations, and 4) animating the amplitude of the waves.

Start by downloading the 1000x1000 grid, then follow the student instructions.

The lesson introduces the animate element which will smoothly animated a defined path.

View the lesson plan as a web page.

This lesson plan creates an Atom with animation of the electrons. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

The lesson introduces the animateMotion and mpath elements which will move an object along a defined path.

View the lesson plan as a web page.

This lesson plan is under construction and will build on the knowledge gained in the Atom lesson. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

View the lesson plan as a web page.

This lesson plan is under construction and will build on the knowledge gained in the Atom lesson. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

This lesson plan is under construction and will reinforce the value of reusing objects. It also introduces students to the unicode character set for some added fun. It contains lecture notes, procedures, and resources followed by an instruction sheet for the students and an answer sheet to help find problems.

View the lesson plan as a web page.

This lesson plan is under construction and will showcase your work in an HTML web page. It is intended for students unfamiliar with HTML. HTML is a markup language like SVG and is very similar in syntax.

View the lesson plan as a web page.