Special Announcement
Poll
What's driving interest in the cloud computing at your organization?
Enables new forms of collaboration
Faster delivery of new apps/services
Empowering users via self-service model
Potential for lowering IT costs
Other
Webinar SignUp
White Paper Downloads
Get the latest white papers from our sponsors
Directions Magazine, Web-based Mapping, Business GIS, GeoSpatial Consulting, Location Based Services
Comments
Takeaways from the Esri UC 2010
Adena Schutzberg | July 29
John Baleja, Esri Product Management responded to Sam's questions: "Our plan[...]
Spatial Data Infrastructures - Challenges and Opportunities
BP | July 28
I've been in the GIS industry for 12 years. [...]
Podcast: Is Esri UC the Only GIS Event That Matters?
Worker Bee | July 23
At the end of the podcast, the question was 'are[...]
Spatial Data Infrastructures (SDIs) - Why Should We Care About Them?
Sudhir Kumar Singh | July 23
Really the concept of " One Earth" can be achieve[...]
Takeaways from the Esri UC 2010
Adena Schutzberg | July 23
Sam, Why didn't I poke ESRI on the API for the[...]
Articles
SVG and GIS
By George Seff , Limbic Systems, Inc.
May 07, 2002

Classified Ads:

Scalable Vector Graphics and Geographic Information Systems

Introduction
A quantum leap in Web graphics is happening right now.A new technology defined by the W3C called SVG (Scalable Vector Graphics) is bringing rich, compelling, interactive, high-resolution graphics to the Web.

This technology is particularly attractive to GIS developers and users.

Today, most mapping systems employ two approaches when delivering interactive maps on the web.The first approach is the familiar Java applet.The second approach involves generating map images on the server and delivering them to the user in either GIF or JPEG image format.Java applets perform well concerning interactivity, but have suffered from browser compatibility and firewall issues.Image maps are compatible with web tools and environments, but interaction with the map such as zooming, panning, layer control and thematic shading necessitate a round trip to the server in order to re-render the image.

Today, SVG solves all of these problems.SVG is an open, HTTP compatible standard that allows fully interactive mapping applications - without the need for applets or a round trip to the server every time the map presentation is tweaked.

What is SVG? The Scalable Vector Graphics (SVG) format is a new XML grammar for defining vector-based 2D graphics for the Web and other applications.SVG was created by the World Wide Web Consortium (W3C), the non-profit, industry-wide, open-standards consortium that created HTML and XML.

Scalable Vector Graphics (SVG) is an XML language for describing two-dimensional graphics.SVG allows for three types of graphic objects: vector graphic shapes (e.g., circles, rectangles, and paths consisting of straight lines and curves), images and text.These graphical objects can be grouped, styled, transformed and composited into previously rendered objects.For the highly technical members of our reading audience, the display and manipulation features include nested transformations, clipping paths, alpha masks, filter effects and template objects.

Here is an example of a simple SVG file:

This SVG file generates the following presentation in your browser:

SVG is similar in scope to Macromedia's proprietary Flash technology.As an open W3 standard however, SVG is XML-based as opposed to a closed binary format.

In order to view SVG documents in your browser, you need to install a viewer.There are several viewers available but Adobe's SVG Viewer is probably the most commonly used.To download the viewer, go to the Adobe web site listed in the Links section at the end of this article.You need to download and install the Adobe SVG Viewer in order to view SVG documents.

SVG drawings can be interactive and dynamic.Animations can be defined and triggered either declaratively (i.e., by embedding SVG animation elements in SVG document) or via scripting.

Sophisticated client-side applications of SVG are made possible by use of a browser-based scripting language such as JavaScript, which accesses the SVG Document Object Model (DOM).The SVG DOM provides complete access to all elements, attributes and properties of the SVG document, after it is loaded into the browser.A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object, thus bringing a very high level of interactivity to GIS applications that use SVG.

All of this adds up to a fully interactive, browser-based mapping system.Once a map rendered in SVG is downloaded to the browser all types of manipulation are possible - without the need for applets or having to go back to the server for a new image.

Deploying SVG documents in your web or GIS applications is very simple.You need to make sure your web server is set-up to support the MIME type for SVG, which is "image/svg+xml".It is recommended that SVG files have the extension ".svg" on all platforms.It is recommended that gzip-compressed SVG files have the extension ".svgz" on all platforms.(Yes - SVG also supports compression, with no loss of information.And since it is loss-less, it is almost always used in delivery of SVG documents).

Finally, the SVG document is included in the HTML of your web page like this:

SVG Features As They Relate to GIS
SVG has many advantages over other image formats, and particularly over JPEG and GIF, the most common graphic formats used on the Web today.Specifically:

ˇ Plain text format -- SVG files can be read and modified by a range of tools, and are usually much smaller and more compressible than comparable JPEG or GIF images.Additionally since it is based on XML and is entirely text-based maps created in SVG are open up for search engines to index.

ˇ Scalable -- Unlike bitmapped GIF and JPEG formats, SVG is a vector format, which means SVG images can be printed with high quality at any resolution, without the "staircase" effects you see when printing bitmapped images.

