SVG Lesson Plan

Lesson Plan:

Coding a Countdown Calendar in SVG

Objective:

Hands-on learning of SVG by a simple day calendar. How to add a margin to an SVG image. How to style and position text. And, introduces how to use Google Fonts in an SVG image.
The required Javascipt is copy and pasted. Students are not required to understand it for this lesson.

Lab Time:

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

Age range:

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

Requirements:

Familiar with a simple text editor like Notepad on Windows, Text Wrangler on a Mac, or Text on a Chromebook
Familiar with copy and paste shortcuts (ctrl-c and ctrl-v on Windows and Chromebooks, command-c and command-v on a Mac).
Ability to save file with a .svg extension.

Resources:

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

Lecture:

Introduce the <text> element and how to use styles: font-size, font-weight, font-variant, & text-anchor
Demonstrate how to use Google Fonts, copy and pasting sample code for the selected font

Procedure:

Give the students the instructions on pages 4-5.
Students create an SVG element with a viewBox="0 0 510 510" in the text editor and use the translate transform to provide a 5px margin around their 500x500 SVG image.
Save the file as CountdownCalendar.svg then open in a browser. Keep the text editor and browser windows open.
Save and refresh the browser regularly to see if errors were introduced and what effect the code had.

Take Away:

Students should understand how to add a margin to an SVG image.
Students should get a feel for the <text> element and using Google fonts.
Students get a peek at some javascript making a simple change to variables.

Additional Activity

Students can color and format (style) the SVG elements.
Add openclipart.org images using the SVG <image> element.

1:

Create an SVG image 500x500.
Copy the first 3 lines from http://steamcoded.org/lessons/grid500x500.svg.txt

2:

Add an ending svg tag: </svg>

3:

Add a rectangle starting at (0,0) with a width and height of 500 and a corner radius of 20
<rect x="0" y="0" width="500" height="500" rx="20"

style="fill:white;stroke:black;stroke-width:4px;" />

4:

Make a 5px margin around the rectangle by increasing the viewBox to "0 0 510 510",
then add a group element around the rectangle to move it over and down 5px.
<g transform="translate(5,5)">

</g>

5:

Move the style of the <rect> to the group element, remove it from the <rect> element
<g transform="translate(5,5)" style="fill:white;stroke:black;stroke-width:4px;">

Add elements inside the group the rectangle is in.

6:

Draw a line from 0 to 500px, 130px down from top
<path d="M0,130L500,130" />

7:

Select a font to use for text from https://fonts.google.com

1. To select a font, click on the red plus sign, then

2. Click on the black bar at the bottom of the screen, then

3. Click on @import in the middle of the window then copy the 3 lines of text

4. Paste the style information near the top, but inside the <svg> element

5. Then, copy the font-family style and append it to the group style from step 5

6. Append text-anchor:middle; to the group style as well

Note: font-sizes below are picked based on the Roboto font, adjust as needed for your font. You may need to adjust the y attribute as well

8:

Add a text element centered at (250,185), font-size:60px
<text id="month" x="250" y="185" style="fill:black;font-size:60px;">December</text>

9:

Add a text element centered at (250,470), font-size:350px
<text id="day" x="250" y="470" style="fill:navy;font-size:350px;">25</text>

10:

Add a text element centered at (250,90), font-size:72px
<text id="daysLeft" x="250" y="90" style="fill:red;stroke:black;

font-size:72px;font-variant:small-caps;">?? Days until</text>

11:

Copy the javascript from http://steamcoded.org/lessons/CountdownCalendar.js.txt
and paste into the SVG image near the top, either above or below the <style> element

12:

You can select any date as the default by changing the variables in the code -
Look for 'var month=12' and 'var day=25' in the <script> element and change them

13:

You can also select any date by appending parameters to the URL, for example
CoundownCalendar.svg?month=2&day=14

14:

Decorate your calendar by adding images from https://openclipart.org
Add an <image> element and give it attributes x, y, width, and height (similar to the rectangle element)
Then add attribute xlink:href="" inserting the link to the openclipart SVG image as the value of the attribute (inside the quotation marks).

1:

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

2:

</svg>

3:

4:

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<rect x="0" y="0" width="500" height="500" rx="20"

style="fill:white;stroke:black;stroke-width:4px;" />

</g>
</svg>

5:

6:

7:

@import 'https://fonts.googleapis.com/css?family=Roboto';
</style>

<g transform="translate(5,5)" style="fill:white;

stroke:black;stroke-width:4px;font-family:'Roboto',sans-serif;text-anchor:middle;">

8:

<text id="month" x="250" y="185" style="fill:black;font-size:60px;">December</text>

9:

10:

<text id="daysLeft" x="250" y="90" style="fill:red;stroke:black;

font-size:72px;font-variant:small-caps;">?? Days until</text>

11:

javascript is here (not shown)
]]>
</script>

12:

var strEventDate;
var month = 12;
var day = 25;

13:

http://steamcoded.org/lessons/CoundownCalendar.svg?month=2&day=14

14:

<image x="10" y="135" width="80" height="100"

xlink:href="https://openclipart.org/download/188775/ChristmasTree.svg" />