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 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.
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)
Document Tags and Contributors
Tags:
Contributors to this page:
Tigt,
breckenedge,
chrisdavidmills,
durman,
rahulmahajan,
plidev,
rvighne,
Delapouite,
Dyvik,
mr_alien,
panych,
teoli,
Sole,
Jeremie,
ethertank,
Joshua-S,
bjorn_d,
jswisher,
Dholbert,
bwhmather,
fscholz,
sebmozilla,
Sheppy,
saneyuki,
dfrios,
Skierpage,
Jonathan_Watt,
Mickiboy,
Jeff Schiller,
George3,
MarkFinkle,
Amaltas,
Kohei,
kohei.yoshino,
Azer,
Nancyc,
Verruckt,
BijuGC,
Nickolay,
MarcDiethelm,
Federico,
Jorolo,
Jt,
Ptak82,
Takenbot,
Dria,
Tor,
Chbok,
DBaron,
gandalf,
Roc,
Taken,
bradipao,
Afri
Last updated by:
Tigt,