SVG Lesson Plan

Lesson Plan:

Coding a Star in SVG on a 200 by 200 grid

Objective:

Hands-on learning of SVG by drawing a string art star. Use path element commands, M & L, to draw lines. Introduce <use> element referencing a group of path elements, then adding a transform attribute to rotate the object.

Lab Time:

Approximately 1 hour, not including Lecture time. Students should copy and paste lines, and then change the attribute values to greatly reduce typing time and typos.

Age range:

4-8th grades, or any age student unfamiliar with SVG

Requirements:

Familiar with a simple text editor
Familiar with copy and paste shortcuts
Ability to save file with a .svg extension.
Understanding of angles and degrees, rotation about a point.
Should be familiar with adding SVG elements and attributes

Resources:

http://steamcoded.org/lessons/grid200x200.svg
http://steamcoded.org/images/curve1.svg
http://steamcoded.org/images/curve2.svg
http://www.w3schools.com/svg/default.asp
https://www.w3.org/TR/SVG11/
Free eBook for iBooks: STEAM Coded String Art, by Jay Nick

Lecture:

This lesson will draw 10 straight lines in the upper left quadrant of the 200x200 grid using the path element. The resulting curve formed from the lines are grouped together with the group element with an id attribute of "s90".

Reinforce that a curve can be drawn with 3 points: starting and ending points of the curve and a control point not on the curve that controls it's shape. Demonstrate how a curve is drawn by using the resources for curve1 and curve2 above - which show how the curve is drawn using straight line segments from just 3 points.

The id attribute of the curve will allow the code to reference and reuse it with a <use> element. The group of path elements will be reused and rotated 90 degrees about the center of the grid (100,100) to fill the upper right quadrant. Then reused again and rotated 180 and 270 degrees about the center of the grid to fill all four quadrants.

All the elements added to the SVG at this point are contained in an outer group with an id attribute of "star". Next several <use> elements will be added referencing the "star" group and rotating each every 30 degrees, then every 15 degrees.

Procedure:

Have students get an SVG template with 200x200 grid from:
http://steamcoded.org/lessons/grid200x200.svg.txt
Copy the code and paste it into a text editor.
Save the file as star.svg then open in a browser. Keep the text editor and browser windows open.

Add SVG elements where indicated using the instructions on page 4 (see below). Important: Students should save the file and refresh the browser after adding a few SVG element to their file to make sure they don't have errors.

When complete, change the style attribute of the first <g> element from "display:initial" to "display:none" which hides the grid Then change the style style attribute of the second <g> element from "opacity:0.5" to "opacity:1"

Take Away:

Students should feel comfortable adding SVG elements, attributes and values when creating SVG images.
Students should understand that a Quadratic Bezier Curve can be drawn with 3 points, starting and ending points of the curve, and a control point not on the curve, but controls the curves shape.
Students should understand the <use> element and how it references another part of the code using an id attribute.
Students should understand how to rotate objects.

Additional Activity

Students can add more lines to the first grouping by adding lines every 5 pixels so there are twenty lines instead of 10. Challenge: add 3 more stars so there are 2 across and 2 down and color them with different colors.

1:

Append to the style attribute of the parent group:
<style="opacity:0.5;stroke:blue;stroke-width:0.5;"

2:

Create a group element <g> with id="star" as a child of the group in step 1.

3:

Create a group element <g> with id="s90" as a child of the "star" group

4:

Add these elements as children of the "s90" group
Create a path drawing a line from (0,100) to (100,100)
Create a path drawing a line from (10,100) to (100,90)
Create a path drawing a line from (20,100) to (100,80)
Create a path drawing a line from (30,100) to (100,70)
Create a path drawing a line from (40,100) to (100,60)
Create a path drawing a line from (50,100) to (100,50)
Create a path drawing a line from (60,100) to (100,40)
Create a path drawing a line from (70,100) to (100,30)
Create a path drawing a line from (80,100) to (100,20)
Create a path drawing a line from (90,100) to (100,10)
Create a path drawing a line from (100,100) to (100,0)

5:

Add these elements as children of the "star" group below the "s90" group
Create a <use> element referencing the "s90" group of elements, i.e. xlink:href="#s90"
and rotate it 90 degrees about (100,100)
Create a <use> element referencing "s90" and rotate it 180 degrees about (100,100)
Create a <use> element referencing "s90" and rotate it 270 degrees about (100,100)

6:

Add these elements below the "star" group
Create a <use> element referencing "star" and rotate it 30 degrees about (100,100)
Create a <use> element referencing "star" and rotate it 60 degrees about (100,100)

7:

Add <use> elements to rotate the star every 15 degrees, i.e. 15,30,45,60,75

8:

Add path commands to the "s90" grouping to draw lines every 5 units

1:

<g style="opacity:0.5;stroke:blue;stroke-width:0.5;">
  //insert SVG shapes here
 
</g>

2:

<g id="star">
 
</g>

3:

<g id="star">
  <g id="s90">
 
  </g>
</g>

4:

5:

6:

7:

8: