SVG Lesson Plan

Lesson Plan:

Coding a Car Scene in SVG on a 500 by 500 grid

Objective:

Hands-on learning of SVG by drawing a car scene with basic shapes; circles, ellipses, rectangles, and paths.
Learning how to group elements and apply a default style to child elements.
Introduce the stroke-dasharray style.

Lab Time:

Approximately 1.5 hours, 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>, <ellipse>, <rect>, <path> elements in SVG
Should be familiar with adding style attributes and the name:value pair syntax that specifies a property and its value.

Resources:

http://steamcoded.org/lessons/grid500x500.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 translate transformation. The translate transformation takes 2 parameters; the x and y offsets to move the object in the x and y directions. The x and y offsets can be positive or negative. When the transformation is an attribute of a group element, the translation transformation is applied to all child elements.

Explain the stroke-dasharray style property. It takes an array of values in the form, dash,gap,dash,gap,... and repeats as needed to stroke the object. Arrays should be an even number, 2,4,6,... elements, for expected results.

Procedure:

Have students get an SVG template with 500x500 grid from:
http://steamcoded.org/lessons/grid500x500.svg.txt
Copy the code and paste it into a text editor.
Save the file as Car.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, ellipses, rectangles, and lines when creating SVG images.
Students should understand how grouping elements is useful when defining a common style or transformation.
Students should understand how to move an object using the translate transformation.

Additional Activity

Students can change the colors and move objects arround.
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 a rectangle element, width: 500, height: 275 style: fill:blue;

2:

Create a circle element about (435,65), radius: 35
style: fill:yellow;stroke:yellow;stroke-width:50px;stroke-dasharray:4,4,4,20;

3:

Create a grouping <g> element, style: fill:none;stroke:black;stroke-width:2px;

4:

Create lines using the <path> element as a child element of step 3,
Moveto (175,100), Lineto (195,85), Lineto (210,100), Lineto(225,85), Lineto (250,100)

5:

Create more lines using the <path> element as a child element of step 3,
Moveto (225,50), Lineto (245,35), Lineto (260,50), Lineto(275,35), Lineto (300,50)

6:

Create a grouping <g> element with transform attribute: translate(175,275)

7:

Create 5 circle elements as child elements of step 6, Note: cx and cy default to 0
radius: 150, style: fill:red;
radius: 130, style: fill:orange;
radius: 110, style: fill:yellow;
radius: 90, style: fill:blue;
radius: 70, style: fill:green;

8:

Create a grouping <g> element, style: fill:white;

9:

Create 4 circle elements as child elements of step 7,
cx: 50, cy: 100, radius: 20
cx: 75, cy: 125, radius: 38
cx: 115, cy: 110, radius: 29
cx: 105, cy: 138, radius: 29

10:

Create a rectangle element, x: 0, y: 275, width: 500, height: 200, style: fill:gray;

11:

Create a grouping <g> element, style: fill:yellow;stroke:black;

12:

Create 4 rectangle elements as child elements of step 11,
x: 0, y: 350, width: 50, height: 25
x: 125, y: 350, width: 100, height: 25
x: 300, y: 350, width: 100, height: 25
x: 475, y: 350, width: 25, height: 25

13:

Create a grouping <g> element, style: fill:green;stroke:black;

14:

Create 2 elements as child elements of step 13,
rectangle x: 100, y: 250, width: 350, height: 100 rx: 25
ellipse cx: 275, cy: 250, rx: 125, ry: 75

15:

Create 3 elements,
ellipse cx: 275, cy: 250, rx: 110, ry: 60, style="fill:white;
rectangle x: 265, y: 179, width: 20, height: 85, style="fill:green;
rectangle x: 150, y: 250, width: 250, height: 85, style="fill:green;

16:

Create 4 circle elements,
cx: 190, cy: 350, radius: 40, style="fill:black;
cx: 360, cy: 350, radius: 40, style="fill:black;
cx: 190, cy: 350, radius: 20, style="fill:gray;
cx: 360, cy: 350, radius: 20, style="fill:gray;

17:

Create a grouping <g> element,
style: fill:black;stroke:black;stroke-width:60px;stroke-dasharray:1.5,1.5,1.5,20;

18:

Create 2 circle elements as child elements of step 17,
cx: 190, cy: 350, radius: 5
cx: 360, cy: 350, radius: 5

19:

Create a grouping <g> element, style: stroke:black;

20:

Create 5 elements as child elements of step 19,
ellipse cx: 448, cy: 282, rx: 7, ry: 12, style="fill:yellow;
rectangle x: 100, y: 300, width: 10, height: 15, rx: 5, style="fill:red;
rectangle x: 415, y: 300, width: 15, height: 10, rx: 5, style="fill:orange;
rectangle x: 95, y: 320, width: 30, height: 20, rx: 5, style="fill:gray;
rectangle x: 425, y: 320, width: 30, height: 20, rx: 5, style="fill:gray;

21:

Create a line using the <path>,
Moveto (125,250), Lineto (95,200), style: fill:black;stroke:black;stroke-width:2px;

22:

Create a circle element about (95,200), radius: 3, style: fill:black;

23:

Change the SVG viewBox height from 500 to 475

1:

2:

3:

-- Step 4 & 5 path elements go here --
</g>

4:

5:

6:

-- Step 7 circle elements go here --
</g>

7:

8:

-- Step 9 circle elements go here --
</g>

9:

10:

11:

-- Step 12 rectangle elements go here --
</g>

12:

13:

-- Step 14 elements go here --
</g>

14:

15:

16:

17:

-- Step 18 circle elements go here --
</g>

18:

19:

-- Step 20 elements go here --
</g>

20:

21:

22:

23: