I have been interested in SVG since its inception but it has lost all momentum and support and even Adobe has announced the discontinuation of the Adobe SVG Viewer. SVG is still used with Google maps with FireFox and possibly mobile phone, but as far as I can tell there is not significant industry backing and it appears there will never be.

Microsoft is offering SilverLight and it seems to be very promising. I have several ideas for future tools using SilverLight but I thought it would be useful to first try them in SVG so I can take the experience from that implementation first.

One of the first examples of the possibilities of SVG that I saw was an article written by Nigel McFarlane which showed several accounts (represented rectangles) that could be graphically linked to payment methods (credit card, EFT card, etc.). There were also numerous examples from Adobe although it seems they have reduced the number of samples which coincides with their curtailed support.

The most interesting sample that I saw was the Visual Building Search. The sample showed the east and west towers of the Adobe headquarters and allowed the user to select the tower and floor. It then showed a diagram of the floor plan with offices and conference rooms. When you hovered over or selected an office, it displayed the name and contact information for the occupant. The sample was a very nice proof of concept although it was not designed to be externally adapted. For example, the sample uses framesets extensively, stores personnel and room information in static html files, and the JavaScript used many global variables and needed refactoring (note to programmer: semi-colons should not be treated as optional in JavaScript).

I decided to move the display results into HTML rather than displaying it in the SVG as it will allow for more possibilities as the sample progresses.

Initial problems along the way:

  1. Inkscape saved the SVG namespace with the svg: prefix, however when I copied the script and style nodes I forgot to add the namespace. So the style and script elements were not recognized in Mozilla, but IE+Adobe SVG Viewer did not seem to mind.
  2. When I saved the SVG document in Inkscape as "Plain SVG," it removed all of my class attributes, but that may have been due to operator error and the manual class definition I added being incorrect. (I rewrote the styles after this and it works now.)
  3. There is a difference for the style.setProperty() in IE and Mozilla. I had to add a third parameter with a value of null to use style.setProperty(name, value, null);

Goals:

  1. Display a building map showing room numbers, conference rooms, and other information. Show the occupant information when a room is highlighted or selected. Start with a simple case and expand to a more complex case. It must support FireFox and IE.
  2. Support dynamic generation of building information such as conference room and occupant information.
  3. Add extensions to display LDAP or Active Directory information about occupants and conference rooms.
  4. Eventually add support for displaying information about other resources, especially printers. (The printer location information is not very descriptive at my company.)

In my next post I will show the simple case from Goal #1.

Technorati tags: