SVG Basics

| <line><rect><text><g><path><filter><clipPath><mask><animate><linearGradient><etc>*

The Basics -- 

Simple Objects (lines, rectangles, text, ellipses, paths)

More examples: lines, rectangles, ellipses, paths, text

Putting SVG in a web page

Operations (grouping, translation, scaling, and rotation)

More examples: transformations


Fancier SVG Effects

Gradients

More examples: gradients, patterns, opacity

reusing objects

More examples: Grouping and reusing

 masks and clippaths

More examples: clipPaths and masks

Opera and IE (not Firefox):

filters: blurring and distortion

 following paths with text or animation


SMIL animation in SVG - Opera and IE (not Firefox)

More examples: SMIL examples

SVG with JavaScript - for IE, Firefox, and Opera

Dynamic SVG - IE, Firefox, and Opera


Passing Information Back and Forth between SVG and HTML

Embedding SVG in HTML documents

Calling Javascript functions in HTML documents from events in SVG DOM

Using Javascript functions in HTML to modify attributes of SVG objects

Using JavaScript functions in HTML to create SVG objects


More Examples


* Except as noted, all examples work in Internet Explorer (with ASV plugin), Firefox 1.5, Opera 9.0 Beta. Let me know if you discover otherwise. daviddotdaileyatsrudotedu