SVG - The Future is Now

Home > Build > Graphics

by Don Herion

(1) (2)

You've been reading about SVG for what seems like forever. It's been called Holy Grail of web graphic formats. A true liberation from the ubiquitous .gif and .jpeg. A paradigm shift from dumb graphics to smart graphics. Well, forever is here. The power to create .svg style web graphics has arrived. Sort of.

W3C to the Rescue - Finally
For those unfamiliar with SVG (scalable vector graphics) allow me to enlighten you. For years web designers wished, begged and pleaded for the kind of tools print designers have had for years. As you know, raster based web graphics have many pitfalls. The files are clumsy, usually large and unsuitable for printing. Responding to these complaints the W3C (World Wide Web Consortium) and it's member companies, such as Adobe, Macromedia, Netscape, Microsoft and others, joined to create a new graphic format that answers many Web designers prayers.

SVG in a Nutshell
Basically, SVG is to graphics as HTML is to a web page. SVG graphics are entirely code based. That's right. You can edit a SVG image in any text editor. There are many advantages to using code-based graphics. The first is they can be edited anywhere without the need for a graphic program. This does not mean you do not need a program like Photoshop to build your graphics. In fact, Photoshop 6.0 and Illustrator 9.0 can export SVG graphics. Second, SVG breaks the 216-color browser barrier once and for all. SVG supports millions of colors. There is also enhanced font support. For the first time businesses can present the same identity on the web as they do in print. The days of compromising corporate identity standards are gone.

Using vector graphics allows viewers to pan and zoom and never see a single pixel. For example, you can create a city map with the ability to zoom in as close as you like and maintain the same sharp quality. You can also have full control of transparency, gradients and even filter effects. Instead of designing both print and web graphics separately you can now create them only once. This means web pages will print as designed. And of course, because your graphics are code based, coexisting within HTML, they download faster than bitmaps. This will reduce strain on servers. SVG is also designed to integrate smoothly with XML (.SVG is in fact an application of XML), JavaScript, CGI, CSS and DOM (Document Object Model). As SVG graphics are based on XML search engines can index your graphics. Now one point of clarification. SVG is not going to replace complex images such as photographs.

Code Based Pictures
Below is an example of a SVG graphic:

<?xml version="1.0" encoding="iso-8859-1"?>
< !DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd>
<svg xml:space="preserve" width="250" height="100">
<rect style="fill:red;" width="200" height="75"/>
</svg>

This is about a simple a SVG as you are likely to create. A red rectangle 200 pixels wide and 75 pixels high. Here is the break down:

<?xml version="1.0" encoding="ISO-8859-1"?>

The first line establishes that everything that follows will be in XML.

!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd>

The second line provides a reference for the DTD or Document Type Definition. DTDs define how to form valid documents and structures.

<svg xml:space="preserve" width="300" height="300">

This line of code lays out the overall size of the SVG image - 250 pixels by 100 pixels. Every SVG file must be contained within the <svg> </svg> tags.

<rect style="fill:red;" width="200" height="75"/>
</svg>

This line of code describes the graphic and its overall size. There can be three types of elements; text, shapes and paths.

Continue to Part 2 - SVG