WWW FAQs: What is SVG?

2006-06-01: SVG, or Scalable Vector Graphics, is an open W3C standard for graphics on the web. "Vector graphics" means that SVG images are made up of lines, curves and other "smooth" elements, unlike "bitmap" formats such as GIF, JPEG or PNG. When you zoom in on a GIF, JPEG or PNG, it gets grainy and blocky - but when you zoom in on an SVG, it stays smooth.

While Flash and SVG can draw essentially the same things, there are important differences:

1. Flash is a proprietary format. Although some of the Flash "SWF" file format specification is available, there are restrictions on its use.

2. SVG is XML-based. Loosely speaking, that means it looks a lot like HTML, and can be edited by hand or easily output from any scripting language, such as PHP. Flash is a binary format, which makes generating it "on the fly" much more difficult - although tools to do that with PHP and other languages do exist.

3. Unfortunately, Firefox currently supports only a "technology preview" of SVG, and Internet Explorer doesn't yet support it at all as a standard feature. This is due in part to the complexity of the SVG specification.

Canvas is also an interesting option for those who wish to draw 2D graphics in web pages.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!