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

Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. Basically SVG is to graphics what 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 for all intents and purposes) and that it is 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

SVG element reference
Get details about each SVG element.
SVG attribute reference
Get details about each SVG attribute.
SVG DOM API reference
Get details about the whole SVG DOM API.
Enhance HTML content
SVG works together with HTML, CSS and 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.
SVG animation with SMIL
How to animate SVG using SMIL.


Great image format
SVG is a vector graphics format. Vector graphics can be scaled without loss of image quality, while raster (bitmap) graphics cannot.
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.
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.

View All...


  • View Mozilla forums...

Related topics

XML, CSS, DOM, Canvas


HTML5 Documentation
HTMLAudio/Video Canvas WebGL SVG MathML WebForms AppCache Microformats SemanticTags
JavascriptStorage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus
CSSNewSelectors Typography Visual Effects

Tags (1)

Edit tags

Attachments (0)


Attach file