You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
This tutorial will help get you started using SVG.
SVG is similar to Adobe's proprietary Flash technology, but it is a text-based open Web standard instead of a closed binary format. It is explicitly designed to work with other web standards such as CSS, DOM, and SMIL.
- 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
- More samples (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
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.