SVG Lesson Plans

#SVGmaker

SVG (Scalable Vector Graphics) is a web standard. Like HTML (Hyper-Text Markup Language), it is a markup language - "SVG is HTML for Graphics". A markup language is just text. These lessons create SVG markup with a simple text editor.

Coders use simple text editors because the files need to be saved without any formatting commands, i.e. for paragraphs, bold text, etc. Any text editor that can save the file as plain text will work, i.e. Notepad comes with Windows, on a Mac, Text Wrangler is a free app in the App Store. Note that some editors, like Notepad will want to default the file extension to .txt - make sure the file is not saved as: filename.svg.txt

The following lesson plans were developed while teaching 4th-8th graders coding with SVG. The students really enjoyed working on these lessons. They are free for any teacher, parent, or educator to use. It is a fun way to learn and/or teach coding.

The images are drawn on a grid (graph paper on the screen) to help the student visualize what is happening as they add new shapes to their SVG code. The grid is removed at the end of the lesson.

The SVG Lesson Plans below build on each other, so start at the beginning if you are a beginner.

Openclipart.org is a great source of Public Domain SVG images. An Owl Clock was submitted by user estea8968: https://openclipart.org/detail/247141/owl-clock

A functioning clock was added: https://openclipart.org/detail/247152/owl-clock

This exercise will demonstrate how a public domain image was modified to add the tick-tock head.

Download the student instructions as a PDF

Start here by downloading the code for the Owl Clock

This free reference is a good introduction to SVG teaching the basics of SVG interactively and showing the SVG syntax.

Available for free on the Apple iBookstore.

Also available as a free download from Catto Creations website http://www.cattocreations.com/ePub3.html.

More free eBooks available from that site as well, most illustrated in SVG. Some illustrations will be come future SVG Maker Projects.

This free eBook: STEAM Coded String Art builds on the Star Lesson Plan and will challenge more advanced students that find the star too easy.

Available for free on the Apple iBookstore.

View the Source

SVG, like HTML, is just text. Browsers will show you the text from the menu. Here's how:

Viewing the source and seeing how someone else did something is a great way to learn.

Watch It Draw

Watching an SVG draw is another great way to learn. Copy the javascript code from DrawShapes.js.txt and paste it into almost any SVG image, then watch it draw. Pretty cool and works with most (not all) SVG images.

SVG Lesson Plans - coding SVG images - at STEAMcoded.org

STEAMcoded.org STEAMcoded.org