Introduction

SVG stands for Scalable Vector Graphics. It is used to define two-dimensional vector-based graphics using XML. Vector graphics are basic geometric shapes (lines, circles, rectangles, etc.) that are described by numbers. This is an alternative to raster (or bitmap) technology which is defined by indiviual points (or pixels). SVG graphics can be manipulated by CSS and JavaScript.

What You Should Already Know

To get the most out of this guide, it is best to have a basic understanding of the following technologies:

• CSS
• HTML
• XML

Benefits

Vector based graphics offer several benefits over raster graphics:

• Scalable: SVG defines graphics that can scale to any size without loss of detail or blurriness. With most people accessing web pages from multiple different devices with different screen sizes and resolutions, maintaining scalability and responsive pages are more important than ever.
• Text-Based: SVG defines graphics using XML. XML is text based and therefore can be easily edited by any text editor. In addition, text-based languages can be searched, indexed, scripted, and compressed.
• Animatable: Every element and attribute in SVG can be animated.
• Lightweight: SVG graphics are considered "lightweight" as compared to raster graphics. Entire shapes can be defined by a single line of text whereas raster graphics needs 2-dimensional grid to represent each color of the shape.

Vector or Raster?

Both vector graphics and raster graphics can be used to display images, but each has strengths and weaknesses. In short:

• Vector Graphics are best at describing simple shapes like lines, circles, rectangles, etc. Also, SVG is better at scaling images without losing image quality. Can be difficult to represent photo-like graphics.
• Raster Graphics are best at describing photos or photo-like graphics, but file sizes are large and do not scale well.

Creating SVG

Although SVG images can be created with any text editor, but it can be more convenient to create SVG images with a vector drawing program. Please refer to the SVG Tools section for information about some vector drawing programs.

What about HTML5 Canvas?

While both Canvas and SVG can be used to create graphics, they are very different and each has their own purpose. Canvas is an immediate mode drawing surface whereas SVG is a retained mode scene graph. This means that Canvas is a lower level API than SVG, giving the developer more control and speed at the cost of more code and complexity. SVG is a higher level API, which lets the developer quickly draw shapes, but at the cost of fewer features and reduced speed. In addition, SVG is a resolution-independent vector API, while canvas is a resolution-dependent bitmap API.

SVG Examples

The following examples are drawn using the SVG support in the browser:

SVG Statistics

• SVG was developed by the World Wide Web Consortium (W3C)
• SVG was first proposed in 1999 and became a candidate recommentation in August, 2000
• SVG's First release (1.0) was September 4, 2001
• SVG is supported to some extent by all major modern browsers
• SVG's File Extension is '.svg' or '.svgz'
• SVG's MIME type is 'image/svg+xml'