Modeling of GIS- and LBS-specific Style Properties in SVG Documents

Thomas Brinkhoff
FH Oldenburg/Ostfriesland/Wilhelmshaven (University of Applied Sciences)
Institute for Applied Photogrammetry and Geoinformatics (IAPG)
D-26121 Oldenburg


SVG is very popular for displaying geospatial data. However, there are some limitations of SVG that make it difficult to get an adequate visual portrayal of maps. This holds for traditional GIS applications and even more for location-based services (LBS). These deficiencies are typically solved by adding complicated scripts to SVG. Instead, we propose a completely declarative approach. It adds an additional rule selector to CSS and is based on a model that unifies the OGC Styled Layer Descriptor (SLD) specification and the CSS specification.

Table of Contents

1. Introduction
2. Current Style Specification Standards
     2.1 Cascading Style Sheets
     2.2 Styled Layer Descriptors
     2.3 Discussion
3. A Unified Style Model
     3.1 External Parameters
4. Integration Into CSS and SVG
5. Application
6. Conclusions

1. Introduction

Scalable Vector Graphics (SVG) [SVG03] has become a very popular standard for displaying geospatial data. Many Geographic Information Systems (GIS) and GIS extensions offer interfaces for exporting SVG. There are also many web sites depicting SVG-based maps. However, there are some limitations of SVG that make its use difficult for GIS applications. These difficulties affect the adequate visual portrayal of geographic data. In a traditional GIS, it is possible to describe style properties for particular layers depending on scale ranges and other GIS-specific (i.e. non-spatial, spatial and spatio-temporal) attributes in order to support an offline generalization. SVG, however, does not support such dependencies by predefined elements or attributes.

Location-based Services (LBS), which use the current position of the user to determine relevant information, and other types of Mobile GIS have further demands on the presentation of maps. These requirements result from the varying position and orientation of the user and from typical applications performed on mobile devices [EGE04]. For these needs, declarative solutions are also missing in SVG.

For XML applications like SVG, style properties like colors, the size of symbols and fill styles should be defined by Cascading Style Sheets (CSS) [CSS98]. They allow authors to attach style to XML and other structured documents like HTML. CSS as it is used by SVG does not support special GIS- and LBS-specific demands. Examples are the missing support of geometric and topological operators as well as the absence of scale ranges.

In the GIS area, the Styled Layer Descriptor Implementation Specification (SLD) [SLD02] of the Open GeoSpatial Consortium (OGC) is the relevant specification for defining the adequate visual portrayal of geographic data. SLD defines a map-styling language for producing geo-referenced maps with user-defined styling. It supports geometric and topological operators as well as logical operators in filters. SLD also allows defining scale ranges as additional filter conditions. Symbols are styled by using CSS parameters of SVG. SLD has some drawbacks, too: For example, it does not support styles depending on document hierarchies like the Document Object Model (DOM). Furthermore, special LBS demands are not supported.

The deficiencies of SVG and CSS for an adequate styling of geospatial data are typically solved by adding relatively complicated scripts. In consequence, SVG is losing its declarative characteristics. Therefore, we strive for a declarative approach that allows modeling GIS- and LBS-specific style properties in SVG documents. For this objective, we follow up the following course:

  1. We unify CSS and SLD by one style model.
  2. We extend this model for supporting further requirements of GIS and LBS.
  3. We integrate the style model into SVG by extending the CSS specifications and by adding rules into SVG defs elements.

The rest of this paper is organized as follows: In the next section, the main properties of CSS and SLD are presented. Then, the unified style model is explained. The following section proposes an approach for integrating this style model into SVG and presents examples. The paper concludes with a short summary and an outlook on future work.

2. Current Style Specification Standards

2.1 Cascading Style Sheets

Cascading Style Sheets (CSS) allow authors to attach style to structured documents like HTML pages and XML documents. The current version of CSS is level 2 (CSS2) [CSS98]. Figure 1 depicts a simplified UML class diagram of CSS2.


Figure 1: Simplified data model of CSS2

