This tutorial will help get you started using SVG.
Scalable Vector Graphics (SVG) is an XML {{Glossary("markup language")}} for describing two-dimensional {{Glossary("vector graphics")}}. SVG is essentially to graphics what {{Glossary("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) and that it is {{Glossary("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.
Documentation
- SVG element reference
- Get details about each SVG element.
- SVG attribute reference
- Get details about each SVG attribute.
- SVG DOM interface reference
- Get details about the whole SVG DOM API.
- Enhance HTML content
- SVG works together with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Use SVG to enhance a regular HTML page or web application.
- SVG in Mozilla
- Notes and information on how SVG is implemented in Mozilla.
Community
- View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
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 (SVG Samples croczilla.com, carto.net)
Animation and interactions
Like HTML, SVG has a document model (DOM), 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 {{Glossary("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)