This tutorial will help get you started using SVG.
SVG images and their related behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.
Compared to classic bitmapped image formats such as JPEG or PNG, SVG-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without needing a graphical editor to do so. With proper libraries, SVG files can even be localized on-the-fly.
SVG is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
- SVG element reference
- Details about each SVG element.
- SVG attribute reference
- Details about each SVG attribute.
- SVG DOM interface reference
- Applying SVG effects to HTML content
- 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
- SVG as an image
- SVG animation with SMIL
- SVG art gallery
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
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.