A stylesheet contains a list of statements. Statements are mostly so-called rulesets. A ruleset consists of selectors and declarations. In Example 1, text and, e.g., are selectors and the parts delimited by curly brackets after the selectors contain the declarations. Each declaration consists of the name of a property and its value. Selectors allow determining elements for that a declaration should be applied. Type selectors match the name of elements (e.g., rect and text in the example). Attribute selectors allow selecting elements that have the particular attribute or that have the particular attribute matching or containing or starting with a defined attribute value (like line[x1="10"]). A special case of attribute selectors are class selectors and ID selectors. Class selectors determine elements with matching class attributes; they can be applied to any element (.important) or only to special elements ( ID selectors look for an element having the specified id attribute. The descendant selector, the child selector and the adjacent sibling selector support the tree structure of the DOM.

@media all {
  rect { 
    fill: red; stroke: blue; stroke-width: 1px;
  } {
    fill: yellow; stroke: rgb(255,200,0);
  .important {
    fill: none; stroke: green;
  text {
    font-family: sans-serif; stroke: red; opacity: 1;
  line[ x1 = "10“ ] {
    fill: none; stroke: black;
  :hover {
    stroke: red;
@media printer {
  rect { stroke-width: 5px; }

Example 1: Example of a CSS stylesheet

For interaction purposes, the pseudo-class selector is of special interest. The :hover pseudo class in the example applies while the user designates an element with some pointing device, but does not activate it. At-rules allow defining CSS properties that are only designed for certain media. In the example, the @media all includes the styles for all media types, whereas @media printer defines special properties holding for printers.

2.2 Styled Layer Descriptors

The OGC has proposed the Styled Layer Descriptor Implementation Specification (SLD) [SLD02]. This document specifies the format of a map-styling language for producing geo-referenced maps with user-defined styling. A slightly modified and extended version of SLD has been proposed by the OGC Discussion Paper Style Management Service (SMS) [SLD03]. Figure 2 shows an extract of SLD using UML.


Figure 2: Simplified Data Model of SLD according to [SLD03]

Features are geospatial objects each defined by a feature type. The location of a feature is specified by one spatial attribute. Further spatial properties may be stored in additional attributes. A feature type may establish additional non-spatial attributes. A feature belongs to one layer storing features of the same feature type. A map displayed by an application consists of one or more layers.

The style definitions of SLD are connected to feature types: FeatureStyle elements reference the name of feature types. Rules are used to select rendering instructions. A FeatureStyle may have several rules. In this case, they are ordered according to their “priority”. Conditions concerning feature properties can be defined by a Filter element [FE02]. The OGC Filter Encoding Specification allows using geometric and topological operators of the OGC Simple Features Specification (SFA) [SF99]. Instead of the Filter element, a rule can use the ElseFilter element. SLD also supports conditions concerning the visualization: the MinScaleDenominator and MaxScaleDenominator define the scale range for a rule. A rule holds, if both, the filter and the scale range hold. Therefore, the same filter element and / or scale range may occur in more than one rule of the same FeatureStyle.

Symbols are embedded inside of rules. They describe how a feature is to appear on a map. Five types of symbols exist: LineSymbol, PolygonSymbol, PointSymbol, TextSymbol, and RasterSymbol. Their properties can be described by one or more CSS parameters defined by the SVG specification [SVG03]. On this level, a further selection may be performed: the Geometry element allows the specification of the name of the feature attribute (PropertyName) storing the affected geometry [WFS02].

Example 2 shows an SLD document according to the [SLD03] specification.

<FeatureStyle version="1.0.20" xmlns=""
      <Geometry> <ogc:PropertyName>center-line</ogc:PropertyName> </Geometry>
        <SvgParameter name="stroke">#aaaaff</SvgParameter>
        <SvgParameter name="stroke-width">5.0</SvgParameter>
    <ElseFilter />
      <Geometry> <ogc:PropertyName>center-line</ogc:PropertyName> </Geometry>
        <SvgParameter name="stroke">blue</SvgParameter>
        <SvgParameter name="stroke-width">10.0</SvgParameter>

Example 2: SLD example

2.3 Discussion

CSS2 as well as SLD show some deficiencies for defining style properties of geospatial objects in SVG [BRI05]:

3. A Unified Style Model

CSS2 as well as SLD are not sufficient to fulfill some essential requirements of current GIS. Furthermore, the demands of LBS are almost completely ignored. Therefore, the most promising approach is to use CSS and SLD as a starting point for the development of an adequate style model for GIS and LBS.

Our style model [BRI05] is based on SLD, but in addition we

The SLD model is augmented by elements allowing CSS selectors like the class selector and the ID selector. Further additions are pseudo-class selectors and a MediaType element. Besides of traditional media types, types like “main map” and “overview map” are possible defining different styles for simultaneously visualized maps. For a more detailed presentation of these extensions see [BRI05].

3.1 External Parameters

External parameters used by the SLD Filter element allow considering the external state and increase the flexibility of the style model. In the SLD model, only the attributes of features may influence the style properties of symbols. In case of external parameters, the styling may additionally be affected by parameters that are not attributes of the corresponding feature or by any feature at all. An example for an external parameter is the current scale. It allows omitting the specific SLD elements MinScaleDenominator and MaxScaleDenominator.

Other external parameters may be the current date and the current time. In case of LBS, e.g., a time-dependent visualization of symbols could be used for changing the display at night like it is done by state-of-the-art navigation systems. Further LBS-relevant external parameters are the current location and altitude. The current speed should also influence the map visualization. For example, the selection and amount of data that a car driver can perceive depends on the speed of the car. Another important (future) property of mobile devices is their current orientation.

Figure 3 shows the modification of SLD rules by a UML class diagram and Example 3 depicts an example using two external parameters.


Figure 3: Usage of external parameters in extended SDL rules

<FeatureStyle version="...">
      <Abstract>Styling dependent on current scale</Abstract>
      <Abstract>Styling dependent on current position</Abstract>
        <Distance unit=”#meters”>10</Distance>

Example 3: Extended SLD rules using external parameters

4. Integration Into CSS and SVG

For integration of rules into CSS and SVG documents, CSS statements must be connected with an extended SLD rule. Therefore, we require (a) declarations of rules and (b) links between CSS statements and these rules.

CSS statements cannot be directly referenced in SVG documents. Therefore, only two approaches remain: (1) SVG shape elements reference rules and rules are selected and styled by CSS statements. (2) CSS statements select rules and (as usual) SVG shapes. We decided to use the second way because it more similar to the present standard and avoids the indirect styling of shapes by styled rules. In CSS, selections are performed by selectors and at-rules. An extension of at-rules is conceivable. In most cases, an enhancement of statements by an additional rule selector will be more suitable. The rule selector references an (extended) SLD rule consisting of a Filter element or an ElseFilter element.

Styled layer descriptors consist of XML fragments. Therefore, rules should be declared in the SVG document. An obvious solution is to store rules as child elements of SVG defs elements. In this case, a rule can be defined as follows (sld is the namespace of the [SLD03] specification and svggeo of the presented extensions):

<xsd:element name="Rule">
      This modified SLD Rule excludes the elements 
      sld:MinScaleDenominator and sld:MasScaleDenominator
      and uses a modified Filter specification.
      <xsd:element ref="sld:Name" minOccurs="0"/>
      <xsd:element ref="sld:Description" minOccurs="0"/>
      <xsd:element ref="sld:LegendGraphic" minOccurs="0"/>
      <xsd:choice minOccurs="0">
        <xsd:element ref="svggeo:Filter"/>
        <xsd:element ref="sld:ElseFilter"/>
      <xsd:element ref="sld:Symbol" maxOccurs="unbounded"/>

The definition svggeo:Filter corresponds to the OGC Filter Encoding Implementation Specification [FE02] with one exception: The occurrences of

<xsd:element ref="ogc:PropertyName"/>

are replaced by:

  <xsd:element ref="svggeo:EPName"/>
  <xsd:element ref="svggeo:SvgShapeGeometry"/>

svggeo:EPName allows using the predefined names of external parameters like curr-scale and curr-position in filter conditions. The other choice is required for referencing the geometry of SVG shapes in filters. Often this will be the SVG shape for that the CSS statement and the corresponding rule is applied. In other cases, the CSS statement and the corresponding rule will be applied for a group element containing several shapes. In this case, the SVG shape(s) must be specified that should be used by the rule. Therefore, the svggeo:SvgShapeGeometry element contains a XPath expression [XPT99] that references the relevant shape(s). If more than one shape is referenced, their geometric union will be used in the filter condition.

In order to simplify the referencing by rule selectors, the name element of SLD rules is replaced by an ID attribute. In Example 4, two rules are shown.

  <svggeo:Rule id="ruledef1">
  <svggeo:Rule id="ruledef2">
    <svggeo:ElseFilter />

Example 4: Example for (extended) SLD rules as child of a SVG defs element

The next figure depicts the extended definition of CSS selectors in UML.


Figure 4: The new rule selector in CSS selectors

Rule selectors may be used in CSS as follows:

path.Street [rule: url(#ruledef1)] {
  visibility: visible;
  fill: none; stroke: rgb(153,204,153); stroke-width: 10;
path.Street [rule: url(#ruledef2)] { visibility: hidden; }

5. Application

Rules can be defined for CSS statements that declare the graphical rendering of border colors, fill patterns, line widths etc. More thrilling is the application of rules to CSS statement that define the visibility and existence of shapes.

The attribute visibility allows excluding shapes from being visualized by the user agent. The visibility property refers to elements that exist for the user agent. In combination with rules, it allows a map generalization by replacing the representation of a feature depending on the current scale. The two CSS statements in the previous section combined with the two rules of Example 4 are an example for such an application.

The other SVG property controlling the visibility of elements is the display attribute. It allows distinguishing between shapes existent and non-existent for the user agent. The change of display from hidden to inline can be used for loading a shape like an image afterwards. For mobile GIS applications and LBS this a very useful property in case of getting data via (wireless) network connections. It will be typically triggered by a change in scale or by a modified position of the mobile device. The definitions shown in the example below define a loading depending on the distance between the current position and the area covered by raster maps. This approach is completely declarative and does not require additional scripts. Changing display from inline to hidden allows the user agent to unload the corresponding shapes. An unloading depending on position and/or scale is especially important for mobile GIS applications having only limited memory.

image.rastermap [rule:url(#loadrule)] { display: inline; }
image.rastermap [rule:url(#unloadrule)] { display: hidden; }

Example 5: (Un)Loading: part of CCS file for the SVG document of Example 6

  <svggeo:Rule id="loadrule">
  <svggeo:Rule id="unloadrule">
    <svggeo:Else />

<svg:image class="rastermap" xlink:href="myimage.gif"
           x="200" y="200" width="100" height="100">
  <svg:title>The raster map</svg:title>

Example 6: (Un)Loading: parts of SVG document

6. Conclusions

In this paper, we integrated a unified style model of SLD (Styled Layer Descriptors) and CSS (Cascading Style Sheets) into SVG for supporting an adequate styling of geospatial data. Our approach remains completely declarative not requiring the programming of complicated scripts by the users. It adds an additional rule selector to CSS for referencing rules of the style model that are defined in the defs element of SVG. Some examples of application were presented.

Currently, we are extending an existing prototype of a mobile SVG viewer in order to demonstrate the suitability of our approach and to allow an investigation of performance issues. Furthermore, the feasibility of the model should be demonstrated by case studies.

Further information can be found at:


I would like to thank Jürgen Weitkämper for very valuable discussions. This work was funded by the AGIP program “Praxisnahe Forschung und Entwicklung an niedersächsischen Fachhochschulen“. This support is gratefully acknowledged.


Brinkhoff Th. : "Towards a Declarative Portrayal and Interaction Model for GIS and LBS" Proceedings 8th AGILE Conference on Geographic Information Science, Estoril, Portugal, 449-458 , 2005
Brinkhoff Th. Weitkämper J. : "Mobile Viewers based on SVG±geo and XFormsGI" Proceedings 8th AGILE Conference on Geographic Information Science, Estoril, Portugal, 599-604 , 2005
Egenhofer M. : "Going Mobile with GIS, Invited Talk (Quicktime Movie)" 3. GI-Tage, Münster, Germany , 2004
Open GeoSpatial Consortium, Inc. : "Simple Features Specification for SQL, Revision 1.1" , 1999
Open GeoSpatial Consortium, Inc. : "Filter Encoding Implementation Specification, Version 1.0.0" , 2001
Open GeoSpatial Consortium, Inc. : "Styled Layer Description Implementation Specification, Version 1.0.0" , 2002
Open GeoSpatial Consortium, Inc. : "Web Feature Service Implementation Specification, Version 1.0.0" , 2002
Open GeoSpatial Consortium, Inc. : "Style Management Service (SMS), OpenGIS Discussion Paper, Version 0.0.9" , 2003
Wide Web Consortium : "Cascading Style Sheets, Level 2, CSS 2 Specification, W3C Recommendation" , 1998
Wide Web Consortium: : "Scalable Vector Graphics (SVG) 1.1 Specification, W3C Recommendation" , 2003
Wide Web Consortium: : "XML Path Language (XPath), Version 1.0, W3C Recommendation" , 1999

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.