Technology Overview: SVG

SVG or Scalable Vector Graphics is an XML-based vector graphics format for the web. This format showed great promise for many online applications including GIS, but browser adoption rates have been very slow.

SVG was adopted by the Worldwide Web Consortium (W3C) in 1999. The initial release was in September 2001, and the latest version (1.2) was released in 2006. SVG is a pure XML format that is designed for 2d vector graphics. As such, it is a powerful and convenient way of adding vector graphics to web pages.

Here is a short sample SVG file that defines a triangle shape:

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="">
<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/> 

The use of XML allows it to be easily created as required, and allows easy use of tools such as XSLT. However, SVG’s real power appears when it is used with Javascript. SVG-defined objects are accessible from the browser’s Document Object Model (DOM), enabling interactive behaviors, animations, and other client-side modifications. Clearly, SVG should be very useful for many visual applications, including GIS.

My first online interactive map was just such an SVG map. In 2003, I created the Dallas Wetland Map for the University of Dallas’ Biology Department. This is a simple application based on the western side of the University of Dallas campus. A tiled aerial photograph is used for the base map, with some building annotation. The map can display different wetland data points that were measured by students. Buttons also allow the map to be zoomed and panned.

Although the above map is not very sophisticated by modern standards, it was relatively simple to write. So if SVG looked so promising in 2003, why do we not see SVG map applications today? There are two main reasons for this. The first is that SVG has seen a slow adoption rate. Even at the end of 2008, none of the main browsers fully support SVG. Most (including Firefox and Safari) have partial support, Internet Explorer continues to provide no support whatsoever. Microsoft have recently confirmed that version 8 will not support SVG. Much of the early SVG development relied on SVG plugins provided by Corel and Adobe. Both plugins continue to be available, but Corel have abandoned all SVG development, and Adobe are withdrawing SVG support in January 2009.

The second reason is that there are now better options for web-based mapping. SVG never offered geographic coordinates or a simple map viewing application. These are now standard in a number of tools such as Google Maps, Microsoft Virtual Earth, and OpenLayers. All of these products offer much more. Google Maps and Virtual Earth also offer good basemaps and imagery.

So this technical overview is more of a historical note. I still believe SVG is a powerful standard that has a lot of potential. It has been bypassed by better alternatives for map work, but could prove useful for other applications if it received some much-needed browser support.

Leave a Reply