Fun with Scalable Vector Graphics

Scalable Vector Graphics has been hailed as The Next Big Thing in web graphics (sort of like PNG).

What is it? It’s a way to create graphics using XML syntax. That’s right: SVG allows you to create images out of text.

Advantages? First: smaller file sizes. Since the images are text-based rather than binary code, they’re smaller than bitmap-based images (GIF, JPEG, PNG).

Secondly, SVG has accessibility support built-in.

Thirdly, because these graphics are text, they’re also potentially searchable. In fact, the W3C offers a transformation tool to extract the text from an SVG image that could be used to create an SVG search engine.

Fourth: Again, because it is text, SVG files can be manipulated by DOM, CSS and JavaScript.

Furthermore, because they’re ?¢‚Ǩ‚Äù as the name says ?¢‚Ǩ‚Äù scalable and vector-based, you can resize them and retain image quality. Think of what that means: the same image could be used for computer screens, PDAs and printed materials.

What’s the problem? Well, unfortunately, Mozilla is the only browser providing native support for SVG. Even then, you have to download and install a special SVG-enabled version. Other browsers require a plug-in.

Still, SVG is pretty cool to use. Here’s how to get started.

1. Download and install Adobe’s or Corel’s SVG viewer.
2. Read up on the SVG specification from the W3C. Also check out the W3C SVG overview page.
3. Fire up your text editor. Notepad (Windows) or SimpleText (Mac) will do the job. Or download HTML-Kit (Windows only; highly recommended).

Not a big fan of learning new markup languages? Don’t sweat: Adobe Illustrator 10, CorelDRAW 11 and Jasc’s WebDraw will let you create SVG files.

For more on SVG

• SVG.org
• “SVG on the rise” by Dean Jackson (O’Reilly Network)
• Explore SVG
• “The Art is in the Code” by Eddie Traversa (WebReference.com)
• “Real-world SVG” by Jackson West (Builder.com)
• “Sneak Peek at SVG” by Steve Mulder (Web Monkey)
• XML.com Graphics Resource Center

Need even more resources? Search for SVG resources with Vivísmo.

UPDATE: Now you can create SVG files without knowing the language, and without having to shell out big bucks for a graphics program. You can use the free, open-source (though a smidge buggy) program Inkscape.