SVG Lesson Plan

Lesson Plan:

Coding a Flower in SVG on a 800 by 800 grid

Objective:

Hands-on learning of SVG by drawing a flower with basic shapes; circles and ellipses.
Learning how to group elements and apply a default style to child elements.
Introduce transform attribute to rotate objects.

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 like Notepad on Windows, or Text Wrangler on a Mac.
Familiar with copy and paste shortcuts (ctrl-c and ctrl-v on windows and command-c and command-v on a Mac).
Ability to save file with a .svg extension.
Should be familiar with adding <circle> and <ellipse> elements in SVG

Resources:

http://steamcoded.org/lessons/grid800x800.svg
http://www.w3schools.com/svg/default.asp
https://www.w3.org/TR/SVG11/
Free eBook for the iPad Learn SVG Interactively, by Jay Nick

Lecture:

Explain how to group elements using the <g> element. Nodes within the group are called child elements and will default to the style of the group so that the style does not have to be added to each child node.

Explain the transform attribute and the rotate transformation. The rotate transformation takes 3 parameters; the degrees to rotate the object and the (x,y) point to rotate the object about. The degrees parameter can be positive or negative for a clockwise or counterclockwise rotation.

Procedure:

Have students get an SVG template with 800x800 grid from:
http://steamcoded.org/lessons/grid800x800.svg.txt
Copy the code and paste it into a text editor.
Save the file as Flower.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 each SVG element to their file.

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 circles and ellipses when creating SVG images.
Students should understand how grouping elements is useful when defining a common style.
Students should understand how to rotate an object using the transform attribute.

Additional Activity

Students can change the color the flower and change the angles of rotation.
Students can copy and paste the <script> from:
http://steamcoded.org/lessons/DrawShapes.js.txt,
then save the file, refresh, and watch it draw.

1:

Create an outer grouping <g> element, style: stroke:black;stroke-width:4px;

2:

Create the first inner grouping <g> element as a child element of the outer grouping created in step 1, style: fill:rgb(239,28,37);

3:

Draw an ellipse at (400,235), x-radius: 65, y-radius: 215 as a child of the inner grouping created in step 2, then create similar ellipses rotated every 36 degrees about point (400,400), which is the center of the grid.

4:

Create a second inner grouping <g> element as a child element of the outer grouping created in step 1, style: fill:rgb(249,148,30);

5:

Draw an ellipse at (400,320), x-radius: 80, y-radius: 180 as a child of the inner grouping created in step 4, then create similar ellipses rotated every 36 degrees about the center of the grid.

6:

Draw a circle around the center of the grid with a radius of 200, style: fill:yellow;

7:

Create a third inner grouping <g> element as a child element of the outer grouping created in step 1, style: fill:black;stroke:none;

8:

Draw a circle at (400,225), radius: 10 as a child of the inner grouping created in step 7, then create similar circles rotated every 30 degrees about the center of the grid.

9:

Create a fourth inner grouping <g> element as a child element of the outer grouping created in step 1, style: fill:rgb(58,181,75);

10:

Draw an ellipse at (400,325), x-radius: 35, y-radius: 75 as a child of the inner grouping created in step 9 and rotate it 36 degrees about the center of the grid.
then create similar ellipses rotated an additional 72 degrees about the center of the grid.

11:

Draw a circle around the center of the grid with a radius of 60, style: fill:rgb(0,174,242);

1:

2:

-- Step 3 ellipses go here --

</g>
</g>

3:

4:

</g>

-- Step 5 ellipses go here --

</g>
</g>

5:

6:

7:

</g>

</g>

-- Step 8 circles go here --

</g>
</g>

8:

9:

</g>

</g>

</g>

-- Step 10 ellipses go here --

</g>
</g>

10:

11: