Web Mapping with SVG
Added 29 Jul 2008
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.
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.