Web Mapping with SVG

November 6, 2004

Sharing is Caring

Scalable Vector Graphics (SVG), the industry standard vector graphics recommendation developed by the World Wide Web Consortium (W3C), is becoming a popular choice for rendering maps.This is especially true in the geospatial web software applications area, because SVG, an Extensible Markup Language (XML) encoding or grammar, is designed to work effectively across platforms, output resolutions, color spaces, and a range of available bandwidths.

SVG is well positioned to create a major impact on interactive web mapping because it is a rich modern graphics format providing the ability for better map display, and because it leverages many of the useful features of XML. Developed to describe rich, stylable, two-dimensional graphics, SVG includes advanced graphical features such as transparency, arbitrary geometry, filter effects (shadows, lighting effects, etc.), scripting, and animation (See "Scalable Vector Graphics (SVG): XML Graphics for the Web." Also, see the SVG specification at Apache.org.)

Today, a number of vendors provide rendering and editing software for SVG.Most implementations are based on the SVG 1.1 recommendation as the next version, 1.2, is still considered to be in draft form.For example, Batik, a Java™ based technology, provides a toolkit that can be used to build applications or applets that render or edit SVG documents.Adobe provides a free, downloadable viewing plug-in for Internet Explorer and Netscape (SVG site) that enables easy viewing of web SVG documents from your browser.

SVG Adoption on the Increase
While a number of geospatial web software vendors have supported generation of a vector map, some additional, typically proprietary, software is required in the web browser, either installed on the end client machine or loaded at run-time, as in the case of a Java™ applet.As a result, most web mapping software applications are still designed and built to generate raster maps such as GIF, JPEG, BMP, or PNG, which the browsers support rendering natively.For example, typing in an address at MapQuest or MSN MapPoint returns a raster map in GIF format.

At this time, SVG rendering also requires additional software beyond what is available with common browsers.But with the emergence of SVG as an industry standard, browser vendors are considering the adoption of native rendering support for SVG in the not-too-distant future.Some of the mainline geospatial web application providers have the capability built in to generate output formats in SVG.Others have add-on software provided by third-party suppliers to allow generation of the output map in SVG format.

Boosting Web Mapping Intelligence
There are a number of advantages and reasons to use a vector map, and specifically to use SVG.One of the main reasons is that you are then working with a much more "intelligent map," a "smart map." Rather than just a picture of a map (e.g., bytes designating a color to paint every pixel), there is actual intelligence at the feature instance level that makes the map much easier to work with.Take for example, a segment of Main Street.There is intelligence within the map that this linear segment extends from one particular X,Y point location to another.Typically, a transformation is understood that allows mapping from these X, Y points to real-world projected or geographic coordinates, which in turn makes it easier for the client to access that information.

Further, some pointer is typically stored with the vector element that provides an association to additional intelligent information.All of these features combine to provide a very intelligent, interactive user experience.As in the example sited, the user can hover his mouse over a segment of Main Street, and see it highlighted to show it is the current active element and a tool tip that indicates it is "Main Street." The user clicks the element to select it, knowing through visual indication that a hot spot is associated with it.Once selected, a more detailed attribute report is generated and/or a video is spawned showing a drive through of the street.Additionally, any supplemental information that the user might want or need can be associated with this real-world feature.

The interactivity available with SVG is helping boost efficiency in web portals in several state departments of transportation.SVG, incorporated in popular Web mapping technology, recently provided enhancements to the Florida Turnpike Enterprise's (FTE) Turnpike Enterprise Asset Management System (TEAMS) enterprise Web portal.The combination of Intergraph's Web mapping exporting capabilities and SVG enables FTE users to extract asset data from a user-defined area within the map using an intranet browser.This gives FTE users more immediate access to Florida Turnpike's asset data.

South Carolina's Hurricane Evacuation Decision Support Solution, newly enhanced with Web solutions that incorporates SVG provides better interactivity for automating reports as well as simplifying non-technical user operation.New functionality added to the system extends reporting capabilities to give officials more flexibility for traffic analysis during evacuations.In addition, the system can now generate analysis reports more quickly.For example, speed capacity reports previously took up to five minutes to download from the emergency center computers.Now they can be downloaded in seconds.

SCDOT Lane Reversal (photo credit Rob Thompson, South Carolin DOT).When traffic conditions warrant, SCDOT managers can close a highway to coast-bound traffic and use all lanes for evacuation, doubling the number of residents moving away from the storm's path.Click on image for larger view.

SCDOT's hurricane tracking chart shows the position of Hurricane Charley as it moves near the coast of South Carolina.The strength of the storm is designated by the color of the track line.Click image for larger view.

Map rendering is another area that will benefit from SVG. The rendering of a map is certainly dependent upon the rendering software used, but in general with SVG, the application can produce a very rich, modern depiction of the area specified.A vector map also minimizes the degradation as you zoom in on an area without regeneration of the map on the server side. Further, SVG provides the ability to produce a very rich rendering with features like translucent area fills, patterned area fills, gradient area fills, animation, shadowing, lighting effects, and more.

SVG has further proven its benefits as a tool that can be used in conjunction with Open Geospatial Consortium (OGC) standards, specifically OGC's Web Feature Service (WFS), a standard vector mapping web service, and Geographic Markup Language (GML), a standard XML encoding for communicating the resulting maps across the web.Because GML and SVG are both XML encodings, it is very straightforward to convert between the two using an XML Style Language Transformation (XSLT.) This gives an application a means of rendering GML, and in fact is the primary way that it has been accomplished among existing applications today.SVG provides an advantage of being able to leverage these industry standard tools that exist and that are being created to facilitate mapping interoperability.

SVG, with its ability to display richer maps more interactively, is becoming a popular format used to distribute maps by web mapping applications.Its popularity will continue to rise as more and more application developers realize that it helps in rendering maps that are interoperable and as visually rich, as possible - limited only by the imagination.

Sharing is Caring

Geospatial Newsletters

Keep up to date with the latest geospatial trends!

Sign up

Search DM

Get Directions Magazine delivered to you
Please enter a valid email address
Please let us know that you're not a robot by using reCAPTCHA.
Sorry, there was a problem submitting your sign up request. Please try again or email editors@directionsmag.com

Thank You! We'll email you to verify your address.

In order to complete the subscription process, simply check your inbox and click on the link in the email we have just sent you. If it is not there, please check your junk mail folder.

Thank you!

It looks like you're already subscribed.

If you still experience difficulties subscribing to our newsletters, please contact us at editors@directionsmag.com