SVG = Scalable Vector Graphics


Opera browser (best browser for viewing SVG animations)
XML editor (I used HTML Kit which is not really and XML editor but did the job)
Inkscape (free svg graphics editor)


SVG 1.1 is a W3C (standards body) recommendation from January 2003. Jeff Schiller has published an excellent chart which outlines the compatibility of various SVG implementations (web browsers and browser plugins) through the official SVG Test Suite


I've published examples of SVGs on my website that I've made as I've learnt how to do it, starting with very simple and gradually becoming more proficient. Remember to download Opera browser in order to view this webpage properly. If you load it in Firefox then none of the animations will work other images will be broken.

Tasks and Tutorials:

I have a number of tasks and tutorials on the SVG page of this wiki. These were all done using just a text editor (HTML Kit) and viewing them in Opera. There wasn't the opportunity to install inkscape in 2008 on the computers at my school but it will be installed for 2009.

Year 10 student feedback about what they thought of SVG is published on the SVG_student page of this wiki


It appeals to my sense of economy, that graphics can be represented by algorithms, which makes them small and elegant.

It appeals to my sense that web standards are important and this is an area in which MS falls down not just a little bit but totally. I became aware of this a few years ago by reading Jeffrey Zelman on web standards, the hard struggle to implement CSS, and also readingTim Berners-Lee on the history of the web.

It's mathematical - both simple co-ordinate systems and more complex maths such as bezier curves. I like the fact that art can be done with maths. I've only just scratched the surface of SMIL, Synchronised Multimedia Integration Language, but I can see more potential there.

Why is Opera doing it?

"If you’re wondering why Opera is putting resources into SVG? Well… As I’ve mentioned before, Opera 9 for mobile phones supports Opera Widgets, and since Opera Widgets are written using common web standards, such as HTML, CSS, JavaScript and SVG, you’ll be able to make complex and neat-looking mobile applications that will work on any phone with an Opera browser. Think of the possibilities."
- How Opera ranks with its SVG implementation?

Concepts to explore in more depth:

W3C standards

XML as an advance on HTML
Reference to the fact that Macromedia Flash and Illustrator use SVG (proprietary use)
Inkscape as a free, open source SVG graphics editor
Scalable - ability to scale without jaggies
SVG can be styled with CSS
Students like to work with images
Cool animations
Online maps can be made with a fraction of the bandwidth cf jpeg and png - use in GIS and with Google Maps
There are even voice controlled SVG games!!

Still to do:


Very interesting essays and SVG examples at this dev.opera page
(view these pages using Opera browser)

How to do photoshop-like effects in SVG
Using animateMotion in SVG - develop a solar system animation
Playing SVG Darts
Animating your SVG - nice example of how to make an SVG clock


SVG Essentials by J. David Eisenberg O'Reilly, 2002
Main basis for the tutorials that I've written