The model is derived from an example used by Bertrand Meyer in his book, Object-Oriented Software Construction.
The SVG plugin we tested for this demo is from the Adobe SVG Zone. The Adobe SVG pages are excellent.
You can see the full SVG specification at the W3C site.
To get a taste of the future of SVG in browsers, try using the Zoom feature in the plugin by right clicking on the area you want to zoom and selecting Zoom In. Try it again. Go all the way. Pretty cool?
You may also use the control keys with the mouse for zooming. To zoom in hold down the Ctrl key (Windows) or Command key (Mac) and use the mouse to click the area to magnify. To zoom out hold down the Shift-Ctrl keys (Windows) or Shift-Command keys (Mac) and use the mouse to click the area to reduce. If you want more control when zooming, use the control keys and drag the mouse to create a selection rectangle around the area you want zoomed.
Now try panning the image. Hold down the Alt key (Windows) or Option key (Mac) and the cursor changes to a hand icon which you may drag around to pan the diagram while zoomed in. Picture doing this on a very large class diagram.
You may also search for specific text on the diagram. After all, SVG is an XML grammar and therefore contains searchable text. This is quite different from a GIF diagram! For a UML diagram this can prove very useful for finding classes, types, attributes or methods on a large diagram. Try this feature by right clicking on the diagram and selecting Find... on the menu. The text found will be highlighted. You can also copy the text to the clipboard and paste it into another document.
Want to see the SVG source? Right click on the diagram and select View Source. How big do you think the SVG file is? Well, let's see. When the image is saved as a GIF file it is 11 KB. When it is saved as an SVG file it is 13 KB. So what is the gain in terms of download time? This should be slower! Wait. You may credit the Adobe team for their attention to every detail. The SVG plugin can also display compressed SVG files. When the Graphics Model is compressed, as it is in our example above, the file size is only 3 KB. Imagine the file size savings when dealing with very large diagrams!
Next the challenge was to figure out how to place hyperlinks within the SVG class diagram. We wanted to use XLink technology to allow a user to click on a class and jump to either the details for the class within the UML model or the source code for the class. Thanks to our reader from France, Alain Le Guennec, who provided us with the following input:
Actually, putting such hyperlinks on the SVG class diagram is easy. Attached is a slightly modified version of your SVG file in which I have grouped the shapes representing the Ellipse class in a <g> tag and enclosed it in a hyperlink pointing to the HTML table describing it at [your Graphics Model HTML page] so that clicking on the Ellipse class-box leads to that page.
Finally, how did we produce the SVG? First, congratulations to two of our readers who answered the SVG challenge correctly and described the steps we took to produce the SVG starting from a UML modeling tool. Their answers are shown below. Each will receive an XML or UML book of their choice for answering correctly. Since we did not get a third answer, we will be offering the same to our reader who provided us with the XLink solution above.
We produced the SVG for our demo by taking the following steps:
Note that as of this writing, ArgoUML is one of the first UML tools to provide native SVG support in their version 0.7.5, currently in beta test.
From Brian Smith, a freshman at the University of Iowa in Iowa City, Iowa:
From William Waterson, a Ph.D. candidate in the Department of Chemical Engineering at
The University of Queensland, Australia:
Copyright © 2000 Objects by Design, Inc. All rights reserved.