Until relatively recently, graphics found their way to the Web using file formats developed years ago: GIF and JPEG. Using these formats assured at least fairly wide compatibility, but the image files are relatively large, and “interactivity” is limited to creating rudimentary animated GIFs. Vector-based graphics — such as Flash and now SVG — offer sound, fluid motion, and interactivity unmatched by any bitmapped format, all packed neatly into small, quick-downloading files. Macromedia claims that about 90 percent of potential viewers will see the Flash content correctly, giving Flash an acceptably broad user base for many sites. Still, one company controls the proprietary format to a large extent, leaving us dependent on Macromedia for future improvements. The ultimate answer may be the SVG (Scalable Vector Graphics) format.
SVG is an open format developed by a coalition of Web-related companies. In brief, it promises a text-based file format that is at once easy to use, space-efficient, and compatible with a range of browser devices — from computers to palmtops to cell phones. Given recent news that the W3C (Worldwide Web Consortium) has accepted SVG as a “recommended candidate” (similar to the beta status in software development) to become an open standard, the time for thinking about SVG is now.
The Vector Format We Grew Up With
The Flash SWF format has become practically ubiquitous over the past few years. There are many reasons for the growing acceptance and use of this file format, but chief among them is that HTML was never intended to handle accurate formatting and layout of text and graphics. There are many tricks, workarounds, and new additions to HTML, such as JavaScript, Cascading Style Sheets, and Document Object Modeling — all designed to breathe new life into the languishing language. The cumulative imagination of Web developers is moving much faster these days than the HTML development process, however, and the resulting chasm between what developers needed and what HTML provided opened the way for Flash and its SWF format. None of the confines of HTML are anywhere to be found in Flash, and new abilities such as motion, sound, and interactivity are there for the asking. And since Flash is vector-based, the content is relatively small and can be streamed when downloaded.
Coding the Graphics
SVG offers the features of SWF without the drawbacks of SWF’s proprietary nature. The consortium that created SVG also added a set of advantages that SWF at least thus far cannot claim.
The beautiful thing about SVG is that it is entirely coded text (unlike SWF, which uses a binary format). Just as with HTML, you can easily create an SVG file by entering it in your favorite text editor. SVG is written in XML, allowing it to take full advantage of this powerful data-structure language. The language itself is fairly simple to decypher. Take for instance this line of code:
This snippet tells an SVG-capable browser to create a circle at the location of 200 pixels across and 200 down, with a radius of 100 pixels. The fill color is red. This type of intelligible markup coding is enough to make any coder giddy with delight. Just imagine, you can now easily code graphic elements instead of creating and optimizing them through multiple applications.
Because SVG is text-based it works incredibly well with all the latest markup and scripting languages. You can assign an ID to any element within your SVG code, control aspects of that element, or perform JavaScript functions on the element. Cascading Style Sheets (CSS) expand the SVG possibilities even more by allowing you to apply graphic styles throughout your site. If your client doesn’t like the header graphics being green and would rather see them blue, not a problem: Open up the CSS and change the graphical style for the SVG header from green to blue, and your whole site changes in an instant. Graphical elements can be set to render differently depending on the browsing device.
SVG includes simple, native commands for enabling elements to be draggable and mouse-clickable to trigger external actions, such as animation. Creating motion is a straightforward process: Simply designate two points (using x and y coordinates) and how fast you would like the element to get from one point to the other. Virtually any element can be animated in this way, including text, filters, and gradient fills. Text can be bound to a path and animated around this path. Another great benefit of SVG being text-based it that all text (no matter if a font has been applied to it or not) and graphics are completely searchable, something that has never been possible within Flash.
Extras Included
SVG elements are not limited to basic shapes and fills. Free-form paths and various forms of gradients are supported as well. Opacity can be defined either for the entire object or separately for its fill and stroke. Visibility can also be controlled and scripted. Transformations — scale, rotate, and skew — can be performed on any SVG element. Want to make your logo twice as big? No need to open up Photoshop; just enter the scale amount within the code with no fear of jaggies!
Some things you may not expect from a vector-based language are along for the ride as well. The Clipping Mask and Alpha Mask commands allow you to define an area that gets cropped out of the artwork. Bitmapped features such as soft Alpha Masks are produced on the browser side to eliminate long downloads caused by large graphic files. This is a very important feature to emphasize: Unlike bitmapped images or even Flash graphics, where the effects are performed on the file before it gets to the user, SVG renders these bitmapped effects in the user’s browser, keeping all the data as vector equations until the file arrives. One of the features that really makes this a “killer app” is the ability to assign Photoshop-like filter effects that are also rendered on the browser side. Soft drop shadows, Gaussian blurs, glows, and specular highlighting are just some of the effects at your disposal. And effects can be layered to produce even more impressive results. And remember, any of these elements can be animated.
Tools of the Trade
Diving into SVG, one quickly gets the sense that it offers vast potential, as well as multiple layers of complexity. While SVG is a simple language, the thought of plotting your logo in SVG could quickly drive you mad. It’s reassuring to note that some of our familiar tools will be supporting the production of SVG content.
Adobe has stated its commitment to SVG. This is apparent with the company’s recent release of Illustrator 9.0, which allows you to save your artwork in SVG format. GoLive 5.0 touts full SVG support, and the next version of LiveMotion promises the ability to save your interactive animations in SVG format. As SVG develops, it is likely that future browser releases will provide native SVG support, but in the meantime, Adobe has released plug-ins for both Netscape Navigator and Microsoft Internet Explorer that will allow the viewing of SVG content.
Corel offers up an export plug-in for CorelDRAW. Jasc, makers of PaintShop Pro, have a beta of Trajectory Pro, intended to create SVG artwork and animations (although the beta does not support animation or interactivity yet). Beatware’s e-Picture Pro also touts SVG export capabilities, but a notice states that this capability will be included just as soon as W3C finalizes the format.
If You Build It, Will They Come?
With any emerging technology there comes the inevitable question: Is it here to stay or just a passing fancy? SVG appears destined for the long haul, considering that the SVG specification has been embraced by the W3C.
As with any technology for the Web, however, SVG will not live without the support of the developers and of the users. One can only hope that the Web-design community has developed the sophistication to recognize what’s good for it, and that we will collectively jump at the opportunity to have something this innovative in our arsenal of tools.
For Further Reading
To learn more about SVG, start at Adobe’s dedicated area. This area includes an overview, demos, tutorials, FAQs, and most of the external resources that can be found on the Web. You can also pick up the SVG Plug-in while you’re there.
After you’ve read through all the documentation and done the tutorials on Adobe’s site, you can start to explore other outlets. Pinkjuice has some interesting experiments. Iguana Studios also presents demos and a lesson plan for you to peruse. And when you crave even more information on the subject, head on over to the e-groups for SVG developers, which is a good venue for getting answers to your most plaguing questions.
This article was last modified on January 18, 2023
This article was first published on August 17, 2000
Commenting is easier and faster when you're logged in!
