This tutorial will help get you started using SVG.
Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. Basically SVG is to graphics what XHTML is to text.
SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a W3C recommendation (i.e., a standard for all intents and purposes) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL.
- SVG element reference
- Get details about each SVG element.
- SVG attribute reference
- Get details about each SVG attribute.
- SVG DOM API reference
- Get details about the whole SVG DOM API.
- Enhance HTML content
- SVG in Mozilla
- Notes and information on how SVG is implemented in Mozilla.
- Google Maps (route overlay) & Docs (spreadsheet charting)
- SVG bubble menus
- SVG authoring guidelines
- An overview of the Mozilla SVG Project
- Frequently asked questions regarding SVG and Mozilla
- Slides and demos from talk on SVG and Mozilla at SVG Open 2009
- SVG as an image
- SVG animation with SMIL
- Lion, Butterfly & Tiger
- SVG art gallery
- More samples (SVG Samples croczilla.com, carto.net)
- Animation and interactions
- Some real eye-candy SVG at svg-wow.org
- Firefox extension (Grafox) to add a subset of SMIL animation support
- Interactive photos manipulation
- HTML transformations using SVG's
- Animated art
- Mapping, charting, games & 3D experiments
- While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.
- An SVG Tetris & Connect 4
- Find the State game
- US popuplation map
- 3D box & 3D boxes
- jVectorMap (interactive maps for data visualization)