Graphics Model in SVG

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.

We took Alain's input and modified the rest of the SVG file to get hyperlinks for all of the classes in the diagram above. One touch we added was to use Javascript to create the links. Yes, the Adobe SVG plugin actually does XLink and Javascript. Try it out!

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:

1. Together/J from TogetherSoft was used to produce the class diagram.
2. A Windows metafile (WMF) file was created using the export facility in Together/J.
3. Adobe Illustrator 8.0.1 was used to read the WMF file. You must have the 8.0.1 patches to 8.0. These may be downloaded from the Adobe site.
4. The Adobe SVGFormat Converter plugin for Illustrator was used to export as SVG. This plugin may be downloaded from the Adobe SVG preview site.
5. A text editor was used to add the XLink hyperlinks.
6. The final SVG file was gzipped to create an SVGZ file.

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.

Answer #1

From Brian Smith, a freshman at the University of Iowa in Iowa City, Iowa:

1. You created the UML diagram in your favorite UML design tool.
2. You exported the diagram to WMF format.
3. You opened up the WMF file in a graphics application.
4. You touched up the graphic and then exported it to SVG.

or:

You have some good tool and:

1. You created the diagram using a state-of-the-art diagram editor.
2. That application then let you save the diagram in SVG or a combination of SVG/XMI.

or:

You have some truly impressive tools and:

1. You created the diagram like normal and then exported it to SVG.

Answer #2

From William Waterson, a Ph.D. candidate in the Department of Chemical Engineering at The University of Queensland, Australia:

If the UML tool you use to produce your diagrams supports a vector-based format in its image export (such as postscript .ps, windows media format .wmf, or adobe illustrator .ai) then you can take the produced export diagram and process it with one of the several conversion tools available on the net (such as pstoedit, the SVG Sketch program on linux, or MayuraDraw). You then have UML diagrams in .svg format that you can embed in your web-page. Cool eh? :-)

Note: I was able to produce WMF export diagrams in the downloadable evaluation version of ObjectDomain and convert to SVG using MayuraDraw or pstoedit. I had some problems with this arrangement until I found that Mayura and a lot of other conversion programs seemed to be specifying 'stroke-width:0' for lines, hence only displaying text and no class boxes in the SVG viewers I used. To fix this I used a text editor to replace 'stroke-width:0' with 'stroke-width:1'. My SVG images could then be properly viewed. Maybe it's something in the ObjectDomain WMF export as the problem was replicated in other SVG converters.