Education with SVG
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:
|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 |
|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.|
|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).|
|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.|
|This draws the vertical (because |
|The same as above, only horizontal (because |
|Another rectangle only this one's smaller and has equal |
|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 |
|The word "modern" written in red.|
|SVG doesn't have a special element for triangles but any stright sided shape can be drawn with a |
|The word "ART" written in big, yellow, transparent letters.|
|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).
"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.