SVG and NaviMap: Introduction

NaviMap's development was started during summer 2000. The choice was maid to use a standard vector solution (no specific plug-in, no heavy Java applet...), providing high quality graphics and highly interactive functions. One of the main goals was to provide user friendly map available to any Web browser. At this time SVG was the only candidate to fulfil these needs.

Advantages of SVG


Besides its advantage to its main concurrent, Macromedia Flash, SVG had several key functions particularly suitable for cartographic solutions:
image
image
 coordinate system and transformation management,
image
 layer management, allowing to view (or to load) only the data you want and you need to display,
image
 powerful text management functions (text on path, font management, etc.),
image
 raster image management (allowing combination of raster and vector data),
image
 high level parameter on graphics elements (line styles, transparency, etc.) allowing the drawing of high quality maps,
image
 wide range of well designed interactive function, extensible through the use of Javascript and DOM,
image
 XML based exchange allowing to carry extra informations such as non graphical attributes related to the graphic features,
image
 possibility of building client-server system allowing the use of an unlimited geographic space and exchange with a database to get information on non cartographic attributes,
image
 possibility for online SVG generation from a database, providing an already up to date highly tailored map.

Use SVG for static cartographic layers


NaviMap uses SVG through two different ways. The first way mainly concerns NaviMap Basic and NaviMap POI solutions. It is based on the production of static SVG tiled layers form already existing data (illustrator map for exemple). Once the static tiles generated, they are provided to the NaviMap Server's tile manager (raster tiles can although be added as background layers), and became available to the Navimap clients (Web browser and Adobe SVG plug in for example).
image
The layers are extracted and tiled from illustrator using Visual Basic scripts (SVG layers on the final map are corresponding to the illustrator layers on the original map). The resulting tiled layers are provided as SVG files to NaviMap. Several sets of tiled layers can be produced, each being used depending on the visual context (usually depending on the zoom factor).
The user can then browse through the map (zoom, pan, etc.), select the layers he wants to see (a first automatic selection being made depending on the visual context).
image

image

Use of SVG for dynamic data production


The second way of using SVG from NaviMap in the online generation from a database (POI generation for NaviMap POI, and full vector generation for NaviMap for Dynamic). Objects are extracted from the database depending on the selected layers and on the requested geographical area (using spatial indexes from Postgres or Oracle), visual representation is applied to the selected objects from a configuration file definition (may depend on the visual context or on attribute's values). The result is then converted into a SVG data set and sent to the browser (PHP application gets it from the Mapcast Server through the CORBA interface and sends it to the browser through the APACHE HTTP Server).
This screenshot came from a SVG file generated, on the fly, by NaviMap Dynamic with a dataset covering the city of Paris. All the visual attributes, text positions, etc. are calculated on the fly.
image

image

SVG versus Flash


Despite SVG was the only reasonable solution for a cartographic vector solution in summer 2000, its main challenger (Macromedia Flash) has evolved toward a very good alternative (mainly through the extension of Action Script, and the ability of building rich client/server application). As NaviMap is now available for both SVG and (or) Flash, Dryade is now in a position to give some comparison results.
The first point is that the SVG standard doesn't provide any constraint on the viewer's performances, so a choice has to be done for the comparison. Adobe's viewer seems to be the better choice, but it's important to keep in mind that the comparison is closely related to that choice, and that things may change, depending on the viewer choice or on its current release, independently from the SVG standard itself.
On certain points Adobe's SVG viewer is better than flash (for cartographic application), but on other points Flash is the winner. Let's start with SVG's strong points:
image
image
 coordinate system can be infinite in SVG, allowing to navigate in an infinite world, wich is much more difficult in Flasn (integer coordinates),
image
 SVG has more graphical object type, with more parameter, ad more graphical functions, which is one important point to get nice and user friendly maps,
image
 text functions are more powerful in SVG (Flash doesn't have the text on path function),
image
 communication between JavaScript and the viewer is easier in SVG than in Flash,
image
 online generation is easier in SVG (ASCII XML text...),
image
 coding is easier using SVG, as it often is with open standard solution: any tool can be used to generated SVG, while Flash implies the use of proprietary tool (or specific open library like Ming),
image
But Flash although have some key advantages:
image
image
 Flash provides better performances than Adobe's SVG viewer: data flows are shorter in Flash (this is related to SVG itself) therefore involving shorter communication time for web clients, and interpretation and drawing time are faster with Flash (this is only liked to the viewer, not directly to SVG itself),
image
 Flash viewer is much smaller than Adobe's SVG viewer (nearly ten times less...), allowing quicker download,
image
 data flow control is better defined in Flash, more generally, SVG doesn't provide any constraint on the client-server communication which is therefore only depending on the choices of the viewer editor (no permanent communication, useful for mobile object, on the Adobe's viewer...),
image
 layer hide and display is much faster in Flash the in SVG,
image
 synchronisation and animation tools are easier to use in Flash (useful for functions like smooth zooming),
image
 Flash viewer is much widely available on internet browser than the Adobe's SVG viewer,
image
 there were some compatibility problem between the different release of the viewer, and some key SVG functions were not available until the 3.0 release (SVG in SVG document...).
image
These are not all the differences between SVG and Flash, but the list of key point encountered during NaviMap development, in other word important features to keep in mind when developing cartographic application.
image

Conclusion


SVG is a very good solution for interactive map broadcasting over internet: it provides all the functional solution to fulfil the need of a product like NaviMap. However, recent improvement of its major competitor, Flash, brings SVG to a difficult situation since SVG's advantages are more in the developer side than in the final client side. To be definitely the best solution SVG viewers must improve on four major points:
image
image
 provide better performances (better than Flash),
image
 provide better server communication control,
image
 become available on every web browser,
image
 become compatible from one release of the viewer to another.
image
Until all these points are fulfilled, Flash will remain a strong challenger in cartographic solutions, restraining SVG from making a name in the field.
image

Author

Christophe Duquesne
image
image
image
Chief Executive Officer

Dryade
223 avenue Pierre Brossolette
92120 Montrouge

Tel 00 33 1 42 31 27 22
Fax 00 33 1 42 31 29 66
Website www.dryade.net