Teaching coding with SVG

This article presents the idea of teaching coding with svg, or at least some concepts of coding. The concepts you can use svg for are:

The importance of a specific syntax
How writing just text code can transform easily to something very visible
Small changes in code can be significant for the result

To express this even more briefly, teaching coding with svg teaches precision.

What is svg?

Svg stands for Scalable Vector Graphics. You can create svg images with a graphics program, but there is more to it. You can read and write svg images with code, using any text editor at hand. The image can be seen with most Internet browsers in use today. So, you won’t need any expensive tools!

Why use svg to teach coding

Good aspects of teaching coding with svg:

The tools are free
You will instantly see something visual, instead of numbers running on the screen
If you make a mistake there is often an output, not just an error message
You can include mathematics
You don’t have to be online

And the drawbacks of teaching coding with svg:

You can’t produce interactive programs with svg, so you will need other methods, too.
Creating animations can be bit tricky
You may need some math

You may have noticed that I listed math on both lists. It depends on how much your students already know math and how fluent they are with it. Of course, you can create a lot of pictures with very basic level math, but you will get a wider range of possibilities if you know your Pythagoras, for example.

What you need

A text editor, like Notepad. I like to use Notepad++ which is free to use. Don’t use softwares that are for paper documents like Microsoft Word or Google Docs.
An Internet browser, like Google Chrome.

Note that although this idea should work with any system, I have only tested it with Windows.

Let’s start!

To try it out, let’s make a simple picture with circles. We will start with a very basic black circle. Type or copy this code into your text editor:

<!DOCTYPE html>
<html>
<body>
<svg height=”400″ width=”400″>
<circle cx=”200″ cy=”200″ r=”10″ fill=”black” />
</svg>
</body>
</html>

The lines of code with gray color are creating the web page where the picture will be. They should not be touched if we want to change the picture. The black text creates the picture.

<svg height=”400″ width=”400″> tells that the picture starts here, and the size of it is 400 pixels vertically and horizontally.

<circle cx=”200″ cy=”200″ r=”10″ fill=”black” /> This line creates a circle, whose center is at (200,200), in the center of the picture. Its radius is 10 pixels and the color is black.

Now it’s time to save the file. When saving, use the extension .html meaning that you could name the file circles.html or something like that.

How to see the picture?

Now that you have saved the file in .html format, go to the file explorer, open the folder you saved it into and just double click. If everything is done correctly you should see the picture in your favorite browser. Of course, it’s not very artistic at this point but we can build more objects into it.

Improving the picture

Now that you have been able to open and see the picture in your browser, it’s time to add more into it. In this example, we are creating several different sized circles to create an illusion. The new lines will be added above the previous circle(s). That way, the smaller circles will be drawn last, on top of the larger circles.

<circle cx=”190″ cy=”200″ r=”20″ fill=”#303060″ />

Here, we have created another circle that has a radius twice as much as the first one. The center has been moved so that these two circles touch on the edge. Note that only the x-coordinate has changed.

Color codes

We are using here a number to represent the color. That way, we can get a smoother result. The coding system is called RGB, red, green, and blue. The color black would be #000000, so there is zero color.

In this color #303060, there is some red and green and a little bit more blue.

Right now, your code should look like this:

Next steps

In the next steps, we’ll move forward in the same direction. For every line, let’s

Recreace cx by 10
Increase r by 10
In the color code, add 1 to every non-zero number.

<circle cx=”160″ cy=”200″ r=”50″ fill=”#606090″ />

<circle cx=”170″ cy=”200″ r=”40″ fill=”#505080″ />

<circle cx=”180″ cy=”200″ r=”30″ fill=”#404070″ />

Note that these lines are in order they appear in the final file; so if you create them one by one, the bottom line will be the first.

Changing direction

From here, let’s go downwards. That means the x-coordinate cx will stay the same as the previous one, but the y-coordinate cy will change. At the same time, the radius will grow again.

<circle cx=”160″ cy=”210″ r=”60″ fill=”#7070A0″ />

You might ask yourself, what does this letter A mean in the color code? These codes use the hexadecimal system. In addition to digits 0-9, there are letters A-F so that A=10, B=11, … , F=15. So the value for blue A0 is a bit larger than the previous value 90.

More steps to this direction

Again, these two steps are in order they appear in the final file. So, we will increase cy by 10 and the radius, too. Also the color changes a bit every time.

<circle cx=”160″ cy=”230″ r=”80″ fill=”#9090C0″ />

<circle cx=”160″ cy=”220″ r=”70″ fill=”#8080B0″ />

The last turn

Let’s move back horizontally now and make the last couple of circles. Moving back means that the cx will increase.

<circle cx=”180″ cy=”230″ r=”100″ fill=”#B0B0E0″ />

<circle cx=”170″ cy=”230″ r=”90″ fill=”#A0A0D0″ />

And the illusion is ready!

And the illusion should look something like this:

Proceeding with students

You know your student’s best and are the one to decide how to present this idea to them. It may be necessary to give the starting code to them and go through the steps of creating the next circle from the previous one together. There is always three things to change:

X-coordinate called cx OR y-coordinate called cy. The one that changes changes by 10.
Radius called r. It’s growing by 10 every time
The color. Changing color gradually is easier with codes, but if you think it’s too much for your students, you can always use color names. List of colors’ names can be found online, for example here.

Let some creative freedom if someone wants to build something a bit different from this idea. After all, coding needs to be creative.

What else can you do with svg?

With svg, you can do a variety of things, like complicated pictures and animation. Here are some very basic shapes:

Rectangle:

<rect width=”100″ height=”200″ x=”50″ y=”50″ fill=”red”/>

Coordinates x and y are for the starting corner of the rectangle.

Line:

<line x1=”0″ y1=”400″ x2=”100″ y2=”20″ stroke=”#C05FF3″ stroke-width=”3″/>

Here are two pairs of coordinates: x1 and y1 for the starting point and x2 and y2 for the ending point. The stroke means color of the line in this context. The color is selected using online colorpicker. Stroke-width is the width of the line.

Polygon:

<polygon points=”250,113 150,113 100,200 150,287 250,287 300,200″ stroke=”#CB9D34″ stroke-width=”5″ fill=”#F5DA9C” />

Polygon is a bit different from the shapes presented before, as here all the individual coordinates are not in quotation marks. Instead, they are all listed together and separated by a spacebar. This command will draw a regular hexagon with darker yellow border and light yellow fill.

Path:

<path d=”M 200,200 C 300,400 600,400 600,200″ stroke=”#8AF57A” stroke-width=”6″ fill=”none”/>

The svg paths are a bit complicated and I won’t be covering all of them in this article. However, it’s good to know that those exist and there are several types of paths to produce curved lines.

In this example, there are a starting point (200,200) and an ending point (600,200). The two points in the middle are points that these curves bend towards but usually won’t touch.

Troubleshooting

If the code doesn’t work, check that

Quotation marks are on the right places
Lines with graphic objects start with < and end with />
So called html tags, that is <html>, </body> etc are properly placed
The file is saved after fixing the errors

Benefits of teaching coding with svg

My idea here is that even if svg is not a real programming language meaning that you can’t create a real, interactive program with it, there is a lot to learn.

The basic connection with the written code and the visual output
Method of trial and error when changing the code and creating something new
Possibility to advance and get valuable skills; creating svg animations is an useful skill in web design industry.