ˇ Pan/Zoom -- You can pan and zoom very quickly in an SVG image and not see any degradation of the image, and the system does not need to go back to the server for a new image.

ˇ Searchable and selectable text -- Unlike in bitmapped images, text in SVG text is selectable and searchable.For example, you can search for specific text strings, like city names in a map.

ˇ Interaction -- SVG enables dynamic and interactive graphics far more sophisticated than bitmapped solutions.Map features may be made selectable and interactive from within the browser.The user may theme a map, select objects, and manipulate layers - all without a network hop back to the server.

ˇ Animation -- SVG enables animation from within language definition itself, and through the combination of JavaScript and the SVG DOM.

ˇ Open standard -- SVG is an open recommendation developed by a cross-industry consortium.Unlike some other graphics formats and map file formats, SVG is not proprietary.

ˇ True XML -- As an XML grammar, SVG offers all the advantages of XML

ˇ Open Source Solution -- SVG can be applied to GIS projects, using entirely open source tools, thus reducing the cost of implementation.

A GIS Example
At Limbic Systems, we recently developed an internet-based mapping system for a customer using SVG.This project can be seen and used at www.custommapper.com.

The Custom Mapping System illustrates the power of SVG in the following ways:

Dynamic theme generation:

The user can "re-theme" the map as often as they like - and never have to go back to the server for a new image.The user can change data sets, change colors, change buckets, and change from count to range algorithms right in the safety of their own browser.

Layer control:

Layers are controlled from within the browser.Streets, labels, and boundaries may be toggled on and off through the JavaScript controls included on the page.

Pan and Zoom:

The map view port may be changed dynamically, a new image is never required and the quality of the pan and zoom is outstanding.

Text Placement and Sizing:

Labels may be moved and sized by the user dynamically.

Several vendors sell GIS extensions to MapInfo and ESRI products which export maps to SVG format, thus opening this exciting, interactive world to the GIS mainstream.Links to some of these vendors are below.

Conclusion

SVG is a powerful technology when applied to GIS applications.I've only touched on its capabilities and applicability to GIS in this article.

Mapping represents a perfect application for SVG technology.Maps are by nature vector layered representations of 2D space.The SVG specification embodies the same layering concepts that are fundamental to GIS to the presentation of that data.

SVG enables maps that are informative and interactive -without the problems inherent in other technologies such as Java applets.SVG empowers distributed GIS processing, by off-loading the interactive aspects of GIS from the server to the client and combines this interactivity with very high quality output capabilities.

SVG is not a replacement for all the capabilities of a full GIS system.Rather, it represents a new way to present quality geographic information to any user on the web.

This is an exciting technology, and it will be exciting to watch it's adoption within the GIS community.

BIO
George Seff has been using GIS since 1992 when as founder, president and CTO of All Points Software he brought GIS to field data collection systems.George recently served as CTO of Claritas for five years and is now the president of Limbic Systems, Inc.(www.limbicsystems.com) a software development company specializing in J2EE, database, data warehouse, data mining and GIS applications.George may be contacted by email by clicking HERE.

Links of Interest:
SVG is becoming very popular.The links listed below serve as only a starting point for exploring this technology.

Scalable Vector Graphics (SVG) 1.0 Specification
www.w3.org/TR/SVG/

The official W3C list of implementations of Scalable Vector Graphics (SVG)
www.w3.org/Graphics/SVG/SVG-Implementations

The Adobe SVG Zone and SVG Viewer Download area.
www.adobe.com/svg/main.html

Apache Batik - open source tools for SVG manipulation.Part of the Apache Project
xml.apache.org/batik/

Map2SVG is a Web publishing tool for MapInfo Professional
www.gis-news.de/svg/map2svg.htm

SVGMapper is a Web publishing tool for ESRI ArcView
www.svgmapper.com

Bookmark and Share

Your Comments
Post a comment
All comments provided in this section are those of the individual who has created the post. These are not the opinions of Directions Media, its editors, staff or owners unless otherwise noted. Directions Media retains the right to edit or delete any comments posted herein.

Doing a research on SVG (#1)
by Gollapalli Hari Prasad Reddy, FH-Karlsruhe, Germany
   
Date: September 25, 2004 22:20 PM
I am Mr. Gollapalli Hari Prasad Reddy doing final semester masters in Geomatics. Here I am doing my final project on EVALUATION OF SVG CONVERTING TOOLS FOR INTERNET MAPPING.
It deals with
1)what kind of tools available on the market.
2)How user friendly are these tools,
3)How good are the results after the convertion process from the cartographers point of view(In the sense of geo-visualisation)

So, Please help me in this regard.

Thanking you,
Gollapalli Hari Prasad Reddy
(haripreddy@gmail.com)


No Subject (#2)
by Sergey G, Future Vision
   
Date: July 11, 2005 11:37 AM
More examples of using flash technology for web maps you may see on
http://www.usflashmap.com


Advertisers