Getting Started
This tutorial will help get you started using SVG.
This tutorial will help get you started using SVG.
Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based vector graphics. SVG is essentially to graphics what HTML is to text.
SVG is a text-based open Web standard. It is explicitly designed to work with other web standards such as CSS, DOM, and SMIL.
SVG was developed by the World Wide Web consortium(W3C) since 1999.
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.
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
- SVG as an image
- SVG animation with SMIL
- SVG art gallery
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
- jVectorMap (interactive maps for data visualization)
- JointJS (JavaScript diagramming library)
