SVG

Getting Started
This tutorial will help get you started using SVG.

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what HTML is to text.

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.

Documentation

SVG element reference: Details about each SVG element.
SVG attribute reference: Details about each SVG attribute.
SVG DOM interface reference: Details about the SVG DOM API, for interaction with JavaScript.
Applying SVG effects to HTML content: SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.

View All...

Community

View Mozilla forums...

Tools

SVG Test Suite
SVG Validator (Discontinued)
More Tools...
Other resources: XML, CSS, DOM, Canvas

Examples

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
SVG art gallery
More samples (carto.net)

Animation and interactions

Like HTML, SVG has a document model (DOM) and events, and is accessible from JavaScript. This allows developers to create rich animations and interactive images.

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 foreignObject

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.

Tetris
Connect 4
US population map
3D box & 3D boxes
jVectorMap (interactive maps for data visualization)
JointJS (JavaScript diagramming library)

SVG