SVG_course

OUTLINE OF IDEAS FOR A COURSE IN SVG
SVG = Scalable Vector Graphics

Requirements
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)

Information:
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:
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

Rationale:
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:
Inkscape Batik Javascript

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

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