Vector Graphics on the Web
SVG will, in time, replace many uses of bitmap graphics on the Web. One crucial practical factor that will determine the rate of movement to SVG is how fast SVG viewers become widespread.
Microsoft, at the time of writing, has given no indication that SVG will be supported natively in Internet Explorer. Microsoft has developed its own standard, the Vector Markup Language (VML), to perform the same kind of functions. The Mozilla project, associated with the Netscape 6 browser, is developing native SVG capabilities. However, for some time at least, the spread of the Adobe SVG Viewer is likely to be an important determining factor in the adoption of SVG.
Adobe is making the Adobe SVG Viewer available with its graphic products, such as Adobe Illustrator, as well as other Adobe products such as Adobe Acrobat. In addition, Adobe is intending to distribute the Adobe SVG Viewer in association with Real Player. A stated aim was to distribute 100 million copies of the Adobe SVG Viewer by April 2002. If those receiving the viewer take the minimal time required to install it, critical mass can be reached fairly quickly.
In certain sectors, such as online mapping, SVG offers such huge and immediate technical advantages (such as zooming in or out and selectively showing or revealing parts of the map) over maps displayed using bitmap technology that the enthusiasm for SVG is already gathering important momentum. Similarly, the use of SVG in technical diagrams and in online teaching will likely raise awareness in parts of the Web community where content developers would not naturally think of themselves as graphic designers.
And, finally, SVG can be used as a solo technology to create Web pages. A prototype site demonstrating some simple SVG Web pages can be viewed at http://www.svgspider.com/default.svg.
Taken together, these factors bode well for the future of SVG. Interest in SVG is likely to increase, perhaps in the same way interest in HTML exploded in the mid 1990s—but, of course, prediction is difficult, particularly with respect to the future.
Zooming in SVG
One reason that a growth in the use of SVG can be expected is that it provides superior functionality to that available using bitmap graphics, such as allowing the zooming of diagrams or maps.
The precise technique to achieve zooming varies between SVG viewers. In the Adobe SVG Viewer, you simply right-click on the image and a menu appears. The top two choices are Zoom In and Zoom Out. The third choice, Original View, is grayed out when you first access the menu. But after you have zoomed in or out, you can use it to restore the original zoom factor.
It is also possible to control the zoom factor programmatically using JavaScript. You will see an example of how to do that in Listing 23.2.
Panning in SVG
In SVG, it is possible to pan around an image. This is possible because the part of the SVG image that you see in a browser window is only part of a potentially infinite SVG canvas. Listing 23.2 is a simple representation in SVG of the SVG canvas. The point at which the horizontal and vertical lines cross can be viewed as the point (0, 0) on the SVG canvas.
Listing 23.2. A Simple Representation of the Potentially Infinite SVG Canvas (SVGCanvas.svg)
Figure 23.3 shows the result in a browser window.
Figure 23.3. A representation of the infinite-sized SVG canvas, with the shaded rectangle representing a browser window giving a view on to the canvas.
The whole image in Figure 23.3 represents the infinite SVG canvas. The four circles represent different parts of an SVG image on the canvas. The light gray rectangle represents the part of the SVG canvas that can be viewed at any one time in a browser window. One of the four circles is viewable in the browser, but there is much more graphical information out of sight. The light gray rectangle can be moved around the canvas to bring the other information into sight. One example might be to follow a road on a map until you reach the map for a particular town or other feature.
Listing 23.3 is a simulation of what you might see when panning around the SVG canvas.
Listing 23.3. A Simulation in SVG of Panning Around the SVG Canvas (SVGCanvas02.svg)
To get an impression of the process, either download and run the code or view it online at http://www.AndrewWatt.com/SEUsingXML2e/SVGCanvas02.svg.
The simulation pans, successively, up, left, down, and right. Watch how the content of the gray rectangle changes as it “pans”—simulating how your view of the SVG canvas changes as you pan upward, in the first instance. As you pan up, the red circle moves out of view and the blue circle progressively becomes visible at the top of the screen.
In the Adobe SVG Viewer, on the PC you pan an image by holding down the ALT key and the left mouse button and moving the mouse in the direction in which you want to travel. It is possible to pan in any direction you choose, including diagonally.
Scrolling
The SVG specification refers to a scrolling functionality—but if you open a sizeable SVG image in a Web browser, you will be struck by the absence of scrollbars at the side of the browser window. Adobe decided to omit scrollbar functionality when creating the SVG Viewer. Of course, you can pan within the image. But in some circumstances, panning is a poor second to having the linear control of vertical or horizontal scrolling.
Fortunately, there is a fairly straightforward way to create scrollbars for a large SVG image—simply embed it in an HTML/XHTML Web page.
The “official” way to embed an SVG image or any other object in an HTML/XHTML Web page is to use the <object> element. Unfortunately, there is one practical difficulty—if you attempt to use the <object> element, you do not get cross-browser code. For the moment at least, to be confident that Web pages containing SVG images will be viewable across conventional Web browser platforms, you need to use the <embed> tag.
If we wanted to display a simple rollover button similar to the one that we created earlier in the chapter (see Listing 23.1) in an HTML Web page, we could use Listing 23.4.
Listing 23.4. Embedding an SVG Image in an HTML/XHTML Web Page (SimpleEmbedding.html)
Note
In Chapter 21 “The Future of the Web: XHTML,” you learned that the embed tag is deprecated. Using the object tag, as recommended, the source would look like
<object type="image/svg+xml" data="./RolloverButton.svg" NAME="RollOverButtonwithBorder" width="200px" height="200px" ></object>
However, the <object> element doesn't work cross browser though. Surprisingly, it handles SVG differently from “ordinary” graphics.
The appearance in the Opera 5.12 browser is shown in Figure 23.4. Notice, if you run the listing and view it onscreen, that I have added a blue border around the SVG image so that you can see that the whole SVG image is visible and displayed correctly when nested within the XHTML page.
Figure 23.4. An SVG image displayed in an XHTML Web page using the <embed> tag. The thin blue rectangle is part of the SVG image.
If the SVG image is larger in either the horizontal or vertical dimension than the current size of the browser window, scrollbars are added automatically, just as they are for any other HTML or XHTML Web page.
Thus, to embed an SVG image that is larger than the browser window, you can use code such as Listing 23.4 and be sure that you will be able to scroll—as well as pan or zoom—the image.
Listing 23.5 shows a large, but simple, SVG rectangle.
Listing 23.5. An SVG Rectangle with Two Simple Messages (BigRect.svg)
If you display the SVG file alone—that is, without embedding it in HTML/XHTML—no scrollbars appear despite the fact that the image is bigger than most user's monitors are likely to be able to display. However, if you insert the SVG image into an HTML/XHMTL “shell” of the type shown in Listing 23.6, you will be able to scroll easily to the bottom right and see the second message.