Scalable Vector Graphics
By Molly E. Holzschlag
The blending of technology and art has always turned me on. I think that's why the Web originally seduced me, and why I've stuck around so long. Many Web designers and developers share this attraction. The two sides of our brains can have an affair, and that makes for a fun and rarely boring relationship.
Scalable Vector Graphics (SVG) is a perfect example of technology and design meeting on a level playing field. Via XML markup, you can create and implement graphic images, animations, and interactive graphic designs for Web viewing. Of course, browsers must support SVG technology, which is one reason that many developers haven't looked into it too seriously, or perhaps haven't heard of it.
SVG is being developed under the auspices of the W3C. As a result, developers have worked to make it compatible with other standards including XML, XSLT, CSS2, Document Object Model (DOM), SMIL, HTML 4.0, XHTML 1.0, and sufficient accessibility options via the Web Accessibility Initiative (WAI).
As of this writing, SVG's status is Candidate Recommendation. The working group responsible for SVG has declared it stable, and if it passes several more tests, it moves into the Recommendation phase.
SVG Concepts
Perhaps the most important concept to grasp when first studying SVG is its scalability. Graphics aren't limited by fixed pixels. Like vector graphics, you can make scalable graphics larger or smaller without distorting them. This is very important for designing across resolutions. Scalable graphics adjust to the available screen resolution. This alone makes SVG attractive to Web designers, as it solves one of the most frustrating issues we face: creating designs that are as interoperable, yet as visually rich, as possible.
SVG elements are based on standard graphic design elements. They are as follows:
Geometric shapes. A geometric shape is a line, or combination of lines, a curve, or combination of curves, or a combination of curves and lines.
Text. Text elements are represented as characters and combinations of characters.
Raster (also referred to as bitmapped) images. Raster graphics are those that are mapped to bits. This means that they don't contain scalable methods. Raster graphics are typically used in combination with scalable graphics, and are comprised of photographs and specialty filters.
SVG follows other methodologies familiar to graphic designers. SVG rendering is based on a paint model. Color, gradients, and patterns are painted onto the screen to gain the end results. You can fill and stroke shapes and text, or apply other graphic techniques like masking and opacity.
SVG allows access to scripting and to the DOM, which is how SVG supports animations and interactive graphics.
An interesting aspect of SVG is that the scalable methodology isn't rendered via the formulation of a binary graphic file, but via ASCII language (as are HTML and XHTML) that's then interpreted (see Listing 1). The exception to this is that whenever a bitmapped graphic is used within an SVG environment, the image is included using the SVG
<image>element.
SVG Software and Browsers
SVG syntax is, as you might imagine, quite complex. And the more complicated a design becomes, the more complicated the markup. As a result, the development of GUI tools for SVG began early. There are several tools available that offer a standard drawing environment but export to SVG for use in supported browsers (For a full review of Batik, Apache.org's SVG Toolkit, and an overview of Jasc's WebDraw, see Clayton Crooks' design section product review.) Additionally, many familiar graphic-design products and companies are adding SVG export support to their product lines.
Adobe has a particularly aggressive interest in SVG, and provides a developer site for SVG enthusiasts. There's built-in support following the W3C Recommendations for it in Illustrator 9, Adobe GoLive 5.0, and an SVG plug-in that lets Web browsers view SVG graphics (see Figure 1). Adobe promises to have SVG export in several future program releases. Jasc Software, maker of the popular Paint Shop Pro, has also taken the lead in developing SVG software. Jasc has a product for Windows called WebDraw, which, at the time of this writing, is in preview release. WebDraw lets you create graphics in a standard drawing environment (see Figure 2). The results are saved as SVG files. You can view the SVG markup in Listing 2.
Corel began offering an SVG export file filter in CorelDraw 9, and the recent release of CorelDraw 10 sports the same SVG export option. One of my favorite undersung heroes is ePicture Pro, a cool Mac product from Beatware that lets you create and animate Web graphics, with export options for both Flash file and SVG formats.
Other Products of Note
ImageMagick—which runs on Unix and Linux as well as Windows, Mac, VMS, and even OS2—provides some support for SVG.
IBM has a prototype SVG viewer for Windows. This provides some interesting features, including the ability to save items being viewed as JPEG files. Batik (originally known as Jackaroo) is an SVG viewer created to evaluate W3C technologies. It's distributed as open source.
Browser support for SVG is currently sketchy in terms of inline support without a plug-in. Table 1 contains support notes for popular browsers. As time goes on—especially if SVG becomes a Recommendation—it will be more fully supported, both by browser manufacturers and makers of popular software. Big pushes from companies with an investment in standards-compliant SVG will ensure that support is certainly on the horizon.
An alternative to using browsers is to deliver scalable graphics to the Web through WebCGM, which works on a metafile concept. Computer Graphics Metafile (CGM) is a technology that has been around since 1987 and an ISO standard for graphics since 1995. WebCGM takes the basic concepts of CGM and orients them to the Web. However, work on WebCGM seems to be very slow, despite the fact that WebCGM has actually been a W3C Recommendation since 1999. SVG, with its XML basis, has attracted a great deal more interest.
Creating a Graphic with SVG
If you'd like to try SVG, you'll need to have a viewer installed. You can get one from Adobe or IBM—both options are listed in " Online."
Download an SVG software program and follow along as I create a Web banner. For this example, I'm using Jasc's WebDraw. If you're using a Mac, try the ePicture Pro demo. The steps are fairly similar in both programs.
To create a background graphic, select File, New. The New Image dialog box appears. Enter the width and height. To create a banner, I entered 400 pixels as the width, and 50 pixels as the height. Select the Rectangle tool to draw a thin line along the bottom of the banner (see Figure 3).
Black is the default color. To change the color, use the Select tool to highlight the line you want changed. Then, choose Object, Apply Effect from the drop-down menu. The Effects palette appears. Click once in the Color box and the Color dialog box appears. Pick a color with the Color chooser. Click on OK to close the Color dialog box, and then click on OK again to close the Effects dialog box (ePicture Pro users simply select color from the color palette).
Click elsewhere on the canvas to deselect the line. To create text, choose the Text tool. In the Tool Options palette, click on the Font tab and select your font. I chose Arial, 24 pt.
Select the Text tab in the Tool Options palette and type your header text into the box. Then, click on the canvas. Your text will appear. To move it, grab it with the Select tool and nudge it with the arrow keys on your keyboard.
To save the file, select File, Save. Name the file (note the .svg extension) and save it to a location of your choice. I named mine banner.svg. Figure 4 shows my results.
Try viewing your SVG document in a browser. As long as you have a plug-in installed, you should see the results. However, be advised that not all plug-ins support all aspects of SVG, so results will vary.
Listing 3 shows the markup generated by WebDraw to create this banner.
Test Drive
While SVG support in browsers obviously isn't immediately available, it's a technology that's worth watching and using. The fact that major companies are investing time and money to create tools that support it is indicative of the hope SVG holds. What's more, the fact that standards compliance is being written into these tools early on is very exciting—an unprecedented event when it comes to client-side markup! So while SVG might not be something you'll actually use for awhile, it's absolutely worth taking out for a test drive, if only for the sheer fun of it.
(Get the source code for this article here.)
An author, instructor, and designer, Molly has been honored by Webgrrls as one of the 25 Most Influential Women on the Web. She has written and contributed to numerous books about the Internet and the Web. Visit her Web site at www.molly.com.
