Skip to main content
Create interactive lessons using any digital content including wikis with our free sister product
. Get it on the
Pages and Files
OUTLINE OF IDEAS FOR A COURSE IN SVG
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)
(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
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
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
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
How Opera ranks with its SVG implementation?
Concepts to explore in more depth:
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
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
(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
by J. David Eisenberg O'Reilly, 2002
Main basis for the tutorials that I've written
help on how to format text
Turn off "Getting Started"