Business section logoTechnology section logo

Education with SVG

Contents page

SVG (scalable vector graphics) would seem to lend itself to educational applications for a variety of reasons. Below this paragraph you should see the "modern ART" SVG (if you can't see this, your browser can't display SVG's - goto the links page to see where you can download viewers). Let's look at the code the computer uses to remember this (SVG's describe pictures using ASCII code, rather like web pages). Right click (or the equivalent for Macs, if you're using one) on the "modern ART" SVG below. A menu should appear. Click on the option which says "View SVG source" or "View Source" or something similar to see the code for this picture (you will be able to return to this, "modern ART" isn't the bottom of the page, by closing the new window or changing back to this one the normal way).

You will see that this doesn't take very much code. If you've ever opened another graphic format (e.g gif or jpg) in a text editor, you probably saw lots of gibberish. This is because SVG uses ASCII code while most other graphics formats are binary. Also formats like gif and jpg are bitmaps, they store the picture like a mozaik with (usually) lots of (usually) very small colored, square tiles (pixels). All they do is remember the color of each pixel (the one in the top left corner is cyan, the one to the right of it cyan, the one to the right of that is cyan etc.). A bitmat graphic 300 pixels wide by 250 pixels high (the size at which the modern Art picture is designed to be displayed) will have 75000 pixels. By contrast, SVG is a vector graphics format. This means that it arranges various colored shapes (and sometimes photos, text etc.) which can overlap and/or go over the edge. Then it remembers something like: big cyan rectangle at the back, black vertical line in the middle etc. Well you've seen the actual code! If you can read English reasonably well, you'll be able to see how this correlates with the actual picture. Not convinced, let's see what each line does:

<?xml version="1.0"?>
<svg width="300" height="250" xmlns="">
Tells the computer that this is an SVG and that it should be 300 pixels wide and 250 pixels high (this is a bit of a simplification). The xmlns bit is required for Firefox using native SVG support.
<title>Modern Art</title>This will be displayed in the web browser's title bar, if the SVG is displayed separately. It should also be possible to list SVG's on search engines.
<desc>A simple picture to illustrate how easy it is to do simple svg's</desc>A description of the picture for the visually impaired (this should also be displayed in search engines and searchable by them although AFAIK it hasn't been done as of April 2004).
<rect x="0" y="0" width="300" height="250" fill="cyan"/>It's good to have a background. For this we simply have a rectangle the same size as the picture with it's top left corner in the top left corner (the coordinates of which are 0,0). It will be filled with the color cyan.
<line x1="150" y1="0" x2="150" y2="250" stroke="black"/>This draws the vertical (because x1 and x2 are the same) black line. As lines don't have fills, we have to specify the stroke color.
<line x1="0" y1="125" x2="300" y2="125" stroke="red"/>The same as above, only horizontal (because y1 and y2 are the same) and red.
<rect x="50" y="37.5" width="50" height="50" fill="red" stroke="yellow" stroke-width="5" transform="rotate(45,75,62.5)"/>Another rectangle only this one's smaller and has equal height and width values, making it a square. It's turned into a diamond by rotating 45° about its center (coordinates: 75,62.5). Both fill and stroke colors are specified and it has wider than normal (2 pixels) strokes.
<circle cx="225" cy="62.5" r="50" style="fill:blue;stroke:magenta;stroke-width:10"/>This draws a circle with a radius of 50 pixels, centered at (225,62.5). To save typing (and memory) its fill, stroke and stroke-width are specified using a style attribute.
<text x="30" y="200" fill="red" font-size="24">modern</text>The word "modern" written in red.
<polygon points="160,130 160,240 290,185" style="fill:green;stroke:white;stroke-width:8"/>SVG doesn't have a special element for triangles but any stright sided shape can be drawn with a polygon element. This one has three pairs of coordinates in its points attribute so it draws a triangle.
<text x="70" y="150" style="fill:yellow;font-size:72;opacity:0.5">ART</text>The word "ART" written in big, yellow, transparent letters.
</svg>This simply indicates the end of the SVG.

The point is that it doesn't take a rocket scientist to type in the "modern ART" SVG code (or something similar) and get a picture. It's also pretty obvious how to change the code to add, remove and modify elements (e.g how would you change the background color or turn the triangle into an octogon?). It should be apparent that this code utilizes several mathematical principals like coordinates (although the Y axis is upside down), angles and fractions. You can specify colors using hexadecimal numbers as well (this uses numbers in base 16 and relies on the way red, green and blue light can be combined to make pretty well any color).

If you're more familiar with computers, you will have noticed that SVG is a form of XML. This is a rapidly expanding family of formats which will become important in the future. Hence SVG can be used to teach general principals of XML. In case you're wondering, it is possible to generate SVG using XSLT. You may also have noticed that the format of the style attribute is basically CSS (cascading style sheets). It's possible to include style elements in SVG to specify styles that are used repeatedly or even reference an external CSS file. This means that SVG can be used to teach CSS. Javascript can also be used in SVG and this probably provides a fun way to teach Javascript (as you can have elements that change color when clicked on etc.) which is itself similar to other programming languages like C++ and Perl. As SVG uses ASCII code, it's easy to generate SVG's from most programming languages. Microsoft's next operating system, "Longhorn" will use a graphics format similar to SVG although there's some speculations that they may end up using actual SVG.

"But nobody likes modern art!" you say. "Can we have natural looking pictures with animation and interactivity?"

Yes you can! You can have curvy lines, gradients (color and/or opacity changes across the object), filters (all sorts of complicated effects), animation and interactivity. You can even have SVG's interacting with other web page components, such as forms. The code to do this gets more complicated. I didn't say SVG was simple, I said that you could do simple SVG's. This means that it's good for mixed ability classes as the less gifted students (and aspiring modern artists) can be doing patterns with circles and rectangles while the more gifted students are doing animated, interactive, realistic fairies.

You're students will want to do the fancy stuff but aren't that smart? Perhaps you're underrating them (sometimes students who seem less gifted find the simple stuff boring and will respond well to a challenge - get fed up with doing urealistic boxy robots and take the effort to learn how to do realistic aliens in perspective). However you can design complicated objects and have your students paste them into their work (they may observe how the complicated things are done and learn to modify them and create similar things).

"I don't want to mess around with all this computer stuff. Can I use WYSIWYG programs to design SVG's?"

Yes you can. Newer versions of Corel Draw and Adobe Illustrator can export SVG. There's also a free open source program, Sodipodi.

"If you have an SVG produced by a WYSIWYG program, can you look at the code and alter it?"


"I've tried editing pictures with things like Photoshop and it's very complicated. You have to carefully draw arround all the object you want to move, then bits of the background cling to it, it leaves a hole where it was and if it's transparent, you still see the original backgroud through it. Do you have this sort of hassle with SVG?"

No. This problem is because bitmaps just remember pictures as colored squares. With SVG you only have to select the shapes the object you want to move is made out of (probably far fewer than the pixels in a bitmap). Bits of the background won't cling to it, even if it has very wavy edges, sticking out bits and is blury. If it's transparent, you will see the new background through it. You will probably be left with at least a half way decent background in the old possition, large objects will almost certainly continue behind where your object was.

There's probably no end of things you could do with SVG, in a wide variety of academic disciplines. For example, you can design your own fonts in SVG, for writing obscure languages, use it for an interactive photo album or write computer programs that generate SVG fractals.

Valid XHTML 1.0!