SVG Kickstart 1: Allow Myself To Introduce...Myself

by Jeff Schiller, 2005-06-10

Table of Contents

1. Introduction

"Scalable Vector Graphics" is a web standard put forth by the W3C. It is current in revision 1.1 with version 1.2 in draft form.

First things first: Why does the web need a new graphics format? Aren't the JPEG and PNG formats good enough? For many applications this is quite true, raster formats like JPEG and PNG work quite nicely to represent a picture by telling your computer the exact pixel patterns that need to be displayed to convey the graphical information. The difference with SVG is that an SVG document gives your computer instructions on how to create those pixel patterns that finally get displayed rather than the actual pixel patterns. In other words, SVG images are described in higher-level terms.

The benefits of this are not necessarily obvious, so I'll outline some of them:

An SVG image is perfectly displayed at any resolution/zoom level.(Expand)

An SVG image has semantics.(Expand)

An SVG image is generally smaller in size and can be compressed more effectively than raster images.(Expand)

An SVG image is declarative XML and can work with other XML grammars.(Expand)

An SVG image can be styled using CSS.(Expand)

One other VERY important point I should mention. The SVG spec is huge and it covers a lot of ground. In fact, one might say the advantages I've laid out above only skim the surface of what SVG is about. I only briefly mentioned the dynamic, interactive and scriptable nature of SVG above. This was intentional. These advanced features could be considered the flashy side of SVG while the above points could be considered the practical side of SVG. Either side of SVG could easily convince a web developer to begin investigating SVG. For my part, I have decided to focus on the practical side in the first few tutorials because the flashy side requires much more time investment, while the practical side can give web developers "instant" benefits TODAY.

Now that I've convinced you that SVG is a good thing for the internet, read on to learn how you can set up your Web Browser so that you can view and interact with SVG content.

Next: 2. Setting Up Your Browser>>>
codedread codedread