Lesson Plan:
Coding a Monkey in SVG on a 600 by 600 grid
Objective:
Hands-on learning of SVG by drawing a monkey with basic shapes;
circles and ellipses.
Introduce path element commands, M & Q, to draw a curve
and CSS property: stroke-linecap.
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
Lecture:
SVG elements consist of tagnames, attributes, and their values in the form
<tagname attribute="value"> The style attribute consists of CSS name:value pairs separated by a semi-colon.
Each name is separated from its value with a colon. For example, style="name:value;name:value;"
Like SVG, CSS is a web standard for styling web technologies including SVG and HTML.
Discuss how to draw a curve with the path command. The path d attribute consists
of a list of commands, i.e. M (moveto), L (lineto), Q (Quadratic Bezier Curve), etc.
To draw the curve in this lesson students should understand 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 using just 3 points.
In the instructions below, the starting point is 160,360 - so M (moveto) start.
The Q (curve) takes 2 points, first the control point 300,470, then the end point 440,360
The path command should be of the form <path d="MstartQcontrol,end" /> so the result
is <path d="M160,360Q300,470,440,360" />
Procedure:
Have students get an SVG template with 600x600 grid from:
http://steamcoded.org/lessons/numberedgrid600x600.svg.txt
Copy the code and paste it into a text editor.
Save the file as Monkey.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 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.
Additional Activity
Students can modify the y value of the control point of the curve to create a frown
or bigger/smaller smile. Or change other values to distort the smile and have fun.
To get started copy the code from the
numberedgrid600x600.svg.txt link on the lessons page.
Paste into the text editor and save the file as Monkey.svg then open the file in a browser.
In the editor, add the SVG elements where indicated in the SVG code.
1:
Draw an ellipse at (70,225), x-radius: 55, y-radius: 90 with class="c1"
2:
Draw an ellipse at (75,227), x-radius: 40, y-radius: 64 with class="c2"
3:
Draw an ellipse at (530,225), x-radius: 55, y-radius: 90 with class="c1"
4:
Draw an ellipse at (525,227), x-radius: 40, y-radius: 64 with class="c2"
5:
Draw an ellipse at (300,190), x-radius: 205, y-radius: 180 with class="c1"
6:
Draw an ellipse at (300,360), x-radius: 230, y-radius: 168 with class="c1"
7:
Draw an ellipse at (300,355), x-radius: 205, y-radius: 145 with class="c2"
8:
Draw an ellipse at (220,190), x-radius: 95, y-radius: 110 with class="c2"
9:
Draw an ellipse at (380,190), x-radius: 95, y-radius: 110 with class="c2"
10:
Draw a circle at (232,215), radius: 58 with style="fill:white;stroke:none;"
11:
Draw an ellipse at (232,215), x-radius: 38, y-radius: 45 with style="fill:black;"
12:
Draw a circle at (236,191), radius: 15 with style="fill:white;"
13:
Draw a circle at (370,215), radius: 58 with style="fill:white;stroke:none;"
14:
Draw an ellipse at (368,215), x-radius: 38, y-radius: 45 with style="fill:black;"
15:
Draw a circle at (374,191), radius: 15 with style="fill:white;"
16:
Draw a curve start (160,360), control (300,470), end (440,360)
<path d="M160,360Q300,470,440,360"
class="s1" style="stroke-width:18px;stroke-linecap:round;" />
17:
Add a <text> element at (300,580) to name your Monkey
<text x="300" y="580" class="title">Monkey</text>
Common mistakes are missing double quote marks around attribute values,
missing space between attributes, missing the start < and ending /> symbols,
and typing rbg instead of rgb. The rgb() function stands for red,green,blue and
the numbers represent the amount of each color. Values of each color range from 0 to 255.
1:
<ellipse cx="70" cy="225" rx="55" ry="90" class="c1" />
2:
<ellipse cx="75" cy="227" rx="40" ry="64" class="c2" />
3:
<ellipse cx="530" cy="225" rx="55" ry="90" class="c1" />
4:
<ellipse cx="525" cy="227" rx="40" ry="64" class="c2" />
5:
<ellipse cx="300" cy="190" rx="205" ry="180" class="c1" />
6:
<ellipse cx="300" cy="360" rx="230" ry="168" class="c1" />
7:
<ellipse cx="300" cy="355" rx="205" ry="145" class="c2" />
8:
<ellipse cx="220" cy="190" rx="95" ry="110" class="c2" />
9:
<ellipse cx="380" cy="190" rx="95" ry="110" class="c2" />
10:
<circle cx="232" cy="215" r="58" style="fill:white;stroke:none;" />
11:
<ellipse cx="232" cy="215" rx="38" ry="45" style="fill:black;" />
12:
<circle cx="236" cy="191" r="15" style="fill:white;" />
13:
<circle cx="370" cy="215" r="58" style="fill:white;stroke:none;" />
14:
<ellipse cx="368" cy="215" rx="38" ry="45" style="fill:black;" />
15:
<circle cx="374" cy="191" r="15" style="fill:white;" />
16:
<path d="M160,360Q300,470,440,360"
class="s1" style="stroke-width:18px;stroke-linecap:round;" />
17:
<text x="300" y="580" class="title">Monkey</text>
