Introduction: A Promising Technology
One of the challenges facing the information architect today and into the future lies in reconciling their desire to create a usable, content-driven site with the vision of clients for a visually striking site. On today's web, fancy designs and usability can be mutually exclusive traits. Yet this may be one of many things that could change with the upcoming arrival of Scalable Vector Graphics (SVG). The features of SVG afford information architects more flexibility in their current designs and suggest new ways to deal with the changing face of the web. Yet despite all that a SVG offers, web usability expert Jacob Nielsen suggests that information architects should wait at least a year to effectively use a new technology like SVG. This is the key trade-off that will make or break the success of SVG.
SVG: A Brief History
SVG is a vector-based graphics standard currently in its eighth draft. The World Wide Web Consortium (W3C) introduced SVG in 1999 based on two proposed standards-Vector Markup Language (VML), an XML-based language led by Microsoft, and Precision Graphics Markup Language (PGML), led by Adobe and based in part on its (Portable Document Format) PDF model. It has since won the support of many of the other leading firms in the industry, including Hewlett-Packard, IBM, Macromedia, Netscape, Sun Microsystems, and Xerox, giving some cause to think SVG will be around for the long haul.
Highlights of SVG: Flexibility
When considering SVG compared to other web technologies, it is crucial to consider what it is being compared to. When compared to today's oft-used bitmap image formats such as GIF and JPEG, SVG will be a huge improvement. Instead of defining each individual pixel, lines and shapes are defined in relation to one and other, yielding much smaller files so pages can load faster. In addition, SVG files can also be zipped using gzip, which will automatically be unpacked by the viewer with no noticeable delay.
SVG is not a technology that will require work in design software. Though people will be able to create SVG images in programs such as Adobe Illustrator, designing a simple shape such as a rectangle is simple in SVG, requiring only a few lines of code.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 03December 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg xml:space="preserve" width="6in" height="2in">
<rect style="fill:black;" width="640" height="40"/>
</svg>
The image, a black rectangle wide enough to fit across a screen, is created with the last three lines of code. With the addition of images and additional buttons with opaque backgrounds, all options of SVG, the rectangle can be turned into a navigation bar. A black circle could be created similarly by replacing the next to last line of code with the following:
<circle style="fill:black;" cx="200" cy="200" r="100"/>
The fundamentals of SVG lie in designing shapes just like the ones defined above.
SVG is a powerful tool that was designed to be functional with many current web technologies, making it a very powerful and useful tool for both information architects and web users. Because SVG follows the XML Document Object Model (DOM) files defined in a document can be named and referred to elsewhere in the site, and even styled differently. It can work seamlessly with other web technologies such as CSS (Cascading Style Sheets) and HTML. It follows the DOM used in version 4 of HTML, meaning objects can be edited using Javascript for animating. Since SVG is a text-based format, text within the images is searchable; this will be especially helpful for items like buttons, logos, and street maps. SVG's backwards compatibility may allow information architects to use it sooner the safe estimate of one to two years after the release. In case web users do not have an SVG viewer installed, an alternative bitmap image can be specified to load instead. Bitmap images can even be loaded and edited in an SVG file, which will be important for items like photographs that will be all but impossible to recreate entirely in SVG.
Highlights of SVG: Potential
Yet we would be remiss to think of SVG only in term's of today's web. SVG is written in XML, which will be the authoring language of the future for the web, giving cause to think that SVG will be around for the long run. The name of SVG, Scalable Vector Graphics, shows some of the format's greatest potential. Users can zoom in to view SVG graphics without any loss of image quality.
This scalability can be an even greater tool for information architects who are pondering how to create web pages that may be viewed with anything from a palm device to a 21" screen. An entire web page can be created as an SVG file and be able to do whatever the information architect wishes in terms of content, and then be automatically scaled to fit the user's display. This feature may become even more important as the web grows, especially onto wireless platforms. An application like Mapquest, possibly tied to a GPS system, could be used to show driving or walking directions to say a restaurant for devices similar to the Palm VII. Forms and surveys made in SVG could also easily scale down to fit wireless machines, making it easy to submit a review of that restaurant you just found. Along other lines, an application could be created to help biology or premedical students by providing anatomical diagrams that can be zoomed to view in great detail, aiding students during dissections. Even though some applications will lend themselves better to wireless situations than others, just being able to view the same material elegantly regardless of screen size will help to expand the potential of what can be done on the web in the future.
Drawbacks: How to Catch up with Flash
The fact that SVG must be thought of in the long run may become an initial roadblock. SVG is still being drafted by the W3C, while Flash-viewed as SVG's competitor because both are vector-based formats that offer advantages over bitmap images-is used by 80% of web users and is now shipped with all browsers. Even though both Netscape and Microsoft say that SVG will be included in their browsers, without the release of final specifications, this may not happen in the near future. All of this is to say that SVG needs at least two years and maybe more to develop a critical mass that can compete with Flash. Yet even then it may not matter. Because SVG is a text-based format, files may be larger, and take longer to load, than equivalent Flash files. Plus, unlike SVG, Flash allows for multimedia support (this is the most common use of Flash today), allowing developers to potentially tie in multimedia presentations and content driven pages within the same site. Yet all of this is not to say that SVG will mean nothing, simply because of Flash's critical mass. That Macromedia is involved in the development of SVG's specifications signals that the two vector formats may be compatible with one and other, which would allow SVG to gain an immediate critical mass of web users.
Conclusion: An Uncertain Future
SVG might represent the arrival of the future of web technology, but due to the infrastructure in terms of hardware and users amongst other things, we cannot realize the potential of SVG any time soon. As a tool for information architects, the greatest strength of SVG is its flexibility for current and future web technologies. Yet since information architects cannot really use SVG for a couple of years, they must use current techniques, or broaden their practices to use existing technologies, such as Flash, in such a way that appeases their interests as well as those of their clients.
SVG Resources
